You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Carlos Rovira <ca...@apache.org> on 2018/02/10 18:26:28 UTC

vars in CSS

Hi

I'm figuring how to configure easy colors in CSS in a reusable way.

I get to CSS vars:

https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_variables

but something like the basic example described in that CSS makes the
compiler breaks:

java.util.NoSuchElementException: can't look backwards more than one token
in this stream org.antlr.runtime.misc.LookaheadStream.LB
(LookaheadStream.java:159)org.antlr.runtime.misc.LookaheadStream.LT(LookaheadStream.java:120)org.antlr.runtime.RecognitionException.extractInformationFromTreeNodeStream(RecognitionException.java:144)org.antlr.runtime.RecognitionException.<init>(RecognitionException.java:111)org.antlr.runtime.MismatchedTreeNodeException.<init>(MismatchedTreeNodeException.java:42)org.antlr.runtime.tree.TreeParser.recoverFromMismatchedToken(TreeParser.java:135)org.antlr.runtime.BaseRecognizer.match(BaseRecognizer.java:115)org.apache.royale.compiler.internal.css.CSSTree.declarationsBlock(CSSTree.java:1725)org.apache.royale.compiler.internal.css.CSSTree.ruleset(CSSTree.java:786)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.getDefaultCSS(CSSManager.java:182)org.apache.royale.compiler.internal.targets.RoyaleJSTarget.getAllDefaultCSS(RoyaleJSTarget.java:289)org.apache.royale.compiler.internal.targets.RoyaleJSTarget.findAllCompilationUnitsToLink(RoyaleJSTarget.java:195)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:343)org.apache.royale.compiler.clients.MXMLJSC.mainNoExit(MXMLJSC.java:279)org.apache.royale.compiler.clients.MXMLJSC.execute(MXMLJSC.java:210)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:993)org.apache.maven.cli.MavenCli.doMain(MavenCli.java:345)org.apache.maven.cli.MavenCli.main(MavenCli.java:191)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)



Should vars be supported?

In the other hand, what do you think about this approach to make CSS
reusable?

thanks

-- 
Carlos Rovira
http://about.me/carlosrovira

Re: vars in CSS

Posted by Gabe Harbs <ha...@gmail.com>.
Try using @namespace "http://www.w3.org/1999/xhtml”;

> On Feb 10, 2018, at 8:26 PM, Carlos Rovira <ca...@apache.org> wrote:
> 
> Hi
> 
> I'm figuring how to configure easy colors in CSS in a reusable way.
> 
> I get to CSS vars:
> 
> https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_variables
> 
> but something like the basic example described in that CSS makes the
> compiler breaks:
> 
> java.util.NoSuchElementException: can't look backwards more than one token
> in this stream org.antlr.runtime.misc.LookaheadStream.LB
> (LookaheadStream.java:159)org.antlr.runtime.misc.LookaheadStream.LT(LookaheadStream.java:120)org.antlr.runtime.RecognitionException.extractInformationFromTreeNodeStream(RecognitionException.java:144)org.antlr.runtime.RecognitionException.<init>(RecognitionException.java:111)org.antlr.runtime.MismatchedTreeNodeException.<init>(MismatchedTreeNodeException.java:42)org.antlr.runtime.tree.TreeParser.recoverFromMismatchedToken(TreeParser.java:135)org.antlr.runtime.BaseRecognizer.match(BaseRecognizer.java:115)org.apache.royale.compiler.internal.css.CSSTree.declarationsBlock(CSSTree.java:1725)org.apache.royale.compiler.internal.css.CSSTree.ruleset(CSSTree.java:786)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.getDefaultCSS(CSSManager.java:182)org.apache.royale.compiler.internal.targets.RoyaleJSTarget.getAllDefaultCSS(RoyaleJSTarget.java:289)org.apache.royale.compiler.internal.targets.RoyaleJSTarget.findAllCompilationUnitsToLink(RoyaleJSTarget.java:195)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:343)org.apache.royale.compiler.clients.MXMLJSC.mainNoExit(MXMLJSC.java:279)org.apache.royale.compiler.clients.MXMLJSC.execute(MXMLJSC.java:210)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:993)org.apache.maven.cli.MavenCli.doMain(MavenCli.java:345)org.apache.maven.cli.MavenCli.main(MavenCli.java:191)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)
> 
> 
> 
> Should vars be supported?
> 
> In the other hand, what do you think about this approach to make CSS
> reusable?
> 
> thanks
> 
> -- 
> Carlos Rovira
> http://about.me/carlosrovira


