Add Support For CSS Variables

Version

1.0.6

Reproduction

http://www.webpackbin.com/Vys62X0RZ

Steps to reproduce

Declare and use a CSS variable anywhere in a styled component.

Expected Behavior

Leading -should remain intact so that browsers can properly identify variable declarations.

Actual Behavior

the first - is being striped from the variable declaration causing browsers that support native CSS variables to view them as bad properties. If you go into dev tools and add the leading - back in, everything works as expected.

[geelen]

The “polyfill” for css variables has some serious edge cases: https://github.com/MadLittleMods/postcss-css-variables#differences-from-postcss-custom-properties and the “Caveats” section below.

These all arise because it’s a PostCSS transform, and thus only has visibility into the CSS, not the DOM. This is part of the reason I am so opposed to postcss transforms being available in SC—they’re built for a different environment, and supporting/reproducing their limitations (or divergence from the specification as in this case) would weaken the whole proposal.

HOWEVER, if you’re feeling like a challenge 😉 Styled Components does have knowledge of both the DOM and the CSS rules, and so a true CSS custom properties polyfill is possible. I’ve had this in the back of my mind to implement for ages but it’s a lot of work. It would be amazing though!

In general, I’ve found that the combination of JS variables and inheritance using theming is everything I wanted CSS variables for anyway, so I haven’t missed them too much.

[geelen]

Wow that’s a straight up miss on my part. Sorry! On Tue., 18 Oct. 2016 at 8:14 am Brian Hough [e-mail] wrote:

Version

1.0.6 Reproduction

http://www.webpackbin.com/Vys62X0RZ Steps to reproduce

Declare and use a CSS variable anywhere in a styled component. Expected Behavior

Leading -should remain intact so that browsers can properly identify variable declarations. Actual Behavior

the first - is being striped from the variable declaration causing browsers that support native CSS variables to view them as bad properties. If you go into dev tools and add the leading - back in, everything works as expected.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/108, or mute the thread https://github.com/notifications/unsubscribe-auth/AABa4NnvHpi5-PSlHkzPRkc_kqWP6j7gks5q0-U5gaJpZM4KZHOd .