stylex icon indicating copy to clipboard operation
stylex copied to clipboard

Use a better CSS value parser to normalize values

Open nmn opened this issue 1 year ago • 0 comments

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 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.

nmn avatar Oct 09 '24 02:10 nmn