Re: vars in CSS

Posted by Alex Harui <ah...@adobe.com.INVALID>.
I tried to fix most of the advanced selectors for test cases folks brought
up, but things like CSS vars were not tested.  You can look at the tests
we do have to see what was tested.

You can't put in Type Selectors for HTML Elements without specifying the
HTML namespace for them.  Maybe that's what you ran into.

The Express set is supposed to be pre-compositions of Basic beads and not
a whole lot of new functionality.  So I would not want to see you make
changes directly to Express components if your implementation isn't more
composition of beads.

If you are creating a new SWC and your question is whether to start by
subclassing Basic or Express, I don't think it really matters.

My 2 cents,
-Alex

On 2/11/18, 8:40 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:

>Hi Harbs,
>
>when I tried to recreate MDL blog I found some CSS rules not working. I
>think ">" was one, but there was something more
>
>I think those rules in the compiler should be reviewed in order to make it
>work to have the most complete CSS support
>
>2018-02-11 13:00 GMT+01:00 Gabe Harbs <ha...@gmail.com>:
>
>> No. I think it was the “>” operator which didn’t work, but I don’t
>> remember for sure.
>>
>> > On Feb 11, 2018, at 1:53 PM, Piotr Zarzycki
>><pi...@gmail.com>
>> wrote:
>> >
>> > Hi Harbs,
>> >
>> > Are you saying that without this namespace following situation didn't
>> work?
>> >
>> > .myCss {
>> > }
>> >
>> > .myCss .newCss {
>> > }
>> >
>> > Thanks,
>> > Piotr
>> >
>> > On Sun, Feb 11, 2018, 10:27 Gabe Harbs <ha...@gmail.com> wrote:
>> >
>> >> If it could work on Express, even better, but my impression was that
>>the
>> >> structure was going to have to change pretty significantly in some
>> cases to
>> >> get the theming to work.
>> >>
>> >> Harbs
>> >>
>> >>> On Feb 11, 2018, at 11:23 AM, Carlos Rovira
>><ca...@apache.org>
>> >> wrote:
>> >>>
>> >>> Hi,
>> >>>
>> >>> I think CSS vars would be a good addition although IE still doesn't
>> >> handle
>> >>> it.
>> >>>
>> >>> But in the other hand the Alex proposal seems to fit perfectly with
>> what
>> >> I
>> >>> want to do.
>> >>>
>> >>> I didn't know that we have "-theme=" compiler option, and I think I
>> will
>> >>> use that extensively
>> >>>
>> >>> My last thought about all of this is if I should make this work on
>> >> Express
>> >>> instead of creating a complete new UI set (Vivid)
>> >>>
>> >>> thanks!
>> >>>
>> >>>
>> >>>
>> >>> 2018-02-11 9:53 GMT+01:00 Gabe Harbs <ha...@gmail.com>:
>> >>>
>> >>>> I don’t remember the details, but I’ve had css which would not
>>compile
>> >>>> until I specified the html namespace. It might have been using
>> descender
>> >>>> selectors. Not sure.
>> >>>>
>> >>>> Harbs
>> >>>>
>> >>>>> On Feb 11, 2018, at 9:20 AM, Alex Harui <ah...@adobe.com.INVALID>
>> >>>> wrote:
>> >>>>>
>> >>>>> I'm not clear how namespace would help.
>> >>>>
>> >>>>
>> >>>
>> >>>
>> >>> --
>> >>> Carlos Rovira
>> >>> 
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%
>>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C19abb285d29443c7a6e308
>>d5716e4394%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63653964078825158
>>0&sdata=CjJGnr7bPQkOI9hfkF1CnsbMTMHcDv4BgVGAiKk5UBQ%3D&reserved=0
>> >>
>> >>
>>
>>
>
>
>-- 
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C19abb285d29443c7a6e308d5
>716e4394%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636539640788251580&s
>data=CjJGnr7bPQkOI9hfkF1CnsbMTMHcDv4BgVGAiKk5UBQ%3D&reserved=0


