Skip to content

feat(clerk-js): Add cssLayerName option to experimental_createTheme #6344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 6 commits into from
Jul 18, 2025
Merged

feat(clerk-js): Add cssLayerName option to experimental_createTheme #6344

merged 6 commits into from
Jul 18, 2025

Conversation

alexcarpenter
Copy link
Member

Description

This enables shipping the shadcn theme without the users needing to specify the cssLayerName themselves.

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jul 17, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: e853821

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel Vercel
Copy link

vercel bot commented Jul 17, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
clerk-js-sandbox ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 18, 2025 3:11pm

alexcarpenter
alexcarpenter commented Jul 17, 2025
View reviewed changes
packages/themes/src/themes/shadcn.ts
@@ -1,6 +1,7 @@
import { experimental_createTheme } from '../createTheme';

export const shadcn = experimental_createTheme({
cssLayerName: 'components',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we know shadcn is using TW, we can specify the cssLayerName to be defined within components, relying on TW layer order specified.

panteliselef
panteliselef approved these changes Jul 18, 2025
View reviewed changes
packages/themes/src/themes/shadcn.ts
@@ -1,6 +1,7 @@
import { experimental_createTheme } from '../createTheme';

export const shadcn = experimental_createTheme({
cssLayerName: 'components',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
cssLayerName: 'components',
cssLayerName: 'clerk-components',

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need this to be components as this is the layer name tailwind uses. Which removes the need for them to need to specify the layer order. We can only do this because we know if they are using shadcn, that TW is used and they have a components layer already defined.

@alexcarpenter alexcarpenter requested a review from tmilewski July 18, 2025 13:51
tmilewski
tmilewski requested changes Jul 18, 2025
View reviewed changes
@tmilewski tmilewski self-requested a review July 18, 2025 14:37
@alexcarpenter alexcarpenter merged commit f6cc7d0 into alexcarpenter/user-2373-expose-shadcn-theme-from-clerkthemes Jul 18, 2025
7 checks passed
@alexcarpenter alexcarpenter deleted the alexcarpenter/add-css-layer-name-to-create-theme branch July 18, 2025 15:21
@alexcarpenter alexcarpenter mentioned this pull request Jul 18, 2025
Merged
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tmilewski tmilewski tmilewski approved these changes

@panteliselef panteliselef panteliselef approved these changes

Assignees
No one assigned
Labels
clerk-js themes types
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@alexcarpenter @tmilewski @panteliselef @clerk-cookie