From 449796191e5edf71a4d93bca319d7a9a2ac02920 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 26 Mar 2025 15:49:04 +0100 Subject: [PATCH] WIP2 --- .../src/commands/build/index.ts | 2 +- .../src/__snapshots__/index.test.ts.snap | 14 +- .../@tailwindcss-postcss/src/index.test.ts | 2 +- packages/@tailwindcss-postcss/src/index.ts | 10 +- packages/@tailwindcss-vite/src/index.ts | 2 +- .../src/__snapshots__/utilities.test.ts.snap | 162 +-- packages/tailwindcss/src/ast.test.ts | 14 +- packages/tailwindcss/src/ast.ts | 46 - packages/tailwindcss/src/at-import.test.ts | 4 +- .../tailwindcss/src/compat/config.test.ts | 26 +- .../tailwindcss/src/compat/plugin-api.test.ts | 266 ++-- .../tailwindcss/src/css-functions.test.ts | 103 +- packages/tailwindcss/src/index.test.ts | 8 +- packages/tailwindcss/src/intellisense.test.ts | 72 +- packages/tailwindcss/src/test-utils/run.ts | 2 +- packages/tailwindcss/src/utilities.test.ts | 1071 ++++++----------- packages/tailwindcss/src/variants.test.ts | 140 +-- 17 files changed, 721 insertions(+), 1223 deletions(-) diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index 72310574f..6cbaece66 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -446,7 +446,7 @@ function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: Features.Nesting | Features.MediaQueries, + include: Features.Nesting | Features.MediaRangeSyntax, exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark, targets: { safari: (16 << 16) | (4 << 8), diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index e9a830210..18c2822de 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -164,10 +164,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { - @supports (color: color-mix(in srgb, red 0%, red)) { - ::placeholder { - color: color-mix(in oklab, currentColor 50%, transparent); - } + ::placeholder { + color: color-mix(in oklab, currentColor 50%, transparent); } } @@ -261,17 +259,15 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` line-height: var(--tw-leading, var(--text-2xl--line-height)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .text-black\\/50 { - color: color-mix(in oklab, var(--color-black) 50%, transparent); - } + .text-black\\/50 { + color: color-mix(in oklab, var(--color-black) 50%, transparent); } .underline { text-decoration-line: underline; } - @media (width >= 96rem) { + @media (min-width: 96rem) { .\\32 xl\\:font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index af7743ec6..f2c21e3a8 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -267,7 +267,7 @@ test('handle CSS when only using a `@reference` (we should not bail early)', asy ) expect(result.css.trim()).toMatchInlineSnapshot(` - "@media (width >= 48rem) { + "@media (min-width: 48rem) { .foo { bar: baz; } diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index b5214668d..91e91b06a 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -52,7 +52,6 @@ export type PluginOptions = { function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { let base = opts.base ?? process.cwd() let optimize = opts.optimize ?? process.env.NODE_ENV === 'production' - console.log({ opts, flag: process.env.NODE_ENV }) return { postcssPlugin: '@tailwindcss/postcss', @@ -326,7 +325,7 @@ function optimizeCss( LightningCssFeatures.DirSelector | LightningCssFeatures.LightDark, targets: { - safari: (15 << 16) | (4 << 8), + safari: (16 << 16) | (4 << 8), ios_saf: (16 << 16) | (4 << 8), firefox: 128 << 16, chrome: 111 << 16, @@ -335,14 +334,9 @@ function optimizeCss( }).code } - let out = optimize(optimize(Buffer.from(input))).toString() - console.log({ out }) - - out = out.replaceAll(/\@media (\()?not /g, '@media $1not all and ') - // Running Lightning CSS twice to ensure that adjacent rules are merged after // nesting is applied. This creates a more optimized output. - return out + return optimize(optimize(Buffer.from(input))).toString() } export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 0e7ec80f6..1e09c7ee7 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -143,7 +143,7 @@ function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaQueries, + include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaRangeSyntax, exclude: LightningCssFeatures.LogicalProperties | LightningCssFeatures.DirSelector | diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 7e4ddc544..5f1c2fea3 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -79,10 +79,8 @@ exports[`border-* 1`] = ` border-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-\\[\\#0088cc\\]\\/50 { - border-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-\\[\\#0088cc\\]\\/50 { + border-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-\\[color\\:var\\(--my-color\\)\\] { @@ -105,10 +103,8 @@ exports[`border-* 1`] = ` border-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-current\\/50 { - border-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-current\\/50 { + border-color: color-mix(in oklab, currentColor 50%, transparent); } .border-inherit { @@ -131,10 +127,8 @@ exports[`border-* 1`] = ` border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-red-500\\/50 { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-red-500\\/50 { + border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-transparent { @@ -227,10 +221,8 @@ exports[`border-b-* 1`] = ` border-bottom-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-b-\\[\\#0088cc\\]\\/50 { - border-bottom-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-b-\\[\\#0088cc\\]\\/50 { + border-bottom-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-b-\\[color\\:var\\(--my-color\\)\\] { @@ -253,10 +245,8 @@ exports[`border-b-* 1`] = ` border-bottom-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-b-current\\/50 { - border-bottom-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-b-current\\/50 { + border-bottom-color: color-mix(in oklab, currentColor 50%, transparent); } .border-b-inherit { @@ -279,10 +269,8 @@ exports[`border-b-* 1`] = ` border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-b-red-500\\/50 { - border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-b-red-500\\/50 { + border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-b-transparent { @@ -375,10 +363,8 @@ exports[`border-e-* 1`] = ` border-inline-end-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-e-\\[\\#0088cc\\]\\/50 { - border-inline-end-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-e-\\[\\#0088cc\\]\\/50 { + border-inline-end-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-e-\\[color\\:var\\(--my-color\\)\\] { @@ -401,10 +387,8 @@ exports[`border-e-* 1`] = ` border-inline-end-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-e-current\\/50 { - border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-e-current\\/50 { + border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent); } .border-e-inherit { @@ -427,10 +411,8 @@ exports[`border-e-* 1`] = ` border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-e-red-500\\/50 { - border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-e-red-500\\/50 { + border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-e-transparent { @@ -523,10 +505,8 @@ exports[`border-l-* 1`] = ` border-left-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-l-\\[\\#0088cc\\]\\/50 { - border-left-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-l-\\[\\#0088cc\\]\\/50 { + border-left-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-l-\\[color\\:var\\(--my-color\\)\\] { @@ -549,10 +529,8 @@ exports[`border-l-* 1`] = ` border-left-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-l-current\\/50 { - border-left-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-l-current\\/50 { + border-left-color: color-mix(in oklab, currentColor 50%, transparent); } .border-l-inherit { @@ -575,10 +553,8 @@ exports[`border-l-* 1`] = ` border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-l-red-500\\/50 { - border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-l-red-500\\/50 { + border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-l-transparent { @@ -671,10 +647,8 @@ exports[`border-r-* 1`] = ` border-right-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-r-\\[\\#0088cc\\]\\/50 { - border-right-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-r-\\[\\#0088cc\\]\\/50 { + border-right-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-r-\\[color\\:var\\(--my-color\\)\\] { @@ -697,10 +671,8 @@ exports[`border-r-* 1`] = ` border-right-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-r-current\\/50 { - border-right-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-r-current\\/50 { + border-right-color: color-mix(in oklab, currentColor 50%, transparent); } .border-r-inherit { @@ -723,10 +695,8 @@ exports[`border-r-* 1`] = ` border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-r-red-500\\/50 { - border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-r-red-500\\/50 { + border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-r-transparent { @@ -819,10 +789,8 @@ exports[`border-s-* 1`] = ` border-inline-start-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-s-\\[\\#0088cc\\]\\/50 { - border-inline-start-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-s-\\[\\#0088cc\\]\\/50 { + border-inline-start-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-s-\\[color\\:var\\(--my-color\\)\\] { @@ -845,10 +813,8 @@ exports[`border-s-* 1`] = ` border-inline-start-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-s-current\\/50 { - border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-s-current\\/50 { + border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent); } .border-s-inherit { @@ -871,10 +837,8 @@ exports[`border-s-* 1`] = ` border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-s-red-500\\/50 { - border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-s-red-500\\/50 { + border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-s-transparent { @@ -967,10 +931,8 @@ exports[`border-t-* 1`] = ` border-top-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-t-\\[\\#0088cc\\]\\/50 { - border-top-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-t-\\[\\#0088cc\\]\\/50 { + border-top-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-t-\\[color\\:var\\(--my-color\\)\\] { @@ -993,10 +955,8 @@ exports[`border-t-* 1`] = ` border-top-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-t-current\\/50 { - border-top-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-t-current\\/50 { + border-top-color: color-mix(in oklab, currentColor 50%, transparent); } .border-t-inherit { @@ -1019,10 +979,8 @@ exports[`border-t-* 1`] = ` border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-t-red-500\\/50 { - border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-t-red-500\\/50 { + border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-t-transparent { @@ -1115,10 +1073,8 @@ exports[`border-x-* 1`] = ` border-inline-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-x-\\[\\#0088cc\\]\\/50 { - border-inline-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-x-\\[\\#0088cc\\]\\/50 { + border-inline-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-x-\\[color\\:var\\(--my-color\\)\\] { @@ -1141,10 +1097,8 @@ exports[`border-x-* 1`] = ` border-inline-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-x-current\\/50 { - border-inline-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-x-current\\/50 { + border-inline-color: color-mix(in oklab, currentColor 50%, transparent); } .border-x-inherit { @@ -1167,10 +1121,8 @@ exports[`border-x-* 1`] = ` border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-x-red-500\\/50 { - border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-x-red-500\\/50 { + border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-x-transparent { @@ -1263,10 +1215,8 @@ exports[`border-y-* 1`] = ` border-block-color: #08c; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-y-\\[\\#0088cc\\]\\/50 { - border-block-color: oklab(59.9824% -.06725 -.12414 / .5); - } +.border-y-\\[\\#0088cc\\]\\/50 { + border-block-color: oklab(59.9824% -.06725 -.12414 / .5); } .border-y-\\[color\\:var\\(--my-color\\)\\] { @@ -1289,10 +1239,8 @@ exports[`border-y-* 1`] = ` border-block-color: currentColor; } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-y-current\\/50 { - border-block-color: color-mix(in oklab, currentColor 50%, transparent); - } +.border-y-current\\/50 { + border-block-color: color-mix(in oklab, currentColor 50%, transparent); } .border-y-inherit { @@ -1315,10 +1263,8 @@ exports[`border-y-* 1`] = ` border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } -@supports (color: color-mix(in srgb, red 0%, red)) { - .border-y-red-500\\/50 { - border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } +.border-y-red-500\\/50 { + border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .border-y-transparent { diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts index 8bd2004ac..65e3cb4a9 100644 --- a/packages/tailwindcss/src/ast.test.ts +++ b/packages/tailwindcss/src/ast.test.ts @@ -17,14 +17,14 @@ const css = String.raw it('should pretty print an AST', () => { expect(toCss(optimizeAst(CSS.parse('.foo{color:red;&:hover{color:blue;}}')))) .toMatchInlineSnapshot(` - ".foo { - color: red; - &:hover { - color: blue; + ".foo { + color: red; + &:hover { + color: blue; + } } - } - " - `) + " + `) }) it('allows the placement of context nodes', () => { diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index 212847241..e13e19743 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -2,9 +2,7 @@ import { parseAtRule } from './css-parser' import type { DesignSystem } from './design-system' import { Theme, ThemeOptions } from './theme' import { DefaultMap } from './utils/default-map' -import { segment } from './utils/segment' import { extractUsedVariables } from './utils/variables' -import * as ValueParser from './value-parser' const AT_SIGN = 0x40 @@ -316,50 +314,6 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) { usedKeyframeNames.add(keyframeName) } - // "Polyfill" `color-mix(…)` - if (node.value.includes('color-mix(')) { - let ast = ValueParser.parse(node.value) - let didGenerateFallback = false - ValueParser.walk(ast, (node, { replaceWith }) => { - if (node.kind === 'function' && node.value === 'color-mix') { - let args = ValueParser.toCss(node.nodes) - let match = args.match(/in \w+, (.+) ?(\d+%), transparent/) - if (match) { - let color = match[1] - let percentage = match[2] - - if (color.startsWith('var(')) { - let name = segment(color.slice(4, -1), ',')[0] - if (!name) return - let resolved = designSystem.theme.resolveValue(null, [name as any]) - if (!resolved) return - color = resolved - } - - if ( - (color.startsWith('oklch(') || - color.startsWith('oklab(') || - color.startsWith('lab(') || - color.startsWith('lch(')) && - color.endsWith(')') - ) { - let fallback = `${color.slice(0, -1)} / ${percentage})` - didGenerateFallback = true - replaceWith({ kind: 'word', value: fallback }) - } - } - } - }) - - if (didGenerateFallback) { - let fallback = { ...node, value: ValueParser.toCss(ast) } - let colorMixQuery = rule('@supports (color: color-mix(in srgb, red 0%, red))', [node]) - - parent.push(fallback, colorMixQuery) - return - } - } - parent.push(node) } diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts index 6b418169f..090279fd4 100644 --- a/packages/tailwindcss/src/at-import.test.ts +++ b/packages/tailwindcss/src/at-import.test.ts @@ -318,7 +318,7 @@ test('@supports', async () => { ), ).resolves.toMatchInlineSnapshot(` "@supports (display: grid) { - @media screen and (width <= 400px) { + @media screen and (max-width: 400px) { a { color: red; } @@ -337,7 +337,7 @@ test('@supports', async () => { ), ).resolves.toMatchInlineSnapshot(` "@supports (not (display: grid)) and (display: flex) { - @media screen and (width <= 400px) { + @media screen and (max-width: 400px) { a { color: red; } diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index 372f5f3e3..0756cc7c1 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -1156,21 +1156,21 @@ test('utilities must be prefixed', async () => { // Prefixed utilities are generated expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom'])) .toMatchInlineSnapshot(` - ".tw\\:custom { - color: red; - } - .tw\\:underline { - text-decoration-line: underline; - } - .tw\\:hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; + ".tw\\:custom { + color: red; + } + .tw\\:underline { + text-decoration-line: underline; + } + .tw\\:hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through; + } } } - } - " - `) + " + `) // Non-prefixed utilities are ignored compiler = await compile(input, { diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index 210b3da4b..e6dde07cd 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -243,14 +243,14 @@ describe('theme', async () => { expect(compiler.build(['animate-duration-316', 'animate-duration-slow'])) .toMatchInlineSnapshot(` - ".animate-duration-316 { - animation-duration: 316ms; - } - .animate-duration-slow { - animation-duration: 800ms; - } - " - `) + ".animate-duration-316 { + animation-duration: 316ms; + } + .animate-duration-slow { + animation-duration: 800ms; + } + " + `) }) test('plugin theme can have opacity modifiers', async () => { @@ -285,16 +285,10 @@ describe('theme', async () => { expect(compiler.build(['percentage', 'fraction', 'variable'])).toMatchInlineSnapshot(` ".fraction { - color: #ef444 / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, #ef4444 50%, transparent); - } + color: color-mix(in oklab, #ef4444 50%, transparent); } .percentage { - color: #ef444 / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, #ef4444 50%, transparent); - } + color: color-mix(in oklab, #ef4444 50%, transparent); } .variable { color: color-mix(in oklab, #ef4444 var(--opacity), transparent); @@ -365,31 +359,19 @@ describe('theme', async () => { ]), ).toMatchInlineSnapshot(` ".css-fraction { - color: rgba(255 0 0 / / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); - } + color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); } .css-percentage { - color: rgba(255 0 0 / / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); - } + color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); } .css-variable { color: color-mix(in oklab, rgba(255 0 0 / ) var(--opacity), transparent); } .js-fraction { - color: rgb(255 0 0 / 1 / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); - } + color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); } .js-percentage { - color: rgb(255 0 0 / 1 / 50%); - @supports (color: color-mix(in srgb, red 0%, red)) { - color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); - } + color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); } .js-variable { color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent); @@ -1752,7 +1734,7 @@ describe('addVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width <= 400px) { + @media (max-width: 400px) { @supports (font: bold) { .potato\\:flex:large-potato { display: flex; @@ -2071,19 +2053,19 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 500px) { + @media (min-width: 500px) { .testmin-\\[500px\\]\\:underline { text-decoration-line: underline; } } - @media (width >= 600px) { + @media (min-width: 600px) { .testmin-\\[600px\\]\\:flex { display: flex; } } - @media (width >= 700px) { + @media (min-width: 700px) { .testmin-\\[700px\\]\\:italic { font-style: italic; } @@ -2126,19 +2108,19 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 500px) { + @media (min-width: 500px) { .testmin-\\[500px\\]\\:italic { font-style: italic; } } - @media (width >= 600px) { + @media (min-width: 600px) { .testmin-example\\:italic { font-style: italic; } } - @media (width >= 700px) { + @media (min-width: 700px) { .testmin-\\[700px\\]\\:italic { font-style: italic; } @@ -2186,30 +2168,30 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - @media (width >= 150px) { - @media (width <= 400px) { + @media (min-width: 150px) { + @media (max-width: 400px) { .testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - @media (width >= 100px) { - @media (width <= 350px) { + @media (min-width: 100px) { + @media (max-width: 350px) { .testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 { order: 3; } } - @media (width <= 300px) { + @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } @@ -2256,8 +2238,8 @@ describe('matchVariant', () => { // Expect :focus to come after :hover expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 200px) { + @media (min-width: 100px) { + @media (max-width: 200px) { @media (hover: hover) { .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:hover\\:underline:hover { text-decoration-line: underline; @@ -2310,32 +2292,32 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - @media (width >= 200px) { - @media (width <= 400px) { + @media (min-width: 200px) { + @media (max-width: 400px) { .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - @media (width >= 100px) { - @media (width <= 300px) { + @media (min-width: 100px) { + @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { order: 3; } } } - @media (width >= 200px) { - @media (width <= 300px) { + @media (min-width: 200px) { + @media (max-width: 300px) { .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } @@ -2382,28 +2364,28 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width <= 400px) { - @media (width >= 100px) { + @media (max-width: 400px) { + @media (min-width: 100px) { .testmax-\\[400px\\]\\:testmin-\\[100px\\]\\:underline { text-decoration-line: underline; } } - @media (width >= 200px) { + @media (min-width: 200px) { .testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline { text-decoration-line: underline; } } } - @media (width <= 300px) { - @media (width >= 100px) { + @media (max-width: 300px) { + @media (min-width: 100px) { .testmax-\\[300px\\]\\:testmin-\\[100px\\]\\:underline { text-decoration-line: underline; } } - @media (width >= 200px) { + @media (min-width: 200px) { .testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline { text-decoration-line: underline; } @@ -2458,32 +2440,32 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - @media (width >= 200px) { - @media (width <= 400px) { + @media (min-width: 200px) { + @media (max-width: 400px) { .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - @media (width >= 100px) { - @media (width <= 300px) { + @media (min-width: 100px) { + @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { order: 3; } } } - @media (width >= 200px) { - @media (width <= 300px) { + @media (min-width: 200px) { + @media (max-width: 300px) { .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } @@ -2647,13 +2629,13 @@ describe('matchVariant', () => { 'my-container-[250px]/placement:underline', ]) expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` - "@container (width >= 250px) { + "@container (min-width: 250px) { .my-container-\\[250px\\]\\:underline { text-decoration-line: underline; } } - @container placement (width >= 250px) { + @container placement (min-width: 250px) { .my-container-\\[250px\\]\\/placement\\:underline { text-decoration-line: underline; } @@ -2694,20 +2676,20 @@ describe('addUtilities()', () => { expect(optimizeCss(compiled.build(['text-trim', 'lg:text-trim'])).trim()) .toMatchInlineSnapshot(` - "@layer utilities { - .text-trim { - text-box-trim: both; - text-box-edge: cap alphabetic; - } - - @media (width >= 1024px) { - .lg\\:text-trim { + "@layer utilities { + .text-trim { text-box-trim: both; text-box-edge: cap alphabetic; } - } - }" - `) + + @media (min-width: 1024px) { + .lg\\:text-trim { + text-box-trim: both; + text-box-edge: cap alphabetic; + } + } + }" + `) }) test('return multiple rule objects from a custom utility', async () => { @@ -2891,7 +2873,7 @@ describe('addUtilities()', () => { } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:foo { display: flex; } @@ -2972,7 +2954,7 @@ describe('addUtilities()', () => { background-color: #fff; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:form-textarea { appearance: none; background-color: #fff; @@ -3298,7 +3280,7 @@ describe('matchUtilities()', () => { border-block-width: var(--foo); } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:border-block-2 { border-block-width: 2px; } @@ -3349,16 +3331,16 @@ describe('matchUtilities()', () => { } expect(optimizeCss(await run(['@w-1', 'hover:@w-1'])).trim()).toMatchInlineSnapshot(` - ".\\@w-1 { + ".\\@w-1 { + width: 1px; + } + + @media (hover: hover) { + .hover\\:\\@w-1:hover { width: 1px; } - - @media (hover: hover) { - .hover\\:\\@w-1:hover { - width: 1px; - } - }" - `) + }" + `) }) test('custom functional utilities can return an array of rules', async () => { @@ -3596,10 +3578,8 @@ describe('matchUtilities()', () => { scrollbar-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .scrollbar-\\[\\#08c\\]\\/50 { - scrollbar-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .scrollbar-\\[\\#08c\\]\\/50 { + scrollbar-color: oklab(59.9824% -.06725 -.12414 / .5); } .scrollbar-\\[2px\\] { @@ -3761,10 +3741,8 @@ describe('matchUtilities()', () => { scrollbar-color: #fff; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .scrollbar-\\[\\#fff\\]\\/50 { - scrollbar-color: oklab(100% 0 5.96046e-8 / .5); - } + .scrollbar-\\[\\#fff\\]\\/50 { + scrollbar-color: oklab(100% 0 5.96046e-8 / .5); } .scrollbar-\\[2px\\] { @@ -3795,10 +3773,8 @@ describe('matchUtilities()', () => { scrollbar-color: black; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .scrollbar-black\\/50 { - scrollbar-color: oklab(0% none none / .5); - } + .scrollbar-black\\/50 { + scrollbar-color: oklab(0% none none / .5); }" `) @@ -3871,24 +3847,20 @@ describe('matchUtilities()', () => { scrollbar-color: black; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .scrollbar-black\\/33 { - scrollbar-color: oklab(0% none none / .33); - } + .scrollbar-black\\/33 { + scrollbar-color: oklab(0% none none / .33); + } - .scrollbar-black\\/\\[50\\%\\] { - scrollbar-color: oklab(0% none none / .5); - } + .scrollbar-black\\/\\[50\\%\\] { + scrollbar-color: oklab(0% none none / .5); } .scrollbar-current { scrollbar-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .scrollbar-current\\/45 { - scrollbar-color: color-mix(in oklab, currentColor 45%, transparent); - } + .scrollbar-current\\/45 { + scrollbar-color: color-mix(in oklab, currentColor 45%, transparent); }" `) }) @@ -4003,7 +3975,7 @@ describe('matchUtilities()', () => { display: flex; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:foo-\\[12px\\] { --foo: 12px; display: flex; @@ -4160,30 +4132,30 @@ describe('addComponents()', () => { expect(optimizeCss(compiled.build(['btn', 'btn-blue', 'btn-red'])).trim()) .toMatchInlineSnapshot(` - ".btn { - border-radius: .25rem; - padding: .5rem 1rem; - font-weight: 600; - } + ".btn { + border-radius: .25rem; + padding: .5rem 1rem; + font-weight: 600; + } - .btn-blue { - color: #fff; - background-color: #3490dc; - } + .btn-blue { + color: #fff; + background-color: #3490dc; + } - .btn-blue:hover { - background-color: #2779bd; - } + .btn-blue:hover { + background-color: #2779bd; + } - .btn-red { - color: #fff; - background-color: #e3342f; - } + .btn-red { + color: #fff; + background-color: #e3342f; + } - .btn-red:hover { - background-color: #cc1f1a; - }" - `) + .btn-red:hover { + background-color: #cc1f1a; + }" + `) }) }) @@ -4219,16 +4191,16 @@ describe('matchComponents()', () => { expect(optimizeCss(compiled.build(['prose', 'sm:prose-sm', 'hover:prose-lg'])).trim()) .toMatchInlineSnapshot(` - ".prose { - --container-size: normal; - } - - @media (hover: hover) { - .hover\\:prose-lg:hover { - --container-size: lg; + ".prose { + --container-size: normal; } - }" - `) + + @media (hover: hover) { + .hover\\:prose-lg:hover { + --container-size: lg; + } + }" + `) }) }) diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index cb0d04793..389b65d9e 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -16,10 +16,8 @@ describe('--alpha(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .foo { - margin: oklab(62.7955% .22486 .12584 / .5); - } + ".foo { + margin: oklab(62.7955% .22486 .12584 / .5); }" `) }) @@ -197,10 +195,8 @@ describe('--theme(…)', () => { --color-red-500: red; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .red { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); }" `) }) @@ -216,10 +212,8 @@ describe('--theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .224863 .125846); - } + ".red { + color: oklab(62.7955% .224863 .125846); }" `) }) @@ -349,13 +343,13 @@ describe('--theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) { + "@media (min-width: 48rem) { .blue { color: #00f; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .red { color: red; } @@ -508,10 +502,8 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .75); - } + ".red { + color: oklab(62.7955% .22486 .12584 / .75); }" `) }) @@ -527,10 +519,8 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .75); - } + ".red { + color: oklab(62.7955% .22486 .12584 / .75); }" `) }) @@ -546,10 +536,8 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .75); - } + ".red { + color: oklab(62.7955% .22486 .12584 / .75); }" `) }) @@ -708,10 +696,10 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".fam { - font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; - }" - `) + ".fam { + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + }" + `) }) test('theme(fontFamily.sans) (config)', async () => { @@ -728,10 +716,10 @@ describe('theme(…)', () => { ) expect(optimizeCss(compiled.build([])).trim()).toMatchInlineSnapshot(` - ".fam { - font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; - }" - `) + ".fam { + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + }" + `) }) }) @@ -773,10 +761,8 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .25); - } + ".red { + color: oklab(62.7955% .22486 .12584 / .25); }" `) }) @@ -848,13 +834,7 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` ".red { - color: color-mix(in oklab, red 50%, transparent / 50%); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .25); - } + color: oklab(62.7955% .22486 .12584 / .25); }" `) }) @@ -889,10 +869,8 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@supports (color: color-mix(in srgb, red 0%, red)) { - .red { - color: oklab(62.7955% .22486 .12584 / .5); - } + ".red { + color: oklab(62.7955% .22486 .12584 / .5); }" `) }) @@ -982,7 +960,7 @@ describe('theme(…)', () => { ['sm:[--color:theme(colors.red[500])]'], ), ).toMatchInlineSnapshot(` - "@media (width >= 40rem) { + "@media (min-width: 40rem) { .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] { --color: red; } @@ -1043,7 +1021,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) and (width <= 64rem) { + "@media (min-width: 48rem) and (max-width: 64rem) { .red { color: red; } @@ -1064,13 +1042,7 @@ describe('theme(…)', () => { } } `), - ).toMatchInlineSnapshot(` - "@media (width >= 48rem) and ((width < 64rem)) { - .red { - color: red; - } - }" - `) + ).toMatchInlineSnapshot(`""`) }) }) @@ -1088,7 +1060,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) { + "@media (min-width: 48rem) { .red { color: red; } @@ -1109,7 +1081,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@container (width > 48rem) { + "@container not (max-width: 48rem) { .red { color: red; } @@ -1185,15 +1157,8 @@ describe('in plugins', () => { .my-base-rule { color: oklch(62% .25 30); background-color: oklch(45% .31 264); - border-color: oklch(87% .07 7 / .1); - outline-color: oklch(79% .17 70 / .15); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .my-base-rule { - border-color: oklab(87% .06947 .00853 / .1); - outline-color: oklab(79% .05814 .15974 / .15); - } + border-color: oklab(87% .06947 .00853 / .1); + outline-color: oklab(79% .05814 .15974 / .15); } } diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 780441584..55ea0bc00 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -4683,13 +4683,7 @@ it.only('does the `color-mix(…)` thing', async () => { } .text-red-500\\/50 { - color: oklch(63.7% .237 25.331 / .5); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .text-red-500\\/50 { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); }" `) }) diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index 24e418be3..c148dac0e 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -332,48 +332,48 @@ test('Functional utilities from plugins are listed in hovers and completions', a expect(design.candidatesToCss(['custom-1-red', 'custom-1-green', 'custom-1-unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-1-red { - color: #ff0000; - } - ", - ".custom-1-green { - color: #ff0000; - } - ", - null, - ] - `) + [ + ".custom-1-red { + color: #ff0000; + } + ", + ".custom-1-green { + color: #ff0000; + } + ", + null, + ] + `) expect(design.candidatesToCss(['custom-2-red', 'custom-2-green', 'custom-2-unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-2-red { - color: #ff0000 / 0%; - } - ", - ".custom-2-green { - color: #ff0000 / 0%; - } - ", - null, - ] - `) + [ + ".custom-2-red { + color: #ff0000 / 0%; + } + ", + ".custom-2-green { + color: #ff0000 / 0%; + } + ", + null, + ] + `) expect(design.candidatesToCss(['custom-2-red/50', 'custom-2-red/75', 'custom-2-red/unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-2-red\\/50 { - color: #ff0000 / 50%; - } - ", - ".custom-2-red\\/75 { - color: #ff0000 / 75%; - } - ", - null, - ] - `) + [ + ".custom-2-red\\/50 { + color: #ff0000 / 50%; + } + ", + ".custom-2-red\\/75 { + color: #ff0000 / 75%; + } + ", + null, + ] + `) let classMap = new Map(design.getClassList()) let classNames = Array.from(classMap.keys()) diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index 528e3823d..0b863fa32 100644 --- a/packages/tailwindcss/src/test-utils/run.ts +++ b/packages/tailwindcss/src/test-utils/run.ts @@ -31,7 +31,7 @@ export function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: Features.Nesting | Features.MediaQueries, + include: Features.Nesting | Features.MediaRangeSyntax, exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark, targets: { safari: (16 << 16) | (4 << 8), diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 697510064..5cd29a472 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1286,26 +1286,26 @@ test('row-start', async () => { expect( await run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]', '-row-start-4']), ).toMatchInlineSnapshot(` - ".-row-start-4 { - grid-row-start: calc(4 * -1); - } + ".-row-start-4 { + grid-row-start: calc(4 * -1); + } - .row-start-4 { - grid-row-start: 4; - } + .row-start-4 { + grid-row-start: 4; + } - .row-start-99 { - grid-row-start: 99; - } + .row-start-99 { + grid-row-start: 99; + } - .row-start-\\[123\\] { - grid-row-start: 123; - } + .row-start-\\[123\\] { + grid-row-start: 123; + } - .row-start-auto { - grid-row-start: auto; - }" - `) + .row-start-auto { + grid-row-start: auto; + }" + `) expect( await run([ 'row-start', @@ -3180,31 +3180,31 @@ describe('container', () => { width: 100%; } - @media (width >= 40rem) { + @media (min-width: 40rem) { .container { max-width: 40rem; } } - @media (width >= 48rem) { + @media (min-width: 48rem) { .container { max-width: 48rem; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .container { max-width: 64rem; } } - @media (width >= 80rem) { + @media (min-width: 80rem) { .container { max-width: 80rem; } } - @media (width >= 96rem) { + @media (min-width: 96rem) { .container { max-width: 96rem; } @@ -3242,43 +3242,43 @@ describe('container', () => { width: 100%; } - @media (width >= 40em) { + @media (min-width: 40em) { .container { max-width: 40em; } } - @media (width >= 48em) { + @media (min-width: 48em) { .container { max-width: 48em; } } - @media (width >= 30px) { + @media (min-width: 30px) { .container { max-width: 30px; } } - @media (width >= 1600px) { + @media (min-width: 1600px) { .container { max-width: 1600px; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .container { max-width: 64rem; } } - @media (width >= 80rem) { + @media (min-width: 80rem) { .container { max-width: 80rem; } } - @media (width >= 96rem) { + @media (min-width: 96rem) { .container { max-width: 96rem; } @@ -3319,31 +3319,31 @@ describe('container', () => { width: 100%; } - @media (width >= 40rem) { + @media (min-width: 40rem) { .container { max-width: 40rem; } } - @media (width >= 48rem) { + @media (min-width: 48rem) { .container { max-width: 48rem; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .container { max-width: 64rem; } } - @media (width >= 80rem) { + @media (min-width: 80rem) { .container { max-width: 80rem; } } - @media (width >= 96rem) { + @media (min-width: 96rem) { .container { max-width: 96rem; } @@ -3354,7 +3354,7 @@ describe('container', () => { padding-inline: 1rem; } - @media (width >= 40rem) { + @media (min-width: 40rem) { .container { padding-inline: 2rem; } @@ -4228,39 +4228,39 @@ test('translate-y', async () => { test('translate-z', async () => { expect(await run(['-translate-z-px', 'translate-z-px', '-translate-z-[var(--value)]'])) .toMatchInlineSnapshot(` - ".-translate-z-\\[var\\(--value\\)\\] { - --tw-translate-z: calc(var(--value) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); - } + ".-translate-z-\\[var\\(--value\\)\\] { + --tw-translate-z: calc(var(--value) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); + } - .-translate-z-px { - --tw-translate-z: -1px; - translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); - } + .-translate-z-px { + --tw-translate-z: -1px; + translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); + } - .translate-z-px { - --tw-translate-z: 1px; - translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); - } + .translate-z-px { + --tw-translate-z: 1px; + translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); + } - @property --tw-translate-x { - syntax: "*"; - inherits: false; - initial-value: 0; - } + @property --tw-translate-x { + syntax: "*"; + inherits: false; + initial-value: 0; + } - @property --tw-translate-y { - syntax: "*"; - inherits: false; - initial-value: 0; - } + @property --tw-translate-y { + syntax: "*"; + inherits: false; + initial-value: 0; + } - @property --tw-translate-z { - syntax: "*"; - inherits: false; - initial-value: 0; - }" - `) + @property --tw-translate-z { + syntax: "*"; + inherits: false; + initial-value: 0; + }" + `) expect( await run([ 'translate-z', @@ -4307,22 +4307,22 @@ test('translate-3d', async () => { test('rotate', async () => { expect(await run(['rotate-45', '-rotate-45', 'rotate-[123deg]', 'rotate-[0.3_0.7_1_45deg]'])) .toMatchInlineSnapshot(` - ".-rotate-45 { - rotate: -45deg; - } + ".-rotate-45 { + rotate: -45deg; + } - .rotate-45 { - rotate: 45deg; - } + .rotate-45 { + rotate: 45deg; + } - .rotate-\\[0\\.3_0\\.7_1_45deg\\] { - rotate: .3 .7 1 45deg; - } + .rotate-\\[0\\.3_0\\.7_1_45deg\\] { + rotate: .3 .7 1 45deg; + } - .rotate-\\[123deg\\] { - rotate: 123deg; - }" - `) + .rotate-\\[123deg\\] { + rotate: 123deg; + }" + `) expect( await run([ 'rotate', @@ -5042,42 +5042,42 @@ test('transform', async () => { 'backface-hidden', ]), ).toMatchInlineSnapshot(` - ".backface-hidden { - backface-visibility: hidden; - } + ".backface-hidden { + backface-visibility: hidden; + } - .backface-visible { - backface-visibility: visible; - } + .backface-visible { + backface-visibility: visible; + } - .transform-3d { - transform-style: preserve-3d; - } + .transform-3d { + transform-style: preserve-3d; + } - .transform-border { - transform-box: border-box; - } + .transform-border { + transform-box: border-box; + } - .transform-content { - transform-box: content-box; - } + .transform-content { + transform-box: content-box; + } - .transform-fill { - transform-box: fill-box; - } + .transform-fill { + transform-box: fill-box; + } - .transform-flat { - transform-style: flat; - } + .transform-flat { + transform-style: flat; + } - .transform-stroke { - transform-box: stroke-box; - } + .transform-stroke { + transform-box: stroke-box; + } - .transform-view { - transform-box: view-box; - }" - `) + .transform-view { + transform-box: view-box; + }" + `) expect( await run([ '-transform', @@ -5568,26 +5568,26 @@ test('touch-pinch-zoom', async () => { test('select', async () => { expect(await run(['select-none', 'select-text', 'select-all', 'select-auto'])) .toMatchInlineSnapshot(` - ".select-all { - -webkit-user-select: all; - user-select: all; - } + ".select-all { + -webkit-user-select: all; + user-select: all; + } - .select-auto { - -webkit-user-select: auto; - user-select: auto; - } + .select-auto { + -webkit-user-select: auto; + user-select: auto; + } - .select-none { - -webkit-user-select: none; - user-select: none; - } + .select-none { + -webkit-user-select: none; + user-select: none; + } - .select-text { - -webkit-user-select: text; - user-select: text; - }" - `) + .select-text { + -webkit-user-select: text; + user-select: text; + }" + `) expect( await run([ '-select-none', @@ -5696,22 +5696,22 @@ test('--tw-scroll-snap-strictness', async () => { test('scroll-snap-align', async () => { expect(await run(['snap-align-none', 'snap-start', 'snap-end', 'snap-center'])) .toMatchInlineSnapshot(` - ".snap-align-none { - scroll-snap-align: none; - } + ".snap-align-none { + scroll-snap-align: none; + } - .snap-center { - scroll-snap-align: center; - } + .snap-center { + scroll-snap-align: center; + } - .snap-end { - scroll-snap-align: end; - } + .snap-end { + scroll-snap-align: end; + } - .snap-start { - scroll-snap-align: start; - }" - `) + .snap-start { + scroll-snap-align: start; + }" + `) expect( await run([ '-snap-align-none', @@ -7065,22 +7065,22 @@ test('grid-rows', async () => { test('flex-direction', async () => { expect(await run(['flex-row', 'flex-row-reverse', 'flex-col', 'flex-col-reverse'])) .toMatchInlineSnapshot(` - ".flex-col { - flex-direction: column; - } + ".flex-col { + flex-direction: column; + } - .flex-col-reverse { - flex-direction: column-reverse; - } + .flex-col-reverse { + flex-direction: column-reverse; + } - .flex-row { - flex-direction: row; - } + .flex-row { + flex-direction: row; + } - .flex-row-reverse { - flex-direction: row-reverse; - }" - `) + .flex-row-reverse { + flex-direction: row-reverse; + }" + `) expect( await run([ '-flex-row', @@ -7969,31 +7969,31 @@ test('divide-style', async () => { expect( await run(['divide-solid', 'divide-dashed', 'divide-dotted', 'divide-double', 'divide-none']), ).toMatchInlineSnapshot(` - ":where(.divide-dashed > :not(:last-child)) { - --tw-border-style: dashed; - border-style: dashed; - } + ":where(.divide-dashed > :not(:last-child)) { + --tw-border-style: dashed; + border-style: dashed; + } - :where(.divide-dotted > :not(:last-child)) { - --tw-border-style: dotted; - border-style: dotted; - } + :where(.divide-dotted > :not(:last-child)) { + --tw-border-style: dotted; + border-style: dotted; + } - :where(.divide-double > :not(:last-child)) { - --tw-border-style: double; - border-style: double; - } + :where(.divide-double > :not(:last-child)) { + --tw-border-style: double; + border-style: double; + } - :where(.divide-none > :not(:last-child)) { - --tw-border-style: none; - border-style: none; - } + :where(.divide-none > :not(:last-child)) { + --tw-border-style: none; + border-style: none; + } - :where(.divide-solid > :not(:last-child)) { - --tw-border-style: solid; - border-style: solid; - }" - `) + :where(.divide-solid > :not(:last-child)) { + --tw-border-style: solid; + border-style: solid; + }" + `) expect( await run([ 'divide', @@ -8049,20 +8049,16 @@ test('accent', async () => { accent-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { - accent-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { + accent-color: oklab(59.9824% -.06725 -.12414 / .5); } .accent-current { accent-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] { - accent-color: color-mix(in oklab, currentColor 50%, transparent); - } + .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] { + accent-color: color-mix(in oklab, currentColor 50%, transparent); } .accent-inherit { @@ -8085,10 +8081,8 @@ test('accent', async () => { accent-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] { - accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] { + accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .accent-transparent { @@ -8170,20 +8164,16 @@ test('caret', async () => { caret-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { - caret-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { + caret-color: oklab(59.9824% -.06725 -.12414 / .5); } .caret-current { caret-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] { - caret-color: color-mix(in oklab, currentColor 50%, transparent); - } + .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] { + caret-color: color-mix(in oklab, currentColor 50%, transparent); } .caret-inherit { @@ -8206,10 +8196,8 @@ test('caret', async () => { caret-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] { - caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] { + caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .caret-transparent { @@ -8289,20 +8277,16 @@ test('divide-color', async () => { border-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) { - border-color: oklab(59.9824% -.06725 -.12414 / .5); - } + :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) { + border-color: oklab(59.9824% -.06725 -.12414 / .5); } :where(.divide-current > :not(:last-child)) { border-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - :where(.divide-current\\/50 > :not(:last-child)), :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { - border-color: color-mix(in oklab, currentColor 50%, transparent); - } + :where(.divide-current\\/50 > :not(:last-child)), :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { + border-color: color-mix(in oklab, currentColor 50%, transparent); } :where(.divide-inherit > :not(:last-child)) { @@ -8325,10 +8309,8 @@ test('divide-color', async () => { border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - :where(.divide-red-500\\/50 > :not(:last-child)), :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + :where(.divide-red-500\\/50 > :not(:last-child)), :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) { + border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } :where(.divide-transparent > :not(:last-child)) { @@ -8695,18 +8677,18 @@ test('overflow-y', async () => { test('overscroll', async () => { expect(await run(['overscroll-auto', 'overscroll-contain', 'overscroll-none'])) .toMatchInlineSnapshot(` - ".overscroll-auto { - overscroll-behavior: auto; - } + ".overscroll-auto { + overscroll-behavior: auto; + } - .overscroll-contain { - overscroll-behavior: contain; - } + .overscroll-contain { + overscroll-behavior: contain; + } - .overscroll-none { - overscroll-behavior: none; - }" - `) + .overscroll-none { + overscroll-behavior: none; + }" + `) expect( await run([ 'overscroll', @@ -8723,18 +8705,18 @@ test('overscroll', async () => { test('overscroll-x', async () => { expect(await run(['overscroll-x-auto', 'overscroll-x-contain', 'overscroll-x-none'])) .toMatchInlineSnapshot(` - ".overscroll-x-auto { - overscroll-behavior-x: auto; - } + ".overscroll-x-auto { + overscroll-behavior-x: auto; + } - .overscroll-x-contain { - overscroll-behavior-x: contain; - } + .overscroll-x-contain { + overscroll-behavior-x: contain; + } - .overscroll-x-none { - overscroll-behavior-x: none; - }" - `) + .overscroll-x-none { + overscroll-behavior-x: none; + }" + `) expect( await run([ 'overscroll-x', @@ -8751,18 +8733,18 @@ test('overscroll-x', async () => { test('overscroll-y', async () => { expect(await run(['overscroll-y-auto', 'overscroll-y-contain', 'overscroll-y-none'])) .toMatchInlineSnapshot(` - ".overscroll-y-auto { - overscroll-behavior-y: auto; - } + ".overscroll-y-auto { + overscroll-behavior-y: auto; + } - .overscroll-y-contain { - overscroll-behavior-y: contain; - } + .overscroll-y-contain { + overscroll-behavior-y: contain; + } - .overscroll-y-none { - overscroll-behavior-y: none; - }" - `) + .overscroll-y-none { + overscroll-behavior-y: none; + }" + `) expect( await run([ 'overscroll-y', @@ -8904,22 +8886,22 @@ test('whitespace', async () => { test('text-wrap', async () => { expect(await run(['text-wrap', 'text-nowrap', 'text-balance', 'text-pretty'])) .toMatchInlineSnapshot(` - ".text-balance { - text-wrap: balance; - } + ".text-balance { + text-wrap: balance; + } - .text-nowrap { - text-wrap: nowrap; - } + .text-nowrap { + text-wrap: nowrap; + } - .text-pretty { - text-wrap: pretty; - } + .text-pretty { + text-wrap: pretty; + } - .text-wrap { - text-wrap: wrap; - }" - `) + .text-wrap { + text-wrap: wrap; + }" + `) expect( await run([ '-text-wrap', @@ -10241,10 +10223,8 @@ test('bg', async () => { background-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { - background-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { + background-color: oklab(59.9824% -.06725 -.12414 / .5); } .bg-\\[color\\:var\\(--some-var\\)\\] { @@ -10267,10 +10247,8 @@ test('bg', async () => { background-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] { - background-color: color-mix(in oklab, currentColor 50%, transparent); - } + .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] { + background-color: color-mix(in oklab, currentColor 50%, transparent); } .bg-current\\/\\[var\\(--bg-opacity\\)\\] { @@ -10297,10 +10275,8 @@ test('bg', async () => { background-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] { - background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] { + background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .bg-transparent { @@ -10861,36 +10837,11 @@ test('from', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[\\#0088cc\\]\\/50 { + .from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-\\[\\#0088cc\\]\\/50 { - --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .from-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5); - } - } - .from-\\[color\\:var\\(--my-color\\)\\] { --tw-gradient-from: var(--my-color); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -10916,36 +10867,11 @@ test('from', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-current\\/50 { + .from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] { + --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-current\\/50 { - --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .from-current\\/\\[0\\.5\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-current\\/\\[0\\.5\\] { - --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .from-current\\/\\[50\\%\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-current\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent); - } - } - .from-inherit { --tw-gradient-from: inherit; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -10956,36 +10882,11 @@ test('from', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-red-500\\/50 { + .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] { + --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-red-500\\/50 { - --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .from-red-500\\/\\[0\\.5\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-red-500\\/\\[0\\.5\\] { - --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .from-red-500\\/\\[50\\%\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .from-red-500\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11156,39 +11057,12 @@ test('via', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[\\#0088cc\\]\\/50 { + .via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-\\[\\#0088cc\\]\\/50 { - --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .via-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5); - } - } - .via-\\[color\\:var\\(--my-color\\)\\] { --tw-gradient-via: var(--my-color); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -11219,39 +11093,12 @@ test('via', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-current\\/50 { + .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] { + --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-current\\/50 { - --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .via-current\\/\\[0\\.5\\] { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-current\\/\\[0\\.5\\] { - --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .via-current\\/\\[50\\%\\] { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-current\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent); - } - } - .via-inherit { --tw-gradient-via: inherit; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -11264,39 +11111,12 @@ test('via', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-red-500\\/50 { + .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] { + --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-red-500\\/50 { - --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .via-red-500\\/\\[0\\.5\\] { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-red-500\\/\\[0\\.5\\] { - --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .via-red-500\\/\\[50\\%\\] { - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .via-red-500\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - .via-transparent { --tw-gradient-via: transparent; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -11465,36 +11285,11 @@ test('to', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[\\#0088cc\\]\\/50 { + .to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-\\[\\#0088cc\\]\\/50 { - --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .to-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); - } - } - - .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5); - } - } - .to-\\[color\\:var\\(--my-color\\)\\] { --tw-gradient-to: var(--my-color); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11520,36 +11315,11 @@ test('to', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-current\\/50 { + .to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] { + --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-current\\/50 { - --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .to-current\\/\\[0\\.5\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-current\\/\\[0\\.5\\] { - --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); - } - } - - .to-current\\/\\[50\\%\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-current\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent); - } - } - .to-inherit { --tw-gradient-to: inherit; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11560,36 +11330,11 @@ test('to', async () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-red-500\\/50 { + .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] { + --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-red-500\\/50 { - --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .to-red-500\\/\\[0\\.5\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-red-500\\/\\[0\\.5\\] { - --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - - .to-red-500\\/\\[50\\%\\] { - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - - @supports (color: color-mix(in srgb, red 0%, red)) { - .to-red-500\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - .to-transparent { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -11765,18 +11510,18 @@ test('bg-clip', async () => { test('bg-origin', async () => { expect(await run(['bg-origin-border', 'bg-origin-padding', 'bg-origin-content'])) .toMatchInlineSnapshot(` - ".bg-origin-border { - background-origin: border-box; - } + ".bg-origin-border { + background-origin: border-box; + } - .bg-origin-content { - background-origin: content-box; - } + .bg-origin-content { + background-origin: content-box; + } - .bg-origin-padding { - background-origin: padding-box; - }" - `) + .bg-origin-padding { + background-origin: padding-box; + }" + `) expect( await run([ 'bg-origin', @@ -12089,20 +11834,16 @@ test('fill', async () => { fill: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { - fill: oklab(59.9824% -.06725 -.12414 / .5); - } + .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { + fill: oklab(59.9824% -.06725 -.12414 / .5); } .fill-current { fill: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] { - fill: color-mix(in oklab, currentColor 50%, transparent); - } + .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] { + fill: color-mix(in oklab, currentColor 50%, transparent); } .fill-inherit { @@ -12125,10 +11866,8 @@ test('fill', async () => { fill: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] { - fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] { + fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .fill-transparent { @@ -12216,10 +11955,8 @@ test('stroke', async () => { stroke: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { - stroke: oklab(59.9824% -.06725 -.12414 / .5); - } + .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { + stroke: oklab(59.9824% -.06725 -.12414 / .5); } .stroke-\\[color\\:var\\(--my-color\\)\\] { @@ -12242,10 +11979,8 @@ test('stroke', async () => { stroke: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] { - stroke: color-mix(in oklab, currentColor 50%, transparent); - } + .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] { + stroke: color-mix(in oklab, currentColor 50%, transparent); } .stroke-inherit { @@ -12272,10 +12007,8 @@ test('stroke', async () => { stroke: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] { - stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] { + stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .stroke-transparent { @@ -13146,22 +12879,22 @@ test('font-stretch', async () => { test('text-decoration-line', async () => { expect(await run(['underline', 'overline', 'line-through', 'no-underline'])) .toMatchInlineSnapshot(` - ".line-through { - text-decoration-line: line-through; - } + ".line-through { + text-decoration-line: line-through; + } - .no-underline { - text-decoration-line: none; - } + .no-underline { + text-decoration-line: none; + } - .overline { - text-decoration-line: overline; - } + .overline { + text-decoration-line: overline; + } - .underline { - text-decoration-line: underline; - }" - `) + .underline { + text-decoration-line: underline; + }" + `) expect( await run([ '-underline', @@ -13214,20 +12947,16 @@ test('placeholder', async () => { color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { - color: oklab(59.9824% -.06725 -.12414 / .5); - } + .placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { + color: oklab(59.9824% -.06725 -.12414 / .5); } .placeholder-current::placeholder { color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .placeholder-current\\/50::placeholder, .placeholder-current\\/\\[0\\.5\\]::placeholder, .placeholder-current\\/\\[50\\%\\]::placeholder { - color: color-mix(in oklab, currentColor 50%, transparent); - } + .placeholder-current\\/50::placeholder, .placeholder-current\\/\\[0\\.5\\]::placeholder, .placeholder-current\\/\\[50\\%\\]::placeholder { + color: color-mix(in oklab, currentColor 50%, transparent); } .placeholder-inherit::placeholder { @@ -13250,10 +12979,8 @@ test('placeholder', async () => { color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .placeholder-red-500\\/50::placeholder, .placeholder-red-500\\/\\[0\\.5\\]::placeholder, .placeholder-red-500\\/\\[50\\%\\]::placeholder { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .placeholder-red-500\\/50::placeholder, .placeholder-red-500\\/\\[0\\.5\\]::placeholder, .placeholder-red-500\\/\\[50\\%\\]::placeholder { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .placeholder-transparent::placeholder { @@ -13345,10 +13072,8 @@ test('decoration', async () => { text-decoration-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { - text-decoration-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { + text-decoration-color: oklab(59.9824% -.06725 -.12414 / .5); } .decoration-\\[color\\:var\\(--my-color\\)\\] { @@ -13379,12 +13104,10 @@ test('decoration', async () => { text-decoration-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); - text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); - } + .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] { + -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); + text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); } .decoration-inherit { @@ -13399,12 +13122,10 @@ test('decoration', async () => { text-decoration-color: var(--color-red-500); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] { + -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .decoration-transparent { @@ -14684,14 +14405,14 @@ test('content', async () => { test('forced-color-adjust', async () => { expect(await run(['forced-color-adjust-none', 'forced-color-adjust-auto'])) .toMatchInlineSnapshot(` - ".forced-color-adjust-auto { - forced-color-adjust: auto; - } + ".forced-color-adjust-auto { + forced-color-adjust: auto; + } - .forced-color-adjust-none { - forced-color-adjust: none; - }" - `) + .forced-color-adjust-none { + forced-color-adjust: none; + }" + `) expect( await run([ 'forced', @@ -15048,28 +14769,24 @@ test('outline', async () => { outline-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { - outline-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { + outline-color: oklab(59.9824% -.06725 -.12414 / .5); } .outline-\\[black\\] { outline-color: #000; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .outline-\\[black\\]\\/50 { - outline-color: oklab(0% none none / .5); - } + .outline-\\[black\\]\\/50 { + outline-color: oklab(0% none none / .5); + } - .outline-\\[black\\]\\/\\[0\\.5\\] { - outline-color: oklab(0% none none / .5); - } + .outline-\\[black\\]\\/\\[0\\.5\\] { + outline-color: oklab(0% none none / .5); + } - .outline-\\[black\\]\\/\\[50\\%\\] { - outline-color: oklab(0% none none / .5); - } + .outline-\\[black\\]\\/\\[50\\%\\] { + outline-color: oklab(0% none none / .5); } .outline-\\[color\\:var\\(--value\\)\\] { @@ -15092,10 +14809,8 @@ test('outline', async () => { outline-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] { - outline-color: color-mix(in oklab, currentColor 50%, transparent); - } + .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] { + outline-color: color-mix(in oklab, currentColor 50%, transparent); } .outline-inherit { @@ -15106,10 +14821,8 @@ test('outline', async () => { outline-color: var(--color-red-500); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] { - outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] { + outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .outline-transparent { @@ -15522,10 +15235,8 @@ test('text', async () => { color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { - color: oklab(59.9824% -.06725 -.12414 / .5); - } + .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { + color: oklab(59.9824% -.06725 -.12414 / .5); } .text-\\[color\\:var\\(--my-color\\)\\] { @@ -15548,10 +15259,8 @@ test('text', async () => { color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] { - color: color-mix(in oklab, currentColor 50%, transparent); - } + .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] { + color: color-mix(in oklab, currentColor 50%, transparent); } .text-inherit { @@ -15574,10 +15283,8 @@ test('text', async () => { color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .text-transparent { @@ -15705,10 +15412,8 @@ test('shadow', async () => { --tw-shadow-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); } .shadow-\\[color\\:var\\(--value\\)\\] { @@ -15723,10 +15428,8 @@ test('shadow', async () => { --tw-shadow-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklab, currentColor 50%, transparent); - } + .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] { + --tw-shadow-color: color-mix(in oklab, currentColor 50%, transparent); } .shadow-inherit { @@ -15749,10 +15452,8 @@ test('shadow', async () => { --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] { + --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .shadow-transparent { @@ -15933,10 +15634,8 @@ test('inset-shadow', async () => { --tw-inset-shadow-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-inset-shadow-color: oklab(59.9824% -.06725 -.12414 / .5); } .inset-shadow-\\[color\\:var\\(--value\\)\\] { @@ -15951,10 +15650,8 @@ test('inset-shadow', async () => { --tw-inset-shadow-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in oklab, currentColor 50%, transparent); - } + .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] { + --tw-inset-shadow-color: color-mix(in oklab, currentColor 50%, transparent); } .inset-shadow-inherit { @@ -15977,10 +15674,8 @@ test('inset-shadow', async () => { --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] { + --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .inset-shadow-transparent { @@ -16169,10 +15864,8 @@ test('ring', async () => { --tw-ring-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-ring-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-ring-color: oklab(59.9824% -.06725 -.12414 / .5); } .ring-\\[color\\:var\\(--my-color\\)\\] { @@ -16195,10 +15888,8 @@ test('ring', async () => { --tw-ring-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in oklab, currentColor 50%, transparent); - } + .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in oklab, currentColor 50%, transparent); } .ring-inherit { @@ -16221,10 +15912,8 @@ test('ring', async () => { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .ring-transparent { @@ -16514,10 +16203,8 @@ test('inset-ring', async () => { --tw-inset-ring-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-ring-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-inset-ring-color: oklab(59.9824% -.06725 -.12414 / .5); } .inset-ring-\\[color\\:var\\(--my-color\\)\\] { @@ -16540,10 +16227,8 @@ test('inset-ring', async () => { --tw-inset-ring-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in oklab, currentColor 50%, transparent); - } + .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in oklab, currentColor 50%, transparent); } .inset-ring-inherit { @@ -16566,10 +16251,8 @@ test('inset-ring', async () => { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .inset-ring-transparent { @@ -16764,10 +16447,8 @@ test('ring-offset', async () => { --tw-ring-offset-color: #08c; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-ring-offset-color: oklab(59.9824% -.06725 -.12414 / .5); - } + .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-ring-offset-color: oklab(59.9824% -.06725 -.12414 / .5); } .ring-offset-\\[color\\:var\\(--my-color\\)\\] { @@ -16790,10 +16471,8 @@ test('ring-offset', async () => { --tw-ring-offset-color: currentColor; } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in oklab, currentColor 50%, transparent); - } + .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in oklab, currentColor 50%, transparent); } .ring-offset-inherit { @@ -16804,10 +16483,8 @@ test('ring-offset', async () => { --tw-ring-offset-color: var(--color-red-500); } - @supports (color: color-mix(in srgb, red 0%, red)) { - .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } .ring-offset-transparent { @@ -17040,7 +16717,7 @@ describe('custom utilities', () => { text-box-edge: cap alphabetic; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:text-trim { text-box-trim: both; text-box-edge: cap alphabetic; @@ -17609,22 +17286,22 @@ describe('custom utilities', () => { expect(await compileCss(input, ['example-1', 'example-0.5', 'example-20%', 'example-2/3'])) .toMatchInlineSnapshot(` - ".example-0\\.5 { - --value-as-number: .5; - } + ".example-0\\.5 { + --value-as-number: .5; + } - .example-1 { - --value-as-number: 1; - } + .example-1 { + --value-as-number: 1; + } - .example-2\\/3 { - --value-as-ratio: 2 / 3; - } + .example-2\\/3 { + --value-as-ratio: 2 / 3; + } - .example-20\\% { - --value-as-percentage: 20%; - }" - `) + .example-20\\% { + --value-as-percentage: 20%; + }" + `) expect( await compileCss(input, [ 'example-1.23', diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index eedeefbc0..6e0bd61ba 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -793,31 +793,31 @@ test('default breakpoints', async () => { ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 640px) { + "@media (min-width: 640px) { .sm\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:flex { display: flex; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .xl\\:flex { display: flex; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .\\32 xl\\:flex { display: flex; } @@ -853,7 +853,7 @@ test('custom breakpoint', async () => { ['10xl:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 5000px) { + "@media (min-width: 5000px) { .\\31 0xl\\:flex { display: flex; } @@ -876,19 +876,19 @@ test('max-*', async () => { ['max-lg:flex', 'max-sm:flex', 'max-md:flex'], ), ).toMatchInlineSnapshot(` - "@media (width < 1024px) { + "@media not (min-width: 1024px) { .max-lg\\:flex { display: flex; } } - @media (width < 768px) { + @media not (min-width: 768px) { .max-md\\:flex { display: flex; } } - @media (width < 640px) { + @media not (min-width: 640px) { .max-sm\\:flex { display: flex; } @@ -925,19 +925,19 @@ test('min-*', async () => { ['min-lg:flex', 'min-sm:flex', 'min-md:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 640px) { + "@media (min-width: 640px) { .min-sm\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .min-md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .min-lg\\:flex { display: flex; } @@ -976,30 +976,30 @@ test('sorting stacked min-* and max-* variants', async () => { ['min-sm:max-lg:flex', 'min-sm:max-xl:flex', 'min-md:max-lg:flex', 'min-xs:max-sm:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 280px) { - @media (width < 640px) { + "@media (min-width: 280px) { + @media not (min-width: 640px) { .min-xs\\:max-sm\\:flex { display: flex; } } } - @media (width >= 640px) { - @media (width < 1280px) { + @media (min-width: 640px) { + @media not (min-width: 1280px) { .min-sm\\:max-xl\\:flex { display: flex; } } - @media (width < 1024px) { + @media not (min-width: 1024px) { .min-sm\\:max-lg\\:flex { display: flex; } } } - @media (width >= 768px) { - @media (width < 1024px) { + @media (min-width: 768px) { + @media not (min-width: 1024px) { .min-md\\:max-lg\\:flex { display: flex; } @@ -1023,24 +1023,24 @@ test('stacked min-* and max-* variants should come after unprefixed variants', a ['sm:flex', 'min-sm:max-lg:flex', 'md:flex', 'min-md:max-lg:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 640px) { + "@media (min-width: 640px) { .sm\\:flex { display: flex; } - @media (width < 1024px) { + @media not (min-width: 1024px) { .min-sm\\:max-lg\\:flex { display: flex; } } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex { display: flex; } - @media (width < 1024px) { + @media not (min-width: 1024px) { .min-md\\:max-lg\\:flex { display: flex; } @@ -1079,49 +1079,49 @@ test('min, max and unprefixed breakpoints', async () => { ], ), ).toMatchInlineSnapshot(` - "@media (width < 1024px) { + "@media not (min-width: 1024px) { .max-lg\\:flex { display: flex; } } - @media (width < 1000px) { + @media not (min-width: 1000px) { .max-\\[1000px\\]\\:flex { display: flex; } } - @media (width < 768px) { + @media not (min-width: 768px) { .max-md\\:flex { display: flex; } } - @media (width < 640px) { + @media not (min-width: 640px) { .max-sm\\:flex { display: flex; } } - @media (width >= 640px) { + @media (min-width: 640px) { .min-sm\\:flex, .sm\\:flex { display: flex; } } - @media (width >= 700px) { + @media (min-width: 700px) { .min-\\[700px\\]\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex, .min-md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:flex, .min-lg\\:flex { display: flex; } @@ -1154,121 +1154,121 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti 'max-[12vh]:flex', ]), ).toMatchInlineSnapshot(` - "@media (width < calc(1000px + 12em)) { + "@media not (min-width: calc(1000px + 12em)) { .max-\\[calc\\(1000px\\+12em\\)\\]\\:flex { display: flex; } } - @media (width < calc(50vh + 12em)) { + @media not (min-width: calc(50vh + 12em)) { .max-\\[calc\\(50vh\\+12em\\)\\]\\:flex { display: flex; } } - @media (width < 12em) { + @media not (min-width: 12em) { .max-\\[12em\\]\\:flex { display: flex; } } - @media (width < 10em) { + @media not (min-width: 10em) { .max-\\[10em\\]\\:flex { display: flex; } } - @media (width < 12px) { + @media not (min-width: 12px) { .max-\\[12px\\]\\:flex { display: flex; } } - @media (width < 10px) { + @media not (min-width: 10px) { .max-\\[10px\\]\\:flex { display: flex; } } - @media (width < 12rem) { + @media not (min-width: 12rem) { .max-\\[12rem\\]\\:flex { display: flex; } } - @media (width < 10rem) { + @media not (min-width: 10rem) { .max-\\[10rem\\]\\:flex { display: flex; } } - @media (width < 12vh) { + @media not (min-width: 12vh) { .max-\\[12vh\\]\\:flex { display: flex; } } - @media (width < 10vh) { + @media not (min-width: 10vh) { .max-\\[10vh\\]\\:flex { display: flex; } } - @media (width >= calc(1000px + 12em)) { + @media (min-width: calc(1000px + 12em)) { .min-\\[calc\\(1000px\\+12em\\)\\]\\:flex { display: flex; } } - @media (width >= calc(50vh + 12em)) { + @media (min-width: calc(50vh + 12em)) { .min-\\[calc\\(50vh\\+12em\\)\\]\\:flex { display: flex; } } - @media (width >= 10em) { + @media (min-width: 10em) { .min-\\[10em\\]\\:flex { display: flex; } } - @media (width >= 12em) { + @media (min-width: 12em) { .min-\\[12em\\]\\:flex { display: flex; } } - @media (width >= 10px) { + @media (min-width: 10px) { .min-\\[10px\\]\\:flex { display: flex; } } - @media (width >= 12px) { + @media (min-width: 12px) { .min-\\[12px\\]\\:flex { display: flex; } } - @media (width >= 10rem) { + @media (min-width: 10rem) { .min-\\[10rem\\]\\:flex { display: flex; } } - @media (width >= 12rem) { + @media (min-width: 12rem) { .min-\\[12rem\\]\\:flex { display: flex; } } - @media (width >= 10vh) { + @media (min-width: 10vh) { .min-\\[10vh\\]\\:flex { display: flex; } } - @media (width >= 12vh) { + @media (min-width: 12vh) { .min-\\[12vh\\]\\:flex { display: flex; } @@ -1502,25 +1502,25 @@ test('not', async () => { } } - @media (width >= 640px) { + @media (min-width: 640px) { .not-max-sm\\:flex { display: flex; } } - @media (width >= 130px) { + @media (min-width: 130px) { .not-max-\\[130px\\]\\:flex { display: flex; } } - @media (width < 130px) { + @media not (min-width: 130px) { .not-min-\\[130px\\]\\:flex { display: flex; } } - @media (width < 640px) { + @media not (min-width: 640px) { .not-min-sm\\:flex, .not-sm\\:flex { display: flex; } @@ -2092,61 +2092,61 @@ test('container queries', async () => { ], ), ).toMatchInlineSnapshot(` - "@container name (width < 1024px) { + "@container name not (min-width: 1024px) { .\\@max-lg\\/name\\:flex { display: flex; } } - @container (width < 1024px) { + @container not (min-width: 1024px) { .\\@max-lg\\:flex { display: flex; } } - @container name (width < 456px) { + @container name not (min-width: 456px) { .\\@max-\\[456px\\]\\/name\\:flex { display: flex; } } - @container (width < 123px) { + @container not (min-width: 123px) { .\\@max-\\[123px\\]\\:flex { display: flex; } } - @container (width >= 123px) { + @container (min-width: 123px) { .\\@\\[123px\\]\\:flex, .\\@min-\\[123px\\]\\:flex { display: flex; } } - @container name (width >= 456px) { + @container name (min-width: 456px) { .\\@\\[456px\\]\\/name\\:flex, .\\@min-\\[456px\\]\\/name\\:flex { display: flex; } } - @container name (width >= 1024px) { + @container name (min-width: 1024px) { .\\@lg\\/name\\:flex { display: flex; } } - @container (width >= 1024px) { + @container (min-width: 1024px) { .\\@lg\\:flex { display: flex; } } - @container name (width >= 1024px) { + @container name (min-width: 1024px) { .\\@min-lg\\/name\\:flex { display: flex; } } - @container (width >= 1024px) { + @container (min-width: 1024px) { .\\@min-lg\\:flex { display: flex; } @@ -2340,31 +2340,31 @@ test('variant order', async () => { } } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:flex { display: flex; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .xl\\:flex { display: flex; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .\\32 xl\\:flex { display: flex; }