Re: vars in CSS

Posted by Carlos Rovira <ca...@apache.org>.
Hi Harbs,

when I tried to recreate MDL blog I found some CSS rules not working. I
think ">" was one, but there was something more

I think those rules in the compiler should be reviewed in order to make it
work to have the most complete CSS support

2018-02-11 13:00 GMT+01:00 Gabe Harbs <ha...@gmail.com>:

> No. I think it was the “>” operator which didn’t work, but I don’t
> remember for sure.
>
> > On Feb 11, 2018, at 1:53 PM, Piotr Zarzycki <pi...@gmail.com>
> wrote:
> >
> > Hi Harbs,
> >
> > Are you saying that without this namespace following situation didn't
> work?
> >
> > .myCss {
> > }
> >
> > .myCss .newCss {
> > }
> >
> > Thanks,
> > Piotr
> >
> > On Sun, Feb 11, 2018, 10:27 Gabe Harbs <ha...@gmail.com> wrote:
> >
> >> If it could work on Express, even better, but my impression was that the
> >> structure was going to have to change pretty significantly in some
> cases to
> >> get the theming to work.
> >>
> >> Harbs
> >>
> >>> On Feb 11, 2018, at 11:23 AM, Carlos Rovira <ca...@apache.org>
> >> wrote:
> >>>
> >>> Hi,
> >>>
> >>> I think CSS vars would be a good addition although IE still doesn't
> >> handle
> >>> it.
> >>>
> >>> But in the other hand the Alex proposal seems to fit perfectly with
> what
> >> I
> >>> want to do.
> >>>
> >>> I didn't know that we have "-theme=" compiler option, and I think I
> will
> >>> use that extensively
> >>>
> >>> My last thought about all of this is if I should make this work on
> >> Express
> >>> instead of creating a complete new UI set (Vivid)
> >>>
> >>> thanks!
> >>>
> >>>
> >>>
> >>> 2018-02-11 9:53 GMT+01:00 Gabe Harbs <ha...@gmail.com>:
> >>>
> >>>> I don’t remember the details, but I’ve had css which would not compile
> >>>> until I specified the html namespace. It might have been using
> descender
> >>>> selectors. Not sure.
> >>>>
> >>>> Harbs
> >>>>
> >>>>> On Feb 11, 2018, at 9:20 AM, Alex Harui <ah...@adobe.com.INVALID>
> >>>> wrote:
> >>>>>
> >>>>> I'm not clear how namespace would help.
> >>>>
> >>>>
> >>>
> >>>
> >>> --
> >>> Carlos Rovira
> >>> http://about.me/carlosrovira
> >>
> >>
>
>


-- 
Carlos Rovira
http://about.me/carlosrovira

Re: vars in CSS

Posted by Gabe Harbs <ha...@gmail.com>.
No. I think it was the “>” operator which didn’t work, but I don’t remember for sure.

> On Feb 11, 2018, at 1:53 PM, Piotr Zarzycki <pi...@gmail.com> wrote:
> 
> Hi Harbs,
> 
> Are you saying that without this namespace following situation didn't work?
> 
> .myCss {
> }
> 
> .myCss .newCss {
> }
> 
> Thanks,
> Piotr
> 
> On Sun, Feb 11, 2018, 10:27 Gabe Harbs <ha...@gmail.com> wrote:
> 
>> If it could work on Express, even better, but my impression was that the
>> structure was going to have to change pretty significantly in some cases to
>> get the theming to work.
>> 
>> Harbs
>> 
>>> On Feb 11, 2018, at 11:23 AM, Carlos Rovira <ca...@apache.org>
>> wrote:
>>> 
>>> Hi,
>>> 
>>> I think CSS vars would be a good addition although IE still doesn't
>> handle
>>> it.
>>> 
>>> But in the other hand the Alex proposal seems to fit perfectly with what
>> I
>>> want to do.
>>> 
>>> I didn't know that we have "-theme=" compiler option, and I think I will
>>> use that extensively
>>> 
>>> My last thought about all of this is if I should make this work on
>> Express
>>> instead of creating a complete new UI set (Vivid)
>>> 
>>> thanks!
>>> 
>>> 
>>> 
>>> 2018-02-11 9:53 GMT+01:00 Gabe Harbs <ha...@gmail.com>:
>>> 
>>>> I don’t remember the details, but I’ve had css which would not compile
>>>> until I specified the html namespace. It might have been using descender
>>>> selectors. Not sure.
>>>> 
>>>> Harbs
>>>> 
>>>>> On Feb 11, 2018, at 9:20 AM, Alex Harui <ah...@adobe.com.INVALID>
>>>> wrote:
>>>>> 
>>>>> I'm not clear how namespace would help.
>>>> 
>>>> 
>>> 
>>> 
>>> --
>>> Carlos Rovira
>>> http://about.me/carlosrovira
>> 
>> 


