Hi Om, Is this a separate topic? 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"> 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%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365 >66511032068655&sdata=X070alK2%2B289tVP6v9xYazcztqtsEmqPiTaPA9UxITM%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 >> >>
