fix(ui): break circular import between styled-system and primitives

[jacekradko]

Breaks a latent circular import in the styled-system that started crashing the Dashboard dev build once the dev Rspack config turned off tree-shaking (providedExports/usedExports).

The loop: InternalThemeProvider imports useAppearance from the customizables barrel, which eagerly loads primitives, whose Box calls createVariants from the styledSystem barrel at module-eval time, re-entering a barrel that hasn't finished initializing. useAppearance actually lives in the customizables/AppearanceContext leaf, and that leaf's subtree only references styledSystem through a type-only import, so pointing the import there directly pulls nothing back in and severs the cycle.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jun 4, 2026 4:41pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 86e4db6

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 8ebaf806-786b-43cf-9c88-79963daae052

📥 Commits

Reviewing files that changed from the base of the PR and between 27c4d75 and 86e4db6.

📒 Files selected for processing (2)

• .changeset/fix-ui-styledsystem-circular-import.md
• packages/ui/src/styledSystem/InternalThemeProvider.tsx

---

📝 Walkthrough

Walkthrough

This PR resolves a circular import issue in the styled-system module. The fix changes InternalThemeProvider to import useAppearance directly from the AppearanceContext module instead of importing it through the customizables barrel export. This direct import breaks the circular dependency chain that could cause module initialization to fail in bundlers when tree-shaking is disabled. A changeset documents the patch-level release.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(ui): break circular import between styled-system and primitives' accurately describes the main change: breaking a circular import in the styled-system. It is concise, specific, and directly relates to the changeset.
Description check	✅ Passed	The description clearly explains the circular import issue, the specific loop causing the problem, and how the fix resolves it by changing the import source. It is directly related to the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 86e4db6

[github-actions]

Break Check: no API changes detected across the tracked packages.

_{Last ran on 86e4db6. Pushes that change no tracked declarations (no API surface change vs. base) are skipped and don't update this comment.}