feat(clerk-js,types): Add experimental css layer name option #5552

alexcarpenter · 2025-04-07T20:44:34Z

Description

Native CSS layers are now used in the Tailwind CSS V4, which results in TW classes having lower specificity to any styles not defined in a layer. This means the following example results in hidden not actually hiding the element via display: none;

<SignIn
  appearance={{
    elements: {
      formButtonPrimary: 'hidden',
    },
  }}
/>

To solve this, we can introduce an option that allows folks to opt clerks styles to be wrapped in a layer with the ability to specify where the styles are injected via <meta name="emotion-insertion-point" />.

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider
      experimental={{
        cssLayerName: "components",
      }}
    >
      <html lang="en">
        <head>
          <meta name="emotion-insertion-point" />
        </head>
        <body>{children}</body>
      </html>
    </ClerkProvider>
  );
}

Resolves SDK-2095

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

changeset-bot · 2025-04-07T20:44:37Z

🦋 Changeset detected

Latest commit: eda061f

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

This PR includes changesets to release 22 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/types	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/agent-toolkit	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/elements	Patch
@clerk/expo-passkeys	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/shared	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/themes	Patch
@clerk/vue	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

vercel · 2025-04-07T20:44:37Z

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	Apr 28, 2025 2:55pm

alexcarpenter · 2025-04-07T20:50:23Z

!snapshot

clerk-cookie · 2025-04-07T20:52:34Z

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.19-snapshot.v20250407205111
@clerk/astro	2.6.1-snapshot.v20250407205111
@clerk/backend	1.27.1-snapshot.v20250407205111
@clerk/chrome-extension	2.2.26-snapshot.v20250407205111
@clerk/clerk-js	5.59.2-snapshot.v20250407205111
@clerk/elements	0.23.11-snapshot.v20250407205111
@clerk/clerk-expo	2.9.9-snapshot.v20250407205111
@clerk/expo-passkeys	0.2.3-snapshot.v20250407205111
@clerk/express	1.4.2-snapshot.v20250407205111
@clerk/fastify	2.2.2-snapshot.v20250407205111
@clerk/localizations	3.13.7-snapshot.v20250407205111
@clerk/nextjs	6.14.1-snapshot.v20250407205111
@clerk/nuxt	1.5.2-snapshot.v20250407205111
@clerk/clerk-react	5.26.1-snapshot.v20250407205111
@clerk/react-router	1.2.2-snapshot.v20250407205111
@clerk/remix	4.5.14-snapshot.v20250407205111
@clerk/shared	3.4.1-snapshot.v20250407205111
@clerk/tanstack-react-start	0.13.2-snapshot.v20250407205111
@clerk/testing	1.4.36-snapshot.v20250407205111
@clerk/themes	2.2.29-snapshot.v20250407205111
@clerk/types	4.51.1-snapshot.v20250407205111
@clerk/vue	1.5.1-snapshot.v20250407205111

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

alexcarpenter · 2025-04-07T21:59:20Z

!snapshot

clerk-cookie · 2025-04-07T22:01:30Z

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.19-snapshot.v20250407220002
@clerk/astro	2.6.1-snapshot.v20250407220002
@clerk/backend	1.27.1-snapshot.v20250407220002
@clerk/chrome-extension	2.2.26-snapshot.v20250407220002
@clerk/clerk-js	5.59.2-snapshot.v20250407220002
@clerk/elements	0.23.11-snapshot.v20250407220002
@clerk/clerk-expo	2.9.9-snapshot.v20250407220002
@clerk/expo-passkeys	0.2.3-snapshot.v20250407220002
@clerk/express	1.4.2-snapshot.v20250407220002
@clerk/fastify	2.2.2-snapshot.v20250407220002
@clerk/localizations	3.13.7-snapshot.v20250407220002
@clerk/nextjs	6.14.1-snapshot.v20250407220002
@clerk/nuxt	1.5.2-snapshot.v20250407220002
@clerk/clerk-react	5.26.1-snapshot.v20250407220002
@clerk/react-router	1.2.2-snapshot.v20250407220002
@clerk/remix	4.5.14-snapshot.v20250407220002
@clerk/shared	3.4.1-snapshot.v20250407220002
@clerk/tanstack-react-start	0.13.2-snapshot.v20250407220002
@clerk/testing	1.4.36-snapshot.v20250407220002
@clerk/themes	2.2.29-snapshot.v20250407220002
@clerk/types	4.51.1-snapshot.v20250407220002
@clerk/vue	1.5.1-snapshot.v20250407220002

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

