Closed
Description
Bug description
Currently gradient functions with extra keywords lead to incorrect output as they are mistaken for color values.
see : csstools/postcss-preset-env#120
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()
https://drafts.csswg.org/css-images/#radial-gradients
Propose rewriting gradients plugin from an order based find/replace to something that first builds a data model and then stringifies this to a syntax that most browsers understand.
Source CSS
.at-keyword {
background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%);
}
Expected CSS
need to check if there is a valid alternative
Actual CSS
.at-keyword {
background-image: radial-gradient(farthest-corner at 40px,at 40px, #f35 0%, #43e 100%);
}
Does it happen with npx <plugin-name> minimal-example.css
?
Yes
Extra config
No response
What plugin are you experiencing this issue on?
PostCSS Double Position Gradients
Plugin version
7.1.0
What OS are you experiencing this on?
macOS
Node Version
16
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