Support for at keyword in css gradient functions

[romainmenke]

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