Shim CSS Mixins in terms of CSS Custom Properties #3587

dfreedm · 2016-04-15T00:42:56Z

Use native css custom properties if supported
- Rewrite polymer's slightly non-standard syntax to spec
Rewrite @apply to N custom properties

If native css custom properties supported, all style work will happen at registration time (+/- shadydom shimming).

Use of updateProperties to modify or create mixins is not supported.

make `getComputedStyleValue` work with native custom properties.

```css --foo: { color: red; border: 2px solid black; } @apply --foo; ``` becomes ```css --foo-color: red; --foo-border: 2px solid black; color: var(--foo-color); border: var(--foo-border); ```

move apply-shim to lib Fix some tests

* fix custom-style test's late registrations.

No more global for defaults No need to process keyframe rules

Fix up shim var syntax `var(--a, --b)` to `var(--a, var(--b))` Disable native variables in Safari 9.1 until https://bugs.webkit.org/show_bug.cgi?id=155782 is fixed

Test new `@apply --foo` syntax Test aliasing mixins with var Test fixing bad var syntax `var(--a, --b)` -> `var(--a, var(--b))`

Clean up dependencies in apply-shim Remove lazyRegister hack

Enabled only if support is detected and `lazyRegister` setting is used. Override with `Polymer = {useNativeCSSProperties: true}` before polymer is loaded.

…nd elements

…roperties.

- Copy css-build status to cloned style in main document - Move css-build status out of ast - Instead forward a reference to the style in the ast walker callback

More easy to see that no work happens if using a targeted css build with native custom properties

sorvell · 2016-06-03T16:28:14Z

src/lib/apply-shim.html

+    var combinedProps = mixinValues;
+    if (oldProperties) {
+      combinedProps = Polymer.Base.mixin(oldProperties, mixinValues);
+    } else {


Why is the else here? Don't we always want to update the property map with the list of all properties that have been used for that mixin?

Since we are using mixin, the reference in the map is always the same and we don't need to set again.

Add test to show that redefining a mixin works as expected

checking for native css custom properties is not needed in the property shim anymore

dfreedm · 2016-06-03T22:08:53Z

Comments LGTM!

arthurevans · 2016-06-03T23:21:24Z

For re-writing the @apply rules, should we consider something less direct than --mixin-prop to avoid possible collisions with other custom properties?

For example, paper-menu has a --paper-menu mixin and a --paper-menu-color property, so:

--paper-menu: { color: red; }

is going to get rewritten as:

--paper-menu-color: red;

In this case they probably do the same thing, but the collisions could result in unintentional behavior. I'm stretching for an example here, but I can just about imagine a developer using --my-app-background-color (for a default background) and --my-app-background: { color: ... } (for the text color on a background panel).

Anyway, it seems like we should either a) document this potential funkiness, or b) use a less common character to combine the mixin and prop.

dfreedm · 2016-06-03T23:28:28Z

@arthurevans That's a reasonable point. How about '$' or '~' as a separator?

…es shim.

Differentiates apply-shim variables more obviously from user variables #3587 (comment)

dfreedm · 2016-06-03T23:55:58Z

@arthurevans Went with _-_, so it will be super obvious. separator is also exposed as Polymer.ApplyShim._separator

arthurevans · 2016-06-04T00:33:29Z

👍

sorvell · 2016-06-06T15:50:04Z

LGTM, can merge when ready...

…dow DOM under native Custom Elements." This reverts commit 9d272e0.

dfreedm and others added 30 commits April 14, 2016 15:04

check for native css variables

17bc75a

keep custom properties, still unpack mixins

ff5658a

make updateStyles (modulo @apply) work with native custom properties.

5ea78b0

make `getComputedStyleValue` work with native custom properties.

modifications

b2777f9

sigh

0374478

fix tests in firefox safari and chrome 49

c2b5a82

add back missing styleutil code in x-styling

bc982c8

support all the fallback cases with nested parens

b4ec339

fix rules with property and mixin definitions for native

6589a50

First draft of @apply shim

49e0873

```css --foo: { color: red; border: 2px solid black; } @apply --foo; ``` becomes ```css --foo-color: red; --foo-border: 2px solid black; color: var(--foo-color); border: var(--foo-border); ```

step 3

5d700e5

Process stylesheets in custom-styles

62dc8b9

move apply-shim to lib Fix some tests

always add semicolon in flattenMixin

79afddf

reset order back to master

c120d37

step 4

0e903bc

Temporary ordering fixup for native @apply shim.

b351a99

better step 5

8f9d308

make custom-style support @apply shim.

e72e974

* make @apply regex match globally

