Skip to content

[style-value-parser] Build CSS validator #1036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mellyeliu opened this issue May 2, 2025 · 0 comments
Open

[style-value-parser] Build CSS validator #1036

mellyeliu opened this issue May 2, 2025 · 0 comments
Labels
enhancement New feature or request

Comments

@mellyeliu
Copy link
Member

mellyeliu commented May 2, 2025

Describe the feature request

Proposal

The idea is to:

  • validate CSS values for correctness (eg. reject margin: "15" with no unit)
  • normalize semantically equivalent values (eg. rgb(0, 0, 0)#000)
    • reduce duplication by standardizing outputs at the compiler level
    • polyfill newer styles

We'll start with properties that are error prone and syntactically complex

  • calc() expressions
  • length-based properties (margin, padding, etc.)
  • @media queries

Usage

Two options

validate(property, value) =>

normalize(property, value) =>

OR

normalizeColor('rgb(255, 0, 127)' ) => { color: '#ff007f' }
validateMargin('15')           // throws (missing unit)

normalizeMediaQuery('@media (width >= 768px and width <= 1024px)') => '@media (min-width: 768px) and (max-width: 1024px)'
normalizeMediaQuery('@media not (not ((min-width: 600px) and (color)))') => '@media (min-width: 600px) and (color)'
validateMediaQuery('@media (min-width: var(--x))') // unsupported
@mellyeliu mellyeliu added the enhancement New feature or request label May 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant