Units should not be removed from CSS variables.

[jgerigmeyer]

I have a problem very similar to MoOx/reduce-css-calc#7, except I'm storing 0px in a CSS variable and then using that in a calc() statement:

--my-variable: 0px;
min-height: calc(100vh - var(--my-variable));

By default, cssnano strips the variable down to 0, which makes the resulting calc() statement invalid.

I can fix this by disabling the convertValues option, but it's unfortunate to remove that everywhere just for one case. Because CSS variables could be used in various places where the units might matter, shouldn't they be left intact?

[ben-eb]

Hi @jgerigmeyer,

Sure thing, the value is transformed irrespective of it being a custom property or not. Would you like to send a pull request to fix this behaviour, please? We would need a condition added to https://github.com/ben-eb/postcss-convert-values/blob/master/src/index.js#L46 that checks that the decl.prop begins with --, and then a test case for this in https://github.com/ben-eb/postcss-convert-values/blob/master/src/__tests__/index.js. This should not take much time to implement. 😄

[jgerigmeyer]

PR submitted: https://github.com/ben-eb/postcss-convert-values/pull/33