Re: vars in CSS

Posted by Piotr Zarzycki <pi...@gmail.com>.
Hi Harbs,

Are you saying that without this namespace following situation didn't work?

.myCss {
}

.myCss .newCss {
}

Thanks,
Piotr

On Sun, Feb 11, 2018, 10:27 Gabe Harbs <ha...@gmail.com> wrote:

> If it could work on Express, even better, but my impression was that the
> structure was going to have to change pretty significantly in some cases to
> get the theming to work.
>
> Harbs
>
> > On Feb 11, 2018, at 11:23 AM, Carlos Rovira <ca...@apache.org>
> wrote:
> >
> > Hi,
> >
> > I think CSS vars would be a good addition although IE still doesn't
> handle
> > it.
> >
> > But in the other hand the Alex proposal seems to fit perfectly with what
> I
> > want to do.
> >
> > I didn't know that we have "-theme=" compiler option, and I think I will
> > use that extensively
> >
> > My last thought about all of this is if I should make this work on
> Express
> > instead of creating a complete new UI set (Vivid)
> >
> > thanks!
> >
> >
> >
> > 2018-02-11 9:53 GMT+01:00 Gabe Harbs <ha...@gmail.com>:
> >
> >> I don’t remember the details, but I’ve had css which would not compile
> >> until I specified the html namespace. It might have been using descender
> >> selectors. Not sure.
> >>
> >> Harbs
> >>
> >>> On Feb 11, 2018, at 9:20 AM, Alex Harui <ah...@adobe.com.INVALID>
> >> wrote:
> >>>
> >>> I'm not clear how namespace would help.
> >>
> >>
> >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
>
>

Re: vars in CSS

Posted by Gabe Harbs <ha...@gmail.com>.
If it could work on Express, even better, but my impression was that the structure was going to have to change pretty significantly in some cases to get the theming to work.

Harbs

> On Feb 11, 2018, at 11:23 AM, Carlos Rovira <ca...@apache.org> wrote:
> 
> Hi,
> 
> I think CSS vars would be a good addition although IE still doesn't handle
> it.
> 
> But in the other hand the Alex proposal seems to fit perfectly with what I
> want to do.
> 
> I didn't know that we have "-theme=" compiler option, and I think I will
> use that extensively
> 
> My last thought about all of this is if I should make this work on Express
> instead of creating a complete new UI set (Vivid)
> 
> thanks!
> 
> 
> 
> 2018-02-11 9:53 GMT+01:00 Gabe Harbs <ha...@gmail.com>:
> 
>> I don’t remember the details, but I’ve had css which would not compile
>> until I specified the html namespace. It might have been using descender
>> selectors. Not sure.
>> 
>> Harbs
>> 
>>> On Feb 11, 2018, at 9:20 AM, Alex Harui <ah...@adobe.com.INVALID>
>> wrote:
>>> 
>>> I'm not clear how namespace would help.
>> 
>> 
> 
> 
> -- 
> Carlos Rovira
> http://about.me/carlosrovira


Re: vars in CSS

Posted by Carlos Rovira <ca...@apache.org>.
Hi,

I think CSS vars would be a good addition although IE still doesn't handle
it.

But in the other hand the Alex proposal seems to fit perfectly with what I
want to do.

I didn't know that we have "-theme=" compiler option, and I think I will
use that extensively

My last thought about all of this is if I should make this work on Express
instead of creating a complete new UI set (Vivid)

thanks!



2018-02-11 9:53 GMT+01:00 Gabe Harbs <ha...@gmail.com>:

