Skip to content

Add native support for CSS variables with fixed names #328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

necolas
Copy link
Contributor

@necolas necolas commented Jul 2, 2025

StyleX on web has a feature that prevents auto-generation of scope CSS var names by defineVars, if the user-provided var key is a string that starts with --.

Adding support for this involves removing the legacy feature that converted kebab-case variable names to camelCase. Therefore, it's a breaking change that requires modification to the customProperties map passed to the legacy ThemeProvider context.

Close #73
Fix #50

Copy link

github-actions bot commented Jul 2, 2025

workflow: benchmarks/size

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

Results Base Patch Ratio
react-strict-dom/dist/dom/index.js
· compressed 2,514 2,514 1.00
· minified 8,691 8,691 1.00
react-strict-dom/dist/dom/runtime.js
· compressed 855 855 1.00
· minified 2,435 2,435 1.00
react-strict-dom/dist/native/index.js
· compressed 16,065 16,029 1.00 -
· minified 59,912 59,841 1.00 -

Copy link

github-actions bot commented Jul 2, 2025

workflow: benchmarks/perf (native)

Comparison of performance test results, measured in operations per second. Larger is better.

Results Base Patch Ratio
css.create
· small 1,149,313 1,140,052 0.99 -
· small with units 433,734 430,663 0.99 -
· small with variables 661,187 659,493 1.00 -
· several small 319,453 318,568 1.00 -
· large 207,090 207,021 1.00 -
· large with polyfills 145,922 145,231 1.00 -
· complex 99,582 98,825 0.99 -
· unsupported 218,133 219,350 1.01 +
css.createTheme
· simple theme 224,591 368,532 1.64 !!
· polyfill theme 210,070 337,450 1.61 !!
css.props
· small 279,440 279,914 1.00 +
· small with units 222,239 222,438 1.00 +
· small with variables 112,451 287,862 2.56 !!
· small with variables of units 79,138 288,016 3.64 !!
· large 120,811 119,629 0.99 -
· large with polyfills 41,768 84,094 2.01 !!
· complex 25,558 45,878 1.80 !!
· unsupported 178,442 179,217 1.00 +
· simple merge 183,606 184,377 1.00 +
· wide merge 19,413 28,557 1.47 !!
· deep merge 19,072 28,032 1.47 !!
· themed merge 36,550 36,521 1.00 -

@necolas necolas force-pushed the native/passthrough-vars branch 2 times, most recently from 7efa95a to ffcc380 Compare July 3, 2025 18:58
StyleX on web has a feature that prevents auto-generation of scoped CSS
var names created by `defineVars`. If the user-provided var key is a
string that starts with `--`, the key is preserved as-is and its value
can even be redefined in other `defineVars` calls.

Adding support for this on native involves removing the legacy feature
that converted kebab-case variable names to camelCase. Therefore, it's a
breaking change that requires users to modify to the `customProperties`
map (adding `--` prefix to all keys) passed to any use of the legacy
`ThemeProvider` context.

Close #73
Fix #50
@necolas necolas force-pushed the native/passthrough-vars branch from ffcc380 to f5de618 Compare July 9, 2025 21:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Remove automatic camel-casing of CSS custom property names
2 participants