45fd0ec

* fix custom-style test's late registrations.

Collect default property values between consumption and application

626083c

No more global for defaults No need to process keyframe rules

stupid stateful regexes

142c846

Handle realiasing mixins (step 6)

e62b322

Fix up shim var syntax `var(--a, --b)` to `var(--a, var(--b))` Disable native variables in Safari 9.1 until https://bugs.webkit.org/show_bug.cgi?id=155782 is fixed

Add more tests for apply shim

4a21057

Test new `@apply --foo` syntax Test aliasing mixins with var Test fixing bad var syntax `var(--a, --b)` -> `var(--a, var(--b))`

fix :root for apply shim

844b9e7

add StyleTransformer smoke test.

fcf96dd

Move regexes from style-properties to style-util for easier sharing

96d341a

Clean up dependencies in apply-shim Remove lazyRegister hack

Move check for CSS Custom Properties to settings lib

e287c6f

Enabled only if support is detected and `lazyRegister` setting is used. Override with `Polymer = {useNativeCSSProperties: true}` before polymer is loaded.

add apply shim to smoke test

fb0eaaa

actually let uses set useNativeCSSProperties false

39b067f

SCOPE_SELECTORS needs to work with built selectors for custom-style a…

6eca881

…nd elements

Steven Orvell and others added 7 commits May 31, 2016 10:23

avoid work in the presence of a css build.

1be473d

Merge branch 'master' into mixins-as-custom-properties

0d14881

add test for :host(element-name)

6cc7774

correct custom-style under shadow build when using shady and custom p…

c597fff

…roperties.

fix tests to not rely on order in className

4500e4b

Support custom-style with css-build status in HTMLImports polyfill

eccaee2

- Copy css-build status to cloned style in main document - Move css-build status out of ast - Instead forward a reference to the style in the ast walker callback

Clean up logic in custom-style _apply

ce06254

More easy to see that no work happens if using a targeted css build with native custom properties

sorvell reviewed Jun 3, 2016
View reviewed changes

dfreedm and others added 3 commits June 3, 2016 10:55

Loop over all property names ever used for a mixin

a2550bc

Add test to show that redefining a mixin works as expected

Bail early if rule does not have properties

acf5f5a

checking for native css custom properties is not needed in the property shim anymore

Comments.

5626fc7

Steven Orvell and others added 2 commits June 3, 2016 16:50

test that invalid @media rules do *not* apply via the custom properti…

b3d6336

…es shim.

Use _-_ as seperator for apply-shim created variables

4be2598

Differentiates apply-shim variables more obviously from user variables #3587 (comment)

dfreedm added 2 commits June 3, 2016 17:01

Fix custom-style test with new separator

22af46f

fix a few more tests for built styles

6383358

dfreedm added 2 commits June 7, 2016 09:33

Revert "Fixes #3637. Normalizes attached timing between Shady and Sha…

0ae2ee7

…dow DOM under native Custom Elements." This reverts commit 9d272e0.

[ci skip] PolymerBuild global has been removed

1ec23a5

dfreedm merged commit 6c0acef into master Jun 7, 2016

dfreedm deleted the mixins-as-custom-properties branch June 7, 2016 19:01

This was referenced Jun 15, 2016

Custom properties should support :host(selector) rules #1787

Closed

var() fallback syntax #3224

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shim CSS Mixins in terms of CSS Custom Properties #3587

Shim CSS Mixins in terms of CSS Custom Properties #3587

dfreedm commented Apr 15, 2016 •

edited

Loading

sorvell Jun 3, 2016

dfreedm Jun 3, 2016

dfreedm commented Jun 3, 2016

arthurevans commented Jun 3, 2016

dfreedm commented Jun 3, 2016 •

edited

Loading

dfreedm commented Jun 3, 2016

arthurevans commented Jun 4, 2016

sorvell commented Jun 6, 2016

Shim CSS Mixins in terms of CSS Custom Properties #3587

Shim CSS Mixins in terms of CSS Custom Properties #3587

Conversation

dfreedm commented Apr 15, 2016 • edited Loading

sorvell Jun 3, 2016

Choose a reason for hiding this comment

dfreedm Jun 3, 2016

Choose a reason for hiding this comment

dfreedm commented Jun 3, 2016

arthurevans commented Jun 3, 2016

dfreedm commented Jun 3, 2016 • edited Loading

dfreedm commented Jun 3, 2016

arthurevans commented Jun 4, 2016

sorvell commented Jun 6, 2016

dfreedm commented Apr 15, 2016 •

edited

Loading

dfreedm commented Jun 3, 2016 •

edited

Loading