From e7b244ce8ca3fd1c28dde843f77c0a2e99c2c4d9 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 10 Feb 2025 12:51:04 +0100 Subject: [PATCH 1/4] Revert: Only expose used CSS variables --- .github/workflows/prepare-release.yml | 2 ++ .github/workflows/release.yml | 2 ++ CHANGELOG.md | 4 +++- packages/tailwindcss/src/ast.ts | 15 +++++++++------ packages/tailwindcss/src/feature-flags.ts | 1 + packages/tailwindcss/tsup.config.ts | 6 ++++++ turbo.json | 3 ++- 7 files changed, 25 insertions(+), 8 deletions(-) create mode 100644 packages/tailwindcss/src/feature-flags.ts diff --git a/.github/workflows/prepare-release.yml b/.github/workflows/prepare-release.yml index 1bfd09f41642..0c8e3f389fcb 100644 --- a/.github/workflows/prepare-release.yml +++ b/.github/workflows/prepare-release.yml @@ -264,6 +264,8 @@ jobs: - name: Build Tailwind CSS run: pnpm run build + env: + FEATURES_ENV: stable - name: Run pre-publish optimizations scripts run: node ./scripts/pre-publish-optimizations.mjs diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 66ae87e7f2d4..d26670e116d9 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -256,6 +256,8 @@ jobs: - name: Build Tailwind CSS run: pnpm run build + env: + FEATURES_ENV: stable - name: Run pre-publish optimizations scripts run: node ./scripts/pre-publish-optimizations.mjs diff --git a/CHANGELOG.md b/CHANGELOG.md index d10d460698be..b4ef4a020928 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -Nothing yet! +### Fixed + +- Revert change to no longer include theme variables that aren't used in compiled CSS ## [4.0.5] - 2025-02-08 diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index 559accd020cc..a50f76c97821 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -1,5 +1,6 @@ import { parseAtRule } from './css-parser' import type { DesignSystem } from './design-system' +import { enableRemoveUnusedThemeVariables } from './feature-flags' import { ThemeOptions } from './theme' import { DefaultMap } from './utils/default-map' @@ -406,13 +407,15 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) { for (let declaration of declarations) { let options = designSystem.theme.getOptions(declaration.property) - if (options & (ThemeOptions.STATIC | ThemeOptions.USED)) { - if (declaration.property.startsWith('--animate-')) { - let parts = declaration.value!.split(/\s+/) - for (let part of parts) usedKeyframeNames.add(part) - } + if (enableRemoveUnusedThemeVariables) { + if (options & (ThemeOptions.STATIC | ThemeOptions.USED)) { + if (declaration.property.startsWith('--animate-')) { + let parts = declaration.value!.split(/\s+/) + for (let part of parts) usedKeyframeNames.add(part) + } - continue + continue + } } // Remove the declaration (from its parent) diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts new file mode 100644 index 000000000000..46802a120511 --- /dev/null +++ b/packages/tailwindcss/src/feature-flags.ts @@ -0,0 +1 @@ +export const enableRemoveUnusedThemeVariables = process.env.FEATURES_ENV !== 'stable' diff --git a/packages/tailwindcss/tsup.config.ts b/packages/tailwindcss/tsup.config.ts index 59c8bdfa2906..6bc831056de8 100644 --- a/packages/tailwindcss/tsup.config.ts +++ b/packages/tailwindcss/tsup.config.ts @@ -12,6 +12,9 @@ export default defineConfig([ 'default-theme': 'src/compat/default-theme.ts', 'flatten-color-palette': 'src/compat/flatten-color-palette.ts', }, + define: { + 'process.env.FEATURES_ENV': JSON.stringify(process.env.FEATURES_ENV ?? 'insiders'), + }, }, { format: ['cjs'], @@ -24,5 +27,8 @@ export default defineConfig([ 'default-theme': 'src/compat/default-theme.cts', 'flatten-color-palette': 'src/compat/flatten-color-palette.cts', }, + define: { + 'process.env.FEATURES_ENV': JSON.stringify(process.env.FEATURES_ENV ?? 'insiders'), + }, }, ]) diff --git a/turbo.json b/turbo.json index 35a3e63a7ce7..643777953406 100644 --- a/turbo.json +++ b/turbo.json @@ -34,7 +34,8 @@ }, "build": { "dependsOn": ["^build"], - "outputs": ["dist/**"] + "outputs": ["dist/**"], + "env": ["FEATURES_ENV"] }, "lint": {}, "dev": { From 77022831f65c498b2e3d63e19715c6db24a6e4f6 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 10 Feb 2025 13:06:13 +0100 Subject: [PATCH 2/4] Gate out the right block --- packages/tailwindcss/src/ast.ts | 56 +++++++++++------------ packages/tailwindcss/src/feature-flags.ts | 2 +- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index a50f76c97821..edf0e4e235bc 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -403,11 +403,11 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) { } // Remove unused theme variables - next: for (let [parent, declarations] of cssThemeVariables) { - for (let declaration of declarations) { - let options = designSystem.theme.getOptions(declaration.property) + if (enableRemoveUnusedThemeVariables) { + next: for (let [parent, declarations] of cssThemeVariables) { + for (let declaration of declarations) { + let options = designSystem.theme.getOptions(declaration.property) - if (enableRemoveUnusedThemeVariables) { if (options & (ThemeOptions.STATIC | ThemeOptions.USED)) { if (declaration.property.startsWith('--animate-')) { let parts = declaration.value!.split(/\s+/) @@ -416,36 +416,36 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) { continue } - } - // Remove the declaration (from its parent) - let idx = parent.indexOf(declaration) - parent.splice(idx, 1) - - // If the parent is now empty, remove it from the AST - if (parent.length === 0) { - for (let [idx, node] of newAst.entries()) { - // Assumption, but right now the `@theme` must be top-level, so we - // don't need to traverse the entire AST to find the parent. - // - // Checking for `rule`, because at this stage the `@theme` is already - // converted to a normal style rule `:root, :host` - if (node.kind === 'rule' && node.nodes === parent) { - newAst.splice(idx, 1) - break + // Remove the declaration (from its parent) + let idx = parent.indexOf(declaration) + parent.splice(idx, 1) + + // If the parent is now empty, remove it from the AST + if (parent.length === 0) { + for (let [idx, node] of newAst.entries()) { + // Assumption, but right now the `@theme` must be top-level, so we + // don't need to traverse the entire AST to find the parent. + // + // Checking for `rule`, because at this stage the `@theme` is already + // converted to a normal style rule `:root, :host` + if (node.kind === 'rule' && node.nodes === parent) { + newAst.splice(idx, 1) + break + } } - } - continue next + continue next + } } } - } - // Remove unused keyframes - for (let keyframe of keyframes) { - if (!usedKeyframeNames.has(keyframe.params)) { - let idx = atRoots.indexOf(keyframe) - atRoots.splice(idx, 1) + // Remove unused keyframes + for (let keyframe of keyframes) { + if (!usedKeyframeNames.has(keyframe.params)) { + let idx = atRoots.indexOf(keyframe) + atRoots.splice(idx, 1) + } } } diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts index 46802a120511..b24550429193 100644 --- a/packages/tailwindcss/src/feature-flags.ts +++ b/packages/tailwindcss/src/feature-flags.ts @@ -1 +1 @@ -export const enableRemoveUnusedThemeVariables = process.env.FEATURES_ENV !== 'stable' +export const enableRemoveUnusedThemeVariables = false From 444b59d6c5b808c49a0a0164c8ef5af9a97c5573 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 10 Feb 2025 13:06:32 +0100 Subject: [PATCH 3/4] Update snapshots --- .../src/__snapshots__/index.test.ts.snap | 383 +++++++++++++++++ .../@tailwindcss-postcss/src/index.test.ts | 12 +- .../src/__snapshots__/index.test.ts.snap | 391 ++++++++++++++++++ .../src/__snapshots__/utilities.test.ts.snap | 27 ++ .../tailwindcss/src/compat/config.test.ts | 108 ++++- .../src/compat/container-config.test.ts | 76 +++- .../tailwindcss/src/compat/plugin-api.test.ts | 18 + .../src/compat/screens-config.test.ts | 27 +- .../tailwindcss/src/css-functions.test.ts | 208 ++++++++-- packages/tailwindcss/src/index.test.ts | 77 +++- packages/tailwindcss/src/prefix.test.ts | 23 +- packages/tailwindcss/src/utilities.test.ts | 73 +++- packages/tailwindcss/src/variants.test.ts | 80 +++- 13 files changed, 1417 insertions(+), 86 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index dbf73d755e12..d401ace41bed 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -4,11 +4,363 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` "@layer theme { :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; + --color-red-50: oklch(.971 .013 17.38); + --color-red-100: oklch(.936 .032 17.717); + --color-red-200: oklch(.885 .062 18.334); + --color-red-300: oklch(.808 .114 19.571); + --color-red-400: oklch(.704 .191 22.216); + --color-red-500: oklch(.637 .237 25.331); + --color-red-600: oklch(.577 .245 27.325); + --color-red-700: oklch(.505 .213 27.518); + --color-red-800: oklch(.444 .177 26.899); + --color-red-900: oklch(.396 .141 25.723); + --color-red-950: oklch(.258 .092 26.042); + --color-orange-50: oklch(.98 .016 73.684); + --color-orange-100: oklch(.954 .038 75.164); + --color-orange-200: oklch(.901 .076 70.697); + --color-orange-300: oklch(.837 .128 66.29); + --color-orange-400: oklch(.75 .183 55.934); + --color-orange-500: oklch(.705 .213 47.604); + --color-orange-600: oklch(.646 .222 41.116); + --color-orange-700: oklch(.553 .195 38.402); + --color-orange-800: oklch(.47 .157 37.304); + --color-orange-900: oklch(.408 .123 38.172); + --color-orange-950: oklch(.266 .079 36.259); + --color-amber-50: oklch(.987 .022 95.277); + --color-amber-100: oklch(.962 .059 95.617); + --color-amber-200: oklch(.924 .12 95.746); + --color-amber-300: oklch(.879 .169 91.605); + --color-amber-400: oklch(.828 .189 84.429); + --color-amber-500: oklch(.769 .188 70.08); + --color-amber-600: oklch(.666 .179 58.318); + --color-amber-700: oklch(.555 .163 48.998); + --color-amber-800: oklch(.473 .137 46.201); + --color-amber-900: oklch(.414 .112 45.904); + --color-amber-950: oklch(.279 .077 45.635); + --color-yellow-50: oklch(.987 .026 102.212); + --color-yellow-100: oklch(.973 .071 103.193); + --color-yellow-200: oklch(.945 .129 101.54); + --color-yellow-300: oklch(.905 .182 98.111); + --color-yellow-400: oklch(.852 .199 91.936); + --color-yellow-500: oklch(.795 .184 86.047); + --color-yellow-600: oklch(.681 .162 75.834); + --color-yellow-700: oklch(.554 .135 66.442); + --color-yellow-800: oklch(.476 .114 61.907); + --color-yellow-900: oklch(.421 .095 57.708); + --color-yellow-950: oklch(.286 .066 53.813); + --color-lime-50: oklch(.986 .031 120.757); + --color-lime-100: oklch(.967 .067 122.328); + --color-lime-200: oklch(.938 .127 124.321); + --color-lime-300: oklch(.897 .196 126.665); + --color-lime-400: oklch(.841 .238 128.85); + --color-lime-500: oklch(.768 .233 130.85); + --color-lime-600: oklch(.648 .2 131.684); + --color-lime-700: oklch(.532 .157 131.589); + --color-lime-800: oklch(.453 .124 130.933); + --color-lime-900: oklch(.405 .101 131.063); + --color-lime-950: oklch(.274 .072 132.109); + --color-green-50: oklch(.982 .018 155.826); + --color-green-100: oklch(.962 .044 156.743); + --color-green-200: oklch(.925 .084 155.995); + --color-green-300: oklch(.871 .15 154.449); + --color-green-400: oklch(.792 .209 151.711); + --color-green-500: oklch(.723 .219 149.579); + --color-green-600: oklch(.627 .194 149.214); + --color-green-700: oklch(.527 .154 150.069); + --color-green-800: oklch(.448 .119 151.328); + --color-green-900: oklch(.393 .095 152.535); + --color-green-950: oklch(.266 .065 152.934); + --color-emerald-50: oklch(.979 .021 166.113); + --color-emerald-100: oklch(.95 .052 163.051); + --color-emerald-200: oklch(.905 .093 164.15); + --color-emerald-300: oklch(.845 .143 164.978); + --color-emerald-400: oklch(.765 .177 163.223); + --color-emerald-500: oklch(.696 .17 162.48); + --color-emerald-600: oklch(.596 .145 163.225); + --color-emerald-700: oklch(.508 .118 165.612); + --color-emerald-800: oklch(.432 .095 166.913); + --color-emerald-900: oklch(.378 .077 168.94); + --color-emerald-950: oklch(.262 .051 172.552); + --color-teal-50: oklch(.984 .014 180.72); + --color-teal-100: oklch(.953 .051 180.801); + --color-teal-200: oklch(.91 .096 180.426); + --color-teal-300: oklch(.855 .138 181.071); + --color-teal-400: oklch(.777 .152 181.912); + --color-teal-500: oklch(.704 .14 182.503); + --color-teal-600: oklch(.6 .118 184.704); + --color-teal-700: oklch(.511 .096 186.391); + --color-teal-800: oklch(.437 .078 188.216); + --color-teal-900: oklch(.386 .063 188.416); + --color-teal-950: oklch(.277 .046 192.524); + --color-cyan-50: oklch(.984 .019 200.873); + --color-cyan-100: oklch(.956 .045 203.388); + --color-cyan-200: oklch(.917 .08 205.041); + --color-cyan-300: oklch(.865 .127 207.078); + --color-cyan-400: oklch(.789 .154 211.53); + --color-cyan-500: oklch(.715 .143 215.221); + --color-cyan-600: oklch(.609 .126 221.723); + --color-cyan-700: oklch(.52 .105 223.128); + --color-cyan-800: oklch(.45 .085 224.283); + --color-cyan-900: oklch(.398 .07 227.392); + --color-cyan-950: oklch(.302 .056 229.695); + --color-sky-50: oklch(.977 .013 236.62); + --color-sky-100: oklch(.951 .026 236.824); + --color-sky-200: oklch(.901 .058 230.902); + --color-sky-300: oklch(.828 .111 230.318); + --color-sky-400: oklch(.746 .16 232.661); + --color-sky-500: oklch(.685 .169 237.323); + --color-sky-600: oklch(.588 .158 241.966); + --color-sky-700: oklch(.5 .134 242.749); + --color-sky-800: oklch(.443 .11 240.79); + --color-sky-900: oklch(.391 .09 240.876); + --color-sky-950: oklch(.293 .066 243.157); + --color-blue-50: oklch(.97 .014 254.604); + --color-blue-100: oklch(.932 .032 255.585); + --color-blue-200: oklch(.882 .059 254.128); + --color-blue-300: oklch(.809 .105 251.813); + --color-blue-400: oklch(.707 .165 254.624); + --color-blue-500: oklch(.623 .214 259.815); + --color-blue-600: oklch(.546 .245 262.881); + --color-blue-700: oklch(.488 .243 264.376); + --color-blue-800: oklch(.424 .199 265.638); + --color-blue-900: oklch(.379 .146 265.522); + --color-blue-950: oklch(.282 .091 267.935); + --color-indigo-50: oklch(.962 .018 272.314); + --color-indigo-100: oklch(.93 .034 272.788); + --color-indigo-200: oklch(.87 .065 274.039); + --color-indigo-300: oklch(.785 .115 274.713); + --color-indigo-400: oklch(.673 .182 276.935); + --color-indigo-500: oklch(.585 .233 277.117); + --color-indigo-600: oklch(.511 .262 276.966); + --color-indigo-700: oklch(.457 .24 277.023); + --color-indigo-800: oklch(.398 .195 277.366); + --color-indigo-900: oklch(.359 .144 278.697); + --color-indigo-950: oklch(.257 .09 281.288); + --color-violet-50: oklch(.969 .016 293.756); + --color-violet-100: oklch(.943 .029 294.588); + --color-violet-200: oklch(.894 .057 293.283); + --color-violet-300: oklch(.811 .111 293.571); + --color-violet-400: oklch(.702 .183 293.541); + --color-violet-500: oklch(.606 .25 292.717); + --color-violet-600: oklch(.541 .281 293.009); + --color-violet-700: oklch(.491 .27 292.581); + --color-violet-800: oklch(.432 .232 292.759); + --color-violet-900: oklch(.38 .189 293.745); + --color-violet-950: oklch(.283 .141 291.089); + --color-purple-50: oklch(.977 .014 308.299); + --color-purple-100: oklch(.946 .033 307.174); + --color-purple-200: oklch(.902 .063 306.703); + --color-purple-300: oklch(.827 .119 306.383); + --color-purple-400: oklch(.714 .203 305.504); + --color-purple-500: oklch(.627 .265 303.9); + --color-purple-600: oklch(.558 .288 302.321); + --color-purple-700: oklch(.496 .265 301.924); + --color-purple-800: oklch(.438 .218 303.724); + --color-purple-900: oklch(.381 .176 304.987); + --color-purple-950: oklch(.291 .149 302.717); + --color-fuchsia-50: oklch(.977 .017 320.058); + --color-fuchsia-100: oklch(.952 .037 318.852); + --color-fuchsia-200: oklch(.903 .076 319.62); + --color-fuchsia-300: oklch(.833 .145 321.434); + --color-fuchsia-400: oklch(.74 .238 322.16); + --color-fuchsia-500: oklch(.667 .295 322.15); + --color-fuchsia-600: oklch(.591 .293 322.896); + --color-fuchsia-700: oklch(.518 .253 323.949); + --color-fuchsia-800: oklch(.452 .211 324.591); + --color-fuchsia-900: oklch(.401 .17 325.612); + --color-fuchsia-950: oklch(.293 .136 325.661); + --color-pink-50: oklch(.971 .014 343.198); + --color-pink-100: oklch(.948 .028 342.258); + --color-pink-200: oklch(.899 .061 343.231); + --color-pink-300: oklch(.823 .12 346.018); + --color-pink-400: oklch(.718 .202 349.761); + --color-pink-500: oklch(.656 .241 354.308); + --color-pink-600: oklch(.592 .249 .584); + --color-pink-700: oklch(.525 .223 3.958); + --color-pink-800: oklch(.459 .187 3.815); + --color-pink-900: oklch(.408 .153 2.432); + --color-pink-950: oklch(.284 .109 3.907); + --color-rose-50: oklch(.969 .015 12.422); + --color-rose-100: oklch(.941 .03 12.58); + --color-rose-200: oklch(.892 .058 10.001); + --color-rose-300: oklch(.81 .117 11.638); + --color-rose-400: oklch(.712 .194 13.428); + --color-rose-500: oklch(.645 .246 16.439); + --color-rose-600: oklch(.586 .253 17.585); + --color-rose-700: oklch(.514 .222 16.935); + --color-rose-800: oklch(.455 .188 13.697); + --color-rose-900: oklch(.41 .159 10.272); + --color-rose-950: oklch(.271 .105 12.094); + --color-slate-50: oklch(.984 .003 247.858); + --color-slate-100: oklch(.968 .007 247.896); + --color-slate-200: oklch(.929 .013 255.508); + --color-slate-300: oklch(.869 .022 252.894); + --color-slate-400: oklch(.704 .04 256.788); + --color-slate-500: oklch(.554 .046 257.417); + --color-slate-600: oklch(.446 .043 257.281); + --color-slate-700: oklch(.372 .044 257.287); + --color-slate-800: oklch(.279 .041 260.031); + --color-slate-900: oklch(.208 .042 265.755); + --color-slate-950: oklch(.129 .042 264.695); + --color-gray-50: oklch(.985 .002 247.839); + --color-gray-100: oklch(.967 .003 264.542); + --color-gray-200: oklch(.928 .006 264.531); + --color-gray-300: oklch(.872 .01 258.338); + --color-gray-400: oklch(.707 .022 261.325); + --color-gray-500: oklch(.551 .027 264.364); + --color-gray-600: oklch(.446 .03 256.802); + --color-gray-700: oklch(.373 .034 259.733); + --color-gray-800: oklch(.278 .033 256.848); + --color-gray-900: oklch(.21 .034 264.665); + --color-gray-950: oklch(.13 .028 261.692); + --color-zinc-50: oklch(.985 0 0); + --color-zinc-100: oklch(.967 .001 286.375); + --color-zinc-200: oklch(.92 .004 286.32); + --color-zinc-300: oklch(.871 .006 286.286); + --color-zinc-400: oklch(.705 .015 286.067); + --color-zinc-500: oklch(.552 .016 285.938); + --color-zinc-600: oklch(.442 .017 285.786); + --color-zinc-700: oklch(.37 .013 285.805); + --color-zinc-800: oklch(.274 .006 286.033); + --color-zinc-900: oklch(.21 .006 285.885); + --color-zinc-950: oklch(.141 .005 285.823); + --color-neutral-50: oklch(.985 0 0); + --color-neutral-100: oklch(.97 0 0); + --color-neutral-200: oklch(.922 0 0); + --color-neutral-300: oklch(.87 0 0); + --color-neutral-400: oklch(.708 0 0); + --color-neutral-500: oklch(.556 0 0); + --color-neutral-600: oklch(.439 0 0); + --color-neutral-700: oklch(.371 0 0); + --color-neutral-800: oklch(.269 0 0); + --color-neutral-900: oklch(.205 0 0); + --color-neutral-950: oklch(.145 0 0); + --color-stone-50: oklch(.985 .001 106.423); + --color-stone-100: oklch(.97 .001 106.424); + --color-stone-200: oklch(.923 .003 48.717); + --color-stone-300: oklch(.869 .005 56.366); + --color-stone-400: oklch(.709 .01 56.259); + --color-stone-500: oklch(.553 .013 58.071); + --color-stone-600: oklch(.444 .011 73.639); + --color-stone-700: oklch(.374 .01 67.558); + --color-stone-800: oklch(.268 .007 34.298); + --color-stone-900: oklch(.216 .006 56.043); + --color-stone-950: oklch(.147 .004 49.25); --color-black: #000; + --color-white: #fff; + --spacing: .25rem; + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + --container-3xs: 16rem; + --container-2xs: 18rem; + --container-xs: 20rem; + --container-sm: 24rem; + --container-md: 28rem; + --container-lg: 32rem; + --container-xl: 36rem; + --container-2xl: 42rem; + --container-3xl: 48rem; + --container-4xl: 56rem; + --container-5xl: 64rem; + --container-6xl: 72rem; + --container-7xl: 80rem; + --text-xs: .75rem; + --text-xs--line-height: calc(1 / .75); + --text-sm: .875rem; + --text-sm--line-height: calc(1.25 / .875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2.25 / 1.875); + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2.5 / 2.25); + --text-5xl: 3rem; + --text-5xl--line-height: 1; + --text-6xl: 3.75rem; + --text-6xl--line-height: 1; + --text-7xl: 4.5rem; + --text-7xl--line-height: 1; + --text-8xl: 6rem; + --text-8xl--line-height: 1; + --text-9xl: 8rem; + --text-9xl--line-height: 1; + --font-weight-thin: 100; + --font-weight-extralight: 200; + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; --font-weight-bold: 700; + --font-weight-extrabold: 800; + --font-weight-black: 900; + --tracking-tighter: -.05em; + --tracking-tight: -.025em; + --tracking-normal: 0em; + --tracking-wide: .025em; + --tracking-wider: .05em; + --tracking-widest: .1em; + --leading-tight: 1.25; + --leading-snug: 1.375; + --leading-normal: 1.5; + --leading-relaxed: 1.625; + --leading-loose: 2; + --radius-xs: .125rem; + --radius-sm: .25rem; + --radius-md: .375rem; + --radius-lg: .5rem; + --radius-xl: .75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --radius-4xl: 2rem; + --shadow-2xs: 0 1px #0000000d; + --shadow-xs: 0 1px 2px 0 #0000000d; + --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; + --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; + --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; + --shadow-2xl: 0 25px 50px -12px #00000040; + --inset-shadow-2xs: inset 0 1px #0000000d; + --inset-shadow-xs: inset 0 1px 1px #0000000d; + --inset-shadow-sm: inset 0 2px 4px #0000000d; + --drop-shadow-xs: 0 1px 1px #0000000d; + --drop-shadow-sm: 0 1px 2px #00000026; + --drop-shadow-md: 0 3px 3px #0000001f; + --drop-shadow-lg: 0 4px 4px #00000026; + --drop-shadow-xl: 0 9px 7px #0000001a; + --drop-shadow-2xl: 0 25px 25px #00000026; + --ease-in: cubic-bezier(.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, .2, 1); + --ease-in-out: cubic-bezier(.4, 0, .2, 1); + --animate-spin: spin 1s linear infinite; + --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; + --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; + --animate-bounce: bounce 1s infinite; + --blur-xs: 4px; + --blur-sm: 8px; + --blur-md: 12px; + --blur-lg: 16px; + --blur-xl: 24px; + --blur-2xl: 40px; + --blur-3xl: 64px; + --perspective-dramatic: 100px; + --perspective-near: 300px; + --perspective-normal: 500px; + --perspective-midrange: 800px; + --perspective-distant: 1200px; + --aspect-video: 16 / 9; + --default-transition-duration: .15s; + --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var(--font-sans--font-variation-settings); @@ -278,6 +630,37 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` } } +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +@keyframes ping { + 75%, 100% { + opacity: 0; + transform: scale(2); + } +} + +@keyframes pulse { + 50% { + opacity: .5; + } +} + +@keyframes bounce { + 0%, 100% { + animation-timing-function: cubic-bezier(.8, 0, 1, 1); + transform: translateY(-25%); + } + + 50% { + animation-timing-function: cubic-bezier(0, 0, .2, 1); + transform: none; + } +} + @property --tw-font-weight { syntax: "*"; inherits: false diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 3a7e1b8b896c..97eee3c1c5f0 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -330,7 +330,11 @@ test('runs `Once` plugins in the right order', async () => { ) expect(result.css.trim()).toMatchInlineSnapshot(` - ".custom-css { + ":root, :host { + --color-red-500: red; + } + + .custom-css { color: red; }" `) @@ -343,7 +347,11 @@ test('runs `Once` plugins in the right order', async () => { }" `) expect(after).toMatchInlineSnapshot(` - ".custom-css { + ":root, :host { + --color-red-500: red; + } + + .custom-css { color: red; }" `) diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 0b32f5ed7588..9ed291c3908a 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -3,9 +3,369 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = ` ":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; + --color-red-50: oklch(.971 .013 17.38); + --color-red-100: oklch(.936 .032 17.717); + --color-red-200: oklch(.885 .062 18.334); + --color-red-300: oklch(.808 .114 19.571); + --color-red-400: oklch(.704 .191 22.216); --color-red-500: oklch(.637 .237 25.331); + --color-red-600: oklch(.577 .245 27.325); + --color-red-700: oklch(.505 .213 27.518); + --color-red-800: oklch(.444 .177 26.899); + --color-red-900: oklch(.396 .141 25.723); + --color-red-950: oklch(.258 .092 26.042); + --color-orange-50: oklch(.98 .016 73.684); + --color-orange-100: oklch(.954 .038 75.164); + --color-orange-200: oklch(.901 .076 70.697); + --color-orange-300: oklch(.837 .128 66.29); + --color-orange-400: oklch(.75 .183 55.934); + --color-orange-500: oklch(.705 .213 47.604); + --color-orange-600: oklch(.646 .222 41.116); + --color-orange-700: oklch(.553 .195 38.402); + --color-orange-800: oklch(.47 .157 37.304); + --color-orange-900: oklch(.408 .123 38.172); + --color-orange-950: oklch(.266 .079 36.259); + --color-amber-50: oklch(.987 .022 95.277); + --color-amber-100: oklch(.962 .059 95.617); + --color-amber-200: oklch(.924 .12 95.746); + --color-amber-300: oklch(.879 .169 91.605); + --color-amber-400: oklch(.828 .189 84.429); + --color-amber-500: oklch(.769 .188 70.08); + --color-amber-600: oklch(.666 .179 58.318); + --color-amber-700: oklch(.555 .163 48.998); + --color-amber-800: oklch(.473 .137 46.201); + --color-amber-900: oklch(.414 .112 45.904); + --color-amber-950: oklch(.279 .077 45.635); + --color-yellow-50: oklch(.987 .026 102.212); + --color-yellow-100: oklch(.973 .071 103.193); + --color-yellow-200: oklch(.945 .129 101.54); + --color-yellow-300: oklch(.905 .182 98.111); + --color-yellow-400: oklch(.852 .199 91.936); + --color-yellow-500: oklch(.795 .184 86.047); + --color-yellow-600: oklch(.681 .162 75.834); + --color-yellow-700: oklch(.554 .135 66.442); + --color-yellow-800: oklch(.476 .114 61.907); + --color-yellow-900: oklch(.421 .095 57.708); + --color-yellow-950: oklch(.286 .066 53.813); + --color-lime-50: oklch(.986 .031 120.757); + --color-lime-100: oklch(.967 .067 122.328); + --color-lime-200: oklch(.938 .127 124.321); + --color-lime-300: oklch(.897 .196 126.665); + --color-lime-400: oklch(.841 .238 128.85); + --color-lime-500: oklch(.768 .233 130.85); + --color-lime-600: oklch(.648 .2 131.684); + --color-lime-700: oklch(.532 .157 131.589); + --color-lime-800: oklch(.453 .124 130.933); + --color-lime-900: oklch(.405 .101 131.063); + --color-lime-950: oklch(.274 .072 132.109); + --color-green-50: oklch(.982 .018 155.826); + --color-green-100: oklch(.962 .044 156.743); + --color-green-200: oklch(.925 .084 155.995); + --color-green-300: oklch(.871 .15 154.449); + --color-green-400: oklch(.792 .209 151.711); + --color-green-500: oklch(.723 .219 149.579); + --color-green-600: oklch(.627 .194 149.214); + --color-green-700: oklch(.527 .154 150.069); + --color-green-800: oklch(.448 .119 151.328); + --color-green-900: oklch(.393 .095 152.535); + --color-green-950: oklch(.266 .065 152.934); + --color-emerald-50: oklch(.979 .021 166.113); + --color-emerald-100: oklch(.95 .052 163.051); + --color-emerald-200: oklch(.905 .093 164.15); + --color-emerald-300: oklch(.845 .143 164.978); + --color-emerald-400: oklch(.765 .177 163.223); + --color-emerald-500: oklch(.696 .17 162.48); + --color-emerald-600: oklch(.596 .145 163.225); + --color-emerald-700: oklch(.508 .118 165.612); + --color-emerald-800: oklch(.432 .095 166.913); + --color-emerald-900: oklch(.378 .077 168.94); + --color-emerald-950: oklch(.262 .051 172.552); + --color-teal-50: oklch(.984 .014 180.72); + --color-teal-100: oklch(.953 .051 180.801); + --color-teal-200: oklch(.91 .096 180.426); + --color-teal-300: oklch(.855 .138 181.071); + --color-teal-400: oklch(.777 .152 181.912); + --color-teal-500: oklch(.704 .14 182.503); + --color-teal-600: oklch(.6 .118 184.704); + --color-teal-700: oklch(.511 .096 186.391); + --color-teal-800: oklch(.437 .078 188.216); + --color-teal-900: oklch(.386 .063 188.416); + --color-teal-950: oklch(.277 .046 192.524); + --color-cyan-50: oklch(.984 .019 200.873); + --color-cyan-100: oklch(.956 .045 203.388); + --color-cyan-200: oklch(.917 .08 205.041); + --color-cyan-300: oklch(.865 .127 207.078); + --color-cyan-400: oklch(.789 .154 211.53); + --color-cyan-500: oklch(.715 .143 215.221); + --color-cyan-600: oklch(.609 .126 221.723); + --color-cyan-700: oklch(.52 .105 223.128); + --color-cyan-800: oklch(.45 .085 224.283); + --color-cyan-900: oklch(.398 .07 227.392); + --color-cyan-950: oklch(.302 .056 229.695); + --color-sky-50: oklch(.977 .013 236.62); + --color-sky-100: oklch(.951 .026 236.824); + --color-sky-200: oklch(.901 .058 230.902); + --color-sky-300: oklch(.828 .111 230.318); + --color-sky-400: oklch(.746 .16 232.661); + --color-sky-500: oklch(.685 .169 237.323); + --color-sky-600: oklch(.588 .158 241.966); + --color-sky-700: oklch(.5 .134 242.749); + --color-sky-800: oklch(.443 .11 240.79); + --color-sky-900: oklch(.391 .09 240.876); + --color-sky-950: oklch(.293 .066 243.157); + --color-blue-50: oklch(.97 .014 254.604); + --color-blue-100: oklch(.932 .032 255.585); + --color-blue-200: oklch(.882 .059 254.128); + --color-blue-300: oklch(.809 .105 251.813); + --color-blue-400: oklch(.707 .165 254.624); + --color-blue-500: oklch(.623 .214 259.815); + --color-blue-600: oklch(.546 .245 262.881); + --color-blue-700: oklch(.488 .243 264.376); + --color-blue-800: oklch(.424 .199 265.638); + --color-blue-900: oklch(.379 .146 265.522); + --color-blue-950: oklch(.282 .091 267.935); + --color-indigo-50: oklch(.962 .018 272.314); + --color-indigo-100: oklch(.93 .034 272.788); + --color-indigo-200: oklch(.87 .065 274.039); + --color-indigo-300: oklch(.785 .115 274.713); + --color-indigo-400: oklch(.673 .182 276.935); + --color-indigo-500: oklch(.585 .233 277.117); + --color-indigo-600: oklch(.511 .262 276.966); + --color-indigo-700: oklch(.457 .24 277.023); + --color-indigo-800: oklch(.398 .195 277.366); + --color-indigo-900: oklch(.359 .144 278.697); + --color-indigo-950: oklch(.257 .09 281.288); + --color-violet-50: oklch(.969 .016 293.756); + --color-violet-100: oklch(.943 .029 294.588); + --color-violet-200: oklch(.894 .057 293.283); + --color-violet-300: oklch(.811 .111 293.571); + --color-violet-400: oklch(.702 .183 293.541); + --color-violet-500: oklch(.606 .25 292.717); + --color-violet-600: oklch(.541 .281 293.009); + --color-violet-700: oklch(.491 .27 292.581); + --color-violet-800: oklch(.432 .232 292.759); + --color-violet-900: oklch(.38 .189 293.745); + --color-violet-950: oklch(.283 .141 291.089); + --color-purple-50: oklch(.977 .014 308.299); + --color-purple-100: oklch(.946 .033 307.174); + --color-purple-200: oklch(.902 .063 306.703); + --color-purple-300: oklch(.827 .119 306.383); + --color-purple-400: oklch(.714 .203 305.504); + --color-purple-500: oklch(.627 .265 303.9); + --color-purple-600: oklch(.558 .288 302.321); + --color-purple-700: oklch(.496 .265 301.924); + --color-purple-800: oklch(.438 .218 303.724); + --color-purple-900: oklch(.381 .176 304.987); + --color-purple-950: oklch(.291 .149 302.717); + --color-fuchsia-50: oklch(.977 .017 320.058); + --color-fuchsia-100: oklch(.952 .037 318.852); + --color-fuchsia-200: oklch(.903 .076 319.62); + --color-fuchsia-300: oklch(.833 .145 321.434); + --color-fuchsia-400: oklch(.74 .238 322.16); + --color-fuchsia-500: oklch(.667 .295 322.15); + --color-fuchsia-600: oklch(.591 .293 322.896); + --color-fuchsia-700: oklch(.518 .253 323.949); + --color-fuchsia-800: oklch(.452 .211 324.591); + --color-fuchsia-900: oklch(.401 .17 325.612); + --color-fuchsia-950: oklch(.293 .136 325.661); + --color-pink-50: oklch(.971 .014 343.198); + --color-pink-100: oklch(.948 .028 342.258); + --color-pink-200: oklch(.899 .061 343.231); + --color-pink-300: oklch(.823 .12 346.018); + --color-pink-400: oklch(.718 .202 349.761); + --color-pink-500: oklch(.656 .241 354.308); + --color-pink-600: oklch(.592 .249 .584); + --color-pink-700: oklch(.525 .223 3.958); + --color-pink-800: oklch(.459 .187 3.815); + --color-pink-900: oklch(.408 .153 2.432); + --color-pink-950: oklch(.284 .109 3.907); + --color-rose-50: oklch(.969 .015 12.422); + --color-rose-100: oklch(.941 .03 12.58); + --color-rose-200: oklch(.892 .058 10.001); + --color-rose-300: oklch(.81 .117 11.638); + --color-rose-400: oklch(.712 .194 13.428); + --color-rose-500: oklch(.645 .246 16.439); + --color-rose-600: oklch(.586 .253 17.585); + --color-rose-700: oklch(.514 .222 16.935); + --color-rose-800: oklch(.455 .188 13.697); + --color-rose-900: oklch(.41 .159 10.272); + --color-rose-950: oklch(.271 .105 12.094); + --color-slate-50: oklch(.984 .003 247.858); + --color-slate-100: oklch(.968 .007 247.896); + --color-slate-200: oklch(.929 .013 255.508); + --color-slate-300: oklch(.869 .022 252.894); + --color-slate-400: oklch(.704 .04 256.788); + --color-slate-500: oklch(.554 .046 257.417); + --color-slate-600: oklch(.446 .043 257.281); + --color-slate-700: oklch(.372 .044 257.287); + --color-slate-800: oklch(.279 .041 260.031); + --color-slate-900: oklch(.208 .042 265.755); + --color-slate-950: oklch(.129 .042 264.695); + --color-gray-50: oklch(.985 .002 247.839); + --color-gray-100: oklch(.967 .003 264.542); + --color-gray-200: oklch(.928 .006 264.531); + --color-gray-300: oklch(.872 .01 258.338); + --color-gray-400: oklch(.707 .022 261.325); + --color-gray-500: oklch(.551 .027 264.364); + --color-gray-600: oklch(.446 .03 256.802); + --color-gray-700: oklch(.373 .034 259.733); + --color-gray-800: oklch(.278 .033 256.848); + --color-gray-900: oklch(.21 .034 264.665); + --color-gray-950: oklch(.13 .028 261.692); + --color-zinc-50: oklch(.985 0 0); + --color-zinc-100: oklch(.967 .001 286.375); + --color-zinc-200: oklch(.92 .004 286.32); + --color-zinc-300: oklch(.871 .006 286.286); + --color-zinc-400: oklch(.705 .015 286.067); + --color-zinc-500: oklch(.552 .016 285.938); + --color-zinc-600: oklch(.442 .017 285.786); + --color-zinc-700: oklch(.37 .013 285.805); + --color-zinc-800: oklch(.274 .006 286.033); + --color-zinc-900: oklch(.21 .006 285.885); + --color-zinc-950: oklch(.141 .005 285.823); + --color-neutral-50: oklch(.985 0 0); + --color-neutral-100: oklch(.97 0 0); + --color-neutral-200: oklch(.922 0 0); + --color-neutral-300: oklch(.87 0 0); + --color-neutral-400: oklch(.708 0 0); + --color-neutral-500: oklch(.556 0 0); + --color-neutral-600: oklch(.439 0 0); + --color-neutral-700: oklch(.371 0 0); + --color-neutral-800: oklch(.269 0 0); + --color-neutral-900: oklch(.205 0 0); + --color-neutral-950: oklch(.145 0 0); + --color-stone-50: oklch(.985 .001 106.423); + --color-stone-100: oklch(.97 .001 106.424); + --color-stone-200: oklch(.923 .003 48.717); + --color-stone-300: oklch(.869 .005 56.366); + --color-stone-400: oklch(.709 .01 56.259); + --color-stone-500: oklch(.553 .013 58.071); + --color-stone-600: oklch(.444 .011 73.639); + --color-stone-700: oklch(.374 .01 67.558); + --color-stone-800: oklch(.268 .007 34.298); + --color-stone-900: oklch(.216 .006 56.043); + --color-stone-950: oklch(.147 .004 49.25); + --color-black: #000; + --color-white: #fff; --spacing: .25rem; + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + --container-3xs: 16rem; + --container-2xs: 18rem; + --container-xs: 20rem; + --container-sm: 24rem; + --container-md: 28rem; + --container-lg: 32rem; + --container-xl: 36rem; + --container-2xl: 42rem; + --container-3xl: 48rem; + --container-4xl: 56rem; + --container-5xl: 64rem; + --container-6xl: 72rem; + --container-7xl: 80rem; + --text-xs: .75rem; + --text-xs--line-height: calc(1 / .75); + --text-sm: .875rem; + --text-sm--line-height: calc(1.25 / .875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2.25 / 1.875); + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2.5 / 2.25); + --text-5xl: 3rem; + --text-5xl--line-height: 1; + --text-6xl: 3.75rem; + --text-6xl--line-height: 1; + --text-7xl: 4.5rem; + --text-7xl--line-height: 1; + --text-8xl: 6rem; + --text-8xl--line-height: 1; + --text-9xl: 8rem; + --text-9xl--line-height: 1; + --font-weight-thin: 100; + --font-weight-extralight: 200; + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --font-weight-extrabold: 800; + --font-weight-black: 900; + --tracking-tighter: -.05em; + --tracking-tight: -.025em; + --tracking-normal: 0em; + --tracking-wide: .025em; + --tracking-wider: .05em; + --tracking-widest: .1em; + --leading-tight: 1.25; + --leading-snug: 1.375; + --leading-normal: 1.5; + --leading-relaxed: 1.625; + --leading-loose: 2; + --radius-xs: .125rem; + --radius-sm: .25rem; + --radius-md: .375rem; + --radius-lg: .5rem; + --radius-xl: .75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --radius-4xl: 2rem; + --shadow-2xs: 0 1px #0000000d; + --shadow-xs: 0 1px 2px 0 #0000000d; + --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; + --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; + --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; + --shadow-2xl: 0 25px 50px -12px #00000040; + --inset-shadow-2xs: inset 0 1px #0000000d; + --inset-shadow-xs: inset 0 1px 1px #0000000d; + --inset-shadow-sm: inset 0 2px 4px #0000000d; + --drop-shadow-xs: 0 1px 1px #0000000d; + --drop-shadow-sm: 0 1px 2px #00000026; + --drop-shadow-md: 0 3px 3px #0000001f; + --drop-shadow-lg: 0 4px 4px #00000026; + --drop-shadow-xl: 0 9px 7px #0000001a; + --drop-shadow-2xl: 0 25px 25px #00000026; + --ease-in: cubic-bezier(.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, .2, 1); + --ease-in-out: cubic-bezier(.4, 0, .2, 1); + --animate-spin: spin 1s linear infinite; + --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; + --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; + --animate-bounce: bounce 1s infinite; + --blur-xs: 4px; + --blur-sm: 8px; + --blur-md: 12px; + --blur-lg: 16px; + --blur-xl: 24px; + --blur-2xl: 40px; + --blur-3xl: 64px; + --perspective-dramatic: 100px; + --perspective-near: 300px; + --perspective-normal: 500px; + --perspective-midrange: 800px; + --perspective-distant: 1200px; + --aspect-video: 16 / 9; + --default-transition-duration: .15s; + --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); + --default-font-family: var(--font-sans); + --default-font-feature-settings: var(--font-sans--font-feature-settings); + --default-font-variation-settings: var(--font-sans--font-variation-settings); + --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); } .w-4 { @@ -27,6 +387,37 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using } } +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +@keyframes ping { + 75%, 100% { + opacity: 0; + transform: scale(2); + } +} + +@keyframes pulse { + 50% { + opacity: .5; + } +} + +@keyframes bounce { + 0%, 100% { + animation-timing-function: cubic-bezier(.8, 0, 1, 1); + transform: translateY(-25%); + } + + 50% { + animation-timing-function: cubic-bezier(0, 0, .2, 1); + transform: none; + } +} + @property --tw-shadow { syntax: "*"; inherits: false; diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 9d35f62cc069..0fe26f6582b5 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -2,6 +2,9 @@ exports[`border-* 1`] = ` ":root, :host { + --radius-none: 0px; + --radius-full: 9999px; + --radius-sm: .125rem; --color-red-500: #ef4444; } @@ -124,6 +127,9 @@ exports[`border-* 1`] = ` exports[`border-b-* 1`] = ` ":root, :host { + --radius-none: 0px; + --radius-full: 9999px; + --radius-sm: .125rem; --color-red-500: #ef4444; } @@ -246,6 +252,9 @@ exports[`border-b-* 1`] = ` exports[`border-e-* 1`] = ` ":root, :host { + --radius-none: 0px; + --radius-full: 9999px; + --radius-sm: .125rem; --color-red-500: #ef4444; } @@ -368,6 +377,9 @@ exports[`border-e-* 1`] = ` exports[`border-l-* 1`] = ` ":root, :host { + --radius-none: 0px; + --radius-full: 9999px; + --radius-sm: .125rem; --color-red-500: #ef4444; } @@ -490,6 +502,9 @@ exports[`border-l-* 1`] = ` exports[`border-r-* 1`] = ` ":root, :host { + --radius-none: 0px; + --radius-full: 9999px; + --radius-sm: .125rem; --color-red-500: #ef4444; } @@ -612,6 +627,9 @@ exports[`border-r-* 1`] = ` exports[`border-s-* 1`] = ` ":root, :host { + --radius-none: 0px; + --radius-full: 9999px; + --radius-sm: .125rem; --color-red-500: #ef4444; } @@ -734,6 +752,9 @@ exports[`border-s-* 1`] = ` exports[`border-t-* 1`] = ` ":root, :host { + --radius-none: 0px; + --radius-full: 9999px; + --radius-sm: .125rem; --color-red-500: #ef4444; } @@ -856,6 +877,9 @@ exports[`border-t-* 1`] = ` exports[`border-x-* 1`] = ` ":root, :host { + --radius-none: 0px; + --radius-full: 9999px; + --radius-sm: .125rem; --color-red-500: #ef4444; } @@ -978,6 +1002,9 @@ exports[`border-x-* 1`] = ` exports[`border-y-* 1`] = ` ":root, :host { + --radius-none: 0px; + --radius-full: 9999px; + --radius-sm: .125rem; --color-red-500: #ef4444; } diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index 55b91ec394e0..eb18cd734f21 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -322,7 +322,11 @@ describe('theme callbacks', () => { expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose'])) .toMatchInlineSnapshot(` - ".prose { + ":root, :host { + --text-base: 100rem; + --text-md--line-height: 101rem; + } + .prose { [class~=lead-base] { font-size: 100rem; line-height: 201rem; @@ -558,7 +562,12 @@ describe('default font family compatibility', () => { }) expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(` - ".font-sans { + ":root, :host { + --default-font-family: Potato Sans; + --default-font-feature-settings: normal; + --default-font-variation-settings: normal; + } + .font-sans { font-family: Potato Sans; } " @@ -592,7 +601,12 @@ describe('default font family compatibility', () => { }) expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(` - ".font-sans { + ":root, :host { + --default-font-family: Potato Sans; + --default-font-feature-settings: "cv06"; + --default-font-variation-settings: normal; + } + .font-sans { font-family: Potato Sans; font-feature-settings: "cv06"; } @@ -627,7 +641,12 @@ describe('default font family compatibility', () => { }) expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(` - ".font-sans { + ":root, :host { + --default-font-family: Potato Sans; + --default-font-feature-settings: normal; + --default-font-variation-settings: "XHGT" 0.7; + } + .font-sans { font-family: Potato Sans; font-variation-settings: "XHGT" 0.7; } @@ -665,7 +684,12 @@ describe('default font family compatibility', () => { }) expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(` - ".font-sans { + ":root, :host { + --default-font-family: Potato Sans; + --default-font-feature-settings: "cv06"; + --default-font-variation-settings: "XHGT" 0.7; + } + .font-sans { font-family: Potato Sans; font-feature-settings: "cv06"; font-variation-settings: "XHGT" 0.7; @@ -705,6 +729,9 @@ describe('default font family compatibility', () => { expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(` ":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); --font-sans: Sandwich Sans; } .font-sans { @@ -741,7 +768,12 @@ describe('default font family compatibility', () => { }) expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(` - ".font-sans { + ":root, :host { + --default-font-family: Inter, system-ui, sans-serif; + --default-font-feature-settings: normal; + --default-font-variation-settings: normal; + } + .font-sans { font-family: Inter, system-ui, sans-serif; } " @@ -774,7 +806,14 @@ describe('default font family compatibility', () => { }), }) - expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`""`) + expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(` + ":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); + } + " + `) }) test('overriding `fontFamily.mono` sets `--default-mono-font-family`', async () => { @@ -802,7 +841,12 @@ describe('default font family compatibility', () => { }) expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(` - ".font-mono { + ":root, :host { + --default-mono-font-family: Potato Mono; + --default-mono-font-feature-settings: normal; + --default-mono-font-variation-settings: normal; + } + .font-mono { font-family: Potato Mono; } " @@ -836,7 +880,12 @@ describe('default font family compatibility', () => { }) expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(` - ".font-mono { + ":root, :host { + --default-mono-font-family: Potato Mono; + --default-mono-font-feature-settings: "cv06"; + --default-mono-font-variation-settings: normal; + } + .font-mono { font-family: Potato Mono; font-feature-settings: "cv06"; } @@ -871,7 +920,12 @@ describe('default font family compatibility', () => { }) expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(` - ".font-mono { + ":root, :host { + --default-mono-font-family: Potato Mono; + --default-mono-font-feature-settings: normal; + --default-mono-font-variation-settings: "XHGT" 0.7; + } + .font-mono { font-family: Potato Mono; font-variation-settings: "XHGT" 0.7; } @@ -909,7 +963,12 @@ describe('default font family compatibility', () => { }) expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(` - ".font-mono { + ":root, :host { + --default-mono-font-family: Potato Mono; + --default-mono-font-feature-settings: "cv06"; + --default-mono-font-variation-settings: "XHGT" 0.7; + } + .font-mono { font-family: Potato Mono; font-feature-settings: "cv06"; font-variation-settings: "XHGT" 0.7; @@ -949,6 +1008,9 @@ describe('default font family compatibility', () => { expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(` ":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); --font-mono: Sandwich Mono; } .font-mono { @@ -984,7 +1046,14 @@ describe('default font family compatibility', () => { }), }) - expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`""`) + expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(` + ":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); + } + " + `) }) }) @@ -1110,7 +1179,13 @@ test('merges css breakpoints with js config screens', async () => { expect(compiler.build(['sm:flex', 'md:flex', 'lg:flex', 'min-sm:max-md:underline'])) .toMatchInlineSnapshot(` - ".sm\\:flex { + ":root, :host { + --breakpoint-md: 50rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + } + .sm\\:flex { @media (width >= 44rem) { display: flex; } @@ -1258,7 +1333,12 @@ test('Prefixes configured in CSS take precedence over those defined in JS config ) expect(compiler.build(['wat:custom'])).toMatchInlineSnapshot(` - ".wat\\:custom { + ":root, :host { + --wat-color-red: #f00; + --wat-color-green: #0f0; + --wat-breakpoint-sm: 640px; + } + .wat\\:custom { color: red; } " diff --git a/packages/tailwindcss/src/compat/container-config.test.ts b/packages/tailwindcss/src/compat/container-config.test.ts index b5618de84135..e2b9a0ca591f 100644 --- a/packages/tailwindcss/src/compat/container-config.test.ts +++ b/packages/tailwindcss/src/compat/container-config.test.ts @@ -31,7 +31,14 @@ test('creates a custom utility to extend the built-in container', async () => { }) expect(compiler.build(['container'])).toMatchInlineSnapshot(` - ".container { + ":root, :host { + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + } + .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; @@ -89,7 +96,14 @@ test('allows padding to be defined at custom breakpoints', async () => { }) expect(compiler.build(['container'])).toMatchInlineSnapshot(` - ".container { + ":root, :host { + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + } + .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; @@ -150,7 +164,14 @@ test('allows breakpoints to be overwritten', async () => { }) expect(compiler.build(['container'])).toMatchInlineSnapshot(` - ".container { + ":root, :host { + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + } + .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; @@ -216,7 +237,14 @@ test('padding applies to custom `container` screens', async () => { }) expect(compiler.build(['container'])).toMatchInlineSnapshot(` - ".container { + ":root, :host { + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + } + .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; @@ -279,7 +307,14 @@ test("an empty `screen` config will undo all custom media screens and won't appl }) expect(compiler.build(['container'])).toMatchInlineSnapshot(` - ".container { + ":root, :host { + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + } + .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; @@ -345,7 +380,20 @@ test('legacy container component does not interfere with new --container variabl expect(compiler.build(['max-w-sm'])).toMatchInlineSnapshot(` ":root, :host { + --container-3xs: 16rem; + --container-2xs: 18rem; + --container-xs: 20rem; --container-sm: 24rem; + --container-md: 28rem; + --container-lg: 32rem; + --container-xl: 36rem; + --container-2xl: 42rem; + --container-3xl: 48rem; + --container-4xl: 56rem; + --container-5xl: 64rem; + --container-6xl: 72rem; + --container-7xl: 80rem; + --container-prose: 65ch; } .max-w-sm { max-width: var(--container-sm); @@ -390,7 +438,14 @@ test('combines custom padding and screen overwrites', async () => { }) expect(compiler.build(['container', '!container'])).toMatchInlineSnapshot(` - ".\\!container { + ":root, :host { + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + } + .\\!container { width: 100% !important; @media (width >= 40rem) { max-width: 40rem !important; @@ -502,7 +557,14 @@ test('filters out complex breakpoints', async () => { }) expect(compiler.build(['container'])).toMatchInlineSnapshot(` - ".container { + ":root, :host { + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + } + .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index 218a7eae1ea6..9eb65ccb954a 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -293,6 +293,9 @@ describe('theme', async () => { .variable { color: color-mix(in oklab, #ef4444 var(--opacity), transparent); } + :root, :host { + --color-red-500: #ef4444; + } " `) }) @@ -376,6 +379,9 @@ describe('theme', async () => { .js-variable { color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent); } + :root, :host { + --color-custom-css: rgba(255 0 0 / ); + } " `) }) @@ -1416,6 +1422,12 @@ describe('theme', async () => { .my-width-2\\.5 { width: 0.625rem; } + :root, :host { + --width-1: 0.25rem; + --width-1\\/2: 60%; + --width-1\\.5: 0.375rem; + --width-2_5: 0.625rem; + } " `) }) @@ -1467,6 +1479,12 @@ describe('theme', async () => { .my-width-2\\.5 { width: 0.625rem; } + :root, :host { + --width-1: 0.25rem; + --width-1\\/2: 60%; + --width-1\\.5: 0.375rem; + --width-2_5: 0.625rem; + } " `) }) diff --git a/packages/tailwindcss/src/compat/screens-config.test.ts b/packages/tailwindcss/src/compat/screens-config.test.ts index ac73d8216976..e8f96ee55fd3 100644 --- a/packages/tailwindcss/src/compat/screens-config.test.ts +++ b/packages/tailwindcss/src/compat/screens-config.test.ts @@ -46,7 +46,13 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => { 'print:items-end', ]), ).toMatchInlineSnapshot(` - ".max-w-screen-sm { + ":root, :host { + --breakpoint-md: 50rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + } + .max-w-screen-sm { max-width: 44rem; } .sm\\:flex { @@ -134,7 +140,10 @@ test('JS config `screens` extend CSS `--breakpoint-*`', async () => { 'print:items-end', ]), ).toMatchInlineSnapshot(` - ".min-xs\\:flex { + ":root, :host { + --breakpoint-md: 50rem; + } + .min-xs\\:flex { @media (width >= 30rem) { display: flex; } @@ -307,7 +316,14 @@ test('JS config `screens` overwrite CSS `--breakpoint-*`', async () => { 'print:items-end', ]), ).toMatchInlineSnapshot(` - ".mini\\:flex { + ":root, :host { + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + } + .mini\\:flex { @media (width >= 40rem) { display: flex; } @@ -568,7 +584,10 @@ describe('complex screen configs', () => { 'print:items-end', ]), ).toMatchInlineSnapshot(` - ".min-sm\\:flex { + ":root, :host { + --breakpoint-md: 48rem; + } + .min-sm\\:flex { @media (width >= 40rem) { display: flex; } diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 371531c41236..d90311b99547 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -94,7 +94,11 @@ describe('--spacing(…)', () => { } `), ).toMatchInlineSnapshot(` - ".foo { + ":root, :host { + --spacing: .25rem; + } + + .foo { margin: 1rem; }" `) @@ -153,7 +157,11 @@ describe('--theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: red; }" `) @@ -189,7 +197,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: red; }" `) @@ -206,7 +218,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: red; }" `) @@ -223,7 +239,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: red; }" `) @@ -240,7 +260,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: red; }" `) @@ -257,7 +281,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: red; }" `) @@ -274,7 +302,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: red; }" `) @@ -291,7 +323,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: oklab(62.7955% .22486 .12584 / .75); }" `) @@ -308,7 +344,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: oklab(62.7955% .22486 .12584 / .75); }" `) @@ -325,7 +365,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: oklab(62.7955% .22486 .12584 / .75); }" `) @@ -342,7 +386,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: color-mix(in oklab, red var(--opacity), transparent); }" `) @@ -360,7 +408,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: color-mix(in oklab, red var(--opacity, 50%), transparent); }" `) @@ -377,7 +429,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".space-on-the-left { + ":root, :host { + --spacing-12: 3rem; + } + + .space-on-the-left { margin-left: 3rem; }" `) @@ -394,7 +450,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".space-on-the-left { + ":root, :host { + --spacing-2_5: .625rem; + } + + .space-on-the-left { margin-left: .625rem; }" `) @@ -411,7 +471,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".space-on-the-left { + ":root, :host { + --spacing-2_5: .625rem; + } + + .space-on-the-left { margin-left: calc(100vh - .625rem); }" `) @@ -428,7 +492,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".radius { + ":root, :host { + --radius-lg: .5rem; + } + + .radius { border-radius: .5rem; }" `) @@ -446,7 +514,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".default-blur { + ":root, :host { + --blur: 8px; + } + + .default-blur { filter: blur(8px); }" `) @@ -465,7 +537,12 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".text { + ":root, :host { + --text-xs: 1337.75rem; + --text-xs--line-height: 1337rem; + } + + .text { font-size: 1337.75rem; line-height: 1337rem; }" @@ -550,7 +627,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: oklab(62.7955% .22486 .12584 / .25); }" `) @@ -604,7 +685,12 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + --color-foo: red; + } + + .red { color: red; }" `) @@ -622,7 +708,12 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + --color-foo: oklab(62.7955% .22486 .12584 / .5); + } + + .red { color: oklab(62.7955% .22486 .12584 / .25); }" `) @@ -641,7 +732,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: red; }" `) @@ -658,7 +753,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: oklab(62.7955% .22486 .12584 / .5); }" `) @@ -675,7 +774,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: red; }" `) @@ -694,7 +797,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".blur { + ":root, :host { + --blur: 8px; + } + + .blur { filter: blur(8px); }" `) @@ -753,6 +860,11 @@ describe('theme(…)', () => { .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] { --color: red; } + } + + :root, :host { + --breakpoint-sm: 40rem; + --color-red-500: red; }" `) }) @@ -810,7 +922,12 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) and (width <= 64rem) { + ":root, :host { + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + } + + @media (width >= 48rem) and (width <= 64rem) { .red { color: red; } @@ -832,7 +949,12 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) and (width < 64rem) { + ":root, :host { + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + } + + @media (width >= 48rem) and (width < 64rem) { .red { color: red; } @@ -855,7 +977,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) { + ":root, :host { + --breakpoint-md: 48rem; + } + + @media (width >= 48rem) { .red { color: red; } @@ -876,7 +1002,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@container (width > 48rem) { + ":root, :host { + --breakpoint-md: 48rem; + } + + @container (width > 48rem) { .red { color: red; } @@ -897,7 +1027,11 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (text-stroke: 0.75rem) { + ":root, :host { + --font-size-xs: .75rem; + } + + @supports (text-stroke: 0.75rem) { .red { color: red; } @@ -1054,7 +1188,11 @@ test('replaces CSS theme() function with values inside imported stylesheets', as }, ), ).toMatchInlineSnapshot(` - ".red { + ":root, :host { + --color-red-500: red; + } + + .red { color: red; }" `) @@ -1075,7 +1213,11 @@ test('resolves paths ending with a 1', async () => { [], ), ).toMatchInlineSnapshot(` - ".foo { + ":root, :host { + --spacing-1: .25rem; + } + + .foo { margin: .25rem; }" `) diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index f7c2084d6995..8478cc39ed29 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -27,6 +27,7 @@ describe('compiling CSS', () => { ).toMatchInlineSnapshot(` ":root, :host { --color-black: #000; + --breakpoint-md: 768px; } @layer utilities { @@ -172,6 +173,7 @@ describe('compiling CSS', () => { --spacing-1\\.5: 1.5px; --spacing-2_5: 2.5px; --spacing-3\\.5: 3.5px; + --spacing-3_5: 3.5px; --spacing-foo\\/bar: 3rem; } @@ -292,6 +294,7 @@ describe('@apply', () => { --color-blue-500: #3b82f6; --color-green-200: #bbf7d0; --color-green-500: #22c55e; + --breakpoint-md: 768px; --animate-spin: spin 1s linear infinite; } @@ -1147,6 +1150,7 @@ describe('Parsing themes values from CSS', () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red: red; + --animate-foo: foo 1s infinite; --text-lg: 20px; } @@ -1156,6 +1160,12 @@ describe('Parsing themes values from CSS', () => { .accent-red { accent-color: var(--color-red); + } + + @keyframes foo { + to { + opacity: 1; + } }" `) }) @@ -1242,6 +1252,12 @@ describe('Parsing themes values from CSS', () => { .accent-green { accent-color: var(--color-green); + } + + @keyframes spin { + to { + transform: rotate(360deg); + } }" `) }) @@ -1289,6 +1305,12 @@ describe('Parsing themes values from CSS', () => { .accent-green { accent-color: var(--color-green); + } + + @keyframes spin { + to { + transform: rotate(360deg); + } }" `) }) @@ -1382,6 +1404,7 @@ describe('Parsing themes values from CSS', () => { ), ).toMatchInlineSnapshot(` ":root, :host { + --inset-shadow-sm: inset 0 2px 4px #0000000d; --inset-md: 50px; } @@ -1564,6 +1587,12 @@ describe('Parsing themes values from CSS', () => { animation: var(--animate-foobar); } + @keyframes foo { + to { + opacity: 1; + } + } + @keyframes foobar { to { opacity: 0; @@ -1600,6 +1629,7 @@ describe('Parsing themes values from CSS', () => { ).toMatchInlineSnapshot(` ":root, :host { --animate-foo: used 1s infinite; + --animate-bar: unused 1s infinite; } .animate-foo { @@ -1610,6 +1640,12 @@ describe('Parsing themes values from CSS', () => { to { opacity: 1; } + } + + @keyframes unused { + to { + opacity: 0; + } }" `) }) @@ -1640,7 +1676,12 @@ describe('Parsing themes values from CSS', () => { ['animate-foo'], ), ).toMatchInlineSnapshot(` - ".animate-foo { + ":root, :host { + --animate-foo: used 1s infinite; + --animate-bar: unused 1s infinite; + } + + .animate-foo { animation: 1s infinite used; } @@ -1648,6 +1689,12 @@ describe('Parsing themes values from CSS', () => { to { opacity: 1; } + } + + @keyframes unused { + to { + opacity: 0; + } }" `) }) @@ -1736,6 +1783,12 @@ describe('Parsing themes values from CSS', () => { to { opacity: 1; } + } + + @keyframes unused { + to { + opacity: 0; + } }" `) }) @@ -2000,7 +2053,13 @@ describe('Parsing themes values from CSS', () => { ['bg-tomato', 'bg-potato', 'bg-primary'], ), ).toMatchInlineSnapshot(` - ".bg-potato { + ":root, :host { + --color-tomato: #e10c04; + --color-potato: #ac855b; + --color-primary: var(--primary); + } + + .bg-potato { background-color: #ac855b; } @@ -2058,7 +2117,13 @@ describe('Parsing themes values from CSS', () => { ['bg-tomato', 'bg-potato', 'bg-primary'], ), ).toMatchInlineSnapshot(` - ".bg-potato { + ":root, :host { + --color-tomato: #e10c04; + --color-potato: #ac855b; + --color-primary: var(--primary); + } + + .bg-potato { background-color: #ac855b; } @@ -2171,7 +2236,11 @@ describe('Parsing themes values from CSS', () => { ['bg-potato'], ), ).toMatchInlineSnapshot(` - ".bg-potato { + ":root, :host { + --color-potato: #efb46b; + } + + .bg-potato { background-color: #efb46b; }" `) diff --git a/packages/tailwindcss/src/prefix.test.ts b/packages/tailwindcss/src/prefix.test.ts index 020575ce2f87..8fb0eec6a48f 100644 --- a/packages/tailwindcss/src/prefix.test.ts +++ b/packages/tailwindcss/src/prefix.test.ts @@ -108,6 +108,8 @@ test('CSS variables output by the theme are prefixed', async () => { expect(compiler.build(['tw:text-red'])).toMatchInlineSnapshot(` ":root, :host { --tw-color-red: #f00; + --tw-color-green: #0f0; + --tw-breakpoint-sm: 640px; } .tw\\:text-red { color: var(--tw-color-red); @@ -129,7 +131,12 @@ test('CSS theme functions do not use the prefix', async () => { expect(compiler.build(['tw:[color:theme(--color-red)]', 'tw:text-[theme(--color-red)]'])) .toMatchInlineSnapshot(` - ".tw\\:\\[color\\:theme\\(--color-red\\)\\] { + ":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\\)\\] { @@ -186,7 +193,12 @@ test('JS theme functions do not use the prefix', async () => { ) expect(compiler.build(['tw:my-custom'])).toMatchInlineSnapshot(` - ".tw\\:my-custom { + ":root, :host { + --tw-color-red: #f00; + --tw-color-green: #0f0; + --tw-breakpoint-sm: 640px; + } + .tw\\:my-custom { color: #f00; } " @@ -325,7 +337,12 @@ test('a prefix can be configured via @import prefix(…)', async () => { }, }) - expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(`""`) + expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(` + ":root, :host { + --tw-color-potato: #7a4724; + } + " + `) }) test('a prefix must be letters only', async () => { diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index f02908c21777..bb3d4f2a0f28 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -147,6 +147,7 @@ test('inset', async () => { ).toMatchInlineSnapshot(` ":root, :host { --spacing-4: 1rem; + --inset-shadow-sm: inset 0 1px 1px #0000000d; --inset-shadowned: 1940px; } @@ -3161,6 +3162,10 @@ describe('container', () => { ).toMatchInlineSnapshot(` ":root, :host { --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; } .container { @@ -3300,6 +3305,10 @@ describe('container', () => { ).toMatchInlineSnapshot(` ":root, :host { --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; } .container { @@ -4036,7 +4045,11 @@ test('translate-x', async () => { ['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ".-translate-x-\\[var\\(--value\\)\\] { + ":root, :host { + --spacing: .25rem; + } + + .-translate-x-\\[var\\(--value\\)\\] { --tw-translate-x: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } @@ -4160,7 +4173,11 @@ test('translate-y', async () => { ['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[var(--value)]'], ), ).toMatchInlineSnapshot(` - ".-translate-y-\\[var\\(--value\\)\\] { + ":root, :host { + --spacing: .25rem; + } + + .-translate-y-\\[var\\(--value\\)\\] { --tw-translate-y: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } @@ -7717,7 +7734,11 @@ test('divide-x with custom default border width', async () => { ['divide-x'], ), ).toMatchInlineSnapshot(` - ":where(.divide-x > :not(:last-child)) { + ":root, :host { + --default-border-width: 2px; + } + + :where(.divide-x > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(2px * var(--tw-divide-x-reverse)); @@ -7819,7 +7840,11 @@ test('divide-y with custom default border width', async () => { ['divide-y'], ), ).toMatchInlineSnapshot(` - ":where(.divide-y > :not(:last-child)) { + ":root, :host { + --default-border-width: 2px; + } + + :where(.divide-y > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); @@ -9905,7 +9930,11 @@ test('border with custom default border width', async () => { ['border'], ), ).toMatchInlineSnapshot(` - ".border { + ":root, :host { + --default-border-width: 2px; + } + + .border { border-style: var(--tw-border-style); border-width: 2px; } @@ -13844,6 +13873,7 @@ test('transition', async () => { ":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; --transition-property-opacity: opacity; } @@ -13909,7 +13939,12 @@ test('transition', async () => { ['transition', 'transition-all', 'transition-colors'], ), ).toMatchInlineSnapshot(` - ".transition { + ":root, :host { + --default-transition-timing-function: ease; + --default-transition-duration: .1s; + } + + .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--tw-ease, ease); transition-duration: var(--tw-duration, .1s); @@ -15195,6 +15230,8 @@ test('shadow', async () => { ).toMatchInlineSnapshot(` ":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; } .shadow-\\[10px_10px\\] { @@ -15417,6 +15454,8 @@ test('inset-shadow', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --inset-shadow: inset 0 2px 4px #0000000d; + --inset-shadow-sm: inset 0 1px 1px #0000000d; } .inset-shadow { @@ -16407,6 +16446,7 @@ describe('spacing utilities', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` ":root, :host { --spacing-sm: 8px; + --container-sm: 256px; } .w-sm { @@ -16480,7 +16520,13 @@ describe('custom utilities', () => { let compiled = build([]) // `foo` is not used yet: - expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`"@layer utilities;"`) + expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` + "@layer utilities; + + :root, :host { + --example-foo: 123px; + }" + `) // `foo` is used, and the CSS variable is emitted: compiled = build(['foo']) @@ -17664,7 +17710,12 @@ describe('custom utilities', () => { ` expect(await compileCss(input, ['flex'])).toMatchInlineSnapshot(` - ".flex { + ":root, :host { + --example-foo: red; + --color-red-500: red; + } + + .flex { display: flex; }" `) @@ -17757,7 +17808,11 @@ describe('custom utilities', () => { ` expect(await compileCss(input, ['tab-github'])).toMatchInlineSnapshot(` - ".tab-github { + ":root, :host { + --tab-size-github: 8; + } + + .tab-github { tab-size: 8; }" `) diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 8348f940063b..be374dbd9196 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -747,7 +747,15 @@ test('default breakpoints', async () => { ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 640px) { + ":root, :host { + --breakpoint-sm: 640px; + --breakpoint-md: 768px; + --breakpoint-lg: 1024px; + --breakpoint-xl: 1280px; + --breakpoint-2xl: 1536px; + } + + @media (width >= 640px) { .sm\\:flex { display: flex; } @@ -807,7 +815,11 @@ test('custom breakpoint', async () => { ['10xl:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 5000px) { + ":root, :host { + --breakpoint-10xl: 5000px; + } + + @media (width >= 5000px) { .\\31 0xl\\:flex { display: flex; } @@ -830,7 +842,13 @@ test('max-*', async () => { ['max-lg:flex', 'max-sm:flex', 'max-md:flex'], ), ).toMatchInlineSnapshot(` - "@media (width < 1024px) { + ":root, :host { + --breakpoint-sm: 640px; + --breakpoint-lg: 1024px; + --breakpoint-md: 768px; + } + + @media (width < 1024px) { .max-lg\\:flex { display: flex; } @@ -879,7 +897,13 @@ test('min-*', async () => { ['min-lg:flex', 'min-sm:flex', 'min-md:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 640px) { + ":root, :host { + --breakpoint-sm: 640px; + --breakpoint-lg: 1024px; + --breakpoint-md: 768px; + } + + @media (width >= 640px) { .min-sm\\:flex { display: flex; } @@ -930,7 +954,15 @@ 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(` - "@media (width >= 280px) { + ":root, :host { + --breakpoint-sm: 640px; + --breakpoint-lg: 1024px; + --breakpoint-md: 768px; + --breakpoint-xl: 1280px; + --breakpoint-xs: 280px; + } + + @media (width >= 280px) { @media (width < 640px) { .min-xs\\:max-sm\\:flex { display: flex; @@ -977,7 +1009,13 @@ 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(` - "@media (width >= 640px) { + ":root, :host { + --breakpoint-sm: 640px; + --breakpoint-lg: 1024px; + --breakpoint-md: 768px; + } + + @media (width >= 640px) { .sm\\:flex { display: flex; } @@ -1033,7 +1071,13 @@ test('min, max and unprefixed breakpoints', async () => { ], ), ).toMatchInlineSnapshot(` - "@media (width < 1024px) { + ":root, :host { + --breakpoint-sm: 640px; + --breakpoint-lg: 1024px; + --breakpoint-md: 768px; + } + + @media (width < 1024px) { .max-lg\\:flex { display: flex; } @@ -1412,7 +1456,11 @@ test('not', async () => { ], ), ).toMatchInlineSnapshot(` - ".not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target) { + ":root, :host { + --breakpoint-sm: 640px; + } + + .not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target) { display: flex; } @@ -1954,7 +2002,11 @@ test('container queries', async () => { ], ), ).toMatchInlineSnapshot(` - "@container name (width < 1024px) { + ":root, :host { + --container-lg: 1024px; + } + + @container name (width < 1024px) { .\\@max-lg\\/name\\:flex { display: flex; } @@ -2106,7 +2158,15 @@ test('variant order', async () => { ], ), ).toMatchInlineSnapshot(` - "@media (hover: hover) { + ":root, :host { + --breakpoint-sm: 640px; + --breakpoint-md: 768px; + --breakpoint-lg: 1024px; + --breakpoint-xl: 1280px; + --breakpoint-2xl: 1536px; + } + + @media (hover: hover) { .group-hover\\:flex:is(:where(.group):hover *), .peer-hover\\:flex:is(:where(.peer):hover ~ *) { display: flex; } From 389de339880887ecff22d182044458154c8dc223 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 10 Feb 2025 13:15:04 +0100 Subject: [PATCH 4/4] update snapshots in CLI integration test --- integrations/cli/index.test.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts index 2eee0413dc4f..6f48e9f9c77c 100644 --- a/integrations/cli/index.test.ts +++ b/integrations/cli/index.test.ts @@ -1289,7 +1289,9 @@ test( expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(` " --- ./dist/out.css --- - + :root, :host { + --color-blue-500: blue; + } " `)