diegohaz · 2025-04-21T04:22:19Z

Hi @alexcarpenter! I'm trying out the snapshot. Where is this option supposed to be set when using the @clerk/astro integration?

alexcarpenter · 2025-04-28T13:00:10Z

!snapshot

clerk-cookie · 2025-04-28T13:02:57Z

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.27-snapshot.v20250428130101
@clerk/astro	2.6.9-snapshot.v20250428130101
@clerk/backend	1.30.1-snapshot.v20250428130101
@clerk/chrome-extension	2.3.2-snapshot.v20250428130101
@clerk/clerk-js	5.63.0-snapshot.v20250428130101
@clerk/elements	0.23.19-snapshot.v20250428130101
@clerk/clerk-expo	2.10.2-snapshot.v20250428130101
@clerk/expo-passkeys	0.2.11-snapshot.v20250428130101
@clerk/express	1.4.10-snapshot.v20250428130101
@clerk/fastify	2.2.10-snapshot.v20250428130101
@clerk/localizations	3.14.1-snapshot.v20250428130101
@clerk/nextjs	6.18.1-snapshot.v20250428130101
@clerk/nuxt	1.5.10-snapshot.v20250428130101
@clerk/clerk-react	5.30.1-snapshot.v20250428130101
@clerk/react-router	1.3.1-snapshot.v20250428130101
@clerk/remix	4.6.1-snapshot.v20250428130101
@clerk/shared	3.7.5-snapshot.v20250428130101
@clerk/tanstack-react-start	0.14.1-snapshot.v20250428130101
@clerk/testing	1.6.0-snapshot.v20250428130101
@clerk/themes	2.2.37-snapshot.v20250428130101
@clerk/types	4.55.2-snapshot.v20250428130101
@clerk/vue	1.6.6-snapshot.v20250428130101

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

alexcarpenter · 2025-04-28T13:24:04Z

!snapshot

clerk-cookie · 2025-04-28T13:26:41Z

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.27-snapshot.v20250428132444
@clerk/astro	2.6.9-snapshot.v20250428132444
@clerk/backend	1.30.1-snapshot.v20250428132444
@clerk/chrome-extension	2.3.2-snapshot.v20250428132444
@clerk/clerk-js	5.63.0-snapshot.v20250428132444
@clerk/elements	0.23.19-snapshot.v20250428132444
@clerk/clerk-expo	2.10.2-snapshot.v20250428132444
@clerk/expo-passkeys	0.2.11-snapshot.v20250428132444
@clerk/express	1.4.10-snapshot.v20250428132444
@clerk/fastify	2.2.10-snapshot.v20250428132444
@clerk/localizations	3.14.1-snapshot.v20250428132444
@clerk/nextjs	6.18.1-snapshot.v20250428132444
@clerk/nuxt	1.5.10-snapshot.v20250428132444
@clerk/clerk-react	5.30.1-snapshot.v20250428132444
@clerk/react-router	1.3.1-snapshot.v20250428132444
@clerk/remix	4.6.1-snapshot.v20250428132444
@clerk/shared	3.7.5-snapshot.v20250428132444
@clerk/tanstack-react-start	0.14.1-snapshot.v20250428132444
@clerk/testing	1.6.0-snapshot.v20250428132444
@clerk/themes	2.2.37-snapshot.v20250428132444
@clerk/types	4.55.2-snapshot.v20250428132444
@clerk/vue	1.6.6-snapshot.v20250428132444

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

alexcarpenter · 2025-04-28T13:33:44Z

!snapshot

clerk-cookie · 2025-04-28T13:36:15Z

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.27-snapshot.v20250428133421
@clerk/astro	2.6.9-snapshot.v20250428133421
@clerk/backend	1.30.1-snapshot.v20250428133421
@clerk/chrome-extension	2.3.2-snapshot.v20250428133421
@clerk/clerk-js	5.63.0-snapshot.v20250428133421
@clerk/elements	0.23.19-snapshot.v20250428133421
@clerk/clerk-expo	2.10.2-snapshot.v20250428133421
@clerk/expo-passkeys	0.2.11-snapshot.v20250428133421
@clerk/express	1.4.10-snapshot.v20250428133421
@clerk/fastify	2.2.10-snapshot.v20250428133421
@clerk/localizations	3.14.1-snapshot.v20250428133421
@clerk/nextjs	6.18.1-snapshot.v20250428133421
@clerk/nuxt	1.5.10-snapshot.v20250428133421
@clerk/clerk-react	5.30.1-snapshot.v20250428133421
@clerk/react-router	1.3.1-snapshot.v20250428133421
@clerk/remix	4.6.1-snapshot.v20250428133421
@clerk/shared	3.7.5-snapshot.v20250428133421
@clerk/tanstack-react-start	0.14.1-snapshot.v20250428133421
@clerk/testing	1.6.0-snapshot.v20250428133421
@clerk/themes	2.2.37-snapshot.v20250428133421
@clerk/types	4.55.2-snapshot.v20250428133421
@clerk/vue	1.6.6-snapshot.v20250428133421

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

