You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Harbs <ha...@gmail.com> on 2017/11/30 11:15:44 UTC
Outputting valid/efficient CSS
I just ran some CSS output by Royale through a CSS validator.[1] It turned up some issues, but most were results of my migration from Flex.
The one exception I found was:
* {
effect-timer-interval: 10;
}
effect-timer-interval is not a valid CSS property. It comes from the defaults css in Basic and it’s used by EffectsTimer which gets the value from the ValuesManager.
Having an invalid css declaration is not the end of the world, but it would be nice to be able to clean up the CSS to remove CSS not used by the browser.
I’m trying to brainstorm on ways of accomplishing that goal.
Maybe we could support prefixing selectors or attributes to mark them as “Royale only” so they would be stripped out of the CSS output? Some other ideas?
Thoughts?
Harbs
[1]https://csstree.github.io/docs/validator.html <https://csstree.github.io/docs/validator.html>
RE: Outputting valid/efficient CSS
Posted by Yishay Weiss <yi...@hotmail.com>.
Maybe we could have compiler option: strip-out-invalid-css. The compiler would know to read some class in royale-asjs that lists these invalid values and filters them out of the compiled css. I don’t think we should require uses to annotate invalid css attributes; besides inflicting overhead on our users it would make the css less legible. It’s enough that we document these atts somewhere.
________________________________
From: Harbs <ha...@gmail.com>
Sent: Thursday, November 30, 2017 1:15:44 PM
To: dev@royale.apache.org
Subject: Outputting valid/efficient CSS
I just ran some CSS output by Royale through a CSS validator.[1] It turned up some issues, but most were results of my migration from Flex.
The one exception I found was:
* {
effect-timer-interval: 10;
}
effect-timer-interval is not a valid CSS property. It comes from the defaults css in Basic and it’s used by EffectsTimer which gets the value from the ValuesManager.
Having an invalid css declaration is not the end of the world, but it would be nice to be able to clean up the CSS to remove CSS not used by the browser.
I’m trying to brainstorm on ways of accomplishing that goal.
Maybe we could support prefixing selectors or attributes to mark them as “Royale only” so they would be stripped out of the CSS output? Some other ideas?
Thoughts?
Harbs
[1]https://csstree.github.io/docs/validator.html <https://csstree.github.io/docs/validator.html>
Re: Outputting valid/efficient CSS
Posted by Alex Harui <ah...@adobe.com.INVALID>.
I would prefer not to add a CSS validator to the application compilation
time. I don't think it would catch enough stuff often enough. We should
check for invalid css usage as part of the build by running a command-line
tool, but I would do it in a way that committers don't have to install
that tool. We are trying to reduce the number of things you have to do to
build the source packages.
I thought that the browsers output warnings in the console when bad CSS
was found. Is that not true?
The compiler already does some of the restructuring in [2].
The compiler takes in CSS and outputs not only a CSS file that is intended
to be valid, but also a set of data structures to be used by SWF code and
other framework code to do non-compliant stuff. For example, the compiler
knows to filter out certain kinds of CSS properties whose values are
ClassReference from the output CSS file, while placing those values in the
data structure that the framework uses via ValuesManager.
There is a CSS convention for custom properties. A custom property starts
with a "-" then a browser name, then another "-". We can use "royale" if
we want. We could use it for properties whose values are not
ClassReference. Then the compiler doesn't need to be changed.
My 2 cents,
-Alex
On 11/30/17, 3:19 AM, "Harbs" <ha...@gmail.com> wrote:
>Related:
>
>It would be nice to add CSS optimization/minification to the Royale
>toolchain. A nice tool for that is csso[2] which can be used with a
>command line interface[3]
>
>Harbs
>
>[2]https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub
>.com%2Fcss%2Fcsso&data=02%7C01%7Caharui%40adobe.com%7C48286b69c625495055e2
>08d537e42f70%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6364763755513021
>05&sdata=Hh0VmB%2FWEVZ1ofNDvXIGk2B3ifTbsH5B%2BGNURk6DAKQ%3D&reserved=0
>[3]https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub
>.com%2Fcss%2Fcsso-cli&data=02%7C01%7Caharui%40adobe.com%7C48286b69c6254950
>55e208d537e42f70%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636476375551
>302105&sdata=N%2BlhL6kCxiviD52C6zhv8hekTIr1OzD6wSSNGZIY1LY%3D&reserved=0
>
>> On Nov 30, 2017, at 1:15 PM, Harbs <ha...@gmail.com> wrote:
>>
>> I just ran some CSS output by Royale through a CSS validator.[1] It
>>turned up some issues, but most were results of my migration from Flex.
>>
>> The one exception I found was:
>> * {
>> effect-timer-interval: 10;
>> }
>> effect-timer-interval is not a valid CSS property. It comes from the
>>defaults css in Basic and it’s used by EffectsTimer which gets the value
>>from the ValuesManager.
>>
>> Having an invalid css declaration is not the end of the world, but it
>>would be nice to be able to clean up the CSS to remove CSS not used by
>>the browser.
>>
>> I’m trying to brainstorm on ways of accomplishing that goal.
>>
>> Maybe we could support prefixing selectors or attributes to mark them
>>as “Royale only” so they would be stripped out of the CSS output? Some
>>other ideas?
>>
>> Thoughts?
>> Harbs
>>
>>
>>[1]https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcsstr
>>ee.github.io%2Fdocs%2Fvalidator.html&data=02%7C01%7Caharui%40adobe.com%7C
>>48286b69c625495055e208d537e42f70%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>>C0%7C636476375551302105&sdata=NXZPmY54dYlY%2F%2FwZ8prWwkCGzR%2Fk%2BsJWidl
>>UYvE8Seo%3D&reserved=0
>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcsstree
>>.github.io%2Fdocs%2Fvalidator.html&data=02%7C01%7Caharui%40adobe.com%7C48
>>286b69c625495055e208d537e42f70%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0
>>%7C636476375551302105&sdata=NXZPmY54dYlY%2F%2FwZ8prWwkCGzR%2Fk%2BsJWidlUY
>>vE8Seo%3D&reserved=0>
Re: Outputting valid/efficient CSS
Posted by Harbs <ha...@gmail.com>.
Related:
It would be nice to add CSS optimization/minification to the Royale toolchain. A nice tool for that is csso[2] which can be used with a command line interface[3]
Harbs
[2]https://github.com/css/csso
[3]https://github.com/css/csso-cli
> On Nov 30, 2017, at 1:15 PM, Harbs <ha...@gmail.com> wrote:
>
> I just ran some CSS output by Royale through a CSS validator.[1] It turned up some issues, but most were results of my migration from Flex.
>
> The one exception I found was:
> * {
> effect-timer-interval: 10;
> }
> effect-timer-interval is not a valid CSS property. It comes from the defaults css in Basic and it’s used by EffectsTimer which gets the value from the ValuesManager.
>
> Having an invalid css declaration is not the end of the world, but it would be nice to be able to clean up the CSS to remove CSS not used by the browser.
>
> I’m trying to brainstorm on ways of accomplishing that goal.
>
> Maybe we could support prefixing selectors or attributes to mark them as “Royale only” so they would be stripped out of the CSS output? Some other ideas?
>
> Thoughts?
> Harbs
>
> [1]https://csstree.github.io/docs/validator.html <https://csstree.github.io/docs/validator.html>