[style-value-parser] Build CSS validator
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
### 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
```ts
validate(property, value) =>
normalize(property, value) =>
```
OR
```ts
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
```
Contributor guide
Assessment
This issue has not been assessed yet.