> I don’t remember the details, but I’ve had css which would not compile
> until I specified the html namespace. It might have been using descender
> selectors. Not sure.
>
> Harbs
>
> > On Feb 11, 2018, at 9:20 AM, Alex Harui <ah...@adobe.com.INVALID>
> wrote:
> >
> > I'm not clear how namespace would help.
>
>


-- 
Carlos Rovira
http://about.me/carlosrovira

Re: vars in CSS

Posted by Gabe Harbs <ha...@gmail.com>.
I don’t remember the details, but I’ve had css which would not compile until I specified the html namespace. It might have been using descender selectors. Not sure.

Harbs

> On Feb 11, 2018, at 9:20 AM, Alex Harui <ah...@adobe.com.INVALID> wrote:
> 
> I'm not clear how namespace would help.


Re: vars in CSS

Posted by Alex Harui <ah...@adobe.com.INVALID>.
I'm not clear how namespace would help.

AIUI, CSS Vars are problematic because of IE support as Harbs pointed out.
 If we don't care, we can probably make the compiler handle it.

But I think there is already a rough equivalent in Flex, and that is
Themes.  It wouldn't be the same as CSS Vars in terms of syntax, but I
believe you could put some sort of default values in the Vivid component
set, say:

Vivid/src/main/resource/defaults.css
vivid|TextInput {
  background-color: #fff;
  color: #000;
}

Then in the Themes folder declare overrides:

themes/VividBlue/src/defaults.css

vivid|TextInput {
  background-color: #00f; // dark-blue
  color: #fff; // white text

}

This should work without compiler changes.  The user specifies
-theme=themes/VividBlue/VividBlue.swc

HTH,
-Alex

On 2/10/18, 10:46 AM, "Gabe Harbs" <ha...@gmail.com> wrote:

