feat: create new defineConsts api

[mellyeliu]

Context

Adds support for new API stylex.defineConsts to inject constants into the css transform pipeline and replace var(--token) usage with raw values when processing rules

// colors.stylex.js
import { defineConsts } from 'stylex'

export const colors = stylex.defineConsts({
  red: '#ff0000',
  green: '#00ff00',
})

// component.js
import stylex from 'stylex'
import { colors } from './colors.stylex'

const styles = stylex.create({
  box: {
    color: colors.red,
    backgroundColor: colors.green,
  },
})

shared

• accepts a JS object of constants
• returns an object mapping unique hashed keys to { constKey, constVal }
• includes the hash as key to match css variable format

defineConsts babel transform

1. Walk ast and detect call to stylex.defineConsts
2. call stylexDefineConsts to convert obj to js output and metadata
3. replace the call in the AST with a plain JS object (primarily for debugging capabilities)
   const colors = { red: '#ff0000' }
4. register styles into state.registerStyles using the hash and { constKey, constVal } to be used in rules processing

processStylexRules

1. extract constKey and constVal from any rules that came from defineConsts
   store them in dict from var(--hash) to value
2. for each css rule in rules, replace:
   • var(--hash) to raw value
   • var(--hash, fallback) to raw value (to do in follow up with TokenParser)
     this is done for both ltr and rtl if present

Testing

Added transform and shared utils tests

Tested E2E in examples

Pre-flight checklist

• I have read the contributing guidelines
  Contribution Guidelines
• Performed a self-review of my code

[github-actions]

workflow: benchmarks/size

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

[email protected] size:compare
node size/compare.js /tmp/tmp.kar0MVnnnV /tmp/tmp.5xeEuzQDXA

Results	Base	Patch	Ratio
stylex/lib/stylex.js
· compressed	985	1,000	1.02	+
· minified	3,154	3,255	1.03	+
stylex/lib/StyleXSheet.js
· compressed	1,266	1,266	1.00
· minified	3,776	3,776	1.00
benchmarks/size/.build/bundle.js
· compressed	537,611	537,611	1.00
· minified	7,435,904	7,435,904	1.00
benchmarks/size/.build/stylex.css
· compressed	100,609	100,609	1.00
· minified	755,721	755,721	1.00