Hi, Even @media -inject-html will require rules. I think we want the syntax to be CSS compliant.
We can make sure that there are no duplicates whether we use @media or inject in the main rules. BTW, I added @font-face to the compiler CSS tests and it seems to pass through to the output just fine. Thoughts? -Alex On 3/15/18, 1:28 AM, "[email protected] on behalf of Carlos Rovira" <[email protected] on behalf of [email protected]> wrote: >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://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Ffo >>nts.googleapis.com%2Fcss%3Ffamily%3DLato&data=02%7C01%7Caharui%40adobe.co >>m%7Ccaaf64bb0d064b0e737708d58a4ec61c%7Cfa7b1b5a7b34438794aed2c178decee1%7 >>C0%7C0%7C636566993294846159&sdata=sOtyH7TJhxDM5O%2Bdr%2F7XUWn24ErzNkElo1s >>Y4wIrr8g%3D&reserved=0" >> 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 >https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2 >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Ccaaf64bb0d064b0e737708d5 >8a4ec61c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636566993294846159&s >data=wY%2F503X7jzBNrI3sYrAc3nlecUShsqZ77RQ44d2ut7w%3D&reserved=0
