From 60b0da90cee9e71a2d3117053cc4cc2d6e9196fe Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 3 Apr 2025 17:12:34 +0200 Subject: [PATCH] =?UTF-8?q?Polyfill:=20Fall=20back=20to=20first=20color=20?= =?UTF-8?q?value=20when=20`color-mix(=E2=80=A6)`=20contains=20unresolvable?= =?UTF-8?q?=20`var(=E2=80=A6)`=20(#17513)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR further improves the `color-mix(…)` polyfill to create a reasonable fallback if dynamic values that can not statically be resolved are used. This refers to either the use of `currentcolor` or any variables that are not static theme variables. Here are two examples that now generate a reasonable fallback instead of not showing any color at all: ```css .text-\\(--my-color\\)\\/\\(--my-opacity\\) { color: var(--my-color); } @supports (color: color-mix(in lab, red, red)) { .text-\\(--my-color\\)\\/\\(--my-opacity\\) { color: color-mix(in oklab, var(--my-color) var(--my-opacity), transparent); } } ``` ```css .text-current\\/50 { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { .text-current\\/50 { color: color-mix(in oklab, currentColor 50%, transparent); } } ``` ## Test plan - Made sure the test diffs are looking reasonable - Tested this on a production site with `

shadow test

` - Browsers that do not support `color-mix(…)` will properly show a red shadow now albeit with 100% opacity: iOS 15.5 and Chrome 110 - Browsers that I have tested to make sure it still works there with opacity: Firefox 127, Firefox 128, Latest Chrome, Safari, Firefox - Browsers that do show a black shadow because of `var(…)var(…)` being chained with no space by lightningcss: Chrome 111 --- CHANGELOG.md | 1 + integrations/cli/index.test.ts | 5 +- .../src/__snapshots__/index.test.ts.snap | 8 +- .../src/__snapshots__/index.test.ts.snap | 8 +- .../src/__snapshots__/utilities.test.ts.snap | 216 ++- packages/tailwindcss/src/ast.ts | 57 +- .../tailwindcss/src/compat/plugin-api.test.ts | 47 +- .../tailwindcss/src/css-functions.test.ts | 16 +- packages/tailwindcss/src/index.test.ts | 113 +- packages/tailwindcss/src/utilities.test.ts | 1588 +++++++++++++++-- 10 files changed, 1754 insertions(+), 305 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 87585fd51..a14843895 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix `drop-shadow-*` utilities that use multiple shadows in `@theme inline` ([#17515](https://github.com/tailwindlabs/tailwindcss/pull/17515)) - PostCSS: Fix race condition when two changes are queued concurrently ([#17514](https://github.com/tailwindlabs/tailwindcss/pull/17514)) - PostCSS: Ensure we process files containing an `@tailwind utilities;` directive ([#17514](https://github.com/tailwindlabs/tailwindcss/pull/17514)) +- Ensure the `color-mix(…)` polyfill creates fallbacks even when using colors that can not be statically analyzed ([#17513](https://github.com/tailwindlabs/tailwindcss/pull/17513)) ## [4.1.1] - 2025-04-02 diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts index a42ac4292..d30f6e24b 100644 --- a/integrations/cli/index.test.ts +++ b/integrations/cli/index.test.ts @@ -1711,7 +1711,10 @@ test( } @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 lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } } } textarea { diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 3fb7d2c33..c8178f7df 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -173,7 +173,13 @@ 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); + color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + ::placeholder { + color: color-mix(in oklab, currentcolor 50%, transparent); + } } } diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 05d26ff6e..e8159b0f6 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -287,7 +287,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 lab, red, red)) { + ::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 4cb55a6f9..3f5fd56b7 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -91,28 +91,34 @@ exports[`border-* 1`] = ` border-color: oklab(59.9824% -.067 -.124 / .5); } -.border-\\[color\\:var\\(--my-color\\)\\] { +.border-\\[color\\:var\\(--my-color\\)\\], .border-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-color: var(--my-color); } -.border-\\[color\\:var\\(--my-color\\)\\]\\/50 { - border-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-\\[var\\(--my-color\\)\\] { +.border-\\[var\\(--my-color\\)\\], .border-\\[var\\(--my-color\\)\\]\\/50 { border-color: var(--my-color); } -.border-\\[var\\(--my-color\\)\\]\\/50 { - border-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-\\[var\\(--my-color\\)\\]\\/50 { + border-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-current { +.border-current, .border-current\\/50 { border-color: currentColor; } -.border-current\\/50 { - border-color: color-mix(in oklab, currentcolor 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-current\\/50 { + border-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .border-inherit { @@ -265,28 +271,34 @@ exports[`border-b-* 1`] = ` border-bottom-color: oklab(59.9824% -.067 -.124 / .5); } -.border-b-\\[color\\:var\\(--my-color\\)\\] { +.border-b-\\[color\\:var\\(--my-color\\)\\], .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-bottom-color: var(--my-color); } -.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 { - border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-b-\\[var\\(--my-color\\)\\] { +.border-b-\\[var\\(--my-color\\)\\], .border-b-\\[var\\(--my-color\\)\\]\\/50 { border-bottom-color: var(--my-color); } -.border-b-\\[var\\(--my-color\\)\\]\\/50 { - border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-b-\\[var\\(--my-color\\)\\]\\/50 { + border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-b-current { +.border-b-current, .border-b-current\\/50 { border-bottom-color: currentColor; } -.border-b-current\\/50 { - border-bottom-color: color-mix(in oklab, currentcolor 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-b-current\\/50 { + border-bottom-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .border-b-inherit { @@ -439,28 +451,34 @@ exports[`border-e-* 1`] = ` border-inline-end-color: oklab(59.9824% -.067 -.124 / .5); } -.border-e-\\[color\\:var\\(--my-color\\)\\] { +.border-e-\\[color\\:var\\(--my-color\\)\\], .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-end-color: var(--my-color); } -.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 { - border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-e-\\[var\\(--my-color\\)\\] { +.border-e-\\[var\\(--my-color\\)\\], .border-e-\\[var\\(--my-color\\)\\]\\/50 { border-inline-end-color: var(--my-color); } -.border-e-\\[var\\(--my-color\\)\\]\\/50 { - border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-e-\\[var\\(--my-color\\)\\]\\/50 { + border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-e-current { +.border-e-current, .border-e-current\\/50 { 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 lab, red, red)) { + .border-e-current\\/50 { + border-inline-end-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .border-e-inherit { @@ -613,28 +631,34 @@ exports[`border-l-* 1`] = ` border-left-color: oklab(59.9824% -.067 -.124 / .5); } -.border-l-\\[color\\:var\\(--my-color\\)\\] { +.border-l-\\[color\\:var\\(--my-color\\)\\], .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-left-color: var(--my-color); } -.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 { - border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-l-\\[var\\(--my-color\\)\\] { +.border-l-\\[var\\(--my-color\\)\\], .border-l-\\[var\\(--my-color\\)\\]\\/50 { border-left-color: var(--my-color); } -.border-l-\\[var\\(--my-color\\)\\]\\/50 { - border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-l-\\[var\\(--my-color\\)\\]\\/50 { + border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-l-current { +.border-l-current, .border-l-current\\/50 { border-left-color: currentColor; } -.border-l-current\\/50 { - border-left-color: color-mix(in oklab, currentcolor 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-l-current\\/50 { + border-left-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .border-l-inherit { @@ -787,28 +811,34 @@ exports[`border-r-* 1`] = ` border-right-color: oklab(59.9824% -.067 -.124 / .5); } -.border-r-\\[color\\:var\\(--my-color\\)\\] { +.border-r-\\[color\\:var\\(--my-color\\)\\], .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-right-color: var(--my-color); } -.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 { - border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-r-\\[var\\(--my-color\\)\\] { +.border-r-\\[var\\(--my-color\\)\\], .border-r-\\[var\\(--my-color\\)\\]\\/50 { border-right-color: var(--my-color); } -.border-r-\\[var\\(--my-color\\)\\]\\/50 { - border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-r-\\[var\\(--my-color\\)\\]\\/50 { + border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-r-current { +.border-r-current, .border-r-current\\/50 { border-right-color: currentColor; } -.border-r-current\\/50 { - border-right-color: color-mix(in oklab, currentcolor 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-r-current\\/50 { + border-right-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .border-r-inherit { @@ -961,28 +991,34 @@ exports[`border-s-* 1`] = ` border-inline-start-color: oklab(59.9824% -.067 -.124 / .5); } -.border-s-\\[color\\:var\\(--my-color\\)\\] { +.border-s-\\[color\\:var\\(--my-color\\)\\], .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-start-color: var(--my-color); } -.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 { - border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-s-\\[var\\(--my-color\\)\\] { +.border-s-\\[var\\(--my-color\\)\\], .border-s-\\[var\\(--my-color\\)\\]\\/50 { border-inline-start-color: var(--my-color); } -.border-s-\\[var\\(--my-color\\)\\]\\/50 { - border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-s-\\[var\\(--my-color\\)\\]\\/50 { + border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-s-current { +.border-s-current, .border-s-current\\/50 { 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 lab, red, red)) { + .border-s-current\\/50 { + border-inline-start-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .border-s-inherit { @@ -1135,28 +1171,34 @@ exports[`border-t-* 1`] = ` border-top-color: oklab(59.9824% -.067 -.124 / .5); } -.border-t-\\[color\\:var\\(--my-color\\)\\] { +.border-t-\\[color\\:var\\(--my-color\\)\\], .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-top-color: var(--my-color); } -.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 { - border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-t-\\[var\\(--my-color\\)\\] { +.border-t-\\[var\\(--my-color\\)\\], .border-t-\\[var\\(--my-color\\)\\]\\/50 { border-top-color: var(--my-color); } -.border-t-\\[var\\(--my-color\\)\\]\\/50 { - border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-t-\\[var\\(--my-color\\)\\]\\/50 { + border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-t-current { +.border-t-current, .border-t-current\\/50 { border-top-color: currentColor; } -.border-t-current\\/50 { - border-top-color: color-mix(in oklab, currentcolor 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-t-current\\/50 { + border-top-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .border-t-inherit { @@ -1309,28 +1351,34 @@ exports[`border-x-* 1`] = ` border-inline-color: oklab(59.9824% -.067 -.124 / .5); } -.border-x-\\[color\\:var\\(--my-color\\)\\] { +.border-x-\\[color\\:var\\(--my-color\\)\\], .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-color: var(--my-color); } -.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { - border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-x-\\[var\\(--my-color\\)\\] { +.border-x-\\[var\\(--my-color\\)\\], .border-x-\\[var\\(--my-color\\)\\]\\/50 { border-inline-color: var(--my-color); } -.border-x-\\[var\\(--my-color\\)\\]\\/50 { - border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-x-\\[var\\(--my-color\\)\\]\\/50 { + border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-x-current { +.border-x-current, .border-x-current\\/50 { border-inline-color: currentColor; } -.border-x-current\\/50 { - border-inline-color: color-mix(in oklab, currentcolor 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-x-current\\/50 { + border-inline-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .border-x-inherit { @@ -1483,28 +1531,34 @@ exports[`border-y-* 1`] = ` border-block-color: oklab(59.9824% -.067 -.124 / .5); } -.border-y-\\[color\\:var\\(--my-color\\)\\] { +.border-y-\\[color\\:var\\(--my-color\\)\\], .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-color: var(--my-color); } -.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { - border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-y-\\[var\\(--my-color\\)\\] { +.border-y-\\[var\\(--my-color\\)\\], .border-y-\\[var\\(--my-color\\)\\]\\/50 { border-block-color: var(--my-color); } -.border-y-\\[var\\(--my-color\\)\\]\\/50 { - border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-y-\\[var\\(--my-color\\)\\]\\/50 { + border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } -.border-y-current { +.border-y-current, .border-y-current\\/50 { border-block-color: currentColor; } -.border-y-current\\/50 { - border-block-color: color-mix(in oklab, currentcolor 50%, transparent); +@supports (color: color-mix(in lab, red, red)) { + .border-y-current\\/50 { + border-block-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .border-y-inherit { diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index b982030a2..af76b0772 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -328,37 +328,59 @@ export function optimizeAst( if (polyfills & Polyfills.ColorMix && node.value.includes('color-mix(')) { let ast = ValueParser.parse(node.value) - let didGenerateFallback = false - ValueParser.walk(ast, (node) => { + let requiresPolyfill = false + ValueParser.walk(ast, (node, { replaceWith }) => { if (node.kind !== 'function' || node.value !== 'color-mix') return + let containsUnresolvableVars = false + let containsCurrentcolor = false ValueParser.walk(node.nodes, (node, { replaceWith }) => { + if (node.kind == 'word' && node.value.toLowerCase() === 'currentcolor') { + containsCurrentcolor = true + requiresPolyfill = true + return + } if (node.kind !== 'function' || node.value !== 'var') return let firstChild = node.nodes[0] if (!firstChild || firstChild.kind !== 'word') return - let inlinedColor = designSystem.theme.resolveValue(null, [firstChild.value as any]) - if (!inlinedColor) return + requiresPolyfill = true + + let inlinedColor = designSystem.theme.resolveValue(null, [firstChild.value as any]) + if (!inlinedColor) { + containsUnresolvableVars = true + return + } - didGenerateFallback = true replaceWith({ kind: 'word', value: inlinedColor }) }) - // Change the colorspace to `srgb` since the fallback values should not be represented as - // `oklab(…)` functions again as their support in Safari <16 is very limited. - let colorspace = node.nodes[2] - if ( - colorspace.kind === 'word' && - (colorspace.value === 'oklab' || - colorspace.value === 'oklch' || - colorspace.value === 'lab' || - colorspace.value === 'lch') - ) { - colorspace.value = 'srgb' + if (containsUnresolvableVars || containsCurrentcolor) { + let separatorIndex = node.nodes.findIndex( + (node) => node.kind === 'separator' && node.value.trim().includes(','), + ) + if (separatorIndex === -1) return + let firstColorValue = + node.nodes.length > separatorIndex ? node.nodes[separatorIndex + 1] : null + if (!firstColorValue) return + replaceWith(firstColorValue) + } else if (requiresPolyfill) { + // Change the colorspace to `srgb` since the fallback values should not be represented as + // `oklab(…)` functions again as their support in Safari <16 is very limited. + let colorspace = node.nodes[2] + if ( + colorspace.kind === 'word' && + (colorspace.value === 'oklab' || + colorspace.value === 'oklch' || + colorspace.value === 'lab' || + colorspace.value === 'lch') + ) { + colorspace.value = 'srgb' + } } }) - if (didGenerateFallback) { + if (requiresPolyfill) { let fallback = { ...node, value: ValueParser.toCss(ast), @@ -366,6 +388,7 @@ export function optimizeAst( let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [node]) parent.push(fallback, colorMixQuery) + return } } diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index 8539b4fcc..dc415eb1a 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -291,7 +291,10 @@ describe('theme', async () => { color: color-mix(in oklab, #ef4444 50%, transparent); } .variable { - color: color-mix(in oklab, #ef4444 var(--opacity), transparent); + color: #ef4444; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, #ef4444 var(--opacity), transparent); + } } " `) @@ -365,7 +368,10 @@ describe('theme', async () => { 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); + color: rgba(255 0 0 / ); + @supports (color: color-mix(in lab, red, red)) { + 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); @@ -374,7 +380,10 @@ describe('theme', async () => { 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); + color: rgb(255 0 0 / 1); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent); + } } " `) @@ -3749,24 +3758,28 @@ describe('matchUtilities()', () => { scrollbar-width: 2px; } - .scrollbar-\\[color\\:var\\(--my-color\\)\\] { + .scrollbar-\\[color\\:var\\(--my-color\\)\\], .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 { scrollbar-color: var(--my-color); } - .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 { - scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 { + scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } .scrollbar-\\[length\\:var\\(--my-width\\)\\] { scrollbar-width: var(--my-width); } - .scrollbar-\\[var\\(--my-color\\)\\] { + .scrollbar-\\[var\\(--my-color\\)\\], .scrollbar-\\[var\\(--my-color\\)\\]\\/50 { scrollbar-color: var(--my-color); } - .scrollbar-\\[var\\(--my-color\\)\\]\\/50 { - scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-\\[var\\(--my-color\\)\\]\\/50 { + scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } .scrollbar-black { @@ -3840,7 +3853,13 @@ describe('matchUtilities()', () => { ).trim(), ).toMatchInlineSnapshot(` ".scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] { - scrollbar-color: color-mix(in oklab, var(--my-color) 25%, transparent); + scrollbar-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] { + scrollbar-color: color-mix(in oklab, var(--my-color) 25%, transparent); + } } .scrollbar-black { @@ -3855,12 +3874,14 @@ describe('matchUtilities()', () => { scrollbar-color: oklab(0% none none / .5); } - .scrollbar-current { + .scrollbar-current, .scrollbar-current\\/45 { scrollbar-color: currentcolor; } - .scrollbar-current\\/45 { - scrollbar-color: color-mix(in oklab, currentcolor 45%, transparent); + @supports (color: color-mix(in lab, red, 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 184a63806..37747e32f 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -602,7 +602,13 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` ".red { - color: color-mix(in oklab, red var(--opacity), transparent); + color: red; + } + + @supports (color: color-mix(in lab, red, red)) { + .red { + color: color-mix(in oklab, red var(--opacity), transparent); + } }" `) }) @@ -620,7 +626,13 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` ".red { - color: color-mix(in oklab, red var(--opacity, 50%), transparent); + color: red; + } + + @supports (color: color-mix(in lab, red, red)) { + .red { + color: color-mix(in oklab, red var(--opacity, 50%), transparent); + } }" `) }) diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 8c0e41c0f..14aaf18c7 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -258,7 +258,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 lab, red, red)) { + .\\[color\\:var\\(--my-color\\)\\]\\/50 { + color: color-mix(in oklab, var(--my-color) 50%, transparent); + } }" `) }) @@ -4896,7 +4902,55 @@ describe('`color-mix(…)` polyfill', () => { `) }) - it('does not replace `currentcolor` inside `color-mix(…)`', async () => { + it('uses the first color value as the fallback when the `color-mix(…)` function contains non-theme variables', async () => { + await expect( + compileCss( + css` + @theme { + --color-red-500: oklch(63.7% 0.237 25.331); + } + @tailwind utilities; + `, + ['text-(--my-color)/50', 'text-red-500/(--my-opacity)', 'text-(--my-color)/(--my-opacity)'], + ), + ).resolves.toMatchInlineSnapshot(` + ":root, :host { + --color-red-500: oklch(63.7% .237 25.331); + } + + .text-\\(--my-color\\)\\/\\(--my-opacity\\) { + color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .text-\\(--my-color\\)\\/\\(--my-opacity\\) { + color: color-mix(in oklab, var(--my-color) var(--my-opacity), transparent); + } + } + + .text-\\(--my-color\\)\\/50 { + color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .text-\\(--my-color\\)\\/50 { + color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .text-red-500\\/\\(--my-opacity\\) { + color: oklch(63.7% .237 25.331); + } + + @supports (color: color-mix(in lab, red, red)) { + .text-red-500\\/\\(--my-opacity\\) { + color: color-mix(in oklab, var(--color-red-500) var(--my-opacity), transparent); + } + }" + `) + }) + + it('uses the first color value as the fallback when the `color-mix(…)` function contains currentcolor', async () => { await expect( compileCss( css` @@ -4906,7 +4960,60 @@ describe('`color-mix(…)` polyfill', () => { ), ).resolves.toMatchInlineSnapshot(` ".text-current\\/50 { - color: color-mix(in oklab, currentcolor 50%, transparent); + color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .text-current\\/50 { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + }" + `) + }) + + it('uses the first color value of the inner most `color-mix(…)` function as the fallback when nested `color-mix(…)` function all contain non-theme variables', async () => { + await expect( + compileCss( + css` + @tailwind utilities; + .stacked { + color: color-mix( + in oklab, + color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent) + var(--my-outer-opacity), + transparent + ); + } + `, + [], + ), + ).resolves.toMatchInlineSnapshot(` + ".stacked { + color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .stacked { + color: color-mix(in oklab, color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent) var(--my-outer-opacity), transparent); + } + }" + `) + }) + + it('does not create a fallback when all color values are statically analyzable (lightningcss will flatten this)', async () => { + await expect( + compileCss( + css` + @theme inline { + --color-red-500: oklch(63.7% 0.237 25.331); + } + @tailwind utilities; + `, + ['text-red-500/50'], + ), + ).resolves.toMatchInlineSnapshot(` + ".text-red-500\\/50 { + color: oklab(63.7% .214 .101 / .5); }" `) }) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 5106c1259..6544129c4 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -8447,12 +8447,34 @@ test('accent', async () => { accent-color: oklab(59.9824% -.067 -.124 / .5); } - .accent-current { + .accent-current, .accent-current\\/50 { 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 lab, red, red)) { + .accent-current\\/50 { + accent-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .accent-current\\/\\[0\\.5\\] { + accent-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .accent-current\\/\\[0\\.5\\] { + accent-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .accent-current\\/\\[50\\%\\] { + accent-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .accent-current\\/\\[50\\%\\] { + accent-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .accent-inherit { @@ -8606,12 +8628,34 @@ test('caret', async () => { caret-color: oklab(59.9824% -.067 -.124 / .5); } - .caret-current { + .caret-current, .caret-current\\/50 { 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 lab, red, red)) { + .caret-current\\/50 { + caret-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .caret-current\\/\\[0\\.5\\] { + caret-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .caret-current\\/\\[0\\.5\\] { + caret-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .caret-current\\/\\[50\\%\\] { + caret-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .caret-current\\/\\[50\\%\\] { + caret-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .caret-inherit { @@ -8763,12 +8807,34 @@ test('divide-color', async () => { border-color: oklab(59.9824% -.067 -.124 / .5); } - :where(.divide-current > :not(:last-child)) { + :where(.divide-current > :not(:last-child)), :where(.divide-current\\/50 > :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 lab, red, red)) { + :where(.divide-current\\/50 > :not(:last-child)) { + border-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) { + border-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) { + border-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { + border-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { + border-color: color-mix(in oklab, currentcolor 50%, transparent); + } } :where(.divide-inherit > :not(:last-child)) { @@ -10772,32 +10838,104 @@ test('bg', async () => { background-color: oklab(59.9824% -.067 -.124 / .5); } - .bg-\\[color\\:var\\(--some-var\\)\\] { + .bg-\\[color\\:var\\(--some-var\\)\\], .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 { background-color: var(--some-var); } - .bg-\\[color\\:var\\(--some-var\\)\\]\\/50, .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\], .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] { - background-color: color-mix(in oklab, var(--some-var) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 { + background-color: color-mix(in oklab, var(--some-var) 50%, transparent); + } } - .bg-\\[var\\(--some-var\\)\\] { + .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] { background-color: var(--some-var); } - .bg-\\[var\\(--some-var\\)\\]\\/50, .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\], .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] { - background-color: color-mix(in oklab, var(--some-var) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] { + background-color: color-mix(in oklab, var(--some-var) 50%, transparent); + } } - .bg-current { + .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] { + background-color: var(--some-var); + } + + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] { + background-color: color-mix(in oklab, var(--some-var) 50%, transparent); + } + } + + .bg-\\[var\\(--some-var\\)\\], .bg-\\[var\\(--some-var\\)\\]\\/50 { + background-color: var(--some-var); + } + + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[var\\(--some-var\\)\\]\\/50 { + background-color: color-mix(in oklab, var(--some-var) 50%, transparent); + } + } + + .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] { + background-color: var(--some-var); + } + + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] { + background-color: color-mix(in oklab, var(--some-var) 50%, transparent); + } + } + + .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] { + background-color: var(--some-var); + } + + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] { + background-color: color-mix(in oklab, var(--some-var) 50%, transparent); + } + } + + .bg-current, .bg-current\\/50 { 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 lab, red, red)) { + .bg-current\\/50 { + background-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .bg-current\\/\\[0\\.5\\] { + background-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .bg-current\\/\\[0\\.5\\] { + background-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .bg-current\\/\\[50\\%\\] { + background-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .bg-current\\/\\[50\\%\\] { + background-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .bg-current\\/\\[var\\(--bg-opacity\\)\\] { - background-color: color-mix(in oklab, currentcolor var(--bg-opacity), transparent); + background-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .bg-current\\/\\[var\\(--bg-opacity\\)\\] { + background-color: color-mix(in oklab, currentcolor var(--bg-opacity), transparent); + } } .bg-inherit { @@ -11528,7 +11666,7 @@ test('bg', async () => { ), ).toMatchInlineSnapshot(` ".bg-current\\/custom { - background-color: color-mix(in srgb, currentcolor var(--custom-opacity), transparent); + background-color: currentColor; } @supports (color: color-mix(in lab, red, red)) { @@ -11538,7 +11676,7 @@ test('bg', async () => { } .bg-current\\/half { - background-color: color-mix(in srgb, currentcolor .5, transparent); + background-color: currentColor; } @supports (color: color-mix(in lab, red, red)) { @@ -11712,36 +11850,105 @@ 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-\\[color\\:var\\(--my-color\\)\\] { + .from-\\[color\\:var\\(--my-color\\)\\], .from-\\[color\\:var\\(--my-color\\)\\]\\/50 { --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)); } - .from-\\[color\\:var\\(--my-color\\)\\]\\/50, .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in oklab, var(--my-color) 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 lab, red, red)) { + .from-\\[color\\:var\\(--my-color\\)\\]\\/50 { + --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .from-\\[var\\(--my-color\\)\\] { + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --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)); } - .from-\\[var\\(--my-color\\)\\]\\/50, .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --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)); } - .from-current { + @supports (color: color-mix(in lab, red, red)) { + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .from-\\[var\\(--my-color\\)\\], .from-\\[var\\(--my-color\\)\\]\\/50 { + --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)); + } + + @supports (color: color-mix(in lab, red, red)) { + .from-\\[var\\(--my-color\\)\\]\\/50 { + --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --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)); + } + + @supports (color: color-mix(in lab, red, red)) { + .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --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)); + } + + @supports (color: color-mix(in lab, red, red)) { + .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .from-current, .from-current\\/50 { --tw-gradient-from: currentcolor; --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); + @supports (color: color-mix(in lab, red, red)) { + .from-current\\/50 { + --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .from-current\\/\\[0\\.5\\] { + --tw-gradient-from: currentcolor; --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 lab, red, red)) { + .from-current\\/\\[0\\.5\\] { + --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .from-current\\/\\[50\\%\\] { + --tw-gradient-from: currentcolor; + --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 lab, red, 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)); @@ -11977,42 +12184,114 @@ test('via', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[color\\:var\\(--my-color\\)\\] { + .via-\\[color\\:var\\(--my-color\\)\\], .via-\\[color\\:var\\(--my-color\\)\\]\\/50 { --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); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[color\\:var\\(--my-color\\)\\]\\/50, .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in oklab, var(--my-color) 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 lab, red, red)) { + .via-\\[color\\:var\\(--my-color\\)\\]\\/50 { + --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .via-\\[var\\(--my-color\\)\\] { + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --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); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[var\\(--my-color\\)\\]\\/50, .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --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); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-current { + @supports (color: color-mix(in lab, red, red)) { + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .via-\\[var\\(--my-color\\)\\], .via-\\[var\\(--my-color\\)\\]\\/50 { + --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); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + + @supports (color: color-mix(in lab, red, red)) { + .via-\\[var\\(--my-color\\)\\]\\/50 { + --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --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); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + + @supports (color: color-mix(in lab, red, red)) { + .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --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); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + + @supports (color: color-mix(in lab, red, red)) { + .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .via-current, .via-current\\/50 { --tw-gradient-via: currentcolor; --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); } - .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .via-current\\/50 { + --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .via-current\\/\\[0\\.5\\] { + --tw-gradient-via: currentcolor; --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 lab, red, red)) { + .via-current\\/\\[0\\.5\\] { + --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .via-current\\/\\[50\\%\\] { + --tw-gradient-via: currentcolor; + --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 lab, red, 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); @@ -12250,36 +12529,105 @@ 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-\\[color\\:var\\(--my-color\\)\\] { + .to-\\[color\\:var\\(--my-color\\)\\], .to-\\[color\\:var\\(--my-color\\)\\]\\/50 { --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)); } - .to-\\[color\\:var\\(--my-color\\)\\]\\/50, .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in oklab, var(--my-color) 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 lab, red, red)) { + .to-\\[color\\:var\\(--my-color\\)\\]\\/50 { + --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .to-\\[var\\(--my-color\\)\\] { + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --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)); } - .to-\\[var\\(--my-color\\)\\]\\/50, .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --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)); } - .to-current { + @supports (color: color-mix(in lab, red, red)) { + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .to-\\[var\\(--my-color\\)\\], .to-\\[var\\(--my-color\\)\\]\\/50 { + --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)); + } + + @supports (color: color-mix(in lab, red, red)) { + .to-\\[var\\(--my-color\\)\\]\\/50 { + --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --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)); + } + + @supports (color: color-mix(in lab, red, red)) { + .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --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)); + } + + @supports (color: color-mix(in lab, red, red)) { + .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .to-current, .to-current\\/50 { --tw-gradient-to: currentcolor; --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); + @supports (color: color-mix(in lab, red, red)) { + .to-current\\/50 { + --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .to-current\\/\\[0\\.5\\] { + --tw-gradient-to: currentcolor; --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 lab, red, red)) { + .to-current\\/\\[0\\.5\\] { + --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .to-current\\/\\[50\\%\\] { + --tw-gradient-to: currentcolor; + --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 lab, red, 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)); @@ -18712,12 +19060,34 @@ test('fill', async () => { fill: oklab(59.9824% -.067 -.124 / .5); } - .fill-current { + .fill-current, .fill-current\\/50 { 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 lab, red, red)) { + .fill-current\\/50 { + fill: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .fill-current\\/\\[0\\.5\\] { + fill: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .fill-current\\/\\[0\\.5\\] { + fill: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .fill-current\\/\\[50\\%\\] { + fill: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .fill-current\\/\\[50\\%\\] { + fill: color-mix(in oklab, currentcolor 50%, transparent); + } } .fill-inherit { @@ -18877,28 +19247,94 @@ test('stroke', async () => { stroke: oklab(59.9824% -.067 -.124 / .5); } - .stroke-\\[color\\:var\\(--my-color\\)\\] { + .stroke-\\[color\\:var\\(--my-color\\)\\], .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 { stroke: var(--my-color); } - .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50, .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { - stroke: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 { + stroke: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .stroke-\\[var\\(--my-color\\)\\] { + .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { stroke: var(--my-color); } - .stroke-\\[var\\(--my-color\\)\\]\\/50, .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { - stroke: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + stroke: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .stroke-current { + .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + stroke: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + stroke: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .stroke-\\[var\\(--my-color\\)\\], .stroke-\\[var\\(--my-color\\)\\]\\/50 { + stroke: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[var\\(--my-color\\)\\]\\/50 { + stroke: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + stroke: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + stroke: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + stroke: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + stroke: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .stroke-current, .stroke-current\\/50 { 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 lab, red, red)) { + .stroke-current\\/50 { + stroke: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .stroke-current\\/\\[0\\.5\\] { + stroke: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .stroke-current\\/\\[0\\.5\\] { + stroke: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .stroke-current\\/\\[50\\%\\] { + stroke: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .stroke-current\\/\\[50\\%\\] { + stroke: color-mix(in oklab, currentcolor 50%, transparent); + } } .stroke-inherit { @@ -19943,12 +20379,34 @@ test('placeholder', async () => { color: oklab(59.9824% -.067 -.124 / .5); } - .placeholder-current::placeholder { + .placeholder-current::placeholder, .placeholder-current\\/50::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 lab, red, red)) { + .placeholder-current\\/50::placeholder { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .placeholder-current\\/\\[0\\.5\\]::placeholder { + color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .placeholder-current\\/\\[0\\.5\\]::placeholder { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .placeholder-current\\/\\[50\\%\\]::placeholder { + color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .placeholder-current\\/\\[50\\%\\]::placeholder { + color: color-mix(in oklab, currentcolor 50%, transparent); + } } .placeholder-inherit::placeholder { @@ -20112,38 +20570,124 @@ test('decoration', async () => { text-decoration-color: oklab(59.9824% -.067 -.124 / .5); } - .decoration-\\[color\\:var\\(--my-color\\)\\] { + .decoration-\\[color\\:var\\(--my-color\\)\\], .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 { -webkit-text-decoration-color: var(--my-color); -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } - .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50, .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .decoration-\\[var\\(--my-color\\)\\] { + .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { -webkit-text-decoration-color: var(--my-color); -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } - .decoration-\\[var\\(--my-color\\)\\]\\/50, .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .decoration-current { + .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + -webkit-text-decoration-color: var(--my-color); + -webkit-text-decoration-color: var(--my-color); + text-decoration-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .decoration-\\[var\\(--my-color\\)\\], .decoration-\\[var\\(--my-color\\)\\]\\/50 { + -webkit-text-decoration-color: var(--my-color); + -webkit-text-decoration-color: var(--my-color); + text-decoration-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[var\\(--my-color\\)\\]\\/50 { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + -webkit-text-decoration-color: var(--my-color); + -webkit-text-decoration-color: var(--my-color); + text-decoration-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + -webkit-text-decoration-color: var(--my-color); + -webkit-text-decoration-color: var(--my-color); + text-decoration-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .decoration-current, .decoration-current\\/50 { 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 lab, red, red)) { + .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\\/\\[0\\.5\\] { + text-decoration-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .decoration-current\\/\\[0\\.5\\] { + -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\\%\\] { + text-decoration-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .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 { @@ -20503,7 +21047,7 @@ test('filter', async () => { } .drop-shadow-red-500 { - --tw-drop-shadow-color: color-mix(in srgb, #ef4444 var(--tw-drop-shadow-alpha), transparent); + --tw-drop-shadow-color: #ef4444; --tw-drop-shadow: var(--tw-drop-shadow-size); } @@ -20514,7 +21058,7 @@ test('filter', async () => { } .drop-shadow-red-500\\/50 { - --tw-drop-shadow-color: color-mix(in srgb, #ef444480 var(--tw-drop-shadow-alpha), transparent); + --tw-drop-shadow-color: #ef444480; --tw-drop-shadow: var(--tw-drop-shadow-size); } @@ -22034,28 +22578,94 @@ test('outline', async () => { outline-color: oklab(0% none none / .5); } - .outline-\\[color\\:var\\(--value\\)\\] { + .outline-\\[color\\:var\\(--value\\)\\], .outline-\\[color\\:var\\(--value\\)\\]\\/50 { outline-color: var(--value); } - .outline-\\[color\\:var\\(--value\\)\\]\\/50, .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { - outline-color: color-mix(in oklab, var(--value) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[color\\:var\\(--value\\)\\]\\/50 { + outline-color: color-mix(in oklab, var(--value) 50%, transparent); + } } - .outline-\\[var\\(--value\\)\\] { + .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { outline-color: var(--value); } - .outline-\\[var\\(--value\\)\\]\\/50, .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] { - outline-color: color-mix(in oklab, var(--value) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { + outline-color: color-mix(in oklab, var(--value) 50%, transparent); + } } - .outline-current { + .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + outline-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + outline-color: color-mix(in oklab, var(--value) 50%, transparent); + } + } + + .outline-\\[var\\(--value\\)\\], .outline-\\[var\\(--value\\)\\]\\/50 { + outline-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[var\\(--value\\)\\]\\/50 { + outline-color: color-mix(in oklab, var(--value) 50%, transparent); + } + } + + .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] { + outline-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] { + outline-color: color-mix(in oklab, var(--value) 50%, transparent); + } + } + + .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] { + outline-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] { + outline-color: color-mix(in oklab, var(--value) 50%, transparent); + } + } + + .outline-current, .outline-current\\/50 { 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 lab, red, red)) { + .outline-current\\/50 { + outline-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .outline-current\\/\\[0\\.5\\] { + outline-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .outline-current\\/\\[0\\.5\\] { + outline-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .outline-current\\/\\[50\\%\\] { + outline-color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .outline-current\\/\\[50\\%\\] { + outline-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .outline-inherit { @@ -22518,28 +23128,94 @@ test('text', async () => { color: oklab(59.9824% -.067 -.124 / .5); } - .text-\\[color\\:var\\(--my-color\\)\\] { + .text-\\[color\\:var\\(--my-color\\)\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/50 { color: var(--my-color); } - .text-\\[color\\:var\\(--my-color\\)\\]\\/50, .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { - color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .text-\\[color\\:var\\(--my-color\\)\\]\\/50 { + color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .text-\\[var\\(--my-color\\)\\] { + .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { color: var(--my-color); } - .text-\\[var\\(--my-color\\)\\]\\/50, .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { - color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .text-current { + .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .text-\\[var\\(--my-color\\)\\], .text-\\[var\\(--my-color\\)\\]\\/50 { + color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .text-\\[var\\(--my-color\\)\\]\\/50 { + color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .text-current, .text-current\\/50 { 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 lab, red, red)) { + .text-current\\/50 { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .text-current\\/\\[0\\.5\\] { + color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .text-current\\/\\[0\\.5\\] { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .text-current\\/\\[50\\%\\] { + color: currentColor; + } + + @supports (color: color-mix(in lab, red, red)) { + .text-current\\/\\[50\\%\\] { + color: color-mix(in oklab, currentcolor 50%, transparent); + } } .text-inherit { @@ -22729,7 +23405,13 @@ test('text-shadow', async () => { .text-shadow-\\[10px_10px\\]\\/25 { --tw-text-shadow-alpha: 25%; - text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); + text-shadow: 10px 10px var(--tw-text-shadow-color, currentcolor); + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[10px_10px\\]\\/25 { + text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); + } } .text-shadow-\\[12px_12px_\\#0088cc\\]\\/25 { @@ -22747,11 +23429,43 @@ test('text-shadow', async () => { } .text-shadow-\\[\\#0088cc\\] { - --tw-text-shadow-color: color-mix(in oklab, #08c var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: #08c; } - .text-shadow-\\[\\#0088cc\\]\\/50, .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent); + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[\\#0088cc\\] { + --tw-text-shadow-color: color-mix(in oklab, #08c var(--tw-text-shadow-alpha), transparent); + } + } + + .text-shadow-\\[\\#0088cc\\]\\/50 { + --tw-text-shadow-color: #0088cc80; + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[\\#0088cc\\]\\/50 { + --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent); + } + } + + .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-text-shadow-color: #0088cc80; + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent); + } + } + + .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-text-shadow-color: #0088cc80; + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent); + } } .text-shadow-\\[10px_10px\\] { @@ -22767,11 +23481,43 @@ test('text-shadow', async () => { } .text-shadow-\\[color\\:var\\(--value\\)\\] { - --tw-text-shadow-color: color-mix(in oklab, var(--value) var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: var(--value); } - .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50, .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { - --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[color\\:var\\(--value\\)\\] { + --tw-text-shadow-color: color-mix(in oklab, var(--value) var(--tw-text-shadow-alpha), transparent); + } + } + + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { + --tw-text-shadow-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { + --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); + } + } + + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { + --tw-text-shadow-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { + --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); + } + } + + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + --tw-text-shadow-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); + } } .text-shadow-\\[shadow\\:var\\(--value\\)\\], .text-shadow-\\[var\\(--value\\)\\] { @@ -22779,15 +23525,53 @@ test('text-shadow', async () => { } .text-shadow-current { - --tw-text-shadow-color: color-mix(in oklab, currentcolor var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: currentcolor; } - .text-shadow-current\\/50, .text-shadow-current\\/\\[0\\.5\\], .text-shadow-current\\/\\[50\\%\\] { - --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-current { + --tw-text-shadow-color: color-mix(in oklab, currentcolor var(--tw-text-shadow-alpha), transparent); + } + } + + .text-shadow-current\\/50 { + --tw-text-shadow-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-current\\/50 { + --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); + } + } + + .text-shadow-current\\/\\[0\\.5\\] { + --tw-text-shadow-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-current\\/\\[0\\.5\\] { + --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); + } + } + + .text-shadow-current\\/\\[50\\%\\] { + --tw-text-shadow-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-current\\/\\[50\\%\\] { + --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); + } } .text-shadow-inherit { - --tw-text-shadow-color: color-mix(in oklab, inherit var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: inherit; + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-inherit { + --tw-text-shadow-color: color-mix(in oklab, inherit var(--tw-text-shadow-alpha), transparent); + } } .text-shadow-none { @@ -22795,7 +23579,7 @@ test('text-shadow', async () => { } .text-shadow-red-500 { - --tw-text-shadow-color: color-mix(in srgb, #ef4444 var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: #ef4444; } @supports (color: color-mix(in lab, red, red)) { @@ -22805,7 +23589,7 @@ test('text-shadow', async () => { } .text-shadow-red-500\\/2\\.5 { - --tw-text-shadow-color: color-mix(in srgb, #ef444406 var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: #ef444406; } @supports (color: color-mix(in lab, red, red)) { @@ -22815,7 +23599,7 @@ test('text-shadow', async () => { } .text-shadow-red-500\\/2\\.25 { - --tw-text-shadow-color: color-mix(in srgb, #ef444406 var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: #ef444406; } @supports (color: color-mix(in lab, red, red)) { @@ -22825,7 +23609,7 @@ test('text-shadow', async () => { } .text-shadow-red-500\\/2\\.75 { - --tw-text-shadow-color: color-mix(in srgb, #ef444407 var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: #ef444407; } @supports (color: color-mix(in lab, red, red)) { @@ -22835,7 +23619,7 @@ test('text-shadow', async () => { } .text-shadow-red-500\\/50 { - --tw-text-shadow-color: color-mix(in srgb, #ef444480 var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: #ef444480; } @supports (color: color-mix(in lab, red, red)) { @@ -22845,7 +23629,7 @@ test('text-shadow', async () => { } .text-shadow-red-500\\/\\[0\\.5\\] { - --tw-text-shadow-color: color-mix(in srgb, #ef444480 var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: #ef444480; } @supports (color: color-mix(in lab, red, red)) { @@ -22855,7 +23639,7 @@ test('text-shadow', async () => { } .text-shadow-red-500\\/\\[50\\%\\] { - --tw-text-shadow-color: color-mix(in srgb, #ef444480 var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: #ef444480; } @supports (color: color-mix(in lab, red, red)) { @@ -22869,7 +23653,13 @@ test('text-shadow', async () => { } .text-shadow-transparent { - --tw-text-shadow-color: color-mix(in oklab, transparent var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: transparent; + } + + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-transparent { + --tw-text-shadow-color: color-mix(in oklab, transparent var(--tw-text-shadow-alpha), transparent); + } } @property --tw-text-shadow-color { @@ -22997,10 +23787,16 @@ test('shadow', async () => { .shadow-\\[10px_10px\\]\\/25 { --tw-shadow-alpha: 25%; - --tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); + --tw-shadow: 10px 10px var(--tw-shadow-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[10px_10px\\]\\/25 { + --tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); + } + } + .shadow-\\[12px_12px_\\#0088cc\\]\\/25 { --tw-shadow-alpha: 25%; --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(59.9824% -.067 -.124 / .25)); @@ -23049,35 +23845,137 @@ test('shadow', async () => { } .shadow-\\[\\#0088cc\\] { - --tw-shadow-color: color-mix(in oklab, #08c var(--tw-shadow-alpha), transparent); + --tw-shadow-color: #08c; } - .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent); + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[\\#0088cc\\] { + --tw-shadow-color: color-mix(in oklab, #08c var(--tw-shadow-alpha), transparent); + } + } + + .shadow-\\[\\#0088cc\\]\\/50 { + --tw-shadow-color: #0088cc80; + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[\\#0088cc\\]\\/50 { + --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent); + } + } + + .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-shadow-color: #0088cc80; + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent); + } + } + + .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-shadow-color: #0088cc80; + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent); + } } .shadow-\\[color\\:var\\(--value\\)\\] { - --tw-shadow-color: color-mix(in oklab, var(--value) var(--tw-shadow-alpha), transparent); + --tw-shadow-color: var(--value); } - .shadow-\\[color\\:var\\(--value\\)\\]\\/50, .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[color\\:var\\(--value\\)\\] { + --tw-shadow-color: color-mix(in oklab, var(--value) var(--tw-shadow-alpha), transparent); + } + } + + .shadow-\\[color\\:var\\(--value\\)\\]\\/50 { + --tw-shadow-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[color\\:var\\(--value\\)\\]\\/50 { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); + } + } + + .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { + --tw-shadow-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); + } + } + + .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + --tw-shadow-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); + } } .shadow-current { - --tw-shadow-color: color-mix(in oklab, currentcolor var(--tw-shadow-alpha), transparent); + --tw-shadow-color: currentcolor; } - .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); + @supports (color: color-mix(in lab, red, red)) { + .shadow-current { + --tw-shadow-color: color-mix(in oklab, currentcolor var(--tw-shadow-alpha), transparent); + } + } + + .shadow-current\\/50 { + --tw-shadow-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-current\\/50 { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); + } + } + + .shadow-current\\/\\[0\\.5\\] { + --tw-shadow-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-current\\/\\[0\\.5\\] { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); + } + } + + .shadow-current\\/\\[50\\%\\] { + --tw-shadow-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-current\\/\\[50\\%\\] { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); + } } .shadow-inherit { - --tw-shadow-color: color-mix(in oklab, inherit var(--tw-shadow-alpha), transparent); + --tw-shadow-color: inherit; + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-inherit { + --tw-shadow-color: color-mix(in oklab, inherit var(--tw-shadow-alpha), transparent); + } } .shadow-red-500 { - --tw-shadow-color: color-mix(in srgb, #ef4444 var(--tw-shadow-alpha), transparent); + --tw-shadow-color: #ef4444; } @supports (color: color-mix(in lab, red, red)) { @@ -23087,7 +23985,7 @@ test('shadow', async () => { } .shadow-red-500\\/2\\.5 { - --tw-shadow-color: color-mix(in srgb, #ef444406 var(--tw-shadow-alpha), transparent); + --tw-shadow-color: #ef444406; } @supports (color: color-mix(in lab, red, red)) { @@ -23097,7 +23995,7 @@ test('shadow', async () => { } .shadow-red-500\\/2\\.25 { - --tw-shadow-color: color-mix(in srgb, #ef444406 var(--tw-shadow-alpha), transparent); + --tw-shadow-color: #ef444406; } @supports (color: color-mix(in lab, red, red)) { @@ -23107,7 +24005,7 @@ test('shadow', async () => { } .shadow-red-500\\/2\\.75 { - --tw-shadow-color: color-mix(in srgb, #ef444407 var(--tw-shadow-alpha), transparent); + --tw-shadow-color: #ef444407; } @supports (color: color-mix(in lab, red, red)) { @@ -23117,7 +24015,7 @@ test('shadow', async () => { } .shadow-red-500\\/50 { - --tw-shadow-color: color-mix(in srgb, #ef444480 var(--tw-shadow-alpha), transparent); + --tw-shadow-color: #ef444480; } @supports (color: color-mix(in lab, red, red)) { @@ -23127,7 +24025,7 @@ test('shadow', async () => { } .shadow-red-500\\/\\[0\\.5\\] { - --tw-shadow-color: color-mix(in srgb, #ef444480 var(--tw-shadow-alpha), transparent); + --tw-shadow-color: #ef444480; } @supports (color: color-mix(in lab, red, red)) { @@ -23137,7 +24035,7 @@ test('shadow', async () => { } .shadow-red-500\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in srgb, #ef444480 var(--tw-shadow-alpha), transparent); + --tw-shadow-color: #ef444480; } @supports (color: color-mix(in lab, red, red)) { @@ -23147,7 +24045,13 @@ test('shadow', async () => { } .shadow-transparent { - --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent); + --tw-shadow-color: transparent; + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-transparent { + --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent); + } } @property --tw-shadow { @@ -23357,10 +24261,16 @@ test('inset-shadow', async () => { .inset-shadow-\\[10px_10px\\]\\/25 { --tw-inset-shadow-alpha: 25%; - --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); + --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[10px_10px\\]\\/25 { + --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); + } + } + .inset-shadow-\\[12px_12px_\\#0088cc\\]\\/25 { --tw-inset-shadow-alpha: 25%; --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(59.9824% -.067 -.124 / .25)); @@ -23414,35 +24324,137 @@ test('inset-shadow', async () => { } .inset-shadow-\\[\\#0088cc\\] { - --tw-inset-shadow-color: color-mix(in oklab, #08c var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: #08c; } - .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent); + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[\\#0088cc\\] { + --tw-inset-shadow-color: color-mix(in oklab, #08c var(--tw-inset-shadow-alpha), transparent); + } + } + + .inset-shadow-\\[\\#0088cc\\]\\/50 { + --tw-inset-shadow-color: #0088cc80; + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[\\#0088cc\\]\\/50 { + --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent); + } + } + + .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-inset-shadow-color: #0088cc80; + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent); + } + } + + .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-inset-shadow-color: #0088cc80; + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent); + } } .inset-shadow-\\[color\\:var\\(--value\\)\\] { - --tw-inset-shadow-color: color-mix(in oklab, var(--value) var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: var(--value); } - .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50, .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[color\\:var\\(--value\\)\\] { + --tw-inset-shadow-color: color-mix(in oklab, var(--value) var(--tw-inset-shadow-alpha), transparent); + } + } + + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { + --tw-inset-shadow-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { + --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); + } + } + + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { + --tw-inset-shadow-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { + --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); + } + } + + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + --tw-inset-shadow-color: var(--value); + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); + } } .inset-shadow-current { - --tw-inset-shadow-color: color-mix(in oklab, currentcolor var(--tw-inset-shadow-alpha), transparent); + --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, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-current { + --tw-inset-shadow-color: color-mix(in oklab, currentcolor var(--tw-inset-shadow-alpha), transparent); + } + } + + .inset-shadow-current\\/50 { + --tw-inset-shadow-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-current\\/50 { + --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); + } + } + + .inset-shadow-current\\/\\[0\\.5\\] { + --tw-inset-shadow-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-current\\/\\[0\\.5\\] { + --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); + } + } + + .inset-shadow-current\\/\\[50\\%\\] { + --tw-inset-shadow-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-current\\/\\[50\\%\\] { + --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); + } } .inset-shadow-inherit { - --tw-inset-shadow-color: color-mix(in oklab, inherit var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: inherit; + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-inherit { + --tw-inset-shadow-color: color-mix(in oklab, inherit var(--tw-inset-shadow-alpha), transparent); + } } .inset-shadow-red-500 { - --tw-inset-shadow-color: color-mix(in srgb, #ef4444 var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: #ef4444; } @supports (color: color-mix(in lab, red, red)) { @@ -23452,7 +24464,7 @@ test('inset-shadow', async () => { } .inset-shadow-red-500\\/2\\.5 { - --tw-inset-shadow-color: color-mix(in srgb, #ef444406 var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: #ef444406; } @supports (color: color-mix(in lab, red, red)) { @@ -23462,7 +24474,7 @@ test('inset-shadow', async () => { } .inset-shadow-red-500\\/2\\.25 { - --tw-inset-shadow-color: color-mix(in srgb, #ef444406 var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: #ef444406; } @supports (color: color-mix(in lab, red, red)) { @@ -23472,7 +24484,7 @@ test('inset-shadow', async () => { } .inset-shadow-red-500\\/2\\.75 { - --tw-inset-shadow-color: color-mix(in srgb, #ef444407 var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: #ef444407; } @supports (color: color-mix(in lab, red, red)) { @@ -23482,7 +24494,7 @@ test('inset-shadow', async () => { } .inset-shadow-red-500\\/50 { - --tw-inset-shadow-color: color-mix(in srgb, #ef444480 var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: #ef444480; } @supports (color: color-mix(in lab, red, red)) { @@ -23492,7 +24504,7 @@ test('inset-shadow', async () => { } .inset-shadow-red-500\\/\\[0\\.5\\] { - --tw-inset-shadow-color: color-mix(in srgb, #ef444480 var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: #ef444480; } @supports (color: color-mix(in lab, red, red)) { @@ -23502,7 +24514,7 @@ test('inset-shadow', async () => { } .inset-shadow-red-500\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in srgb, #ef444480 var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: #ef444480; } @supports (color: color-mix(in lab, red, red)) { @@ -23512,7 +24524,13 @@ test('inset-shadow', async () => { } .inset-shadow-transparent { - --tw-inset-shadow-color: color-mix(in oklab, transparent var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: transparent; + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-transparent { + --tw-inset-shadow-color: color-mix(in oklab, transparent var(--tw-inset-shadow-alpha), transparent); + } } @property --tw-shadow { @@ -23734,28 +24752,94 @@ test('ring', async () => { --tw-ring-color: oklab(59.9824% -.067 -.124 / .5); } - .ring-\\[color\\:var\\(--my-color\\)\\] { + .ring-\\[color\\:var\\(--my-color\\)\\], .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-ring-color: var(--my-color); } - .ring-\\[color\\:var\\(--my-color\\)\\]\\/50, .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { + --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .ring-\\[var\\(--my-color\\)\\] { + .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-color: var(--my-color); } - .ring-\\[var\\(--my-color\\)\\]\\/50, .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .ring-current { + .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-ring-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .ring-\\[var\\(--my-color\\)\\], .ring-\\[var\\(--my-color\\)\\]\\/50 { + --tw-ring-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[var\\(--my-color\\)\\]\\/50 { + --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-ring-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-ring-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .ring-current, .ring-current\\/50 { --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 lab, red, red)) { + .ring-current\\/50 { + --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .ring-current\\/\\[0\\.5\\] { + --tw-ring-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-current\\/\\[0\\.5\\] { + --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .ring-current\\/\\[50\\%\\] { + --tw-ring-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-current\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .ring-inherit { @@ -24183,28 +25267,94 @@ test('inset-ring', async () => { --tw-inset-ring-color: oklab(59.9824% -.067 -.124 / .5); } - .inset-ring-\\[color\\:var\\(--my-color\\)\\] { + .inset-ring-\\[color\\:var\\(--my-color\\)\\], .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-inset-ring-color: var(--my-color); } - .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50, .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { + --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .inset-ring-\\[var\\(--my-color\\)\\] { + .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-inset-ring-color: var(--my-color); } - .inset-ring-\\[var\\(--my-color\\)\\]\\/50, .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .inset-ring-current { + .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-inset-ring-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .inset-ring-\\[var\\(--my-color\\)\\], .inset-ring-\\[var\\(--my-color\\)\\]\\/50 { + --tw-inset-ring-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[var\\(--my-color\\)\\]\\/50 { + --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-inset-ring-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-inset-ring-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .inset-ring-current, .inset-ring-current\\/50 { --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 lab, red, red)) { + .inset-ring-current\\/50 { + --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .inset-ring-current\\/\\[0\\.5\\] { + --tw-inset-ring-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-current\\/\\[0\\.5\\] { + --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .inset-ring-current\\/\\[50\\%\\] { + --tw-inset-ring-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-current\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .inset-ring-inherit { @@ -24483,28 +25633,94 @@ test('ring-offset', async () => { --tw-ring-offset-color: oklab(59.9824% -.067 -.124 / .5); } - .ring-offset-\\[color\\:var\\(--my-color\\)\\] { + .ring-offset-\\[color\\:var\\(--my-color\\)\\], .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-ring-offset-color: var(--my-color); } - .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50, .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 { + --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .ring-offset-\\[var\\(--my-color\\)\\] { + .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-offset-color: var(--my-color); } - .ring-offset-\\[var\\(--my-color\\)\\]\\/50, .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } } - .ring-offset-current { + .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-ring-offset-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .ring-offset-\\[var\\(--my-color\\)\\], .ring-offset-\\[var\\(--my-color\\)\\]\\/50 { + --tw-ring-offset-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[var\\(--my-color\\)\\]\\/50 { + --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-ring-offset-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-ring-offset-color: var(--my-color); + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + } + + .ring-offset-current, .ring-offset-current\\/50 { --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 lab, red, red)) { + .ring-offset-current\\/50 { + --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .ring-offset-current\\/\\[0\\.5\\] { + --tw-ring-offset-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-current\\/\\[0\\.5\\] { + --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + + .ring-offset-current\\/\\[50\\%\\] { + --tw-ring-offset-color: currentcolor; + } + + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-current\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); + } } .ring-offset-inherit {