From bf2e96163bc2d2e0eb301874d2bcde28c36241d6 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 26 Mar 2025 10:41:56 +0100 Subject: [PATCH 1/2] WIP --- .../src/commands/build/index.ts | 2 +- .../src/__snapshots__/index.test.ts.snap | 12 +- .../@tailwindcss-postcss/src/index.test.ts | 2 +- packages/@tailwindcss-postcss/src/index.ts | 12 +- packages/@tailwindcss-vite/src/index.ts | 2 +- .../src/__snapshots__/index.test.ts.snap | 10 +- .../src/__snapshots__/utilities.test.ts.snap | 162 +++-- packages/tailwindcss/src/ast.ts | 46 ++ .../tailwindcss/src/compat/plugin-api.test.ts | 66 +- .../tailwindcss/src/css-functions.test.ts | 71 ++- packages/tailwindcss/src/index.test.ts | 44 +- packages/tailwindcss/src/test-utils/run.ts | 2 +- packages/tailwindcss/src/utilities.test.ts | 563 ++++++++++++++---- packages/tailwindcss/theme.css | 526 ++++++++-------- 14 files changed, 1028 insertions(+), 492 deletions(-) diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index 8eb60d90286b..72310574f639 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -446,7 +446,7 @@ function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: Features.Nesting, + include: Features.Nesting | Features.MediaQueries, exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark, targets: { safari: (16 << 16) | (4 << 8), diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 12b578d4423f..e9a830210478 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -164,8 +164,10 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { - ::placeholder { - color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + ::placeholder { + color: color-mix(in oklab, currentColor 50%, transparent); + } } } @@ -259,8 +261,10 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` line-height: var(--tw-leading, var(--text-2xl--line-height)); } - .text-black\\/50 { - color: color-mix(in oklab, var(--color-black) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .text-black\\/50 { + color: color-mix(in oklab, var(--color-black) 50%, transparent); + } } .underline { diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index fa9d5abbb3d4..af7743ec66e5 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -100,7 +100,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () = expect(result.css.trim()).toMatchInlineSnapshot(` ".foo { - color: var(--color-red-500, oklch(.637 .237 25.331)); + color: var(--color-red-500, oklch(63.7% .237 25.331)); }" `) }) diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index d8ef557767a8..b5214668de47 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -52,6 +52,7 @@ export type PluginOptions = { function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { let base = opts.base ?? process.cwd() let optimize = opts.optimize ?? process.env.NODE_ENV === 'production' + console.log({ opts, flag: process.env.NODE_ENV }) return { postcssPlugin: '@tailwindcss/postcss', @@ -319,13 +320,13 @@ function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: LightningCssFeatures.Nesting, + include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaRangeSyntax, exclude: LightningCssFeatures.LogicalProperties | LightningCssFeatures.DirSelector | LightningCssFeatures.LightDark, targets: { - safari: (16 << 16) | (4 << 8), + safari: (15 << 16) | (4 << 8), ios_saf: (16 << 16) | (4 << 8), firefox: 128 << 16, chrome: 111 << 16, @@ -334,9 +335,14 @@ function optimizeCss( }).code } + let out = optimize(optimize(Buffer.from(input))).toString() + console.log({ out }) + + out = out.replaceAll(/\@media (\()?not /g, '@media $1not all and ') + // Running Lightning CSS twice to ensure that adjacent rules are merged after // nesting is applied. This creates a more optimized output. - return optimize(optimize(Buffer.from(input))).toString() + return out } export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index de6b2cde33cd..0e7ec80f6e42 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -143,7 +143,7 @@ function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: LightningCssFeatures.Nesting, + include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaQueries, exclude: LightningCssFeatures.LogicalProperties | LightningCssFeatures.DirSelector | diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 049d0f33ed33..d45be4c184ac 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -2,7 +2,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = ` ":root, :host { - --color-red-500: oklch(.637 .237 25.331); + --color-red-500: oklch(63.7% .237 25.331); --spacing: .25rem; } @@ -254,7 +254,13 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = ` @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { - color: color-mix(in oklab, currentColor 50%, transparent); + color: currentColor; + } + + @supports (color: color-mix(in srgb, red 50%, green)) { + ::placeholder { + color: color-mix(in oklab, currentColor 50%, transparent); + } } } diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 5f1c2fea3f54..7e4ddc544496 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -79,8 +79,10 @@ exports[`border-* 1`] = ` border-color: #08c; } -.border-\\[\\#0088cc\\]\\/50 { - border-color: oklab(59.9824% -.06725 -.12414 / .5); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-\\[\\#0088cc\\]\\/50 { + border-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .border-\\[color\\:var\\(--my-color\\)\\] { @@ -103,8 +105,10 @@ exports[`border-* 1`] = ` border-color: currentColor; } -.border-current\\/50 { - border-color: color-mix(in oklab, currentColor 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-current\\/50 { + border-color: color-mix(in oklab, currentColor 50%, transparent); + } } .border-inherit { @@ -127,8 +131,10 @@ exports[`border-* 1`] = ` border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -.border-red-500\\/50 { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-red-500\\/50 { + border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .border-transparent { @@ -221,8 +227,10 @@ exports[`border-b-* 1`] = ` border-bottom-color: #08c; } -.border-b-\\[\\#0088cc\\]\\/50 { - border-bottom-color: oklab(59.9824% -.06725 -.12414 / .5); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-b-\\[\\#0088cc\\]\\/50 { + border-bottom-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .border-b-\\[color\\:var\\(--my-color\\)\\] { @@ -245,8 +253,10 @@ exports[`border-b-* 1`] = ` border-bottom-color: currentColor; } -.border-b-current\\/50 { - border-bottom-color: color-mix(in oklab, currentColor 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-b-current\\/50 { + border-bottom-color: color-mix(in oklab, currentColor 50%, transparent); + } } .border-b-inherit { @@ -269,8 +279,10 @@ exports[`border-b-* 1`] = ` border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -.border-b-red-500\\/50 { - border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-b-red-500\\/50 { + border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .border-b-transparent { @@ -363,8 +375,10 @@ exports[`border-e-* 1`] = ` border-inline-end-color: #08c; } -.border-e-\\[\\#0088cc\\]\\/50 { - border-inline-end-color: oklab(59.9824% -.06725 -.12414 / .5); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-e-\\[\\#0088cc\\]\\/50 { + border-inline-end-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .border-e-\\[color\\:var\\(--my-color\\)\\] { @@ -387,8 +401,10 @@ exports[`border-e-* 1`] = ` border-inline-end-color: currentColor; } -.border-e-current\\/50 { - border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-e-current\\/50 { + border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent); + } } .border-e-inherit { @@ -411,8 +427,10 @@ exports[`border-e-* 1`] = ` border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -.border-e-red-500\\/50 { - border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-e-red-500\\/50 { + border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .border-e-transparent { @@ -505,8 +523,10 @@ exports[`border-l-* 1`] = ` border-left-color: #08c; } -.border-l-\\[\\#0088cc\\]\\/50 { - border-left-color: oklab(59.9824% -.06725 -.12414 / .5); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-l-\\[\\#0088cc\\]\\/50 { + border-left-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .border-l-\\[color\\:var\\(--my-color\\)\\] { @@ -529,8 +549,10 @@ exports[`border-l-* 1`] = ` border-left-color: currentColor; } -.border-l-current\\/50 { - border-left-color: color-mix(in oklab, currentColor 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-l-current\\/50 { + border-left-color: color-mix(in oklab, currentColor 50%, transparent); + } } .border-l-inherit { @@ -553,8 +575,10 @@ exports[`border-l-* 1`] = ` border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -.border-l-red-500\\/50 { - border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-l-red-500\\/50 { + border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .border-l-transparent { @@ -647,8 +671,10 @@ exports[`border-r-* 1`] = ` border-right-color: #08c; } -.border-r-\\[\\#0088cc\\]\\/50 { - border-right-color: oklab(59.9824% -.06725 -.12414 / .5); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-r-\\[\\#0088cc\\]\\/50 { + border-right-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .border-r-\\[color\\:var\\(--my-color\\)\\] { @@ -671,8 +697,10 @@ exports[`border-r-* 1`] = ` border-right-color: currentColor; } -.border-r-current\\/50 { - border-right-color: color-mix(in oklab, currentColor 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-r-current\\/50 { + border-right-color: color-mix(in oklab, currentColor 50%, transparent); + } } .border-r-inherit { @@ -695,8 +723,10 @@ exports[`border-r-* 1`] = ` border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -.border-r-red-500\\/50 { - border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-r-red-500\\/50 { + border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .border-r-transparent { @@ -789,8 +819,10 @@ exports[`border-s-* 1`] = ` border-inline-start-color: #08c; } -.border-s-\\[\\#0088cc\\]\\/50 { - border-inline-start-color: oklab(59.9824% -.06725 -.12414 / .5); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-s-\\[\\#0088cc\\]\\/50 { + border-inline-start-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .border-s-\\[color\\:var\\(--my-color\\)\\] { @@ -813,8 +845,10 @@ exports[`border-s-* 1`] = ` border-inline-start-color: currentColor; } -.border-s-current\\/50 { - border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-s-current\\/50 { + border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent); + } } .border-s-inherit { @@ -837,8 +871,10 @@ exports[`border-s-* 1`] = ` border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -.border-s-red-500\\/50 { - border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-s-red-500\\/50 { + border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .border-s-transparent { @@ -931,8 +967,10 @@ exports[`border-t-* 1`] = ` border-top-color: #08c; } -.border-t-\\[\\#0088cc\\]\\/50 { - border-top-color: oklab(59.9824% -.06725 -.12414 / .5); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-t-\\[\\#0088cc\\]\\/50 { + border-top-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .border-t-\\[color\\:var\\(--my-color\\)\\] { @@ -955,8 +993,10 @@ exports[`border-t-* 1`] = ` border-top-color: currentColor; } -.border-t-current\\/50 { - border-top-color: color-mix(in oklab, currentColor 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-t-current\\/50 { + border-top-color: color-mix(in oklab, currentColor 50%, transparent); + } } .border-t-inherit { @@ -979,8 +1019,10 @@ exports[`border-t-* 1`] = ` border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -.border-t-red-500\\/50 { - border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-t-red-500\\/50 { + border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .border-t-transparent { @@ -1073,8 +1115,10 @@ exports[`border-x-* 1`] = ` border-inline-color: #08c; } -.border-x-\\[\\#0088cc\\]\\/50 { - border-inline-color: oklab(59.9824% -.06725 -.12414 / .5); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-x-\\[\\#0088cc\\]\\/50 { + border-inline-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .border-x-\\[color\\:var\\(--my-color\\)\\] { @@ -1097,8 +1141,10 @@ exports[`border-x-* 1`] = ` border-inline-color: currentColor; } -.border-x-current\\/50 { - border-inline-color: color-mix(in oklab, currentColor 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-x-current\\/50 { + border-inline-color: color-mix(in oklab, currentColor 50%, transparent); + } } .border-x-inherit { @@ -1121,8 +1167,10 @@ exports[`border-x-* 1`] = ` border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -.border-x-red-500\\/50 { - border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-x-red-500\\/50 { + border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .border-x-transparent { @@ -1215,8 +1263,10 @@ exports[`border-y-* 1`] = ` border-block-color: #08c; } -.border-y-\\[\\#0088cc\\]\\/50 { - border-block-color: oklab(59.9824% -.06725 -.12414 / .5); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-y-\\[\\#0088cc\\]\\/50 { + border-block-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .border-y-\\[color\\:var\\(--my-color\\)\\] { @@ -1239,8 +1289,10 @@ exports[`border-y-* 1`] = ` border-block-color: currentColor; } -.border-y-current\\/50 { - border-block-color: color-mix(in oklab, currentColor 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-y-current\\/50 { + border-block-color: color-mix(in oklab, currentColor 50%, transparent); + } } .border-y-inherit { @@ -1263,8 +1315,10 @@ exports[`border-y-* 1`] = ` border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -.border-y-red-500\\/50 { - border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); +@supports (color: color-mix(in srgb, red 0%, red)) { + .border-y-red-500\\/50 { + border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .border-y-transparent { diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index e13e19743209..21284724121c 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -2,7 +2,9 @@ import { parseAtRule } from './css-parser' import type { DesignSystem } from './design-system' import { Theme, ThemeOptions } from './theme' import { DefaultMap } from './utils/default-map' +import { segment } from './utils/segment' import { extractUsedVariables } from './utils/variables' +import * as ValueParser from './value-parser' const AT_SIGN = 0x40 @@ -314,6 +316,50 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) { usedKeyframeNames.add(keyframeName) } + // "Polyfill" `color-mix(…)` + if (node.value.includes('color-mix(')) { + let ast = ValueParser.parse(node.value) + let didGenerateFallback = false + ValueParser.walk(ast, (node, { replaceWith }) => { + if (node.kind === 'function' && node.value === 'color-mix') { + let args = ValueParser.toCss(node.nodes) + let match = args.match(/in \w+, (.+) ?(\d+%), transparent/) + if (match) { + let color = match[1] + let percentage = match[2] + + if (color.startsWith('var(')) { + let name = segment(color.slice(4, -1), ',')[0] + if (!name) return + let resolved = designSystem.theme.resolveValue(null, [name as any]) + if (!resolved) return + color = resolved + } + + if ( + (color.startsWith('oklch(') || + color.startsWith('oklab(') || + color.startsWith('lab(') || + color.startsWith('lch(')) && + color.endsWith(')') + ) { + let fallback = `${color.slice(0, -1)} / ${percentage})` + didGenerateFallback = true + replaceWith({ kind: 'word', value: fallback }) + } + } + } + }) + + if (didGenerateFallback) { + let fallback = { ...node, value: ValueParser.toCss(ast) } + let colorMixQuery = rule('@supports (color: color-mix(in srgb, red 0%, red))', [node]) + + parent.push(fallback, colorMixQuery) + return + } + } + parent.push(node) } diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index b786f2311e28..210b3da4b654 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -285,10 +285,16 @@ describe('theme', async () => { expect(compiler.build(['percentage', 'fraction', 'variable'])).toMatchInlineSnapshot(` ".fraction { - color: color-mix(in oklab, #ef4444 50%, transparent); + color: #ef444 / 50%); + @supports (color: color-mix(in srgb, red 0%, red)) { + color: color-mix(in oklab, #ef4444 50%, transparent); + } } .percentage { - color: color-mix(in oklab, #ef4444 50%, transparent); + color: #ef444 / 50%); + @supports (color: color-mix(in srgb, red 0%, red)) { + color: color-mix(in oklab, #ef4444 50%, transparent); + } } .variable { color: color-mix(in oklab, #ef4444 var(--opacity), transparent); @@ -359,19 +365,31 @@ describe('theme', async () => { ]), ).toMatchInlineSnapshot(` ".css-fraction { - color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); + color: rgba(255 0 0 / / 50%); + @supports (color: color-mix(in srgb, red 0%, red)) { + color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); + } } .css-percentage { - color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); + color: rgba(255 0 0 / / 50%); + @supports (color: color-mix(in srgb, red 0%, red)) { + color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); + } } .css-variable { color: color-mix(in oklab, rgba(255 0 0 / ) var(--opacity), transparent); } .js-fraction { - color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); + color: rgb(255 0 0 / 1 / 50%); + @supports (color: color-mix(in srgb, red 0%, red)) { + color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); + } } .js-percentage { - color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); + color: rgb(255 0 0 / 1 / 50%); + @supports (color: color-mix(in srgb, red 0%, red)) { + color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); + } } .js-variable { color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent); @@ -3578,8 +3596,10 @@ describe('matchUtilities()', () => { scrollbar-color: #08c; } - .scrollbar-\\[\\#08c\\]\\/50 { - scrollbar-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .scrollbar-\\[\\#08c\\]\\/50 { + scrollbar-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .scrollbar-\\[2px\\] { @@ -3741,8 +3761,10 @@ describe('matchUtilities()', () => { scrollbar-color: #fff; } - .scrollbar-\\[\\#fff\\]\\/50 { - scrollbar-color: oklab(100% 0 5.96046e-8 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .scrollbar-\\[\\#fff\\]\\/50 { + scrollbar-color: oklab(100% 0 5.96046e-8 / .5); + } } .scrollbar-\\[2px\\] { @@ -3773,8 +3795,10 @@ describe('matchUtilities()', () => { scrollbar-color: black; } - .scrollbar-black\\/50 { - scrollbar-color: oklab(0% none none / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .scrollbar-black\\/50 { + scrollbar-color: oklab(0% none none / .5); + } }" `) @@ -3847,20 +3871,24 @@ describe('matchUtilities()', () => { scrollbar-color: black; } - .scrollbar-black\\/33 { - scrollbar-color: oklab(0% none none / .33); - } + @supports (color: color-mix(in srgb, red 0%, red)) { + .scrollbar-black\\/33 { + scrollbar-color: oklab(0% none none / .33); + } - .scrollbar-black\\/\\[50\\%\\] { - scrollbar-color: oklab(0% none none / .5); + .scrollbar-black\\/\\[50\\%\\] { + scrollbar-color: oklab(0% none none / .5); + } } .scrollbar-current { scrollbar-color: currentColor; } - .scrollbar-current\\/45 { - scrollbar-color: color-mix(in oklab, currentColor 45%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .scrollbar-current\\/45 { + scrollbar-color: color-mix(in oklab, currentColor 45%, transparent); + } }" `) }) diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 29e09d7d83c6..cb0d04793082 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -16,8 +16,10 @@ describe('--alpha(…)', () => { } `), ).toMatchInlineSnapshot(` - ".foo { - margin: oklab(62.7955% .22486 .12584 / .5); + "@supports (color: color-mix(in srgb, red 0%, red)) { + .foo { + margin: oklab(62.7955% .22486 .12584 / .5); + } }" `) }) @@ -195,8 +197,10 @@ describe('--theme(…)', () => { --color-red-500: red; } - .red { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .red { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } }" `) }) @@ -212,8 +216,10 @@ describe('--theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { - color: oklab(62.7955% .224863 .125846); + "@supports (color: color-mix(in srgb, red 0%, red)) { + .red { + color: oklab(62.7955% .224863 .125846); + } }" `) }) @@ -502,8 +508,10 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { - color: oklab(62.7955% .22486 .12584 / .75); + "@supports (color: color-mix(in srgb, red 0%, red)) { + .red { + color: oklab(62.7955% .22486 .12584 / .75); + } }" `) }) @@ -519,8 +527,10 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { - color: oklab(62.7955% .22486 .12584 / .75); + "@supports (color: color-mix(in srgb, red 0%, red)) { + .red { + color: oklab(62.7955% .22486 .12584 / .75); + } }" `) }) @@ -536,8 +546,10 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { - color: oklab(62.7955% .22486 .12584 / .75); + "@supports (color: color-mix(in srgb, red 0%, red)) { + .red { + color: oklab(62.7955% .22486 .12584 / .75); + } }" `) }) @@ -761,8 +773,10 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { - color: oklab(62.7955% .22486 .12584 / .25); + "@supports (color: color-mix(in srgb, red 0%, red)) { + .red { + color: oklab(62.7955% .22486 .12584 / .25); + } }" `) }) @@ -834,7 +848,13 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` ".red { - color: oklab(62.7955% .22486 .12584 / .25); + color: color-mix(in oklab, red 50%, transparent / 50%); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .red { + color: oklab(62.7955% .22486 .12584 / .25); + } }" `) }) @@ -869,8 +889,10 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".red { - color: oklab(62.7955% .22486 .12584 / .5); + "@supports (color: color-mix(in srgb, red 0%, red)) { + .red { + color: oklab(62.7955% .22486 .12584 / .5); + } }" `) }) @@ -922,7 +944,7 @@ describe('theme(…)', () => { ['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'], ['letterSpacing.wide', '.025em'], ['lineHeight.tight', '1.25'], - ['backgroundColor.red.500', 'oklch(.637 .237 25.331)'], + ['backgroundColor.red.500', 'oklch(63.7% .237 25.331)'], ])('theme(%s) → %s', async (value, result) => { let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8') let compiled = await compileCss(css` @@ -1043,7 +1065,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) and (width < 64rem) { + "@media (width >= 48rem) and ((width < 64rem)) { .red { color: red; } @@ -1163,8 +1185,15 @@ describe('in plugins', () => { .my-base-rule { color: oklch(62% .25 30); background-color: oklch(45% .31 264); - border-color: oklab(87% .06947 .00853 / .1); - outline-color: oklab(79% .05814 .15974 / .15); + border-color: oklch(87% .07 7 / .1); + outline-color: oklch(79% .17 70 / .15); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .my-base-rule { + border-color: oklab(87% .06947 .00853 / .1); + outline-color: oklab(79% .05814 .15974 / .15); + } } } diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 9a4279d546ee..780441584aab 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -246,7 +246,13 @@ describe('arbitrary properties', () => { it('should generate arbitrary properties with modifiers', async () => { expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(` ".\\[color\\:red\\]\\/50 { - color: oklab(62.7955% .22486 .12584 / .5); + color: red; + } + + @supports (color: color-mix(in srgb, red 50%, green)) { + .\\[color\\:red\\]\\/50 { + color: oklab(62.7955% .22486 .12584 / .5); + } }" `) }) @@ -258,7 +264,13 @@ describe('arbitrary properties', () => { it('should generate arbitrary properties with variables and with modifiers', async () => { expect(await run(['[color:var(--my-color)]/50'])).toMatchInlineSnapshot(` ".\\[color\\:var\\(--my-color\\)\\]\\/50 { - color: color-mix(in oklab, var(--my-color) 50%, transparent); + color: var(--my-color); + } + + @supports (color: color-mix(in srgb, red 50%, green)) { + .\\[color\\:var\\(--my-color\\)\\]\\/50 { + color: color-mix(in oklab, var(--my-color) 50%, transparent); + } }" `) }) @@ -4653,3 +4665,31 @@ describe('@variant', () => { `) }) }) + +it.only('does the `color-mix(…)` thing', async () => { + await expect( + compileCss( + css` + @theme { + --color-red-500: oklch(63.7% 0.237 25.331); + } + @tailwind utilities; + `, + ['text-red-500/50'], + ), + ).resolves.toMatchInlineSnapshot(` + ":root, :host { + --color-red-500: oklch(63.7% .237 25.331); + } + + .text-red-500\\/50 { + color: oklch(63.7% .237 25.331 / .5); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .text-red-500\\/50 { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + }" + `) +}) diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index 2951ef576ab8..528e3823da63 100644 --- a/packages/tailwindcss/src/test-utils/run.ts +++ b/packages/tailwindcss/src/test-utils/run.ts @@ -31,7 +31,7 @@ export function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: Features.Nesting, + include: Features.Nesting | Features.MediaQueries, exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark, targets: { safari: (16 << 16) | (4 << 8), diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 908a2398ae4d..697510064ebb 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -8049,16 +8049,20 @@ test('accent', async () => { accent-color: #08c; } - .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { - accent-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { + accent-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .accent-current { accent-color: currentColor; } - .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] { - accent-color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] { + accent-color: color-mix(in oklab, currentColor 50%, transparent); + } } .accent-inherit { @@ -8081,8 +8085,10 @@ test('accent', async () => { accent-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] { - accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] { + accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .accent-transparent { @@ -8164,16 +8170,20 @@ test('caret', async () => { caret-color: #08c; } - .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { - caret-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { + caret-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .caret-current { caret-color: currentColor; } - .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] { - caret-color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] { + caret-color: color-mix(in oklab, currentColor 50%, transparent); + } } .caret-inherit { @@ -8196,8 +8206,10 @@ test('caret', async () => { caret-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] { - caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] { + caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .caret-transparent { @@ -8277,16 +8289,20 @@ test('divide-color', async () => { border-color: #08c; } - :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) { - border-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) { + border-color: oklab(59.9824% -.06725 -.12414 / .5); + } } :where(.divide-current > :not(:last-child)) { border-color: currentColor; } - :where(.divide-current\\/50 > :not(:last-child)), :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { - border-color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + :where(.divide-current\\/50 > :not(:last-child)), :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { + border-color: color-mix(in oklab, currentColor 50%, transparent); + } } :where(.divide-inherit > :not(:last-child)) { @@ -8309,8 +8325,10 @@ test('divide-color', async () => { border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - :where(.divide-red-500\\/50 > :not(:last-child)), :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + :where(.divide-red-500\\/50 > :not(:last-child)), :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) { + border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } :where(.divide-transparent > :not(:last-child)) { @@ -10223,8 +10241,10 @@ test('bg', async () => { background-color: #08c; } - .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { - background-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { + background-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .bg-\\[color\\:var\\(--some-var\\)\\] { @@ -10247,8 +10267,10 @@ test('bg', async () => { background-color: currentColor; } - .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] { - background-color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] { + background-color: color-mix(in oklab, currentColor 50%, transparent); + } } .bg-current\\/\\[var\\(--bg-opacity\\)\\] { @@ -10275,8 +10297,10 @@ test('bg', async () => { background-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] { - background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] { + background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .bg-transparent { @@ -10837,11 +10861,36 @@ test('from', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); + .from-\\[\\#0088cc\\]\\/50 { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .from-\\[\\#0088cc\\]\\/50 { + --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); + } + } + + .from-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .from-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); + } + } + + .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + @supports (color: color-mix(in srgb, red 0%, red)) { + .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); + } + } + .from-\\[color\\:var\\(--my-color\\)\\] { --tw-gradient-from: var(--my-color); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -10867,11 +10916,36 @@ test('from', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); + .from-current\\/50 { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .from-current\\/50 { + --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); + } + } + + .from-current\\/\\[0\\.5\\] { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .from-current\\/\\[0\\.5\\] { + --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); + } + } + + .from-current\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + @supports (color: color-mix(in srgb, red 0%, red)) { + .from-current\\/\\[50\\%\\] { + --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); + } + } + .from-inherit { --tw-gradient-from: inherit; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -10882,11 +10956,36 @@ test('from', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); + .from-red-500\\/50 { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .from-red-500\\/50 { + --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + + .from-red-500\\/\\[0\\.5\\] { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .from-red-500\\/\\[0\\.5\\] { + --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + + .from-red-500\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + @supports (color: color-mix(in srgb, red 0%, red)) { + .from-red-500\\/\\[50\\%\\] { + --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11057,12 +11156,39 @@ test('via', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); + .via-\\[\\#0088cc\\]\\/50 { + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .via-\\[\\#0088cc\\]\\/50 { + --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); + } + } + + .via-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .via-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); + } + } + + .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + @supports (color: color-mix(in srgb, red 0%, red)) { + .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); + } + } + .via-\\[color\\:var\\(--my-color\\)\\] { --tw-gradient-via: var(--my-color); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -11093,12 +11219,39 @@ test('via', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); + .via-current\\/50 { + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .via-current\\/50 { + --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); + } + } + + .via-current\\/\\[0\\.5\\] { + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .via-current\\/\\[0\\.5\\] { + --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); + } + } + + .via-current\\/\\[50\\%\\] { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + @supports (color: color-mix(in srgb, red 0%, red)) { + .via-current\\/\\[50\\%\\] { + --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); + } + } + .via-inherit { --tw-gradient-via: inherit; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -11111,12 +11264,39 @@ test('via', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); + .via-red-500\\/50 { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + @supports (color: color-mix(in srgb, red 0%, red)) { + .via-red-500\\/50 { + --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + + .via-red-500\\/\\[0\\.5\\] { + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .via-red-500\\/\\[0\\.5\\] { + --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + + .via-red-500\\/\\[50\\%\\] { + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .via-red-500\\/\\[50\\%\\] { + --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + .via-transparent { --tw-gradient-via: transparent; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -11285,11 +11465,36 @@ test('to', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); + .to-\\[\\#0088cc\\]\\/50 { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .to-\\[\\#0088cc\\]\\/50 { + --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); + } + } + + .to-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .to-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); + } + } + + .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + @supports (color: color-mix(in srgb, red 0%, red)) { + .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); + } + } + .to-\\[color\\:var\\(--my-color\\)\\] { --tw-gradient-to: var(--my-color); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11315,11 +11520,36 @@ test('to', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); + .to-current\\/50 { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .to-current\\/50 { + --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); + } + } + + .to-current\\/\\[0\\.5\\] { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .to-current\\/\\[0\\.5\\] { + --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); + } + } + + .to-current\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + @supports (color: color-mix(in srgb, red 0%, red)) { + .to-current\\/\\[50\\%\\] { + --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); + } + } + .to-inherit { --tw-gradient-to: inherit; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11330,11 +11560,36 @@ test('to', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); + .to-red-500\\/50 { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .to-red-500\\/50 { + --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + + .to-red-500\\/\\[0\\.5\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + @supports (color: color-mix(in srgb, red 0%, red)) { + .to-red-500\\/\\[0\\.5\\] { + --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + + .to-red-500\\/\\[50\\%\\] { + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + + @supports (color: color-mix(in srgb, red 0%, red)) { + .to-red-500\\/\\[50\\%\\] { + --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + .to-transparent { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11834,16 +12089,20 @@ test('fill', async () => { fill: #08c; } - .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { - fill: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { + fill: oklab(59.9824% -.06725 -.12414 / .5); + } } .fill-current { fill: currentColor; } - .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] { - fill: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] { + fill: color-mix(in oklab, currentColor 50%, transparent); + } } .fill-inherit { @@ -11866,8 +12125,10 @@ test('fill', async () => { fill: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] { - fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] { + fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .fill-transparent { @@ -11955,8 +12216,10 @@ test('stroke', async () => { stroke: #08c; } - .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { - stroke: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { + stroke: oklab(59.9824% -.06725 -.12414 / .5); + } } .stroke-\\[color\\:var\\(--my-color\\)\\] { @@ -11979,8 +12242,10 @@ test('stroke', async () => { stroke: currentColor; } - .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] { - stroke: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] { + stroke: color-mix(in oklab, currentColor 50%, transparent); + } } .stroke-inherit { @@ -12007,8 +12272,10 @@ test('stroke', async () => { stroke: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] { - stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] { + stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .stroke-transparent { @@ -12947,16 +13214,20 @@ test('placeholder', async () => { color: #08c; } - .placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { - color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { + color: oklab(59.9824% -.06725 -.12414 / .5); + } } .placeholder-current::placeholder { color: currentColor; } - .placeholder-current\\/50::placeholder, .placeholder-current\\/\\[0\\.5\\]::placeholder, .placeholder-current\\/\\[50\\%\\]::placeholder { - color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .placeholder-current\\/50::placeholder, .placeholder-current\\/\\[0\\.5\\]::placeholder, .placeholder-current\\/\\[50\\%\\]::placeholder { + color: color-mix(in oklab, currentColor 50%, transparent); + } } .placeholder-inherit::placeholder { @@ -12979,8 +13250,10 @@ test('placeholder', async () => { color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - .placeholder-red-500\\/50::placeholder, .placeholder-red-500\\/\\[0\\.5\\]::placeholder, .placeholder-red-500\\/\\[50\\%\\]::placeholder { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .placeholder-red-500\\/50::placeholder, .placeholder-red-500\\/\\[0\\.5\\]::placeholder, .placeholder-red-500\\/\\[50\\%\\]::placeholder { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .placeholder-transparent::placeholder { @@ -13072,8 +13345,10 @@ test('decoration', async () => { text-decoration-color: #08c; } - .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { - text-decoration-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { + text-decoration-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .decoration-\\[color\\:var\\(--my-color\\)\\] { @@ -13104,10 +13379,12 @@ test('decoration', async () => { text-decoration-color: currentColor; } - .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); - text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] { + -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); + text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); + } } .decoration-inherit { @@ -13122,10 +13399,12 @@ test('decoration', async () => { text-decoration-color: var(--color-red-500); } - .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] { + -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .decoration-transparent { @@ -14769,24 +15048,28 @@ test('outline', async () => { outline-color: #08c; } - .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { - outline-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { + outline-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .outline-\\[black\\] { outline-color: #000; } - .outline-\\[black\\]\\/50 { - outline-color: oklab(0% none none / .5); - } + @supports (color: color-mix(in srgb, red 0%, red)) { + .outline-\\[black\\]\\/50 { + outline-color: oklab(0% none none / .5); + } - .outline-\\[black\\]\\/\\[0\\.5\\] { - outline-color: oklab(0% none none / .5); - } + .outline-\\[black\\]\\/\\[0\\.5\\] { + outline-color: oklab(0% none none / .5); + } - .outline-\\[black\\]\\/\\[50\\%\\] { - outline-color: oklab(0% none none / .5); + .outline-\\[black\\]\\/\\[50\\%\\] { + outline-color: oklab(0% none none / .5); + } } .outline-\\[color\\:var\\(--value\\)\\] { @@ -14809,8 +15092,10 @@ test('outline', async () => { outline-color: currentColor; } - .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] { - outline-color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] { + outline-color: color-mix(in oklab, currentColor 50%, transparent); + } } .outline-inherit { @@ -14821,8 +15106,10 @@ test('outline', async () => { outline-color: var(--color-red-500); } - .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] { - outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] { + outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .outline-transparent { @@ -15235,8 +15522,10 @@ test('text', async () => { color: #08c; } - .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { - color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { + color: oklab(59.9824% -.06725 -.12414 / .5); + } } .text-\\[color\\:var\\(--my-color\\)\\] { @@ -15259,8 +15548,10 @@ test('text', async () => { color: currentColor; } - .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] { - color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] { + color: color-mix(in oklab, currentColor 50%, transparent); + } } .text-inherit { @@ -15283,8 +15574,10 @@ test('text', async () => { color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .text-transparent { @@ -15412,8 +15705,10 @@ test('shadow', async () => { --tw-shadow-color: #08c; } - .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .shadow-\\[color\\:var\\(--value\\)\\] { @@ -15428,8 +15723,10 @@ test('shadow', async () => { --tw-shadow-color: currentColor; } - .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] { + --tw-shadow-color: color-mix(in oklab, currentColor 50%, transparent); + } } .shadow-inherit { @@ -15452,8 +15749,10 @@ test('shadow', async () => { --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] { + --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .shadow-transparent { @@ -15634,8 +15933,10 @@ test('inset-shadow', async () => { --tw-inset-shadow-color: #08c; } - .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-inset-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .inset-shadow-\\[color\\:var\\(--value\\)\\] { @@ -15650,8 +15951,10 @@ test('inset-shadow', async () => { --tw-inset-shadow-color: currentColor; } - .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] { + --tw-inset-shadow-color: color-mix(in oklab, currentColor 50%, transparent); + } } .inset-shadow-inherit { @@ -15674,8 +15977,10 @@ test('inset-shadow', async () => { --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] { + --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .inset-shadow-transparent { @@ -15864,8 +16169,10 @@ test('ring', async () => { --tw-ring-color: #08c; } - .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-ring-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-ring-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .ring-\\[color\\:var\\(--my-color\\)\\] { @@ -15888,8 +16195,10 @@ test('ring', async () => { --tw-ring-color: currentColor; } - .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in oklab, currentColor 50%, transparent); + } } .ring-inherit { @@ -15912,8 +16221,10 @@ test('ring', async () => { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .ring-transparent { @@ -16203,8 +16514,10 @@ test('inset-ring', async () => { --tw-inset-ring-color: #08c; } - .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-ring-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-inset-ring-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .inset-ring-\\[color\\:var\\(--my-color\\)\\] { @@ -16227,8 +16540,10 @@ test('inset-ring', async () => { --tw-inset-ring-color: currentColor; } - .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in oklab, currentColor 50%, transparent); + } } .inset-ring-inherit { @@ -16251,8 +16566,10 @@ test('inset-ring', async () => { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .inset-ring-transparent { @@ -16447,8 +16764,10 @@ test('ring-offset', async () => { --tw-ring-offset-color: #08c; } - .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-ring-offset-color: oklab(59.9824% -.06725 -.12414 / .5); + @supports (color: color-mix(in srgb, red 0%, red)) { + .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-ring-offset-color: oklab(59.9824% -.06725 -.12414 / .5); + } } .ring-offset-\\[color\\:var\\(--my-color\\)\\] { @@ -16471,8 +16790,10 @@ test('ring-offset', async () => { --tw-ring-offset-color: currentColor; } - .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in oklab, currentColor 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in oklab, currentColor 50%, transparent); + } } .ring-offset-inherit { @@ -16483,8 +16804,10 @@ test('ring-offset', async () => { --tw-ring-offset-color: var(--color-red-500); } - .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + @supports (color: color-mix(in srgb, red 0%, red)) { + .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } .ring-offset-transparent { diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index 6f40223e4f5e..18b024b887f2 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -7,269 +7,269 @@ ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; - --color-red-50: oklch(0.971 0.013 17.38); - --color-red-100: oklch(0.936 0.032 17.717); - --color-red-200: oklch(0.885 0.062 18.334); - --color-red-300: oklch(0.808 0.114 19.571); - --color-red-400: oklch(0.704 0.191 22.216); - --color-red-500: oklch(0.637 0.237 25.331); - --color-red-600: oklch(0.577 0.245 27.325); - --color-red-700: oklch(0.505 0.213 27.518); - --color-red-800: oklch(0.444 0.177 26.899); - --color-red-900: oklch(0.396 0.141 25.723); - --color-red-950: oklch(0.258 0.092 26.042); - - --color-orange-50: oklch(0.98 0.016 73.684); - --color-orange-100: oklch(0.954 0.038 75.164); - --color-orange-200: oklch(0.901 0.076 70.697); - --color-orange-300: oklch(0.837 0.128 66.29); - --color-orange-400: oklch(0.75 0.183 55.934); - --color-orange-500: oklch(0.705 0.213 47.604); - --color-orange-600: oklch(0.646 0.222 41.116); - --color-orange-700: oklch(0.553 0.195 38.402); - --color-orange-800: oklch(0.47 0.157 37.304); - --color-orange-900: oklch(0.408 0.123 38.172); - --color-orange-950: oklch(0.266 0.079 36.259); - - --color-amber-50: oklch(0.987 0.022 95.277); - --color-amber-100: oklch(0.962 0.059 95.617); - --color-amber-200: oklch(0.924 0.12 95.746); - --color-amber-300: oklch(0.879 0.169 91.605); - --color-amber-400: oklch(0.828 0.189 84.429); - --color-amber-500: oklch(0.769 0.188 70.08); - --color-amber-600: oklch(0.666 0.179 58.318); - --color-amber-700: oklch(0.555 0.163 48.998); - --color-amber-800: oklch(0.473 0.137 46.201); - --color-amber-900: oklch(0.414 0.112 45.904); - --color-amber-950: oklch(0.279 0.077 45.635); - - --color-yellow-50: oklch(0.987 0.026 102.212); - --color-yellow-100: oklch(0.973 0.071 103.193); - --color-yellow-200: oklch(0.945 0.129 101.54); - --color-yellow-300: oklch(0.905 0.182 98.111); - --color-yellow-400: oklch(0.852 0.199 91.936); - --color-yellow-500: oklch(0.795 0.184 86.047); - --color-yellow-600: oklch(0.681 0.162 75.834); - --color-yellow-700: oklch(0.554 0.135 66.442); - --color-yellow-800: oklch(0.476 0.114 61.907); - --color-yellow-900: oklch(0.421 0.095 57.708); - --color-yellow-950: oklch(0.286 0.066 53.813); - - --color-lime-50: oklch(0.986 0.031 120.757); - --color-lime-100: oklch(0.967 0.067 122.328); - --color-lime-200: oklch(0.938 0.127 124.321); - --color-lime-300: oklch(0.897 0.196 126.665); - --color-lime-400: oklch(0.841 0.238 128.85); - --color-lime-500: oklch(0.768 0.233 130.85); - --color-lime-600: oklch(0.648 0.2 131.684); - --color-lime-700: oklch(0.532 0.157 131.589); - --color-lime-800: oklch(0.453 0.124 130.933); - --color-lime-900: oklch(0.405 0.101 131.063); - --color-lime-950: oklch(0.274 0.072 132.109); - - --color-green-50: oklch(0.982 0.018 155.826); - --color-green-100: oklch(0.962 0.044 156.743); - --color-green-200: oklch(0.925 0.084 155.995); - --color-green-300: oklch(0.871 0.15 154.449); - --color-green-400: oklch(0.792 0.209 151.711); - --color-green-500: oklch(0.723 0.219 149.579); - --color-green-600: oklch(0.627 0.194 149.214); - --color-green-700: oklch(0.527 0.154 150.069); - --color-green-800: oklch(0.448 0.119 151.328); - --color-green-900: oklch(0.393 0.095 152.535); - --color-green-950: oklch(0.266 0.065 152.934); - - --color-emerald-50: oklch(0.979 0.021 166.113); - --color-emerald-100: oklch(0.95 0.052 163.051); - --color-emerald-200: oklch(0.905 0.093 164.15); - --color-emerald-300: oklch(0.845 0.143 164.978); - --color-emerald-400: oklch(0.765 0.177 163.223); - --color-emerald-500: oklch(0.696 0.17 162.48); - --color-emerald-600: oklch(0.596 0.145 163.225); - --color-emerald-700: oklch(0.508 0.118 165.612); - --color-emerald-800: oklch(0.432 0.095 166.913); - --color-emerald-900: oklch(0.378 0.077 168.94); - --color-emerald-950: oklch(0.262 0.051 172.552); - - --color-teal-50: oklch(0.984 0.014 180.72); - --color-teal-100: oklch(0.953 0.051 180.801); - --color-teal-200: oklch(0.91 0.096 180.426); - --color-teal-300: oklch(0.855 0.138 181.071); - --color-teal-400: oklch(0.777 0.152 181.912); - --color-teal-500: oklch(0.704 0.14 182.503); - --color-teal-600: oklch(0.6 0.118 184.704); - --color-teal-700: oklch(0.511 0.096 186.391); - --color-teal-800: oklch(0.437 0.078 188.216); - --color-teal-900: oklch(0.386 0.063 188.416); - --color-teal-950: oklch(0.277 0.046 192.524); - - --color-cyan-50: oklch(0.984 0.019 200.873); - --color-cyan-100: oklch(0.956 0.045 203.388); - --color-cyan-200: oklch(0.917 0.08 205.041); - --color-cyan-300: oklch(0.865 0.127 207.078); - --color-cyan-400: oklch(0.789 0.154 211.53); - --color-cyan-500: oklch(0.715 0.143 215.221); - --color-cyan-600: oklch(0.609 0.126 221.723); - --color-cyan-700: oklch(0.52 0.105 223.128); - --color-cyan-800: oklch(0.45 0.085 224.283); - --color-cyan-900: oklch(0.398 0.07 227.392); - --color-cyan-950: oklch(0.302 0.056 229.695); - - --color-sky-50: oklch(0.977 0.013 236.62); - --color-sky-100: oklch(0.951 0.026 236.824); - --color-sky-200: oklch(0.901 0.058 230.902); - --color-sky-300: oklch(0.828 0.111 230.318); - --color-sky-400: oklch(0.746 0.16 232.661); - --color-sky-500: oklch(0.685 0.169 237.323); - --color-sky-600: oklch(0.588 0.158 241.966); - --color-sky-700: oklch(0.5 0.134 242.749); - --color-sky-800: oklch(0.443 0.11 240.79); - --color-sky-900: oklch(0.391 0.09 240.876); - --color-sky-950: oklch(0.293 0.066 243.157); - - --color-blue-50: oklch(0.97 0.014 254.604); - --color-blue-100: oklch(0.932 0.032 255.585); - --color-blue-200: oklch(0.882 0.059 254.128); - --color-blue-300: oklch(0.809 0.105 251.813); - --color-blue-400: oklch(0.707 0.165 254.624); - --color-blue-500: oklch(0.623 0.214 259.815); - --color-blue-600: oklch(0.546 0.245 262.881); - --color-blue-700: oklch(0.488 0.243 264.376); - --color-blue-800: oklch(0.424 0.199 265.638); - --color-blue-900: oklch(0.379 0.146 265.522); - --color-blue-950: oklch(0.282 0.091 267.935); - - --color-indigo-50: oklch(0.962 0.018 272.314); - --color-indigo-100: oklch(0.93 0.034 272.788); - --color-indigo-200: oklch(0.87 0.065 274.039); - --color-indigo-300: oklch(0.785 0.115 274.713); - --color-indigo-400: oklch(0.673 0.182 276.935); - --color-indigo-500: oklch(0.585 0.233 277.117); - --color-indigo-600: oklch(0.511 0.262 276.966); - --color-indigo-700: oklch(0.457 0.24 277.023); - --color-indigo-800: oklch(0.398 0.195 277.366); - --color-indigo-900: oklch(0.359 0.144 278.697); - --color-indigo-950: oklch(0.257 0.09 281.288); - - --color-violet-50: oklch(0.969 0.016 293.756); - --color-violet-100: oklch(0.943 0.029 294.588); - --color-violet-200: oklch(0.894 0.057 293.283); - --color-violet-300: oklch(0.811 0.111 293.571); - --color-violet-400: oklch(0.702 0.183 293.541); - --color-violet-500: oklch(0.606 0.25 292.717); - --color-violet-600: oklch(0.541 0.281 293.009); - --color-violet-700: oklch(0.491 0.27 292.581); - --color-violet-800: oklch(0.432 0.232 292.759); - --color-violet-900: oklch(0.38 0.189 293.745); - --color-violet-950: oklch(0.283 0.141 291.089); - - --color-purple-50: oklch(0.977 0.014 308.299); - --color-purple-100: oklch(0.946 0.033 307.174); - --color-purple-200: oklch(0.902 0.063 306.703); - --color-purple-300: oklch(0.827 0.119 306.383); - --color-purple-400: oklch(0.714 0.203 305.504); - --color-purple-500: oklch(0.627 0.265 303.9); - --color-purple-600: oklch(0.558 0.288 302.321); - --color-purple-700: oklch(0.496 0.265 301.924); - --color-purple-800: oklch(0.438 0.218 303.724); - --color-purple-900: oklch(0.381 0.176 304.987); - --color-purple-950: oklch(0.291 0.149 302.717); - - --color-fuchsia-50: oklch(0.977 0.017 320.058); - --color-fuchsia-100: oklch(0.952 0.037 318.852); - --color-fuchsia-200: oklch(0.903 0.076 319.62); - --color-fuchsia-300: oklch(0.833 0.145 321.434); - --color-fuchsia-400: oklch(0.74 0.238 322.16); - --color-fuchsia-500: oklch(0.667 0.295 322.15); - --color-fuchsia-600: oklch(0.591 0.293 322.896); - --color-fuchsia-700: oklch(0.518 0.253 323.949); - --color-fuchsia-800: oklch(0.452 0.211 324.591); - --color-fuchsia-900: oklch(0.401 0.17 325.612); - --color-fuchsia-950: oklch(0.293 0.136 325.661); - - --color-pink-50: oklch(0.971 0.014 343.198); - --color-pink-100: oklch(0.948 0.028 342.258); - --color-pink-200: oklch(0.899 0.061 343.231); - --color-pink-300: oklch(0.823 0.12 346.018); - --color-pink-400: oklch(0.718 0.202 349.761); - --color-pink-500: oklch(0.656 0.241 354.308); - --color-pink-600: oklch(0.592 0.249 0.584); - --color-pink-700: oklch(0.525 0.223 3.958); - --color-pink-800: oklch(0.459 0.187 3.815); - --color-pink-900: oklch(0.408 0.153 2.432); - --color-pink-950: oklch(0.284 0.109 3.907); - - --color-rose-50: oklch(0.969 0.015 12.422); - --color-rose-100: oklch(0.941 0.03 12.58); - --color-rose-200: oklch(0.892 0.058 10.001); - --color-rose-300: oklch(0.81 0.117 11.638); - --color-rose-400: oklch(0.712 0.194 13.428); - --color-rose-500: oklch(0.645 0.246 16.439); - --color-rose-600: oklch(0.586 0.253 17.585); - --color-rose-700: oklch(0.514 0.222 16.935); - --color-rose-800: oklch(0.455 0.188 13.697); - --color-rose-900: oklch(0.41 0.159 10.272); - --color-rose-950: oklch(0.271 0.105 12.094); - - --color-slate-50: oklch(0.984 0.003 247.858); - --color-slate-100: oklch(0.968 0.007 247.896); - --color-slate-200: oklch(0.929 0.013 255.508); - --color-slate-300: oklch(0.869 0.022 252.894); - --color-slate-400: oklch(0.704 0.04 256.788); - --color-slate-500: oklch(0.554 0.046 257.417); - --color-slate-600: oklch(0.446 0.043 257.281); - --color-slate-700: oklch(0.372 0.044 257.287); - --color-slate-800: oklch(0.279 0.041 260.031); - --color-slate-900: oklch(0.208 0.042 265.755); - --color-slate-950: oklch(0.129 0.042 264.695); - - --color-gray-50: oklch(0.985 0.002 247.839); - --color-gray-100: oklch(0.967 0.003 264.542); - --color-gray-200: oklch(0.928 0.006 264.531); - --color-gray-300: oklch(0.872 0.01 258.338); - --color-gray-400: oklch(0.707 0.022 261.325); - --color-gray-500: oklch(0.551 0.027 264.364); - --color-gray-600: oklch(0.446 0.03 256.802); - --color-gray-700: oklch(0.373 0.034 259.733); - --color-gray-800: oklch(0.278 0.033 256.848); - --color-gray-900: oklch(0.21 0.034 264.665); - --color-gray-950: oklch(0.13 0.028 261.692); - - --color-zinc-50: oklch(0.985 0 0); - --color-zinc-100: oklch(0.967 0.001 286.375); - --color-zinc-200: oklch(0.92 0.004 286.32); - --color-zinc-300: oklch(0.871 0.006 286.286); - --color-zinc-400: oklch(0.705 0.015 286.067); - --color-zinc-500: oklch(0.552 0.016 285.938); - --color-zinc-600: oklch(0.442 0.017 285.786); - --color-zinc-700: oklch(0.37 0.013 285.805); - --color-zinc-800: oklch(0.274 0.006 286.033); - --color-zinc-900: oklch(0.21 0.006 285.885); - --color-zinc-950: oklch(0.141 0.005 285.823); - - --color-neutral-50: oklch(0.985 0 0); - --color-neutral-100: oklch(0.97 0 0); - --color-neutral-200: oklch(0.922 0 0); - --color-neutral-300: oklch(0.87 0 0); - --color-neutral-400: oklch(0.708 0 0); - --color-neutral-500: oklch(0.556 0 0); - --color-neutral-600: oklch(0.439 0 0); - --color-neutral-700: oklch(0.371 0 0); - --color-neutral-800: oklch(0.269 0 0); - --color-neutral-900: oklch(0.205 0 0); - --color-neutral-950: oklch(0.145 0 0); - - --color-stone-50: oklch(0.985 0.001 106.423); - --color-stone-100: oklch(0.97 0.001 106.424); - --color-stone-200: oklch(0.923 0.003 48.717); - --color-stone-300: oklch(0.869 0.005 56.366); - --color-stone-400: oklch(0.709 0.01 56.259); - --color-stone-500: oklch(0.553 0.013 58.071); - --color-stone-600: oklch(0.444 0.011 73.639); - --color-stone-700: oklch(0.374 0.01 67.558); - --color-stone-800: oklch(0.268 0.007 34.298); - --color-stone-900: oklch(0.216 0.006 56.043); - --color-stone-950: oklch(0.147 0.004 49.25); + --color-red-50: oklch(97.1% 0.013 17.38); + --color-red-100: oklch(93.6% 0.032 17.717); + --color-red-200: oklch(88.5% 0.062 18.334); + --color-red-300: oklch(80.8% 0.114 19.571); + --color-red-400: oklch(70.4% 0.191 22.216); + --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-600: oklch(57.7% 0.245 27.325); + --color-red-700: oklch(50.5% 0.213 27.518); + --color-red-800: oklch(44.4% 0.177 26.899); + --color-red-900: oklch(39.6% 0.141 25.723); + --color-red-950: oklch(25.8% 0.092 26.042); + + --color-orange-50: oklch(98% 0.016 73.684); + --color-orange-100: oklch(95.4% 0.038 75.164); + --color-orange-200: oklch(90.1% 0.076 70.697); + --color-orange-300: oklch(83.7% 0.128 66.29); + --color-orange-400: oklch(75% 0.183 55.934); + --color-orange-500: oklch(70.5% 0.213 47.604); + --color-orange-600: oklch(64.6% 0.222 41.116); + --color-orange-700: oklch(55.3% 0.195 38.402); + --color-orange-800: oklch(47% 0.157 37.304); + --color-orange-900: oklch(40.8% 0.123 38.172); + --color-orange-950: oklch(26.6% 0.079 36.259); + + --color-amber-50: oklch(98.7% 0.022 95.277); + --color-amber-100: oklch(96.2% 0.059 95.617); + --color-amber-200: oklch(92.4% 0.12 95.746); + --color-amber-300: oklch(87.9% 0.169 91.605); + --color-amber-400: oklch(82.8% 0.189 84.429); + --color-amber-500: oklch(76.9% 0.188 70.08); + --color-amber-600: oklch(66.6% 0.179 58.318); + --color-amber-700: oklch(55.5% 0.163 48.998); + --color-amber-800: oklch(47.3% 0.137 46.201); + --color-amber-900: oklch(41.4% 0.112 45.904); + --color-amber-950: oklch(27.9% 0.077 45.635); + + --color-yellow-50: oklch(98.7% 0.026 102.212); + --color-yellow-100: oklch(97.3% 0.071 103.193); + --color-yellow-200: oklch(94.5% 0.129 101.54); + --color-yellow-300: oklch(90.5% 0.182 98.111); + --color-yellow-400: oklch(85.2% 0.199 91.936); + --color-yellow-500: oklch(79.5% 0.184 86.047); + --color-yellow-600: oklch(68.1% 0.162 75.834); + --color-yellow-700: oklch(55.4% 0.135 66.442); + --color-yellow-800: oklch(47.6% 0.114 61.907); + --color-yellow-900: oklch(42.1% 0.095 57.708); + --color-yellow-950: oklch(28.6% 0.066 53.813); + + --color-lime-50: oklch(98.6% 0.031 120.757); + --color-lime-100: oklch(96.7% 0.067 122.328); + --color-lime-200: oklch(93.8% 0.127 124.321); + --color-lime-300: oklch(89.7% 0.196 126.665); + --color-lime-400: oklch(84.1% 0.238 128.85); + --color-lime-500: oklch(76.8% 0.233 130.85); + --color-lime-600: oklch(64.8% 0.2 131.684); + --color-lime-700: oklch(53.2% 0.157 131.589); + --color-lime-800: oklch(45.3% 0.124 130.933); + --color-lime-900: oklch(40.5% 0.101 131.063); + --color-lime-950: oklch(27.4% 0.072 132.109); + + --color-green-50: oklch(98.2% 0.018 155.826); + --color-green-100: oklch(96.2% 0.044 156.743); + --color-green-200: oklch(92.5% 0.084 155.995); + --color-green-300: oklch(87.1% 0.15 154.449); + --color-green-400: oklch(79.2% 0.209 151.711); + --color-green-500: oklch(72.3% 0.219 149.579); + --color-green-600: oklch(62.7% 0.194 149.214); + --color-green-700: oklch(52.7% 0.154 150.069); + --color-green-800: oklch(44.8% 0.119 151.328); + --color-green-900: oklch(39.3% 0.095 152.535); + --color-green-950: oklch(26.6% 0.065 152.934); + + --color-emerald-50: oklch(97.9% 0.021 166.113); + --color-emerald-100: oklch(95% 0.052 163.051); + --color-emerald-200: oklch(90.5% 0.093 164.15); + --color-emerald-300: oklch(84.5% 0.143 164.978); + --color-emerald-400: oklch(76.5% 0.177 163.223); + --color-emerald-500: oklch(69.6% 0.17 162.48); + --color-emerald-600: oklch(59.6% 0.145 163.225); + --color-emerald-700: oklch(50.8% 0.118 165.612); + --color-emerald-800: oklch(43.2% 0.095 166.913); + --color-emerald-900: oklch(37.8% 0.077 168.94); + --color-emerald-950: oklch(26.2% 0.051 172.552); + + --color-teal-50: oklch(98.4% 0.014 180.72); + --color-teal-100: oklch(95.3% 0.051 180.801); + --color-teal-200: oklch(91% 0.096 180.426); + --color-teal-300: oklch(85.5% 0.138 181.071); + --color-teal-400: oklch(77.7% 0.152 181.912); + --color-teal-500: oklch(70.4% 0.14 182.503); + --color-teal-600: oklch(60% 0.118 184.704); + --color-teal-700: oklch(51.1% 0.096 186.391); + --color-teal-800: oklch(43.7% 0.078 188.216); + --color-teal-900: oklch(38.6% 0.063 188.416); + --color-teal-950: oklch(27.7% 0.046 192.524); + + --color-cyan-50: oklch(98.4% 0.019 200.873); + --color-cyan-100: oklch(95.6% 0.045 203.388); + --color-cyan-200: oklch(91.7% 0.08 205.041); + --color-cyan-300: oklch(86.5% 0.127 207.078); + --color-cyan-400: oklch(78.9% 0.154 211.53); + --color-cyan-500: oklch(71.5% 0.143 215.221); + --color-cyan-600: oklch(60.9% 0.126 221.723); + --color-cyan-700: oklch(52% 0.105 223.128); + --color-cyan-800: oklch(45% 0.085 224.283); + --color-cyan-900: oklch(39.8% 0.07 227.392); + --color-cyan-950: oklch(30.2% 0.056 229.695); + + --color-sky-50: oklch(97.7% 0.013 236.62); + --color-sky-100: oklch(95.1% 0.026 236.824); + --color-sky-200: oklch(90.1% 0.058 230.902); + --color-sky-300: oklch(82.8% 0.111 230.318); + --color-sky-400: oklch(74.6% 0.16 232.661); + --color-sky-500: oklch(68.5% 0.169 237.323); + --color-sky-600: oklch(58.8% 0.158 241.966); + --color-sky-700: oklch(50% 0.134 242.749); + --color-sky-800: oklch(44.3% 0.11 240.79); + --color-sky-900: oklch(39.1% 0.09 240.876); + --color-sky-950: oklch(29.3% 0.066 243.157); + + --color-blue-50: oklch(97% 0.014 254.604); + --color-blue-100: oklch(93.2% 0.032 255.585); + --color-blue-200: oklch(88.2% 0.059 254.128); + --color-blue-300: oklch(80.9% 0.105 251.813); + --color-blue-400: oklch(70.7% 0.165 254.624); + --color-blue-500: oklch(62.3% 0.214 259.815); + --color-blue-600: oklch(54.6% 0.245 262.881); + --color-blue-700: oklch(48.8% 0.243 264.376); + --color-blue-800: oklch(42.4% 0.199 265.638); + --color-blue-900: oklch(37.9% 0.146 265.522); + --color-blue-950: oklch(28.2% 0.091 267.935); + + --color-indigo-50: oklch(96.2% 0.018 272.314); + --color-indigo-100: oklch(93% 0.034 272.788); + --color-indigo-200: oklch(87% 0.065 274.039); + --color-indigo-300: oklch(78.5% 0.115 274.713); + --color-indigo-400: oklch(67.3% 0.182 276.935); + --color-indigo-500: oklch(58.5% 0.233 277.117); + --color-indigo-600: oklch(51.1% 0.262 276.966); + --color-indigo-700: oklch(45.7% 0.24 277.023); + --color-indigo-800: oklch(39.8% 0.195 277.366); + --color-indigo-900: oklch(35.9% 0.144 278.697); + --color-indigo-950: oklch(25.7% 0.09 281.288); + + --color-violet-50: oklch(96.9% 0.016 293.756); + --color-violet-100: oklch(94.3% 0.029 294.588); + --color-violet-200: oklch(89.4% 0.057 293.283); + --color-violet-300: oklch(81.1% 0.111 293.571); + --color-violet-400: oklch(70.2% 0.183 293.541); + --color-violet-500: oklch(60.6% 0.25 292.717); + --color-violet-600: oklch(54.1% 0.281 293.009); + --color-violet-700: oklch(49.1% 0.27 292.581); + --color-violet-800: oklch(43.2% 0.232 292.759); + --color-violet-900: oklch(38% 0.189 293.745); + --color-violet-950: oklch(28.3% 0.141 291.089); + + --color-purple-50: oklch(97.7% 0.014 308.299); + --color-purple-100: oklch(94.6% 0.033 307.174); + --color-purple-200: oklch(90.2% 0.063 306.703); + --color-purple-300: oklch(82.7% 0.119 306.383); + --color-purple-400: oklch(71.4% 0.203 305.504); + --color-purple-500: oklch(62.7% 0.265 303.9); + --color-purple-600: oklch(55.8% 0.288 302.321); + --color-purple-700: oklch(49.6% 0.265 301.924); + --color-purple-800: oklch(43.8% 0.218 303.724); + --color-purple-900: oklch(38.1% 0.176 304.987); + --color-purple-950: oklch(29.1% 0.149 302.717); + + --color-fuchsia-50: oklch(97.7% 0.017 320.058); + --color-fuchsia-100: oklch(95.2% 0.037 318.852); + --color-fuchsia-200: oklch(90.3% 0.076 319.62); + --color-fuchsia-300: oklch(83.3% 0.145 321.434); + --color-fuchsia-400: oklch(74% 0.238 322.16); + --color-fuchsia-500: oklch(66.7% 0.295 322.15); + --color-fuchsia-600: oklch(59.1% 0.293 322.896); + --color-fuchsia-700: oklch(51.8% 0.253 323.949); + --color-fuchsia-800: oklch(45.2% 0.211 324.591); + --color-fuchsia-900: oklch(40.1% 0.17 325.612); + --color-fuchsia-950: oklch(29.3% 0.136 325.661); + + --color-pink-50: oklch(97.1% 0.014 343.198); + --color-pink-100: oklch(94.8% 0.028 342.258); + --color-pink-200: oklch(89.9% 0.061 343.231); + --color-pink-300: oklch(82.3% 0.12 346.018); + --color-pink-400: oklch(71.8% 0.202 349.761); + --color-pink-500: oklch(65.6% 0.241 354.308); + --color-pink-600: oklch(59.2% 0.249 0.584); + --color-pink-700: oklch(52.5% 0.223 3.958); + --color-pink-800: oklch(45.9% 0.187 3.815); + --color-pink-900: oklch(40.8% 0.153 2.432); + --color-pink-950: oklch(28.4% 0.109 3.907); + + --color-rose-50: oklch(96.9% 0.015 12.422); + --color-rose-100: oklch(94.1% 0.03 12.58); + --color-rose-200: oklch(89.2% 0.058 10.001); + --color-rose-300: oklch(81% 0.117 11.638); + --color-rose-400: oklch(71.2% 0.194 13.428); + --color-rose-500: oklch(64.5% 0.246 16.439); + --color-rose-600: oklch(58.6% 0.253 17.585); + --color-rose-700: oklch(51.4% 0.222 16.935); + --color-rose-800: oklch(45.5% 0.188 13.697); + --color-rose-900: oklch(41% 0.159 10.272); + --color-rose-950: oklch(27.1% 0.105 12.094); + + --color-slate-50: oklch(98.4% 0.003 247.858); + --color-slate-100: oklch(96.8% 0.007 247.896); + --color-slate-200: oklch(92.9% 0.013 255.508); + --color-slate-300: oklch(86.9% 0.022 252.894); + --color-slate-400: oklch(70.4% 0.04 256.788); + --color-slate-500: oklch(55.4% 0.046 257.417); + --color-slate-600: oklch(44.6% 0.043 257.281); + --color-slate-700: oklch(37.2% 0.044 257.287); + --color-slate-800: oklch(27.9% 0.041 260.031); + --color-slate-900: oklch(20.8% 0.042 265.755); + --color-slate-950: oklch(12.9% 0.042 264.695); + + --color-gray-50: oklch(98.5% 0.002 247.839); + --color-gray-100: oklch(96.7% 0.003 264.542); + --color-gray-200: oklch(92.8% 0.006 264.531); + --color-gray-300: oklch(87.2% 0.01 258.338); + --color-gray-400: oklch(70.7% 0.022 261.325); + --color-gray-500: oklch(55.1% 0.027 264.364); + --color-gray-600: oklch(44.6% 0.03 256.802); + --color-gray-700: oklch(37.3% 0.034 259.733); + --color-gray-800: oklch(27.8% 0.033 256.848); + --color-gray-900: oklch(21% 0.034 264.665); + --color-gray-950: oklch(13% 0.028 261.692); + + --color-zinc-50: oklch(98.5% 0 0); + --color-zinc-100: oklch(96.7% 0.001 286.375); + --color-zinc-200: oklch(92% 0.004 286.32); + --color-zinc-300: oklch(87.1% 0.006 286.286); + --color-zinc-400: oklch(70.5% 0.015 286.067); + --color-zinc-500: oklch(55.2% 0.016 285.938); + --color-zinc-600: oklch(44.2% 0.017 285.786); + --color-zinc-700: oklch(37% 0.013 285.805); + --color-zinc-800: oklch(27.4% 0.006 286.033); + --color-zinc-900: oklch(21% 0.006 285.885); + --color-zinc-950: oklch(14.1% 0.005 285.823); + + --color-neutral-50: oklch(98.5% 0 0); + --color-neutral-100: oklch(97% 0 0); + --color-neutral-200: oklch(92.2% 0 0); + --color-neutral-300: oklch(87% 0 0); + --color-neutral-400: oklch(70.8% 0 0); + --color-neutral-500: oklch(55.6% 0 0); + --color-neutral-600: oklch(43.9% 0 0); + --color-neutral-700: oklch(37.1% 0 0); + --color-neutral-800: oklch(26.9% 0 0); + --color-neutral-900: oklch(20.5% 0 0); + --color-neutral-950: oklch(14.5% 0 0); + + --color-stone-50: oklch(98.5% 0.001 106.423); + --color-stone-100: oklch(97% 0.001 106.424); + --color-stone-200: oklch(92.3% 0.003 48.717); + --color-stone-300: oklch(86.9% 0.005 56.366); + --color-stone-400: oklch(70.9% 0.01 56.259); + --color-stone-500: oklch(55.3% 0.013 58.071); + --color-stone-600: oklch(44.4% 0.011 73.639); + --color-stone-700: oklch(37.4% 0.01 67.558); + --color-stone-800: oklch(26.8% 0.007 34.298); + --color-stone-900: oklch(21.6% 0.006 56.043); + --color-stone-950: oklch(14.7% 0.004 49.25); --color-black: #000; --color-white: #fff; From 449796191e5edf71a4d93bca319d7a9a2ac02920 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 26 Mar 2025 15:49:04 +0100 Subject: [PATCH 2/2] WIP2 --- .../src/commands/build/index.ts | 2 +- .../src/__snapshots__/index.test.ts.snap | 14 +- .../@tailwindcss-postcss/src/index.test.ts | 2 +- packages/@tailwindcss-postcss/src/index.ts | 10 +- packages/@tailwindcss-vite/src/index.ts | 2 +- .../src/__snapshots__/utilities.test.ts.snap | 162 +-- packages/tailwindcss/src/ast.test.ts | 14 +- packages/tailwindcss/src/ast.ts | 46 - packages/tailwindcss/src/at-import.test.ts | 4 +- .../tailwindcss/src/compat/config.test.ts | 26 +- .../tailwindcss/src/compat/plugin-api.test.ts | 266 ++-- .../tailwindcss/src/css-functions.test.ts | 103 +- packages/tailwindcss/src/index.test.ts | 8 +- packages/tailwindcss/src/intellisense.test.ts | 72 +- packages/tailwindcss/src/test-utils/run.ts | 2 +- packages/tailwindcss/src/utilities.test.ts | 1071 ++++++----------- packages/tailwindcss/src/variants.test.ts | 140 +-- 17 files changed, 721 insertions(+), 1223 deletions(-) diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index 72310574f639..6cbaece6621e 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -446,7 +446,7 @@ function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: Features.Nesting | Features.MediaQueries, + include: Features.Nesting | Features.MediaRangeSyntax, exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark, targets: { safari: (16 << 16) | (4 << 8), diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index e9a830210478..18c2822deafb 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -164,10 +164,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { - @supports (color: color-mix(in srgb, red 0%, red)) { - ::placeholder { - color: color-mix(in oklab, currentColor 50%, transparent); - } + ::placeholder { + color: color-mix(in oklab, currentColor 50%, transparent); } } @@ -261,17 +259,15 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` line-height: var(--tw-leading, var(--text-2xl--line-height)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .text-black\\/50 { - color: color-mix(in oklab, var(--color-black) 50%, transparent); - } + .text-black\\/50 { + color: color-mix(in oklab, var(--color-black) 50%, transparent); } .underline { text-decoration-line: underline; } - @media (width >= 96rem) { + @media (min-width: 96rem) { .\\32 xl\\:font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index af7743ec66e5..f2c21e3a872d 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -267,7 +267,7 @@ test('handle CSS when only using a `@reference` (we should not bail early)', asy ) expect(result.css.trim()).toMatchInlineSnapshot(` - "@media (width >= 48rem) { + "@media (min-width: 48rem) { .foo { bar: baz; } diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index b5214668de47..91e91b06a262 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -52,7 +52,6 @@ export type PluginOptions = { function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { let base = opts.base ?? process.cwd() let optimize = opts.optimize ?? process.env.NODE_ENV === 'production' - console.log({ opts, flag: process.env.NODE_ENV }) return { postcssPlugin: '@tailwindcss/postcss', @@ -326,7 +325,7 @@ function optimizeCss( LightningCssFeatures.DirSelector | LightningCssFeatures.LightDark, targets: { - safari: (15 << 16) | (4 << 8), + safari: (16 << 16) | (4 << 8), ios_saf: (16 << 16) | (4 << 8), firefox: 128 << 16, chrome: 111 << 16, @@ -335,14 +334,9 @@ function optimizeCss( }).code } - let out = optimize(optimize(Buffer.from(input))).toString() - console.log({ out }) - - out = out.replaceAll(/\@media (\()?not /g, '@media $1not all and ') - // Running Lightning CSS twice to ensure that adjacent rules are merged after // nesting is applied. This creates a more optimized output. - return out + return optimize(optimize(Buffer.from(input))).toString() } export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 0e7ec80f6e42..1e09c7ee7d4c 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -143,7 +143,7 @@ function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaQueries, + include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaRangeSyntax, exclude: LightningCssFeatures.LogicalProperties | LightningCssFeatures.DirSelector | diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 7e4ddc544496..5f1c2fea3f54 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -79,10 +79,8 @@ exports[`border-* 1`] = ` border-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-\\[\\#0088cc\\]\\/50 { - border-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-\\[\\#0088cc\\]\\/50 { + border-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-\\[color\\:var\\(--my-color\\)\\] { @@ -105,10 +103,8 @@ exports[`border-* 1`] = ` border-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-current\\/50 { - border-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-current\\/50 { + border-color: color-mix(in oklab, currentColor 50%, transparent); } .border-inherit { @@ -131,10 +127,8 @@ exports[`border-* 1`] = ` border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-red-500\\/50 { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-red-500\\/50 { + border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-transparent { @@ -227,10 +221,8 @@ exports[`border-b-* 1`] = ` border-bottom-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-b-\\[\\#0088cc\\]\\/50 { - border-bottom-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-b-\\[\\#0088cc\\]\\/50 { + border-bottom-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-b-\\[color\\:var\\(--my-color\\)\\] { @@ -253,10 +245,8 @@ exports[`border-b-* 1`] = ` border-bottom-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-b-current\\/50 { - border-bottom-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-b-current\\/50 { + border-bottom-color: color-mix(in oklab, currentColor 50%, transparent); } .border-b-inherit { @@ -279,10 +269,8 @@ exports[`border-b-* 1`] = ` border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-b-red-500\\/50 { - border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-b-red-500\\/50 { + border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-b-transparent { @@ -375,10 +363,8 @@ exports[`border-e-* 1`] = ` border-inline-end-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-e-\\[\\#0088cc\\]\\/50 { - border-inline-end-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-e-\\[\\#0088cc\\]\\/50 { + border-inline-end-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-e-\\[color\\:var\\(--my-color\\)\\] { @@ -401,10 +387,8 @@ exports[`border-e-* 1`] = ` border-inline-end-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-e-current\\/50 { - border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-e-current\\/50 { + border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent); } .border-e-inherit { @@ -427,10 +411,8 @@ exports[`border-e-* 1`] = ` border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-e-red-500\\/50 { - border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-e-red-500\\/50 { + border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-e-transparent { @@ -523,10 +505,8 @@ exports[`border-l-* 1`] = ` border-left-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-l-\\[\\#0088cc\\]\\/50 { - border-left-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-l-\\[\\#0088cc\\]\\/50 { + border-left-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-l-\\[color\\:var\\(--my-color\\)\\] { @@ -549,10 +529,8 @@ exports[`border-l-* 1`] = ` border-left-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-l-current\\/50 { - border-left-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-l-current\\/50 { + border-left-color: color-mix(in oklab, currentColor 50%, transparent); } .border-l-inherit { @@ -575,10 +553,8 @@ exports[`border-l-* 1`] = ` border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-l-red-500\\/50 { - border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-l-red-500\\/50 { + border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-l-transparent { @@ -671,10 +647,8 @@ exports[`border-r-* 1`] = ` border-right-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-r-\\[\\#0088cc\\]\\/50 { - border-right-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-r-\\[\\#0088cc\\]\\/50 { + border-right-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-r-\\[color\\:var\\(--my-color\\)\\] { @@ -697,10 +671,8 @@ exports[`border-r-* 1`] = ` border-right-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-r-current\\/50 { - border-right-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-r-current\\/50 { + border-right-color: color-mix(in oklab, currentColor 50%, transparent); } .border-r-inherit { @@ -723,10 +695,8 @@ exports[`border-r-* 1`] = ` border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-r-red-500\\/50 { - border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-r-red-500\\/50 { + border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-r-transparent { @@ -819,10 +789,8 @@ exports[`border-s-* 1`] = ` border-inline-start-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-s-\\[\\#0088cc\\]\\/50 { - border-inline-start-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-s-\\[\\#0088cc\\]\\/50 { + border-inline-start-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-s-\\[color\\:var\\(--my-color\\)\\] { @@ -845,10 +813,8 @@ exports[`border-s-* 1`] = ` border-inline-start-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-s-current\\/50 { - border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-s-current\\/50 { + border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent); } .border-s-inherit { @@ -871,10 +837,8 @@ exports[`border-s-* 1`] = ` border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-s-red-500\\/50 { - border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-s-red-500\\/50 { + border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-s-transparent { @@ -967,10 +931,8 @@ exports[`border-t-* 1`] = ` border-top-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-t-\\[\\#0088cc\\]\\/50 { - border-top-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-t-\\[\\#0088cc\\]\\/50 { + border-top-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-t-\\[color\\:var\\(--my-color\\)\\] { @@ -993,10 +955,8 @@ exports[`border-t-* 1`] = ` border-top-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-t-current\\/50 { - border-top-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-t-current\\/50 { + border-top-color: color-mix(in oklab, currentColor 50%, transparent); } .border-t-inherit { @@ -1019,10 +979,8 @@ exports[`border-t-* 1`] = ` border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-t-red-500\\/50 { - border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-t-red-500\\/50 { + border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-t-transparent { @@ -1115,10 +1073,8 @@ exports[`border-x-* 1`] = ` border-inline-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-x-\\[\\#0088cc\\]\\/50 { - border-inline-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-x-\\[\\#0088cc\\]\\/50 { + border-inline-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-x-\\[color\\:var\\(--my-color\\)\\] { @@ -1141,10 +1097,8 @@ exports[`border-x-* 1`] = ` border-inline-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-x-current\\/50 { - border-inline-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-x-current\\/50 { + border-inline-color: color-mix(in oklab, currentColor 50%, transparent); } .border-x-inherit { @@ -1167,10 +1121,8 @@ exports[`border-x-* 1`] = ` border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-x-red-500\\/50 { - border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-x-red-500\\/50 { + border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-x-transparent { @@ -1263,10 +1215,8 @@ exports[`border-y-* 1`] = ` border-block-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-y-\\[\\#0088cc\\]\\/50 { - border-block-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-y-\\[\\#0088cc\\]\\/50 { + border-block-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-y-\\[color\\:var\\(--my-color\\)\\] { @@ -1289,10 +1239,8 @@ exports[`border-y-* 1`] = ` border-block-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-y-current\\/50 { - border-block-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-y-current\\/50 { + border-block-color: color-mix(in oklab, currentColor 50%, transparent); } .border-y-inherit { @@ -1315,10 +1263,8 @@ exports[`border-y-* 1`] = ` border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-y-red-500\\/50 { - border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-y-red-500\\/50 { + border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-y-transparent { diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts index 8bd2004ace73..65e3cb4a903c 100644 --- a/packages/tailwindcss/src/ast.test.ts +++ b/packages/tailwindcss/src/ast.test.ts @@ -17,14 +17,14 @@ const css = String.raw it('should pretty print an AST', () => { expect(toCss(optimizeAst(CSS.parse('.foo{color:red;&:hover{color:blue;}}')))) .toMatchInlineSnapshot(` - ".foo { - color: red; - &:hover { - color: blue; + ".foo { + color: red; + &:hover { + color: blue; + } } - } - " - `) + " + `) }) it('allows the placement of context nodes', () => { diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index 21284724121c..e13e19743209 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -2,9 +2,7 @@ import { parseAtRule } from './css-parser' import type { DesignSystem } from './design-system' import { Theme, ThemeOptions } from './theme' import { DefaultMap } from './utils/default-map' -import { segment } from './utils/segment' import { extractUsedVariables } from './utils/variables' -import * as ValueParser from './value-parser' const AT_SIGN = 0x40 @@ -316,50 +314,6 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) { usedKeyframeNames.add(keyframeName) } - // "Polyfill" `color-mix(…)` - if (node.value.includes('color-mix(')) { - let ast = ValueParser.parse(node.value) - let didGenerateFallback = false - ValueParser.walk(ast, (node, { replaceWith }) => { - if (node.kind === 'function' && node.value === 'color-mix') { - let args = ValueParser.toCss(node.nodes) - let match = args.match(/in \w+, (.+) ?(\d+%), transparent/) - if (match) { - let color = match[1] - let percentage = match[2] - - if (color.startsWith('var(')) { - let name = segment(color.slice(4, -1), ',')[0] - if (!name) return - let resolved = designSystem.theme.resolveValue(null, [name as any]) - if (!resolved) return - color = resolved - } - - if ( - (color.startsWith('oklch(') || - color.startsWith('oklab(') || - color.startsWith('lab(') || - color.startsWith('lch(')) && - color.endsWith(')') - ) { - let fallback = `${color.slice(0, -1)} / ${percentage})` - didGenerateFallback = true - replaceWith({ kind: 'word', value: fallback }) - } - } - } - }) - - if (didGenerateFallback) { - let fallback = { ...node, value: ValueParser.toCss(ast) } - let colorMixQuery = rule('@supports (color: color-mix(in srgb, red 0%, red))', [node]) - - parent.push(fallback, colorMixQuery) - return - } - } - parent.push(node) } diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts index 6b418169ff8e..090279fd4bc1 100644 --- a/packages/tailwindcss/src/at-import.test.ts +++ b/packages/tailwindcss/src/at-import.test.ts @@ -318,7 +318,7 @@ test('@supports', async () => { ), ).resolves.toMatchInlineSnapshot(` "@supports (display: grid) { - @media screen and (width <= 400px) { + @media screen and (max-width: 400px) { a { color: red; } @@ -337,7 +337,7 @@ test('@supports', async () => { ), ).resolves.toMatchInlineSnapshot(` "@supports (not (display: grid)) and (display: flex) { - @media screen and (width <= 400px) { + @media screen and (max-width: 400px) { a { color: red; } diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index 372f5f3e3ae0..0756cc7c15d5 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -1156,21 +1156,21 @@ test('utilities must be prefixed', async () => { // Prefixed utilities are generated expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom'])) .toMatchInlineSnapshot(` - ".tw\\:custom { - color: red; - } - .tw\\:underline { - text-decoration-line: underline; - } - .tw\\:hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; + ".tw\\:custom { + color: red; + } + .tw\\:underline { + text-decoration-line: underline; + } + .tw\\:hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through; + } } } - } - " - `) + " + `) // Non-prefixed utilities are ignored compiler = await compile(input, { diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index 210b3da4b654..e6dde07cd30c 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -243,14 +243,14 @@ describe('theme', async () => { expect(compiler.build(['animate-duration-316', 'animate-duration-slow'])) .toMatchInlineSnapshot(` - ".animate-duration-316 { - animation-duration: 316ms; - } - .animate-duration-slow { - animation-duration: 800ms; - } - " - `) + ".animate-duration-316 { + animation-duration: 316ms; + } + .animate-duration-slow { + animation-duration: 800ms; + } + " + `) }) test('plugin theme can have opacity modifiers', async () => { @@ -285,16 +285,10 @@ describe('theme', async () => { expect(compiler.build(['percentage', 'fraction', 'variable'])).toMatchInlineSnapshot(` ".fraction { - color: #ef444 / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, #ef4444 50%, transparent); - } + color: color-mix(in oklab, #ef4444 50%, transparent); } .percentage { - color: #ef444 / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, #ef4444 50%, transparent); - } + color: color-mix(in oklab, #ef4444 50%, transparent); } .variable { color: color-mix(in oklab, #ef4444 var(--opacity), transparent); @@ -365,31 +359,19 @@ describe('theme', async () => { ]), ).toMatchInlineSnapshot(` ".css-fraction { - color: rgba(255 0 0 / / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); - } + color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); } .css-percentage { - color: rgba(255 0 0 / / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); - } + color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); } .css-variable { color: color-mix(in oklab, rgba(255 0 0 / ) var(--opacity), transparent); } .js-fraction { - color: rgb(255 0 0 / 1 / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); - } + color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); } .js-percentage { - color: rgb(255 0 0 / 1 / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); - } + color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); } .js-variable { color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent); @@ -1752,7 +1734,7 @@ describe('addVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width <= 400px) { + @media (max-width: 400px) { @supports (font: bold) { .potato\\:flex:large-potato { display: flex; @@ -2071,19 +2053,19 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 500px) { + @media (min-width: 500px) { .testmin-\\[500px\\]\\:underline { text-decoration-line: underline; } } - @media (width >= 600px) { + @media (min-width: 600px) { .testmin-\\[600px\\]\\:flex { display: flex; } } - @media (width >= 700px) { + @media (min-width: 700px) { .testmin-\\[700px\\]\\:italic { font-style: italic; } @@ -2126,19 +2108,19 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 500px) { + @media (min-width: 500px) { .testmin-\\[500px\\]\\:italic { font-style: italic; } } - @media (width >= 600px) { + @media (min-width: 600px) { .testmin-example\\:italic { font-style: italic; } } - @media (width >= 700px) { + @media (min-width: 700px) { .testmin-\\[700px\\]\\:italic { font-style: italic; } @@ -2186,30 +2168,30 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - @media (width >= 150px) { - @media (width <= 400px) { + @media (min-width: 150px) { + @media (max-width: 400px) { .testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - @media (width >= 100px) { - @media (width <= 350px) { + @media (min-width: 100px) { + @media (max-width: 350px) { .testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 { order: 3; } } - @media (width <= 300px) { + @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } @@ -2256,8 +2238,8 @@ describe('matchVariant', () => { // Expect :focus to come after :hover expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 200px) { + @media (min-width: 100px) { + @media (max-width: 200px) { @media (hover: hover) { .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:hover\\:underline:hover { text-decoration-line: underline; @@ -2310,32 +2292,32 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - @media (width >= 200px) { - @media (width <= 400px) { + @media (min-width: 200px) { + @media (max-width: 400px) { .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - @media (width >= 100px) { - @media (width <= 300px) { + @media (min-width: 100px) { + @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { order: 3; } } } - @media (width >= 200px) { - @media (width <= 300px) { + @media (min-width: 200px) { + @media (max-width: 300px) { .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } @@ -2382,28 +2364,28 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width <= 400px) { - @media (width >= 100px) { + @media (max-width: 400px) { + @media (min-width: 100px) { .testmax-\\[400px\\]\\:testmin-\\[100px\\]\\:underline { text-decoration-line: underline; } } - @media (width >= 200px) { + @media (min-width: 200px) { .testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline { text-decoration-line: underline; } } } - @media (width <= 300px) { - @media (width >= 100px) { + @media (max-width: 300px) { + @media (min-width: 100px) { .testmax-\\[300px\\]\\:testmin-\\[100px\\]\\:underline { text-decoration-line: underline; } } - @media (width >= 200px) { + @media (min-width: 200px) { .testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline { text-decoration-line: underline; } @@ -2458,32 +2440,32 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - @media (width >= 200px) { - @media (width <= 400px) { + @media (min-width: 200px) { + @media (max-width: 400px) { .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - @media (width >= 100px) { - @media (width <= 300px) { + @media (min-width: 100px) { + @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { order: 3; } } } - @media (width >= 200px) { - @media (width <= 300px) { + @media (min-width: 200px) { + @media (max-width: 300px) { .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } @@ -2647,13 +2629,13 @@ describe('matchVariant', () => { 'my-container-[250px]/placement:underline', ]) expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` - "@container (width >= 250px) { + "@container (min-width: 250px) { .my-container-\\[250px\\]\\:underline { text-decoration-line: underline; } } - @container placement (width >= 250px) { + @container placement (min-width: 250px) { .my-container-\\[250px\\]\\/placement\\:underline { text-decoration-line: underline; } @@ -2694,20 +2676,20 @@ describe('addUtilities()', () => { expect(optimizeCss(compiled.build(['text-trim', 'lg:text-trim'])).trim()) .toMatchInlineSnapshot(` - "@layer utilities { - .text-trim { - text-box-trim: both; - text-box-edge: cap alphabetic; - } - - @media (width >= 1024px) { - .lg\\:text-trim { + "@layer utilities { + .text-trim { text-box-trim: both; text-box-edge: cap alphabetic; } - } - }" - `) + + @media (min-width: 1024px) { + .lg\\:text-trim { + text-box-trim: both; + text-box-edge: cap alphabetic; + } + } + }" + `) }) test('return multiple rule objects from a custom utility', async () => { @@ -2891,7 +2873,7 @@ describe('addUtilities()', () => { } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:foo { display: flex; } @@ -2972,7 +2954,7 @@ describe('addUtilities()', () => { background-color: #fff; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:form-textarea { appearance: none; background-color: #fff; @@ -3298,7 +3280,7 @@ describe('matchUtilities()', () => { border-block-width: var(--foo); } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:border-block-2 { border-block-width: 2px; } @@ -3349,16 +3331,16 @@ describe('matchUtilities()', () => { } expect(optimizeCss(await run(['@w-1', 'hover:@w-1'])).trim()).toMatchInlineSnapshot(` - ".\\@w-1 { + ".\\@w-1 { + width: 1px; + } + + @media (hover: hover) { + .hover\\:\\@w-1:hover { width: 1px; } - - @media (hover: hover) { - .hover\\:\\@w-1:hover { - width: 1px; - } - }" - `) + }" + `) }) test('custom functional utilities can return an array of rules', async () => { @@ -3596,10 +3578,8 @@ describe('matchUtilities()', () => { scrollbar-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .scrollbar-\\[\\#08c\\]\\/50 { - scrollbar-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .scrollbar-\\[\\#08c\\]\\/50 { + scrollbar-color: oklab(59.9824% -.06725 -.12414 / .5); } .scrollbar-\\[2px\\] { @@ -3761,10 +3741,8 @@ describe('matchUtilities()', () => { scrollbar-color: #fff; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .scrollbar-\\[\\#fff\\]\\/50 { - scrollbar-color: oklab(100% 0 5.96046e-8 / .5); - } + .scrollbar-\\[\\#fff\\]\\/50 { + scrollbar-color: oklab(100% 0 5.96046e-8 / .5); } .scrollbar-\\[2px\\] { @@ -3795,10 +3773,8 @@ describe('matchUtilities()', () => { scrollbar-color: black; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .scrollbar-black\\/50 { - scrollbar-color: oklab(0% none none / .5); - } + .scrollbar-black\\/50 { + scrollbar-color: oklab(0% none none / .5); }" `) @@ -3871,24 +3847,20 @@ describe('matchUtilities()', () => { scrollbar-color: black; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .scrollbar-black\\/33 { - scrollbar-color: oklab(0% none none / .33); - } + .scrollbar-black\\/33 { + scrollbar-color: oklab(0% none none / .33); + } - .scrollbar-black\\/\\[50\\%\\] { - scrollbar-color: oklab(0% none none / .5); - } + .scrollbar-black\\/\\[50\\%\\] { + scrollbar-color: oklab(0% none none / .5); } .scrollbar-current { scrollbar-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .scrollbar-current\\/45 { - scrollbar-color: color-mix(in oklab, currentColor 45%, transparent); - } + .scrollbar-current\\/45 { + scrollbar-color: color-mix(in oklab, currentColor 45%, transparent); }" `) }) @@ -4003,7 +3975,7 @@ describe('matchUtilities()', () => { display: flex; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:foo-\\[12px\\] { --foo: 12px; display: flex; @@ -4160,30 +4132,30 @@ describe('addComponents()', () => { expect(optimizeCss(compiled.build(['btn', 'btn-blue', 'btn-red'])).trim()) .toMatchInlineSnapshot(` - ".btn { - border-radius: .25rem; - padding: .5rem 1rem; - font-weight: 600; - } + ".btn { + border-radius: .25rem; + padding: .5rem 1rem; + font-weight: 600; + } - .btn-blue { - color: #fff; - background-color: #3490dc; - } + .btn-blue { + color: #fff; + background-color: #3490dc; + } - .btn-blue:hover { - background-color: #2779bd; - } + .btn-blue:hover { + background-color: #2779bd; + } - .btn-red { - color: #fff; - background-color: #e3342f; - } + .btn-red { + color: #fff; + background-color: #e3342f; + } - .btn-red:hover { - background-color: #cc1f1a; - }" - `) + .btn-red:hover { + background-color: #cc1f1a; + }" + `) }) }) @@ -4219,16 +4191,16 @@ describe('matchComponents()', () => { expect(optimizeCss(compiled.build(['prose', 'sm:prose-sm', 'hover:prose-lg'])).trim()) .toMatchInlineSnapshot(` - ".prose { - --container-size: normal; - } - - @media (hover: hover) { - .hover\\:prose-lg:hover { - --container-size: lg; + ".prose { + --container-size: normal; } - }" - `) + + @media (hover: hover) { + .hover\\:prose-lg:hover { + --container-size: lg; + } + }" + `) }) }) diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index cb0d04793082..389b65d9e6eb 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -16,10 +16,8 @@ describe('--alpha(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .foo { - margin: oklab(62.7955% .22486 .12584 / .5); - } + ".foo { + margin: oklab(62.7955% .22486 .12584 / .5); }" `) }) @@ -197,10 +195,8 @@ describe('--theme(…)', () => { --color-red-500: red; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .red { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); }" `) }) @@ -216,10 +212,8 @@ describe('--theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .224863 .125846); - } + ".red { + color: oklab(62.7955% .224863 .125846); }" `) }) @@ -349,13 +343,13 @@ describe('--theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) { + "@media (min-width: 48rem) { .blue { color: #00f; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .red { color: red; } @@ -508,10 +502,8 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .75); - } + ".red { + color: oklab(62.7955% .22486 .12584 / .75); }" `) }) @@ -527,10 +519,8 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .75); - } + ".red { + color: oklab(62.7955% .22486 .12584 / .75); }" `) }) @@ -546,10 +536,8 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .75); - } + ".red { + color: oklab(62.7955% .22486 .12584 / .75); }" `) }) @@ -708,10 +696,10 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".fam { - font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; - }" - `) + ".fam { + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + }" + `) }) test('theme(fontFamily.sans) (config)', async () => { @@ -728,10 +716,10 @@ describe('theme(…)', () => { ) expect(optimizeCss(compiled.build([])).trim()).toMatchInlineSnapshot(` - ".fam { - font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; - }" - `) + ".fam { + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + }" + `) }) }) @@ -773,10 +761,8 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .25); - } + ".red { + color: oklab(62.7955% .22486 .12584 / .25); }" `) }) @@ -848,13 +834,7 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` ".red { - color: color-mix(in oklab, red 50%, transparent / 50%); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .25); - } + color: oklab(62.7955% .22486 .12584 / .25); }" `) }) @@ -889,10 +869,8 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .5); - } + ".red { + color: oklab(62.7955% .22486 .12584 / .5); }" `) }) @@ -982,7 +960,7 @@ describe('theme(…)', () => { ['sm:[--color:theme(colors.red[500])]'], ), ).toMatchInlineSnapshot(` - "@media (width >= 40rem) { + "@media (min-width: 40rem) { .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] { --color: red; } @@ -1043,7 +1021,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) and (width <= 64rem) { + "@media (min-width: 48rem) and (max-width: 64rem) { .red { color: red; } @@ -1064,13 +1042,7 @@ describe('theme(…)', () => { } } `), - ).toMatchInlineSnapshot(` - "@media (width >= 48rem) and ((width < 64rem)) { - .red { - color: red; - } - }" - `) + ).toMatchInlineSnapshot(`""`) }) }) @@ -1088,7 +1060,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) { + "@media (min-width: 48rem) { .red { color: red; } @@ -1109,7 +1081,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@container (width > 48rem) { + "@container not (max-width: 48rem) { .red { color: red; } @@ -1185,15 +1157,8 @@ describe('in plugins', () => { .my-base-rule { color: oklch(62% .25 30); background-color: oklch(45% .31 264); - border-color: oklch(87% .07 7 / .1); - outline-color: oklch(79% .17 70 / .15); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .my-base-rule { - border-color: oklab(87% .06947 .00853 / .1); - outline-color: oklab(79% .05814 .15974 / .15); - } + border-color: oklab(87% .06947 .00853 / .1); + outline-color: oklab(79% .05814 .15974 / .15); } } diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 780441584aab..55ea0bc001d0 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -4683,13 +4683,7 @@ it.only('does the `color-mix(…)` thing', async () => { } .text-red-500\\/50 { - color: oklch(63.7% .237 25.331 / .5); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .text-red-500\\/50 { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); }" `) }) diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index 24e418be3fa9..c148dac0eccb 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -332,48 +332,48 @@ test('Functional utilities from plugins are listed in hovers and completions', a expect(design.candidatesToCss(['custom-1-red', 'custom-1-green', 'custom-1-unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-1-red { - color: #ff0000; - } - ", - ".custom-1-green { - color: #ff0000; - } - ", - null, - ] - `) + [ + ".custom-1-red { + color: #ff0000; + } + ", + ".custom-1-green { + color: #ff0000; + } + ", + null, + ] + `) expect(design.candidatesToCss(['custom-2-red', 'custom-2-green', 'custom-2-unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-2-red { - color: #ff0000 / 0%; - } - ", - ".custom-2-green { - color: #ff0000 / 0%; - } - ", - null, - ] - `) + [ + ".custom-2-red { + color: #ff0000 / 0%; + } + ", + ".custom-2-green { + color: #ff0000 / 0%; + } + ", + null, + ] + `) expect(design.candidatesToCss(['custom-2-red/50', 'custom-2-red/75', 'custom-2-red/unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-2-red\\/50 { - color: #ff0000 / 50%; - } - ", - ".custom-2-red\\/75 { - color: #ff0000 / 75%; - } - ", - null, - ] - `) + [ + ".custom-2-red\\/50 { + color: #ff0000 / 50%; + } + ", + ".custom-2-red\\/75 { + color: #ff0000 / 75%; + } + ", + null, + ] + `) let classMap = new Map(design.getClassList()) let classNames = Array.from(classMap.keys()) diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index 528e3823da63..0b863fa32853 100644 --- a/packages/tailwindcss/src/test-utils/run.ts +++ b/packages/tailwindcss/src/test-utils/run.ts @@ -31,7 +31,7 @@ export function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: Features.Nesting | Features.MediaQueries, + include: Features.Nesting | Features.MediaRangeSyntax, exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark, targets: { safari: (16 << 16) | (4 << 8), diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 697510064ebb..5cd29a4721e9 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1286,26 +1286,26 @@ test('row-start', async () => { expect( await run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]', '-row-start-4']), ).toMatchInlineSnapshot(` - ".-row-start-4 { - grid-row-start: calc(4 * -1); - } + ".-row-start-4 { + grid-row-start: calc(4 * -1); + } - .row-start-4 { - grid-row-start: 4; - } + .row-start-4 { + grid-row-start: 4; + } - .row-start-99 { - grid-row-start: 99; - } + .row-start-99 { + grid-row-start: 99; + } - .row-start-\\[123\\] { - grid-row-start: 123; - } + .row-start-\\[123\\] { + grid-row-start: 123; + } - .row-start-auto { - grid-row-start: auto; - }" - `) + .row-start-auto { + grid-row-start: auto; + }" + `) expect( await run([ 'row-start', @@ -3180,31 +3180,31 @@ describe('container', () => { width: 100%; } - @media (width >= 40rem) { + @media (min-width: 40rem) { .container { max-width: 40rem; } } - @media (width >= 48rem) { + @media (min-width: 48rem) { .container { max-width: 48rem; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .container { max-width: 64rem; } } - @media (width >= 80rem) { + @media (min-width: 80rem) { .container { max-width: 80rem; } } - @media (width >= 96rem) { + @media (min-width: 96rem) { .container { max-width: 96rem; } @@ -3242,43 +3242,43 @@ describe('container', () => { width: 100%; } - @media (width >= 40em) { + @media (min-width: 40em) { .container { max-width: 40em; } } - @media (width >= 48em) { + @media (min-width: 48em) { .container { max-width: 48em; } } - @media (width >= 30px) { + @media (min-width: 30px) { .container { max-width: 30px; } } - @media (width >= 1600px) { + @media (min-width: 1600px) { .container { max-width: 1600px; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .container { max-width: 64rem; } } - @media (width >= 80rem) { + @media (min-width: 80rem) { .container { max-width: 80rem; } } - @media (width >= 96rem) { + @media (min-width: 96rem) { .container { max-width: 96rem; } @@ -3319,31 +3319,31 @@ describe('container', () => { width: 100%; } - @media (width >= 40rem) { + @media (min-width: 40rem) { .container { max-width: 40rem; } } - @media (width >= 48rem) { + @media (min-width: 48rem) { .container { max-width: 48rem; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .container { max-width: 64rem; } } - @media (width >= 80rem) { + @media (min-width: 80rem) { .container { max-width: 80rem; } } - @media (width >= 96rem) { + @media (min-width: 96rem) { .container { max-width: 96rem; } @@ -3354,7 +3354,7 @@ describe('container', () => { padding-inline: 1rem; } - @media (width >= 40rem) { + @media (min-width: 40rem) { .container { padding-inline: 2rem; } @@ -4228,39 +4228,39 @@ test('translate-y', async () => { test('translate-z', async () => { expect(await run(['-translate-z-px', 'translate-z-px', '-translate-z-[var(--value)]'])) .toMatchInlineSnapshot(` - ".-translate-z-\\[var\\(--value\\)\\] { - --tw-translate-z: calc(var(--value) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); - } + ".-translate-z-\\[var\\(--value\\)\\] { + --tw-translate-z: calc(var(--value) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); + } - .-translate-z-px { - --tw-translate-z: -1px; - translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); - } + .-translate-z-px { + --tw-translate-z: -1px; + translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); + } - .translate-z-px { - --tw-translate-z: 1px; - translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); - } + .translate-z-px { + --tw-translate-z: 1px; + translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); + } - @property --tw-translate-x { - syntax: "*"; - inherits: false; - initial-value: 0; - } + @property --tw-translate-x { + syntax: "*"; + inherits: false; + initial-value: 0; + } - @property --tw-translate-y { - syntax: "*"; - inherits: false; - initial-value: 0; - } + @property --tw-translate-y { + syntax: "*"; + inherits: false; + initial-value: 0; + } - @property --tw-translate-z { - syntax: "*"; - inherits: false; - initial-value: 0; - }" - `) + @property --tw-translate-z { + syntax: "*"; + inherits: false; + initial-value: 0; + }" + `) expect( await run([ 'translate-z', @@ -4307,22 +4307,22 @@ test('translate-3d', async () => { test('rotate', async () => { expect(await run(['rotate-45', '-rotate-45', 'rotate-[123deg]', 'rotate-[0.3_0.7_1_45deg]'])) .toMatchInlineSnapshot(` - ".-rotate-45 { - rotate: -45deg; - } + ".-rotate-45 { + rotate: -45deg; + } - .rotate-45 { - rotate: 45deg; - } + .rotate-45 { + rotate: 45deg; + } - .rotate-\\[0\\.3_0\\.7_1_45deg\\] { - rotate: .3 .7 1 45deg; - } + .rotate-\\[0\\.3_0\\.7_1_45deg\\] { + rotate: .3 .7 1 45deg; + } - .rotate-\\[123deg\\] { - rotate: 123deg; - }" - `) + .rotate-\\[123deg\\] { + rotate: 123deg; + }" + `) expect( await run([ 'rotate', @@ -5042,42 +5042,42 @@ test('transform', async () => { 'backface-hidden', ]), ).toMatchInlineSnapshot(` - ".backface-hidden { - backface-visibility: hidden; - } + ".backface-hidden { + backface-visibility: hidden; + } - .backface-visible { - backface-visibility: visible; - } + .backface-visible { + backface-visibility: visible; + } - .transform-3d { - transform-style: preserve-3d; - } + .transform-3d { + transform-style: preserve-3d; + } - .transform-border { - transform-box: border-box; - } + .transform-border { + transform-box: border-box; + } - .transform-content { - transform-box: content-box; - } + .transform-content { + transform-box: content-box; + } - .transform-fill { - transform-box: fill-box; - } + .transform-fill { + transform-box: fill-box; + } - .transform-flat { - transform-style: flat; - } + .transform-flat { + transform-style: flat; + } - .transform-stroke { - transform-box: stroke-box; - } + .transform-stroke { + transform-box: stroke-box; + } - .transform-view { - transform-box: view-box; - }" - `) + .transform-view { + transform-box: view-box; + }" + `) expect( await run([ '-transform', @@ -5568,26 +5568,26 @@ test('touch-pinch-zoom', async () => { test('select', async () => { expect(await run(['select-none', 'select-text', 'select-all', 'select-auto'])) .toMatchInlineSnapshot(` - ".select-all { - -webkit-user-select: all; - user-select: all; - } + ".select-all { + -webkit-user-select: all; + user-select: all; + } - .select-auto { - -webkit-user-select: auto; - user-select: auto; - } + .select-auto { + -webkit-user-select: auto; + user-select: auto; + } - .select-none { - -webkit-user-select: none; - user-select: none; - } + .select-none { + -webkit-user-select: none; + user-select: none; + } - .select-text { - -webkit-user-select: text; - user-select: text; - }" - `) + .select-text { + -webkit-user-select: text; + user-select: text; + }" + `) expect( await run([ '-select-none', @@ -5696,22 +5696,22 @@ test('--tw-scroll-snap-strictness', async () => { test('scroll-snap-align', async () => { expect(await run(['snap-align-none', 'snap-start', 'snap-end', 'snap-center'])) .toMatchInlineSnapshot(` - ".snap-align-none { - scroll-snap-align: none; - } + ".snap-align-none { + scroll-snap-align: none; + } - .snap-center { - scroll-snap-align: center; - } + .snap-center { + scroll-snap-align: center; + } - .snap-end { - scroll-snap-align: end; - } + .snap-end { + scroll-snap-align: end; + } - .snap-start { - scroll-snap-align: start; - }" - `) + .snap-start { + scroll-snap-align: start; + }" + `) expect( await run([ '-snap-align-none', @@ -7065,22 +7065,22 @@ test('grid-rows', async () => { test('flex-direction', async () => { expect(await run(['flex-row', 'flex-row-reverse', 'flex-col', 'flex-col-reverse'])) .toMatchInlineSnapshot(` - ".flex-col { - flex-direction: column; - } + ".flex-col { + flex-direction: column; + } - .flex-col-reverse { - flex-direction: column-reverse; - } + .flex-col-reverse { + flex-direction: column-reverse; + } - .flex-row { - flex-direction: row; - } + .flex-row { + flex-direction: row; + } - .flex-row-reverse { - flex-direction: row-reverse; - }" - `) + .flex-row-reverse { + flex-direction: row-reverse; + }" + `) expect( await run([ '-flex-row', @@ -7969,31 +7969,31 @@ test('divide-style', async () => { expect( await run(['divide-solid', 'divide-dashed', 'divide-dotted', 'divide-double', 'divide-none']), ).toMatchInlineSnapshot(` - ":where(.divide-dashed > :not(:last-child)) { - --tw-border-style: dashed; - border-style: dashed; - } + ":where(.divide-dashed > :not(:last-child)) { + --tw-border-style: dashed; + border-style: dashed; + } - :where(.divide-dotted > :not(:last-child)) { - --tw-border-style: dotted; - border-style: dotted; - } + :where(.divide-dotted > :not(:last-child)) { + --tw-border-style: dotted; + border-style: dotted; + } - :where(.divide-double > :not(:last-child)) { - --tw-border-style: double; - border-style: double; - } + :where(.divide-double > :not(:last-child)) { + --tw-border-style: double; + border-style: double; + } - :where(.divide-none > :not(:last-child)) { - --tw-border-style: none; - border-style: none; - } + :where(.divide-none > :not(:last-child)) { + --tw-border-style: none; + border-style: none; + } - :where(.divide-solid > :not(:last-child)) { - --tw-border-style: solid; - border-style: solid; - }" - `) + :where(.divide-solid > :not(:last-child)) { + --tw-border-style: solid; + border-style: solid; + }" + `) expect( await run([ 'divide', @@ -8049,20 +8049,16 @@ test('accent', async () => { accent-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { - accent-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { + accent-color: oklab(59.9824% -.06725 -.12414 / .5); } .accent-current { accent-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] { - accent-color: color-mix(in oklab, currentColor 50%, transparent); - } + .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] { + accent-color: color-mix(in oklab, currentColor 50%, transparent); } .accent-inherit { @@ -8085,10 +8081,8 @@ test('accent', async () => { accent-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] { - accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] { + accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .accent-transparent { @@ -8170,20 +8164,16 @@ test('caret', async () => { caret-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { - caret-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { + caret-color: oklab(59.9824% -.06725 -.12414 / .5); } .caret-current { caret-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] { - caret-color: color-mix(in oklab, currentColor 50%, transparent); - } + .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] { + caret-color: color-mix(in oklab, currentColor 50%, transparent); } .caret-inherit { @@ -8206,10 +8196,8 @@ test('caret', async () => { caret-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] { - caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] { + caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .caret-transparent { @@ -8289,20 +8277,16 @@ test('divide-color', async () => { border-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) { - border-color: oklab(59.9824% -.06725 -.12414 / .5); - } + :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) { + border-color: oklab(59.9824% -.06725 -.12414 / .5); } :where(.divide-current > :not(:last-child)) { border-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - :where(.divide-current\\/50 > :not(:last-child)), :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { - border-color: color-mix(in oklab, currentColor 50%, transparent); - } + :where(.divide-current\\/50 > :not(:last-child)), :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { + border-color: color-mix(in oklab, currentColor 50%, transparent); } :where(.divide-inherit > :not(:last-child)) { @@ -8325,10 +8309,8 @@ test('divide-color', async () => { border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - :where(.divide-red-500\\/50 > :not(:last-child)), :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + :where(.divide-red-500\\/50 > :not(:last-child)), :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) { + border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } :where(.divide-transparent > :not(:last-child)) { @@ -8695,18 +8677,18 @@ test('overflow-y', async () => { test('overscroll', async () => { expect(await run(['overscroll-auto', 'overscroll-contain', 'overscroll-none'])) .toMatchInlineSnapshot(` - ".overscroll-auto { - overscroll-behavior: auto; - } + ".overscroll-auto { + overscroll-behavior: auto; + } - .overscroll-contain { - overscroll-behavior: contain; - } + .overscroll-contain { + overscroll-behavior: contain; + } - .overscroll-none { - overscroll-behavior: none; - }" - `) + .overscroll-none { + overscroll-behavior: none; + }" + `) expect( await run([ 'overscroll', @@ -8723,18 +8705,18 @@ test('overscroll', async () => { test('overscroll-x', async () => { expect(await run(['overscroll-x-auto', 'overscroll-x-contain', 'overscroll-x-none'])) .toMatchInlineSnapshot(` - ".overscroll-x-auto { - overscroll-behavior-x: auto; - } + ".overscroll-x-auto { + overscroll-behavior-x: auto; + } - .overscroll-x-contain { - overscroll-behavior-x: contain; - } + .overscroll-x-contain { + overscroll-behavior-x: contain; + } - .overscroll-x-none { - overscroll-behavior-x: none; - }" - `) + .overscroll-x-none { + overscroll-behavior-x: none; + }" + `) expect( await run([ 'overscroll-x', @@ -8751,18 +8733,18 @@ test('overscroll-x', async () => { test('overscroll-y', async () => { expect(await run(['overscroll-y-auto', 'overscroll-y-contain', 'overscroll-y-none'])) .toMatchInlineSnapshot(` - ".overscroll-y-auto { - overscroll-behavior-y: auto; - } + ".overscroll-y-auto { + overscroll-behavior-y: auto; + } - .overscroll-y-contain { - overscroll-behavior-y: contain; - } + .overscroll-y-contain { + overscroll-behavior-y: contain; + } - .overscroll-y-none { - overscroll-behavior-y: none; - }" - `) + .overscroll-y-none { + overscroll-behavior-y: none; + }" + `) expect( await run([ 'overscroll-y', @@ -8904,22 +8886,22 @@ test('whitespace', async () => { test('text-wrap', async () => { expect(await run(['text-wrap', 'text-nowrap', 'text-balance', 'text-pretty'])) .toMatchInlineSnapshot(` - ".text-balance { - text-wrap: balance; - } + ".text-balance { + text-wrap: balance; + } - .text-nowrap { - text-wrap: nowrap; - } + .text-nowrap { + text-wrap: nowrap; + } - .text-pretty { - text-wrap: pretty; - } + .text-pretty { + text-wrap: pretty; + } - .text-wrap { - text-wrap: wrap; - }" - `) + .text-wrap { + text-wrap: wrap; + }" + `) expect( await run([ '-text-wrap', @@ -10241,10 +10223,8 @@ test('bg', async () => { background-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { - background-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { + background-color: oklab(59.9824% -.06725 -.12414 / .5); } .bg-\\[color\\:var\\(--some-var\\)\\] { @@ -10267,10 +10247,8 @@ test('bg', async () => { background-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] { - background-color: color-mix(in oklab, currentColor 50%, transparent); - } + .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] { + background-color: color-mix(in oklab, currentColor 50%, transparent); } .bg-current\\/\\[var\\(--bg-opacity\\)\\] { @@ -10297,10 +10275,8 @@ test('bg', async () => { background-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] { - background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] { + background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .bg-transparent { @@ -10861,36 +10837,11 @@ test('from', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[\\#0088cc\\]\\/50 { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-\\[\\#0088cc\\]\\/50 { - --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .from-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { + .from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); - } - } - .from-\\[color\\:var\\(--my-color\\)\\] { --tw-gradient-from: var(--my-color); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -10916,36 +10867,11 @@ test('from', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-current\\/50 { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-current\\/50 { - --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .from-current\\/\\[0\\.5\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-current\\/\\[0\\.5\\] { - --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .from-current\\/\\[50\\%\\] { + .from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] { + --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-current\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); - } - } - .from-inherit { --tw-gradient-from: inherit; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -10956,36 +10882,11 @@ test('from', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-red-500\\/50 { + .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] { + --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-red-500\\/50 { - --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .from-red-500\\/\\[0\\.5\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-red-500\\/\\[0\\.5\\] { - --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .from-red-500\\/\\[50\\%\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-red-500\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11156,39 +11057,12 @@ test('via', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[\\#0088cc\\]\\/50 { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-\\[\\#0088cc\\]\\/50 { - --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .via-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { + .via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); - } - } - .via-\\[color\\:var\\(--my-color\\)\\] { --tw-gradient-via: var(--my-color); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -11219,39 +11093,12 @@ test('via', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-current\\/50 { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-current\\/50 { - --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .via-current\\/\\[0\\.5\\] { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-current\\/\\[0\\.5\\] { - --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .via-current\\/\\[50\\%\\] { + .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] { + --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-current\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); - } - } - .via-inherit { --tw-gradient-via: inherit; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -11264,39 +11111,12 @@ test('via', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-red-500\\/50 { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-red-500\\/50 { - --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .via-red-500\\/\\[0\\.5\\] { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-red-500\\/\\[0\\.5\\] { - --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .via-red-500\\/\\[50\\%\\] { + .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] { + --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-red-500\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - .via-transparent { --tw-gradient-via: transparent; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -11465,36 +11285,11 @@ test('to', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[\\#0088cc\\]\\/50 { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-\\[\\#0088cc\\]\\/50 { - --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .to-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { + .to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); - } - } - .to-\\[color\\:var\\(--my-color\\)\\] { --tw-gradient-to: var(--my-color); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11520,36 +11315,11 @@ test('to', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-current\\/50 { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-current\\/50 { - --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .to-current\\/\\[0\\.5\\] { + .to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] { + --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-current\\/\\[0\\.5\\] { - --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .to-current\\/\\[50\\%\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-current\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); - } - } - .to-inherit { --tw-gradient-to: inherit; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11560,36 +11330,11 @@ test('to', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-red-500\\/50 { + .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] { + --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-red-500\\/50 { - --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .to-red-500\\/\\[0\\.5\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-red-500\\/\\[0\\.5\\] { - --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .to-red-500\\/\\[50\\%\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-red-500\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - .to-transparent { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11765,18 +11510,18 @@ test('bg-clip', async () => { test('bg-origin', async () => { expect(await run(['bg-origin-border', 'bg-origin-padding', 'bg-origin-content'])) .toMatchInlineSnapshot(` - ".bg-origin-border { - background-origin: border-box; - } + ".bg-origin-border { + background-origin: border-box; + } - .bg-origin-content { - background-origin: content-box; - } + .bg-origin-content { + background-origin: content-box; + } - .bg-origin-padding { - background-origin: padding-box; - }" - `) + .bg-origin-padding { + background-origin: padding-box; + }" + `) expect( await run([ 'bg-origin', @@ -12089,20 +11834,16 @@ test('fill', async () => { fill: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { - fill: oklab(59.9824% -.06725 -.12414 / .5); - } + .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { + fill: oklab(59.9824% -.06725 -.12414 / .5); } .fill-current { fill: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] { - fill: color-mix(in oklab, currentColor 50%, transparent); - } + .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] { + fill: color-mix(in oklab, currentColor 50%, transparent); } .fill-inherit { @@ -12125,10 +11866,8 @@ test('fill', async () => { fill: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] { - fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] { + fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .fill-transparent { @@ -12216,10 +11955,8 @@ test('stroke', async () => { stroke: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { - stroke: oklab(59.9824% -.06725 -.12414 / .5); - } + .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { + stroke: oklab(59.9824% -.06725 -.12414 / .5); } .stroke-\\[color\\:var\\(--my-color\\)\\] { @@ -12242,10 +11979,8 @@ test('stroke', async () => { stroke: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] { - stroke: color-mix(in oklab, currentColor 50%, transparent); - } + .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] { + stroke: color-mix(in oklab, currentColor 50%, transparent); } .stroke-inherit { @@ -12272,10 +12007,8 @@ test('stroke', async () => { stroke: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] { - stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] { + stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .stroke-transparent { @@ -13146,22 +12879,22 @@ test('font-stretch', async () => { test('text-decoration-line', async () => { expect(await run(['underline', 'overline', 'line-through', 'no-underline'])) .toMatchInlineSnapshot(` - ".line-through { - text-decoration-line: line-through; - } + ".line-through { + text-decoration-line: line-through; + } - .no-underline { - text-decoration-line: none; - } + .no-underline { + text-decoration-line: none; + } - .overline { - text-decoration-line: overline; - } + .overline { + text-decoration-line: overline; + } - .underline { - text-decoration-line: underline; - }" - `) + .underline { + text-decoration-line: underline; + }" + `) expect( await run([ '-underline', @@ -13214,20 +12947,16 @@ test('placeholder', async () => { color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { - color: oklab(59.9824% -.06725 -.12414 / .5); - } + .placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { + color: oklab(59.9824% -.06725 -.12414 / .5); } .placeholder-current::placeholder { color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .placeholder-current\\/50::placeholder, .placeholder-current\\/\\[0\\.5\\]::placeholder, .placeholder-current\\/\\[50\\%\\]::placeholder { - color: color-mix(in oklab, currentColor 50%, transparent); - } + .placeholder-current\\/50::placeholder, .placeholder-current\\/\\[0\\.5\\]::placeholder, .placeholder-current\\/\\[50\\%\\]::placeholder { + color: color-mix(in oklab, currentColor 50%, transparent); } .placeholder-inherit::placeholder { @@ -13250,10 +12979,8 @@ test('placeholder', async () => { color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .placeholder-red-500\\/50::placeholder, .placeholder-red-500\\/\\[0\\.5\\]::placeholder, .placeholder-red-500\\/\\[50\\%\\]::placeholder { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .placeholder-red-500\\/50::placeholder, .placeholder-red-500\\/\\[0\\.5\\]::placeholder, .placeholder-red-500\\/\\[50\\%\\]::placeholder { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .placeholder-transparent::placeholder { @@ -13345,10 +13072,8 @@ test('decoration', async () => { text-decoration-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { - text-decoration-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { + text-decoration-color: oklab(59.9824% -.06725 -.12414 / .5); } .decoration-\\[color\\:var\\(--my-color\\)\\] { @@ -13379,12 +13104,10 @@ test('decoration', async () => { text-decoration-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); - text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); - } + .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] { + -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); + text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); } .decoration-inherit { @@ -13399,12 +13122,10 @@ test('decoration', async () => { text-decoration-color: var(--color-red-500); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] { + -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .decoration-transparent { @@ -14684,14 +14405,14 @@ test('content', async () => { test('forced-color-adjust', async () => { expect(await run(['forced-color-adjust-none', 'forced-color-adjust-auto'])) .toMatchInlineSnapshot(` - ".forced-color-adjust-auto { - forced-color-adjust: auto; - } + ".forced-color-adjust-auto { + forced-color-adjust: auto; + } - .forced-color-adjust-none { - forced-color-adjust: none; - }" - `) + .forced-color-adjust-none { + forced-color-adjust: none; + }" + `) expect( await run([ 'forced', @@ -15048,28 +14769,24 @@ test('outline', async () => { outline-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { - outline-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { + outline-color: oklab(59.9824% -.06725 -.12414 / .5); } .outline-\\[black\\] { outline-color: #000; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .outline-\\[black\\]\\/50 { - outline-color: oklab(0% none none / .5); - } + .outline-\\[black\\]\\/50 { + outline-color: oklab(0% none none / .5); + } - .outline-\\[black\\]\\/\\[0\\.5\\] { - outline-color: oklab(0% none none / .5); - } + .outline-\\[black\\]\\/\\[0\\.5\\] { + outline-color: oklab(0% none none / .5); + } - .outline-\\[black\\]\\/\\[50\\%\\] { - outline-color: oklab(0% none none / .5); - } + .outline-\\[black\\]\\/\\[50\\%\\] { + outline-color: oklab(0% none none / .5); } .outline-\\[color\\:var\\(--value\\)\\] { @@ -15092,10 +14809,8 @@ test('outline', async () => { outline-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] { - outline-color: color-mix(in oklab, currentColor 50%, transparent); - } + .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] { + outline-color: color-mix(in oklab, currentColor 50%, transparent); } .outline-inherit { @@ -15106,10 +14821,8 @@ test('outline', async () => { outline-color: var(--color-red-500); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] { - outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] { + outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .outline-transparent { @@ -15522,10 +15235,8 @@ test('text', async () => { color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { - color: oklab(59.9824% -.06725 -.12414 / .5); - } + .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { + color: oklab(59.9824% -.06725 -.12414 / .5); } .text-\\[color\\:var\\(--my-color\\)\\] { @@ -15548,10 +15259,8 @@ test('text', async () => { color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] { - color: color-mix(in oklab, currentColor 50%, transparent); - } + .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] { + color: color-mix(in oklab, currentColor 50%, transparent); } .text-inherit { @@ -15574,10 +15283,8 @@ test('text', async () => { color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .text-transparent { @@ -15705,10 +15412,8 @@ test('shadow', async () => { --tw-shadow-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); } .shadow-\\[color\\:var\\(--value\\)\\] { @@ -15723,10 +15428,8 @@ test('shadow', async () => { --tw-shadow-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklab, currentColor 50%, transparent); - } + .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] { + --tw-shadow-color: color-mix(in oklab, currentColor 50%, transparent); } .shadow-inherit { @@ -15749,10 +15452,8 @@ test('shadow', async () => { --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] { + --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .shadow-transparent { @@ -15933,10 +15634,8 @@ test('inset-shadow', async () => { --tw-inset-shadow-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-inset-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); } .inset-shadow-\\[color\\:var\\(--value\\)\\] { @@ -15951,10 +15650,8 @@ test('inset-shadow', async () => { --tw-inset-shadow-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in oklab, currentColor 50%, transparent); - } + .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] { + --tw-inset-shadow-color: color-mix(in oklab, currentColor 50%, transparent); } .inset-shadow-inherit { @@ -15977,10 +15674,8 @@ test('inset-shadow', async () => { --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] { + --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .inset-shadow-transparent { @@ -16169,10 +15864,8 @@ test('ring', async () => { --tw-ring-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-ring-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-ring-color: oklab(59.9824% -.06725 -.12414 / .5); } .ring-\\[color\\:var\\(--my-color\\)\\] { @@ -16195,10 +15888,8 @@ test('ring', async () => { --tw-ring-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in oklab, currentColor 50%, transparent); - } + .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in oklab, currentColor 50%, transparent); } .ring-inherit { @@ -16221,10 +15912,8 @@ test('ring', async () => { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .ring-transparent { @@ -16514,10 +16203,8 @@ test('inset-ring', async () => { --tw-inset-ring-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-ring-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-inset-ring-color: oklab(59.9824% -.06725 -.12414 / .5); } .inset-ring-\\[color\\:var\\(--my-color\\)\\] { @@ -16540,10 +16227,8 @@ test('inset-ring', async () => { --tw-inset-ring-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in oklab, currentColor 50%, transparent); - } + .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in oklab, currentColor 50%, transparent); } .inset-ring-inherit { @@ -16566,10 +16251,8 @@ test('inset-ring', async () => { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .inset-ring-transparent { @@ -16764,10 +16447,8 @@ test('ring-offset', async () => { --tw-ring-offset-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-ring-offset-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-ring-offset-color: oklab(59.9824% -.06725 -.12414 / .5); } .ring-offset-\\[color\\:var\\(--my-color\\)\\] { @@ -16790,10 +16471,8 @@ test('ring-offset', async () => { --tw-ring-offset-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in oklab, currentColor 50%, transparent); - } + .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in oklab, currentColor 50%, transparent); } .ring-offset-inherit { @@ -16804,10 +16483,8 @@ test('ring-offset', async () => { --tw-ring-offset-color: var(--color-red-500); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .ring-offset-transparent { @@ -17040,7 +16717,7 @@ describe('custom utilities', () => { text-box-edge: cap alphabetic; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:text-trim { text-box-trim: both; text-box-edge: cap alphabetic; @@ -17609,22 +17286,22 @@ describe('custom utilities', () => { expect(await compileCss(input, ['example-1', 'example-0.5', 'example-20%', 'example-2/3'])) .toMatchInlineSnapshot(` - ".example-0\\.5 { - --value-as-number: .5; - } + ".example-0\\.5 { + --value-as-number: .5; + } - .example-1 { - --value-as-number: 1; - } + .example-1 { + --value-as-number: 1; + } - .example-2\\/3 { - --value-as-ratio: 2 / 3; - } + .example-2\\/3 { + --value-as-ratio: 2 / 3; + } - .example-20\\% { - --value-as-percentage: 20%; - }" - `) + .example-20\\% { + --value-as-percentage: 20%; + }" + `) expect( await compileCss(input, [ 'example-1.23', diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index eedeefbc04f4..6e0bd61bab6e 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -793,31 +793,31 @@ test('default breakpoints', async () => { ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 640px) { + "@media (min-width: 640px) { .sm\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:flex { display: flex; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .xl\\:flex { display: flex; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .\\32 xl\\:flex { display: flex; } @@ -853,7 +853,7 @@ test('custom breakpoint', async () => { ['10xl:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 5000px) { + "@media (min-width: 5000px) { .\\31 0xl\\:flex { display: flex; } @@ -876,19 +876,19 @@ test('max-*', async () => { ['max-lg:flex', 'max-sm:flex', 'max-md:flex'], ), ).toMatchInlineSnapshot(` - "@media (width < 1024px) { + "@media not (min-width: 1024px) { .max-lg\\:flex { display: flex; } } - @media (width < 768px) { + @media not (min-width: 768px) { .max-md\\:flex { display: flex; } } - @media (width < 640px) { + @media not (min-width: 640px) { .max-sm\\:flex { display: flex; } @@ -925,19 +925,19 @@ test('min-*', async () => { ['min-lg:flex', 'min-sm:flex', 'min-md:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 640px) { + "@media (min-width: 640px) { .min-sm\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .min-md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .min-lg\\:flex { display: flex; } @@ -976,30 +976,30 @@ 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) { - @media (width < 640px) { + "@media (min-width: 280px) { + @media not (min-width: 640px) { .min-xs\\:max-sm\\:flex { display: flex; } } } - @media (width >= 640px) { - @media (width < 1280px) { + @media (min-width: 640px) { + @media not (min-width: 1280px) { .min-sm\\:max-xl\\:flex { display: flex; } } - @media (width < 1024px) { + @media not (min-width: 1024px) { .min-sm\\:max-lg\\:flex { display: flex; } } } - @media (width >= 768px) { - @media (width < 1024px) { + @media (min-width: 768px) { + @media not (min-width: 1024px) { .min-md\\:max-lg\\:flex { display: flex; } @@ -1023,24 +1023,24 @@ 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) { + "@media (min-width: 640px) { .sm\\:flex { display: flex; } - @media (width < 1024px) { + @media not (min-width: 1024px) { .min-sm\\:max-lg\\:flex { display: flex; } } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex { display: flex; } - @media (width < 1024px) { + @media not (min-width: 1024px) { .min-md\\:max-lg\\:flex { display: flex; } @@ -1079,49 +1079,49 @@ test('min, max and unprefixed breakpoints', async () => { ], ), ).toMatchInlineSnapshot(` - "@media (width < 1024px) { + "@media not (min-width: 1024px) { .max-lg\\:flex { display: flex; } } - @media (width < 1000px) { + @media not (min-width: 1000px) { .max-\\[1000px\\]\\:flex { display: flex; } } - @media (width < 768px) { + @media not (min-width: 768px) { .max-md\\:flex { display: flex; } } - @media (width < 640px) { + @media not (min-width: 640px) { .max-sm\\:flex { display: flex; } } - @media (width >= 640px) { + @media (min-width: 640px) { .min-sm\\:flex, .sm\\:flex { display: flex; } } - @media (width >= 700px) { + @media (min-width: 700px) { .min-\\[700px\\]\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex, .min-md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:flex, .min-lg\\:flex { display: flex; } @@ -1154,121 +1154,121 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti 'max-[12vh]:flex', ]), ).toMatchInlineSnapshot(` - "@media (width < calc(1000px + 12em)) { + "@media not (min-width: calc(1000px + 12em)) { .max-\\[calc\\(1000px\\+12em\\)\\]\\:flex { display: flex; } } - @media (width < calc(50vh + 12em)) { + @media not (min-width: calc(50vh + 12em)) { .max-\\[calc\\(50vh\\+12em\\)\\]\\:flex { display: flex; } } - @media (width < 12em) { + @media not (min-width: 12em) { .max-\\[12em\\]\\:flex { display: flex; } } - @media (width < 10em) { + @media not (min-width: 10em) { .max-\\[10em\\]\\:flex { display: flex; } } - @media (width < 12px) { + @media not (min-width: 12px) { .max-\\[12px\\]\\:flex { display: flex; } } - @media (width < 10px) { + @media not (min-width: 10px) { .max-\\[10px\\]\\:flex { display: flex; } } - @media (width < 12rem) { + @media not (min-width: 12rem) { .max-\\[12rem\\]\\:flex { display: flex; } } - @media (width < 10rem) { + @media not (min-width: 10rem) { .max-\\[10rem\\]\\:flex { display: flex; } } - @media (width < 12vh) { + @media not (min-width: 12vh) { .max-\\[12vh\\]\\:flex { display: flex; } } - @media (width < 10vh) { + @media not (min-width: 10vh) { .max-\\[10vh\\]\\:flex { display: flex; } } - @media (width >= calc(1000px + 12em)) { + @media (min-width: calc(1000px + 12em)) { .min-\\[calc\\(1000px\\+12em\\)\\]\\:flex { display: flex; } } - @media (width >= calc(50vh + 12em)) { + @media (min-width: calc(50vh + 12em)) { .min-\\[calc\\(50vh\\+12em\\)\\]\\:flex { display: flex; } } - @media (width >= 10em) { + @media (min-width: 10em) { .min-\\[10em\\]\\:flex { display: flex; } } - @media (width >= 12em) { + @media (min-width: 12em) { .min-\\[12em\\]\\:flex { display: flex; } } - @media (width >= 10px) { + @media (min-width: 10px) { .min-\\[10px\\]\\:flex { display: flex; } } - @media (width >= 12px) { + @media (min-width: 12px) { .min-\\[12px\\]\\:flex { display: flex; } } - @media (width >= 10rem) { + @media (min-width: 10rem) { .min-\\[10rem\\]\\:flex { display: flex; } } - @media (width >= 12rem) { + @media (min-width: 12rem) { .min-\\[12rem\\]\\:flex { display: flex; } } - @media (width >= 10vh) { + @media (min-width: 10vh) { .min-\\[10vh\\]\\:flex { display: flex; } } - @media (width >= 12vh) { + @media (min-width: 12vh) { .min-\\[12vh\\]\\:flex { display: flex; } @@ -1502,25 +1502,25 @@ test('not', async () => { } } - @media (width >= 640px) { + @media (min-width: 640px) { .not-max-sm\\:flex { display: flex; } } - @media (width >= 130px) { + @media (min-width: 130px) { .not-max-\\[130px\\]\\:flex { display: flex; } } - @media (width < 130px) { + @media not (min-width: 130px) { .not-min-\\[130px\\]\\:flex { display: flex; } } - @media (width < 640px) { + @media not (min-width: 640px) { .not-min-sm\\:flex, .not-sm\\:flex { display: flex; } @@ -2092,61 +2092,61 @@ test('container queries', async () => { ], ), ).toMatchInlineSnapshot(` - "@container name (width < 1024px) { + "@container name not (min-width: 1024px) { .\\@max-lg\\/name\\:flex { display: flex; } } - @container (width < 1024px) { + @container not (min-width: 1024px) { .\\@max-lg\\:flex { display: flex; } } - @container name (width < 456px) { + @container name not (min-width: 456px) { .\\@max-\\[456px\\]\\/name\\:flex { display: flex; } } - @container (width < 123px) { + @container not (min-width: 123px) { .\\@max-\\[123px\\]\\:flex { display: flex; } } - @container (width >= 123px) { + @container (min-width: 123px) { .\\@\\[123px\\]\\:flex, .\\@min-\\[123px\\]\\:flex { display: flex; } } - @container name (width >= 456px) { + @container name (min-width: 456px) { .\\@\\[456px\\]\\/name\\:flex, .\\@min-\\[456px\\]\\/name\\:flex { display: flex; } } - @container name (width >= 1024px) { + @container name (min-width: 1024px) { .\\@lg\\/name\\:flex { display: flex; } } - @container (width >= 1024px) { + @container (min-width: 1024px) { .\\@lg\\:flex { display: flex; } } - @container name (width >= 1024px) { + @container name (min-width: 1024px) { .\\@min-lg\\/name\\:flex { display: flex; } } - @container (width >= 1024px) { + @container (min-width: 1024px) { .\\@min-lg\\:flex { display: flex; } @@ -2340,31 +2340,31 @@ test('variant order', async () => { } } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:flex { display: flex; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .xl\\:flex { display: flex; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .\\32 xl\\:flex { display: flex; }