Hi, from Alex email, I think I prefer something like
@media -inject_html Since is most near to what this will do (insert one line in the final HTML), and seems the most simple to do. The others seems more problematic, since each rule would need one inject, and you'll probably must not duplicate the same insertion multiple times. I already see that having a Class to inject a font is a hack, so this would be something in the right path 2018-03-14 20:52 GMT+01:00 OmPrakash Muppirala <[email protected]>: > On Mar 14, 2018 12:34 PM, "Alex Harui" <[email protected]> wrote: > > Hi Om, > > Is this a separate topic? > > > Quite possible 😊 Sorry for the noise. > > > If you are asking for @font-face to be passed > through to the final css we can figure out how to do that if that doesn't > work already, but I think I'm asking about <link> tags in the HTML. Is > that different or the same? Carlos wants to inject: > > <link href="https://fonts.googleapis.com/css?family=Lato"; > rel="stylesheet"> > > > Yes you are correct. There is no escaping injecting this piece of html. > > One alternative is allow user to provide a index.html file, where they can > add whatever they want. If the compiler sees a index.html, it will reuse > it. If not, it will create a new one and use that. > > Thoughts? > > Thanks, > Om > > > > > Isn't that a bit different? > > -Alex > > On 3/14/18, 12:04 PM, "[email protected] on behalf of OmPrakash Muppirala" > <[email protected] on behalf of [email protected]> wrote: > > >Ignoring the behind the screen mechanics, as a developer, I would like > >something like this: > > > >*styles.css:* > > > >@font-face { > > font-family: error; > > src: url(helvetica_bold.woff); > >} > > > >@font-face { > > font-family: warning; > > src: url(sans_light.woff); > >} > > > >.error { > > color: red; > > font-family: error; > >} > > > >.warning { > > color: orange; > > font-family: warning; > >} > > > > > >*Component.as:* > > > >package components { > > import styles.css; > > import org.apache.royale.core.WrappedHTMLElement; > > import org.apache.royale.html.util.addElementToWrapper; > > import org.apache.royale.core.UIBase; > > > > public class Component extends UIBase { > > private var myStyles:CSS = styles.css; > > private var myDiv: WrappedHTMLElement = > >addElement.wrapper(this,'div'); > > > >//Elsewhere: > > if(condition) { > > myDiv.className = myStyles.classNames.error; > > } > > else { > > myDiv.className = myStyles.classNames.warning; > > } > > > > } > >} > > > > > >The act of "importing" the styles.css should automatically inject the > >appropriate html for importing the css file. > >The CSS class can be a simple object (with perhaps some util methods) > >which > >is constructed by reading all the classnames in the css file. > > > >This approach is sort of inspired from the CSS Modules component used in > >React development here [1] > > > >Just my 2 cents. > > > >Thanks, > >Om > > > >[1] > >https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fgithub.co > >m%2Fgajus%2Freact-css-modules&data=02%7C01%7Caharui%40adobe.com > %7Cd03e7327 > >d00849781ae908d589de7d38%7Cfa7b1b5a7b34438794aed2c178de > cee1%7C0%7C0%7C6365 > >66511032068655&sdata=X070alK2%2B289tVP6v9xYazcztqtsEmqPiTaPA > 9UxITM%3D&rese > >rved=0 > > > >On Wed, Mar 14, 2018 at 10:09 AM, Alex Harui <[email protected]> > >wrote: > > > >> The Jewel Theme wants to add a <link> element to the HTML to bring in a > >> font. The <inject_html> directive was introduced to add elements to the > >> HTML needed for code in the class decorated by the <inject_html>. > >>Jewel > >> is using a dummy class with <inject_html> which probably means that the > >>AS > >> code doesn't need the link element, but the CSS in the theme does. > >> > >> IMO, that means that there should be a directive in CSS that also > >>injects > >> html. I don't think comments are retained in CSS, so using inject_html > >>in > >> a comment is not something I would recommend. IMO, the directive should > >> be on/in the selectors that need it, and not at the file level. > >> > >> One way to do this would be a fake media-query like: > >> > >> @media -inject_html > >> > >> That could contain selectors with fake properties like: > >> > >> Button { > >> foo: <link .... /> > >> } > >> > >> If a Button is used in the app, then the compiler would see the Button > >> selector in the -inject_html media, and inject the html for every > >>property > >> in the selector. IOW, if you did: > >> > >> Button { > >> foo: <link .... /> > >> bar: <style ... /> > >> } > >> > >> Then both link and style would be injected into the output HTML. > >> > >> Another approach would be to introduce a special inject_html property > >>that > >> you would use in the selector as needed. So, if Button sets > >> font-family="Lato" it would also set inject_html like below: > >> > >> Button { > >> font-family: Lato; > >> inject-html: <link ... /> > >> } > >> > >> > >> This has the advantage of keeping the links with the font-family that > >> needs it, but you will have to duplicate inject-html in each of the > >> selectors that need it. > >> > >> Other ideas are welcome. Thoughts? > >> -Alex > >> > >> > -- Carlos Rovira http://about.me/carlosrovira
