Skip to content

Support for at keyword in css gradient functions #85

Closed
@romainmenke

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions