facebook / facebook/stylex

Use a better CSS value parser to normalize values

Open
#721 0 comments 0 reactions 1 assignee Claimed by @mellyeliu View on GitHub
enhancement
Dominant language
JavaScript
Stars
10.3k
Forks
481
Avg merge
3d 8h
Merged PRs (30d)
13

Description

We currently use `postcss-value-parser` to parse the values used in `stylex.create` and normalize them. However, this is a basic parser and we're mostly limited in the normalisation we can perform to being able to strip extra white space, and sometimes drop units used with `0`.

We can use a more sophisticated CSS value parser that understand CSS value types to be able to normalise many more kinds of values.

Here are a few examples:
- `rgb(0 0 0 / 50%)` should be normalised to `rgba(0,0,0,0.5)`
- `#000000` should be normalised to `#000`
- We should either convert all named CSS colours to hashes *or* convert hash values to named values when possible.
- `@media (width >= 768px)` should be normalised to `@media (min-width: 768px)`
- etc.

---

[nmn/css-value-parser](https://github.com/nmn/css-value-parser) is a fairly full featured parser that I worked on specifically for this purpose.

We could also consider using `lightningcss` if that is a good fit.

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.