Skip to content

Add native support for CSS variables with fixed names - #328

Open
necolas wants to merge 1 commit into
mainfrom
native/passthrough-vars
Open

Add native support for CSS variables with fixed names#328
necolas wants to merge 1 commit into
mainfrom
native/passthrough-vars

Conversation

@necolas

@necolasnecolas commented Jul 2, 2025

Copy link
Copy Markdown
Contributor

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

@github-actions

github-actionsBot commented Jul 2, 2025

Copy link
Copy Markdown

workflow: benchmarks/size

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

ResultsBasePatchRatio
react-strict-dom/dist/dom/index.js
· compressed2,5142,5141.00
· minified8,6918,6911.00
react-strict-dom/dist/dom/runtime.js
· compressed8558551.00
· minified2,4352,4351.00
react-strict-dom/dist/native/index.js
· compressed16,06516,0291.00-
· minified59,91259,8411.00-

@github-actions

github-actionsBot commented Jul 2, 2025

Copy link
Copy Markdown

workflow: benchmarks/perf (native)

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

ResultsBasePatchRatio
css.create
· small1,149,3131,140,0520.99-
· small with units433,734430,6630.99-
· small with variables661,187659,4931.00-
· several small319,453318,5681.00-
· large207,090207,0211.00-
· large with polyfills145,922145,2311.00-
· complex99,58298,8250.99-
· unsupported218,133219,3501.01+
css.createTheme
· simple theme224,591368,5321.64!!
· polyfill theme210,070337,4501.61!!
css.props
· small279,440279,9141.00+
· small with units222,239222,4381.00+
· small with variables112,451287,8622.56!!
· small with variables of units79,138288,0163.64!!
· large120,811119,6290.99-
· large with polyfills41,76884,0942.01!!
· complex25,55845,8781.80!!
· unsupported178,442179,2171.00+
· simple merge183,606184,3771.00+
· wide merge19,41328,5571.47!!
· deep merge19,07228,0321.47!!
· themed merge36,55036,5211.00-

@necolas
necolasforce-pushed the native/passthrough-vars branch 2 times, most recently from 7efa95a to ffcc380CompareJuly 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#73Fix#50
@necolas
necolasforce-pushed the native/passthrough-vars branch from ffcc380 to f5de618CompareJuly 9, 2025 21:18
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Remove automatic camel-casing of CSS custom property names

2 participants

@necolas@facebook-github-bot