From 133f078fba00b8c565df7677d0a19cdb154d204e Mon Sep 17 00:00:00 2001 From: Hugo van Rijswijk Date: Tue, 28 Jan 2025 16:15:38 +0100 Subject: [PATCH 1/5] Add `:host` rule to `@theme` layer Fixes #15799 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. --- packages/tailwindcss/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 3e4bc5a3cce0..ae4d928315ee 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -473,7 +473,7 @@ async function parseCss( // Keep a reference to the first `@theme` rule to update with the full // theme later, and delete any other `@theme` rules. if (!firstThemeRule && !(themeOptions & ThemeOptions.REFERENCE)) { - firstThemeRule = styleRule(':root', node.nodes) + firstThemeRule = styleRule(':root, :host', node.nodes) replaceWith([firstThemeRule]) } else { replaceWith([]) From 21f70c3d4fea6db8bf638edb35748b62b0fb6247 Mon Sep 17 00:00:00 2001 From: Hugo van Rijswijk Date: Tue, 28 Jan 2025 16:16:54 +0100 Subject: [PATCH 2/5] Update snapshots --- integrations/cli/index.test.ts | 2 +- .../src/__snapshots__/index.test.ts.snap | 2 +- .../@tailwindcss-postcss/src/index.test.ts | 4 +- .../src/__snapshots__/index.test.ts.snap | 2 +- .../src/__snapshots__/utilities.test.ts.snap | 18 +- .../tailwindcss/src/compat/config.test.ts | 36 +-- .../src/compat/container-config.test.ts | 16 +- .../src/compat/legacy-utilities.test.ts | 2 +- .../tailwindcss/src/compat/plugin-api.test.ts | 10 +- .../src/compat/screens-config.test.ts | 10 +- .../tailwindcss/src/css-functions.test.ts | 82 +++--- packages/tailwindcss/src/index.test.ts | 58 ++--- packages/tailwindcss/src/prefix.test.ts | 34 +-- packages/tailwindcss/src/utilities.test.ts | 244 +++++++++--------- packages/tailwindcss/src/variants.test.ts | 20 +- 15 files changed, 270 insertions(+), 270 deletions(-) diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts index b47659a1320e..60fc03e421f6 100644 --- a/integrations/cli/index.test.ts +++ b/integrations/cli/index.test.ts @@ -370,7 +370,7 @@ describe.each([ await fs.expectFileToContain('project-a/dist/out.css', [ css` - :root { + :root, :host { } `, ]) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 2dcb76ba54d5..d401ace41bed 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/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; diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 50f72a13d992..97eedb95d183 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/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; } diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 5c7fedca01f8..9ed291c3908a 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/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; diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 588311cf9079..0fe26f6582b5 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/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; diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index 7523b2f3410c..4b095c1724f6 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/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; diff --git a/packages/tailwindcss/src/compat/container-config.test.ts b/packages/tailwindcss/src/compat/container-config.test.ts index 965e79a21865..e2b9a0ca591f 100644 --- a/packages/tailwindcss/src/compat/container-config.test.ts +++ b/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; diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts index 6db8b6df48cf..4c5dd99d0816 100644 --- a/packages/tailwindcss/src/compat/legacy-utilities.test.ts +++ b/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; diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index b1c04e655ce6..539c04a3c66c 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -293,7 +293,7 @@ describe('theme', async () => { .variable { color: color-mix(in oklab, #ef4444 var(--opacity), transparent); } - :root { + :root, :host { --color-red-500: #ef4444; } " @@ -379,7 +379,7 @@ describe('theme', async () => { .js-variable { color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent); } - :root { + :root, :host { --color-custom-css: rgba(255 0 0 / ); } " @@ -1422,7 +1422,7 @@ describe('theme', async () => { .my-width-2\\.5 { width: 0.625rem; } - :root { + :root, :host { --width-1: 0.25rem; --width-1\\/2: 60%; --width-1\\.5: 0.375rem; @@ -1479,7 +1479,7 @@ describe('theme', async () => { .my-width-2\\.5 { width: 0.625rem; } - :root { + :root, :host { --width-1: 0.25rem; --width-1\\/2: 60%; --width-1\\.5: 0.375rem; @@ -3136,7 +3136,7 @@ describe('addUtilities()', () => { } } } - :root { + :root, :host { }" `, ) diff --git a/packages/tailwindcss/src/compat/screens-config.test.ts b/packages/tailwindcss/src/compat/screens-config.test.ts index 983b22ea0f3a..09ab97fc9f8a 100644 --- a/packages/tailwindcss/src/compat/screens-config.test.ts +++ b/packages/tailwindcss/src/compat/screens-config.test.ts @@ -46,7 +46,7 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => { 'print:items-end', ]), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-md: 50rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; @@ -140,7 +140,7 @@ test('JS config `screens` extend CSS `--breakpoint-*`', async () => { 'print:items-end', ]), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-md: 50rem; } .min-xs\\:flex { @@ -316,7 +316,7 @@ test('JS config `screens` overwrite CSS `--breakpoint-*`', async () => { 'print:items-end', ]), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; @@ -584,7 +584,7 @@ describe('complex screen configs', () => { 'print:items-end', ]), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-md: 48rem; } .min-sm\\:flex { @@ -656,7 +656,7 @@ test('JS config `screens` can overwrite default CSS `--breakpoint-*`', async () expect( compiler.build(['min-sm:flex', 'min-md:flex', 'min-lg:flex', 'min-xl:flex', 'min-2xl:flex']), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { } " `) diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index e3747c7ba601..9d81b857ef77 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -72,7 +72,7 @@ describe('--spacing(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; } @@ -94,7 +94,7 @@ describe('--spacing(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; } @@ -157,7 +157,7 @@ describe('--theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -197,7 +197,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -218,7 +218,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -239,7 +239,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -260,7 +260,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -281,7 +281,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -302,7 +302,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -323,7 +323,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -344,7 +344,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -365,7 +365,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -386,7 +386,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -408,7 +408,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -429,7 +429,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-12: 3rem; } @@ -450,7 +450,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-2_5: .625rem; } @@ -471,7 +471,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-2_5: .625rem; } @@ -492,7 +492,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-lg: .5rem; } @@ -514,14 +514,14 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { - --blur: 8px; - } + ":root, :host { + --blur: 8px; + } - .default-blur { - filter: blur(8px); - }" - `) + .default-blur { + filter: blur(8px); + }" + `) }) test('theme(fontSize.xs[1].lineHeight)', async () => { @@ -537,7 +537,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --text-xs: 1337.75rem; --text-xs--line-height: 1337rem; } @@ -626,7 +626,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -684,7 +684,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; --color-foo: red; } @@ -707,7 +707,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; --color-foo: oklab(62.7955% .22486 .12584 / .5); } @@ -731,7 +731,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -752,7 +752,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -773,7 +773,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -796,7 +796,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --blur: 8px; } @@ -861,7 +861,7 @@ describe('theme(…)', () => { } } - :root { + :root, :host { --breakpoint-sm: 40rem; --color-red-500: red; }" @@ -921,7 +921,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-md: 48rem; --breakpoint-lg: 64rem; } @@ -948,7 +948,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-md: 48rem; --breakpoint-lg: 64rem; } @@ -976,7 +976,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-md: 48rem; } @@ -1001,7 +1001,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-md: 48rem; } @@ -1026,7 +1026,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --font-size-xs: .75rem; } @@ -1187,7 +1187,7 @@ test('replaces CSS theme() function with values inside imported stylesheets', as }, ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -1212,7 +1212,7 @@ test('resolves paths ending with a 1', async () => { [], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-1: .25rem; } diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 0b5851b70c8b..23dfc00b5ad3 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -25,7 +25,7 @@ describe('compiling CSS', () => { ['flex', 'md:grid', 'hover:underline', 'dark:bg-black'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-black: #000; --breakpoint-md: 768px; } @@ -133,7 +133,7 @@ describe('compiling CSS', () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-1_5: 1.5rem; --spacing-2_5: 2.5rem; } @@ -245,7 +245,7 @@ describe('@apply', () => { } `), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-200: #fecaca; --color-red-500: #ef4444; --color-blue-500: #3b82f6; @@ -608,7 +608,7 @@ describe('important', () => { ['animate-spin!'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --animate-spin: spin 1s linear infinite; } @@ -646,7 +646,7 @@ describe('sorting', () => { ['pointer-events-none', 'flex', 'p-1', 'px-1', 'pl-1'].sort(() => Math.random() - 0.5), ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-1: .25rem; } @@ -709,7 +709,7 @@ describe('sorting', () => { ['mx-0', 'gap-4', 'space-x-2'].sort(() => Math.random() - 0.5), ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-0: 0px; --spacing-2: .5rem; --spacing-4: 1rem; @@ -771,7 +771,7 @@ describe('sorting', () => { ].sort(() => Math.random() - 0.5), ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-1: 1px; --spacing-2: 2px; --spacing-3: 3px; @@ -992,7 +992,7 @@ describe('Parsing themes values from CSS', () => { ['accent-red-500'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; } @@ -1015,7 +1015,7 @@ describe('Parsing themes values from CSS', () => { ['accent-red-500'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #f10; } @@ -1040,7 +1040,7 @@ describe('Parsing themes values from CSS', () => { ['accent-red-500', 'accent-blue-500'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: red; --color-blue-500: #00f; } @@ -1069,7 +1069,7 @@ describe('Parsing themes values from CSS', () => { ['w-1/2', 'w-75%'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --width-1\\/2: 75%; --width-75\\%: 50%; } @@ -1105,7 +1105,7 @@ describe('Parsing themes values from CSS', () => { ['accent-red', 'text-lg'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red: red; --animate-foo: foo 1s infinite; --text-lg: 20px; @@ -1159,7 +1159,7 @@ describe('Parsing themes values from CSS', () => { ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --text-sm: 13px; --color-green: #0f0; } @@ -1206,7 +1206,7 @@ describe('Parsing themes values from CSS', () => { ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --text-sm: 13px; --color-green: #0f0; } @@ -1242,7 +1242,7 @@ describe('Parsing themes values from CSS', () => { ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-green: #0f0; } @@ -1270,7 +1270,7 @@ describe('Parsing themes values from CSS', () => { ['font-bold', 'font-sans', 'font-serif', 'font-body'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --font-weight-bold: bold; --font-body: Inter; } @@ -1309,7 +1309,7 @@ describe('Parsing themes values from CSS', () => { ['inset-shadow-sm', 'inset-ring-thick', 'inset-lg', 'inset-sm', 'inset-md'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --inset-shadow-sm: inset 0 2px 4px #0000000d; --inset-md: 50px; } @@ -1420,7 +1420,7 @@ describe('Parsing themes values from CSS', () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --text-color-potato: brown; --text-underline-offset-potato: 4px; --text-indent-potato: 6px; @@ -1485,7 +1485,7 @@ describe('Parsing themes values from CSS', () => { ['animate-foo', 'animate-foobar'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --animate-foobar: foobar 1s infinite; } @@ -1516,7 +1516,7 @@ describe('Parsing themes values from CSS', () => { ['bg-tomato', 'bg-potato'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-tomato: #e10c04; } @@ -1566,7 +1566,7 @@ describe('Parsing themes values from CSS', () => { ['bg-potato'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-potato: #c794aa; } @@ -1596,7 +1596,7 @@ describe('Parsing themes values from CSS', () => { ['bg-tomato', 'bg-potato', 'bg-avocado'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-tomato: #e10c04; } @@ -1647,7 +1647,7 @@ describe('Parsing themes values from CSS', () => { ['bg-tomato', 'bg-potato', 'bg-primary'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-tomato: #e10c04; --color-potato: #ac855b; --color-primary: var(--primary); @@ -1684,7 +1684,7 @@ describe('Parsing themes values from CSS', () => { ['bg-tomato', 'bg-potato', 'bg-primary'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-tomato: #e10c04; --color-potato: #ac855b; --color-primary: var(--primary); @@ -1780,7 +1780,7 @@ describe('Parsing themes values from CSS', () => { ['bg-potato'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-potato: #ac855b; } @@ -1803,7 +1803,7 @@ describe('Parsing themes values from CSS', () => { ['bg-potato'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-potato: #efb46b; } @@ -1872,7 +1872,7 @@ describe('Parsing themes values from CSS', () => { ['bg-potato', 'bg-tomato'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-potato: #ac855b; --color-tomato: tomato; } @@ -1919,7 +1919,7 @@ describe('Parsing themes values from CSS', () => { ) expect(optimizeCss(build(['text-red', 'text-orange'])).trim()).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-orange: orange; } @@ -1965,7 +1965,7 @@ describe('Parsing themes values from CSS', () => { ) expect(optimizeCss(build(['text-red', 'text-orange'])).trim()).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-orange: orange; } diff --git a/packages/tailwindcss/src/prefix.test.ts b/packages/tailwindcss/src/prefix.test.ts index 27a71b6179f1..8fb0eec6a48f 100644 --- a/packages/tailwindcss/src/prefix.test.ts +++ b/packages/tailwindcss/src/prefix.test.ts @@ -106,7 +106,7 @@ test('CSS variables output by the theme are prefixed', async () => { // Prefixed utilities are generated expect(compiler.build(['tw:text-red'])).toMatchInlineSnapshot(` - ":root { + ":root, :host { --tw-color-red: #f00; --tw-color-green: #0f0; --tw-breakpoint-sm: 640px; @@ -131,19 +131,19 @@ test('CSS theme functions do not use the prefix', async () => { expect(compiler.build(['tw:[color:theme(--color-red)]', 'tw:text-[theme(--color-red)]'])) .toMatchInlineSnapshot(` - ":root { - --tw-color-red: #f00; - --tw-color-green: #0f0; - --tw-breakpoint-sm: 640px; - } - .tw\\:\\[color\\:theme\\(--color-red\\)\\] { - color: #f00; - } - .tw\\:text-\\[theme\\(--color-red\\)\\] { - color: #f00; - } - " - `) + ":root, :host { + --tw-color-red: #f00; + --tw-color-green: #0f0; + --tw-breakpoint-sm: 640px; + } + .tw\\:\\[color\\:theme\\(--color-red\\)\\] { + color: #f00; + } + .tw\\:text-\\[theme\\(--color-red\\)\\] { + color: #f00; + } + " + `) compiler = await compile(css` @theme reference prefix(tw) { @@ -193,7 +193,7 @@ test('JS theme functions do not use the prefix', async () => { ) expect(compiler.build(['tw:my-custom'])).toMatchInlineSnapshot(` - ":root { + ":root, :host { --tw-color-red: #f00; --tw-color-green: #0f0; --tw-breakpoint-sm: 640px; @@ -300,7 +300,7 @@ test('a prefix can be configured via @import prefix(…)', async () => { expect(compiler.build(['tw:underline', 'tw:bg-potato', 'tw:hover:line-through', 'tw:custom'])) .toMatchInlineSnapshot(` - ":root { + ":root, :host { --tw-color-potato: #7a4724; } .tw\\:bg-potato { @@ -338,7 +338,7 @@ test('a prefix can be configured via @import prefix(…)', async () => { }) expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(` - ":root { + ":root, :host { --tw-color-potato: #7a4724; } " diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index e235777b2c98..8e40d3816317 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -145,7 +145,7 @@ test('inset', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --inset-shadow-sm: inset 0 1px 1px #0000000d; --inset-shadowned: 1940px; @@ -295,7 +295,7 @@ test('inset-x', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --inset-shadowned: 1940px; } @@ -382,7 +382,7 @@ test('inset-y', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --inset-shadowned: 1940px; } @@ -469,7 +469,7 @@ test('start', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --inset-shadowned: 1940px; } @@ -556,7 +556,7 @@ test('end', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --inset-shadowned: 1940px; } @@ -644,7 +644,7 @@ test('top', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --inset-shadowned: 1940px; } @@ -731,7 +731,7 @@ test('right', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --inset-shadowned: 1940px; } @@ -818,7 +818,7 @@ test('bottom', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --inset-shadowned: 1940px; } @@ -905,7 +905,7 @@ test('left', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --inset-shadowned: 1940px; } @@ -1444,7 +1444,7 @@ test('margin', async () => { ['m-auto', 'm-4', 'm-[4px]', '-m-4', '-m-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -1498,7 +1498,7 @@ test('mx', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -1584,7 +1584,7 @@ test('my', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -1670,7 +1670,7 @@ test('mt', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -1756,7 +1756,7 @@ test('ms', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -1842,7 +1842,7 @@ test('me', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -1928,7 +1928,7 @@ test('mr', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -2014,7 +2014,7 @@ test('mb', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -2100,7 +2100,7 @@ test('ml', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -2173,7 +2173,7 @@ test('margin sort order', async () => { ['mb-4', 'me-4', 'mx-4', 'ml-4', 'ms-4', 'm-4', 'mr-4', 'mt-4', 'my-4'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -2477,7 +2477,7 @@ test('aspect-ratio', async () => { ['aspect-video', 'aspect-[10/9]', 'aspect-4/3'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --aspect-video: 16 / 9; } @@ -2531,7 +2531,7 @@ test('size', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -2624,7 +2624,7 @@ test('width', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --width-xl: 36rem; } @@ -2730,7 +2730,7 @@ test('min-width', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --container-xl: 36rem; } @@ -2806,7 +2806,7 @@ test('max-width', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; --container-xl: 36rem; } @@ -2881,7 +2881,7 @@ test('height', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -2983,7 +2983,7 @@ test('min-height', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -3075,7 +3075,7 @@ test('max-height', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -3160,7 +3160,7 @@ describe('container', () => { ['w-1/2', 'container', 'max-w-[var(--breakpoint-sm)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; @@ -3303,7 +3303,7 @@ describe('container', () => { ['w-1/2', 'container', 'max-w-[var(--breakpoint-sm)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; @@ -3500,7 +3500,7 @@ test('flex-basis', async () => { ['basis-auto', 'basis-full', 'basis-xl', 'basis-11/12', 'basis-[123px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --container-xl: 36rem; } @@ -3604,7 +3604,7 @@ test('border-spacing', async () => { ['border-spacing-1', 'border-spacing-[123px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-1: .25rem; } @@ -3655,7 +3655,7 @@ test('border-spacing-x', async () => { ['border-spacing-x-1', 'border-spacing-x-[123px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-1: .25rem; } @@ -3704,7 +3704,7 @@ test('border-spacing-y', async () => { ['border-spacing-y-1', 'border-spacing-y-[123px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-1: .25rem; } @@ -4045,7 +4045,7 @@ test('translate-x', async () => { ['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; } @@ -4173,7 +4173,7 @@ test('translate-y', async () => { ['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; } @@ -5113,7 +5113,7 @@ test('perspective', async () => { ['perspective-normal', 'perspective-dramatic', 'perspective-none', 'perspective-[456px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --perspective-dramatic: 100px; --perspective-normal: 500px; } @@ -5199,7 +5199,7 @@ test('cursor', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --cursor-custom: url("/my-cursor.png"); } @@ -5751,7 +5751,7 @@ test('scroll-m', async () => { ['scroll-m-4', 'scroll-m-[4px]', '-scroll-m-4', '-scroll-m-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -5794,7 +5794,7 @@ test('scroll-mx', async () => { ['scroll-mx-4', 'scroll-mx-[4px]', '-scroll-mx-4', '-scroll-mx-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -5837,7 +5837,7 @@ test('scroll-my', async () => { ['scroll-my-4', 'scroll-my-[4px]', '-scroll-my-4', '-scroll-my-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -5880,7 +5880,7 @@ test('scroll-ms', async () => { ['scroll-ms-4', 'scroll-ms-[4px]', '-scroll-ms-4', '-scroll-ms-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -5923,7 +5923,7 @@ test('scroll-me', async () => { ['scroll-me-4', 'scroll-me-[4px]', '-scroll-me-4', '-scroll-me-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -5966,7 +5966,7 @@ test('scroll-mt', async () => { ['scroll-mt-4', 'scroll-mt-[4px]', '-scroll-mt-4', '-scroll-mt-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6009,7 +6009,7 @@ test('scroll-mr', async () => { ['scroll-mr-4', 'scroll-mr-[4px]', '-scroll-mr-4', '-scroll-mr-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6052,7 +6052,7 @@ test('scroll-mb', async () => { ['scroll-mb-4', 'scroll-mb-[4px]', '-scroll-mb-4', '-scroll-mb-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6095,7 +6095,7 @@ test('scroll-ml', async () => { ['scroll-ml-4', 'scroll-ml-[4px]', '-scroll-ml-4', '-scroll-ml-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6138,7 +6138,7 @@ test('scroll-p', async () => { ['scroll-p-4', 'scroll-p-[4px]', '-scroll-p-4', '-scroll-p-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6173,7 +6173,7 @@ test('scroll-px', async () => { ['scroll-px-4', 'scroll-px-[4px]', '-scroll-px-4', '-scroll-px-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6208,7 +6208,7 @@ test('scroll-py', async () => { ['scroll-py-4', 'scroll-py-[4px]', '-scroll-py-4', '-scroll-py-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6243,7 +6243,7 @@ test('scroll-ps', async () => { ['scroll-ps-4', 'scroll-ps-[4px]', '-scroll-ps-4', '-scroll-ps-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6278,7 +6278,7 @@ test('scroll-pe', async () => { ['scroll-pe-4', 'scroll-pe-[4px]', '-scroll-pe-4', '-scroll-pe-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6313,7 +6313,7 @@ test('scroll-pt', async () => { ['scroll-pt-4', 'scroll-pt-[4px]', '-scroll-pt-4', '-scroll-pt-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6348,7 +6348,7 @@ test('scroll-pr', async () => { ['scroll-pr-4', 'scroll-pr-[4px]', '-scroll-pr-4', '-scroll-pr-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6383,7 +6383,7 @@ test('scroll-pb', async () => { ['scroll-pb-4', 'scroll-pb-[4px]', '-scroll-pb-4', '-scroll-pb-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6418,7 +6418,7 @@ test('scroll-pl', async () => { ['scroll-pl-4', 'scroll-pl-[4px]', '-scroll-pl-4', '-scroll-pl-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -6599,7 +6599,7 @@ test('columns', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --container-3xs: 16rem; --container-7xl: 80rem; } @@ -7467,7 +7467,7 @@ test('gap', async () => { ['gap-4', 'gap-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -7494,7 +7494,7 @@ test('gap-x', async () => { ['gap-x-4', 'gap-x-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -7523,7 +7523,7 @@ test('gap-y', async () => { ['gap-y-4', 'gap-y-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -7552,7 +7552,7 @@ test('space-x', async () => { ['space-x-4', 'space-x-[4px]', '-space-x-4'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -7595,7 +7595,7 @@ test('space-y', async () => { ['space-y-4', 'space-y-[4px]', '-space-y-4'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -7732,7 +7732,7 @@ test('divide-x with custom default border width', async () => { ['divide-x'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --default-border-width: 2px; } @@ -7838,7 +7838,7 @@ test('divide-y with custom default border width', async () => { ['divide-y'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --default-border-width: 2px; } @@ -7971,7 +7971,7 @@ test('accent', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -8086,7 +8086,7 @@ test('caret', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -8199,7 +8199,7 @@ test('divide-color', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -8863,7 +8863,7 @@ test('rounded', async () => { ['rounded', 'rounded-full', 'rounded-none', 'rounded-sm', 'rounded-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-sm: .125rem; --radius: .25rem; } @@ -8919,7 +8919,7 @@ test('rounded-s', async () => { ['rounded-s', 'rounded-s-full', 'rounded-s-none', 'rounded-s-sm', 'rounded-s-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -8982,7 +8982,7 @@ test('rounded-e', async () => { ['rounded-e', 'rounded-e-full', 'rounded-e-none', 'rounded-e-sm', 'rounded-e-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9045,7 +9045,7 @@ test('rounded-t', async () => { ['rounded-t', 'rounded-t-full', 'rounded-t-none', 'rounded-t-sm', 'rounded-t-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9112,7 +9112,7 @@ test('rounded-r', async () => { ['rounded-r', 'rounded-r-full', 'rounded-r-none', 'rounded-r-sm', 'rounded-r-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9179,7 +9179,7 @@ test('rounded-b', async () => { ['rounded-b', 'rounded-b-full', 'rounded-b-none', 'rounded-b-sm', 'rounded-b-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9246,7 +9246,7 @@ test('rounded-l', async () => { ['rounded-l', 'rounded-l-full', 'rounded-l-none', 'rounded-l-sm', 'rounded-l-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9313,7 +9313,7 @@ test('rounded-ss', async () => { ['rounded-ss', 'rounded-ss-full', 'rounded-ss-none', 'rounded-ss-sm', 'rounded-ss-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9371,7 +9371,7 @@ test('rounded-se', async () => { ['rounded-se', 'rounded-se-full', 'rounded-se-none', 'rounded-se-sm', 'rounded-se-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9429,7 +9429,7 @@ test('rounded-ee', async () => { ['rounded-ee', 'rounded-ee-full', 'rounded-ee-none', 'rounded-ee-sm', 'rounded-ee-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9487,7 +9487,7 @@ test('rounded-es', async () => { ['rounded-es', 'rounded-es-full', 'rounded-es-none', 'rounded-es-sm', 'rounded-es-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9545,7 +9545,7 @@ test('rounded-tl', async () => { ['rounded-tl', 'rounded-tl-full', 'rounded-tl-none', 'rounded-tl-sm', 'rounded-tl-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9605,7 +9605,7 @@ test('rounded-tr', async () => { ['rounded-tr', 'rounded-tr-full', 'rounded-tr-none', 'rounded-tr-sm', 'rounded-tr-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9665,7 +9665,7 @@ test('rounded-br', async () => { ['rounded-br', 'rounded-br-full', 'rounded-br-none', 'rounded-br-sm', 'rounded-br-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9725,7 +9725,7 @@ test('rounded-bl', async () => { ['rounded-bl', 'rounded-bl-full', 'rounded-bl-none', 'rounded-bl-sm', 'rounded-bl-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --radius-none: 0px; --radius-full: 9999px; --radius-sm: .125rem; @@ -9928,7 +9928,7 @@ test('border with custom default border width', async () => { ['border'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --default-border-width: 2px; } @@ -10089,7 +10089,7 @@ test('bg', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -10702,7 +10702,7 @@ test('from', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -10921,7 +10921,7 @@ test('via', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -11150,7 +11150,7 @@ test('to', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -11700,7 +11700,7 @@ test('fill', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -11821,7 +11821,7 @@ test('stroke', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -12074,7 +12074,7 @@ test('p', async () => { ['p-1', 'p-4', 'p-99', 'p-big', 'p-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -12115,7 +12115,7 @@ test('px', async () => { ['px-1', 'px-99', 'px-2.5', 'px-big', 'px-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -12156,7 +12156,7 @@ test('py', async () => { ['py-1', 'py-4', 'py-99', 'py-big', 'py-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -12197,7 +12197,7 @@ test('pt', async () => { ['pt-1', 'pt-4', 'pt-99', 'pt-big', 'pt-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -12238,7 +12238,7 @@ test('ps', async () => { ['ps-1', 'ps-4', 'ps-99', 'ps-big', 'ps-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -12279,7 +12279,7 @@ test('pe', async () => { ['pe-1', 'pe-4', 'pe-99', 'pe-big', 'pe-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -12320,7 +12320,7 @@ test('pr', async () => { ['pr-1', 'pr-4', 'pr-99', 'pr-big', 'pr-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -12361,7 +12361,7 @@ test('pb', async () => { ['pb-1', 'pb-4', 'pb-99', 'pb-big', 'pb-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -12402,7 +12402,7 @@ test('pl', async () => { ['pl-1', 'pl-4', 'pl-99', 'pl-big', 'pl-[4px]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --spacing-big: 100rem; } @@ -12594,7 +12594,7 @@ test('font', async () => { ], ), ).toMatchInlineSnapshot(` - ":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-weight-bold: 650; } @@ -12811,7 +12811,7 @@ test('placeholder', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -12936,7 +12936,7 @@ test('decoration', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -13131,7 +13131,7 @@ test('animate', async () => { ['animate-spin', 'animate-none', 'animate-[bounce_1s_infinite]', 'animate-not-found'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --animate-spin: spin 1s linear infinite; } @@ -13207,7 +13207,7 @@ test('filter', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --blur-xl: 24px; --drop-shadow: 0 1px 1px #0000000d; --drop-shadow-xl: 0 9px 7px #0000001a; @@ -13522,7 +13522,7 @@ test('backdrop-filter', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --blur-xl: 24px; } @@ -13865,7 +13865,7 @@ test('transition', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --default-transition-timing-function: ease; --default-transition-duration: .1s; --transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -13934,7 +13934,7 @@ test('transition', async () => { ['transition', 'transition-all', 'transition-colors'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --default-transition-timing-function: ease; --default-transition-duration: .1s; } @@ -14082,7 +14082,7 @@ test('ease', async () => { ['ease-in', 'ease-out', 'ease-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); } @@ -14311,7 +14311,7 @@ test('leading', async () => { ['leading-tight', 'leading-6', 'leading-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --leading-tight: 1.25; --leading-6: 1.5rem; } @@ -14362,7 +14362,7 @@ test('tracking', async () => { ['tracking-normal', 'tracking-wide', 'tracking-[var(--value)]', '-tracking-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --tracking-normal: 0em; --tracking-wide: .025em; } @@ -14591,7 +14591,7 @@ test('outline', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -14985,7 +14985,7 @@ test('text', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: .25rem; --color-red-500: #ef4444; --text-sm: .875rem; @@ -15223,7 +15223,7 @@ test('shadow', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; @@ -15447,7 +15447,7 @@ test('inset-shadow', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; --inset-shadow: inset 0 2px 4px #0000000d; --inset-shadow-sm: inset 0 1px 1px #0000000d; @@ -15674,7 +15674,7 @@ test('ring', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -15930,7 +15930,7 @@ test('inset-ring', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -16179,7 +16179,7 @@ test('ring-offset', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --color-red-500: #ef4444; } @@ -16357,7 +16357,7 @@ describe('spacing utilities', () => { let compiled = build(['px-1', 'px-4']) expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -16378,7 +16378,7 @@ describe('spacing utilities', () => { let compiled = build(['px-1', 'px-4']) expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-4: 1rem; } @@ -16398,7 +16398,7 @@ describe('spacing utilities', () => { let compiled = build(['px-0.25', 'px-1.5', 'px-2.75', 'px-0.375', 'px-2.50', 'px-.75']) expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: 4px; } @@ -16439,7 +16439,7 @@ describe('spacing utilities', () => { let compiled = build(['w-sm', 'max-w-sm', 'min-w-sm', 'basis-sm']) expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing-sm: 8px; --container-sm: 256px; } @@ -17416,7 +17416,7 @@ describe('custom utilities', () => { ` expect(await compileCss(input, ['example-12'])).toMatchInlineSnapshot(` - ":root { + ":root, :host { --spacing: 4px; } @@ -17664,7 +17664,7 @@ describe('custom utilities', () => { ` expect(await compileCss(input, ['tab-github'])).toMatchInlineSnapshot(` - ":root { + ":root, :host { --tab-size-github: 8; } @@ -17708,7 +17708,7 @@ describe('custom utilities', () => { ` expect(await compileCss(input, ['tab-github'])).toMatchInlineSnapshot(` - ":root { + ":root, :host { --tab-size-github: 8; } diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index cc600b9cedaf..1c7da924b45d 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -756,7 +756,7 @@ test('default breakpoints', async () => { ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; @@ -824,7 +824,7 @@ test('custom breakpoint', async () => { ['10xl:flex'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-10xl: 5000px; } @@ -851,7 +851,7 @@ test('max-*', async () => { ['max-lg:flex', 'max-sm:flex', 'max-md:flex'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-sm: 640px; --breakpoint-lg: 1024px; --breakpoint-md: 768px; @@ -906,7 +906,7 @@ test('min-*', async () => { ['min-lg:flex', 'min-sm:flex', 'min-md:flex'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-sm: 640px; --breakpoint-lg: 1024px; --breakpoint-md: 768px; @@ -963,7 +963,7 @@ test('sorting stacked min-* and max-* variants', async () => { ['min-sm:max-lg:flex', 'min-sm:max-xl:flex', 'min-md:max-lg:flex', 'min-xs:max-sm:flex'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-sm: 640px; --breakpoint-lg: 1024px; --breakpoint-md: 768px; @@ -1018,7 +1018,7 @@ test('stacked min-* and max-* variants should come after unprefixed variants', a ['sm:flex', 'min-sm:max-lg:flex', 'md:flex', 'min-md:max-lg:flex'], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-sm: 640px; --breakpoint-lg: 1024px; --breakpoint-md: 768px; @@ -1080,7 +1080,7 @@ test('min, max and unprefixed breakpoints', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-sm: 640px; --breakpoint-lg: 1024px; --breakpoint-md: 768px; @@ -1465,7 +1465,7 @@ test('not', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-sm: 640px; } @@ -2011,7 +2011,7 @@ test('container queries', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --container-lg: 1024px; } @@ -2167,7 +2167,7 @@ test('variant order', async () => { ], ), ).toMatchInlineSnapshot(` - ":root { + ":root, :host { --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; From efeca2aaf64f30af99fadb1527384ea896f62435 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 29 Jan 2025 15:35:40 +0100 Subject: [PATCH 3/5] Add UI spec --- packages/tailwindcss/tests/ui.spec.ts | 48 ++++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 5 deletions(-) diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts index 5b3563ed2f03..2595d9982b93 100644 --- a/packages/tailwindcss/tests/ui.spec.ts +++ b/packages/tailwindcss/tests/ui.spec.ts @@ -639,6 +639,45 @@ test('explicit duration and ease utilities are respected when overriding transit expect(await getPropertyValue('#x', 'transition-duration')).toEqual('0.5s') }) +test('shadow DOM has access to variables', async ({ page }) => { + await render( + page, + html` + + + + `, + ) + + let gap = await page.evaluate(() => { + let shadowRoot = document.querySelector('#shadow')!.shadowRoot! + let x = shadowRoot.querySelector('#x')! + return window.getComputedStyle(x).getPropertyValue('gap') + }) + + expect(gap).toBe('8px') +}) + // --- const preflight = fs.readFileSync(path.resolve(__dirname, '..', 'preflight.css'), 'utf-8') @@ -673,14 +712,13 @@ async function render(page: Page, content: string, extraCss: string = '') { // mouse to before running the tests. content = `
${content}` - await page.setContent(content) - let scanner = new Scanner({}) let candidates = scanner.scanFiles([{ content, extension: 'html' }]) - await page.addStyleTag({ - content: optimizeCss(build(candidates)), - }) + let styles = optimizeCss(build(candidates)) + + content = `${content}` + await page.setContent(content) await page.locator('#mouse-park').hover() From 3a242e6d414a328441c4706abacd730285245b61 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 29 Jan 2025 15:38:56 +0100 Subject: [PATCH 4/5] Add change log --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ef0202af29c..01414f36cf5c 100644 --- a/CHANGELOG.md +++ b/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 variables are registered on `:host` to be available within shadow roots ([#15975](https://github.com/tailwindlabs/tailwindcss/pull/15975)) - _Upgrade_: Ensure JavaScript config files on different drives are correctly migrated ([#15927](https://github.com/tailwindlabs/tailwindcss/pull/15927)) ## [4.0.0] - 2025-01-21 From 9a64abd35c01e13c0561499ccc4d808f6c87956d Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 29 Jan 2025 17:16:44 +0100 Subject: [PATCH 5/5] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b9bc0a8ebdb4..6c3837abf85c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,7 +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 variables are registered on `:host` to be available within shadow roots ([#15975](https://github.com/tailwindlabs/tailwindcss/pull/15975)) +- 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))