>BTW, CSS vars is not supported in IE:
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcaniuse.c
>om%2F%23feat%3Dcss-variables&data=02%7C01%7Caharui%40adobe.com%7Cb065bcb55
>e49451d890c08d570b6a6c3%7C71f1da39c0a84d5a8d88a67b23c30bf4%7C0%7C0%7C63653
>8852172705057&sdata=0vtIlMb7apTnPnQ7rRY5l21wjlCLhbAgRS9d2blBo3A%3D&reserve
>d=0 
><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcaniuse.
>com%2F%23feat%3Dcss-variables&data=02%7C01%7Caharui%40adobe.com%7Cb065bcb5
>5e49451d890c08d570b6a6c3%7C71f1da39c0a84d5a8d88a67b23c30bf4%7C0%7C0%7C6365
>38852172705057&sdata=0vtIlMb7apTnPnQ7rRY5l21wjlCLhbAgRS9d2blBo3A%3D&reserv
>ed=0>
>
>> On Feb 10, 2018, at 8:26 PM, Carlos Rovira <ca...@apache.org>
>>wrote:
>> 
>> Hi
>> 
>> I'm figuring how to configure easy colors in CSS in a reusable way.
>> 
>> I get to CSS vars:
>> 
>> 
>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdevelope
>>r.mozilla.org%2Fes%2Fdocs%2FWeb%2FCSS%2FUsing_CSS_variables&data=02%7C01%
>>7Caharui%40adobe.com%7Cb065bcb55e49451d890c08d570b6a6c3%7C71f1da39c0a84d5
>>a8d88a67b23c30bf4%7C0%7C0%7C636538852172705057&sdata=Jd1qtkGnZsj2vRGiYJgq
>>7Ojh07CkARNZ88bUOf7VNFY%3D&reserved=0
>> 
>> but something like the basic example described in that CSS makes the
>> compiler breaks:
>> 
>> java.util.NoSuchElementException: can't look backwards more than one
>>token
>> in this stream org.antlr.runtime.misc.LookaheadStream.LB
>> 
>>(LookaheadStream.java:159)org.antlr.runtime.misc.LookaheadStream.LT(Looka
>>headStream.java:120)org.antlr.runtime.RecognitionException.extractInforma
>>tionFromTreeNodeStream(RecognitionException.java:144)org.antlr.runtime.Re
>>cognitionException.<init>(RecognitionException.java:111)org.antlr.runtime
>>.MismatchedTreeNodeException.<init>(MismatchedTreeNodeException.java:42)o
>>rg.antlr.runtime.tree.TreeParser.recoverFromMismatchedToken(TreeParser.ja
>>va:135)org.antlr.runtime.BaseRecognizer.match(BaseRecognizer.java:115)org
>>.apache.royale.compiler.internal.css.CSSTree.declarationsBlock(CSSTree.ja
>>va:1725)org.apache.royale.compiler.internal.css.CSSTree.ruleset(CSSTree.j
>>ava:786)org.apache.royale.compiler.internal.css.CSSTree.stylesheet(CSSTre
>>e.java:289)org.apache.royale.compiler.internal.css.CSSDocument.parse(CSSD
>>ocument.java:81)org.apache.royale.compiler.internal.caches.CSSDocumentCac
>>he$CSSDocumentCacheKey.parse(CSSDocumentCache.java:251)org.apache.royale.
>>compiler.internal.caches.CSSDocumentCache.createEntryValue(CSSDocumentCac
>>he.java:337)org.apache.royale.compiler.internal.caches.CSSDocumentCache.c
>>reateEntryValue(CSSDocumentCache.java:55)org.apache.royale.compiler.inter
>>nal.caches.ConcurrentCacheStoreBase.get(ConcurrentCacheStoreBase.java:69)
>>org.apache.royale.compiler.internal.caches.CSSDocumentCache.getDefaultsCS
>>S(CSSDocumentCache.java:381)org.apache.royale.compiler.internal.css.CSSMa
>>nager.getDefaultCSS(CSSManager.java:182)org.apache.royale.compiler.intern
>>al.targets.RoyaleJSTarget.getAllDefaultCSS(RoyaleJSTarget.java:289)org.ap
>>ache.royale.compiler.internal.targets.RoyaleJSTarget.findAllCompilationUn
>>itsToLink(RoyaleJSTarget.java:195)org.apache.royale.compiler.internal.tar
>>gets.Target.buildAllCompilationUnits(Target.java:297)org.apache.royale.co
>>mpiler.internal.targets.Target.getBuiltCompilationUnitSet(Target.java:306
>>)org.apache.royale.compiler.internal.targets.JSTarget.buildAndCollectProb
>>lems(JSTarget.java:186)org.apache.royale.compiler.internal.targets.JSTarg
>>et.build(JSTarget.java:114)org.apache.royale.compiler.internal.targets.JS
>>Target.build(JSTarget.java:226)org.apache.royale.compiler.clients.MXMLJSC
>>Royale.buildApplication(MXMLJSCRoyale.java:455)org.apache.royale.compiler
>>.clients.MXMLJSCRoyale.buildJSTarget(MXMLJSCRoyale.java:420)org.apache.ro
>>yale.compiler.clients.MXMLJSCRoyale.buildArtifact(MXMLJSCRoyale.java:411)
>>org.apache.royale.compiler.clients.MXMLJSCRoyale.compile(MXMLJSCRoyale.ja
>>va:308)org.apache.royale.compiler.clients.MXMLJSCRoyale._mainNoExit(MXMLJ
>>SCRoyale.java:240)org.apache.royale.compiler.clients.MXMLJSCRoyale.mainNo
>>Exit(MXMLJSCRoyale.java:197)org.apache.royale.compiler.clients.MXMLJSC._m
>>ainNoExit(MXMLJSC.java:343)org.apache.royale.compiler.clients.MXMLJSC.mai
>>nNoExit(MXMLJSC.java:279)org.apache.royale.compiler.clients.MXMLJSC.execu
>>te(MXMLJSC.java:210)org.apache.royale.maven.BaseMojo.execute(BaseMojo.jav
>>a:302)org.apache.royale.maven.CompileAppMojo.execute(CompileAppMojo.java:
>>107)org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo(Default
>>BuildPluginManager.java:134)org.apache.maven.lifecycle.internal.MojoExecu
>>tor.execute(MojoExecutor.java:208)org.apache.maven.lifecycle.internal.Moj
>>oExecutor.execute(MojoExecutor.java:154)org.apache.maven.lifecycle.intern
>>al.MojoExecutor.execute(MojoExecutor.java:146)org.apache.maven.lifecycle.
>>internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:
>>117)org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProje
>>ct(LifecycleModuleBuilder.java:81)org.apache.maven.lifecycle.internal.bui
>>lder.singlethreaded.SingleThreadedBuilder.build(SingleThreadedBuilder.jav
>>a:51)org.apache.maven.lifecycle.internal.LifecycleStarter.execute(Lifecyc
>>leStarter.java:128)org.apache.maven.DefaultMaven.doExecute(DefaultMaven.j
>>ava: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:993)org.apache.maven.cli.MavenCli.doM
>>ain(MavenCli.java:345)org.apache.maven.cli.MavenCli.main(MavenCli.java:19
>>1)sun.reflect.NativeMethodAccessorImpl.invoke0(Native
>> 
>>Method)sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorIm
>>pl.java:62)sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMeth
>>odAccessorImpl.java:43)java.lang.reflect.Method.invoke(Method.java:498)or
>>g.codehaus.plexus.classworlds.launcher.Launcher.launchEnhanced(Launcher.j
>>ava:289)org.codehaus.plexus.classworlds.launcher.Launcher.launch(Launcher
>>.java:229)org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitC
>>ode(Launcher.java:415)org.codehaus.plexus.classworlds.launcher.Launcher.m
>>ain(Launcher.java:356)
>> 
>> 
>> 
>> Should vars be supported?
>> 
>> In the other hand, what do you think about this approach to make CSS
>> reusable?
>> 
>> thanks
>> 
>> -- 
>> Carlos Rovira
>> 
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%
>>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Cb065bcb55e49451d890c08
>>d570b6a6c3%7C71f1da39c0a84d5a8d88a67b23c30bf4%7C0%7C0%7C63653885217270505
>>7&sdata=kkZq%2F2jgC%2FFLk8iiUu6H9N%2FvJnaWubh%2BSbrX0WKHi1E%3D&reserved=0
>


