facebook / facebook/stylex

[style-value-parser] Build CSS validator

Open
#1,036 0 comments 1 reaction 0 assignees View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.