You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Alex Harui <ah...@adobe.com.INVALID> on 2018/03/14 17:09:52 UTC
Inject a Font
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
Re: Inject a Font
Posted by Carlos Rovira <ca...@apache.org>.
Thanks Jason,
I tried it but the compiler complains I'll fill a bug, it seems not
prepared for @import
but I saw the following in the same page
"You shoud avoid the use of @import because it will defer the loading of
the included resource until the file is fetched. See the detailed answer
here stackoverflow.com/a/12380004/925560"
I read about the problems of @import in general, so I think that solution
is not good
But thanks for suggesting it! :)
PD The error in the compiler is:
[INFO] Executing MXMLC in tool group Royale with args:
[-load-config=/Users/carlosrovira/Dev/Royale/Source/royale-asjs/examples/royale/JewelExample/target/compile-app-config.xml,
-js-output=/Users/carlosrovira/Dev/Royale/Source/royale-asjs/examples/royale/JewelExample/target/javascript,
-compiler.targets=JSRoyale,SWF,
/Users/carlosrovira/Dev/Royale/Source/royale-asjs/examples/royale/JewelExample/src/main/royale/App.mxml]
Internal error: java.util.EmptyStackException
java.util.Stack.peek(Stack.java:102)org.apache.royale.compiler.internal.css.CSSTree.compoundSelector(CSSTree.java:924)org.apache.royale.compiler.internal.css.CSSTree.selectorGroup(CSSTree.java:847)org.apache.royale.compiler.internal.css.CSSTree.ruleset(CSSTree.java:782)org.apache.royale.compiler.internal.css.CSSTree.stylesheet(CSSTree.java:289)org.apache.royale.compiler.internal.css.CSSDocument.parse(CSSDocument.java:81)org.apache.royale.compiler.internal.caches.CSSDocumentCache$CSSDocumentCacheKey.parse(CSSDocumentCache.java:251)org.apache.royale.compiler.internal.caches.CSSDocumentCache.createEntryValue(CSSDocumentCache.java:337)org.apache.royale.compiler.internal.caches.CSSDocumentCache.createEntryValue(CSSDocumentCache.java:55)org.apache.royale.compiler.internal.caches.ConcurrentCacheStoreBase.get(ConcurrentCacheStoreBase.java:69)org.apache.royale.compiler.internal.caches.CSSDocumentCache.getDefaultsCSS(CSSDocumentCache.java:381)org.apache.royale.compiler.internal.css.CSSManager.getCSSFromThemes(CSSManager.java:246)org.apache.royale.compiler.internal.targets.RoyaleJSTarget.collectThemes(RoyaleJSTarget.java:239)org.apache.royale.compiler.internal.targets.RoyaleJSTarget.findAllCompilationUnitsToLink(RoyaleJSTarget.java:177)org.apache.royale.compiler.internal.targets.Target.buildAllCompilationUnits(Target.java:297)org.apache.royale.compiler.internal.targets.Target.getBuiltCompilationUnitSet(Target.java:306)org.apache.royale.compiler.internal.targets.JSTarget.buildAndCollectProblems(JSTarget.java:186)org.apache.royale.compiler.internal.targets.JSTarget.build(JSTarget.java:114)org.apache.royale.compiler.internal.targets.JSTarget.build(JSTarget.java:226)org.apache.royale.compiler.clients.MXMLJSCRoyale.buildApplication(MXMLJSCRoyale.java:455)org.apache.royale.compiler.clients.MXMLJSCRoyale.buildJSTarget(MXMLJSCRoyale.java:420)org.apache.royale.compiler.clients.MXMLJSCRoyale.buildArtifact(MXMLJSCRoyale.java:411)org.apache.royale.compiler.clients.MXMLJSCRoyale.compile(MXMLJSCRoyale.java:308)org.apache.royale.compiler.clients.MXMLJSCRoyale._mainNoExit(MXMLJSCRoyale.java:240)org.apache.royale.compiler.clients.MXMLJSCRoyale.mainNoExit(MXMLJSCRoyale.java:197)org.apache.royale.compiler.clients.MXMLJSC._mainNoExit(MXMLJSC.java:345)org.apache.royale.compiler.clients.MXMLJSC.mainNoExit(MXMLJSC.java:281)org.apache.royale.compiler.clients.MXMLJSC.execute(MXMLJSC.java:212)org.apache.royale.maven.BaseMojo.execute(BaseMojo.java:302)org.apache.royale.maven.CompileAppMojo.execute(CompileAppMojo.java:107)org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo(DefaultBuildPluginManager.java:134)org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:208)org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:154)org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:146)org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:117)org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:81)org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder.build(SingleThreadedBuilder.java:51)org.apache.maven.lifecycle.internal.LifecycleStarter.execute(LifecycleStarter.java:128)org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:309)org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:194)org.apache.maven.DefaultMaven.execute(DefaultMaven.java:107)org.apache.maven.cli.MavenCli.execute(MavenCli.java:955)org.apache.maven.cli.MavenCli.doMain(MavenCli.java:290)org.apache.maven.cli.MavenCli.main(MavenCli.java:194)sun.reflect.NativeMethodAccessorImpl.invoke0(Native
Method)sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)java.lang.reflect.Method.invoke(Method.java:498)org.codehaus.plexus.classworlds.launcher.Launcher.launchEnhanced(Launcher.java:289)org.codehaus.plexus.classworlds.launcher.Launcher.launch(Launcher.java:229)org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitCode(Launcher.java:415)org.codehaus.plexus.classworlds.launcher.Launcher.main(Launcher.java:356)
2018-03-15 18:12 GMT+01:00 Jason Guild <ja...@alaska.gov>:
> Carlos:
>
> There is also CSS3 @import directive to get the Google-generated rules
> into the runtime [0].
> Then there is no need to inject a <link> tag into the HTML at all.
>
> Jason
>
> [0] https://stackoverflow.com/questions/14676613/how-to-import-
> google-web-font-in-css-file
>
>
> On 3/15/2018 8:36 AM, Carlos Rovira wrote:
>
>> we could add this directly, and I thought about this, but I think is
>> better
>> to inject the link line since is less code and we left to google what code
>> serve us.
>>
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Inject a Font
Posted by Jason Guild <ja...@alaska.gov>.
Carlos:
There is also CSS3 @import directive to get the Google-generated rules
into the runtime [0].
Then there is no need to inject a <link> tag into the HTML at all.
Jason
[0]
https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file
On 3/15/2018 8:36 AM, Carlos Rovira wrote:
> we could add this directly, and I thought about this, but I think is better
> to inject the link line since is less code and we left to google what code
> serve us.
Re: Inject a Font
Posted by Carlos Rovira <ca...@apache.org>.
Hi,
font-face is needed as well, although the inject is the most simple. When
you inject the link font line for google you'll get this on runtime:
/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(
https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2)
format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(
https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
we could add this directly, and I thought about this, but I think is better
to inject the link line since is less code and we left to google what code
serve us.
I think this will be the use 99% of times, since today all fonts comes from
google, or at least this seems to me.
Maybe for SWF could have more use, but right now I don't now.
Thanks
2018-03-15 17:05 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
> 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, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> 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 <bi...@gmail.com>:
> >
> >> On Mar 14, 2018 12:34 PM, "Alex Harui" <ah...@adobe.com.invalid>
> 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%7Cfa7b1b5a7b34438794aed2c178de
> cee1%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, "omuppi1@gmail.com on behalf of OmPrakash
> >>Muppirala"
> >> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> 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 <aharui@adobe.com.invalid
> >
> >> >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
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Inject a Font
Posted by Alex Harui <ah...@adobe.com.INVALID>.
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, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> 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 <bi...@gmail.com>:
>
>> On Mar 14, 2018 12:34 PM, "Alex Harui" <ah...@adobe.com.invalid> 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, "omuppi1@gmail.com on behalf of OmPrakash
>>Muppirala"
>> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> 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 <ah...@adobe.com.invalid>
>> >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
Re: Inject a Font
Posted by Carlos Rovira <ca...@apache.org>.
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 <bi...@gmail.com>:
> On Mar 14, 2018 12:34 PM, "Alex Harui" <ah...@adobe.com.invalid> 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, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> 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 <ah...@adobe.com.invalid>
> >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
Re: Inject a Font
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Mar 14, 2018 12:34 PM, "Alex Harui" <ah...@adobe.com.invalid> 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, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> 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 <ah...@adobe.com.invalid>
>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
>>
>>
Re: Inject a Font
Posted by Alex Harui <ah...@adobe.com.INVALID>.
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, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> 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 <ah...@adobe.com.invalid>
>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
>>
>>
Re: Inject a Font
Posted by OmPrakash Muppirala <bi...@gmail.com>.
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://github.com/gajus/react-css-modules
On Wed, Mar 14, 2018 at 10:09 AM, Alex Harui <ah...@adobe.com.invalid>
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
>
>