fix: BREAKING CHANGE: Themes set *all* variables in a VarGroup. always.

[nmn]

Partially addresses #601

Terminology:

• VarGroup - A group of variables created by stylex.defineVars. These variables have default values.
• Theme - A className generated that sets some or all of the variables in a VarGroup to alternate values.

The Change

Changes the way stylex.createTheme such that when creating a Theme for a given VarGroup, any variables from the VarGroup that are NOT overridden will be set to their default value.

In practice, this means that the variables within a VarGroup will have at most one theme applied.

This also means that generating a theme to reset all variables within a VarGroup is as easy as:

const resetTheme = stylex.createTheme(myVars, {});

stylex.createTheme can be used in any file, so this can be defined in the component file where a theme needs to be reset. Further, defining the same theme in multiple files will not result in duplicate CSS, and so it is safe to repeat this declaration wherever it is needed.

---

Next Steps

A follow-up PR will detect CSS variables that point to other variables and add a minimal amount of CSS to handle those cases specifically.

[github-actions]

compressed-size: runtime library

Size change: 0.00 kB
Total size: 2.52 kB

View unchanged

Filename: gzip (minify)	kB size	kB change	% change
./packages/stylex/lib/stylex.js	1.04 (3.22)	0.00 (0.00)	0.0% (0.0%)
./packages/stylex/lib/StyleXSheet.js	1.48 (3.75)	0.00 (0.00)	0.0% (0.0%)

[github-actions]

compressed-size: e2e bundles

Size change: 0.00 kB
Total size: 1125.73 kB

View unchanged

Filename: gzip (minify)	kB size	kB change	% change
./apps/rollup-example/.build/bundle.js	1002.49 (10185.35)	0.00 (0.00)	0.0% (0.0%)
./apps/rollup-example/.build/stylex.css	123.24 (774.87)	0.00 (0.00)	0.0% (0.0%)

[necolas]

Having options means that code could be author using one option and then work totally differently if used in a project that sets a different option. Internally we're only going to use one of these so probably best to just add that one. The extra complexity here doesn't seem worth it to me

[nmn]

I agree that the complexity isn't worth it. I didn't want to make a decision at the time as I don't agree with how global works as how themes should work. I also verified that other libraries like Vanilla Extract don't do theming the way global does.

Both var or group make sense to me however. var is currently the default and changing the behaviour to group sounds like a good idea to me.

[github-actions]

workflow: benchmarks/size

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

@stylexjs/scripts@0.9.0-beta.1 size:compare
./size-compare.js /tmp/tmp.5wtaVFvR5m /tmp/tmp.N1D7oe8eHG

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