alexcarpenter · 2025-04-28T13:59:14Z

!snapshot

clerk-cookie · 2025-04-28T14:01:41Z

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.27-snapshot.v20250428135951
@clerk/astro	2.6.9-snapshot.v20250428135951
@clerk/backend	1.30.1-snapshot.v20250428135951
@clerk/chrome-extension	2.3.2-snapshot.v20250428135951
@clerk/clerk-js	5.63.0-snapshot.v20250428135951
@clerk/elements	0.23.19-snapshot.v20250428135951
@clerk/clerk-expo	2.10.2-snapshot.v20250428135951
@clerk/expo-passkeys	0.2.11-snapshot.v20250428135951
@clerk/express	1.4.10-snapshot.v20250428135951
@clerk/fastify	2.2.10-snapshot.v20250428135951
@clerk/localizations	3.14.1-snapshot.v20250428135951
@clerk/nextjs	6.18.1-snapshot.v20250428135951
@clerk/nuxt	1.5.10-snapshot.v20250428135951
@clerk/clerk-react	5.30.1-snapshot.v20250428135951
@clerk/react-router	1.3.1-snapshot.v20250428135951
@clerk/remix	4.6.1-snapshot.v20250428135951
@clerk/shared	3.7.5-snapshot.v20250428135951
@clerk/tanstack-react-start	0.14.1-snapshot.v20250428135951
@clerk/testing	1.6.0-snapshot.v20250428135951
@clerk/themes	2.2.37-snapshot.v20250428135951
@clerk/types	4.55.2-snapshot.v20250428135951
@clerk/vue	1.6.6-snapshot.v20250428135951

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

alexcarpenter · 2025-04-28T14:16:59Z

Hey @diegohaz, sorry for the late response, was out of office last week. This is still WIP, but will let you know when I have got it ported to Astro for any testing and feedback!

alexcarpenter · 2025-04-28T15:00:00Z

!snapshot

clerk-cookie · 2025-04-28T15:02:35Z

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.27-snapshot.v20250428150041
@clerk/astro	2.6.9-snapshot.v20250428150041
@clerk/backend	1.30.1-snapshot.v20250428150041
@clerk/chrome-extension	2.3.2-snapshot.v20250428150041
@clerk/clerk-js	5.63.0-snapshot.v20250428150041
@clerk/elements	0.23.19-snapshot.v20250428150041
@clerk/clerk-expo	2.10.2-snapshot.v20250428150041
@clerk/expo-passkeys	0.2.11-snapshot.v20250428150041
@clerk/express	1.4.10-snapshot.v20250428150041
@clerk/fastify	2.2.10-snapshot.v20250428150041
@clerk/localizations	3.14.1-snapshot.v20250428150041
@clerk/nextjs	6.18.1-snapshot.v20250428150041
@clerk/nuxt	1.5.10-snapshot.v20250428150041
@clerk/clerk-react	5.30.1-snapshot.v20250428150041
@clerk/react-router	1.3.1-snapshot.v20250428150041
@clerk/remix	4.6.1-snapshot.v20250428150041
@clerk/shared	3.7.5-snapshot.v20250428150041
@clerk/tanstack-react-start	0.14.1-snapshot.v20250428150041
@clerk/testing	1.6.0-snapshot.v20250428150041
@clerk/themes	2.2.37-snapshot.v20250428150041
@clerk/types	4.55.2-snapshot.v20250428150041
@clerk/vue	1.6.6-snapshot.v20250428150041

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

alexcarpenter · 2025-04-28T15:38:16Z

@diegohaz you should be able to test it out with this snapshot

npm i @clerk/[email protected] --save-exact

Then within your astro config:

import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import clerk from "@clerk/astro";

export default defineConfig({
  integrations: [
    clerk({
      experimental: {
        cssLayerName: "components",
      },
    }),
  ],
  adapter: node({ mode: "standalone" }),
  output: "server",
});

