Extract rules with resolved variables to another stylesheet

[tawgul]

Hi.

CSS Variable are quite well supported but are not in IE11<=11 and Android < 5.

So I was thinking if we could take the calculated rules and move to external file?

And load this file with JS (after detecting support for CSS variables)?

[MadLittleMods]

This plugin only compiles statically and isn't an active polyfill/shim to be loaded in the browser.

If you wanted to use this plugin you could conditionally load in a stylesheet that ran through this plugin.

Otherwise you will probably be better off looking for a "CSS custom properties polyfill".

[tawgul]

You get me wrong.
I use it already with Gulp and it works fine and I like the preserve:true option to have the computed values for IE11 and original ones for other browsers.

And I was thinking of that when you get all the variables and create the computed values to extract them to external file (so you grab them into array and at the end we create a new file with declarations with computed values).

This way I could leave original variables for modern browsers (so original file is intact) and a new file with computed declarations could be served for browsers not supporting CSS Variables.

[MadLittleMods]

@TAWG It's probably possible, create a new root to attach the resolved rules to, see

postcss-css-variables/index.js

Line 191 in 6baa5ef

// Resolve variables everywhere

I'd have to dive deeper on how best to support saving out multiple files (any other plugins that do that save out multiple files?). Feel free to create a PR if you are thinking of something slick 😀

[tawgul]

OK.

[Mangatt]

We want to go this way as well for our websites. I think it's much more better approach to conditionally load old IE CSS than pollute all CSS with fallbacks.

This plugin is not able to keep just transformed rules instead of complete file?

[MadLittleMods]

@Mangatt Not currently possible. But is feasible where I linked some code above. I don't have something specific in mind to solve this.