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.

[Ivan Demidov]

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

[Ivan Demidov]

@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!