Then you can also specify within the head tag where the styles should be injected by placing this meta tag <meta name="emotion-insertion-point" />:

---
import {
  SignedIn,
  SignedOut,
  UserButton,
  SignInButton,
} from "@clerk/astro/components";

const { title } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <meta name="emotion-insertion-point" />
  </head>
  <body>
    <header>
      <h1>{title}</h1>
      <nav>
        <SignedOut>
          <SignInButton mode="modal" />
        </SignedOut>
        <SignedIn>
          <UserButton />
        </SignedIn>
      </nav>
    </header>
    <article>
      <slot />
    </article>
  </body>
</html>

Note this is still experimental, but any feedback would be greatly appreciated!

alexcarpenter · 2025-04-28T23:52:16Z

packages/clerk-js/src/ui/styledSystem/StyleCacheProvider.tsx

+ */
+export const getInsertionPoint = (): HTMLElement | undefined => {
+  try {
+    const metaTag = document.querySelector('meta[name="emotion-insertion-point"]');


TODO: Consider better meta tag name more specific to clerk styles.

feat(clerk-js,types): Add experimental css layer name option

90a57a8

Update app.ts

5cdfd53

clerk-cookie added types clerk-js labels Apr 7, 2025

vercel bot deployed to Preview April 7, 2025 20:45 View deployment

add changeset

52e311c

vercel bot deployed to Preview April 7, 2025 20:50 View deployment

getInsertionPoint

07a90cb

vercel bot deployed to Preview April 7, 2025 21:59 View deployment

alexcarpenter added 2 commits April 8, 2025 08:58

document

ffa35fe

document

1e594b7

vercel bot deployed to Preview April 8, 2025 13:00 View deployment

add tests

2c23dbf

vercel bot deployed to Preview April 8, 2025 13:35 View deployment

Merge branch 'main' into alexcarpenter/css-layer-name

b1b13d2

vercel bot deployed to Preview April 28, 2025 12:47 View deployment

use singleton pattern

1bd14cb

vercel bot deployed to Preview April 28, 2025 13:20 View deployment

wip

5548d43

vercel bot deployed to Preview April 28, 2025 13:32 View deployment

wip

89107ac

vercel bot deployed to Preview April 28, 2025 13:43 View deployment

wip

eda061f

vercel bot deployed to Preview April 28, 2025 14:55 View deployment

alexcarpenter commented Apr 28, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(clerk-js,types): Add experimental css layer name option #5552

feat(clerk-js,types): Add experimental css layer name option #5552

alexcarpenter commented Apr 7, 2025 •

edited

Loading

changeset-bot bot commented Apr 7, 2025 •

edited

Loading

vercel bot commented Apr 7, 2025 •

edited

Loading

alexcarpenter commented Apr 7, 2025

clerk-cookie commented Apr 7, 2025

alexcarpenter commented Apr 7, 2025

clerk-cookie commented Apr 7, 2025

diegohaz commented Apr 21, 2025

alexcarpenter commented Apr 28, 2025

clerk-cookie commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025

clerk-cookie commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025

clerk-cookie commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025

clerk-cookie commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025

clerk-cookie commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025 •

edited

Loading

alexcarpenter Apr 28, 2025

feat(clerk-js,types): Add experimental css layer name option #5552

Are you sure you want to change the base?

feat(clerk-js,types): Add experimental css layer name option #5552

Conversation

alexcarpenter commented Apr 7, 2025 • edited Loading

Description

Checklist

Type of change

changeset-bot bot commented Apr 7, 2025 • edited Loading

🦋 Changeset detected

vercel bot commented Apr 7, 2025 • edited Loading

alexcarpenter commented Apr 7, 2025

clerk-cookie commented Apr 7, 2025

alexcarpenter commented Apr 7, 2025

clerk-cookie commented Apr 7, 2025

diegohaz commented Apr 21, 2025

alexcarpenter commented Apr 28, 2025

clerk-cookie commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025

clerk-cookie commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025

clerk-cookie commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025

clerk-cookie commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025

clerk-cookie commented Apr 28, 2025

alexcarpenter commented Apr 28, 2025 • edited Loading

alexcarpenter Apr 28, 2025

Choose a reason for hiding this comment

alexcarpenter commented Apr 7, 2025 •

edited

Loading

changeset-bot bot commented Apr 7, 2025 •

edited

Loading

vercel bot commented Apr 7, 2025 •

edited

Loading

alexcarpenter commented Apr 28, 2025 •

edited

Loading