Add :host rule to @theme layer (#15975)

Resolves #15799
Resolves #14478
Part-of #15005

Adds a `:host` selector for the `@theme` layer. This is necessary for
the `@theme` layer to work correctly in shadow DOM.

Also updates the snapshots for the tests that were affected by this
change (in a separate commit).

## Test plan

Tested via the Vite playground:

<img width="1121" alt="Screenshot 2025-01-29 at 15 06 49"
src="https://github.com/user-attachments/assets/a7908135-5ff8-472f-a053-d2c6d5c81e1b"
/>

Additionally made sure that `@property` defaults also work across
Firefox, Chrome, and Safari (the `@property` definition from the root is
pulled in) and added a UI spec.

---------

Co-authored-by: Philipp Spiess <[email protected]>

Author: hugo-vrijswijk

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Find utilities when using the Angular class shorthand syntax ([#15974](https://github.com/tailwindlabs/tailwindcss/pull/15974))
 - Find utilities when using functions inside arrays ([#15974](https://github.com/tailwindlabs/tailwindcss/pull/15974))
 - Ensure that `@tailwindcss/browser` does not pollute the global namespace ([#15978](https://github.com/tailwindlabs/tailwindcss/pull/15978))
+- Ensure CSS theme variables are available within shadow roots ([#15975](https://github.com/tailwindlabs/tailwindcss/pull/15975))
 - Fix crash when project lives in the `/` directory ([#15988](https://github.com/tailwindlabs/tailwindcss/pull/15988))
 - Ensure `@custom-variant` has a non-empty selector list  ([#16009](https://github.com/tailwindlabs/tailwindcss/pull/16009))
 - _Upgrade_: Ensure JavaScript config files on different drives are correctly migrated ([#15927](https://github.com/tailwindlabs/tailwindcss/pull/15927))

integrations/cli/index.test.ts

@@ -370,7 +370,7 @@ describe.each([
 
       await fs.expectFileToContain('project-a/dist/out.css', [
         css`
-          :root {
+          :root, :host {
           }
         `,
       ])

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 "@layer theme {
-  :root {
+  :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

packages/@tailwindcss-postcss/src/index.test.ts

@@ -280,7 +280,7 @@ test('runs `Once` plugins in the right order', async () => {
   )
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --color-red-500: red;
     }
 
@@ -297,7 +297,7 @@ test('runs `Once` plugins in the right order', async () => {
     }"
   `)
   expect(after).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --color-red-500: red;
     }
 

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
-":root {
+":root, :host {
   --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`border-* 1`] = `
-":root {
+":root, :host {
   --radius-none: 0px;
   --radius-full: 9999px;
   --radius-sm: .125rem;
@@ -126,7 +126,7 @@ exports[`border-* 1`] = `
 `;
 
 exports[`border-b-* 1`] = `
-":root {
+":root, :host {
   --radius-none: 0px;
   --radius-full: 9999px;
   --radius-sm: .125rem;
@@ -251,7 +251,7 @@ exports[`border-b-* 1`] = `
 `;
 
 exports[`border-e-* 1`] = `
-":root {
+":root, :host {
   --radius-none: 0px;
   --radius-full: 9999px;
   --radius-sm: .125rem;
@@ -376,7 +376,7 @@ exports[`border-e-* 1`] = `
 `;
 
 exports[`border-l-* 1`] = `
-":root {
+":root, :host {
   --radius-none: 0px;
   --radius-full: 9999px;
   --radius-sm: .125rem;
@@ -501,7 +501,7 @@ exports[`border-l-* 1`] = `
 `;
 
 exports[`border-r-* 1`] = `
-":root {
+":root, :host {
   --radius-none: 0px;
   --radius-full: 9999px;
   --radius-sm: .125rem;
@@ -626,7 +626,7 @@ exports[`border-r-* 1`] = `
 `;
 
 exports[`border-s-* 1`] = `
-":root {
+":root, :host {
   --radius-none: 0px;
   --radius-full: 9999px;
   --radius-sm: .125rem;
@@ -751,7 +751,7 @@ exports[`border-s-* 1`] = `
 `;
 
 exports[`border-t-* 1`] = `
-":root {
+":root, :host {
   --radius-none: 0px;
   --radius-full: 9999px;
   --radius-sm: .125rem;
@@ -876,7 +876,7 @@ exports[`border-t-* 1`] = `
 `;
 
 exports[`border-x-* 1`] = `
-":root {
+":root, :host {
   --radius-none: 0px;
   --radius-full: 9999px;
   --radius-sm: .125rem;
@@ -1001,7 +1001,7 @@ exports[`border-x-* 1`] = `
 `;
 
 exports[`border-y-* 1`] = `
-":root {
+":root, :host {
   --radius-none: 0px;
   --radius-full: 9999px;
   --radius-sm: .125rem;

packages/tailwindcss/src/compat/config.test.ts

@@ -322,7 +322,7 @@ describe('theme callbacks', () => {
 
     expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
       .toMatchInlineSnapshot(`
-        ":root {
+        ":root, :host {
           --text-base: 100rem;
           --text-md--line-height: 101rem;
         }
@@ -391,7 +391,7 @@ describe('theme overrides order', () => {
     })
 
     expect(compiler.build(['bg-red', 'bg-blue'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --color-blue: blue;
       }
       .bg-blue {
@@ -477,7 +477,7 @@ describe('theme overrides order', () => {
         'hover-bg-slate-600',
       ]),
     ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --color-slate-100: #000100;
         --color-slate-300: #000300;
         --color-slate-400: #100400;
@@ -562,7 +562,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-font-family: Potato Sans;
         --default-font-feature-settings: normal;
         --default-font-variation-settings: normal;
@@ -601,7 +601,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-font-family: Potato Sans;
         --default-font-feature-settings: "cv06";
         --default-font-variation-settings: normal;
@@ -641,7 +641,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-font-family: Potato Sans;
         --default-font-feature-settings: normal;
         --default-font-variation-settings: "XHGT" 0.7;
@@ -684,7 +684,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-font-family: Potato Sans;
         --default-font-feature-settings: "cv06";
         --default-font-variation-settings: "XHGT" 0.7;
@@ -728,7 +728,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-font-family: var(--font-family-sans);
         --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
         --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
@@ -768,7 +768,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-font-family: Inter, system-ui, sans-serif;
         --default-font-feature-settings: normal;
         --default-font-variation-settings: normal;
@@ -807,7 +807,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-font-family: var(--font-family-sans);
         --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
         --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
@@ -841,7 +841,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-mono-font-family: Potato Mono;
         --default-mono-font-feature-settings: normal;
         --default-mono-font-variation-settings: normal;
@@ -880,7 +880,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-mono-font-family: Potato Mono;
         --default-mono-font-feature-settings: "cv06";
         --default-mono-font-variation-settings: normal;
@@ -920,7 +920,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-mono-font-family: Potato Mono;
         --default-mono-font-feature-settings: normal;
         --default-mono-font-variation-settings: "XHGT" 0.7;
@@ -963,7 +963,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-mono-font-family: Potato Mono;
         --default-mono-font-feature-settings: "cv06";
         --default-mono-font-variation-settings: "XHGT" 0.7;
@@ -1007,7 +1007,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-mono-font-family: var(--font-mono);
         --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
         --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
@@ -1047,7 +1047,7 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --default-mono-font-family: var(--font-family-mono);
         --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
         --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
@@ -1179,7 +1179,7 @@ test('merges css breakpoints with js config screens', async () => {
 
   expect(compiler.build(['sm:flex', 'md:flex', 'lg:flex', 'min-sm:max-md:underline']))
     .toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
         --breakpoint-md: 50rem;
         --breakpoint-lg: 64rem;
         --breakpoint-xl: 80rem;
@@ -1333,7 +1333,7 @@ test('Prefixes configured in CSS take precedence over those defined in JS config
   )
 
   expect(compiler.build(['wat:custom'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --wat-color-red: #f00;
       --wat-color-green: #0f0;
       --wat-breakpoint-sm: 640px;

packages/tailwindcss/src/compat/container-config.test.ts

@@ -31,7 +31,7 @@ test('creates a custom utility to extend the built-in container', async () => {
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --breakpoint-sm: 40rem;
       --breakpoint-md: 48rem;
       --breakpoint-lg: 64rem;
@@ -96,7 +96,7 @@ test('allows padding to be defined at custom breakpoints', async () => {
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --breakpoint-sm: 40rem;
       --breakpoint-md: 48rem;
       --breakpoint-lg: 64rem;
@@ -164,7 +164,7 @@ test('allows breakpoints to be overwritten', async () => {
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --breakpoint-sm: 40rem;
       --breakpoint-md: 48rem;
       --breakpoint-lg: 64rem;
@@ -237,7 +237,7 @@ test('padding applies to custom `container` screens', async () => {
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --breakpoint-sm: 40rem;
       --breakpoint-md: 48rem;
       --breakpoint-lg: 64rem;
@@ -307,7 +307,7 @@ test("an empty `screen` config will undo all custom media screens and won't appl
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --breakpoint-sm: 40rem;
       --breakpoint-md: 48rem;
       --breakpoint-lg: 64rem;
@@ -379,7 +379,7 @@ test('legacy container component does not interfere with new --container variabl
   })
 
   expect(compiler.build(['max-w-sm'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --container-3xs: 16rem;
       --container-2xs: 18rem;
       --container-xs: 20rem;
@@ -438,7 +438,7 @@ test('combines custom padding and screen overwrites', async () => {
   })
 
   expect(compiler.build(['container', '!container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --breakpoint-sm: 40rem;
       --breakpoint-md: 48rem;
       --breakpoint-lg: 64rem;
@@ -557,7 +557,7 @@ test('filters out complex breakpoints', async () => {
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --breakpoint-sm: 40rem;
       --breakpoint-md: 48rem;
       --breakpoint-lg: 64rem;

packages/tailwindcss/src/compat/legacy-utilities.test.ts

@@ -85,7 +85,7 @@ test('max-w-screen', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --breakpoint-sm: 40rem;
       --breakpoint-md: 48rem;
       --breakpoint-lg: 64rem;