facebook
feat: add theme override behaviour configuration
Resolves #601
Add a new configuration option called themeOverride that can have the values:
var(current behaviour) - Only the variables set in the theme are overridden, the rest of the variables are unaffectedgroup- When setting a theme for a VarGroup, any variable omitted in the theme is set back to it's default value (when declared usingdefineVars)global- When setting a theme all variables not in theme are reset back to their defaults, globally in all VarGroups.- With this configuration, in order to apply custom themes for different VarGroups, the themes must be applied to the same HTML element.
TODO: Some more tests to be added.
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[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
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%) |
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
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.
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.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 |