Closed
Description
Bug description
When specifying a series of things that generate @supports statements as part of their compatibility, identical, adjacent @supports statements will be meaninglessly generated individually where they should be combined, at least in cases where they are adjacent. Additional analysis could probably support the combining of similar statements that are not adjacent.
I have encountered the behavior in my project. The behavior is easily viewable in the interactive playground as well.
Source CSS
:root {
--color1: oklch(52% 0.21 270);
--color2: oklch(45% 0.21 270);
}
Expected CSS
:root {
--color1: rgb(62, 85, 223);
--color2: rgb(46, 62, 199);
}
@supports (color: color(display-p3 0 0 0)) {
:root {
--color1: color(display-p3 0.26256 0.33170 0.84336);
--color2: color(display-p3 0.19377 0.23995 0.75043);
}
}
Actual CSS
:root {
--color1: rgb(62, 85, 223);
--color2: rgb(46, 62, 199);
}
@supports (color: color(display-p3 0 0 0)) {
:root {
--color1: color(display-p3 0.26256 0.33170 0.84336);
}
}
@supports (color: color(display-p3 0 0 0)) {
:root {
--color2: color(display-p3 0.19377 0.23995 0.75043);
}
}
Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?
N/A
Debug output
I do not know how to do this. The debug explainer link leads to out-of-date documentation.
Extra config
No response
What plugin are you experiencing this issue on?
PostCSS Env Function
Plugin version
8.0.1
What OS are you experiencing this on?
macOS
Node Version
17.0.1
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