Misses programmatically-defined variables

[chris-morgan]

This is acting separately of the map that postcss-custom-properties maintains, instead looking for all :root rules and parsing custom properties in them itself.

The effect of this is that when you have programmatically-inserted custom properties, like with customProperties({variables: {key: 'value'}}), @if var(--key) { } doesn’t work, because the declaration of those variables isn’t injected into the CSS at all.

(Also the error message isn’t exactly the nicest—it just leaves it alone, so that you get “Failed to parse expression” from postcss-conditionals.)

Fixing this will need to be done in collaboration with postcss-custom-properties, because that plugin doesn’t expose its properties map at all and it will need to. postcss/postcss-custom-properties#66 covers their side of this.

[Scrum]

@chris-morgan thanks for feedback, i`ll think.

[Scrum]

@chris-morgan Hi, I added programmatically-defined variables as an option, now you can use it just like in postcss-custome-property

const options = {variables: {foo:'bar'}};
...
atRulesVariables(options)
customProperties(options)
...

In any case, let me know what you think about it.

[chris-morgan]

That’s a good workaround in the absence of proper support from postcss-custom-properties. Thanks!