Re: vars in CSS

Posted by Gabe Harbs <ha...@gmail.com>.
BTW, CSS vars is not supported in IE:
https://caniuse.com/#feat=css-variables <https://caniuse.com/#feat=css-variables>

> On Feb 10, 2018, at 8:26 PM, Carlos Rovira <ca...@apache.org> wrote:
> 
> Hi
> 
> I'm figuring how to configure easy colors in CSS in a reusable way.
> 
> I get to CSS vars:
> 
> https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_variables
> 
> but something like the basic example described in that CSS makes the
> compiler breaks:
> 
> java.util.NoSuchElementException: can't look backwards more than one token
> in this stream org.antlr.runtime.misc.LookaheadStream.LB
> (LookaheadStream.java:159)org.antlr.runtime.misc.LookaheadStream.LT(LookaheadStream.java:120)org.antlr.runtime.RecognitionException.extractInformationFromTreeNodeStream(RecognitionException.java:144)org.antlr.runtime.RecognitionException.<init>(RecognitionException.java:111)org.antlr.runtime.MismatchedTreeNodeException.<init>(MismatchedTreeNodeException.java:42)org.antlr.runtime.tree.TreeParser.recoverFromMismatchedToken(TreeParser.java:135)org.antlr.runtime.BaseRecognizer.match(BaseRecognizer.java:115)org.apache.royale.compiler.internal.css.CSSTree.declarationsBlock(CSSTree.java:1725)org.apache.royale.compiler.internal.css.CSSTree.ruleset(CSSTree.java:786)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.getDefaultCSS(CSSManager.java:182)org.apache.royale.compiler.internal.targets.RoyaleJSTarget.getAllDefaultCSS(RoyaleJSTarget.java:289)org.apache.royale.compiler.internal.targets.RoyaleJSTarget.findAllCompilationUnitsToLink(RoyaleJSTarget.java:195)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:343)org.apache.royale.compiler.clients.MXMLJSC.mainNoExit(MXMLJSC.java:279)org.apache.royale.compiler.clients.MXMLJSC.execute(MXMLJSC.java:210)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:993)org.apache.maven.cli.MavenCli.doMain(MavenCli.java:345)org.apache.maven.cli.MavenCli.main(MavenCli.java:191)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)
> 
> 
> 
> Should vars be supported?
> 
> In the other hand, what do you think about this approach to make CSS
> reusable?
> 
> thanks
> 
> -- 
> Carlos Rovira
> http://about.me/carlosrovira