feat(ui): migrate Mosaic Button to StyleX

[alexcarpenter]

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 merge
• Button → plain StyleX, foldered: components/button/{button,button.styles,index,button.test}
• isolated build:mosaic (tsdown + rollup-plugin) → dist-mosaic/styles.css, export @clerk/ui/styles.css
• all 9 @stylexjs eslint rules on src/mosaic/**

Swingset

• consumes Mosaic from source (@clerk/ui/mosaic aliased to ../ui/src/mosaic)
• StyleX split two ways, same babel version/opts so atom hashes match:
  • next.config unplugin → compiles StyleX JS only (calls become static atoms, nothing hits runtime; SWC/Emotion/next/font untouched)
  • postcss plugin → owns CSS, replaces @stylex; in globals.css (dev "no CSS asset" warning expected)
• useCSSLayers: true (matches published build) → atoms carry StyleX @layer priorityN precedence; consumers pick the outer layer at import: @import '@clerk/ui/styles.css' layer(components)
• lightningcss targets pinned to browsers with native light-dark()/oklch() (no down-level to invalid polyfill)

Notes

• Mosaic internal/unreleased → empty changeset, no back-compat constraint
• org views: sx → style on new Button

[changeset-bot]

🦋 Changeset detected

Latest commit: 09be4be

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When 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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 22, 2026 7:24pm
swingset	Ready	Preview, Comment	Jul 22, 2026 7:24pm

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9208

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9208

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9208

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9208

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9208

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9208

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9208

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9208

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9208

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9208

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9208

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9208

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9208

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9208

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9208

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9208

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9208

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9208

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9208

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9208

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9208

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9208

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9208

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9208

commit: 09be4be

[coderabbitai]

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The 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 sx styling with inline styles, and the Button story defines variant metadata inline.

Estimated code review effort: 4 (Complex) | ~60 minutes

Suggested reviewers:kylemac

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 44.44% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: migrating the Mosaic Button to StyleX.
Description check	✅ Passed	The description is detailed and directly matches the StyleX migration and related build/config changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

packages/ui/src/mosaic/styles/index.ts (1)

7-22: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Avoid growing this index.ts re-export barrel.

Move this curated build entry to a named module (for example, mosaic-stylex.ts) and point tsdown.mosaic.config.mts to 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5070797 and d70595f.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (29)

• .changeset/mosaic-stylex-migration.md
• .gitignore
• eslint.config.mjs
• package.json
• packages/swingset/next.config.mjs
• packages/swingset/package.json
• packages/swingset/postcss.config.mjs
• packages/swingset/src/app/globals.css
• packages/swingset/src/stories/button.stories.tsx
• packages/ui/package.json
• packages/ui/src/mosaic/__tests__/props.test.ts
• packages/ui/src/mosaic/components/__tests__/button.test.tsx
• packages/ui/src/mosaic/components/button.tsx
• packages/ui/src/mosaic/components/button/button.styles.ts
• packages/ui/src/mosaic/components/button/button.test.tsx
• packages/ui/src/mosaic/components/button/button.tsx
• packages/ui/src/mosaic/components/button/index.ts
• packages/ui/src/mosaic/organization/organization-profile-delete-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-leave-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-members-panel.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-profile-section.view.tsx
• packages/ui/src/mosaic/props.ts
• packages/ui/src/mosaic/styles/index.ts
• packages/ui/src/mosaic/tokens.stylex.ts
• packages/ui/styles.css.d.ts
• packages/ui/tsconfig.mosaic.json
• packages/ui/tsdown.mosaic.config.mts
• packages/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

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-22T19:25:18.932Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	1
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	1

---

@clerk/ui

Current version: 1.25.7
Recommended bump: MINOR → 1.26.0

Subpath ./styles.css

🟢 Additions (1)

Added: ./styles.css

New subpath export ./styles.css

---

Report generated by Break Check

_{Last ran on 09be4be.}

[alexcarpenter]

Nitpick — styles/index.ts barrel → named module: leaving as-is. It's the isolated build entry (tsdown.mosaic.config.mts), imported by nothing else; depends on components/tokens/props one-directionally, so no circular-dep risk.

[wobsoriano]

Very exciting

[alexcarpenter]

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 merge
• Button → plain StyleX, foldered: components/button/{button,button.styles,index,button.test}
• isolated build:mosaic (tsdown + rollup-plugin) → dist-mosaic/styles.css, export @clerk/ui/styles.css
• all 9 @stylexjs eslint rules on src/mosaic/**

Swingset

• consumes Mosaic from source (@clerk/ui/mosaic aliased to ../ui/src/mosaic)
• StyleX split two ways, same babel version/opts so atom hashes match:
  • next.config unplugin → compiles StyleX JS only (calls become static atoms, nothing hits runtime; SWC/Emotion/next/font untouched)
  • postcss plugin → owns CSS, replaces @stylex; in globals.css (dev "no CSS asset" warning expected)
• useCSSLayers: true (matches published build) → atoms carry StyleX @layer priorityN precedence; consumers pick the outer layer at import: @import '@clerk/ui/styles.css' layer(components)
• lightningcss targets pinned to browsers with native light-dark()/oklch() (no down-level to invalid polyfill)

Notes

• Mosaic internal/unreleased → empty changeset, no back-compat constraint
• org views: sx → style on new Button

[changeset-bot]

🦋 Changeset detected

Latest commit: 09be4be

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When 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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 22, 2026 7:24pm
swingset	Ready	Preview, Comment	Jul 22, 2026 7:24pm

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9208

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9208

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9208

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9208

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9208

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9208

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9208

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9208

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9208

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9208

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9208

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9208

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9208

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9208

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9208

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9208

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9208

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9208

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9208

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9208

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9208

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9208

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9208

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9208

commit: 09be4be

[coderabbitai]

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The 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 sx styling with inline styles, and the Button story defines variant metadata inline.

Estimated code review effort: 4 (Complex) | ~60 minutes

Suggested reviewers:kylemac

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 44.44% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: migrating the Mosaic Button to StyleX.
Description check	✅ Passed	The description is detailed and directly matches the StyleX migration and related build/config changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

packages/ui/src/mosaic/styles/index.ts (1)

7-22: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Avoid growing this index.ts re-export barrel.

Move this curated build entry to a named module (for example, mosaic-stylex.ts) and point tsdown.mosaic.config.mts to 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5070797 and d70595f.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (29)

• .changeset/mosaic-stylex-migration.md
• .gitignore
• eslint.config.mjs
• package.json
• packages/swingset/next.config.mjs
• packages/swingset/package.json
• packages/swingset/postcss.config.mjs
• packages/swingset/src/app/globals.css
• packages/swingset/src/stories/button.stories.tsx
• packages/ui/package.json
• packages/ui/src/mosaic/__tests__/props.test.ts
• packages/ui/src/mosaic/components/__tests__/button.test.tsx
• packages/ui/src/mosaic/components/button.tsx
• packages/ui/src/mosaic/components/button/button.styles.ts
• packages/ui/src/mosaic/components/button/button.test.tsx
• packages/ui/src/mosaic/components/button/button.tsx
• packages/ui/src/mosaic/components/button/index.ts
• packages/ui/src/mosaic/organization/organization-profile-delete-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-leave-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-members-panel.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-profile-section.view.tsx
• packages/ui/src/mosaic/props.ts
• packages/ui/src/mosaic/styles/index.ts
• packages/ui/src/mosaic/tokens.stylex.ts
• packages/ui/styles.css.d.ts
• packages/ui/tsconfig.mosaic.json
• packages/ui/tsdown.mosaic.config.mts
• packages/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

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-22T19:25:18.932Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	1
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	1

---

@clerk/ui

Current version: 1.25.7
Recommended bump: MINOR → 1.26.0

Subpath ./styles.css

🟢 Additions (1)

Added: ./styles.css

New subpath export ./styles.css

---

Report generated by Break Check

_{Last ran on 09be4be.}

[alexcarpenter]

Nitpick — styles/index.ts barrel → named module: leaving as-is. It's the isolated build entry (tsdown.mosaic.config.mts), imported by nothing else; depends on components/tokens/props one-directionally, so no circular-dep risk.

[wobsoriano]

Very exciting

[alexcarpenter]

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 merge
• Button → plain StyleX, foldered: components/button/{button,button.styles,index,button.test}
• isolated build:mosaic (tsdown + rollup-plugin) → dist-mosaic/styles.css, export @clerk/ui/styles.css
• all 9 @stylexjs eslint rules on src/mosaic/**

Swingset

• consumes Mosaic from source (@clerk/ui/mosaic aliased to ../ui/src/mosaic)
• StyleX split two ways, same babel version/opts so atom hashes match:
  • next.config unplugin → compiles StyleX JS only (calls become static atoms, nothing hits runtime; SWC/Emotion/next/font untouched)
  • postcss plugin → owns CSS, replaces @stylex; in globals.css (dev "no CSS asset" warning expected)
• useCSSLayers: true (matches published build) → atoms carry StyleX @layer priorityN precedence; consumers pick the outer layer at import: @import '@clerk/ui/styles.css' layer(components)
• lightningcss targets pinned to browsers with native light-dark()/oklch() (no down-level to invalid polyfill)

Notes

• Mosaic internal/unreleased → empty changeset, no back-compat constraint
• org views: sx → style on new Button

[changeset-bot]

🦋 Changeset detected

Latest commit: 09be4be

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When 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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 22, 2026 7:24pm
swingset	Ready	Preview, Comment	Jul 22, 2026 7:24pm

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9208

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9208

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9208

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9208

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9208

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9208

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9208

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9208

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9208

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9208

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9208

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9208

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9208

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9208

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9208

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9208

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9208

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9208

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9208

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9208

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9208

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9208

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9208

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9208

commit: 09be4be

[coderabbitai]

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The 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 sx styling with inline styles, and the Button story defines variant metadata inline.

Estimated code review effort: 4 (Complex) | ~60 minutes

Suggested reviewers:kylemac

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 44.44% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: migrating the Mosaic Button to StyleX.
Description check	✅ Passed	The description is detailed and directly matches the StyleX migration and related build/config changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

packages/ui/src/mosaic/styles/index.ts (1)

7-22: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Avoid growing this index.ts re-export barrel.

Move this curated build entry to a named module (for example, mosaic-stylex.ts) and point tsdown.mosaic.config.mts to 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5070797 and d70595f.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (29)

• .changeset/mosaic-stylex-migration.md
• .gitignore
• eslint.config.mjs
• package.json
• packages/swingset/next.config.mjs
• packages/swingset/package.json
• packages/swingset/postcss.config.mjs
• packages/swingset/src/app/globals.css
• packages/swingset/src/stories/button.stories.tsx
• packages/ui/package.json
• packages/ui/src/mosaic/__tests__/props.test.ts
• packages/ui/src/mosaic/components/__tests__/button.test.tsx
• packages/ui/src/mosaic/components/button.tsx
• packages/ui/src/mosaic/components/button/button.styles.ts
• packages/ui/src/mosaic/components/button/button.test.tsx
• packages/ui/src/mosaic/components/button/button.tsx
• packages/ui/src/mosaic/components/button/index.ts
• packages/ui/src/mosaic/organization/organization-profile-delete-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-leave-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-members-panel.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-profile-section.view.tsx
• packages/ui/src/mosaic/props.ts
• packages/ui/src/mosaic/styles/index.ts
• packages/ui/src/mosaic/tokens.stylex.ts
• packages/ui/styles.css.d.ts
• packages/ui/tsconfig.mosaic.json
• packages/ui/tsdown.mosaic.config.mts
• packages/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

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-22T19:25:18.932Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	1
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	1

---

@clerk/ui

Current version: 1.25.7
Recommended bump: MINOR → 1.26.0

Subpath ./styles.css

🟢 Additions (1)

Added: ./styles.css

New subpath export ./styles.css

---

Report generated by Break Check

_{Last ran on 09be4be.}

[alexcarpenter]

Nitpick — styles/index.ts barrel → named module: leaving as-is. It's the isolated build entry (tsdown.mosaic.config.mts), imported by nothing else; depends on components/tokens/props one-directionally, so no circular-dep risk.

[wobsoriano]

Very exciting

[alexcarpenter]

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 merge
• Button → plain StyleX, foldered: components/button/{button,button.styles,index,button.test}
• isolated build:mosaic (tsdown + rollup-plugin) → dist-mosaic/styles.css, export @clerk/ui/styles.css
• all 9 @stylexjs eslint rules on src/mosaic/**

Swingset

• consumes Mosaic from source (@clerk/ui/mosaic aliased to ../ui/src/mosaic)
• StyleX split two ways, same babel version/opts so atom hashes match:
  • next.config unplugin → compiles StyleX JS only (calls become static atoms, nothing hits runtime; SWC/Emotion/next/font untouched)
  • postcss plugin → owns CSS, replaces @stylex; in globals.css (dev "no CSS asset" warning expected)
• useCSSLayers: true (matches published build) → atoms carry StyleX @layer priorityN precedence; consumers pick the outer layer at import: @import '@clerk/ui/styles.css' layer(components)
• lightningcss targets pinned to browsers with native light-dark()/oklch() (no down-level to invalid polyfill)

Notes

• Mosaic internal/unreleased → empty changeset, no back-compat constraint
• org views: sx → style on new Button

[changeset-bot]

🦋 Changeset detected

Latest commit: 09be4be

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When 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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 22, 2026 7:24pm
swingset	Ready	Preview, Comment	Jul 22, 2026 7:24pm

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9208

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9208

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9208

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9208

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9208

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9208

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9208

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9208

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9208

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9208

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9208

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9208

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9208

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9208

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9208

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9208

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9208

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9208

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9208

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9208

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9208

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9208

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9208

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9208

commit: 09be4be

[coderabbitai]

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The 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 sx styling with inline styles, and the Button story defines variant metadata inline.

Estimated code review effort: 4 (Complex) | ~60 minutes

Suggested reviewers:kylemac

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 44.44% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: migrating the Mosaic Button to StyleX.
Description check	✅ Passed	The description is detailed and directly matches the StyleX migration and related build/config changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

packages/ui/src/mosaic/styles/index.ts (1)

7-22: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Avoid growing this index.ts re-export barrel.

Move this curated build entry to a named module (for example, mosaic-stylex.ts) and point tsdown.mosaic.config.mts to 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5070797 and d70595f.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (29)

• .changeset/mosaic-stylex-migration.md
• .gitignore
• eslint.config.mjs
• package.json
• packages/swingset/next.config.mjs
• packages/swingset/package.json
• packages/swingset/postcss.config.mjs
• packages/swingset/src/app/globals.css
• packages/swingset/src/stories/button.stories.tsx
• packages/ui/package.json
• packages/ui/src/mosaic/__tests__/props.test.ts
• packages/ui/src/mosaic/components/__tests__/button.test.tsx
• packages/ui/src/mosaic/components/button.tsx
• packages/ui/src/mosaic/components/button/button.styles.ts
• packages/ui/src/mosaic/components/button/button.test.tsx
• packages/ui/src/mosaic/components/button/button.tsx
• packages/ui/src/mosaic/components/button/index.ts
• packages/ui/src/mosaic/organization/organization-profile-delete-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-leave-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-members-panel.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-profile-section.view.tsx
• packages/ui/src/mosaic/props.ts
• packages/ui/src/mosaic/styles/index.ts
• packages/ui/src/mosaic/tokens.stylex.ts
• packages/ui/styles.css.d.ts
• packages/ui/tsconfig.mosaic.json
• packages/ui/tsdown.mosaic.config.mts
• packages/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

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-22T19:25:18.932Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	1
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	1

---

@clerk/ui

Current version: 1.25.7
Recommended bump: MINOR → 1.26.0

Subpath ./styles.css

🟢 Additions (1)

Added: ./styles.css

New subpath export ./styles.css

---

Report generated by Break Check

_{Last ran on 09be4be.}

[alexcarpenter]

Nitpick — styles/index.ts barrel → named module: leaving as-is. It's the isolated build entry (tsdown.mosaic.config.mts), imported by nothing else; depends on components/tokens/props one-directionally, so no circular-dep risk.

[wobsoriano]

Very exciting

[alexcarpenter]

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 merge
• Button → plain StyleX, foldered: components/button/{button,button.styles,index,button.test}
• isolated build:mosaic (tsdown + rollup-plugin) → dist-mosaic/styles.css, export @clerk/ui/styles.css
• all 9 @stylexjs eslint rules on src/mosaic/**

Swingset

• consumes Mosaic from source (@clerk/ui/mosaic aliased to ../ui/src/mosaic)
• StyleX split two ways, same babel version/opts so atom hashes match:
  • next.config unplugin → compiles StyleX JS only (calls become static atoms, nothing hits runtime; SWC/Emotion/next/font untouched)
  • postcss plugin → owns CSS, replaces @stylex; in globals.css (dev "no CSS asset" warning expected)
• useCSSLayers: true (matches published build) → atoms carry StyleX @layer priorityN precedence; consumers pick the outer layer at import: @import '@clerk/ui/styles.css' layer(components)
• lightningcss targets pinned to browsers with native light-dark()/oklch() (no down-level to invalid polyfill)

Notes

• Mosaic internal/unreleased → empty changeset, no back-compat constraint
• org views: sx → style on new Button

[changeset-bot]

🦋 Changeset detected

Latest commit: 09be4be

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When 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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 22, 2026 7:24pm
swingset	Ready	Preview, Comment	Jul 22, 2026 7:24pm

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9208

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9208

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9208

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9208

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9208

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9208

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9208

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9208

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9208

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9208

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9208

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9208

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9208

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9208

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9208

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9208

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9208

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9208

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9208

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9208

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9208

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9208

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9208

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9208

commit: 09be4be

[coderabbitai]

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The 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 sx styling with inline styles, and the Button story defines variant metadata inline.

Estimated code review effort: 4 (Complex) | ~60 minutes

Suggested reviewers:kylemac

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 44.44% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: migrating the Mosaic Button to StyleX.
Description check	✅ Passed	The description is detailed and directly matches the StyleX migration and related build/config changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

packages/ui/src/mosaic/styles/index.ts (1)

7-22: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Avoid growing this index.ts re-export barrel.

Move this curated build entry to a named module (for example, mosaic-stylex.ts) and point tsdown.mosaic.config.mts to 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5070797 and d70595f.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (29)

• .changeset/mosaic-stylex-migration.md
• .gitignore
• eslint.config.mjs
• package.json
• packages/swingset/next.config.mjs
• packages/swingset/package.json
• packages/swingset/postcss.config.mjs
• packages/swingset/src/app/globals.css
• packages/swingset/src/stories/button.stories.tsx
• packages/ui/package.json
• packages/ui/src/mosaic/__tests__/props.test.ts
• packages/ui/src/mosaic/components/__tests__/button.test.tsx
• packages/ui/src/mosaic/components/button.tsx
• packages/ui/src/mosaic/components/button/button.styles.ts
• packages/ui/src/mosaic/components/button/button.test.tsx
• packages/ui/src/mosaic/components/button/button.tsx
• packages/ui/src/mosaic/components/button/index.ts
• packages/ui/src/mosaic/organization/organization-profile-delete-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-leave-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-members-panel.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-profile-section.view.tsx
• packages/ui/src/mosaic/props.ts
• packages/ui/src/mosaic/styles/index.ts
• packages/ui/src/mosaic/tokens.stylex.ts
• packages/ui/styles.css.d.ts
• packages/ui/tsconfig.mosaic.json
• packages/ui/tsdown.mosaic.config.mts
• packages/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

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-22T19:25:18.932Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	1
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	1

---

@clerk/ui

Current version: 1.25.7
Recommended bump: MINOR → 1.26.0

Subpath ./styles.css

🟢 Additions (1)

Added: ./styles.css

New subpath export ./styles.css

---

Report generated by Break Check

_{Last ran on 09be4be.}

[alexcarpenter]

Nitpick — styles/index.ts barrel → named module: leaving as-is. It's the isolated build entry (tsdown.mosaic.config.mts), imported by nothing else; depends on components/tokens/props one-directionally, so no circular-dep risk.

[wobsoriano]

Very exciting

[alexcarpenter]

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 merge
• Button → plain StyleX, foldered: components/button/{button,button.styles,index,button.test}
• isolated build:mosaic (tsdown + rollup-plugin) → dist-mosaic/styles.css, export @clerk/ui/styles.css
• all 9 @stylexjs eslint rules on src/mosaic/**

Swingset

• consumes Mosaic from source (@clerk/ui/mosaic aliased to ../ui/src/mosaic)
• StyleX split two ways, same babel version/opts so atom hashes match:
  • next.config unplugin → compiles StyleX JS only (calls become static atoms, nothing hits runtime; SWC/Emotion/next/font untouched)
  • postcss plugin → owns CSS, replaces @stylex; in globals.css (dev "no CSS asset" warning expected)
• useCSSLayers: true (matches published build) → atoms carry StyleX @layer priorityN precedence; consumers pick the outer layer at import: @import '@clerk/ui/styles.css' layer(components)
• lightningcss targets pinned to browsers with native light-dark()/oklch() (no down-level to invalid polyfill)

Notes

• Mosaic internal/unreleased → empty changeset, no back-compat constraint
• org views: sx → style on new Button

[changeset-bot]

🦋 Changeset detected

Latest commit: 09be4be

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When 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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 22, 2026 7:24pm
swingset	Ready	Preview, Comment	Jul 22, 2026 7:24pm

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9208

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9208

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9208

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9208

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9208

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9208

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9208

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9208

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9208

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9208

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9208

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9208

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9208

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9208

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9208

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9208

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9208

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9208

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9208

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9208

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9208

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9208

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9208

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9208

commit: 09be4be

[coderabbitai]

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The 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 sx styling with inline styles, and the Button story defines variant metadata inline.

Estimated code review effort: 4 (Complex) | ~60 minutes

Suggested reviewers:kylemac

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 44.44% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: migrating the Mosaic Button to StyleX.
Description check	✅ Passed	The description is detailed and directly matches the StyleX migration and related build/config changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

packages/ui/src/mosaic/styles/index.ts (1)

7-22: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Avoid growing this index.ts re-export barrel.

Move this curated build entry to a named module (for example, mosaic-stylex.ts) and point tsdown.mosaic.config.mts to 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5070797 and d70595f.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (29)

• .changeset/mosaic-stylex-migration.md
• .gitignore
• eslint.config.mjs
• package.json
• packages/swingset/next.config.mjs
• packages/swingset/package.json
• packages/swingset/postcss.config.mjs
• packages/swingset/src/app/globals.css
• packages/swingset/src/stories/button.stories.tsx
• packages/ui/package.json
• packages/ui/src/mosaic/__tests__/props.test.ts
• packages/ui/src/mosaic/components/__tests__/button.test.tsx
• packages/ui/src/mosaic/components/button.tsx
• packages/ui/src/mosaic/components/button/button.styles.ts
• packages/ui/src/mosaic/components/button/button.test.tsx
• packages/ui/src/mosaic/components/button/button.tsx
• packages/ui/src/mosaic/components/button/index.ts
• packages/ui/src/mosaic/organization/organization-profile-delete-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-leave-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-members-panel.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-profile-section.view.tsx
• packages/ui/src/mosaic/props.ts
• packages/ui/src/mosaic/styles/index.ts
• packages/ui/src/mosaic/tokens.stylex.ts
• packages/ui/styles.css.d.ts
• packages/ui/tsconfig.mosaic.json
• packages/ui/tsdown.mosaic.config.mts
• packages/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

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-22T19:25:18.932Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	1
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	1

---

@clerk/ui

Current version: 1.25.7
Recommended bump: MINOR → 1.26.0

Subpath ./styles.css

🟢 Additions (1)

Added: ./styles.css

New subpath export ./styles.css

---

Report generated by Break Check

_{Last ran on 09be4be.}

[alexcarpenter]

Nitpick — styles/index.ts barrel → named module: leaving as-is. It's the isolated build entry (tsdown.mosaic.config.mts), imported by nothing else; depends on components/tokens/props one-directionally, so no circular-dep risk.

[wobsoriano]

Very exciting

[alexcarpenter]

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 merge
• Button → plain StyleX, foldered: components/button/{button,button.styles,index,button.test}
• isolated build:mosaic (tsdown + rollup-plugin) → dist-mosaic/styles.css, export @clerk/ui/styles.css
• all 9 @stylexjs eslint rules on src/mosaic/**

Swingset

• consumes Mosaic from source (@clerk/ui/mosaic aliased to ../ui/src/mosaic)
• StyleX split two ways, same babel version/opts so atom hashes match:
  • next.config unplugin → compiles StyleX JS only (calls become static atoms, nothing hits runtime; SWC/Emotion/next/font untouched)
  • postcss plugin → owns CSS, replaces @stylex; in globals.css (dev "no CSS asset" warning expected)
• useCSSLayers: true (matches published build) → atoms carry StyleX @layer priorityN precedence; consumers pick the outer layer at import: @import '@clerk/ui/styles.css' layer(components)
• lightningcss targets pinned to browsers with native light-dark()/oklch() (no down-level to invalid polyfill)

Notes

• Mosaic internal/unreleased → empty changeset, no back-compat constraint
• org views: sx → style on new Button

[changeset-bot]

🦋 Changeset detected

Latest commit: 09be4be

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When 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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 22, 2026 7:24pm
swingset	Ready	Preview, Comment	Jul 22, 2026 7:24pm

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9208

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9208

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9208

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9208

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9208

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9208

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9208

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9208

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9208

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9208

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9208

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9208

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9208

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9208

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9208

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9208

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9208

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9208

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9208

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9208

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9208

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9208

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9208

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9208

commit: 09be4be

[coderabbitai]

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The 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 sx styling with inline styles, and the Button story defines variant metadata inline.

Estimated code review effort: 4 (Complex) | ~60 minutes

Suggested reviewers:kylemac

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 44.44% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: migrating the Mosaic Button to StyleX.
Description check	✅ Passed	The description is detailed and directly matches the StyleX migration and related build/config changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

packages/ui/src/mosaic/styles/index.ts (1)

7-22: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Avoid growing this index.ts re-export barrel.

Move this curated build entry to a named module (for example, mosaic-stylex.ts) and point tsdown.mosaic.config.mts to 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5070797 and d70595f.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (29)

• .changeset/mosaic-stylex-migration.md
• .gitignore
• eslint.config.mjs
• package.json
• packages/swingset/next.config.mjs
• packages/swingset/package.json
• packages/swingset/postcss.config.mjs
• packages/swingset/src/app/globals.css
• packages/swingset/src/stories/button.stories.tsx
• packages/ui/package.json
• packages/ui/src/mosaic/__tests__/props.test.ts
• packages/ui/src/mosaic/components/__tests__/button.test.tsx
• packages/ui/src/mosaic/components/button.tsx
• packages/ui/src/mosaic/components/button/button.styles.ts
• packages/ui/src/mosaic/components/button/button.test.tsx
• packages/ui/src/mosaic/components/button/button.tsx
• packages/ui/src/mosaic/components/button/index.ts
• packages/ui/src/mosaic/organization/organization-profile-delete-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-leave-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-members-panel.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-profile-section.view.tsx
• packages/ui/src/mosaic/props.ts
• packages/ui/src/mosaic/styles/index.ts
• packages/ui/src/mosaic/tokens.stylex.ts
• packages/ui/styles.css.d.ts
• packages/ui/tsconfig.mosaic.json
• packages/ui/tsdown.mosaic.config.mts
• packages/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

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-22T19:25:18.932Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	1
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	1

---

@clerk/ui

Current version: 1.25.7
Recommended bump: MINOR → 1.26.0

Subpath ./styles.css

🟢 Additions (1)

Added: ./styles.css

New subpath export ./styles.css

---

Report generated by Break Check

_{Last ran on 09be4be.}

[alexcarpenter]

Nitpick — styles/index.ts barrel → named module: leaving as-is. It's the isolated build entry (tsdown.mosaic.config.mts), imported by nothing else; depends on components/tokens/props one-directionally, so no circular-dep risk.

[wobsoriano]

Very exciting

[alexcarpenter]

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 merge
• Button → plain StyleX, foldered: components/button/{button,button.styles,index,button.test}
• isolated build:mosaic (tsdown + rollup-plugin) → dist-mosaic/styles.css, export @clerk/ui/styles.css
• all 9 @stylexjs eslint rules on src/mosaic/**

Swingset

• consumes Mosaic from source (@clerk/ui/mosaic aliased to ../ui/src/mosaic)
• StyleX split two ways, same babel version/opts so atom hashes match:
  • next.config unplugin → compiles StyleX JS only (calls become static atoms, nothing hits runtime; SWC/Emotion/next/font untouched)
  • postcss plugin → owns CSS, replaces @stylex; in globals.css (dev "no CSS asset" warning expected)
• useCSSLayers: true (matches published build) → atoms carry StyleX @layer priorityN precedence; consumers pick the outer layer at import: @import '@clerk/ui/styles.css' layer(components)
• lightningcss targets pinned to browsers with native light-dark()/oklch() (no down-level to invalid polyfill)

Notes

• Mosaic internal/unreleased → empty changeset, no back-compat constraint
• org views: sx → style on new Button

[changeset-bot]

🦋 Changeset detected

Latest commit: 09be4be

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When 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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 22, 2026 7:24pm
swingset	Ready	Preview, Comment	Jul 22, 2026 7:24pm

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9208

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9208

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9208

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9208

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9208

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9208

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9208

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9208

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9208

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9208

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9208

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9208

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9208

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9208

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9208

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9208

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9208

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9208

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9208

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9208

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9208

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9208

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9208

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9208

commit: 09be4be

[coderabbitai]

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The 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 sx styling with inline styles, and the Button story defines variant metadata inline.

Estimated code review effort: 4 (Complex) | ~60 minutes

Suggested reviewers:kylemac

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 44.44% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: migrating the Mosaic Button to StyleX.
Description check	✅ Passed	The description is detailed and directly matches the StyleX migration and related build/config changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

packages/ui/src/mosaic/styles/index.ts (1)

7-22: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Avoid growing this index.ts re-export barrel.

Move this curated build entry to a named module (for example, mosaic-stylex.ts) and point tsdown.mosaic.config.mts to 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5070797 and d70595f.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (29)

• .changeset/mosaic-stylex-migration.md
• .gitignore
• eslint.config.mjs
• package.json
• packages/swingset/next.config.mjs
• packages/swingset/package.json
• packages/swingset/postcss.config.mjs
• packages/swingset/src/app/globals.css
• packages/swingset/src/stories/button.stories.tsx
• packages/ui/package.json
• packages/ui/src/mosaic/__tests__/props.test.ts
• packages/ui/src/mosaic/components/__tests__/button.test.tsx
• packages/ui/src/mosaic/components/button.tsx
• packages/ui/src/mosaic/components/button/button.styles.ts
• packages/ui/src/mosaic/components/button/button.test.tsx
• packages/ui/src/mosaic/components/button/button.tsx
• packages/ui/src/mosaic/components/button/index.ts
• packages/ui/src/mosaic/organization/organization-profile-delete-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-leave-section.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-members-panel.view.tsx
• packages/ui/src/mosaic/organization/organization-profile-profile-section.view.tsx
• packages/ui/src/mosaic/props.ts
• packages/ui/src/mosaic/styles/index.ts
• packages/ui/src/mosaic/tokens.stylex.ts
• packages/ui/styles.css.d.ts
• packages/ui/tsconfig.mosaic.json
• packages/ui/tsdown.mosaic.config.mts
• packages/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

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-22T19:25:18.932Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	1
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	1

---

@clerk/ui

Current version: 1.25.7
Recommended bump: MINOR → 1.26.0

Subpath ./styles.css

🟢 Additions (1)

Added: ./styles.css

New subpath export ./styles.css

---

Report generated by Break Check

_{Last ran on 09be4be.}

[alexcarpenter]

Nitpick — styles/index.ts barrel → named module: leaving as-is. It's the isolated build entry (tsdown.mosaic.config.mts), imported by nothing else; depends on components/tokens/props one-directionally, so no circular-dep risk.

[wobsoriano]

Very exciting