Support styled-components, Emotion, vanilla-extract, and StyleX sources - #669
Merged
Merged
Conversation
owjs3901
force-pushed
the
owjs3901/css-in-js-compat
branch
2 times, most recently
from
September 15, 2026 14:21
553b6bd to
7005ff8
Compare
Projects migrating to Devup UI had to rewrite every styling call site before they could build. The extractor now recognises the source APIs of those four libraries and rewrites them to Devup equivalents at build time, so an existing codebase compiles as-is and can migrate file by file. - Resolve StyleX computed member access (`styles[variant]`), which previously dropped the whole style. Fixes #664. - Implement the remaining StyleX surface: defineVars, createTheme, createThemeContract, defineConsts, positionTry, viewTransitionClass, attrs, StyleXArray and optional chaining. - Map styled-components and Emotion onto `styled`/`css`, including both the curried and two-argument call forms, and add the Emotion `Global` element. - Resolve `props.theme` interpolation to CSS variables at build time via ThemeProvider, so theme reads cost no runtime work. - Map vanilla-extract `style`/`globalStyle` onto `css`/`globalCss`. Compat-only symbols move to a separate `@devup-ui/react/compat` entry so the main entry keeps exporting Devup's own API, and each plugin emits a `compat.d.ts` alongside the generated CSS to type the source packages. Replace 12 `to_expression()` calls with `as_expression()`; the former panics on non-expression nodes that these code paths can legitimately receive. Two placements are load-bearing rather than cosmetic. `is_vanilla_extract_file` moves to `utils` because import rewriting needs it in every build, while its old module is behind the `vanilla-extract` feature that the lite WASM variant drops. `StyledTheme` is declared in `types/props` so `styled` reaches it over an import edge it already had: pulling it from `utils/theme-vars` instead adds a new edge that destabilises how `DevupProps` and `DevupCustomShorthands` resolve, and drops the selector props.
owjs3901
force-pushed
the
owjs3901/css-in-js-compat
branch
from
September 15, 2026 14:42
7005ff8 to
74a6627
Compare
Contributor
Changepacks@devup-ui/react@1.0.42 - packages/react/package.jsonMaybe you forgot to write the following files to the latest version |
Codecov Report✅ All modified and coverable lines are covered by tests.
🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #664.
Why
Adopting Devup UI meant rewriting every styling call site first. This teaches the extractor to read the source APIs of styled-components, Emotion, vanilla-extract, and StyleX directly, so an existing codebase builds as-is and can migrate file by file.
What
StyleX
styles[variant]) resolved instead of silently dropping the whole style — the StyleX extraction: computed member access is dropped at the call site #664 bug.defineVars,createTheme,createThemeContract,defineConsts,positionTry,viewTransitionClass,attrs, StyleXArray, optional chaining.UNSUPPORTED_STYLEX_APISis gone.styled-components / Emotion
styledmaps onto Devup'sstyledin both the curried and two-argument forms. Malformed calls such asstyled('div', 'span')are left untransformed.Globalelement is supported, and@emotion/reactis a default alias.props.themeinterpolation resolves to CSS variables at build time viaThemeProvider, in both template and object form, so theme reads cost no runtime work.vanilla-extract
style/globalStylemap ontocss/globalCss.Packaging
@devup-ui/react/compatentry, so the main entry keeps exporting Devup's own API.useThemegets its original name back.compat.d.tsnext to the generated CSS to type the source packages.Robustness
to_expression()calls becameas_expression(). The former panics on non-expression nodes that these paths can legitimately receive.Two placements worth a reviewer's eye
Both are load-bearing, not cosmetic — each is documented at its definition:
is_vanilla_extract_filemoved toutils. Import rewriting needs it in every build, but its old module sits behind thevanilla-extractfeature that the lite WASM variant drops.StyledThemeis declared intypes/propssostyledreaches it over an import edge it already had. Importing it fromutils/theme-varsinstead adds a new edge that destabilises howDevupPropsandDevupCustomShorthandsresolve, which drops the selector props (caught bytype-tests/custom-shorthand.ts).Docs
Adds migration guides under
docs/migration/: overview, styled-components, vanilla-extract, and StyleX.Verification
cargo test --workspace— 2007 passedcargo clippy --workspace --all-targets --all-features -- -D warnings— cleancargo fmt --all -- --check— cleancargo check -p extractor --no-default-features— clean (the lite WASM variant)bun run build— all 11 packages exit 0bun test— 5204 passedbun run verify:dist— all declared dist entry points load and export