Closed
Description
Bug description
Since postcss-custom-properties 12.1.9 custom properties are not correctly replaced in some cases, while still removing their declaration when setting preserve: false.
This leads to generated CSS that contains a reference to a custom property, but not the custom property itself, thus causing it not to be applied.
This bug seems to be introduced by: #620, which was caused by: #619
Source CSS
:root {
--some-value: red;
}
body {
color: red; /* fallback for browsers that do not support custom properties */
color: var(--some-value);
}Expected CSS
body {
color: red;
}
/* or maybe even repeating the color declaration, like postcss-custom-properties@12.1.8 did */
body {
color: red;
color: red;
}Actual CSS
body {
color: red; /* fallback for browsers that do not support custom properties */
color: var(--some-value);
}Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?
Yes
Debug output
No response
Extra config
npx @csstools/csstools-cli postcss-custom-properties minimal-example.css -p '{"preserve":false}'What plugin are you experiencing this issue on?
PostCSS Custom Properties
Plugin version
12.1.9
What OS are you experiencing this on?
Linux
Node Version
18.11.0
Validations
- Follow our Code of Conduct
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Would you like to open a PR for this bug?
- I'm willing to open a PR