chore: Add new style-value-parser package

[nmn]

Background

We're currently using postcss-value-parser for a few purposes but it is quite rudimentary.

lightningcss was considered but its API only parses entire CSS files and not individual values. It would also be a very heavy tool for what we need as it's an entire CSS post-processor. It would also allow all valid CSS and it would be more difficult to manually add our own constraints to it.

New CSS Value Parser

This PR introduces a new parser which have been tailored for StyleX:

• It will parse all CSS types
• We can define our own constraints for the values we will accept for various properties.
  • We can explicitly disallow multi-value shorthands
  • We can enforce a certain order for values within properties that can be written in arbitrary order, such as box-shadow.
• It is pure-JS
• Its .toString() methods will output normalised strings for various values
  • Over time, we can even convert certain types. (we are starting by being conservative)
    • e.g. we could convert:
      • named_colors to hashes
      • rgb to hashes
      • units such as cm and inch to px.
      • etc...

How it will be used

This parser will be used to :

• validate styles in the ESLint plugin (where our checks are overly permissive)
• validate styles within both the Babel parser
• normalise values within the Babel parser to reduce variance and have fewer duplicate styles
• Be used to parse strings such as @media queries in order to add additional guarantees for them.

How complete is it?

There should already be parser for every CSS type.

There are a few style property specific parsers that composing together the "type" parsers. These are there as examples to get us started. These need to be updated to allow CSS variables being used in various positions.

There are many unit tests, but test coverage could be improved. Specially for the toString methods.

[github-actions]

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

@stylexjs/[email protected] size:compare
./size-compare.js /tmp/tmp.mnxgRMwndd /tmp/tmp.uuhAs8AJ3X

Results	Base	Patch	Ratio
stylex/lib/stylex.js
· compressed	729	729	1.00
· minified	2,541	2,541	1.00
stylex/lib/StyleXSheet.js
· compressed	1,266	1,266	1.00
· minified	3,776	3,776	1.00
rollup-example/.build/bundle.js
· compressed	563,025	563,025	1.00
· minified	10,185,368	10,185,368	1.00
rollup-example/.build/stylex.css
· compressed	99,154	99,154	1.00
· minified	745,649	745,649	1.00