From 14501788d5a2b80814ea9882317c873b2bdc7be0 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 14 May 2026 00:51:07 +0200 Subject: [PATCH 01/20] use pretty AST tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use the `pretty(…)` helper for the AST related tests wherever we didn't do that yet. --- packages/tailwindcss/src/ast.test.ts | 41 ++++++++++++++++++---------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts index 24f31f7bb5b5..d5f3c6dcd87d 100644 --- a/packages/tailwindcss/src/ast.test.ts +++ b/packages/tailwindcss/src/ast.test.ts @@ -11,6 +11,7 @@ import { } from './ast' import * as CSS from './css-parser' import { buildDesignSystem } from './design-system' +import { pretty } from './test-utils/run' import { Theme } from './theme' import { walk, WalkAction } from './walk' @@ -18,9 +19,13 @@ const css = String.raw const defaultDesignSystem = buildDesignSystem(new Theme()) it('should pretty print an AST', () => { - expect(toCss(optimizeAst(CSS.parse('.foo{color:red;&:hover{color:blue;}}'), defaultDesignSystem))) - .toMatchInlineSnapshot(` - ".foo { + expect( + pretty( + toCss(optimizeAst(CSS.parse('.foo{color:red;&:hover{color:blue;}}'), defaultDesignSystem)), + ), + ).toMatchInlineSnapshot(` + " + .foo { color: red; &:hover { color: blue; @@ -68,8 +73,9 @@ it('allows the placement of context nodes', () => { expect(blueContext).toEqual({ context: 'a' }) expect(greenContext).toEqual({ context: 'b' }) - expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(` - ".foo { + expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(` + " + .foo { color: red; } .bar { @@ -159,8 +165,9 @@ it('should not emit empty rules once optimized', () => { @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap'); `) - expect(toCss(ast)).toMatchInlineSnapshot(` - ".foo { + expect(pretty(toCss(ast))).toMatchInlineSnapshot(` + " + .foo { } .foo { .bar { @@ -193,8 +200,9 @@ it('should not emit empty rules once optimized', () => { " `) - expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(` - "@charset "UTF-8"; + expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(` + " + @charset "UTF-8"; @layer foo, bar, baz; @custom-media --modern (color), (hover); @namespace 'http://www.w3.org/1999/xhtml'; @@ -235,8 +243,9 @@ it('should not emit exact duplicate declarations in the same rule', () => { } `) - expect(toCss(ast)).toMatchInlineSnapshot(` - ".foo { + expect(pretty(toCss(ast))).toMatchInlineSnapshot(` + " + .foo { color: red; .bar { color: green; @@ -267,8 +276,9 @@ it('should not emit exact duplicate declarations in the same rule', () => { " `) - expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(` - ".foo { + expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(` + " + .foo { .bar { color: blue; color: green; @@ -307,8 +317,9 @@ it('should not emit color-mix() fallbacks inside @keyframes', () => { let design = buildDesignSystem(theme) - expect(toCss(optimizeAst(ast, design))).toMatchInlineSnapshot(` - "@keyframes my-animation { + expect(pretty(toCss(optimizeAst(ast, design)))).toMatchInlineSnapshot(` + " + @keyframes my-animation { 0% { color: color-mix(in oklab, var(--color-emerald-600) 0%, transparent); } From e3be0440bb03c9ca2cf71d777803b9bdb0514a93 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 15 May 2026 22:21:15 +0200 Subject: [PATCH 02/20] temp: do not optimize This is temporary and on purpose. Once we implement nesting, we can see the impact on the tests. Once we are happy with that, we can add the optimizations from Lightning CSS again and if everything goes well, we should have barely any CSS changes in the final diff (at least related to CSS nesting). --- .../src/__snapshots__/index.test.ts.snap | 225 +- .../src/__snapshots__/utilities.test.ts.snap | 1220 +- packages/tailwindcss/src/at-import.test.ts | 22 +- .../tailwindcss/src/compat/config.test.ts | 317 +- .../src/compat/container-config.test.ts | 308 +- .../src/compat/legacy-utilities.test.ts | 41 +- .../tailwindcss/src/compat/plugin-api.test.ts | 1014 +- .../src/compat/screens-config.test.ts | 270 +- .../tailwindcss/src/css-functions.test.ts | 152 +- packages/tailwindcss/src/important.test.ts | 66 +- packages/tailwindcss/src/index.test.ts | 1825 +-- packages/tailwindcss/src/prefix.test.ts | 61 +- packages/tailwindcss/src/test-utils/run.ts | 3 +- packages/tailwindcss/src/utilities.test.ts | 10727 +++++----------- packages/tailwindcss/src/variants.test.ts | 2830 ++-- 15 files changed, 7924 insertions(+), 11157 deletions(-) diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 04d3311150fb..6d84bbc226fc 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -2,392 +2,275 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = ` " -@layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } -} - +@layer properties; :root, :host { - --color-red-500: oklch(63.7% .237 25.331); - --spacing: .25rem; + --color-red-500: oklch(63.7% 0.237 25.331); + --spacing: 0.25rem; } - .w-4 { width: calc(var(--spacing) * 4); } - .bg-red-500 { background-color: var(--color-red-500); } - .shadow-sm { - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - -@media (min-width: 40rem) { - .sm\\:flex { +.sm\\:flex { + @media (width >= 40rem) { display: flex; } } - @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-ring-inset { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0; + initial-value: 0px; } - @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } - @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } +} " `; exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = ` " +@layer theme, base, components, utilities; @layer theme { :root, :host { - --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", - "Noto Color Emoji"; - --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", + --tw-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --tw-default-font-family: var(--tw-font-sans); --tw-default-mono-font-family: var(--tw-font-mono); } } - @layer base { - *, :after, :before, ::backdrop { + *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; - border: 0 solid; margin: 0; padding: 0; - } - - ::file-selector-button { - box-sizing: border-box; border: 0 solid; - margin: 0; - padding: 0; } - html, :host { + line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; - line-height: 1.5; - font-family: var(--tw-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + font-family: var(--tw-default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); font-feature-settings: var(--tw-default-font-feature-settings, normal); font-variation-settings: var(--tw-default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } - hr { height: 0; color: inherit; border-top-width: 1px; } - abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } - h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } - a { color: inherit; -webkit-text-decoration: inherit; - -webkit-text-decoration: inherit; - -webkit-text-decoration: inherit; text-decoration: inherit; } - b, strong { font-weight: bolder; } - code, kbd, samp, pre { - font-family: var(--tw-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); + font-family: var(--tw-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-feature-settings: var(--tw-default-mono-font-feature-settings, normal); font-variation-settings: var(--tw-default-mono-font-variation-settings, normal); font-size: 1em; } - small { font-size: 80%; } - sub, sup { - vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; + vertical-align: baseline; } - sub { - bottom: -.25em; + bottom: -0.25em; } - sup { - top: -.5em; + top: -0.5em; } - table { text-indent: 0; border-color: inherit; border-collapse: collapse; } - :-moz-focusring { outline: auto; } - progress { vertical-align: baseline; } - summary { display: list-item; } - ol, ul, menu { list-style: none; } - img, svg, video, canvas, audio, iframe, embed, object { - vertical-align: middle; display: block; + vertical-align: middle; } - img, video { max-width: 100%; height: auto; } - - button, input, select, optgroup, textarea { + button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; - opacity: 1; - background-color: #0000; border-radius: 0; - } - - ::file-selector-button { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; + background-color: transparent; opacity: 1; - background-color: #0000; - border-radius: 0; } - :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } - :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } - ::file-selector-button { margin-inline-end: 4px; } - ::placeholder { opacity: 1; } - - @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { - color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } - textarea { resize: vertical; } - ::-webkit-search-decoration { -webkit-appearance: none; } - ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } - ::-webkit-datetime-edit { display: inline-flex; } - ::-webkit-datetime-edit-fields-wrapper { padding: 0; } - - ::-webkit-datetime-edit { - padding-block: 0; - } - - ::-webkit-datetime-edit-year-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-month-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-day-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-hour-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-minute-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-second-field { + ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } - - ::-webkit-datetime-edit-millisecond-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-meridiem-field { - padding-block: 0; - } - ::-webkit-calendar-picker-indicator { line-height: 1; } - :-moz-ui-invalid { box-shadow: none; } - - button, input:where([type="button"], [type="reset"], [type="submit"]) { + button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; } - - ::file-selector-button { - appearance: button; - } - - ::-webkit-inner-spin-button { + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } - - ::-webkit-outer-spin-button { - height: auto; - } - - [hidden]:where(:not([hidden="until-found"])) { + [hidden]:where(:not([hidden='until-found'])) { display: none !important; } } - -@layer components, utilities; +@layer utilities; " `; diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 43e8fdf6f040..212e919a3994 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -2,2057 +2,1661 @@ exports[`border-* 1`] = ` " -@layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-border-style: solid; - } - } -} - +@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } - .border { border-style: var(--tw-border-style); border-width: 1px; } - .border-0 { border-style: var(--tw-border-style); - border-width: 0; + border-width: 0px; } - .border-2 { border-style: var(--tw-border-style); border-width: 2px; } - .border-4 { border-style: var(--tw-border-style); border-width: 4px; } - .border-123 { border-style: var(--tw-border-style); border-width: 123px; } - .border-\\[0_1\\] { border-style: var(--tw-border-style); - border-width: 0 1px; + border-width: 0 1; } - .border-\\[0_2px_0_2px\\] { border-style: var(--tw-border-style); - border-width: 0 2px; + border-width: 0 2px 0 2px; } - .border-\\[12px\\] { border-style: var(--tw-border-style); border-width: 12px; } - .border-\\[12px_8px\\] { border-style: var(--tw-border-style); border-width: 12px 8px; } - -.border-\\[length\\:var\\(--my-width\\)\\], .border-\\[line-width\\:var\\(--my-width\\)\\] { +.border-\\[length\\:var\\(--my-width\\)\\] { + border-style: var(--tw-border-style); + border-width: var(--my-width); +} +.border-\\[line-width\\:var\\(--my-width\\)\\] { border-style: var(--tw-border-style); border-width: var(--my-width); } - .border-\\[medium\\] { border-style: var(--tw-border-style); border-width: medium; } - .border-\\[thick\\] { border-style: var(--tw-border-style); border-width: thick; } - .border-\\[thin\\] { border-style: var(--tw-border-style); border-width: thin; } - .border-\\[thin_2px\\] { border-style: var(--tw-border-style); border-width: thin 2px; } - .border-\\[\\#0088cc\\] { - border-color: #08c; + border-color: #0088cc; } - .border-\\[\\#0088cc\\]\\/50 { - border-color: oklab(59.9824% -.067 -.124 / .5); + border-color: color-mix(in oklab, #0088cc 50%, transparent); } - -.border-\\[color\\:var\\(--my-color\\)\\], .border-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-\\[color\\:var\\(--my-color\\)\\] { border-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - -.border-\\[var\\(--my-color\\)\\], .border-\\[var\\(--my-color\\)\\]\\/50 { +.border-\\[var\\(--my-color\\)\\] { border-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-\\[var\\(--my-color\\)\\]\\/50 { +.border-\\[var\\(--my-color\\)\\]\\/50 { + border-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .border-blue-500 { border-color: var(--border-color-blue-500); } - -.border-current, .border-current\\/50 { - border-color: currentColor; +.border-current { + border-color: currentcolor; } - -@supports (color: color-mix(in lab, red, red)) { - .border-current\\/50 { +.border-current\\/50 { + border-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .border-inherit { border-color: inherit; } - .border-red-500 { border-color: var(--color-red-500); } - .border-red-500\\/2\\.5 { - border-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-red-500\\/2\\.5 { + border-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .border-red-500\\/2\\.25 { - border-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-red-500\\/2\\.25 { + border-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .border-red-500\\/2\\.75 { - border-color: #ef444407; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-red-500\\/2\\.75 { + border-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .border-red-500\\/50 { - border-color: #ef444480; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-red-500\\/50 { + border-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .border-transparent { - border-color: #0000; + border-color: transparent; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -" -`; - -exports[`border-b-* 1`] = ` -" @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-border-style: solid; } } } +" +`; +exports[`border-b-* 1`] = ` +" +@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } - .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } - .border-b-0 { border-bottom-style: var(--tw-border-style); - border-bottom-width: 0; + border-bottom-width: 0px; } - .border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } - .border-b-4 { border-bottom-style: var(--tw-border-style); border-bottom-width: 4px; } - .border-b-123 { border-bottom-style: var(--tw-border-style); border-bottom-width: 123px; } - .border-b-\\[0_1\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: 0 1; } - .border-b-\\[0_2px_0_2px\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: 0 2px 0 2px; } - .border-b-\\[12px\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: 12px; } - .border-b-\\[12px_8px\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: 12px 8px; } - -.border-b-\\[length\\:var\\(--my-width\\)\\], .border-b-\\[line-width\\:var\\(--my-width\\)\\] { +.border-b-\\[length\\:var\\(--my-width\\)\\] { + border-bottom-style: var(--tw-border-style); + border-bottom-width: var(--my-width); +} +.border-b-\\[line-width\\:var\\(--my-width\\)\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: var(--my-width); } - .border-b-\\[medium\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: medium; } - .border-b-\\[thick\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: thick; } - .border-b-\\[thin\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: thin; } - .border-b-\\[thin_2px\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: thin 2px; } - .border-b-\\[\\#0088cc\\] { - border-bottom-color: #08c; + border-bottom-color: #0088cc; } - .border-b-\\[\\#0088cc\\]\\/50 { - border-bottom-color: oklab(59.9824% -.067 -.124 / .5); + border-bottom-color: color-mix(in oklab, #0088cc 50%, transparent); } - -.border-b-\\[color\\:var\\(--my-color\\)\\], .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-b-\\[color\\:var\\(--my-color\\)\\] { border-bottom-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-bottom-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - -.border-b-\\[var\\(--my-color\\)\\], .border-b-\\[var\\(--my-color\\)\\]\\/50 { +.border-b-\\[var\\(--my-color\\)\\] { border-bottom-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-b-\\[var\\(--my-color\\)\\]\\/50 { +.border-b-\\[var\\(--my-color\\)\\]\\/50 { + border-bottom-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .border-b-blue-500 { border-bottom-color: var(--border-color-blue-500); } - -.border-b-current, .border-b-current\\/50 { - border-bottom-color: currentColor; +.border-b-current { + border-bottom-color: currentcolor; } - -@supports (color: color-mix(in lab, red, red)) { - .border-b-current\\/50 { +.border-b-current\\/50 { + border-bottom-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .border-b-inherit { border-bottom-color: inherit; } - .border-b-red-500 { border-bottom-color: var(--color-red-500); } - .border-b-red-500\\/2\\.5 { - border-bottom-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-b-red-500\\/2\\.5 { + border-bottom-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .border-b-red-500\\/2\\.25 { - border-bottom-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-b-red-500\\/2\\.25 { + border-bottom-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .border-b-red-500\\/2\\.75 { - border-bottom-color: #ef444407; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-b-red-500\\/2\\.75 { + border-bottom-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .border-b-red-500\\/50 { - border-bottom-color: #ef444480; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-b-red-500\\/50 { + border-bottom-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .border-b-transparent { - border-bottom-color: #0000; + border-bottom-color: transparent; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -" -`; - -exports[`border-be-* 1`] = ` -" @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-border-style: solid; } } } +" +`; +exports[`border-be-* 1`] = ` +" +@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } - .border-be { border-block-end-style: var(--tw-border-style); border-block-end-width: 1px; } - .border-be-0 { border-block-end-style: var(--tw-border-style); - border-block-end-width: 0; + border-block-end-width: 0px; } - .border-be-2 { border-block-end-style: var(--tw-border-style); border-block-end-width: 2px; } - .border-be-4 { border-block-end-style: var(--tw-border-style); border-block-end-width: 4px; } - .border-be-123 { border-block-end-style: var(--tw-border-style); border-block-end-width: 123px; } - .border-be-\\[0_1\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: 0 1; } - .border-be-\\[0_2px_0_2px\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: 0 2px 0 2px; } - .border-be-\\[12px\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: 12px; } - .border-be-\\[12px_8px\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: 12px 8px; } - -.border-be-\\[length\\:var\\(--my-width\\)\\], .border-be-\\[line-width\\:var\\(--my-width\\)\\] { +.border-be-\\[length\\:var\\(--my-width\\)\\] { + border-block-end-style: var(--tw-border-style); + border-block-end-width: var(--my-width); +} +.border-be-\\[line-width\\:var\\(--my-width\\)\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: var(--my-width); } - .border-be-\\[medium\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: medium; } - .border-be-\\[thick\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: thick; } - .border-be-\\[thin\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: thin; } - .border-be-\\[thin_2px\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: thin 2px; } - .border-be-\\[\\#0088cc\\] { - border-block-end-color: #08c; + border-block-end-color: #0088cc; } - .border-be-\\[\\#0088cc\\]\\/50 { - border-block-end-color: oklab(59.9824% -.067 -.124 / .5); + border-block-end-color: color-mix(in oklab, #0088cc 50%, transparent); } - -.border-be-\\[color\\:var\\(--my-color\\)\\], .border-be-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-be-\\[color\\:var\\(--my-color\\)\\] { border-block-end-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-be-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-be-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-block-end-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-block-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - -.border-be-\\[var\\(--my-color\\)\\], .border-be-\\[var\\(--my-color\\)\\]\\/50 { +.border-be-\\[var\\(--my-color\\)\\] { border-block-end-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-be-\\[var\\(--my-color\\)\\]\\/50 { +.border-be-\\[var\\(--my-color\\)\\]\\/50 { + border-block-end-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-block-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .border-be-blue-500 { border-block-end-color: var(--border-color-blue-500); } - -.border-be-current, .border-be-current\\/50 { - border-block-end-color: currentColor; +.border-be-current { + border-block-end-color: currentcolor; } - -@supports (color: color-mix(in lab, red, red)) { - .border-be-current\\/50 { +.border-be-current\\/50 { + border-block-end-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { border-block-end-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .border-be-inherit { border-block-end-color: inherit; } - .border-be-red-500 { border-block-end-color: var(--color-red-500); } - .border-be-red-500\\/2\\.5 { - border-block-end-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-be-red-500\\/2\\.5 { + border-block-end-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .border-be-red-500\\/2\\.25 { - border-block-end-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-be-red-500\\/2\\.25 { + border-block-end-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .border-be-red-500\\/2\\.75 { - border-block-end-color: #ef444407; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-be-red-500\\/2\\.75 { + border-block-end-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .border-be-red-500\\/50 { - border-block-end-color: #ef444480; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-be-red-500\\/50 { + border-block-end-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .border-be-transparent { - border-block-end-color: #0000; + border-block-end-color: transparent; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -" -`; - -exports[`border-bs-* 1`] = ` -" @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-border-style: solid; } } } +" +`; +exports[`border-bs-* 1`] = ` +" +@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } - .border-bs { border-block-start-style: var(--tw-border-style); border-block-start-width: 1px; } - .border-bs-0 { border-block-start-style: var(--tw-border-style); - border-block-start-width: 0; + border-block-start-width: 0px; } - .border-bs-2 { border-block-start-style: var(--tw-border-style); border-block-start-width: 2px; } - .border-bs-4 { border-block-start-style: var(--tw-border-style); border-block-start-width: 4px; } - .border-bs-123 { border-block-start-style: var(--tw-border-style); border-block-start-width: 123px; } - .border-bs-\\[0_1\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: 0 1; } - .border-bs-\\[0_2px_0_2px\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: 0 2px 0 2px; } - .border-bs-\\[12px\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: 12px; } - .border-bs-\\[12px_8px\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: 12px 8px; } - -.border-bs-\\[length\\:var\\(--my-width\\)\\], .border-bs-\\[line-width\\:var\\(--my-width\\)\\] { +.border-bs-\\[length\\:var\\(--my-width\\)\\] { + border-block-start-style: var(--tw-border-style); + border-block-start-width: var(--my-width); +} +.border-bs-\\[line-width\\:var\\(--my-width\\)\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: var(--my-width); } - .border-bs-\\[medium\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: medium; } - .border-bs-\\[thick\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: thick; } - .border-bs-\\[thin\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: thin; } - .border-bs-\\[thin_2px\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: thin 2px; } - .border-bs-\\[\\#0088cc\\] { - border-block-start-color: #08c; + border-block-start-color: #0088cc; } - .border-bs-\\[\\#0088cc\\]\\/50 { - border-block-start-color: oklab(59.9824% -.067 -.124 / .5); + border-block-start-color: color-mix(in oklab, #0088cc 50%, transparent); } - -.border-bs-\\[color\\:var\\(--my-color\\)\\], .border-bs-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-bs-\\[color\\:var\\(--my-color\\)\\] { border-block-start-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-bs-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-bs-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-block-start-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-block-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - -.border-bs-\\[var\\(--my-color\\)\\], .border-bs-\\[var\\(--my-color\\)\\]\\/50 { +.border-bs-\\[var\\(--my-color\\)\\] { border-block-start-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-bs-\\[var\\(--my-color\\)\\]\\/50 { +.border-bs-\\[var\\(--my-color\\)\\]\\/50 { + border-block-start-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-block-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .border-bs-blue-500 { border-block-start-color: var(--border-color-blue-500); } - -.border-bs-current, .border-bs-current\\/50 { - border-block-start-color: currentColor; +.border-bs-current { + border-block-start-color: currentcolor; } - -@supports (color: color-mix(in lab, red, red)) { - .border-bs-current\\/50 { +.border-bs-current\\/50 { + border-block-start-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { border-block-start-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .border-bs-inherit { border-block-start-color: inherit; } - .border-bs-red-500 { border-block-start-color: var(--color-red-500); } - .border-bs-red-500\\/2\\.5 { - border-block-start-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-bs-red-500\\/2\\.5 { + border-block-start-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .border-bs-red-500\\/2\\.25 { - border-block-start-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-bs-red-500\\/2\\.25 { + border-block-start-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .border-bs-red-500\\/2\\.75 { - border-block-start-color: #ef444407; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-bs-red-500\\/2\\.75 { + border-block-start-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .border-bs-red-500\\/50 { - border-block-start-color: #ef444480; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-bs-red-500\\/50 { + border-block-start-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .border-bs-transparent { - border-block-start-color: #0000; + border-block-start-color: transparent; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -" -`; - -exports[`border-e-* 1`] = ` -" @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-border-style: solid; } } } +" +`; +exports[`border-e-* 1`] = ` +" +@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } - .border-e { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } - .border-e-0 { border-inline-end-style: var(--tw-border-style); - border-inline-end-width: 0; + border-inline-end-width: 0px; } - .border-e-2 { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 2px; } - .border-e-4 { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 4px; } - .border-e-123 { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 123px; } - .border-e-\\[0_1\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0 1; } - .border-e-\\[0_2px_0_2px\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0 2px 0 2px; } - .border-e-\\[12px\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 12px; } - .border-e-\\[12px_8px\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 12px 8px; } - -.border-e-\\[length\\:var\\(--my-width\\)\\], .border-e-\\[line-width\\:var\\(--my-width\\)\\] { +.border-e-\\[length\\:var\\(--my-width\\)\\] { + border-inline-end-style: var(--tw-border-style); + border-inline-end-width: var(--my-width); +} +.border-e-\\[line-width\\:var\\(--my-width\\)\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: var(--my-width); } - .border-e-\\[medium\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: medium; } - .border-e-\\[thick\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: thick; } - .border-e-\\[thin\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: thin; } - .border-e-\\[thin_2px\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: thin 2px; } - .border-e-\\[\\#0088cc\\] { - border-inline-end-color: #08c; + border-inline-end-color: #0088cc; } - .border-e-\\[\\#0088cc\\]\\/50 { - border-inline-end-color: oklab(59.9824% -.067 -.124 / .5); + border-inline-end-color: color-mix(in oklab, #0088cc 50%, transparent); } - -.border-e-\\[color\\:var\\(--my-color\\)\\], .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-e-\\[color\\:var\\(--my-color\\)\\] { border-inline-end-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-inline-end-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - -.border-e-\\[var\\(--my-color\\)\\], .border-e-\\[var\\(--my-color\\)\\]\\/50 { +.border-e-\\[var\\(--my-color\\)\\] { border-inline-end-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-e-\\[var\\(--my-color\\)\\]\\/50 { +.border-e-\\[var\\(--my-color\\)\\]\\/50 { + border-inline-end-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .border-e-blue-500 { border-inline-end-color: var(--border-color-blue-500); } - -.border-e-current, .border-e-current\\/50 { - border-inline-end-color: currentColor; +.border-e-current { + border-inline-end-color: currentcolor; } - -@supports (color: color-mix(in lab, red, red)) { - .border-e-current\\/50 { +.border-e-current\\/50 { + border-inline-end-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { border-inline-end-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .border-e-inherit { border-inline-end-color: inherit; } - .border-e-red-500 { border-inline-end-color: var(--color-red-500); } - .border-e-red-500\\/2\\.5 { - border-inline-end-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-e-red-500\\/2\\.5 { + border-inline-end-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .border-e-red-500\\/2\\.25 { - border-inline-end-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-e-red-500\\/2\\.25 { + border-inline-end-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .border-e-red-500\\/2\\.75 { - border-inline-end-color: #ef444407; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-e-red-500\\/2\\.75 { + border-inline-end-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .border-e-red-500\\/50 { - border-inline-end-color: #ef444480; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-e-red-500\\/50 { + border-inline-end-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .border-e-transparent { - border-inline-end-color: #0000; + border-inline-end-color: transparent; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -" -`; - -exports[`border-l-* 1`] = ` -" @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-border-style: solid; } } } +" +`; +exports[`border-l-* 1`] = ` +" +@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } - .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } - .border-l-0 { border-left-style: var(--tw-border-style); - border-left-width: 0; + border-left-width: 0px; } - .border-l-2 { border-left-style: var(--tw-border-style); border-left-width: 2px; } - .border-l-4 { border-left-style: var(--tw-border-style); border-left-width: 4px; } - .border-l-123 { border-left-style: var(--tw-border-style); border-left-width: 123px; } - .border-l-\\[0_1\\] { border-left-style: var(--tw-border-style); border-left-width: 0 1; } - .border-l-\\[0_2px_0_2px\\] { border-left-style: var(--tw-border-style); border-left-width: 0 2px 0 2px; } - .border-l-\\[12px\\] { border-left-style: var(--tw-border-style); border-left-width: 12px; } - .border-l-\\[12px_8px\\] { border-left-style: var(--tw-border-style); border-left-width: 12px 8px; } - -.border-l-\\[length\\:var\\(--my-width\\)\\], .border-l-\\[line-width\\:var\\(--my-width\\)\\] { +.border-l-\\[length\\:var\\(--my-width\\)\\] { + border-left-style: var(--tw-border-style); + border-left-width: var(--my-width); +} +.border-l-\\[line-width\\:var\\(--my-width\\)\\] { border-left-style: var(--tw-border-style); border-left-width: var(--my-width); } - .border-l-\\[medium\\] { border-left-style: var(--tw-border-style); border-left-width: medium; } - .border-l-\\[thick\\] { border-left-style: var(--tw-border-style); border-left-width: thick; } - .border-l-\\[thin\\] { border-left-style: var(--tw-border-style); border-left-width: thin; } - .border-l-\\[thin_2px\\] { border-left-style: var(--tw-border-style); border-left-width: thin 2px; } - .border-l-\\[\\#0088cc\\] { - border-left-color: #08c; + border-left-color: #0088cc; } - .border-l-\\[\\#0088cc\\]\\/50 { - border-left-color: oklab(59.9824% -.067 -.124 / .5); + border-left-color: color-mix(in oklab, #0088cc 50%, transparent); } - -.border-l-\\[color\\:var\\(--my-color\\)\\], .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-l-\\[color\\:var\\(--my-color\\)\\] { border-left-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-left-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - -.border-l-\\[var\\(--my-color\\)\\], .border-l-\\[var\\(--my-color\\)\\]\\/50 { +.border-l-\\[var\\(--my-color\\)\\] { border-left-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-l-\\[var\\(--my-color\\)\\]\\/50 { +.border-l-\\[var\\(--my-color\\)\\]\\/50 { + border-left-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .border-l-blue-500 { border-left-color: var(--border-color-blue-500); } - -.border-l-current, .border-l-current\\/50 { - border-left-color: currentColor; +.border-l-current { + border-left-color: currentcolor; } - -@supports (color: color-mix(in lab, red, red)) { - .border-l-current\\/50 { +.border-l-current\\/50 { + border-left-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { border-left-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .border-l-inherit { border-left-color: inherit; } - .border-l-red-500 { border-left-color: var(--color-red-500); } - .border-l-red-500\\/2\\.5 { - border-left-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-l-red-500\\/2\\.5 { + border-left-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-left-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .border-l-red-500\\/2\\.25 { - border-left-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-l-red-500\\/2\\.25 { + border-left-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-left-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .border-l-red-500\\/2\\.75 { - border-left-color: #ef444407; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-l-red-500\\/2\\.75 { + border-left-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .border-l-red-500\\/50 { - border-left-color: #ef444480; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-l-red-500\\/50 { + border-left-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .border-l-transparent { - border-left-color: #0000; + border-left-color: transparent; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -" -`; - -exports[`border-r-* 1`] = ` -" @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-border-style: solid; } } } +" +`; +exports[`border-r-* 1`] = ` +" +@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } - .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } - .border-r-0 { border-right-style: var(--tw-border-style); - border-right-width: 0; + border-right-width: 0px; } - .border-r-2 { border-right-style: var(--tw-border-style); border-right-width: 2px; } - .border-r-4 { border-right-style: var(--tw-border-style); border-right-width: 4px; } - .border-r-123 { border-right-style: var(--tw-border-style); border-right-width: 123px; } - .border-r-\\[0_1\\] { border-right-style: var(--tw-border-style); border-right-width: 0 1; } - .border-r-\\[0_2px_0_2px\\] { border-right-style: var(--tw-border-style); border-right-width: 0 2px 0 2px; } - .border-r-\\[12px\\] { border-right-style: var(--tw-border-style); border-right-width: 12px; } - .border-r-\\[12px_8px\\] { border-right-style: var(--tw-border-style); border-right-width: 12px 8px; } - -.border-r-\\[length\\:var\\(--my-width\\)\\], .border-r-\\[line-width\\:var\\(--my-width\\)\\] { +.border-r-\\[length\\:var\\(--my-width\\)\\] { + border-right-style: var(--tw-border-style); + border-right-width: var(--my-width); +} +.border-r-\\[line-width\\:var\\(--my-width\\)\\] { border-right-style: var(--tw-border-style); border-right-width: var(--my-width); } - .border-r-\\[medium\\] { border-right-style: var(--tw-border-style); border-right-width: medium; } - .border-r-\\[thick\\] { border-right-style: var(--tw-border-style); border-right-width: thick; } - .border-r-\\[thin\\] { border-right-style: var(--tw-border-style); border-right-width: thin; } - .border-r-\\[thin_2px\\] { border-right-style: var(--tw-border-style); border-right-width: thin 2px; } - .border-r-\\[\\#0088cc\\] { - border-right-color: #08c; + border-right-color: #0088cc; } - .border-r-\\[\\#0088cc\\]\\/50 { - border-right-color: oklab(59.9824% -.067 -.124 / .5); + border-right-color: color-mix(in oklab, #0088cc 50%, transparent); } - -.border-r-\\[color\\:var\\(--my-color\\)\\], .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-r-\\[color\\:var\\(--my-color\\)\\] { border-right-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-right-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - -.border-r-\\[var\\(--my-color\\)\\], .border-r-\\[var\\(--my-color\\)\\]\\/50 { +.border-r-\\[var\\(--my-color\\)\\] { border-right-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-r-\\[var\\(--my-color\\)\\]\\/50 { +.border-r-\\[var\\(--my-color\\)\\]\\/50 { + border-right-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .border-r-blue-500 { border-right-color: var(--border-color-blue-500); } - -.border-r-current, .border-r-current\\/50 { - border-right-color: currentColor; +.border-r-current { + border-right-color: currentcolor; } - -@supports (color: color-mix(in lab, red, red)) { - .border-r-current\\/50 { +.border-r-current\\/50 { + border-right-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { border-right-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .border-r-inherit { border-right-color: inherit; } - .border-r-red-500 { border-right-color: var(--color-red-500); } - .border-r-red-500\\/2\\.5 { - border-right-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-r-red-500\\/2\\.5 { + border-right-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-right-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .border-r-red-500\\/2\\.25 { - border-right-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-r-red-500\\/2\\.25 { + border-right-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-right-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .border-r-red-500\\/2\\.75 { - border-right-color: #ef444407; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-r-red-500\\/2\\.75 { + border-right-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .border-r-red-500\\/50 { - border-right-color: #ef444480; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-r-red-500\\/50 { + border-right-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .border-r-transparent { - border-right-color: #0000; + border-right-color: transparent; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -" -`; - -exports[`border-s-* 1`] = ` -" @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-border-style: solid; } } } +" +`; +exports[`border-s-* 1`] = ` +" +@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } - .border-s { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; } - .border-s-0 { border-inline-start-style: var(--tw-border-style); - border-inline-start-width: 0; + border-inline-start-width: 0px; } - .border-s-2 { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 2px; } - .border-s-4 { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 4px; } - .border-s-123 { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 123px; } - .border-s-\\[0_1\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 0 1; } - .border-s-\\[0_2px_0_2px\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 0 2px 0 2px; } - .border-s-\\[12px\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 12px; } - .border-s-\\[12px_8px\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 12px 8px; } - -.border-s-\\[length\\:var\\(--my-width\\)\\], .border-s-\\[line-width\\:var\\(--my-width\\)\\] { +.border-s-\\[length\\:var\\(--my-width\\)\\] { + border-inline-start-style: var(--tw-border-style); + border-inline-start-width: var(--my-width); +} +.border-s-\\[line-width\\:var\\(--my-width\\)\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: var(--my-width); } - .border-s-\\[medium\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: medium; } - .border-s-\\[thick\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: thick; } - .border-s-\\[thin\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: thin; } - .border-s-\\[thin_2px\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: thin 2px; } - .border-s-\\[\\#0088cc\\] { - border-inline-start-color: #08c; + border-inline-start-color: #0088cc; } - .border-s-\\[\\#0088cc\\]\\/50 { - border-inline-start-color: oklab(59.9824% -.067 -.124 / .5); + border-inline-start-color: color-mix(in oklab, #0088cc 50%, transparent); } - -.border-s-\\[color\\:var\\(--my-color\\)\\], .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-s-\\[color\\:var\\(--my-color\\)\\] { border-inline-start-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-inline-start-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - -.border-s-\\[var\\(--my-color\\)\\], .border-s-\\[var\\(--my-color\\)\\]\\/50 { +.border-s-\\[var\\(--my-color\\)\\] { border-inline-start-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-s-\\[var\\(--my-color\\)\\]\\/50 { +.border-s-\\[var\\(--my-color\\)\\]\\/50 { + border-inline-start-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .border-s-blue-500 { border-inline-start-color: var(--border-color-blue-500); } - -.border-s-current, .border-s-current\\/50 { - border-inline-start-color: currentColor; +.border-s-current { + border-inline-start-color: currentcolor; } - -@supports (color: color-mix(in lab, red, red)) { - .border-s-current\\/50 { +.border-s-current\\/50 { + border-inline-start-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { border-inline-start-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .border-s-inherit { border-inline-start-color: inherit; } - .border-s-red-500 { border-inline-start-color: var(--color-red-500); } - .border-s-red-500\\/2\\.5 { - border-inline-start-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-s-red-500\\/2\\.5 { + border-inline-start-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .border-s-red-500\\/2\\.25 { - border-inline-start-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-s-red-500\\/2\\.25 { + border-inline-start-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .border-s-red-500\\/2\\.75 { - border-inline-start-color: #ef444407; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-s-red-500\\/2\\.75 { + border-inline-start-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .border-s-red-500\\/50 { - border-inline-start-color: #ef444480; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-s-red-500\\/50 { + border-inline-start-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .border-s-transparent { - border-inline-start-color: #0000; + border-inline-start-color: transparent; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -" -`; - -exports[`border-t-* 1`] = ` -" @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-border-style: solid; } } } +" +`; +exports[`border-t-* 1`] = ` +" +@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } - .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } - .border-t-0 { border-top-style: var(--tw-border-style); - border-top-width: 0; + border-top-width: 0px; } - .border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px; } - .border-t-4 { border-top-style: var(--tw-border-style); border-top-width: 4px; } - .border-t-123 { border-top-style: var(--tw-border-style); border-top-width: 123px; } - .border-t-\\[0_1\\] { border-top-style: var(--tw-border-style); border-top-width: 0 1; } - .border-t-\\[0_2px_0_2px\\] { border-top-style: var(--tw-border-style); border-top-width: 0 2px 0 2px; } - .border-t-\\[12px\\] { border-top-style: var(--tw-border-style); border-top-width: 12px; } - .border-t-\\[12px_8px\\] { border-top-style: var(--tw-border-style); border-top-width: 12px 8px; } - -.border-t-\\[length\\:var\\(--my-width\\)\\], .border-t-\\[line-width\\:var\\(--my-width\\)\\] { +.border-t-\\[length\\:var\\(--my-width\\)\\] { + border-top-style: var(--tw-border-style); + border-top-width: var(--my-width); +} +.border-t-\\[line-width\\:var\\(--my-width\\)\\] { border-top-style: var(--tw-border-style); border-top-width: var(--my-width); } - .border-t-\\[medium\\] { border-top-style: var(--tw-border-style); border-top-width: medium; } - .border-t-\\[thick\\] { border-top-style: var(--tw-border-style); border-top-width: thick; } - .border-t-\\[thin\\] { border-top-style: var(--tw-border-style); border-top-width: thin; } - .border-t-\\[thin_2px\\] { border-top-style: var(--tw-border-style); border-top-width: thin 2px; } - .border-t-\\[\\#0088cc\\] { - border-top-color: #08c; + border-top-color: #0088cc; } - .border-t-\\[\\#0088cc\\]\\/50 { - border-top-color: oklab(59.9824% -.067 -.124 / .5); + border-top-color: color-mix(in oklab, #0088cc 50%, transparent); } - -.border-t-\\[color\\:var\\(--my-color\\)\\], .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-t-\\[color\\:var\\(--my-color\\)\\] { border-top-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-top-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - -.border-t-\\[var\\(--my-color\\)\\], .border-t-\\[var\\(--my-color\\)\\]\\/50 { +.border-t-\\[var\\(--my-color\\)\\] { border-top-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-t-\\[var\\(--my-color\\)\\]\\/50 { +.border-t-\\[var\\(--my-color\\)\\]\\/50 { + border-top-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .border-t-blue-500 { border-top-color: var(--border-color-blue-500); } - -.border-t-current, .border-t-current\\/50 { - border-top-color: currentColor; +.border-t-current { + border-top-color: currentcolor; } - -@supports (color: color-mix(in lab, red, red)) { - .border-t-current\\/50 { +.border-t-current\\/50 { + border-top-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .border-t-inherit { border-top-color: inherit; } - .border-t-red-500 { border-top-color: var(--color-red-500); } - .border-t-red-500\\/2\\.5 { - border-top-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-t-red-500\\/2\\.5 { + border-top-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .border-t-red-500\\/2\\.25 { - border-top-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-t-red-500\\/2\\.25 { + border-top-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .border-t-red-500\\/2\\.75 { - border-top-color: #ef444407; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-t-red-500\\/2\\.75 { + border-top-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .border-t-red-500\\/50 { - border-top-color: #ef444480; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-t-red-500\\/50 { + border-top-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .border-t-transparent { - border-top-color: #0000; + border-top-color: transparent; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -" -`; - -exports[`border-x-* 1`] = ` -" @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-border-style: solid; } } } +" +`; +exports[`border-x-* 1`] = ` +" +@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } - .border-x { border-inline-style: var(--tw-border-style); border-inline-width: 1px; } - .border-x-0 { border-inline-style: var(--tw-border-style); - border-inline-width: 0; + border-inline-width: 0px; } - .border-x-2 { border-inline-style: var(--tw-border-style); border-inline-width: 2px; } - .border-x-4 { border-inline-style: var(--tw-border-style); border-inline-width: 4px; } - .border-x-123 { border-inline-style: var(--tw-border-style); border-inline-width: 123px; } - .border-x-\\[0_1\\] { border-inline-style: var(--tw-border-style); - border-inline-width: 0 1px; + border-inline-width: 0 1; } - .border-x-\\[0_2px_0_2px\\] { border-inline-style: var(--tw-border-style); border-inline-width: 0 2px 0 2px; } - .border-x-\\[12px\\] { border-inline-style: var(--tw-border-style); border-inline-width: 12px; } - .border-x-\\[12px_8px\\] { border-inline-style: var(--tw-border-style); border-inline-width: 12px 8px; } - -.border-x-\\[length\\:var\\(--my-width\\)\\], .border-x-\\[line-width\\:var\\(--my-width\\)\\] { +.border-x-\\[length\\:var\\(--my-width\\)\\] { + border-inline-style: var(--tw-border-style); + border-inline-width: var(--my-width); +} +.border-x-\\[line-width\\:var\\(--my-width\\)\\] { border-inline-style: var(--tw-border-style); border-inline-width: var(--my-width); } - .border-x-\\[medium\\] { border-inline-style: var(--tw-border-style); border-inline-width: medium; } - .border-x-\\[thick\\] { border-inline-style: var(--tw-border-style); border-inline-width: thick; } - .border-x-\\[thin\\] { border-inline-style: var(--tw-border-style); border-inline-width: thin; } - .border-x-\\[thin_2px\\] { border-inline-style: var(--tw-border-style); border-inline-width: thin 2px; } - .border-x-\\[\\#0088cc\\] { - border-inline-color: #08c; + border-inline-color: #0088cc; } - .border-x-\\[\\#0088cc\\]\\/50 { - border-inline-color: oklab(59.9824% -.067 -.124 / .5); + border-inline-color: color-mix(in oklab, #0088cc 50%, transparent); } - -.border-x-\\[color\\:var\\(--my-color\\)\\], .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-x-\\[color\\:var\\(--my-color\\)\\] { border-inline-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-inline-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - -.border-x-\\[var\\(--my-color\\)\\], .border-x-\\[var\\(--my-color\\)\\]\\/50 { +.border-x-\\[var\\(--my-color\\)\\] { border-inline-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-x-\\[var\\(--my-color\\)\\]\\/50 { +.border-x-\\[var\\(--my-color\\)\\]\\/50 { + border-inline-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .border-x-blue-500 { border-inline-color: var(--border-color-blue-500); } - -.border-x-current, .border-x-current\\/50 { - border-inline-color: currentColor; +.border-x-current { + border-inline-color: currentcolor; } - -@supports (color: color-mix(in lab, red, red)) { - .border-x-current\\/50 { +.border-x-current\\/50 { + border-inline-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { border-inline-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .border-x-inherit { border-inline-color: inherit; } - .border-x-red-500 { border-inline-color: var(--color-red-500); } - .border-x-red-500\\/2\\.5 { - border-inline-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-x-red-500\\/2\\.5 { + border-inline-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .border-x-red-500\\/2\\.25 { - border-inline-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-x-red-500\\/2\\.25 { + border-inline-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .border-x-red-500\\/2\\.75 { - border-inline-color: #ef444407; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-x-red-500\\/2\\.75 { + border-inline-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .border-x-red-500\\/50 { - border-inline-color: #ef444480; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-x-red-500\\/50 { + border-inline-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .border-x-transparent { - border-inline-color: #0000; + border-inline-color: transparent; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -" -`; - -exports[`border-y-* 1`] = ` -" @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-border-style: solid; } } } +" +`; +exports[`border-y-* 1`] = ` +" +@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } - .border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; } - .border-y-0 { border-block-style: var(--tw-border-style); - border-block-width: 0; + border-block-width: 0px; } - .border-y-2 { border-block-style: var(--tw-border-style); border-block-width: 2px; } - .border-y-4 { border-block-style: var(--tw-border-style); border-block-width: 4px; } - .border-y-123 { border-block-style: var(--tw-border-style); border-block-width: 123px; } - .border-y-\\[0_1\\] { border-block-style: var(--tw-border-style); - border-block-width: 0 1px; + border-block-width: 0 1; } - .border-y-\\[0_2px_0_2px\\] { border-block-style: var(--tw-border-style); border-block-width: 0 2px 0 2px; } - .border-y-\\[12px\\] { border-block-style: var(--tw-border-style); border-block-width: 12px; } - .border-y-\\[12px_8px\\] { border-block-style: var(--tw-border-style); border-block-width: 12px 8px; } - -.border-y-\\[length\\:var\\(--my-width\\)\\], .border-y-\\[line-width\\:var\\(--my-width\\)\\] { +.border-y-\\[length\\:var\\(--my-width\\)\\] { + border-block-style: var(--tw-border-style); + border-block-width: var(--my-width); +} +.border-y-\\[line-width\\:var\\(--my-width\\)\\] { border-block-style: var(--tw-border-style); border-block-width: var(--my-width); } - .border-y-\\[medium\\] { border-block-style: var(--tw-border-style); border-block-width: medium; } - .border-y-\\[thick\\] { border-block-style: var(--tw-border-style); border-block-width: thick; } - .border-y-\\[thin\\] { border-block-style: var(--tw-border-style); border-block-width: thin; } - .border-y-\\[thin_2px\\] { border-block-style: var(--tw-border-style); border-block-width: thin 2px; } - .border-y-\\[\\#0088cc\\] { - border-block-color: #08c; + border-block-color: #0088cc; } - .border-y-\\[\\#0088cc\\]\\/50 { - border-block-color: oklab(59.9824% -.067 -.124 / .5); + border-block-color: color-mix(in oklab, #0088cc 50%, transparent); } - -.border-y-\\[color\\:var\\(--my-color\\)\\], .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-y-\\[color\\:var\\(--my-color\\)\\] { border-block-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { +.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { + border-block-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - -.border-y-\\[var\\(--my-color\\)\\], .border-y-\\[var\\(--my-color\\)\\]\\/50 { +.border-y-\\[var\\(--my-color\\)\\] { border-block-color: var(--my-color); } - -@supports (color: color-mix(in lab, red, red)) { - .border-y-\\[var\\(--my-color\\)\\]\\/50 { +.border-y-\\[var\\(--my-color\\)\\]\\/50 { + border-block-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .border-y-blue-500 { border-block-color: var(--border-color-blue-500); } - -.border-y-current, .border-y-current\\/50 { - border-block-color: currentColor; +.border-y-current { + border-block-color: currentcolor; } - -@supports (color: color-mix(in lab, red, red)) { - .border-y-current\\/50 { +.border-y-current\\/50 { + border-block-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { border-block-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .border-y-inherit { border-block-color: inherit; } - .border-y-red-500 { border-block-color: var(--color-red-500); } - .border-y-red-500\\/2\\.5 { - border-block-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-y-red-500\\/2\\.5 { + border-block-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .border-y-red-500\\/2\\.25 { - border-block-color: #ef444406; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-y-red-500\\/2\\.25 { + border-block-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .border-y-red-500\\/2\\.75 { - border-block-color: #ef444407; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-y-red-500\\/2\\.75 { + border-block-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .border-y-red-500\\/50 { - border-block-color: #ef444480; -} - -@supports (color: color-mix(in lab, red, red)) { - .border-y-red-500\\/50 { + border-block-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .border-y-transparent { - border-block-color: #0000; + border-block-color: transparent; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-border-style: solid; + } + } +} " `; diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts index a19123105ce6..9a6a8fa231a9 100644 --- a/packages/tailwindcss/src/at-import.test.ts +++ b/packages/tailwindcss/src/at-import.test.ts @@ -72,7 +72,7 @@ test('can recursively resolve relative @imports', async () => { ).toMatchInlineSnapshot(` " .baz { - color: #00f; + color: blue; } " `) @@ -149,7 +149,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import "example.css"; + @import url('example.css'); " `) @@ -162,7 +162,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import "./example.css"; + @import url('./example.css'); " `) @@ -175,7 +175,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import "/example.css"; + @import url('/example.css'); " `) @@ -188,7 +188,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import "example.css"; + @import url(example.css); " `) @@ -201,7 +201,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import "./example.css"; + @import url(./example.css); " `) @@ -214,7 +214,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import "/example.css"; + @import url(/example.css); " `) }) @@ -374,7 +374,7 @@ test('@supports', async () => { ), ).toMatchInlineSnapshot(` " - @supports selector(h2 > p) and font-tech(color-COLRv1) { + @supports (selector(h2 > p)) and (font-tech(color-COLRv1)) { a { color: red; } @@ -645,8 +645,10 @@ test('resolves `@variant` used as `@custom-variant` inside `@reference`', async ), ).toMatchInlineSnapshot(` " - .dark\\:flex:where([data-theme="dark"] *) { - display: flex; + .dark\\:flex { + &:where([data-theme='dark'] *) { + display: flex; + } } " `) diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index aaba93c4e26a..5f785fd05ed7 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -33,8 +33,8 @@ test('Config files can change dark mode (media)', async () => { ), ).toMatchInlineSnapshot(` " - @media (prefers-color-scheme: dark) { - .dark\\:underline { + .dark\\:underline { + @media (prefers-color-scheme: dark) { text-decoration-line: underline; } } @@ -56,8 +56,10 @@ test('Config files can change dark mode (selector)', async () => { ), ).toMatchInlineSnapshot(` " - .dark\\:underline:where(.dark, .dark *) { - text-decoration-line: underline; + .dark\\:underline { + &:where(.dark, .dark *) { + text-decoration-line: underline; + } } " `) @@ -81,8 +83,10 @@ test('Config files can change dark mode (variant)', async () => { ), ).toMatchInlineSnapshot(` " - .dark\\:underline:where(:not(.light)) { - text-decoration-line: underline; + .dark\\:underline { + &:where(:not(.light)) { + text-decoration-line: underline; + } } " `) @@ -147,8 +151,10 @@ test('Plugins loaded from config files can contribute to the config', async () = ), ).toMatchInlineSnapshot(` " - .dark\\:underline:where(:not(.light)) { - text-decoration-line: underline; + .dark\\:underline { + &:where(:not(.light)) { + text-decoration-line: underline; + } } " `) @@ -172,8 +178,10 @@ test('Config file presets can contribute to the config', async () => { ), ).toMatchInlineSnapshot(` " - .dark\\:underline:where(:not(.light)) { - text-decoration-line: underline; + .dark\\:underline { + &:where(:not(.light)) { + text-decoration-line: underline; + } } " `) @@ -218,7 +226,6 @@ test('Config files can affect the theme', async () => { .scrollbar-primary { scrollbar-color: #c0ffee; } - .bg-primary { background-color: #c0ffee; } @@ -297,8 +304,15 @@ test('Variants in CSS overwrite variants from plugins', async () => { ), ).toMatchInlineSnapshot(` " - .dark\\:underline.my-dark, .light\\:underline.my-light { - text-decoration-line: underline; + .dark\\:underline { + &:is(.my-dark) { + text-decoration-line: underline; + } + } + .light\\:underline { + &:is(.my-light) { + text-decoration-line: underline; + } } " `) @@ -380,47 +394,43 @@ describe('theme callbacks', () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-leading: initial; - } + @layer properties; + .prose { + [class~=lead-base] { + font-size: 100rem; + line-height: 201rem; + } + [class~=lead-md] { + font-size: 200rem; + line-height: 101rem; + } + [class~=lead-xl] { + font-size: 200rem; + line-height: 201rem; } } - - .prose [class~="lead-base"] { - font-size: 100rem; - line-height: 201rem; - } - - .prose [class~="lead-md"] { - font-size: 200rem; - line-height: 101rem; - } - - .prose [class~="lead-xl"] { - font-size: 200rem; - line-height: 201rem; - } - .leading-base { --tw-leading: 201rem; line-height: 201rem; } - .leading-md { --tw-leading: 101rem; line-height: 101rem; } - .leading-xl { --tw-leading: 201rem; line-height: 201rem; } - @property --tw-leading { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-leading: initial; + } + } } " `) @@ -464,11 +474,9 @@ describe('theme overrides order', () => { :root, :host { --color-blue: blue; } - .bg-blue { background-color: var(--color-blue); } - .bg-red { background-color: very-red; } @@ -558,53 +566,53 @@ describe('theme overrides order', () => { --color-slate-400: #100400; --color-slate-500: #100500; } - .bg-slate-100 { background-color: var(--color-slate-100); } - .bg-slate-200 { background-color: #200200; } - .bg-slate-300 { background-color: var(--color-slate-300); } - .bg-slate-400 { background-color: var(--color-slate-400); } - .bg-slate-500 { background-color: var(--color-slate-500); } - .bg-slate-600 { background-color: #200600; } - - .hover-bg-slate-100:hover { - background-color: #000100; + .hover-bg-slate-100 { + &:hover { + background-color: #000100; + } } - - .hover-bg-slate-200:hover { - background-color: #200200; + .hover-bg-slate-200 { + &:hover { + background-color: #200200; + } } - - .hover-bg-slate-300:hover { - background-color: #000300; + .hover-bg-slate-300 { + &:hover { + background-color: #000300; + } } - - .hover-bg-slate-400:hover { - background-color: #100400; + .hover-bg-slate-400 { + &:hover { + background-color: #100400; + } } - - .hover-bg-slate-500:hover { - background-color: #100500; + .hover-bg-slate-500 { + &:hover { + background-color: #100500; + } } - - .hover-bg-slate-600:hover { - background-color: #200600; + .hover-bg-slate-600 { + &:hover { + background-color: #200600; + } } " `) @@ -680,8 +688,8 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-sans { - font-feature-settings: "cv06"; font-family: Potato Sans; + font-feature-settings: "cv06"; } " `) @@ -719,8 +727,8 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-sans { - font-variation-settings: "XHGT" .7; font-family: Potato Sans; + font-variation-settings: "XHGT" 0.7; } " `) @@ -761,9 +769,9 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-sans { - font-feature-settings: "cv06"; - font-variation-settings: "XHGT" .7; font-family: Potato Sans; + font-feature-settings: "cv06"; + font-variation-settings: "XHGT" 0.7; } " `) @@ -806,7 +814,6 @@ describe('default font family compatibility', () => { :root, :host { --font-sans: Sandwich Sans; } - .font-sans { font-family: var(--font-sans); } @@ -956,8 +963,8 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-mono { - font-feature-settings: "cv06"; font-family: Potato Mono; + font-feature-settings: "cv06"; } " `) @@ -997,8 +1004,8 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-mono { - font-variation-settings: "XHGT" .7; font-family: Potato Mono; + font-variation-settings: "XHGT" 0.7; } " `) @@ -1039,9 +1046,9 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-mono { - font-feature-settings: "cv06"; - font-variation-settings: "XHGT" .7; font-family: Potato Mono; + font-feature-settings: "cv06"; + font-variation-settings: "XHGT" 0.7; } " `) @@ -1084,7 +1091,6 @@ describe('default font family compatibility', () => { :root, :host { --font-mono: Sandwich Mono; } - .font-mono { font-family: var(--font-mono); } @@ -1174,38 +1180,43 @@ test('creates variants for `data`, `supports`, and `aria` theme options at the s ), ).toMatchInlineSnapshot(` " - .aria-hidden\\:flex[aria-hidden="true"] { - display: flex; + .aria-hidden\\:flex { + &[aria-hidden="true"] { + display: flex; + } } - - .aria-polite\\:underline[aria-live="polite"], .data-checked\\:underline[data-ui~="checked"] { - text-decoration-line: underline; + .aria-polite\\:underline { + &[aria-live="polite"] { + text-decoration-line: underline; + } } - - .data-foo\\:flex[data-foo] { - display: flex; + .data-checked\\:underline { + &[data-ui~="checked"] { + text-decoration-line: underline; + } } - - @supports selector(h2 > p) { - .supports-child-combinator\\:underline { + .data-foo\\:flex { + &[data-foo] { + display: flex; + } + } + .supports-child-combinator\\:underline { + @supports selector(h2 > p) { text-decoration-line: underline; } } - - @supports (bar: var(--tw)) { - .supports-foo\\:underline { + .supports-foo\\:underline { + @supports (bar: var(--tw)) { text-decoration-line: underline; } } - - @supports (grid: var(--tw)) { - .supports-grid\\:flex { + .supports-grid\\:flex { + @supports (grid: var(--tw)) { display: flex; } } - - @media print { - .print\\:flex { + .print\\:flex { + @media print { display: flex; } } @@ -1249,26 +1260,25 @@ test('merges css breakpoints with js config screens', async () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 44rem) { - .sm\\:flex { + .sm\\:flex { + @media (width >= 44rem) { display: flex; } - - @media not all and (min-width: 50rem) { - .min-sm\\:max-md\\:underline { + } + .min-sm\\:max-md\\:underline { + @media (width >= 44rem) { + @media (width < 50rem) { text-decoration-line: underline; } } } - - @media (min-width: 50rem) { - .md\\:flex { + .md\\:flex { + @media (width >= 50rem) { display: flex; } } - - @media (min-width: 64rem) { - .lg\\:flex { + .lg\\:flex { + @media (width >= 64rem) { display: flex; } } @@ -1297,22 +1307,22 @@ test('utilities must be prefixed', async () => { // Prefixed utilities are generated expect(await run(['tw:underline', 'tw:hover:line-through', 'tw:custom'], input, options)) .toMatchInlineSnapshot(` - " - .tw\\:custom { - color: red; - } - - .tw\\:underline { - text-decoration-line: underline; - } - - @media (hover: hover) { - .tw\\:hover\\:line-through: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 expect(await run(['underline', 'hover:line-through', 'custom'], input, options)).toEqual('') @@ -1450,17 +1460,19 @@ test('important: `#app`', async () => { ), ).toMatchInlineSnapshot(` " - #app .custom { - color: red; - } - - #app .underline { - text-decoration-line: underline; - } - - @media (hover: hover) { - #app .hover\\:line-through:hover { - text-decoration-line: line-through; + #app { + .custom { + color: red; + } + .underline { + text-decoration-line: underline; + } + .hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through; + } + } } } " @@ -1492,14 +1504,14 @@ test('important: true', async () => { .custom { color: red !important; } - .underline { text-decoration-line: underline !important; } - - @media (hover: hover) { - .hover\\:line-through:hover { - text-decoration-line: line-through !important; + .hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through !important; + } } } " @@ -1534,18 +1546,17 @@ test('blocklisted candidates are not generated', async () => { // underline will as will md:bg-white expect(await run(['underline', 'bg-white', 'md:bg-white'], input, options)) .toMatchInlineSnapshot(` - " - .underline { - text-decoration-line: underline; - } - - @media (min-width: 48rem) { + " + .underline { + text-decoration-line: underline; + } .md\\:bg-white { - background-color: var(--color-white, #fff); + @media (width >= 48rem) { + background-color: var(--color-white, #fff); + } } - } - " - `) + " + `) }) test('blocklisted candidates cannot be used with `@apply`', async () => { @@ -1740,19 +1751,16 @@ test('handles setting theme keys to null', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-50: oklch(97.1% .013 17.38); - --color-red-100: oklch(93.6% .032 17.717); - --color-red-200: oklch(88.5% .062 18.334); + --color-red-50: oklch(0.971 0.013 17.38); + --color-red-100: oklch(0.936 0.032 17.717); + --color-red-200: oklch(0.885 0.062 18.334); } - .bg-red-50 { background-color: var(--color-red-50); } - .bg-red-100 { background-color: var(--color-red-100); } - .bg-red-200 { background-color: var(--color-red-200); } @@ -1784,9 +1792,8 @@ test('The theme() function does not try indexing into strings', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-what: light-dark(red, red); + --color-what: light-dark(#f00, #f00); } - .text-what { color: var(--color-what); } @@ -1836,11 +1843,9 @@ test('camel case keys are preserved', async () => { .bg-blue-green { background-color: var(--color-blue-green); } - .bg-lightGreen { background-color: #c0ffee; } - :root, :host { --color-blue-green: slate; } diff --git a/packages/tailwindcss/src/compat/container-config.test.ts b/packages/tailwindcss/src/compat/container-config.test.ts index 39a12557c676..f38f046054cd 100644 --- a/packages/tailwindcss/src/compat/container-config.test.ts +++ b/packages/tailwindcss/src/compat/container-config.test.ts @@ -37,38 +37,22 @@ test('creates a custom utility to extend the built-in container', async () => { " .container { width: 100%; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: 40rem; } - } - - @media (min-width: 48rem) { - .container { + @media (width >= 48rem) { max-width: 48rem; } - } - - @media (min-width: 64rem) { - .container { + @media (width >= 64rem) { max-width: 64rem; } - } - - @media (min-width: 80rem) { - .container { + @media (width >= 80rem) { max-width: 80rem; } - } - - @media (min-width: 96rem) { - .container { + @media (width >= 96rem) { max-width: 96rem; } } - .container { margin-inline: auto; padding-inline: 2rem; @@ -115,50 +99,28 @@ test('allows padding to be defined at custom breakpoints', async () => { " .container { width: 100%; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: 40rem; } - } - - @media (min-width: 48rem) { - .container { + @media (width >= 48rem) { max-width: 48rem; } - } - - @media (min-width: 64rem) { - .container { + @media (width >= 64rem) { max-width: 64rem; } - } - - @media (min-width: 80rem) { - .container { + @media (width >= 80rem) { max-width: 80rem; } - } - - @media (min-width: 96rem) { - .container { + @media (width >= 96rem) { max-width: 96rem; } } - .container { padding-inline: 1rem; - } - - @media (min-width: 64rem) { - .container { + @media (width >= 64rem) { padding-inline: 2rem; } - } - - @media (min-width: 96rem) { - .container { + @media (width >= 96rem) { padding-inline: 3rem; } } @@ -202,52 +164,30 @@ test('allows breakpoints to be overwritten', async () => { " .container { width: 100%; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: 40rem; } - } - - @media (min-width: 48rem) { - .container { + @media (width >= 48rem) { max-width: 48rem; } - } - - @media (min-width: 64rem) { - .container { + @media (width >= 64rem) { max-width: 64rem; } - } - - @media (min-width: 80rem) { - .container { + @media (width >= 80rem) { max-width: 80rem; } - } - - @media (min-width: 96rem) { - .container { + @media (width >= 96rem) { max-width: 96rem; } } - - @media (min-width: 40rem) { - .container { + .container { + @media (width >= 40rem) { max-width: none; } - } - - @media (min-width: 1280px) { - .container { + @media (width >= 1280px) { max-width: 1280px; } - } - - @media (min-width: 1536px) { - .container { + @media (width >= 1536px) { max-width: 1536px; } } @@ -294,46 +234,27 @@ test('padding applies to custom `container` screens', async () => { " .container { width: 100%; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: 40rem; } - } - - @media (min-width: 48rem) { - .container { + @media (width >= 48rem) { max-width: 48rem; } - } - - @media (min-width: 64rem) { - .container { + @media (width >= 64rem) { max-width: 64rem; } - } - - @media (min-width: 80rem) { - .container { + @media (width >= 80rem) { max-width: 80rem; } - } - - @media (min-width: 96rem) { - .container { + @media (width >= 96rem) { max-width: 96rem; } } - - @media (min-width: 40rem) { - .container { + .container { + @media (width >= 40rem) { max-width: none; } - } - - @media (min-width: 48rem) { - .container { + @media (width >= 48rem) { max-width: 48rem; padding-inline: 3rem; } @@ -380,44 +301,25 @@ test("an empty `screen` config will undo all custom media screens and won't appl " .container { width: 100%; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: 40rem; } - } - - @media (min-width: 48rem) { - .container { + @media (width >= 48rem) { max-width: 48rem; } - } - - @media (min-width: 64rem) { - .container { + @media (width >= 64rem) { max-width: 64rem; } - } - - @media (min-width: 80rem) { - .container { + @media (width >= 80rem) { max-width: 80rem; } - } - - @media (min-width: 96rem) { - .container { + @media (width >= 96rem) { max-width: 96rem; } } - .container { padding-inline: 1rem; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: none; } } @@ -469,7 +371,6 @@ test('legacy container component does not interfere with new --container variabl :root, :host { --container-sm: 24rem; } - .max-w-sm { max-width: var(--container-sm); } @@ -519,127 +420,70 @@ test('combines custom padding and screen overwrites', async () => { " .\\!container { width: 100% !important; - } - - @media (min-width: 40rem) { - .\\!container { + @media (width >= 40rem) { max-width: 40rem !important; } - } - - @media (min-width: 48rem) { - .\\!container { + @media (width >= 48rem) { max-width: 48rem !important; } - } - - @media (min-width: 64rem) { - .\\!container { + @media (width >= 64rem) { max-width: 64rem !important; } - } - - @media (min-width: 80rem) { - .\\!container { + @media (width >= 80rem) { max-width: 80rem !important; } - } - - @media (min-width: 96rem) { - .\\!container { + @media (width >= 96rem) { max-width: 96rem !important; } } - .container { width: 100%; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: 40rem; } - } - - @media (min-width: 48rem) { - .container { + @media (width >= 48rem) { max-width: 48rem; } - } - - @media (min-width: 64rem) { - .container { + @media (width >= 64rem) { max-width: 64rem; } - } - - @media (min-width: 80rem) { - .container { + @media (width >= 80rem) { max-width: 80rem; } - } - - @media (min-width: 96rem) { - .container { + @media (width >= 96rem) { max-width: 96rem; } } - .\\!container { margin-inline: auto !important; padding-inline: 2rem !important; - } - - @media (min-width: 40rem) { - .\\!container { + @media (width >= 40rem) { max-width: none !important; } - } - - @media (min-width: 48rem) { - .\\!container { + @media (width >= 48rem) { max-width: 48rem !important; } - } - - @media (min-width: 1280px) { - .\\!container { + @media (width >= 1280px) { max-width: 1280px !important; } - } - - @media (min-width: 1536px) { - .\\!container { + @media (width >= 1536px) { max-width: 1536px !important; padding-inline: 4rem !important; } } - .container { margin-inline: auto; padding-inline: 2rem; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: none; } - } - - @media (min-width: 48rem) { - .container { + @media (width >= 48rem) { max-width: 48rem; } - } - - @media (min-width: 1280px) { - .container { + @media (width >= 1280px) { max-width: 1280px; } - } - - @media (min-width: 1536px) { - .container { + @media (width >= 1536px) { max-width: 1536px; padding-inline: 4rem; } @@ -692,63 +536,35 @@ test('filters out complex breakpoints', async () => { " .container { width: 100%; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: 40rem; } - } - - @media (min-width: 48rem) { - .container { + @media (width >= 48rem) { max-width: 48rem; } - } - - @media (min-width: 64rem) { - .container { + @media (width >= 64rem) { max-width: 64rem; } - } - - @media (min-width: 80rem) { - .container { + @media (width >= 80rem) { max-width: 80rem; } - } - - @media (min-width: 96rem) { - .container { + @media (width >= 96rem) { max-width: 96rem; } } - .container { margin-inline: auto; padding-inline: 2rem; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: none; } - } - - @media (min-width: 20px) { - .container { + @media (width >= 20px) { max-width: 20px; } - } - - @media (min-width: 100px) { - .container { + @media (width >= 100px) { max-width: 100px; } - } - - @media (min-width: 300px) { - .container { + @media (width >= 300px) { max-width: 300px; } } diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts index c90eae8453f9..c75c6c7c6c65 100644 --- a/packages/tailwindcss/src/compat/legacy-utilities.test.ts +++ b/packages/tailwindcss/src/compat/legacy-utilities.test.ts @@ -21,37 +21,30 @@ test('bg-gradient-*', async () => { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-gradient-to-bl { --tw-gradient-position: to bottom left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-gradient-to-br { --tw-gradient-position: to bottom right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-gradient-to-l { --tw-gradient-position: to left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-gradient-to-t { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-gradient-to-tl { --tw-gradient-position: to top left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-gradient-to-tr { --tw-gradient-position: to top right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); @@ -90,23 +83,18 @@ test('max-w-screen', async () => { --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; } - .max-w-screen-2xl { max-width: var(--breakpoint-2xl); } - .max-w-screen-lg { max-width: var(--breakpoint-lg); } - .max-w-screen-md { max-width: var(--breakpoint-md); } - .max-w-screen-sm { max-width: var(--breakpoint-sm); } - .max-w-screen-xl { max-width: var(--breakpoint-xl); } @@ -138,7 +126,6 @@ test('box-decoration', async () => { -webkit-box-decoration-break: clone; box-decoration-break: clone; } - .decoration-slice { -webkit-box-decoration-break: slice; box-decoration-break: slice; @@ -163,11 +150,9 @@ test('flex-grow', async () => { .flex-grow { flex-grow: 1; } - .flex-grow-0 { flex-grow: 0; } - .flex-grow-\\[123\\] { flex-grow: 123; } @@ -194,11 +179,9 @@ test('flex-shrink', async () => { .flex-shrink { flex-shrink: 1; } - .flex-shrink-0 { flex-shrink: 0; } - .flex-shrink-\\[123\\] { flex-shrink: 123; } @@ -243,38 +226,30 @@ test('start', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --inset-shadowned: 1940px; } - .-start-4 { inset-inline-start: calc(var(--spacing) * -4); } - .-start-full { inset-inline-start: -100%; } - .start-3\\/4 { - inset-inline-start: 75%; + inset-inline-start: calc(3/4 * 100%); } - .start-4 { inset-inline-start: calc(var(--spacing) * 4); } - .start-\\[4px\\] { inset-inline-start: 4px; } - .start-auto { inset-inline-start: auto; } - .start-full { inset-inline-start: 100%; } - .start-shadowned { inset-inline-start: var(--inset-shadowned); } @@ -332,38 +307,30 @@ test('end', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --inset-shadowned: 1940px; } - .-end-4 { inset-inline-end: calc(var(--spacing) * -4); } - .-end-full { inset-inline-end: -100%; } - .end-3\\/4 { - inset-inline-end: 75%; + inset-inline-end: calc(3/4 * 100%); } - .end-4 { inset-inline-end: calc(var(--spacing) * 4); } - .end-\\[4px\\] { inset-inline-end: 4px; } - .end-auto { inset-inline-end: auto; } - .end-full { inset-inline-end: 100%; } - .end-shadowned { inset-inline-end: var(--inset-shadowned); } diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index c1d9cb57a06d..d103af823cd2 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -63,7 +63,6 @@ describe('theme', async () => { transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); } } - @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); @@ -141,7 +140,6 @@ describe('theme', async () => { .scrollbar-red-500 { scrollbar-color: #ef4444; } - .scrollbar-russet-700 { scrollbar-color: #7a4724; } @@ -188,7 +186,7 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .animate-duration-316 { - animation-duration: .316s; + animation-duration: 316ms; } " `) @@ -234,11 +232,10 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .animate-duration-316 { - animation-duration: .316s; + animation-duration: 316ms; } - .animate-duration-slow { - animation-duration: .8s; + animation-duration: 800ms; } " `) @@ -273,16 +270,15 @@ describe('theme', async () => { ), ).toMatchInlineSnapshot(` " - .fraction, .percentage { - color: oklab(63.6834% .187 .088 / .5); + .fraction { + color: color-mix(in oklab, #ef4444 50%, transparent); + } + .percentage { + color: color-mix(in oklab, #ef4444 50%, transparent); } - .variable { color: #ef4444; - } - - @supports (color: color-mix(in lab, red, red)) { - .variable { + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, #ef4444 var(--opacity), transparent); } } @@ -341,31 +337,28 @@ describe('theme', async () => { ), ).toMatchInlineSnapshot(` " - .css-fraction, .css-percentage { + .css-fraction { + color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); + } + .css-percentage { color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); } - .css-variable { color: rgba(255 0 0 / ); - } - - @supports (color: color-mix(in lab, red, red)) { - .css-variable { + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, rgba(255 0 0 / ) var(--opacity), transparent); } } - - .js-fraction, .js-percentage { - color: oklab(62.7955% .224 .125 / .5); + .js-fraction { + color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); } - - .js-variable { - color: red; + .js-percentage { + color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); } - - @supports (color: color-mix(in lab, red, red)) { - .js-variable { - color: color-mix(in oklab, red var(--opacity), transparent); + .js-variable { + color: rgb(255 0 0 / 1); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent); } } " @@ -413,11 +406,10 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .animate-delay-316 { - animation-delay: .316s; + animation-delay: 316ms; } - .animate-delay-slow { - animation-delay: .8s; + animation-delay: 800ms; } " `) @@ -452,7 +444,7 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .animate-duration { - animation-delay: 1.5s; + animation-delay: 1500ms; } " `) @@ -495,19 +487,16 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .animation { - animation: 1s linear infinite pulse; + animation: pulse 1s linear infinite; } - .animation-spin { - animation: 1s linear infinite spin; + animation: spin 1s linear infinite; } - .animation2 { - animation: 1s linear infinite pulse; + animation: pulse 1s linear infinite; } - .animation2-twist { - animation: 1s linear infinite spin; + animation: spin 1s linear infinite; } " `) @@ -548,11 +537,9 @@ describe('theme', async () => { .animation { --animation: pulse 1s linear infinite; } - .animation-bounce { --animation: bounce 1s linear infinite; } - .animation-spin { --animation: spin 1s linear infinite; } @@ -751,103 +738,126 @@ describe('theme', async () => { .my-aspect-2\\/5 { --value: 2/5; } - - .my-backdrop-brightness-1, .my-backdrop-contrast-1, .my-backdrop-grayscale-1 { + .my-backdrop-brightness-1 { + --value: 1%; + } + .my-backdrop-contrast-1 { + --value: 1%; + } + .my-backdrop-grayscale-1 { --value: 1%; } - .my-backdrop-hue-rotate-1 { --value: 1deg; } - - .my-backdrop-invert-1, .my-backdrop-opacity-1, .my-backdrop-saturate-1, .my-backdrop-sepia-1 { + .my-backdrop-invert-1 { + --value: 1%; + } + .my-backdrop-opacity-1 { + --value: 1%; + } + .my-backdrop-saturate-1 { + --value: 1%; + } + .my-backdrop-sepia-1 { --value: 1%; } - .my-border-width-1 { --value: 1px; } - .my-brightness-1 { --value: 1%; } - .my-columns-1 { --value: 1; } - .my-contrast-1 { --value: 1%; } - .my-divide-width-1 { --value: 1px; } - - .my-flex-grow-1, .my-flex-shrink-1 { + .my-flex-grow-1 { --value: 1; } - - .my-gradient-color-stop-positions-1, .my-grayscale-1 { + .my-flex-shrink-1 { + --value: 1; + } + .my-gradient-color-stop-positions-1 { --value: 1%; } - - .my-grid-row-end-1, .my-grid-row-start-1 { + .my-grayscale-1 { + --value: 1%; + } + .my-grid-row-end-1 { --value: 1; } - - .my-grid-template-columns-1, .my-grid-template-rows-1 { + .my-grid-row-start-1 { + --value: 1; + } + .my-grid-template-columns-1 { + --value: repeat(1, minmax(0, 1fr)); + } + .my-grid-template-rows-1 { --value: repeat(1, minmax(0, 1fr)); } - .my-hue-rotate-1 { --value: 1deg; } - .my-invert-1 { --value: 1%; } - .my-line-clamp-1 { --value: 1; } - .my-opacity-1 { --value: 1%; } - .my-order-1 { --value: 1; } - - .my-outline-offset-1, .my-outline-width-1, .my-ring-offset-width-1, .my-ring-width-1 { + .my-outline-offset-1 { + --value: 1px; + } + .my-outline-width-1 { + --value: 1px; + } + .my-ring-offset-width-1 { + --value: 1px; + } + .my-ring-width-1 { --value: 1px; } - .my-rotate-1 { --value: 1deg; } - - .my-saturate-1, .my-scale-1, .my-sepia-1 { + .my-saturate-1 { + --value: 1%; + } + .my-scale-1 { + --value: 1%; + } + .my-sepia-1 { --value: 1%; } - .my-skew-1 { --value: 1deg; } - .my-stroke-width-1 { --value: 1; } - - .my-text-decoration-thickness-1, .my-text-underline-offset-1 { + .my-text-decoration-thickness-1 { --value: 1px; } - - .my-transition-delay-1, .my-transition-duration-1 { + .my-text-underline-offset-1 { + --value: 1px; + } + .my-transition-delay-1 { + --value: 1ms; + } + .my-transition-duration-1 { --value: 1ms; } - .my-z-index-1 { --value: 1; } @@ -1019,10 +1029,14 @@ describe('theme', async () => { ), ).toMatchInlineSnapshot(` " + .foo-bar { + background-color: red; + } .foo-bar { color: red; + } + .foo-bar { --my-prop: bar-valuer; - background-color: red; } " `) @@ -1148,87 +1162,99 @@ describe('theme', async () => { .my-aspect-2\\/5 { --value: 2/5; } - .my-border-width-1 { --value: 1px; } - .my-brightness-1 { --value: 1%; } - .my-columns-1 { --value: 1; } - .my-contrast-1 { --value: 1%; } - - .my-flex-grow-1, .my-flex-shrink-1 { + .my-flex-grow-1 { --value: 1; } - - .my-gradient-color-stop-positions-1, .my-grayscale-1 { + .my-flex-shrink-1 { + --value: 1; + } + .my-gradient-color-stop-positions-1 { --value: 1%; } - - .my-grid-row-end-1, .my-grid-row-start-1 { + .my-grayscale-1 { + --value: 1%; + } + .my-grid-row-end-1 { --value: 1; } - - .my-grid-template-columns-1, .my-grid-template-rows-1 { + .my-grid-row-start-1 { + --value: 1; + } + .my-grid-template-columns-1 { + --value: repeat(1, minmax(0, 1fr)); + } + .my-grid-template-rows-1 { --value: repeat(1, minmax(0, 1fr)); } - .my-hue-rotate-1 { --value: 1deg; } - .my-invert-1 { --value: 1%; } - .my-line-clamp-1 { --value: 1; } - .my-opacity-1 { --value: 1%; } - .my-order-1 { --value: 1; } - - .my-outline-offset-1, .my-outline-width-1, .my-ring-offset-width-1, .my-ring-width-1 { + .my-outline-offset-1 { + --value: 1px; + } + .my-outline-width-1 { + --value: 1px; + } + .my-ring-offset-width-1 { + --value: 1px; + } + .my-ring-width-1 { --value: 1px; } - .my-rotate-1 { --value: 1deg; } - - .my-saturate-1, .my-scale-1, .my-sepia-1 { + .my-saturate-1 { + --value: 1%; + } + .my-scale-1 { + --value: 1%; + } + .my-sepia-1 { --value: 1%; } - .my-skew-1 { --value: 1deg; } - .my-stroke-width-1 { --value: 1; } - - .my-text-decoration-thickness-1, .my-text-underline-offset-1 { + .my-text-decoration-thickness-1 { --value: 1px; } - - .my-transition-delay-1, .my-transition-duration-1 { + .my-text-underline-offset-1 { + --value: 1px; + } + .my-transition-delay-1 { + --value: 1ms; + } + .my-transition-duration-1 { --value: 1ms; } - .my-z-index-1 { --value: 1; } @@ -1276,13 +1302,11 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .my-width-1 { - width: .25rem; + width: 0.25rem; } - .my-width-1\\.5 { - width: .375rem; + width: 0.375rem; } - .my-width-1\\/2 { width: 60%; } @@ -1324,19 +1348,16 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .my-width-1 { - width: .25rem; + width: 0.25rem; } - .my-width-1\\.5 { - width: .375rem; + width: 0.375rem; } - .my-width-1\\/2 { width: 60%; } - .my-width-2\\.5 { - width: .625rem; + width: 0.625rem; } " `) @@ -1381,19 +1402,16 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .my-width-1 { - width: .25rem; + width: 0.25rem; } - .my-width-1\\.5 { - width: .375rem; + width: 0.375rem; } - .my-width-1\\/2 { width: 60%; } - .my-width-2\\.5 { - width: .625rem; + width: 0.625rem; } " `) @@ -1506,12 +1524,15 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { - display: flex; + .group-hocus\\:flex { + &:is(:is(:where(.group):hover, :where(.group):focus) *) { + display: flex; + } } - - .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + .hocus\\:underline { + &:hover, &:focus { + text-decoration-line: underline; + } } } " @@ -1543,12 +1564,21 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) { - display: flex; + .group-hocus\\:flex { + &:is(:where(.group):hover *) { + display: flex; + } + &:is(:where(.group):focus *) { + display: flex; + } } - - .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + .hocus\\:underline { + &:hover { + text-decoration-line: underline; + } + &:focus { + text-decoration-line: underline; + } } } " @@ -1583,12 +1613,21 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) { - display: flex; + .group-hocus\\:flex { + &:is(:where(.group):hover *) { + display: flex; + } + &:is(:where(.group):focus *) { + display: flex; + } } - - .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + .hocus\\:underline { + &:hover { + text-decoration-line: underline; + } + &:focus { + text-decoration-line: underline; + } } } " @@ -1625,25 +1664,26 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (hover: hover) { - .group-hocus\\:flex:is(:where(.group):hover *) { + .group-hocus\\:flex { + @media (hover: hover) { + &:is(:where(.group):hover *) { + display: flex; + } + } + &:is(:where(.group):focus *) { display: flex; } } - - .group-hocus\\:flex:is(:where(.group):focus *) { - display: flex; - } - - @media (hover: hover) { - .hocus\\:underline:hover { + .hocus\\:underline { + @media (hover: hover) { + &:hover { + text-decoration-line: underline; + } + } + &:focus { text-decoration-line: underline; } } - - .hocus\\:underline:focus { - text-decoration-line: underline; - } } " `) @@ -1677,14 +1717,21 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (max-width: 400px) { - @supports (font: bold) { - .potato\\:flex:large-potato { - display: flex; + .potato\\:flex { + @media (max-width: 400px) { + @supports (font:bold) { + &:large-potato { + display: flex; + } } - - .potato\\:underline:large-potato { - text-decoration-line: underline; + } + } + .potato\\:underline { + @media (max-width: 400px) { + @supports (font:bold) { + &:large-potato { + text-decoration-line: underline; + } } } } @@ -1726,10 +1773,12 @@ describe('addVariant', () => { @layer utilities { .hocus\\:underline { --custom-property: @slot; - } - - .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + &:hover { + text-decoration-line: underline; + } + &:focus { + text-decoration-line: underline; + } } } " @@ -1763,8 +1812,25 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-optional\\:flex:is(:where(.group):optional *), .group-optional\\/foo\\:flex:is(:where(.group\\/foo):optional *), .peer-optional\\:flex:is(:where(.peer):optional ~ *), .optional\\:flex:optional { - display: flex; + .group-optional\\:flex { + &:is(:where(.group):optional *) { + display: flex; + } + } + .group-optional\\/foo\\:flex { + &:is(:where(.group\\/foo):optional *) { + display: flex; + } + } + .peer-optional\\:flex { + &:is(:where(.peer):optional ~ *) { + display: flex; + } + } + .optional\\:flex { + &:optional { + display: flex; + } } } " @@ -1798,12 +1864,15 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .potato-baked .potato-\\[baked\\]\\:flex { - display: flex; + .potato-\\[baked\\]\\:flex { + .potato-baked & { + display: flex; + } } - - .potato-yellow .potato-\\[yellow\\]\\:underline { - text-decoration-line: underline; + .potato-\\[yellow\\]\\:underline { + .potato-yellow & { + text-decoration-line: underline; + } } } " @@ -1835,14 +1904,13 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (potato: baked) { - .potato-\\[baked\\]\\:flex { + .potato-\\[baked\\]\\:flex { + @media (potato: baked) { display: flex; } } - - @media (potato: yellow) { - .potato-\\[yellow\\]\\:underline { + .potato-\\[yellow\\]\\:underline { + @media (potato: yellow) { text-decoration-line: underline; } } @@ -1878,18 +1946,21 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (potato: baked) { - @supports (font: bold) { - .potato-\\[baked\\]\\:flex:large-potato { - display: flex; + .potato-\\[baked\\]\\:flex { + @media (potato: baked) { + @supports (font:bold) { + &:large-potato { + display: flex; + } } } } - - @media (potato: yellow) { - @supports (font: bold) { - .potato-\\[yellow\\]\\:underline:large-potato { - text-decoration-line: underline; + .potato-\\[yellow\\]\\:underline { + @media (potato: yellow) { + @supports (font:bold) { + &:large-potato { + text-decoration-line: underline; + } } } } @@ -1928,12 +1999,15 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .tooltip-bottom\\:underline[data-location="bottom"] { - text-decoration-line: underline; + .tooltip-bottom\\:underline { + &[data-location="bottom"] { + text-decoration-line: underline; + } } - - .tooltip-top\\:flex[data-location="top"] { - display: flex; + .tooltip-top\\:flex { + &[data-location="top"] { + display: flex; + } } } " @@ -1977,8 +2051,25 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .alphabet-d\\:underline[data-order="1"], .alphabet-a\\:underline[data-order="2"], .alphabet-c\\:underline[data-order="3"], .alphabet-b\\:underline[data-order="4"] { - text-decoration-line: underline; + .alphabet-d\\:underline { + &[data-order="1"] { + text-decoration-line: underline; + } + } + .alphabet-a\\:underline { + &[data-order="2"] { + text-decoration-line: underline; + } + } + .alphabet-c\\:underline { + &[data-order="3"] { + text-decoration-line: underline; + } + } + .alphabet-b\\:underline { + &[data-order="4"] { + text-decoration-line: underline; + } } } " @@ -2012,8 +2103,16 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .test-\\[a\\,b\\,c\\]\\:underline.a > *, .test-\\[a\\,b\\,c\\]\\:underline.b > *, .test-\\[a\\,b\\,c\\]\\:underline.c > * { - text-decoration-line: underline; + .test-\\[a\\,b\\,c\\]\\:underline { + &.a > * { + text-decoration-line: underline; + } + &.b > * { + text-decoration-line: underline; + } + &.c > * { + text-decoration-line: underline; + } } } " @@ -2049,20 +2148,18 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (min-width: 500px) { - .testmin-\\[500px\\]\\:underline { + .testmin-\\[500px\\]\\:underline { + @media (min-width: 500px) { text-decoration-line: underline; } } - - @media (min-width: 600px) { - .testmin-\\[600px\\]\\:flex { + .testmin-\\[600px\\]\\:flex { + @media (min-width: 600px) { display: flex; } } - - @media (min-width: 700px) { - .testmin-\\[700px\\]\\:italic { + .testmin-\\[700px\\]\\:italic { + @media (min-width: 700px) { font-style: italic; } } @@ -2101,20 +2198,18 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (min-width: 500px) { - .testmin-\\[500px\\]\\:italic { + .testmin-\\[500px\\]\\:italic { + @media (min-width: 500px) { font-style: italic; } } - - @media (min-width: 600px) { - .testmin-example\\:italic { + .testmin-example\\:italic { + @media (min-width: 600px) { font-style: italic; } } - - @media (min-width: 700px) { - .testmin-\\[700px\\]\\:italic { + .testmin-\\[700px\\]\\:italic { + @media (min-width: 700px) { font-style: italic; } } @@ -2163,31 +2258,30 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (min-width: 100px) { - @media (max-width: 400px) { - .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { + .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { + @media (min-width: 100px) { + @media (max-width: 400px) { order: 1; } } } - - @media (min-width: 150px) { - @media (max-width: 400px) { - .testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 { + .testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 { + @media (min-width: 150px) { + @media (max-width: 400px) { order: 2; } } } - - @media (min-width: 100px) { - @media (max-width: 350px) { - .testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 { + .testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 { + @media (min-width: 100px) { + @media (max-width: 350px) { order: 3; } } - - @media (max-width: 300px) { - .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 { + } + .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 { + @media (min-width: 100px) { + @media (max-width: 300px) { order: 4; } } @@ -2236,16 +2330,23 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (min-width: 100px) { - @media (max-width: 200px) { - @media (hover: hover) { - .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:hover\\:underline:hover { - text-decoration-line: underline; + .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:hover\\:underline { + @media (min-width: 100px) { + @media (max-width: 200px) { + &:hover { + @media (hover: hover) { + text-decoration-line: underline; + } } } - - .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:focus\\:underline:focus { - text-decoration-line: underline; + } + } + .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:focus\\:underline { + @media (min-width: 100px) { + @media (max-width: 200px) { + &:focus { + text-decoration-line: underline; + } } } } @@ -2293,33 +2394,30 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (min-width: 100px) { - @media (max-width: 400px) { - .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { + .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { + @media (min-width: 100px) { + @media (max-width: 400px) { order: 1; } } } - - @media (min-width: 200px) { - @media (max-width: 400px) { - .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { + .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { + @media (min-width: 200px) { + @media (max-width: 400px) { order: 2; } } } - - @media (min-width: 100px) { - @media (max-width: 300px) { - .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { + .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { + @media (min-width: 100px) { + @media (max-width: 300px) { order: 3; } } } - - @media (min-width: 200px) { - @media (max-width: 300px) { - .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { + .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { + @media (min-width: 200px) { + @media (max-width: 300px) { order: 4; } } @@ -2368,29 +2466,30 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (max-width: 400px) { - @media (min-width: 100px) { - .testmax-\\[400px\\]\\:testmin-\\[100px\\]\\:underline { + .testmax-\\[400px\\]\\:testmin-\\[100px\\]\\:underline { + @media (max-width: 400px) { + @media (min-width: 100px) { text-decoration-line: underline; } } - - @media (min-width: 200px) { - .testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline { + } + .testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline { + @media (max-width: 400px) { + @media (min-width: 200px) { text-decoration-line: underline; } } } - - @media (max-width: 300px) { - @media (min-width: 100px) { - .testmax-\\[300px\\]\\:testmin-\\[100px\\]\\:underline { + .testmax-\\[300px\\]\\:testmin-\\[100px\\]\\:underline { + @media (max-width: 300px) { + @media (min-width: 100px) { text-decoration-line: underline; } } - - @media (min-width: 200px) { - .testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline { + } + .testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline { + @media (max-width: 300px) { + @media (min-width: 200px) { text-decoration-line: underline; } } @@ -2447,33 +2546,30 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (min-width: 100px) { - @media (max-width: 400px) { - .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { + .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { + @media (min-width: 100px) { + @media (max-width: 400px) { order: 1; } } } - - @media (min-width: 200px) { - @media (max-width: 400px) { - .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { + .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { + @media (min-width: 200px) { + @media (max-width: 400px) { order: 2; } } } - - @media (min-width: 100px) { - @media (max-width: 300px) { - .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { + .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { + @media (min-width: 100px) { + @media (max-width: 300px) { order: 3; } } } - - @media (min-width: 200px) { - @media (max-width: 300px) { - .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { + .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { + @media (min-width: 200px) { + @media (max-width: 300px) { order: 4; } } @@ -2510,8 +2606,10 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .foo.bar .foo\\:underline { - text-decoration-line: underline; + .foo\\:underline { + .foo.bar & { + text-decoration-line: underline; + } } } " @@ -2574,8 +2672,10 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .foo-good .foo\\:underline { - text-decoration-line: underline; + .foo\\:underline { + .foo-good & { + text-decoration-line: underline; + } } } " @@ -2609,8 +2709,10 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .foo-good .foo\\:underline { - text-decoration-line: underline; + .foo\\:underline { + .foo-good & { + text-decoration-line: underline; + } } } " @@ -2649,14 +2751,13 @@ describe('matchVariant', () => { ), ).toMatchInlineSnapshot(` " - @container (min-width: 250px) { - .my-container-\\[250px\\]\\:underline { + .my-container-\\[250px\\]\\:underline { + @container (min-width: 250px) { text-decoration-line: underline; } } - - @container placement (min-width: 250px) { - .my-container-\\[250px\\]\\/placement\\:underline { + .my-container-\\[250px\\]\\/placement\\:underline { + @container placement (min-width: 250px) { text-decoration-line: underline; } } @@ -2702,8 +2803,25 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-optional-\\[test\\]\\:flex:is(:where(.group):optional:has(test) :where(.group) *), .group-optional-\\[test\\]\\/foo\\:flex:is(:where(.group\\/foo):optional:has(test) :where(.group\\/foo) *), .peer-optional-\\[test\\]\\:flex:is(:where(.peer):optional:has(test) :where(.peer) ~ *), .optional-\\[test\\]\\:flex:optional:has(test) .optional-\\[test\\]\\:flex { - display: flex; + .group-optional-\\[test\\]\\:flex { + &:is(:where(.group):optional:has(test) :where(.group) *) { + display: flex; + } + } + .group-optional-\\[test\\]\\/foo\\:flex { + &:is(:where(.group\\/foo):optional:has(test) :where(.group\\/foo) *) { + display: flex; + } + } + .peer-optional-\\[test\\]\\:flex { + &:is(:where(.peer):optional:has(test) :where(.peer) ~ *) { + display: flex; + } + } + .optional-\\[test\\]\\:flex { + &:optional:has(test) & { + display: flex; + } } } " @@ -2737,8 +2855,15 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .foo-known\\:flex:is(known), .foo-\\[test\\]\\:flex:is(test) { - display: flex; + .foo-known\\:flex { + &:is(known) { + display: flex; + } + } + .foo-\\[test\\]\\:flex { + &:is(test) { + display: flex; + } } } " @@ -2775,8 +2900,15 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .foo-string\\:flex:is(some string), .foo-\\[test\\]\\:flex:is(test) { - display: flex; + .foo-string\\:flex { + &:is(some string) { + display: flex; + } + } + .foo-\\[test\\]\\:flex { + &:is(test) { + display: flex; + } } } " @@ -2823,9 +2955,8 @@ describe('addUtilities()', () => { text-box-trim: both; text-box-edge: cap alphabetic; } - - @media (min-width: 1024px) { - .lg\\:text-trim { + .lg\\:text-trim { + @media (width >= 1024px) { text-box-trim: both; text-box-edge: cap alphabetic; } @@ -2907,7 +3038,11 @@ describe('addUtilities()', () => { ), ).toMatchInlineSnapshot(` " - .text-trim, .text-trim-2 { + .text-trim { + text-box-trim: both; + text-box-edge: cap alphabetic; + } + .text-trim-2 { text-box-trim: both; text-box-edge: cap alphabetic; } @@ -2944,7 +3079,7 @@ describe('addUtilities()', () => { ).toMatchInlineSnapshot(` " .outlined { - outline: 1px solid buttontext; + outline: 1px solid ButtonText; outline: 1px auto -webkit-focus-ring-color; } " @@ -3027,21 +3162,14 @@ describe('addUtilities()', () => { @layer utilities { .foo { display: flex; - } - - @media (prefers-color-scheme: dark) { - .foo { + @media (prefers-color-scheme: dark) { text-decoration-line: underline; } } - - @media (min-width: 1024px) { - .lg\\:foo { + .lg\\:foo { + @media (width >= 1024px) { display: flex; - } - - @media (prefers-color-scheme: dark) { - .lg\\:foo { + @media (prefers-color-scheme: dark) { text-decoration-line: underline; } } @@ -3119,9 +3247,8 @@ describe('addUtilities()', () => { appearance: none; background-color: #fff; } - - @media (min-width: 1024px) { - .lg\\:form-textarea { + .lg\\:form-textarea { + @media (width >= 1024px) { appearance: none; background-color: #fff; } @@ -3160,15 +3287,19 @@ describe('addUtilities()', () => { ), ).toMatchInlineSnapshot(` " - .form-input, .form-input::placeholder { + .form-input { background-color: red; - } - - @media (min-width: 1024px) { - .lg\\:form-textarea:hover:focus { + &::placeholder { background-color: red; } } + .lg\\:form-textarea { + @media (width >= 1024px) { + &:hover:focus { + background-color: red; + } + } + } " `) }) @@ -3204,8 +3335,53 @@ describe('addUtilities()', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .j.j, .j.j, .a .b:hover .c, .a .b:hover .c, .a .b:hover .c, .d > *, .e .bar:not(.f):has(.g), .e .bar:not(.f):has(.g), .h ~ .i, .h ~ .i { - color: red; + .j { + &.j { + color: red; + } + .j& { + color: red; + } + } + .a { + & .b:hover .c { + color: red; + } + } + .b { + .a &:hover .c { + color: red; + } + } + .c { + .a .b:hover & { + color: red; + } + } + .d { + & > * { + color: red; + } + } + .e { + & .bar:not(.f):has(.g) { + color: red; + } + } + .g { + .e .bar:not(.f):has(&) { + color: red; + } + } + .h { + & ~ .i { + color: red; + } + } + .i { + .h ~ & { + color: red; + } } } " @@ -3239,8 +3415,25 @@ describe('addUtilities()', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .tw\\:a .tw\\:b:hover .tw\\:c.tw\\:d { - color: red; + .tw\\:a { + & .tw\\:b:hover .tw\\:c.tw\\:d { + color: red; + } + } + .tw\\:b { + .tw\\:a &:hover .tw\\:c.tw\\:d { + color: red; + } + } + .tw\\:c { + .tw\\:a .tw\\:b:hover &.tw\\:d { + color: red; + } + } + .tw\\:d { + .tw\\:a .tw\\:b:hover .tw\\:c& { + color: red; + } } } " @@ -3272,23 +3465,34 @@ describe('addUtilities()', () => { ), ).toMatchInlineSnapshot(` " - .foo :where(.foo > :first-child) { - color: red; - } - - @media (min-width: 768px) { - .md\\:foo :where(.md\\:foo > :first-child), .not-hover\\:md\\:foo:not(:hover) :where(.not-hover\\:md\\:foo > :first-child) { + .foo { + :where(.foo > :first-child) { color: red; } } - - @media not all and (hover: hover) { - @media (min-width: 768px) { - .not-hover\\:md\\:foo :where(.not-hover\\:md\\:foo > :first-child) { + .md\\:foo { + @media (width >= 768px) { + :where(.md\\:foo > :first-child) { color: red; } } } + .not-hover\\:md\\:foo { + &:not(*:hover) { + @media (width >= 768px) { + :where(.not-hover\\:md\\:foo > :first-child) { + color: red; + } + } + } + @media not (hover: hover) { + @media (width >= 768px) { + :where(.not-hover\\:md\\:foo > :first-child) { + color: red; + } + } + } + } " `) }) @@ -3378,21 +3582,17 @@ describe('matchUtilities()', () => { .border-block { border-block-width: 1px; } - .border-block-2 { border-block-width: 2px; } - .border-block-\\[35px\\] { border-block-width: 35px; } - .border-block-\\[var\\(--foo\\)\\] { border-block-width: var(--foo); } - - @media (min-width: 1024px) { - .lg\\:border-block-2 { + .lg\\:border-block-2 { + @media (width >= 1024px) { border-block-width: 2px; } } @@ -3452,10 +3652,11 @@ describe('matchUtilities()', () => { .\\@w-1 { width: 1px; } - - @media (hover: hover) { - .hover\\:\\@w-1:hover { - width: 1px; + .hover\\:\\@w-1 { + &:hover { + @media (hover: hover) { + width: 1px; + } } } " @@ -3542,17 +3743,14 @@ describe('matchUtilities()', () => { --my-modifier: none; border-block-width: 1px; } - .border-block-2 { --my-modifier: none; border-block-width: 2px; } - .border-block-2\\/foo { --my-modifier: foo; border-block-width: 2px; } - .border-block\\/foo { --my-modifier: foo; border-block-width: 1px; @@ -3605,17 +3803,14 @@ describe('matchUtilities()', () => { --my-modifier: none; border-block-width: 1px; } - .border-block-2 { --my-modifier: none; border-block-width: 2px; } - .border-block-2\\/foo { --my-modifier: foo; border-block-width: 2px; } - .border-block\\/foo { --my-modifier: foo; border-block-width: 1px; @@ -3684,13 +3879,11 @@ describe('matchUtilities()', () => { .scrollbar-\\[2px\\] { scrollbar-width: 2px; } - .scrollbar-\\[\\#08c\\] { scrollbar-color: #08c; } - .scrollbar-\\[\\#08c\\]\\/50 { - scrollbar-color: oklab(59.9824% -.067 -.124 / .5); + scrollbar-color: color-mix(in oklab, #08c 50%, transparent); } " `) @@ -3809,48 +4002,44 @@ describe('matchUtilities()', () => { ), ).toMatchInlineSnapshot(` " - .scrollbar-2, .scrollbar-\\[2px\\] { + .scrollbar-2 { + scrollbar-width: 2px; + } + .scrollbar-\\[2px\\] { scrollbar-width: 2px; } - .scrollbar-\\[length\\:var\\(--my-width\\)\\] { scrollbar-width: var(--my-width); } - .scrollbar-\\[\\#fff\\] { scrollbar-color: #fff; } - .scrollbar-\\[\\#fff\\]\\/50 { - scrollbar-color: oklab(100% 0 5.96046e-8 / .5); + scrollbar-color: color-mix(in oklab, #fff 50%, transparent); } - - .scrollbar-\\[color\\:var\\(--my-color\\)\\], .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .scrollbar-\\[color\\:var\\(--my-color\\)\\] { scrollbar-color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 { + scrollbar-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - - .scrollbar-\\[var\\(--my-color\\)\\], .scrollbar-\\[var\\(--my-color\\)\\]\\/50 { + .scrollbar-\\[var\\(--my-color\\)\\] { scrollbar-color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .scrollbar-\\[var\\(--my-color\\)\\]\\/50 { + .scrollbar-\\[var\\(--my-color\\)\\]\\/50 { + scrollbar-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .scrollbar-black { scrollbar-color: black; } - .scrollbar-black\\/50 { - scrollbar-color: oklab(0% none none / .5); + scrollbar-color: color-mix(in oklab, black 50%, transparent); } " `) @@ -3921,32 +4110,25 @@ describe('matchUtilities()', () => { " .scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] { scrollbar-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] { + @supports (color: color-mix(in lab, red, red)) { scrollbar-color: color-mix(in oklab, var(--my-color) 25%, transparent); } } - .scrollbar-black { scrollbar-color: black; } - .scrollbar-black\\/33 { - scrollbar-color: oklab(0% none none / .33); + scrollbar-color: color-mix(in oklab, black 33%, transparent); } - .scrollbar-black\\/\\[50\\%\\] { - scrollbar-color: oklab(0% none none / .5); + scrollbar-color: color-mix(in oklab, black 50%, transparent); } - - .scrollbar-current, .scrollbar-current\\/45 { + .scrollbar-current { scrollbar-color: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .scrollbar-current\\/45 { + .scrollbar-current\\/45 { + scrollbar-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { scrollbar-color: color-mix(in oklab, currentcolor 45%, transparent); } } @@ -3994,7 +4176,6 @@ describe('matchUtilities()', () => { --modifier: none; scrollbar-width: 12px; } - .scrollbar-\\[12px\\]\\/foo { --modifier: foo; scrollbar-width: 12px; @@ -4039,19 +4220,18 @@ describe('matchUtilities()', () => { --foo: 12px; display: flex; } - .foo-bar { --foo: bar; display: flex; } - - @media (min-width: 1024px) { - .lg\\:foo-\\[12px\\] { + .lg\\:foo-\\[12px\\] { + @media (width >= 1024px) { --foo: 12px; display: flex; } - - .lg\\:foo-bar { + } + .lg\\:foo-bar { + @media (width >= 1024px) { --foo: bar; display: flex; } @@ -4123,23 +4303,34 @@ describe('matchUtilities()', () => { ), ).toMatchInlineSnapshot(` " - .foo-red :where(.foo-red > :first-child) { - color: red; - } - - @media (min-width: 768px) { - .md\\:foo-red :where(.md\\:foo-red > :first-child), .not-hover\\:md\\:foo-red:not(:hover) :where(.not-hover\\:md\\:foo-red > :first-child) { + .foo-red { + :where(.foo-red > :first-child) { color: red; } } - - @media not all and (hover: hover) { - @media (min-width: 768px) { - .not-hover\\:md\\:foo-red :where(.not-hover\\:md\\:foo-red > :first-child) { + .md\\:foo-red { + @media (width >= 768px) { + :where(.md\\:foo-red > :first-child) { color: red; } } } + .not-hover\\:md\\:foo-red { + &:not(*:hover) { + @media (width >= 768px) { + :where(.not-hover\\:md\\:foo-red > :first-child) { + color: red; + } + } + } + @media not (hover: hover) { + @media (width >= 768px) { + :where(.not-hover\\:md\\:foo-red > :first-child) { + color: red; + } + } + } + } " `) }) @@ -4189,27 +4380,23 @@ describe('addComponents()', () => { ).toMatchInlineSnapshot(` " .btn { - border-radius: .25rem; padding: .5rem 1rem; + border-radius: .25rem; font-weight: 600; } - .btn-blue { - color: #fff; background-color: #3490dc; + color: #fff; + &:hover { + background-color: #2779bd; + } } - - .btn-blue:hover { - background-color: #2779bd; - } - .btn-red { - color: #fff; background-color: #e3342f; - } - - .btn-red:hover { - background-color: #cc1f1a; + color: #fff; + &:hover { + background-color: #cc1f1a; + } } " `) @@ -4245,10 +4432,11 @@ describe('matchComponents()', () => { .prose { --container-size: normal; } - - @media (hover: hover) { - .hover\\:prose-lg:hover { - --container-size: lg; + .hover\\:prose-lg { + &:hover { + @media (hover: hover) { + --container-size: lg; + } } } " diff --git a/packages/tailwindcss/src/compat/screens-config.test.ts b/packages/tailwindcss/src/compat/screens-config.test.ts index d81cd8de6519..4f42bec3d2b6 100644 --- a/packages/tailwindcss/src/compat/screens-config.test.ts +++ b/packages/tailwindcss/src/compat/screens-config.test.ts @@ -51,39 +51,37 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => { .max-w-screen-sm { max-width: 44rem; } - - @media (min-width: 44rem) { - .sm\\:flex { + .sm\\:flex { + @media (width >= 44rem) { display: flex; } - - @media not all and (min-width: 50rem) { - .min-sm\\:max-md\\:underline { + } + .min-sm\\:max-md\\:underline { + @media (width >= 44rem) { + @media (width < 50rem) { text-decoration-line: underline; } } } - - @media (min-width: 50rem) { - .md\\:flex { + .md\\:flex { + @media (width >= 50rem) { display: flex; } - - @media not all and (min-width: 64rem) { - .min-md\\:max-lg\\:underline { + } + .min-md\\:max-lg\\:underline { + @media (width >= 50rem) { + @media (width < 64rem) { text-decoration-line: underline; } } } - - @media (min-width: 64rem) { - .lg\\:flex { + .lg\\:flex { + @media (width >= 64rem) { display: flex; } } - - @media print { - .print\\:items-end { + .print\\:items-end { + @media print { align-items: flex-end; } } @@ -140,50 +138,54 @@ test('JS config `screens` extend CSS `--breakpoint-*`', async () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 30rem) { - .min-xs\\:flex, .xs\\:flex { + .min-xs\\:flex { + @media (width >= 30rem) { display: flex; } - - @media not all and (min-width: 50rem) { - .min-xs\\:max-md\\:underline { + } + .xs\\:flex { + @media (width >= 30rem) { + display: flex; + } + } + .min-xs\\:max-md\\:underline { + @media (width >= 30rem) { + @media (width < 50rem) { text-decoration-line: underline; } } } - - @media (min-width: 40rem) { - .sm\\:flex { + .sm\\:flex { + @media (width >= 40rem) { display: flex; } - - @media not all and (min-width: 50rem) { - .min-sm\\:max-md\\:underline { + } + .min-sm\\:max-md\\:underline { + @media (width >= 40rem) { + @media (width < 50rem) { text-decoration-line: underline; } } } - - @media (min-width: 50rem) { - .md\\:flex { + .md\\:flex { + @media (width >= 50rem) { display: flex; } - - @media not all and (min-width: 60rem) { - .min-md\\:max-lg\\:underline { + } + .min-md\\:max-lg\\:underline { + @media (width >= 50rem) { + @media (width < 60rem) { text-decoration-line: underline; } } } - - @media (min-width: 60rem) { - .lg\\:flex { + .lg\\:flex { + @media (width >= 60rem) { display: flex; } } - - @media print { - .print\\:items-end { + .print\\:items-end { + @media print { align-items: flex-end; } } @@ -227,38 +229,37 @@ test('JS config `screens` only setup, even if those match the default-theme expo ), ).toMatchInlineSnapshot(` " - @media (min-width: 40rem) { - .sm\\:flex { + .sm\\:flex { + @media (width >= 40rem) { display: flex; } - - @media not all and (min-width: 48rem) { - .min-sm\\:max-md\\:underline { + } + .min-sm\\:max-md\\:underline { + @media (width >= 40rem) { + @media (width < 48rem) { text-decoration-line: underline; } } } - - @media (min-width: 48rem) { - .md\\:flex { + .md\\:flex { + @media (width >= 48rem) { display: flex; } - - @media not all and (min-width: 64rem) { - .min-md\\:max-lg\\:underline { + } + .min-md\\:max-lg\\:underline { + @media (width >= 48rem) { + @media (width < 64rem) { text-decoration-line: underline; } } } - - @media (min-width: 64rem) { - .lg\\:flex { + .lg\\:flex { + @media (width >= 64rem) { display: flex; } } - - @media print { - .print\\:items-end { + .print\\:items-end { + @media print { align-items: flex-end; } } @@ -314,38 +315,61 @@ test('JS config `screens` overwrite CSS `--breakpoint-*`', async () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 40rem) { - .mini\\:flex, .sm\\:flex { + .mini\\:flex { + @media (width >= 40rem) { display: flex; } - - @media not all and (min-width: 48rem) { - .min-mini\\:max-midi\\:underline, .min-sm\\:max-md\\:underline { + } + .sm\\:flex { + @media (width >= 40rem) { + display: flex; + } + } + .min-mini\\:max-midi\\:underline { + @media (width >= 40rem) { + @media (width < 48rem) { text-decoration-line: underline; } } } - - @media (min-width: 48rem) { - .md\\:flex, .midi\\:flex { + .min-sm\\:max-md\\:underline { + @media (width >= 40rem) { + @media (width < 48rem) { + text-decoration-line: underline; + } + } + } + .md\\:flex { + @media (width >= 48rem) { display: flex; } - - @media not all and (min-width: 64rem) { - .min-md\\:max-lg\\:underline, .min-midi\\:max-maxi\\:underline { + } + .midi\\:flex { + @media (width >= 48rem) { + display: flex; + } + } + .min-md\\:max-lg\\:underline { + @media (width >= 48rem) { + @media (width < 64rem) { text-decoration-line: underline; } } } - - @media (min-width: 64rem) { - .maxi\\:flex { + .min-midi\\:max-maxi\\:underline { + @media (width >= 48rem) { + @media (width < 64rem) { + text-decoration-line: underline; + } + } + } + .maxi\\:flex { + @media (width >= 64rem) { display: flex; } } - - @media print { - .print\\:items-end { + .print\\:items-end { + @media print { align-items: flex-end; } } @@ -412,38 +436,37 @@ test('JS config with `theme: { extends }` should not include the `default-config ), ).toMatchInlineSnapshot(` " - @media (min-width: 40rem) { - .mini\\:flex { + .mini\\:flex { + @media (width >= 40rem) { display: flex; } - - @media not all and (min-width: 48rem) { - .min-mini\\:max-midi\\:underline { + } + .min-mini\\:max-midi\\:underline { + @media (width >= 40rem) { + @media (width < 48rem) { text-decoration-line: underline; } } } - - @media (min-width: 48rem) { - .midi\\:flex { + .midi\\:flex { + @media (width >= 48rem) { display: flex; } - - @media not all and (min-width: 64rem) { - .min-midi\\:max-maxi\\:underline { + } + .min-midi\\:max-maxi\\:underline { + @media (width >= 48rem) { + @media (width < 64rem) { text-decoration-line: underline; } } } - - @media (min-width: 64rem) { - .maxi\\:flex { + .maxi\\:flex { + @media (width >= 64rem) { display: flex; } } - - @media print { - .print\\:items-end { + .print\\:items-end { + @media print { align-items: flex-end; } } @@ -524,38 +547,38 @@ describe('complex screen configs', () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 868px) { - .lg\\:flex, .min-lg\\:flex { + .lg\\:flex { + @media (width >= 868px) { display: flex; } } - - @media (max-width: 639px) { - .sm\\:flex { + .min-lg\\:flex { + @media (width >= 868px) { display: flex; } } - - @media (max-width: 767px) and (min-width: 668px), (min-width: 868px) { - .md\\:flex { + .sm\\:flex { + @media (639px >= width) { display: flex; } } - - @media (max-width: 1279px) and (min-width: 1024px) { - .xl\\:flex { + .md\\:flex { + @media (767px >= width >= 668px), (width >= 868px) { display: flex; } } - - @media (min-height: 800px) { - .tall\\:flex { + .xl\\:flex { + @media (1279px >= width >= 1024px) { display: flex; } } - - @media print { - .print\\:items-end { + .tall\\:flex { + @media (min-height: 800px) { + display: flex; + } + } + .print\\:items-end { + @media print { align-items: flex-end; } } @@ -603,26 +626,33 @@ describe('complex screen configs', () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 40rem) { - .min-sm\\:flex, .sm\\:flex { + .min-sm\\:flex { + @media (width >= 40rem) { display: flex; } } - - @media (min-width: 48rem) { - .md\\:flex, .min-md\\:flex { + .sm\\:flex { + @media (width >= 40rem) { display: flex; } } - - @media screen and (orientation: portrait) { - .portrait\\:flex { + .md\\:flex { + @media (width >= 48rem) { display: flex; } } - - @media print { - .print\\:items-end { + .min-md\\:flex { + @media (width >= 48rem) { + display: flex; + } + } + .portrait\\:flex { + @media screen and (orientation: portrait) { + display: flex; + } + } + .print\\:items-end { + @media print { align-items: flex-end; } } diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 7096c6bbc75b..364ba0e33312 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -17,7 +17,7 @@ describe('--alpha(…)', () => { ).toMatchInlineSnapshot(` " .foo { - margin: oklab(62.7955% .224 .125 / .5); + margin: color-mix(in oklab, red 50%, transparent); } " `) @@ -75,9 +75,8 @@ describe('--spacing(…)', () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .foo { margin: calc(var(--spacing) * 4); } @@ -99,7 +98,7 @@ describe('--spacing(…)', () => { ).toMatchInlineSnapshot(` " .foo { - margin: 1rem; + margin: calc(0.25rem * 4); } " `) @@ -160,9 +159,8 @@ describe('--theme(…)', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: red; + --color-red-500: #f00; } - .red { color: var(--color-red-500); } @@ -183,7 +181,7 @@ describe('--theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -202,15 +200,11 @@ describe('--theme(…)', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: red; + --color-red-500: #f00; } - .red { - color: #ff000080; - } - - @supports (color: color-mix(in lab, red, red)) { - .red { + color: color-mix(in srgb, #f00 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -231,7 +225,7 @@ describe('--theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: oklab(62.7955% .224863 .125846); + color: color-mix(in oklab, #f00 5000%, transparent); } " `) @@ -335,17 +329,15 @@ describe('--theme(…)', () => { ).toMatchInlineSnapshot(` " :root, :host { - --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol", "Noto Color Emoji"; + --tw-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; --tw-default-font-family: var(--tw-font-sans); } - @layer base { html { font-family: var(--tw-default-font-family, sans-serif); } } - .tw\\:font-sans { font-family: var(--tw-font-sans); } @@ -374,13 +366,13 @@ describe('--theme(…)', () => { `), ).toMatchInlineSnapshot(` " - @media (min-width: 48rem) { + @custom-media --md (width >= 48rem); + @media (--md) { .blue { - color: #00f; + color: blue; } } - - @media (min-width: 64rem) { + @media (width >= 64rem) { .red { color: red; } @@ -450,7 +442,6 @@ describe('--theme(…)', () => { font-family: var(--default-font-family, system-ui); } } - @layer theme { :root, :host { --font-sans: sans-serif; @@ -478,7 +469,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -497,7 +488,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -516,7 +507,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -535,7 +526,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -554,7 +545,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -573,7 +564,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -592,7 +583,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: oklab(62.7955% .224 .125 / .75); + color: color-mix(in oklab, #f00 75%, transparent); } " `) @@ -611,7 +602,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: oklab(62.7955% .224 .125 / .75); + color: color-mix(in oklab, #f00 75%, transparent); } " `) @@ -630,7 +621,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: oklab(62.7955% .224 .125 / .75); + color: color-mix(in oklab, #f00 75%, transparent); } " `) @@ -649,12 +640,9 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; - } - - @supports (color: color-mix(in lab, red, red)) { - .red { - color: color-mix(in oklab, red var(--opacity), transparent); + color: #f00; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, #f00 var(--opacity), transparent); } } " @@ -675,12 +663,9 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; - } - - @supports (color: color-mix(in lab, red, red)) { - .red { - color: color-mix(in oklab, red var(--opacity, 50%), transparent); + color: #f00; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, #f00 var(--opacity,50%), transparent); } } " @@ -719,7 +704,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .space-on-the-left { - margin-left: .625rem; + margin-left: 0.625rem; } " `) @@ -738,7 +723,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .space-on-the-left { - margin-left: calc(100vh - .625rem); + margin-left: calc(100vh - 0.625rem); } " `) @@ -757,7 +742,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .radius { - border-radius: .5rem; + border-radius: 0.5rem; } " `) @@ -820,7 +805,7 @@ 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; + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } " `) @@ -840,7 +825,7 @@ 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; + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } " `) @@ -870,7 +855,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -889,7 +874,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: oklab(62.7955% .224 .125 / .25); + color: color-mix(in oklab, #f00 25%, transparent); } " `) @@ -949,7 +934,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -969,7 +954,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: oklab(62.7955% .224 .125 / .25); + color: color-mix(in oklab, color-mix(in oklab, #f00 50%, transparent) 50%, transparent); } " `) @@ -990,7 +975,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -1009,7 +994,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: oklab(62.7955% .224 .125 / .5); + color: color-mix(in oklab, #f00 50%, transparent); } " `) @@ -1028,7 +1013,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -1105,9 +1090,9 @@ describe('theme(…)', () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 40rem) { - .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] { - --color: red; + .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] { + @media (width >= 40rem) { + --color: #f00; } } " @@ -1164,7 +1149,7 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` " - @media (min-width: 48rem) and (max-width: 64rem) { + @media (min-width:48rem) and (max-width: 64rem) { .red { color: red; } @@ -1188,7 +1173,7 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` " - @media (min-width: 48rem) and (not (min-width: 64rem)) { + @media (width >= 48rem) and (width<64rem) { .red { color: red; } @@ -1213,7 +1198,8 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` " - @media (min-width: 48rem) { + @custom-media --my-media (min-width: 48rem); + @media (--my-media) { .red { color: red; } @@ -1236,7 +1222,7 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` " - @container not (max-width: 48rem) { + @container (width > 48rem) { .red { color: red; } @@ -1314,18 +1300,18 @@ describe('in plugins', () => { ), ).toMatchInlineSnapshot(` " - @layer base { - .my-base-rule { - color: oklch(62% .25 30); - background-color: oklch(45% .31 264); - border-color: oklab(87% .069 .008 / .1); - outline-color: oklab(79% .058 .159 / .15); - } - } - + @layer base, utilities; @layer utilities { .my-utility { - color: oklch(62% .25 30); + color: oklch(62% 0.25 30); + } + } + @layer base { + .my-base-rule { + color: oklch(62% 0.25 30); + outline-color: color-mix(in oklab, oklch(79% 0.17 70) 15%, transparent); + background-color: oklch(45% 0.31 264); + border-color: color-mix(in oklab, oklch(87% 0.07 7) 10%, transparent); } } " @@ -1384,18 +1370,18 @@ describe('in JS config files', () => { ), ).toMatchInlineSnapshot(` " - @layer base { - .my-base-rule { - color: orange; - background: red; - } - } - + @layer base, utilities; @layer utilities { .my-utility { color: red; } } + @layer base { + .my-base-rule { + background: red; + color: orange; + } + } " `) }) @@ -1427,7 +1413,7 @@ test('replaces CSS theme() function with values inside imported stylesheets', as ).toMatchInlineSnapshot(` " .red { - color: red; + color: #f00; } " `) @@ -1447,7 +1433,7 @@ test('resolves paths ending with a 1', async () => { ).toMatchInlineSnapshot(` " .foo { - margin: .25rem; + margin: 0.25rem; } " `) diff --git a/packages/tailwindcss/src/important.test.ts b/packages/tailwindcss/src/important.test.ts index a3c9447fca71..91fcef921b71 100644 --- a/packages/tailwindcss/src/important.test.ts +++ b/packages/tailwindcss/src/important.test.ts @@ -16,13 +16,16 @@ test('Utilities can be wrapped in a selector', async () => { ), ).toMatchInlineSnapshot(` " - #app .underline { - text-decoration-line: underline; - } - - @media (hover: hover) { - #app .hover\\:line-through:hover { - text-decoration-line: line-through; + #app { + .underline { + text-decoration-line: underline; + } + .hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through; + } + } } } " @@ -50,10 +53,11 @@ test('Utilities can be marked with important', async () => { .underline { text-decoration-line: underline !important; } - - @media (hover: hover) { - .hover\\:line-through:hover { - text-decoration-line: line-through !important; + .hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through !important; + } } } " @@ -76,13 +80,16 @@ test('Utilities can be wrapped with a selector and marked as important', async ( ), ).toMatchInlineSnapshot(` " - #app .underline { - text-decoration-line: underline !important; - } - - @media (hover: hover) { - #app .hover\\:line-through:hover { - text-decoration-line: line-through !important; + #app { + .underline { + text-decoration-line: underline !important; + } + .hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through !important; + } + } } } " @@ -102,30 +109,27 @@ test('variables in utilities should not be marked as important', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-ease: initial; - } - } - } - + @layer properties; :root, :host { - --ease-out: cubic-bezier(0, 0, .2, 1); + --ease-out: cubic-bezier(0, 0, 0.2, 1); } - .z-10\\! { z-index: 10 !important; } - .ease-out\\! { --tw-ease: var(--ease-out) !important; transition-timing-function: var(--ease-out) !important; } - @property --tw-ease { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-ease: initial; + } + } } " `) diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 2a72336fb738..021d7044ee7a 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -30,26 +30,24 @@ describe('compiling CSS', () => { :root, :host { --color-black: #000; } - @layer utilities { .flex { display: flex; } - - @media (hover: hover) { - .hover\\:underline:hover { - text-decoration-line: underline; + .hover\\:underline { + &:hover { + @media (hover: hover) { + text-decoration-line: underline; + } } } - - @media (min-width: 768px) { - .md\\:grid { + .md\\:grid { + @media (width >= 768px) { display: grid; } } - - @media (prefers-color-scheme: dark) { - .dark\\:bg-black { + .dark\\:bg-black { + @media (prefers-color-scheme: dark) { background-color: var(--color-black); } } @@ -98,7 +96,6 @@ describe('compiling CSS', () => { .flex { display: flex; } - .grid { display: grid; } @@ -166,17 +163,14 @@ describe('compiling CSS', () => { --spacing-1_5: 1.5rem; --spacing-2_5: 2.5rem; } - .ml-\\[theme\\(--spacing-1_5\\,theme\\(--spacing-2_5\\,_1rem\\)\\)\\)\\] { margin-left: 1.5rem; } - .ml-\\[var\\(--spacing-1_5\\,_var\\(--spacing-2_5\\,_1rem\\)\\)\\] { margin-left: var(--spacing-1_5, var(--spacing-2_5, 1rem)); } - .bg-\\[no-repeat_url\\(\\.\\/my_file\\.jpg\\)\\] { - background-color: no-repeat url("./my_file.jpg"); + background-color: no-repeat url(./my_file.jpg); } " `) @@ -206,19 +200,18 @@ describe('compiling CSS', () => { --spacing-3\\.5: 3.5px; --spacing-foo\\/bar: 3rem; } - .m-1\\.5 { margin: var(--spacing-1\\.5); } - - .m-2\\.5, .m-2_5 { + .m-2\\.5 { + margin: var(--spacing-2_5); + } + .m-2_5 { margin: var(--spacing-2_5); } - .m-3\\.5 { margin: var(--spacing-3\\.5); } - .m-foo\\/bar { margin: var(--spacing-foo\\/bar); } @@ -230,8 +223,6 @@ describe('compiling CSS', () => { expect(await run(['[text-size-adjust:none]'])).toMatchInlineSnapshot(` " .\\[text-size-adjust\\:none\\] { - -webkit-text-size-adjust: none; - -moz-text-size-adjust: none; text-size-adjust: none; } " @@ -254,7 +245,7 @@ describe('arbitrary properties', () => { expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(` " .\\[color\\:red\\]\\/50 { - color: oklab(62.7955% .224 .125 / .5); + color: color-mix(in oklab, red 50%, transparent); } " `) @@ -269,10 +260,7 @@ describe('arbitrary properties', () => { " .\\[color\\:var\\(--my-color\\)\\]\\/50 { color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .\\[color\\:var\\(--my-color\\)\\]\\/50 { + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -336,9 +324,8 @@ describe('@apply', () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .foo { padding: calc(var(--spacing) * 2); } @@ -374,7 +361,7 @@ describe('@apply', () => { ).toMatchInlineSnapshot(` " .foo { - padding: calc(var(--spacing, .25rem) * 2); + padding: calc(var(--spacing, 0.25rem) * 2); } " `) @@ -411,16 +398,7 @@ describe('@apply', () => { `), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } - + @layer properties; :root, :host { --color-red-200: #fecaca; --color-red-500: #ef4444; @@ -429,60 +407,56 @@ describe('@apply', () => { --color-green-500: #22c55e; --animate-spin: spin 1s linear infinite; } - .foo { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); animation: var(--animate-spin); background-color: var(--color-red-500); text-decoration-line: underline; - } - - @media (hover: hover) { - .foo:hover { - background-color: var(--color-blue-500); + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-500); + } } - } - - @media (min-width: 768px) { - .foo { + @media (width >= 768px) { background-color: var(--color-green-500); } - } - - .foo:hover:focus { - background-color: var(--color-red-200); - } - - @media (min-width: 768px) { - .foo:hover:focus { - background-color: var(--color-green-200); + &:hover:focus { + background-color: var(--color-red-200); + @media (width >= 768px) { + background-color: var(--color-green-200); + } } } - @property --tw-translate-x { 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; } - @keyframes spin { to { transform: rotate(360deg); } } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } " `) }) @@ -532,24 +506,29 @@ describe('@apply', () => { `), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-content: ""; - } - } + @layer properties; + .foo { + --tw-content: "a"; + --tw-content: "b"; + content: var(--tw-content); } - - .foo, .bar { + .bar { + --tw-content: "a"; --tw-content: "b"; content: var(--tw-content); } - @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-content: ""; + } + } + } " `) }) @@ -569,32 +548,29 @@ describe('@apply', () => { `), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-leading: initial; - } - } - } - + @layer properties; .c1 { --tw-leading: 1; line-height: 1; } - .c2 { --tw-leading: 1 !important; line-height: 1 !important; } - .c3 { --tw-leading: 1; line-height: 1; } - @property --tw-leading { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-leading: initial; + } + } } " `) @@ -673,12 +649,13 @@ describe('@apply', () => { `), ).toMatchInlineSnapshot(` " - .foo:before { - content: "bar"; - } - - .foo:after { - content: "baz"; + .foo { + &:before { + content: 'bar'; + } + &:after { + content: 'baz'; + } } " `) @@ -716,17 +693,30 @@ describe('@apply', () => { ), ).toMatchInlineSnapshot(` " - .a:focus, .b:focus, .c { + .a { + &:focus { + display: flex !important; + } + } + .b { + &:focus { + display: flex !important; + } + } + .c { display: flex !important; } - - .flex, .my-flex { + .flex { + display: flex; + } + .my-flex { display: flex; } - @layer base { - body:focus { - display: flex !important; + body { + &:focus { + display: flex !important; + } } } " @@ -758,13 +748,11 @@ describe('@apply', () => { .custom-utility { display: flex; } - .ignore-me { text-decoration-line: underline; - } - - .ignore-me div { - display: flex; + div { + display: flex; + } } " `) @@ -810,41 +798,32 @@ describe('@apply', () => { --color-red-500: red; --color-indigo-500: indigo; } - .test { background-color: var(--color-green-500); + &:hover { + background-color: var(--color-red-500); + } + &:disabled { + background-color: var(--color-indigo-500); + } } - - .test:hover { - background-color: var(--color-red-500); - } - - .test:disabled { - background-color: var(--color-indigo-500); - } - .test2 { background-color: var(--color-green-500); + &:hover { + background-color: var(--color-red-500); + } + &:disabled { + background-color: var(--color-indigo-500); + } } - - .test2:hover { - background-color: var(--color-red-500); - } - - .test2:disabled { - background-color: var(--color-indigo-500); - } - .foo { background-color: var(--color-green-500); - } - - .foo:hover { - background-color: var(--color-red-500); - } - - .foo:disabled { - background-color: var(--color-indigo-500); + &:hover { + background-color: var(--color-red-500); + } + &:disabled { + background-color: var(--color-indigo-500); + } } " `) @@ -876,10 +855,12 @@ describe('@apply', () => { ), ).toMatchInlineSnapshot(` " - .flex, .flex-explicitly-important { + .flex { + display: flex !important; + } + .flex-explicitly-important { display: flex !important; } - .flex-not-important { display: flex; } @@ -928,18 +909,13 @@ describe('@apply', () => { " .foo { text-decoration-line: underline; - } - - @apply --my-mixin-1; - - @apply --my-mixin-1(); - - @apply --my-mixin-1 --my-mixin-2; - - @apply --my-mixin-1() --my-mixin-2(); - - @apply --my-mixin-3 { - color: red; + @apply --my-mixin-1; + @apply --my-mixin-1(); + @apply --my-mixin-1 --my-mixin-2; + @apply --my-mixin-1() --my-mixin-2(); + @apply --my-mixin-3 { + color: red; + } } " `) @@ -986,8 +962,10 @@ describe('arbitrary variants', () => { it('should generate arbitrary variants', async () => { expect(await run(['[&_p]:flex'])).toMatchInlineSnapshot(` " - .\\[\\&_p\\]\\:flex p { - display: flex; + .\\[\\&_p\\]\\:flex { + & p { + display: flex; + } } " `) @@ -996,8 +974,8 @@ describe('arbitrary variants', () => { it('should generate arbitrary at-rule variants', async () => { expect(await run(['[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(` " - @media (min-width: 123px) { - .\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex { + .\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex { + @media (width>=123px) { display: flex; } } @@ -1014,9 +992,13 @@ describe('variant stacking', () => { it('should stack simple variants', async () => { expect(await run(['focus:hover:flex'])).toMatchInlineSnapshot(` " - @media (hover: hover) { - .focus\\:hover\\:flex:focus:hover { - display: flex; + .focus\\:hover\\:flex { + &:focus { + &:hover { + @media (hover: hover) { + display: flex; + } + } } } " @@ -1026,9 +1008,13 @@ describe('variant stacking', () => { it('should stack arbitrary variants and simple variants', async () => { expect(await run(['[&_p]:hover:flex'])).toMatchInlineSnapshot(` " - @media (hover: hover) { - .\\[\\&_p\\]\\:hover\\:flex p:hover { - display: flex; + .\\[\\&_p\\]\\:hover\\:flex { + & p { + &:hover { + @media (hover: hover) { + display: flex; + } + } } } " @@ -1038,9 +1024,11 @@ describe('variant stacking', () => { it('should stack multiple arbitrary variants', async () => { expect(await run(['[&_p]:[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(` " - @media (min-width: 123px) { - .\\[\\&_p\\]\\:\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex p { - display: flex; + .\\[\\&_p\\]\\:\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex { + & p { + @media (width>=123px) { + display: flex; + } } } " @@ -1050,33 +1038,38 @@ describe('variant stacking', () => { it('pseudo element variants are re-ordered', async () => { expect(await run(['before:hover:flex', 'hover:before:flex'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-content: ""; + @layer properties; + .before\\:hover\\:flex { + &::before { + content: var(--tw-content); + &:hover { + @media (hover: hover) { + display: flex; + } } } } - - .before\\:hover\\:flex:before { - content: var(--tw-content); - } - - @media (hover: hover) { - .before\\:hover\\:flex:before:hover { - display: flex; - } - - .hover\\:before\\:flex:hover:before { - content: var(--tw-content); - display: flex; + .hover\\:before\\:flex { + &:hover { + @media (hover: hover) { + &::before { + content: var(--tw-content); + display: flex; + } + } } } - @property --tw-content { syntax: "*"; - inherits: false; initial-value: ""; + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-content: ""; + } + } } " `) @@ -1126,11 +1119,9 @@ describe('important', () => { :root, :host { --animate-spin: spin 1s linear infinite; } - .animate-spin\\! { animation: var(--animate-spin) !important; } - @keyframes spin { to { transform: rotate(360deg); @@ -1166,25 +1157,20 @@ describe('sorting', () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing-1: .25rem; + --spacing-1: 0.25rem; } - .pointer-events-none { pointer-events: none; } - .flex { display: flex; } - .p-1 { padding: var(--spacing-1); } - .px-1 { padding-inline: var(--spacing-1); } - .pl-1 { padding-left: var(--spacing-1); } @@ -1196,15 +1182,13 @@ describe('sorting', () => { expect(await run(['text-clip', 'truncate', 'overflow-scroll'])).toMatchInlineSnapshot(` " .truncate { + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; } - .overflow-scroll { overflow: scroll; } - .text-clip { text-overflow: clip; } @@ -1232,39 +1216,37 @@ describe('sorting', () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-space-x-reverse: 0; - } - } - } - + @layer properties; :root, :host { --spacing-0: 0px; - --spacing-2: .5rem; + --spacing-2: 0.5rem; --spacing-4: 1rem; } - .mx-0 { margin-inline: var(--spacing-0); } - .gap-4 { gap: var(--spacing-4); } - - :where(.space-x-2 > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(var(--spacing-2) * var(--tw-space-x-reverse)); - margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse))); + .space-x-2 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(var(--spacing-2) * var(--tw-space-x-reverse)); + margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse))); + } } - @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-space-x-reverse: 0; + } + } + } " `) }) @@ -1309,51 +1291,39 @@ describe('sorting', () => { --spacing-2: 2px; --spacing-3: 3px; } - .mx-3 { margin-inline: var(--spacing-3); } - .ms-1 { margin-inline-start: var(--spacing-1); } - .me-2 { margin-inline-end: var(--spacing-2); } - .scroll-mx-3 { scroll-margin-inline: var(--spacing-3); } - .scroll-ms-1 { scroll-margin-inline-start: var(--spacing-1); } - .scroll-me-2 { scroll-margin-inline-end: var(--spacing-2); } - .scroll-px-3 { scroll-padding-inline: var(--spacing-3); } - .scroll-ps-1 { scroll-padding-inline-start: var(--spacing-1); } - .scroll-pe-2 { scroll-padding-inline-end: var(--spacing-2); } - .px-3 { padding-inline: var(--spacing-3); } - .ps-1 { padding-inline-start: var(--spacing-1); } - .pe-2 { padding-inline-end: var(--spacing-2); } @@ -1373,19 +1343,20 @@ describe('sorting', () => { .pointer-events-none { pointer-events: none; } - .flex { display: flex; } - - @media (hover: hover) { - .hover\\:flex:hover { - display: flex; + .hover\\:flex { + &:hover { + @media (hover: hover) { + display: flex; + } } } - - .focus\\:pointer-events-none:focus { - pointer-events: none; + .focus\\:pointer-events-none { + &:focus { + pointer-events: none; + } } " `) @@ -1418,26 +1389,32 @@ describe('sorting', () => { .flex { display: flex; } - - @media (hover: hover) { - .hover\\:flex:hover { - display: flex; + .hover\\:flex { + &:hover { + @media (hover: hover) { + display: flex; + } } } - - .focus\\:flex:focus { - display: flex; - } - - @media (hover: hover) { - .hover\\:focus\\:flex:hover:focus { + .focus\\:flex { + &:focus { + display: flex; + } + } + .hover\\:focus\\:flex { + &:hover { + @media (hover: hover) { + &:focus { + display: flex; + } + } + } + } + .disabled\\:flex { + &:disabled { display: flex; } } - - .disabled\\:flex:disabled { - display: flex; - } " `) }) @@ -1468,51 +1445,109 @@ describe('sorting', () => { ), ).toMatchInlineSnapshot(` " - @media (hover: hover) { - .group-hover\\:flex:is(:where(.group):hover *) { - display: flex; + .group-hover\\:flex { + &:is(:where(.group):hover *) { + @media (hover: hover) { + display: flex; + } } } - - .group-focus\\:flex:is(:where(.group):focus *) { - display: flex; - } - - @media (hover: hover) { - .peer-hover\\:flex:is(:where(.peer):hover ~ *) { + .group-focus\\:flex { + &:is(:where(.group):focus *) { display: flex; } - - @media (hover: hover) { - .group-hover\\:peer-hover\\:flex:is(:where(.group):hover *):is(:where(.peer):hover ~ *), .peer-hover\\:group-hover\\:flex:is(:where(.peer):hover ~ *):is(:where(.group):hover *) { + } + .peer-hover\\:flex { + &:is(:where(.peer):hover ~ *) { + @media (hover: hover) { display: flex; } } - - .group-focus\\:peer-hover\\:flex:is(:where(.group):focus *):is(:where(.peer):hover ~ *), .peer-hover\\:group-focus\\:flex:is(:where(.peer):hover ~ *):is(:where(.group):focus *) { - display: flex; + } + .group-hover\\:peer-hover\\:flex { + &:is(:where(.group):hover *) { + @media (hover: hover) { + &:is(:where(.peer):hover ~ *) { + @media (hover: hover) { + display: flex; + } + } + } } } - - .peer-focus\\:flex:is(:where(.peer):focus ~ *) { - display: flex; + .peer-hover\\:group-hover\\:flex { + &:is(:where(.peer):hover ~ *) { + @media (hover: hover) { + &:is(:where(.group):hover *) { + @media (hover: hover) { + display: flex; + } + } + } + } } - - @media (hover: hover) { - .group-hover\\:peer-focus\\:flex:is(:where(.group):hover *):is(:where(.peer):focus ~ *), .peer-focus\\:group-hover\\:flex:is(:where(.peer):focus ~ *):is(:where(.group):hover *) { - display: flex; + .group-focus\\:peer-hover\\:flex { + &:is(:where(.group):focus *) { + &:is(:where(.peer):hover ~ *) { + @media (hover: hover) { + display: flex; + } + } } } - - .group-focus\\:peer-focus\\:flex:is(:where(.group):focus *):is(:where(.peer):focus ~ *), .peer-focus\\:group-focus\\:flex:is(:where(.peer):focus ~ *):is(:where(.group):focus *) { - display: flex; + .peer-hover\\:group-focus\\:flex { + &:is(:where(.peer):hover ~ *) { + @media (hover: hover) { + &:is(:where(.group):focus *) { + display: flex; + } + } + } } - - @media (hover: hover) { - .hover\\:flex:hover { + .peer-focus\\:flex { + &:is(:where(.peer):focus ~ *) { display: flex; } } + .group-hover\\:peer-focus\\:flex { + &:is(:where(.group):hover *) { + @media (hover: hover) { + &:is(:where(.peer):focus ~ *) { + display: flex; + } + } + } + } + .peer-focus\\:group-hover\\:flex { + &:is(:where(.peer):focus ~ *) { + &:is(:where(.group):hover *) { + @media (hover: hover) { + display: flex; + } + } + } + } + .group-focus\\:peer-focus\\:flex { + &:is(:where(.group):focus *) { + &:is(:where(.peer):focus ~ *) { + display: flex; + } + } + } + .peer-focus\\:group-focus\\:flex { + &:is(:where(.peer):focus ~ *) { + &:is(:where(.group):focus *) { + display: flex; + } + } + } + .hover\\:flex { + &:hover { + @media (hover: hover) { + display: flex; + } + } + } " `) }) @@ -1538,16 +1573,14 @@ describe('sorting', () => { ).toMatchInlineSnapshot(` " :root, :host { - --text-sm: .875rem; - --text-sm--line-height: calc(1.25 / .875); + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); } - .fancy-text { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); font-weight: var(--font-weight-bold); } - .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); @@ -1572,9 +1605,8 @@ describe('Parsing theme values from CSS', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: red; + --color-red-500: #f00; } - .accent-red-500 { accent-color: var(--color-red-500); } @@ -1599,7 +1631,6 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-red-500: #f10; } - .accent-red-500 { accent-color: var(--color-red-500); } @@ -1624,14 +1655,12 @@ describe('Parsing theme values from CSS', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: red; + --color-red-500: #f00; --color-blue-500: #00f; } - .accent-blue-500 { accent-color: var(--color-blue-500); } - .accent-red-500 { accent-color: var(--color-red-500); } @@ -1658,11 +1687,9 @@ describe('Parsing theme values from CSS', () => { --width-1\\/2: 75%; --width-75\\%: 50%; } - .w-1\\/2 { width: var(--width-1\\/2); } - .w-75\\% { width: var(--width-75\\%); } @@ -1704,11 +1731,9 @@ describe('Parsing theme values from CSS', () => { --color-red: red; --text-lg: 20px; } - .text-lg { font-size: var(--text-lg); } - .accent-red { accent-color: var(--color-red); } @@ -1742,13 +1767,14 @@ describe('Parsing theme values from CSS', () => { " :root, :host { --animate-very-long-animation-name: very-long-animation-name - var(--very-long-animation-name-configuration, 2.5s ease-in-out 0s infinite normal none running); + var( + --very-long-animation-name-configuration, + 2.5s ease-in-out 0s infinite normal none running + ); } - .animate-very-long-animation-name { animation: var(--animate-very-long-animation-name); } - @keyframes very-long-animation-name { to { opacity: 1; @@ -1795,11 +1821,9 @@ describe('Parsing theme values from CSS', () => { --text-sm: 13px; --color-green: #0f0; } - .text-sm { font-size: var(--text-sm); } - .accent-green { accent-color: var(--color-green); } @@ -1844,11 +1868,9 @@ describe('Parsing theme values from CSS', () => { --text-sm: 13px; --color-green: #0f0; } - .text-sm { font-size: var(--text-sm); } - .accent-green { accent-color: var(--color-green); } @@ -1881,7 +1903,6 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-green: #0f0; } - .accent-green { accent-color: var(--color-green); } @@ -1908,31 +1929,28 @@ describe('Parsing theme values from CSS', () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-font-weight: initial; - } - } - } - + @layer properties; :root, :host { --font-weight-bold: bold; --font-body: Inter; } - .font-body { font-family: var(--font-body); } - .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } - @property --tw-font-weight { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-font-weight: initial; + } + } } " `) @@ -1957,118 +1975,102 @@ describe('Parsing theme values from CSS', () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } - + @layer properties; :root, :host { --inset-md: 50px; } - .inset-md { inset: var(--inset-md); } - .inset-shadow-sm { - --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, #0000000d); + --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-ring-inset { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0; + initial-value: 0px; } - @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } - @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } " `) }) @@ -2110,29 +2112,21 @@ describe('Parsing theme values from CSS', () => { --text-decoration-color-salad: yellow; --text-lg: 20px; } - .indent-potato { text-indent: var(--text-indent-potato); } - .text-lg { font-size: var(--text-lg); } - .text-potato { color: var(--text-color-potato); } - .decoration-salad { - -webkit-text-decoration-color: var(--text-decoration-color-salad); - -webkit-text-decoration-color: var(--text-decoration-color-salad); text-decoration-color: var(--text-decoration-color-salad); } - .decoration-potato { text-decoration-thickness: var(--text-decoration-thickness-potato); } - .underline-offset-potato { text-underline-offset: var(--text-underline-offset-potato); } @@ -2172,11 +2166,9 @@ describe('Parsing theme values from CSS', () => { :root, :host { --animate-foobar: foobar 1s infinite; } - .animate-foobar { animation: var(--animate-foobar); } - @keyframes foobar { to { opacity: 0; @@ -2216,11 +2208,9 @@ describe('Parsing theme values from CSS', () => { :root, :host { --animate-foo: used 1s infinite; } - .animate-foo { animation: var(--animate-foo); } - @keyframes used { to { opacity: 1; @@ -2260,11 +2250,9 @@ describe('Parsing theme values from CSS', () => { :root, :host { --tw-animate-foo: used 1s infinite; } - .tw\\:animate-foo { animation: var(--tw-animate-foo); } - @keyframes used { to { opacity: 1; @@ -2290,7 +2278,6 @@ describe('Parsing theme values from CSS', () => { :root, :host { --tw-color-tomato: #e10c04; } - .red { color: var(--tw-color-tomato); } @@ -2323,11 +2310,9 @@ describe('Parsing theme values from CSS', () => { :root, :host { --animate-foo: used 1s infinite; } - .animate-foo { animation: var(--animate-foo); } - @keyframes used { to { --other: var(--angle); @@ -2366,9 +2351,8 @@ describe('Parsing theme values from CSS', () => { ).toMatchInlineSnapshot(` " .animate-foo { - animation: 1s infinite used; + animation: used 1s infinite; } - @keyframes used { to { opacity: 1; @@ -2409,17 +2393,14 @@ describe('Parsing theme values from CSS', () => { --animate-foo: used 1s infinite; --animate-bar: unused-but-kept 1s infinite; } - .animate-foo { animation: var(--animate-foo); } - @keyframes used { to { opacity: 1; } } - @keyframes unused-but-kept { to { opacity: 0; @@ -2455,9 +2436,8 @@ describe('Parsing theme values from CSS', () => { ).toMatchInlineSnapshot(` " .foo { - animation: 1s infinite used; + animation: used 1s infinite; } - @keyframes used { to { opacity: 1; @@ -2492,20 +2472,17 @@ describe('Parsing theme values from CSS', () => { ).toMatchInlineSnapshot(` " :root, :host { - --animate-test: .5s both fade-in, 1s linear .5s spin infinite; + --animate-test: 500ms both fade-in, 1000ms linear 500ms spin infinite; } - .animate-test { animation: var(--animate-test); } - @keyframes fade-in { from { - opacity: 0; + opacity: 0%; } - to { - opacity: 1; + opacity: 100%; } } " @@ -2542,11 +2519,9 @@ describe('Parsing theme values from CSS', () => { opacity: 0; } } - .foo { - animation: 1s infinite used; + animation: used 1s infinite; } - @keyframes used { to { opacity: 1; @@ -2575,11 +2550,9 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-tomato: #e10c04; } - .bg-potato { background-color: var(--color-potato, #ac855b); } - .bg-tomato { background-color: var(--color-tomato); } @@ -2613,14 +2586,12 @@ describe('Parsing theme values from CSS', () => { .animate-foo { animation: var(--animate-foo, foo 1s infinite); } - @keyframes foo { 0%, 100% { color: red; } - 50% { - color: #00f; + color: blue; } } " @@ -2658,22 +2629,18 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-pink: pink; } - .animate-foo { animation: var(--animate-foo, foo 1s infinite); } - .bg-pink { background-color: var(--color-pink); } - @keyframes foo { 0%, 100% { color: red; } - 50% { - color: #00f; + color: blue; } } " @@ -2722,7 +2689,6 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-potato: #c794aa; } - .bg-potato { background-color: var(--color-potato); } @@ -2754,15 +2720,12 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-tomato: #e10c04; } - .bg-avocado { background-color: var(--color-avocado, #c0cc6d); } - .bg-potato { background-color: var(--color-potato, #ac855b); } - .bg-tomato { background-color: var(--color-tomato); } @@ -2802,7 +2765,6 @@ describe('Parsing theme values from CSS', () => { --color-potato: #ac855b; --color-primary: var(--primary); } - .bg-tomato { background-color: var(--color-tomato); } @@ -2850,11 +2812,9 @@ describe('Parsing theme values from CSS', () => { .bg-potato { background-color: #ac855b; } - .bg-primary { background-color: var(--primary); } - .bg-tomato { background-color: #e10c04; } @@ -2917,7 +2877,6 @@ describe('Parsing theme values from CSS', () => { --color-potato: #ac855b; --color-primary: var(--primary); } - .bg-tomato { background-color: var(--color-tomato); } @@ -2972,11 +2931,9 @@ describe('Parsing theme values from CSS', () => { .bg-potato { background-color: #ac855b; } - .bg-primary { background-color: var(--primary); } - .bg-tomato { background-color: #e10c04; } @@ -3003,11 +2960,9 @@ describe('Parsing theme values from CSS', () => { .bg-potato { background-color: #ac855b; } - .bg-primary { background-color: var(--primary); } - .bg-tomato { background-color: #e10c04; } @@ -3036,11 +2991,9 @@ describe('Parsing theme values from CSS', () => { .bg-potato { background-color: #ac855b; } - .bg-primary { background-color: var(--primary); } - .bg-tomato { background-color: #e10c04; } @@ -3068,7 +3021,6 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-potato: #ac855b; } - .bg-potato { background-color: var(--color-potato); } @@ -3165,11 +3117,9 @@ describe('Parsing theme values from CSS', () => { --color-potato: #ac855b; --color-tomato: tomato; } - .bg-potato { background-color: var(--color-potato); } - .bg-tomato { background-color: var(--color-tomato); } @@ -3215,11 +3165,9 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-orange: orange; } - .text-orange { color: var(--color-orange); } - .text-red { color: tomato; } @@ -3265,11 +3213,9 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-orange: orange; } - .text-orange { color: var(--color-orange); } - .text-red { color: tomato; } @@ -3315,11 +3261,9 @@ describe('Parsing theme values from CSS', () => { --var-three: var(--var-four); --var-two: var(--var-three); } - .get-var-b { color: var(--var-b); } - .get-var-two { color: var(--var-two); } @@ -3626,12 +3570,15 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { - display: flex; + .group-hocus\\:flex { + &:is(:is(:where(.group):hover, :where(.group):focus) *) { + display: flex; + } } - - .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + .hocus\\:underline { + &:hover, &:focus { + text-decoration-line: underline; + } } } " @@ -3661,12 +3608,21 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) { - display: flex; + .group-hocus\\:flex { + &:is(:where(.group):hover *) { + display: flex; + } + &:is(:where(.group):focus *) { + display: flex; + } } - - .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + .hocus\\:underline { + &:hover { + text-decoration-line: underline; + } + &:focus { + text-decoration-line: underline; + } } } " @@ -3699,12 +3655,21 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) { - display: flex; + .group-hocus\\:flex { + &:is(:where(.group):hover *) { + display: flex; + } + &:is(:where(.group):focus *) { + display: flex; + } } - - .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + .hocus\\:underline { + &:hover { + text-decoration-line: underline; + } + &:focus { + text-decoration-line: underline; + } } } " @@ -3739,25 +3704,26 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (hover: hover) { - .group-hocus\\:flex:is(:where(.group):hover *) { + .group-hocus\\:flex { + @media (hover: hover) { + &:is(:where(.group):hover *) { + display: flex; + } + } + &:is(:where(.group):focus *) { display: flex; } } - - .group-hocus\\:flex:is(:where(.group):focus *) { - display: flex; - } - - @media (hover: hover) { - .hocus\\:underline:hover { + .hocus\\:underline { + @media (hover: hover) { + &:hover { + text-decoration-line: underline; + } + } + &:focus { text-decoration-line: underline; } } - - .hocus\\:underline:focus { - text-decoration-line: underline; - } } " `) @@ -3794,10 +3760,12 @@ describe('plugins', () => { @layer utilities { .hocus\\:underline { --custom-property: @slot; - } - - .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + &:hover { + text-decoration-line: underline; + } + &:focus { + text-decoration-line: underline; + } } } " @@ -3829,12 +3797,18 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *), .dark\\:flex:is([data-theme="dark"] *) { - display: flex; + .rtl\\:flex { + &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + display: flex; + } } - - @starting-style { - .starting\\:flex { + .dark\\:flex { + &:is([data-theme=dark] *) { + display: flex; + } + } + .starting\\:flex { + @starting-style { display: flex; } } @@ -3924,59 +3898,48 @@ describe('@source', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-50: oklch(97.1% .013 17.38); - --color-red-100: oklch(93.6% .032 17.717); - --color-red-200: oklch(88.5% .062 18.334); - --color-red-300: oklch(80.8% .114 19.571); - --color-red-400: oklch(70.4% .191 22.216); - --color-red-500: oklch(63.7% .237 25.331); - --color-red-600: oklch(57.7% .245 27.325); - --color-red-700: oklch(50.5% .213 27.518); - --color-red-800: oklch(44.4% .177 26.899); - --color-red-900: oklch(39.6% .141 25.723); - --color-red-950: oklch(25.8% .092 26.042); + --color-red-50: oklch(0.971 0.013 17.38); + --color-red-100: oklch(0.936 0.032 17.717); + --color-red-200: oklch(0.885 0.062 18.334); + --color-red-300: oklch(0.808 0.114 19.571); + --color-red-400: oklch(0.704 0.191 22.216); + --color-red-500: oklch(0.637 0.237 25.331); + --color-red-600: oklch(0.577 0.245 27.325); + --color-red-700: oklch(0.505 0.213 27.518); + --color-red-800: oklch(0.444 0.177 26.899); + --color-red-900: oklch(0.396 0.141 25.723); + --color-red-950: oklch(0.258 0.092 26.042); } - .bg-red-50 { background-color: var(--color-red-50); } - .bg-red-100 { background-color: var(--color-red-100); } - .bg-red-200 { background-color: var(--color-red-200); } - .bg-red-300 { background-color: var(--color-red-300); } - .bg-red-400 { background-color: var(--color-red-400); } - .bg-red-500 { background-color: var(--color-red-500); } - .bg-red-600 { background-color: var(--color-red-600); } - .bg-red-700 { background-color: var(--color-red-700); } - .bg-red-800 { background-color: var(--color-red-800); } - .bg-red-900 { background-color: var(--color-red-900); } - .bg-red-950 { background-color: var(--color-red-950); } @@ -3997,18 +3960,15 @@ describe('@source', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-100: oklch(93.6% .032 17.717); - --color-red-200: oklch(88.5% .062 18.334); + --color-red-100: oklch(0.936 0.032 17.717); + --color-red-200: oklch(0.885 0.062 18.334); } - .block { display: block; } - .bg-red-100 { background-color: var(--color-red-100); } - .bg-red-200 { background-color: var(--color-red-200); } @@ -4224,12 +4184,15 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { - display: flex; + .group-hocus\\:flex { + &:is(:is(:where(.group):hover, :where(.group):focus) *) { + display: flex; + } } - - .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + .hocus\\:underline { + &:hover, &:focus { + text-decoration-line: underline; + } } } " @@ -4251,10 +4214,12 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (any-hover: hover) { - @media (hover: hover) { - .any-hover\\:hover\\:underline:hover { - text-decoration-line: underline; + .any-hover\\:hover\\:underline { + @media (any-hover: hover) { + &:hover { + @media (hover: hover) { + text-decoration-line: underline; + } } } } @@ -4278,19 +4243,21 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - :is(.cant-hover\\:focus\\:underline:not(:hover), .cant-hover\\:focus\\:underline:not(:active)):focus { - text-decoration-line: underline; - } - - @media not all and (any-hover: hover) { - .cant-hover\\:focus\\:underline:focus { - text-decoration-line: underline; + .cant-hover\\:focus\\:underline { + &:not(:hover), &:not(:active) { + &:focus { + text-decoration-line: underline; + } } - } - - @media not all and (pointer: fine) { - .cant-hover\\:focus\\:underline:focus { - text-decoration-line: underline; + @media not (any-hover: hover) { + &:focus { + text-decoration-line: underline; + } + } + @media not (pointer: fine) { + &:focus { + text-decoration-line: underline; + } } } } @@ -4319,8 +4286,15 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-selected\\:underline:is(:where(.group)[data-selected] *), .selected\\:underline[data-selected] { - text-decoration-line: underline; + .group-selected\\:underline { + &:is(:where(.group)[data-selected] *) { + text-decoration-line: underline; + } + } + .selected\\:underline { + &[data-selected] { + text-decoration-line: underline; + } } } " @@ -4347,8 +4321,15 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:underline:is(:is(:where(.group):hover, :where(.group):focus) *), .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + .group-hocus\\:underline { + &:is(:is(:where(.group):hover, :where(.group):focus) *) { + text-decoration-line: underline; + } + } + .hocus\\:underline { + &:hover, &:focus { + text-decoration-line: underline; + } } } " @@ -4378,8 +4359,21 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:underline:is(:where(.group):hover *), .group-hocus\\:underline:is(:where(.group):focus *), .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + .group-hocus\\:underline { + &:is(:where(.group):hover *) { + text-decoration-line: underline; + } + &:is(:where(.group):focus *) { + text-decoration-line: underline; + } + } + .hocus\\:underline { + &:hover { + text-decoration-line: underline; + } + &:focus { + text-decoration-line: underline; + } } } " @@ -4410,10 +4404,9 @@ describe('@custom-variant', () => { @layer utilities { .custom-before\\:underline { --has-before: 1; - } - - .custom-before\\:underline:before { - text-decoration-line: underline; + &::before { + text-decoration-line: underline; + } } } " @@ -4447,10 +4440,11 @@ describe('@custom-variant', () => { @layer utilities { .custom-before\\:underline { --has-before: 1; - } - - .custom-before\\:underline:before:hover, .custom-before\\:underline:before:focus { - text-decoration-line: underline; + &::before { + &:hover, &:focus { + text-decoration-line: underline; + } + } } } " @@ -4482,25 +4476,26 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (hover: hover) { - .group-hocus\\:underline:is(:where(.group):hover *) { + .group-hocus\\:underline { + &:is(:where(.group):hover *) { + @media (hover: hover) { + text-decoration-line: underline; + } + } + &:is(:where(.group):focus *) { text-decoration-line: underline; } } - - .group-hocus\\:underline:is(:where(.group):focus *) { - text-decoration-line: underline; - } - - @media (hover: hover) { - .hocus\\:underline:hover { + .hocus\\:underline { + &:hover { + @media (hover: hover) { + text-decoration-line: underline; + } + } + &:focus { text-decoration-line: underline; } } - - .hocus\\:underline:focus { - text-decoration-line: underline; - } } " `) @@ -4527,9 +4522,18 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (hover: hover) { - .group-hocus\\:underline:is(:where(.group):hover *), .hocus\\:underline:hover { - text-decoration-line: underline; + .group-hocus\\:underline { + @media (hover: hover) { + &:is(:where(.group):hover *) { + text-decoration-line: underline; + } + } + } + .hocus\\:underline { + @media (hover: hover) { + &:hover { + text-decoration-line: underline; + } } } } @@ -4556,8 +4560,8 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (any-hover: hover) { - .any-hover\\:underline { + .any-hover\\:underline { + @media (any-hover: hover) { text-decoration-line: underline; } } @@ -4589,14 +4593,11 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (any-hover: hover) { - .desktop\\:underline { + .desktop\\:underline { + @media (any-hover: hover) { text-decoration-line: underline; } - } - - @media (pointer: fine) { - .desktop\\:underline { + @media (pointer: fine) { text-decoration-line: underline; } } @@ -4630,15 +4631,12 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (orientation: landscape) { - @media screen { - .custom-variant\\:underline { + .custom-variant\\:underline { + @media (orientation: landscape) { + @media screen { text-decoration-line: underline; } - } - - @media print { - .custom-variant\\:underline { + @media print { display: none; } } @@ -4670,14 +4668,13 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media (prefers-color-scheme: dark) { - .custom-dark\\:underline { + .custom-dark\\:underline { + @media (prefers-color-scheme: dark) { + text-decoration-line: underline; + } + &:is(.dark *) { text-decoration-line: underline; } - } - - .custom-dark\\:underline:is(.dark *) { - text-decoration-line: underline; } } " @@ -4701,12 +4698,18 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *), .dark\\:flex:is([data-theme="dark"] *) { - display: flex; + .rtl\\:flex { + &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + display: flex; + } } - - @starting-style { - .starting\\:flex { + .dark\\:flex { + &:is([data-theme='dark'] *) { + display: flex; + } + } + .starting\\:flex { + @starting-style { display: flex; } } @@ -4730,14 +4733,13 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - @media not foo { - .not-foo\\:flex { + .not-foo\\:flex { + @media not foo { display: flex; } } - - @media foo { - .foo\\:flex { + .foo\\:flex { + @media foo { display: flex; } } @@ -4764,9 +4766,13 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - @media (hover: hover) { - .hocus\\:flex:hover:focus { - display: flex; + .hocus\\:flex { + &:hover { + @media (hover: hover) { + &:focus { + display: flex; + } + } } } " @@ -4793,8 +4799,12 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:flex:hover:focus { - display: flex; + .hocus\\:flex { + &:hover { + &:focus { + display: flex; + } + } } " `) @@ -4820,8 +4830,12 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:flex:hover:focus { - display: flex; + .hocus\\:flex { + &:hover { + &:focus { + display: flex; + } + } } " `) @@ -4905,7 +4919,16 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .a\\:flex, .b\\:flex, .a\\:b\\:flex, .b\\:a\\:flex { + .a\\:flex { + display: flex; + } + .b\\:flex { + display: flex; + } + .a\\:b\\:flex { + display: flex; + } + .b\\:a\\:flex { display: flex; } " @@ -4938,8 +4961,41 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .a\\:flex .a, .b\\:flex .b .a .a-inside-b, .a\\:b\\:flex .a .b .a .a-inside-b, .b\\:a\\:flex .b .a .a-inside-b .a { - display: flex; + .a\\:flex { + .a { + display: flex; + } + } + .b\\:flex { + .b { + .a { + .a-inside-b { + display: flex; + } + } + } + } + .a\\:b\\:flex { + .a { + .b { + .a { + .a-inside-b { + display: flex; + } + } + } + } + } + .b\\:a\\:flex { + .b { + .a { + .a-inside-b { + .a { + display: flex; + } + } + } + } } " `) @@ -4974,8 +5030,17 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:flex:hover:focus, .hocus\\:flex[data-hover]:focus { - display: flex; + .hocus\\:flex { + &:hover { + &:focus { + display: flex; + } + } + &[data-hover] { + &:focus { + display: flex; + } + } } " `) @@ -5018,8 +5083,12 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - [data-broken-circle] .baz\\:flex:active { - display: flex; + .baz\\:flex { + &:active { + [data-broken-circle] & { + display: flex; + } + } } " `) @@ -5083,7 +5152,10 @@ describe('@utility', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .push-1\\/2, .push-50\\% { + .push-1\\/2 { + right: 50%; + } + .push-50\\% { right: 50%; } } @@ -5132,8 +5204,8 @@ describe('@utility', () => { ` " .ui\\/button { - background: #00f; display: inline-flex; + background: blue; } " `, @@ -5180,17 +5252,17 @@ test('addBase', async () => { ), ).toMatchInlineSnapshot(` " - @layer base { - body { - font-feature-settings: "tnum"; - } - } - + @layer base, utilities; @layer utilities { .underline { text-decoration-line: underline; } } + @layer base { + body { + font-feature-settings: "tnum"; + } + } " `) }) @@ -5223,29 +5295,29 @@ test('JS APIs support @variant', async () => { ), ).toMatchInlineSnapshot(` " - @layer base { - @media (prefers-color-scheme: dark) { - body { - color: red; - } - } - } - + @layer base, utilities; @layer utilities { .underline { text-decoration-line: underline; } - - @media (prefers-color-scheme: dark) { - .bar-one { + .bar-one { + @media (prefers-color-scheme: dark) { --bar: 1; } - - .foo { + } + .foo { + @media (prefers-color-scheme: dark) { --foo: foo; } } } + @layer base { + body { + @media (prefers-color-scheme: dark) { + color: red; + } + } + } " `) }) @@ -5318,9 +5390,11 @@ describe('`@reference "…" imports`', () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 768px) { - .bar:hover, .bar:focus { - color: red; + .bar { + @media (width >= 768px) { + &:hover, &:focus { + color: red; + } } } " @@ -5439,7 +5513,6 @@ describe('`@reference "…" imports`', () => { .bar { animation: var(--animate-spin, spin 1s linear infinite); } - @keyframes spin { to { transform: rotate(360deg); @@ -5515,12 +5588,10 @@ describe('`@reference "…" imports`', () => { animation: var(--animate-wiggle, wiggle 1s ease-in-out infinite); color: var(--color-red, red); } - @keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } - 50% { transform: rotate(3deg); } @@ -5562,9 +5633,11 @@ describe('`@reference "…" imports`', () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 768px) { - .bar:hover, .bar:focus { - color: red; + .bar { + @media (width >= 768px) { + &:hover, &:focus { + color: red; + } } } " @@ -5595,9 +5668,11 @@ describe('`@reference "…" imports`', () => { `), ).toMatchInlineSnapshot(` " - @media (min-width: 48rem) { - .bar:hover, .bar:focus { - color: red; + .bar { + @media (width >= 48rem) { + &:hover, &:focus { + color: red; + } } } " @@ -5617,9 +5692,11 @@ describe('@variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; - } + .hocus\\:underline { + &:hover, &:focus { + text-decoration-line: underline; + } + } " `) }) @@ -5643,8 +5720,13 @@ describe('@variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:underline:hover, .hocus\\:underline:focus { - text-decoration-line: underline; + .hocus\\:underline { + &:hover { + text-decoration-line: underline; + } + &:focus { + text-decoration-line: underline; + } } " `) @@ -5696,39 +5778,37 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: #000; + background: black; + @media (prefers-color-scheme: dark) { + background: white; + } } - - @media (prefers-color-scheme: dark) { - .btn { - background: #fff; + &:hover { + @media (hover: hover) { + @media (orientation: landscape) { + .btn2 { + color: red; + } + } } } - - @media (hover: hover) { - @media (orientation: landscape) { - :scope:hover .btn2 { + &:hover { + @media (hover: hover) { + .foo { color: red; } - } - - :scope:hover .foo { - color: red; - } - - @media (orientation: landscape) { - :scope:hover .bar { - color: #00f; + @media (orientation: landscape) { + .bar { + color: blue; + } } - } - - @media (orientation: portrait) { - :scope:hover .baz { - color: green; + .baz { + @media (orientation: portrait) { + color: green; + } } } } - @media something { @media (orientation: landscape) { @page { @@ -5756,11 +5836,10 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: #000; - } - - .btn:hover, .btn:focus { - background: #fff; + background: black; + &:hover, &:focus { + background: white; + } } " `) @@ -5786,15 +5865,19 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: #000; - } - - .btn:disabled:focus { - background: #fff; + background: black; + &:disabled { + &:focus { + background: white; + } + } } - - .disabled\\:focus\\:underline:disabled:focus { - text-decoration-line: underline; + .disabled\\:focus\\:underline { + &:disabled { + &:focus { + text-decoration-line: underline; + } + } } " `) @@ -5816,18 +5899,16 @@ describe('@variant', () => { expect(await compileCss(input)).toMatchInlineSnapshot(` " .btn { - background: #000; - } - - @media (hover: hover) { - .btn:hover { + background: black; + &:hover { + @media (hover: hover) { + background: red; + } + } + &:focus { background: red; } } - - .btn:focus { - background: red; - } " `) @@ -5872,18 +5953,16 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: #000; - } - - @media (hover: hover) { - .btn:hover { + background: black; + &:hover { + @media (hover: hover) { + background: red; + } + } + &:focus { background: red; } } - - .btn:focus { - background: red; - } " `) }, @@ -5904,11 +5983,13 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: #000; - } - - .btn:is(:hover, :focus), .btn:disabled { - background: red; + background: black; + &:is(:hover,:focus) { + background: red; + } + &:disabled { + background: red; + } } " `) @@ -5933,26 +6014,28 @@ describe('@variant', () => { expect(await compileCss(input)).toMatchInlineSnapshot(` " .btn { - background: #000; - } - - @media (hover: hover) { - .btn:hover { - background: red; + background: black; + &:hover { + @media (hover: hover) { + background: red; + &:active { + background: blue; + } + &:disabled { + background: blue; + } + } } - - .btn:hover:active, .btn:hover:disabled { - background: #00f; + &:focus { + background: red; + &:active { + background: blue; + } + &:disabled { + background: blue; + } } } - - .btn:focus { - background: red; - } - - .btn:focus:active, .btn:focus:disabled { - background: #00f; - } " `) @@ -6041,12 +6124,13 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: #000; - } - - @media (hover: hover) { - .btn:hover:focus { - background: red; + background: black; + &:hover { + @media (hover: hover) { + &:focus { + background: red; + } + } } } " @@ -6068,18 +6152,18 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: #000; - } - - @media (hover: hover) { - .btn:hover:focus { + background: black; + &:hover { + @media (hover: hover) { + &:focus { + background: red; + } + } + } + &:disabled { background: red; } } - - .btn:disabled { - background: red; - } " `) }) @@ -6099,16 +6183,18 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: #000; - } - - .btn:is(:hover, :focus):disabled { - background: red; - } - - @media (hover: hover) { - .btn[aria-disabled="true"]:hover { - background: red; + background: black; + &:is(:hover,:focus) { + &:disabled { + background: red; + } + } + &[aria-disabled="true"] { + &:hover { + @media (hover: hover) { + background: red; + } + } } } " @@ -6135,23 +6221,31 @@ describe('@variant', () => { expect(await compileCss(input)).toMatchInlineSnapshot(` " .btn { - background: #000; - } - - .btn[data-a] { - background: red; - } - - .btn[data-a][data-d], .btn[data-a][data-e][data-f] { - background: #00f; - } - - .btn[data-b][data-c] { - background: red; - } - - .btn[data-b][data-c][data-d], .btn[data-b][data-c][data-e][data-f] { - background: #00f; + background: black; + &[data-a] { + background: red; + &[data-d] { + background: blue; + } + &[data-e] { + &[data-f] { + background: blue; + } + } + } + &[data-b] { + &[data-c] { + background: red; + &[data-d] { + background: blue; + } + &[data-e] { + &[data-f] { + background: blue; + } + } + } + } } " `) @@ -6216,12 +6310,11 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: #000; - } - - @container (min-width: 768px) { - .btn.foo { - background: #fff; + background: black; + @container (width >= 768px) { + &.foo { + background: white; + } } } " @@ -6244,15 +6337,11 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% .237 25.331); + --color-red-500: oklch(63.7% 0.237 25.331); } - .text-red-500\\/50 { - color: #fb2c3680; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red-500\\/50 { + color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -6276,15 +6365,11 @@ describe('`color-mix(…)` polyfill', () => { " :root, :host { --color-red: var(--color-red-500); - --color-red-500: oklch(63.7% .237 25.331); + --color-red-500: oklch(63.7% 0.237 25.331); } - .text-red\\/50 { - color: #fb2c3680; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red\\/50 { + color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red) 50%, transparent); } } @@ -6307,16 +6392,12 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% .237 25.331); - --color-orange-500: oklch(70.5% .213 47.604); + --color-red-500: oklch(63.7% 0.237 25.331); + --color-orange-500: oklch(70.5% 0.213 47.604); } - .mixed { - color: #fc4d1b; - } - - @supports (color: color-mix(in lab, red, red)) { - .mixed { + color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, oklch(70.5% 0.213 47.604)); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in lch, var(--color-red-500) 50%, var(--color-orange-500)); } } @@ -6342,16 +6423,12 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% .237 25.331); + --color-red-500: oklch(63.7% 0.237 25.331); } - .stacked { - color: lch(55.5764% 89.7903 33.1932 / .25098); - } - - @supports (color: color-mix(in lab, red, red)) { - .stacked { - color: color-mix(in lch, color-mix(in lch, var(--color-red-500) 50%, transparent) 50%, transparent); + color: color-mix( in lch, color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent) 50%, transparent ); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix( in lch, color-mix(in lch, var(--color-red-500) 50%, transparent) 50%, transparent ); } } " @@ -6378,17 +6455,13 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% .237 25.331); - --color-orange-500: oklch(70.5% .213 47.604); + --color-red-500: oklch(63.7% 0.237 25.331); + --color-orange-500: oklch(70.5% 0.213 47.604); } - .gradient { - background: linear-gradient(90deg, #fb2c3680 0%, #fe6e0080 0%, 100%); - } - - @supports (color: color-mix(in lab, red, red)) { - .gradient { - background: linear-gradient(90deg, color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%, color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%, 100%); + background: linear-gradient( 90deg, color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent) 0%, color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent) 0%, 100% ); + @supports (color: color-mix(in lab, red, red)) { + background: linear-gradient( 90deg, color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%, color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%, 100% ); } } " @@ -6412,15 +6485,11 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% .237 25.331); + --color-red-500: oklch(63.7% 0.237 25.331); } - .text-red-500\\/50 { - color: #fb2c3680; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red-500\\/50 { + color: color-mix(in srgb,oklch(63.7% 0.237 25.331)50%,transparent); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab,var(--color-red-500)50%,transparent); } } @@ -6442,35 +6511,23 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% .237 25.331); + --color-red-500: oklch(63.7% 0.237 25.331); } - .text-\\(--my-color\\)\\/\\(--my-opacity\\) { color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-\\(--my-color\\)\\/\\(--my-opacity\\) { + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--my-color) var(--my-opacity), transparent); } } - .text-\\(--my-color\\)\\/50 { color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-\\(--my-color\\)\\/50 { + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .text-red-500\\/\\(--my-opacity\\) { - color: oklch(63.7% .237 25.331); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red-500\\/\\(--my-opacity\\) { + color: oklch(63.7% 0.237 25.331); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-500) var(--my-opacity), transparent); } } @@ -6482,11 +6539,8 @@ describe('`color-mix(…)` polyfill', () => { expect(await run(['text-current/50'])).toMatchInlineSnapshot(` " .text-current\\/50 { - color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-current\\/50 { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -6509,14 +6563,10 @@ describe('`color-mix(…)` polyfill', () => { " .text-red\\/50 { color: var(--color-red); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red\\/50 { + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red) 50%, transparent); } } - :root, :host { --color-red: var(--my-red); } @@ -6541,11 +6591,8 @@ describe('`color-mix(…)` polyfill', () => { " .stacked { color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .stacked { - color: color-mix(in oklab, color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent) var(--my-outer-opacity), transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix( in oklab, color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent) var(--my-outer-opacity), transparent ); } } " @@ -6566,7 +6613,7 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " .text-red-500\\/50 { - color: oklab(63.7% .214 .101 / .5); + color: color-mix(in oklab, oklch(63.7% 0.237 25.331) 50%, transparent); } " `) @@ -6588,15 +6635,11 @@ describe('`color-mix(…)` polyfill', () => { " :root, :host { --my-half: 50%; - --color-red-500: oklch(63.7% .237 25.331); + --color-red-500: oklch(63.7% 0.237 25.331); } - .text-red-500\\/\\(--my-half\\) { - color: #fb2c3680; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red-500\\/\\(--my-half\\) { + color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-500) var(--my-half), transparent); } } @@ -6621,134 +6664,111 @@ describe('`color-mix(…)` polyfill', () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } - + @layer properties; @layer theme { :root, :host { --color-red-500: red; --opacity-disabled: 50%; } } - .text-red-500 { color: var(--color-red-500); } - .opacity-disabled { opacity: var(--opacity-disabled); } - .shadow-xl { - --tw-shadow: 0 6px 18px 4px var(--tw-shadow-color, #ff000040); - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-xl { + --tw-shadow: 0 6px 18px 4px var(--tw-shadow-color, color-mix(in srgb, red 25%, transparent)); + @supports (color: color-mix(in lab, red, red)) { --tw-shadow: 0 6px 18px 4px var(--tw-shadow-color, color-mix(in oklab, var(--color-red-500) 25%, transparent)); } - } - - .shadow-xl { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-ring-inset { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0; + initial-value: 0px; } - @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } - @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } " `) }) @@ -6768,8 +6788,8 @@ describe('`color-mix(…)` polyfill', () => { ), ).toMatchInlineSnapshot(` " - @supports (color: color-mix(in lab, red, red)) { - .mixed { + .mixed { + @supports (color: color-mix(in lab, red, red)) { background: color-mix(in oklab, var(--color-1), var(--color-2) 0%); } } @@ -6805,41 +6825,37 @@ describe('`@property` polyfill', async () => { `), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - :root, :host { - --inherit-no-value: initial; - --inherit-value: red; - } - - *, :before, :after, ::backdrop { - --no-inherit-no-value: initial; - --no-inherit-value: red; - } - } - } - + @layer properties; @property --no-inherit-no-value { - syntax: "*"; - inherits: false + syntax: '*'; + inherits: false; } - @property --no-inherit-value { - syntax: "*"; + syntax: '*'; inherits: false; initial-value: red; } - @property --inherit-no-value { - syntax: "*"; - inherits: true + syntax: '*'; + inherits: true; } - @property --inherit-value { - syntax: "*"; + syntax: '*'; inherits: true; initial-value: red; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + :root, :host { + --inherit-no-value: initial; + --inherit-value: red; + } + *, ::before, ::after, ::backdrop { + --no-inherit-no-value: initial; + --no-inherit-value: red; + } + } + } " `) }) @@ -6876,23 +6892,20 @@ describe('`@property` polyfill', async () => { ).toMatchInlineSnapshot(` " @property --no-inherit-no-value { - syntax: "*"; - inherits: false + syntax: '*'; + inherits: false; } - @property --no-inherit-value { - syntax: "*"; + syntax: '*'; inherits: false; initial-value: red; } - @property --inherit-no-value { - syntax: "*"; - inherits: true + syntax: '*'; + inherits: true; } - @property --inherit-value { - syntax: "*"; + syntax: '*'; inherits: true; initial-value: red; } diff --git a/packages/tailwindcss/src/prefix.test.ts b/packages/tailwindcss/src/prefix.test.ts index 799cb22fe27b..0436d73f5746 100644 --- a/packages/tailwindcss/src/prefix.test.ts +++ b/packages/tailwindcss/src/prefix.test.ts @@ -32,18 +32,28 @@ test('utilities must be prefixed', async () => { .tw\\:custom { color: red; } - .tw\\:underline { text-decoration-line: underline; } - - @media (hover: hover) { - .tw\\:group-hover\\:flex:is(:where(.tw\\:group):hover *), .tw\\:peer-hover\\:flex:is(:where(.tw\\:peer):hover ~ *) { - display: flex; + .tw\\:group-hover\\:flex { + &:is(:where(.tw\\:group):hover *) { + @media (hover: hover) { + display: flex; + } } - - .tw\\:hover\\:line-through:hover { - text-decoration-line: line-through; + } + .tw\\:peer-hover\\:flex { + &:is(:where(.tw\\:peer):hover ~ *) { + @media (hover: hover) { + display: flex; + } + } + } + .tw\\:hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through; + } } } " @@ -103,9 +113,8 @@ test('CSS variables output by the theme are prefixed', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --tw-color-red: red; + --tw-color-red: #f00; } - .tw\\:text-red { color: var(--tw-color-red); } @@ -129,8 +138,11 @@ test('CSS theme functions do not use the prefix', async () => { ), ).toMatchInlineSnapshot(` " - .tw\\:\\[color\\:theme\\(--color-red\\)\\], .tw\\:text-\\[theme\\(--color-red\\)\\] { - color: red; + .tw\\:\\[color\\:theme\\(--color-red\\)\\] { + color: #f00; + } + .tw\\:text-\\[theme\\(--color-red\\)\\] { + color: #f00; } " `) @@ -188,7 +200,7 @@ test('JS theme functions do not use the prefix', async () => { ).toMatchInlineSnapshot(` " .tw\\:my-custom { - color: red; + color: #f00; } " `) @@ -230,18 +242,17 @@ test('a prefix can be configured via @import theme(…)', async () => { .tw\\:bg-potato { background-color: var(--tw-color-potato, #7a4724); } - .tw\\:custom { color: red; } - .tw\\:underline { text-decoration-line: underline; } - - @media (hover: hover) { - .tw\\:hover\\:line-through:hover { - text-decoration-line: line-through; + .tw\\:hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through; + } } } " @@ -286,22 +297,20 @@ test('a prefix can be configured via @import prefix(…)', async () => { :root, :host { --tw-color-potato: #7a4724; } - .tw\\:bg-potato { background-color: var(--tw-color-potato); } - .tw\\:custom { color: red; } - .tw\\:underline { text-decoration-line: underline; } - - @media (hover: hover) { - .tw\\:hover\\:line-through:hover { - text-decoration-line: line-through; + .tw\\:hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through; + } } } " diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index 7667ca66fa2c..8d75b28fa5a8 100644 --- a/packages/tailwindcss/src/test-utils/run.ts +++ b/packages/tailwindcss/src/test-utils/run.ts @@ -1,5 +1,4 @@ import { compile } from '..' -import { optimize } from '../../../@tailwindcss-node/src/optimize' const css = String.raw @@ -11,7 +10,7 @@ export async function run( options: Parameters[1] = {}, ) { let { build } = await compile(input, options) - return pretty(optimize(build(candidates)).code) + return pretty(build(candidates)) } export async function compileCss(css: string, options: Parameters[1] = {}) { diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index cefcf7d03b92..c78ffbfbb22b 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -9,15 +9,15 @@ test('sr-only', async () => { expect(await run(['sr-only'])).toMatchInlineSnapshot(` " .sr-only { - clip-path: inset(50%); - white-space: nowrap; - border-width: 0; + position: absolute; width: 1px; height: 1px; - margin: -1px; padding: 0; - position: absolute; + margin: -1px; overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + border-width: 0; } " `) @@ -28,14 +28,14 @@ test('not-sr-only', async () => { expect(await run(['not-sr-only'])).toMatchInlineSnapshot(` " .not-sr-only { - clip-path: none; - white-space: normal; + position: static; width: auto; height: auto; - margin: 0; padding: 0; - position: static; + margin: 0; overflow: visible; + clip-path: none; + white-space: normal; } " `) @@ -48,7 +48,6 @@ test('pointer-events', async () => { .pointer-events-auto { pointer-events: auto; } - .pointer-events-none { pointer-events: none; } @@ -70,11 +69,9 @@ test('visibility', async () => { .collapse { visibility: collapse; } - .invisible { visibility: hidden; } - .visible { visibility: visible; } @@ -98,19 +95,15 @@ test('position', async () => { .absolute { position: absolute; } - .fixed { position: fixed; } - .relative { position: relative; } - .static { position: static; } - .sticky { position: sticky; } @@ -157,147 +150,124 @@ test('inset', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } - + @layer properties; :root, :host { --spacing-4: 1rem; --inset-shadowned: 1940px; } - .-inset-4 { inset: calc(var(--spacing-4) * -1); } - .-inset-full { inset: -100%; } - .inset-3\\/4 { - inset: 75%; + inset: calc(3 / 4 * 100%); } - .inset-4 { inset: var(--spacing-4); } - .inset-\\[4px\\] { inset: 4px; } - .inset-auto { inset: auto; } - .inset-full { inset: 100%; } - .inset-shadowned { inset: var(--inset-shadowned); } - .inset-shadow-sm { - --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, #0000000d); + --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-ring-inset { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0; + initial-value: 0px; } - @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } - @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } " `) expect( @@ -345,35 +315,27 @@ test('inset-x', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } - .-inset-x-4 { inset-inline: calc(var(--spacing-4) * -1); } - .-inset-x-full { inset-inline: -100%; } - .inset-x-3\\/4 { - inset-inline: 75%; + inset-inline: calc(3 / 4 * 100%); } - .inset-x-4 { inset-inline: var(--spacing-4); } - .inset-x-\\[4px\\] { inset-inline: 4px; } - .inset-x-auto { inset-inline: auto; } - .inset-x-full { inset-inline: 100%; } - .inset-x-shadowned { inset-inline: var(--inset-shadowned); } @@ -434,35 +396,27 @@ test('inset-y', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } - .-inset-y-4 { inset-block: calc(var(--spacing-4) * -1); } - .-inset-y-full { inset-block: -100%; } - .inset-y-3\\/4 { - inset-block: 75%; + inset-block: calc(3 / 4 * 100%); } - .inset-y-4 { inset-block: var(--spacing-4); } - .inset-y-\\[4px\\] { inset-block: 4px; } - .inset-y-auto { inset-block: auto; } - .inset-y-full { inset-block: 100%; } - .inset-y-shadowned { inset-block: var(--inset-shadowned); } @@ -523,35 +477,27 @@ test('inset-s', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } - .-inset-s-4 { inset-inline-start: calc(var(--spacing-4) * -1); } - .-inset-s-full { inset-inline-start: -100%; } - .inset-s-3\\/4 { - inset-inline-start: 75%; + inset-inline-start: calc(3 / 4 * 100%); } - .inset-s-4 { inset-inline-start: var(--spacing-4); } - .inset-s-\\[4px\\] { inset-inline-start: 4px; } - .inset-s-auto { inset-inline-start: auto; } - .inset-s-full { inset-inline-start: 100%; } - .inset-s-shadowned { inset-inline-start: var(--inset-shadowned); } @@ -612,35 +558,27 @@ test('inset-e', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } - .-inset-e-4 { inset-inline-end: calc(var(--spacing-4) * -1); } - .-inset-e-full { inset-inline-end: -100%; } - .inset-e-3\\/4 { - inset-inline-end: 75%; + inset-inline-end: calc(3 / 4 * 100%); } - .inset-e-4 { inset-inline-end: var(--spacing-4); } - .inset-e-\\[4px\\] { inset-inline-end: 4px; } - .inset-e-auto { inset-inline-end: auto; } - .inset-e-full { inset-inline-end: 100%; } - .inset-e-shadowned { inset-inline-end: var(--inset-shadowned); } @@ -701,35 +639,27 @@ test('inset-bs', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } - .-inset-bs-4 { inset-block-start: calc(var(--spacing-4) * -1); } - .-inset-bs-full { inset-block-start: -100%; } - .inset-bs-3\\/4 { - inset-block-start: 75%; + inset-block-start: calc(3 / 4 * 100%); } - .inset-bs-4 { inset-block-start: var(--spacing-4); } - .inset-bs-\\[4px\\] { inset-block-start: 4px; } - .inset-bs-auto { inset-block-start: auto; } - .inset-bs-full { inset-block-start: 100%; } - .inset-bs-shadowned { inset-block-start: var(--inset-shadowned); } @@ -790,35 +720,27 @@ test('inset-be', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } - .-inset-be-4 { inset-block-end: calc(var(--spacing-4) * -1); } - .-inset-be-full { inset-block-end: -100%; } - .inset-be-3\\/4 { - inset-block-end: 75%; + inset-block-end: calc(3 / 4 * 100%); } - .inset-be-4 { inset-block-end: var(--spacing-4); } - .inset-be-\\[4px\\] { inset-block-end: 4px; } - .inset-be-auto { inset-block-end: auto; } - .inset-be-full { inset-block-end: 100%; } - .inset-be-shadowned { inset-block-end: var(--inset-shadowned); } @@ -879,35 +801,27 @@ test('top', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } - .-top-4 { top: calc(var(--spacing-4) * -1); } - .-top-full { top: -100%; } - .top-3\\/4 { - top: 75%; + top: calc(3 / 4 * 100%); } - .top-4 { top: var(--spacing-4); } - .top-\\[4px\\] { top: 4px; } - .top-auto { top: auto; } - .top-full { top: 100%; } - .top-shadowned { top: var(--inset-shadowned); } @@ -968,35 +882,27 @@ test('right', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } - .-right-4 { right: calc(var(--spacing-4) * -1); } - .-right-full { right: -100%; } - .right-3\\/4 { - right: 75%; + right: calc(3 / 4 * 100%); } - .right-4 { right: var(--spacing-4); } - .right-\\[4px\\] { right: 4px; } - .right-auto { right: auto; } - .right-full { right: 100%; } - .right-shadowned { right: var(--inset-shadowned); } @@ -1057,35 +963,27 @@ test('bottom', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } - .-bottom-4 { bottom: calc(var(--spacing-4) * -1); } - .-bottom-full { bottom: -100%; } - .bottom-3\\/4 { - bottom: 75%; + bottom: calc(3 / 4 * 100%); } - .bottom-4 { bottom: var(--spacing-4); } - .bottom-\\[4px\\] { bottom: 4px; } - .bottom-auto { bottom: auto; } - .bottom-full { bottom: 100%; } - .bottom-shadowned { bottom: var(--inset-shadowned); } @@ -1149,39 +1047,30 @@ test('left', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } - .-left-4 { left: calc(var(--spacing-4) * -1); } - .-left-\\[\\(var\\(--my-var1\\)\\+var\\(--my-var2\\)\\)\\] { left: calc((var(--my-var1) + var(--my-var2)) * -1); } - .-left-full { left: -100%; } - .left-3\\/4 { - left: 75%; + left: calc(3 / 4 * 100%); } - .left-4 { left: var(--spacing-4); } - .left-\\[4px\\] { left: 4px; } - .left-auto { left: auto; } - .left-full { left: 100%; } - .left-shadowned { left: var(--inset-shadowned); } @@ -1221,7 +1110,6 @@ test('isolation', async () => { .isolate { isolation: isolate; } - .isolation-auto { isolation: auto; } @@ -1239,19 +1127,15 @@ test('z-index', async () => { .-z-10 { z-index: calc(10 * -1); } - .-z-\\[var\\(--value\\)\\] { z-index: calc(var(--value) * -1); } - .z-10 { z-index: 10; } - .z-\\[123\\] { z-index: 123; } - .z-auto { z-index: auto; } @@ -1287,7 +1171,6 @@ test('z-index', async () => { :root, :host { --z-index-auto: 42; } - .z-auto { z-index: var(--z-index-auto); } @@ -1311,27 +1194,21 @@ test('order', async () => { .-order-4 { order: calc(4 * -1); } - .-order-\\[var\\(--value\\)\\] { order: calc(var(--value) * -1); } - .order-4 { order: 4; } - .order-\\[123\\] { order: 123; } - .order-first { order: -9999; } - .order-last { order: 9999; } - .order-none { order: 0; } @@ -1371,7 +1248,6 @@ test('order', async () => { :root, :host { --order-first: 1; } - .order-first { order: var(--order-first); } @@ -1393,7 +1269,6 @@ test('order', async () => { :root, :host { --order-last: -1; } - .order-last { order: var(--order-last); } @@ -1418,31 +1293,24 @@ test('col', async () => { .-col-12 { grid-column: calc(12 * -1); } - .col-11 { grid-column: 11; } - .col-\\[span_123\\/span_123\\] { - grid-column: span 123 / span 123; + grid-column: span 123/span 123; } - .col-auto { grid-column: auto; } - .col-span-4 { grid-column: span 4 / span 4; } - .col-span-17 { grid-column: span 17 / span 17; } - .col-span-\\[var\\(--my-variable\\)\\] { grid-column: span var(--my-variable) / span var(--my-variable); } - .col-span-full { grid-column: 1 / -1; } @@ -1479,7 +1347,6 @@ test('col', async () => { :root, :host { --grid-column-auto: 5; } - .col-auto { grid-column: var(--grid-column-auto); } @@ -1510,27 +1377,21 @@ test('col-start', async () => { :root, :host { --grid-column-start-custom: 1 column-start; } - .-col-start-4 { grid-column-start: calc(4 * -1); } - .col-start-4 { grid-column-start: 4; } - .col-start-99 { grid-column-start: 99; } - .col-start-\\[123\\] { grid-column-start: 123; } - .col-start-auto { grid-column-start: auto; } - .col-start-custom { grid-column-start: var(--grid-column-start-custom); } @@ -1564,7 +1425,6 @@ test('col-start', async () => { :root, :host { --grid-column-start-auto: 7; } - .col-start-auto { grid-column-start: var(--grid-column-start-auto); } @@ -1588,27 +1448,21 @@ test('col-end', async () => { :root, :host { --grid-column-end-custom: 1 column-end; } - .-col-end-4 { grid-column-end: calc(4 * -1); } - .col-end-4 { grid-column-end: 4; } - .col-end-99 { grid-column-end: 99; } - .col-end-\\[123\\] { grid-column-end: 123; } - .col-end-auto { grid-column-end: auto; } - .col-end-custom { grid-column-end: var(--grid-column-end-custom); } @@ -1642,7 +1496,6 @@ test('col-end', async () => { :root, :host { --grid-column-end-auto: 3; } - .col-end-auto { grid-column-end: var(--grid-column-end-auto); } @@ -1667,31 +1520,24 @@ test('row', async () => { .-row-12 { grid-row: calc(12 * -1); } - .row-11 { grid-row: 11; } - .row-\\[span_123\\/span_123\\] { - grid-row: span 123 / span 123; + grid-row: span 123/span 123; } - .row-auto { grid-row: auto; } - .row-span-4 { grid-row: span 4 / span 4; } - .row-span-17 { grid-row: span 17 / span 17; } - .row-span-\\[var\\(--my-variable\\)\\] { grid-row: span var(--my-variable) / span var(--my-variable); } - .row-span-full { grid-row: 1 / -1; } @@ -1735,7 +1581,6 @@ test('row', async () => { :root, :host { --grid-row-auto: 9; } - .row-auto { grid-row: var(--grid-row-auto); } @@ -1766,27 +1611,21 @@ test('row-start', async () => { :root, :host { --grid-row-start-custom: 1 row-start; } - .-row-start-4 { grid-row-start: calc(4 * -1); } - .row-start-4 { grid-row-start: 4; } - .row-start-99 { grid-row-start: 99; } - .row-start-\\[123\\] { grid-row-start: 123; } - .row-start-auto { grid-row-start: auto; } - .row-start-custom { grid-row-start: var(--grid-row-start-custom); } @@ -1820,7 +1659,6 @@ test('row-start', async () => { :root, :host { --grid-row-start-auto: 11; } - .row-start-auto { grid-row-start: var(--grid-row-start-auto); } @@ -1844,27 +1682,21 @@ test('row-end', async () => { :root, :host { --grid-row-end-custom: 1 row-end; } - .-row-end-4 { grid-row-end: calc(4 * -1); } - .row-end-4 { grid-row-end: 4; } - .row-end-99 { grid-row-end: 99; } - .row-end-\\[123\\] { grid-row-end: 123; } - .row-end-auto { grid-row-end: auto; } - .row-end-custom { grid-row-end: var(--grid-row-end-custom); } @@ -1898,7 +1730,6 @@ test('row-end', async () => { :root, :host { --grid-row-end-auto: 13; } - .row-end-auto { grid-row-end: var(--grid-row-end-auto); } @@ -1913,19 +1744,15 @@ test('float', async () => { .float-end { float: inline-end; } - .float-left { float: left; } - .float-none { float: none; } - .float-right { float: right; } - .float-start { float: inline-start; } @@ -1963,23 +1790,18 @@ test('clear', async () => { .clear-both { clear: both; } - .clear-end { clear: inline-end; } - .clear-left { clear: left; } - .clear-none { clear: none; } - .clear-right { clear: right; } - .clear-start { clear: inline-start; } @@ -2020,23 +1842,18 @@ test('margin', async () => { :root, :host { --spacing-4: 1rem; } - .-m-4 { margin: calc(var(--spacing-4) * -1); } - .-m-\\[var\\(--value\\)\\] { margin: calc(var(--value) * -1); } - .m-4 { margin: var(--spacing-4); } - .m-\\[4px\\] { margin: 4px; } - .m-auto { margin: auto; } @@ -2074,50 +1891,39 @@ test('mx', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .-mx-4 { margin-inline: calc(var(--spacing) * -4); } - .-mx-\\[4px\\] { - margin-inline: -4px; + margin-inline: calc(4px * -1); } - .-mx-\\[var\\(--my-var\\)\\] { margin-inline: calc(var(--my-var) * -1); } - .-mx-big { margin-inline: calc(var(--spacing-big) * -1); } - .mx-1 { margin-inline: calc(var(--spacing) * 1); } - .mx-4 { margin-inline: calc(var(--spacing) * 4); } - .mx-99 { margin-inline: calc(var(--spacing) * 99); } - .mx-\\[4px\\] { margin-inline: 4px; } - .mx-\\[var\\(--my-var\\)\\] { margin-inline: var(--my-var); } - .mx-auto { margin-inline: auto; } - .mx-big { margin-inline: var(--spacing-big); } @@ -2162,50 +1968,39 @@ test('my', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .-my-2\\.5 { margin-block: calc(var(--spacing) * -2.5); } - .-my-4 { margin-block: calc(var(--spacing) * -4); } - .-my-\\[4px\\] { - margin-block: -4px; + margin-block: calc(4px * -1); } - .-my-\\[var\\(--my-var\\)\\] { margin-block: calc(var(--my-var) * -1); } - .-my-big { margin-block: calc(var(--spacing-big) * -1); } - .my-1 { margin-block: calc(var(--spacing) * 1); } - .my-2\\.5 { margin-block: calc(var(--spacing) * 2.5); } - .my-99 { margin-block: calc(var(--spacing) * 99); } - .my-\\[4px\\] { margin-block: 4px; } - .my-\\[var\\(--my-var\\)\\] { margin-block: var(--my-var); } - .my-big { margin-block: var(--spacing-big); } @@ -2250,50 +2045,39 @@ test('mt', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .-mt-2\\.5 { margin-top: calc(var(--spacing) * -2.5); } - .-mt-4 { margin-top: calc(var(--spacing) * -4); } - .-mt-\\[4px\\] { - margin-top: -4px; + margin-top: calc(4px * -1); } - .-mt-\\[var\\(--my-var\\)\\] { margin-top: calc(var(--my-var) * -1); } - .-mt-big { margin-top: calc(var(--spacing-big) * -1); } - .mt-1 { margin-top: calc(var(--spacing) * 1); } - .mt-2\\.5 { margin-top: calc(var(--spacing) * 2.5); } - .mt-99 { margin-top: calc(var(--spacing) * 99); } - .mt-\\[4px\\] { margin-top: 4px; } - .mt-\\[var\\(--my-var\\)\\] { margin-top: var(--my-var); } - .mt-big { margin-top: var(--spacing-big); } @@ -2338,50 +2122,39 @@ test('ms', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .-ms-2\\.5 { margin-inline-start: calc(var(--spacing) * -2.5); } - .-ms-4 { margin-inline-start: calc(var(--spacing) * -4); } - .-ms-\\[4px\\] { - margin-inline-start: -4px; + margin-inline-start: calc(4px * -1); } - .-ms-\\[var\\(--my-var\\)\\] { margin-inline-start: calc(var(--my-var) * -1); } - .-ms-big { margin-inline-start: calc(var(--spacing-big) * -1); } - .ms-1 { margin-inline-start: calc(var(--spacing) * 1); } - .ms-2\\.5 { margin-inline-start: calc(var(--spacing) * 2.5); } - .ms-99 { margin-inline-start: calc(var(--spacing) * 99); } - .ms-\\[4px\\] { margin-inline-start: 4px; } - .ms-\\[var\\(--my-var\\)\\] { margin-inline-start: var(--my-var); } - .ms-big { margin-inline-start: var(--spacing-big); } @@ -2426,50 +2199,39 @@ test('me', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .-me-2\\.5 { margin-inline-end: calc(var(--spacing) * -2.5); } - .-me-4 { margin-inline-end: calc(var(--spacing) * -4); } - .-me-\\[4px\\] { - margin-inline-end: -4px; + margin-inline-end: calc(4px * -1); } - .-me-\\[var\\(--my-var\\)\\] { margin-inline-end: calc(var(--my-var) * -1); } - .-me-big { margin-inline-end: calc(var(--spacing-big) * -1); } - .me-1 { margin-inline-end: calc(var(--spacing) * 1); } - .me-2\\.5 { margin-inline-end: calc(var(--spacing) * 2.5); } - .me-99 { margin-inline-end: calc(var(--spacing) * 99); } - .me-\\[4px\\] { margin-inline-end: 4px; } - .me-\\[var\\(--my-var\\)\\] { margin-inline-end: var(--my-var); } - .me-big { margin-inline-end: var(--spacing-big); } @@ -2514,50 +2276,39 @@ test('mbs', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .-mbs-2\\.5 { margin-block-start: calc(var(--spacing) * -2.5); } - .-mbs-4 { margin-block-start: calc(var(--spacing) * -4); } - .-mbs-\\[4px\\] { - margin-block-start: -4px; + margin-block-start: calc(4px * -1); } - .-mbs-\\[var\\(--my-var\\)\\] { margin-block-start: calc(var(--my-var) * -1); } - .-mbs-big { margin-block-start: calc(var(--spacing-big) * -1); } - .mbs-1 { margin-block-start: calc(var(--spacing) * 1); } - .mbs-2\\.5 { margin-block-start: calc(var(--spacing) * 2.5); } - .mbs-99 { margin-block-start: calc(var(--spacing) * 99); } - .mbs-\\[4px\\] { margin-block-start: 4px; } - .mbs-\\[var\\(--my-var\\)\\] { margin-block-start: var(--my-var); } - .mbs-big { margin-block-start: var(--spacing-big); } @@ -2602,50 +2353,39 @@ test('mbe', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .-mbe-2\\.5 { margin-block-end: calc(var(--spacing) * -2.5); } - .-mbe-4 { margin-block-end: calc(var(--spacing) * -4); } - .-mbe-\\[4px\\] { - margin-block-end: -4px; + margin-block-end: calc(4px * -1); } - .-mbe-\\[var\\(--my-var\\)\\] { margin-block-end: calc(var(--my-var) * -1); } - .-mbe-big { margin-block-end: calc(var(--spacing-big) * -1); } - .mbe-1 { margin-block-end: calc(var(--spacing) * 1); } - .mbe-2\\.5 { margin-block-end: calc(var(--spacing) * 2.5); } - .mbe-99 { margin-block-end: calc(var(--spacing) * 99); } - .mbe-\\[4px\\] { margin-block-end: 4px; } - .mbe-\\[var\\(--my-var\\)\\] { margin-block-end: var(--my-var); } - .mbe-big { margin-block-end: var(--spacing-big); } @@ -2690,50 +2430,39 @@ test('mr', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .-mr-2\\.5 { margin-right: calc(var(--spacing) * -2.5); } - .-mr-4 { margin-right: calc(var(--spacing) * -4); } - .-mr-\\[4px\\] { - margin-right: -4px; + margin-right: calc(4px * -1); } - .-mr-\\[var\\(--my-var\\)\\] { margin-right: calc(var(--my-var) * -1); } - .-mr-big { margin-right: calc(var(--spacing-big) * -1); } - .mr-1 { margin-right: calc(var(--spacing) * 1); } - .mr-2\\.5 { margin-right: calc(var(--spacing) * 2.5); } - .mr-99 { margin-right: calc(var(--spacing) * 99); } - .mr-\\[4px\\] { margin-right: 4px; } - .mr-\\[var\\(--my-var\\)\\] { margin-right: var(--my-var); } - .mr-big { margin-right: var(--spacing-big); } @@ -2778,50 +2507,39 @@ test('mb', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .-mb-2\\.5 { margin-bottom: calc(var(--spacing) * -2.5); } - .-mb-4 { margin-bottom: calc(var(--spacing) * -4); } - .-mb-\\[4px\\] { - margin-bottom: -4px; + margin-bottom: calc(4px * -1); } - .-mb-\\[var\\(--my-var\\)\\] { margin-bottom: calc(var(--my-var) * -1); } - .-mb-big { margin-bottom: calc(var(--spacing-big) * -1); } - .mb-1 { margin-bottom: calc(var(--spacing) * 1); } - .mb-2\\.5 { margin-bottom: calc(var(--spacing) * 2.5); } - .mb-99 { margin-bottom: calc(var(--spacing) * 99); } - .mb-\\[4px\\] { margin-bottom: 4px; } - .mb-\\[var\\(--my-var\\)\\] { margin-bottom: var(--my-var); } - .mb-big { margin-bottom: var(--spacing-big); } @@ -2866,50 +2584,39 @@ test('ml', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .-ml-2\\.5 { margin-left: calc(var(--spacing) * -2.5); } - .-ml-4 { margin-left: calc(var(--spacing) * -4); } - .-ml-\\[4px\\] { - margin-left: -4px; + margin-left: calc(4px * -1); } - .-ml-\\[var\\(--my-var\\)\\] { margin-left: calc(var(--my-var) * -1); } - .-ml-big { margin-left: calc(var(--spacing-big) * -1); } - .ml-1 { margin-left: calc(var(--spacing) * 1); } - .ml-2\\.5 { margin-left: calc(var(--spacing) * 2.5); } - .ml-99 { margin-left: calc(var(--spacing) * 99); } - .ml-\\[4px\\] { margin-left: 4px; } - .ml-\\[var\\(--my-var\\)\\] { margin-left: var(--my-var); } - .ml-big { margin-left: var(--spacing-big); } @@ -2943,39 +2650,30 @@ test('margin sort order', async () => { :root, :host { --spacing-4: 1rem; } - .m-4 { margin: var(--spacing-4); } - .mx-4 { margin-inline: var(--spacing-4); } - .my-4 { margin-block: var(--spacing-4); } - .ms-4 { margin-inline-start: var(--spacing-4); } - .me-4 { margin-inline-end: var(--spacing-4); } - .mt-4 { margin-top: var(--spacing-4); } - .mr-4 { margin-right: var(--spacing-4); } - .mb-4 { margin-bottom: var(--spacing-4); } - .ml-4 { margin-left: var(--spacing-4); } @@ -3003,7 +2701,6 @@ test('box-sizing', async () => { .box-border { box-sizing: border-box; } - .box-content { box-sizing: content-box; } @@ -3019,31 +2716,28 @@ test('line-clamp', async () => { .toMatchInlineSnapshot(` " .line-clamp-4 { - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; - display: -webkit-box; overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; } - .line-clamp-99 { - -webkit-line-clamp: 99; - -webkit-box-orient: vertical; - display: -webkit-box; overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 99; } - .line-clamp-\\[123\\] { - -webkit-line-clamp: 123; - -webkit-box-orient: vertical; - display: -webkit-box; overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 123; } - .line-clamp-none { - -webkit-line-clamp: unset; - -webkit-box-orient: horizontal; - display: block; overflow: visible; + display: block; + -webkit-box-orient: horizontal; + -webkit-line-clamp: unset; } " `) @@ -3078,12 +2772,11 @@ test('line-clamp', async () => { :root, :host { --line-clamp-none: 0; } - .line-clamp-none { - -webkit-line-clamp: var(--line-clamp-none); - -webkit-box-orient: vertical; - display: -webkit-box; overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: var(--line-clamp-none); } " `) @@ -3119,83 +2812,63 @@ test('display', async () => { .block { display: block; } - .contents { display: contents; } - .flex { display: flex; } - .flow-root { display: flow-root; } - .grid { display: grid; } - .hidden { display: none; } - .inline { display: inline; } - .inline-block { display: inline-block; } - .inline-flex { display: inline-flex; } - .inline-grid { display: inline-grid; } - .inline-table { display: inline-table; } - .list-item { display: list-item; } - .table { display: table; } - .table-caption { display: table-caption; } - .table-cell { display: table-cell; } - .table-column { display: table-column; } - .table-column-group { display: table-column-group; } - .table-footer-group { display: table-footer-group; } - .table-header-group { display: table-header-group; } - .table-row { display: table-row; } - .table-row-group { display: table-row-group; } @@ -3255,7 +2928,6 @@ test('field-sizing', async () => { .field-sizing-content { field-sizing: content; } - .field-sizing-fixed { field-sizing: fixed; } @@ -3282,19 +2954,15 @@ test('aspect-ratio', async () => { :root, :host { --aspect-video: 16 / 9; } - .aspect-4\\/3 { - aspect-ratio: 4 / 3; + aspect-ratio: 4/3; } - .aspect-8\\.5\\/11 { - aspect-ratio: 8.5 / 11; + aspect-ratio: 8.5/11; } - .aspect-\\[10\\/9\\] { - aspect-ratio: 10 / 9; + aspect-ratio: 10/9; } - .aspect-video { aspect-ratio: var(--aspect-video); } @@ -3343,42 +3011,34 @@ test('size', async () => { :root, :host { --spacing-4: 1rem; } - .size-1\\/2 { - width: 50%; - height: 50%; + width: calc(1 / 2 * 100%); + height: calc(1 / 2 * 100%); } - .size-4 { width: var(--spacing-4); height: var(--spacing-4); } - .size-\\[4px\\] { width: 4px; height: 4px; } - .size-auto { width: auto; height: auto; } - .size-fit { width: fit-content; height: fit-content; } - .size-full { width: 100%; height: 100%; } - .size-max { width: max-content; height: max-content; } - .size-min { width: min-content; height: min-content; @@ -3439,55 +3099,42 @@ test('width', async () => { --spacing-4: 1rem; --width-xl: 36rem; } - .w-1\\/2 { - width: 50%; + width: calc(1 / 2 * 100%); } - .w-4 { width: var(--spacing-4); } - .w-\\[4px\\] { width: 4px; } - .w-auto { width: auto; } - .w-dvw { width: 100dvw; } - .w-fit { width: fit-content; } - .w-full { width: 100%; } - .w-lvw { width: 100lvw; } - .w-max { width: max-content; } - .w-min { width: min-content; } - .w-screen { width: 100vw; } - .w-svw { width: 100svw; } - .w-xl { width: var(--width-xl); } @@ -3547,35 +3194,27 @@ test('min-width', async () => { --spacing-4: 1rem; --container-xl: 36rem; } - .min-w-4 { min-width: var(--spacing-4); } - .min-w-\\[4px\\] { min-width: 4px; } - .min-w-auto { min-width: auto; } - .min-w-fit { min-width: fit-content; } - .min-w-full { min-width: 100%; } - .min-w-max { min-width: max-content; } - .min-w-min { min-width: min-content; } - .min-w-xl { min-width: var(--container-xl); } @@ -3616,31 +3255,24 @@ test('max-width', async () => { --spacing-4: 1rem; --container-xl: 36rem; } - .max-w-4 { max-width: var(--spacing-4); } - .max-w-\\[4px\\] { max-width: 4px; } - .max-w-fit { max-width: fit-content; } - .max-w-full { max-width: 100%; } - .max-w-max { max-width: max-content; } - .max-w-none { max-width: none; } - .max-w-xl { max-width: var(--container-xl); } @@ -3694,55 +3326,42 @@ test('height', async () => { :root, :host { --spacing-4: 1rem; } - .h-1\\/2 { - height: 50%; + height: calc(1 / 2 * 100%); } - .h-4 { height: var(--spacing-4); } - .h-\\[4px\\] { height: 4px; } - .h-auto { height: auto; } - .h-dvh { height: 100dvh; } - .h-fit { height: fit-content; } - .h-full { height: 100%; } - .h-lh { height: 1lh; } - .h-lvh { height: 100lvh; } - .h-max { height: max-content; } - .h-min { height: min-content; } - .h-screen { height: 100vh; } - .h-svh { height: 100svh; } @@ -3804,51 +3423,39 @@ test('min-height', async () => { :root, :host { --spacing-4: 1rem; } - .min-h-4 { min-height: var(--spacing-4); } - .min-h-\\[4px\\] { min-height: 4px; } - .min-h-auto { min-height: auto; } - .min-h-dvh { min-height: 100dvh; } - .min-h-fit { min-height: fit-content; } - .min-h-full { min-height: 100%; } - .min-h-lh { min-height: 1lh; } - .min-h-lvh { min-height: 100lvh; } - .min-h-max { min-height: max-content; } - .min-h-min { min-height: min-content; } - .min-h-screen { min-height: 100vh; } - .min-h-svh { min-height: 100svh; } @@ -3904,51 +3511,39 @@ test('max-height', async () => { :root, :host { --spacing-4: 1rem; } - .max-h-4 { max-height: var(--spacing-4); } - .max-h-\\[4px\\] { max-height: 4px; } - .max-h-dvh { max-height: 100dvh; } - .max-h-fit { max-height: fit-content; } - .max-h-full { max-height: 100%; } - .max-h-lh { max-height: 1lh; } - .max-h-lvh { max-height: 100lvh; } - .max-h-max { max-height: max-content; } - .max-h-min { max-height: min-content; } - .max-h-none { max-height: none; } - .max-h-screen { max-height: 100vh; } - .max-h-svh { max-height: 100svh; } @@ -4008,55 +3603,42 @@ test('inline-size', async () => { --spacing-4: 1rem; --container-xl: 36rem; } - .inline-1\\/2 { - inline-size: 50%; + inline-size: calc(1 / 2 * 100%); } - .inline-4 { inline-size: var(--spacing-4); } - .inline-\\[4px\\] { inline-size: 4px; } - .inline-auto { inline-size: auto; } - .inline-dvw { inline-size: 100dvw; } - .inline-fit { inline-size: fit-content; } - .inline-full { inline-size: 100%; } - .inline-lvw { inline-size: 100lvw; } - .inline-max { inline-size: max-content; } - .inline-min { inline-size: min-content; } - .inline-screen { inline-size: 100vw; } - .inline-svw { inline-size: 100svw; } - .inline-xl { inline-size: var(--container-xl); } @@ -4115,35 +3697,27 @@ test('min-inline-size', async () => { --spacing-4: 1rem; --container-xl: 36rem; } - .min-inline-4 { min-inline-size: var(--spacing-4); } - .min-inline-\\[4px\\] { min-inline-size: 4px; } - .min-inline-auto { min-inline-size: auto; } - .min-inline-fit { min-inline-size: fit-content; } - .min-inline-full { min-inline-size: 100%; } - .min-inline-max { min-inline-size: max-content; } - .min-inline-min { min-inline-size: min-content; } - .min-inline-xl { min-inline-size: var(--container-xl); } @@ -4192,31 +3766,24 @@ test('max-inline-size', async () => { --spacing-4: 1rem; --container-xl: 36rem; } - .max-inline-4 { max-inline-size: var(--spacing-4); } - .max-inline-\\[4px\\] { max-inline-size: 4px; } - .max-inline-fit { max-inline-size: fit-content; } - .max-inline-full { max-inline-size: 100%; } - .max-inline-max { max-inline-size: max-content; } - .max-inline-none { max-inline-size: none; } - .max-inline-xl { max-inline-size: var(--container-xl); } @@ -4270,55 +3837,42 @@ test('block-size', async () => { :root, :host { --spacing-4: 1rem; } - .block-1\\/2 { - block-size: 50%; + block-size: calc(1 / 2 * 100%); } - .block-4 { block-size: var(--spacing-4); } - .block-\\[4px\\] { block-size: 4px; } - .block-auto { block-size: auto; } - .block-dvh { block-size: 100dvh; } - .block-fit { block-size: fit-content; } - .block-full { block-size: 100%; } - .block-lh { block-size: 1lh; } - .block-lvh { block-size: 100lvh; } - .block-max { block-size: max-content; } - .block-min { block-size: min-content; } - .block-screen { block-size: 100vh; } - .block-svh { block-size: 100svh; } @@ -4379,51 +3933,39 @@ test('min-block-size', async () => { :root, :host { --spacing-4: 1rem; } - .min-block-4 { min-block-size: var(--spacing-4); } - .min-block-\\[4px\\] { min-block-size: 4px; } - .min-block-auto { min-block-size: auto; } - .min-block-dvh { min-block-size: 100dvh; } - .min-block-fit { min-block-size: fit-content; } - .min-block-full { min-block-size: 100%; } - .min-block-lh { min-block-size: 1lh; } - .min-block-lvh { min-block-size: 100lvh; } - .min-block-max { min-block-size: max-content; } - .min-block-min { min-block-size: min-content; } - .min-block-screen { min-block-size: 100vh; } - .min-block-svh { min-block-size: 100svh; } @@ -4479,51 +4021,39 @@ test('max-block-size', async () => { :root, :host { --spacing-4: 1rem; } - .max-block-4 { max-block-size: var(--spacing-4); } - .max-block-\\[4px\\] { max-block-size: 4px; } - .max-block-dvh { max-block-size: 100dvh; } - .max-block-fit { max-block-size: fit-content; } - .max-block-full { max-block-size: 100%; } - .max-block-lh { max-block-size: 1lh; } - .max-block-lvh { max-block-size: 100lvh; } - .max-block-max { max-block-size: max-content; } - .max-block-min { max-block-size: min-content; } - .max-block-none { max-block-size: none; } - .max-block-screen { max-block-size: 100vh; } - .max-block-svh { max-block-size: 100svh; } @@ -4572,45 +4102,27 @@ describe('container', () => { :root, :host { --breakpoint-sm: 40rem; } - .container { width: 100%; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: 40rem; } - } - - @media (min-width: 48rem) { - .container { + @media (width >= 48rem) { max-width: 48rem; } - } - - @media (min-width: 64rem) { - .container { + @media (width >= 64rem) { max-width: 64rem; } - } - - @media (min-width: 80rem) { - .container { + @media (width >= 80rem) { max-width: 80rem; } - } - - @media (min-width: 96rem) { - .container { + @media (width >= 96rem) { max-width: 96rem; } } - .w-1\\/2 { - width: 50%; + width: calc(1 / 2 * 100%); } - .max-w-\\[var\\(--breakpoint-sm\\)\\] { max-width: var(--breakpoint-sm); } @@ -4639,46 +4151,25 @@ describe('container', () => { " .container { width: 100%; - } - - @media (min-width: 40em) { - .container { + @media (width >= 40em) { max-width: 40em; } - } - - @media (min-width: 48em) { - .container { + @media (width >= 48em) { max-width: 48em; } - } - - @media (min-width: 30px) { - .container { + @media (width >= 30px) { max-width: 30px; } - } - - @media (min-width: 1600px) { - .container { + @media (width >= 1600px) { max-width: 1600px; } - } - - @media (min-width: 64rem) { - .container { + @media (width >= 64rem) { max-width: 64rem; } - } - - @media (min-width: 80rem) { - .container { + @media (width >= 80rem) { max-width: 80rem; } - } - - @media (min-width: 96rem) { - .container { + @media (width >= 96rem) { max-width: 96rem; } } @@ -4715,56 +4206,34 @@ describe('container', () => { :root, :host { --breakpoint-sm: 40rem; } - .container { width: 100%; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { max-width: 40rem; } - } - - @media (min-width: 48rem) { - .container { + @media (width >= 48rem) { max-width: 48rem; } - } - - @media (min-width: 64rem) { - .container { + @media (width >= 64rem) { max-width: 64rem; } - } - - @media (min-width: 80rem) { - .container { + @media (width >= 80rem) { max-width: 80rem; } - } - - @media (min-width: 96rem) { - .container { + @media (width >= 96rem) { max-width: 96rem; } } - .container { margin-inline: auto; padding-inline: 1rem; - } - - @media (min-width: 40rem) { - .container { + @media (width >= 40rem) { padding-inline: 2rem; } } - .w-1\\/2 { - width: 50%; + width: calc(1 / 2 * 100%); } - .max-w-\\[var\\(--breakpoint-sm\\)\\] { max-width: var(--breakpoint-sm); } @@ -4789,27 +4258,21 @@ test('flex', async () => { .flex-1 { flex: 1; } - .flex-1\\/2 { - flex: 50%; + flex: calc(1/2 * 100%); } - .flex-99 { flex: 99; } - .flex-\\[123\\] { flex: 123; } - .flex-auto { flex: auto; } - .flex-initial { flex: 0 auto; } - .flex-none { flex: none; } @@ -4844,11 +4307,9 @@ test('flex-shrink', async () => { .shrink { flex-shrink: 1; } - .shrink-0 { flex-shrink: 0; } - .shrink-\\[123\\] { flex-shrink: 123; } @@ -4875,11 +4336,9 @@ test('flex-grow', async () => { .grow { flex-grow: 1; } - .grow-0 { flex-grow: 0; } - .grow-\\[123\\] { flex-grow: 123; } @@ -4916,23 +4375,18 @@ test('flex-basis', async () => { :root, :host { --container-xl: 36rem; } - .basis-11\\/12 { - flex-basis: 91.6667%; + flex-basis: calc(11 / 12 * 100%); } - .basis-\\[123px\\] { flex-basis: 123px; } - .basis-auto { flex-basis: auto; } - .basis-full { flex-basis: 100%; } - .basis-xl { flex-basis: var(--container-xl); } @@ -4962,7 +4416,6 @@ test('table-layout', async () => { .table-auto { table-layout: auto; } - .table-fixed { table-layout: fixed; } @@ -4979,7 +4432,6 @@ test('caption-side', async () => { .caption-bottom { caption-side: bottom; } - .caption-top { caption-side: top; } @@ -4996,7 +4448,6 @@ test('border-collapse', async () => { .border-collapse { border-collapse: collapse; } - .border-separate { border-collapse: separate; } @@ -5025,42 +4476,38 @@ test('border-spacing', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - } - } - } - + @layer properties; :root, :host { - --spacing-1: .25rem; + --spacing-1: 0.25rem; } - .border-spacing-1 { --tw-border-spacing-x: var(--spacing-1); --tw-border-spacing-y: var(--spacing-1); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } - .border-spacing-\\[123px\\] { --tw-border-spacing-x: 123px; --tw-border-spacing-y: 123px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } - @property --tw-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } - @property --tw-border-spacing-y { syntax: ""; inherits: false; initial-value: 0; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + } + } + } " `) expect( @@ -5087,40 +4534,36 @@ test('border-spacing-x', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - } - } - } - + @layer properties; :root, :host { - --spacing-1: .25rem; + --spacing-1: 0.25rem; } - .border-spacing-x-1 { --tw-border-spacing-x: var(--spacing-1); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } - .border-spacing-x-\\[123px\\] { --tw-border-spacing-x: 123px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } - @property --tw-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } - @property --tw-border-spacing-y { syntax: ""; inherits: false; initial-value: 0; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + } + } + } " `) expect( @@ -5147,40 +4590,36 @@ test('border-spacing-y', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - } - } - } - + @layer properties; :root, :host { - --spacing-1: .25rem; + --spacing-1: 0.25rem; } - .border-spacing-y-1 { --tw-border-spacing-y: var(--spacing-1); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } - .border-spacing-y-\\[123px\\] { --tw-border-spacing-y: 123px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } - @property --tw-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } - @property --tw-border-spacing-y { syntax: ""; inherits: false; initial-value: 0; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + } + } + } " `) expect( @@ -5214,43 +4653,33 @@ test('origin', async () => { .origin-\\[50px_100px\\] { transform-origin: 50px 100px; } - .origin-\\[var\\(--value\\)\\] { transform-origin: var(--value); } - .origin-bottom { transform-origin: bottom; } - .origin-bottom-left { transform-origin: 0 100%; } - .origin-bottom-right { transform-origin: 100% 100%; } - .origin-center { transform-origin: center; } - .origin-left { transform-origin: 0; } - .origin-right { transform-origin: 100%; } - .origin-top { transform-origin: top; } - .origin-top-left { transform-origin: 0 0; } - .origin-top-right { transform-origin: 100% 0; } @@ -5289,7 +4718,6 @@ test('origin', async () => { :root, :host { --transform-origin-top: 10px 20px; } - .origin-top { transform-origin: var(--transform-origin-top); } @@ -5317,43 +4745,33 @@ test('perspective-origin', async () => { .perspective-origin-\\[50px_100px\\] { perspective-origin: 50px 100px; } - .perspective-origin-\\[var\\(--value\\)\\] { perspective-origin: var(--value); } - .perspective-origin-bottom { perspective-origin: bottom; } - .perspective-origin-bottom-left { perspective-origin: 0 100%; } - .perspective-origin-bottom-right { perspective-origin: 100% 100%; } - .perspective-origin-center { perspective-origin: center; } - .perspective-origin-left { perspective-origin: 0; } - .perspective-origin-right { perspective-origin: 100%; } - .perspective-origin-top { perspective-origin: top; } - .perspective-origin-top-left { perspective-origin: 0 0; } - .perspective-origin-top-right { perspective-origin: 100% 0; } @@ -5392,9 +4810,10 @@ test('perspective-origin', async () => { :root, :host { --perspective-origin-top: 10px 20px; } - .perspective-origin-top { perspective-origin: var(--perspective-origin-top); + } + .perspective-origin-top { perspective: var(--perspective-origin-top); } " @@ -5412,63 +4831,56 @@ test('translate', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } - + @layer properties; .-translate-\\[var\\(--value\\)\\] { --tw-translate-x: calc(var(--value) * -1); --tw-translate-y: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .-translate-full { --tw-translate-x: -100%; --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-1\\/2 { --tw-translate-x: calc(1 / 2 * 100%); --tw-translate-y: calc(1 / 2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-\\[123px\\] { --tw-translate-x: 123px; --tw-translate-y: 123px; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-full { --tw-translate-x: 100%; --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } - @property --tw-translate-x { 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; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } " `) expect( @@ -5497,53 +4909,47 @@ test('translate-x', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } - + @layer properties; .-translate-x-\\[var\\(--value\\)\\] { --tw-translate-x: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-x-full { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-x-px { --tw-translate-x: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); } - @property --tw-translate-x { 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; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } " `) expect( @@ -5572,57 +4978,51 @@ test('translate-x', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } - + @layer properties; .-translate-x-\\[var\\(--value\\)\\] { --tw-translate-x: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-x-full { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-x-px { --tw-translate-x: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); } - @property --tw-translate-x { 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; } - " - `) - expect( - await run([ + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + " + `) + expect( + await run([ 'perspective', '-perspective', 'perspective-potato', @@ -5645,53 +5045,47 @@ test('translate-y', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } - + @layer properties; .-translate-y-\\[var\\(--value\\)\\] { --tw-translate-y: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .-translate-y-full { --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-y-full { --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-y-px { --tw-translate-y: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); } - @property --tw-translate-x { 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; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } " `) expect( @@ -5720,53 +5114,47 @@ test('translate-y', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } - + @layer properties; .-translate-y-\\[var\\(--value\\)\\] { --tw-translate-y: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .-translate-y-full { --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-y-full { --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-y-px { --tw-translate-y: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); } - @property --tw-translate-x { 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; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } " `) expect( @@ -5787,48 +5175,43 @@ test('translate-z', async () => { expect(await run(['-translate-z-px', 'translate-z-px', '-translate-z-[var(--value)]'])) .toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } - + @layer properties; .-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); } - @property --tw-translate-x { 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; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } " `) expect( @@ -5850,37 +5233,34 @@ test('translate-z', async () => { test('translate-3d', async () => { expect(await run(['translate-3d'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } - + @layer properties; .translate-3d { 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-y { syntax: "*"; inherits: false; initial-value: 0; } - @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } " `) expect(await run(['-translate-3d', 'translate-3d/foo'])).toEqual('') @@ -5902,27 +5282,21 @@ test('rotate', async () => { .-rotate-\\(--var\\) { rotate: calc(var(--var) * -1); } - .-rotate-45 { - rotate: -45deg; + rotate: calc(45deg * -1); } - .-rotate-\\[123deg\\] { - rotate: -123deg; + rotate: calc(123deg * -1); } - .rotate-\\(--var\\) { rotate: var(--var); } - .rotate-45 { rotate: 45deg; } - .rotate-\\[0\\.3_0\\.7_1_45deg\\] { - rotate: .3 .7 1 45deg; + rotate: 0.3 0.7 1 45deg; } - .rotate-\\[123deg\\] { rotate: 123deg; } @@ -5953,66 +5327,57 @@ test('rotate-x', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } - } - + @layer properties; .-rotate-x-\\(--var\\) { --tw-rotate-x: rotateX(calc(var(--var) * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .-rotate-x-45 { --tw-rotate-x: rotateX(calc(45deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .rotate-x-\\(--var\\) { --tw-rotate-x: rotateX(var(--var)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .rotate-x-45 { --tw-rotate-x: rotateX(45deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .rotate-x-\\[123deg\\] { --tw-rotate-x: rotateX(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - @property --tw-rotate-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-y { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-z { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-y { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } } " `) @@ -6041,71 +5406,61 @@ test('rotate-y', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } - } - + @layer properties; .-rotate-y-\\(--var\\) { --tw-rotate-y: rotateY(calc(var(--var) * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .-rotate-y-45 { --tw-rotate-y: rotateY(calc(45deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .-rotate-y-\\[123deg\\] { --tw-rotate-y: rotateY(calc(123deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .rotate-y-\\(--var\\) { --tw-rotate-y: rotateY(var(--var)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .rotate-y-45 { --tw-rotate-y: rotateY(45deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .rotate-y-\\[123deg\\] { --tw-rotate-y: rotateY(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - @property --tw-rotate-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-y { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-z { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-y { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } } " `) @@ -6134,71 +5489,61 @@ test('rotate-z', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } - } - + @layer properties; .-rotate-z-\\(--var\\) { --tw-rotate-z: rotateZ(calc(var(--var) * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .-rotate-z-45 { --tw-rotate-z: rotateZ(calc(45deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .-rotate-z-\\[123deg\\] { --tw-rotate-z: rotateZ(calc(123deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .rotate-z-\\(--var\\) { --tw-rotate-z: rotateZ(var(--var)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .rotate-z-45 { --tw-rotate-z: rotateZ(45deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .rotate-z-\\[123deg\\] { --tw-rotate-z: rotateZ(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - @property --tw-rotate-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-y { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-z { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-y { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } } " `) @@ -6218,59 +5563,52 @@ test('rotate-z', async () => { test('skew', async () => { expect(await run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } - } - + @layer properties; .-skew-6 { --tw-skew-x: skewX(calc(6deg * -1)); --tw-skew-y: skewY(calc(6deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .skew-6 { --tw-skew-x: skewX(6deg); --tw-skew-y: skewY(6deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .skew-\\[123deg\\] { --tw-skew-x: skewX(123deg); --tw-skew-y: skewY(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - @property --tw-rotate-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-y { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-z { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-y { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } } " `) @@ -6289,62 +5627,55 @@ test('skew', async () => { test('skew-x', async () => { expect(await run(['skew-x-6', '-skew-x-6', 'skew-x-[123deg]'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } - } - + @layer properties; .-skew-x-6 { --tw-skew-x: skewX(calc(6deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .skew-x-6 { --tw-skew-x: skewX(6deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .skew-x-\\[123deg\\] { --tw-skew-x: skewX(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - @property --tw-rotate-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-y { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-z { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-y { syntax: "*"; - inherits: false + inherits: false; } - " - `) - expect( - await run([ - 'skew-x', + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } + } + " + `) + expect( + await run([ + 'skew-x', 'skew-x--1', 'skew-x-unknown', 'skew-x-6/foo', @@ -6357,56 +5688,49 @@ test('skew-x', async () => { test('skew-y', async () => { expect(await run(['skew-y-6', '-skew-y-6', 'skew-y-[123deg]'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } - } - + @layer properties; .-skew-y-6 { --tw-skew-y: skewY(calc(6deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .skew-y-6 { --tw-skew-y: skewY(6deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .skew-y-\\[123deg\\] { --tw-skew-y: skewY(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - @property --tw-rotate-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-y { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-z { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-y { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } } " `) @@ -6426,55 +5750,49 @@ test('scale', async () => { expect(await run(['scale-50', '-scale-50', 'scale-[2]', 'scale-[2_1.5_3]'])) .toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - } - } - } - + @layer properties; .-scale-50 { --tw-scale-x: calc(50% * -1); --tw-scale-y: calc(50% * -1); --tw-scale-z: calc(50% * -1); scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-50 { --tw-scale-x: 50%; --tw-scale-y: 50%; --tw-scale-z: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-\\[2\\] { scale: 2; } - .scale-\\[2_1\\.5_3\\] { scale: 2 1.5 3; } - @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } " `) expect( @@ -6494,130 +5812,118 @@ test('scale', async () => { test('scale-3d', async () => { expect(await run(['scale-3d'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - } - } - } - + @layer properties; .scale-3d { scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } - @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } - " - `) - expect(await run(['-scale-3d', 'scale-3d/foo'])).toEqual('') -}) - -test('scale-x', async () => { - expect(await run(['scale-x-50', '-scale-x-50', 'scale-x-[2]'])).toMatchInlineSnapshot(` - " @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; } } } + " + `) + expect(await run(['-scale-3d', 'scale-3d/foo'])).toEqual('') +}) +test('scale-x', async () => { + expect(await run(['scale-x-50', '-scale-x-50', 'scale-x-[2]'])).toMatchInlineSnapshot(` + " + @layer properties; .-scale-x-50 { --tw-scale-x: calc(50% * -1); scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-x-50 { --tw-scale-x: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-x-\\[2\\] { --tw-scale-x: 2; scale: var(--tw-scale-x) var(--tw-scale-y); } - @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } - " - `) - expect(await run(['scale-200', 'scale-x-400'])).toMatchInlineSnapshot(` - " @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; } } } - + " + `) + expect(await run(['scale-200', 'scale-x-400'])).toMatchInlineSnapshot(` + " + @layer properties; .scale-200 { --tw-scale-x: 200%; --tw-scale-y: 200%; --tw-scale-z: 200%; scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-x-400 { --tw-scale-x: 400%; scale: var(--tw-scale-x) var(--tw-scale-y); } - @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } " `) expect( @@ -6638,48 +5944,43 @@ test('scale-x', async () => { test('scale-y', async () => { expect(await run(['scale-y-50', '-scale-y-50', 'scale-y-[2]'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - } - } - } - + @layer properties; .-scale-y-50 { --tw-scale-y: calc(50% * -1); scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-y-50 { --tw-scale-y: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-y-\\[2\\] { --tw-scale-y: 2; scale: var(--tw-scale-x) var(--tw-scale-y); } - @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } " `) expect( @@ -6698,48 +5999,43 @@ test('scale-y', async () => { test('scale-z', async () => { expect(await run(['scale-z-50', '-scale-z-50', 'scale-z-[123deg]'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - } - } - } - + @layer properties; .-scale-z-50 { --tw-scale-z: calc(50% * -1); scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } - .scale-z-50 { --tw-scale-z: 50%; scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } - .scale-z-\\[123deg\\] { --tw-scale-z: 123deg; scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } - @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } - @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } " `) expect( @@ -6765,61 +6061,52 @@ test('transform', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } - } - + @layer properties; .transform { - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .transform-\\[scaleZ\\(2\\)_rotateY\\(45deg\\)\\] { transform: scaleZ(2) rotateY(45deg); } - .transform-cpu { - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .transform-gpu { - transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .transform-none { transform: none; } - @property --tw-rotate-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-y { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-rotate-z { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-skew-y { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } } " `) @@ -6840,35 +6127,27 @@ test('transform', async () => { .backface-hidden { backface-visibility: hidden; } - .backface-visible { backface-visibility: visible; } - .transform-3d { transform-style: preserve-3d; } - .transform-border { transform-box: border-box; } - .transform-content { transform-box: content-box; } - .transform-fill { transform-box: fill-box; } - .transform-flat { transform-style: flat; } - .transform-stroke { transform-box: stroke-box; } - .transform-view { transform-box: view-box; } @@ -6904,11 +6183,9 @@ test('zoom', async () => { .zoom-50 { zoom: 50%; } - .zoom-100 { zoom: 100%; } - .zoom-\\[var\\(--zoom\\)\\] { zoom: var(--zoom); } @@ -6937,19 +6214,15 @@ test('perspective', async () => { --perspective-dramatic: 100px; --perspective-normal: 500px; } - .perspective-\\[456px\\] { perspective: 456px; } - .perspective-dramatic { perspective: var(--perspective-dramatic); } - .perspective-none { perspective: none; } - .perspective-normal { perspective: var(--perspective-normal); } @@ -6983,7 +6256,6 @@ test('perspective', async () => { :root, :host { --perspective-none: 400px; } - .perspective-none { perspective: var(--perspective-none); } @@ -7044,157 +6316,119 @@ test('cursor', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --cursor-custom: url("/my-cursor.png"); + --cursor-custom: url(/my-cursor.png); } - .cursor-\\[var\\(--value\\)\\] { cursor: var(--value); } - .cursor-alias { cursor: alias; } - .cursor-all-scroll { cursor: all-scroll; } - .cursor-auto { cursor: auto; } - .cursor-cell { cursor: cell; } - .cursor-col-resize { cursor: col-resize; } - .cursor-context-menu { cursor: context-menu; } - .cursor-copy { cursor: copy; } - .cursor-crosshair { cursor: crosshair; } - .cursor-custom { cursor: var(--cursor-custom); } - .cursor-default { cursor: default; } - .cursor-e-resize { cursor: e-resize; } - .cursor-ew-resize { cursor: ew-resize; } - .cursor-grab { cursor: grab; } - .cursor-grabbing { cursor: grabbing; } - .cursor-help { cursor: help; } - .cursor-move { cursor: move; } - .cursor-n-resize { cursor: n-resize; } - .cursor-ne-resize { cursor: ne-resize; } - .cursor-nesw-resize { cursor: nesw-resize; } - .cursor-no-drop { cursor: no-drop; } - .cursor-none { cursor: none; } - .cursor-not-allowed { cursor: not-allowed; } - .cursor-ns-resize { cursor: ns-resize; } - .cursor-nw-resize { cursor: nw-resize; } - .cursor-nwse-resize { cursor: nwse-resize; } - .cursor-pointer { cursor: pointer; } - .cursor-progress { cursor: progress; } - .cursor-row-resize { cursor: row-resize; } - .cursor-s-resize { cursor: s-resize; } - .cursor-se-resize { cursor: se-resize; } - .cursor-sw-resize { cursor: sw-resize; } - .cursor-text { cursor: text; } - .cursor-vertical-text { cursor: vertical-text; } - .cursor-w-resize { cursor: w-resize; } - .cursor-wait { cursor: wait; } - .cursor-zoom-in { cursor: zoom-in; } - .cursor-zoom-out { cursor: zoom-out; } @@ -7289,11 +6523,9 @@ test('touch-action', async () => { .touch-auto { touch-action: auto; } - .touch-manipulation { touch-action: manipulation; } - .touch-none { touch-action: none; } @@ -7323,59 +6555,51 @@ test('touch-pan', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-pan-x: initial; - --tw-pan-y: initial; - --tw-pinch-zoom: initial; - } - } - } - + @layer properties; .touch-pan-left { --tw-pan-x: pan-left; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); } - .touch-pan-right { --tw-pan-x: pan-right; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); } - .touch-pan-x { --tw-pan-x: pan-x; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); } - .touch-pan-down { --tw-pan-y: pan-down; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); } - .touch-pan-up { --tw-pan-y: pan-up; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); } - .touch-pan-y { --tw-pan-y: pan-y; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); } - @property --tw-pan-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-pan-y { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-pinch-zoom { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-pan-x: initial; + --tw-pan-y: initial; + --tw-pinch-zoom: initial; + } + } } " `) @@ -7400,34 +6624,31 @@ test('touch-pan', async () => { test('touch-pinch-zoom', async () => { expect(await run(['touch-pinch-zoom'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-pan-x: initial; - --tw-pan-y: initial; - --tw-pinch-zoom: initial; - } - } - } - + @layer properties; .touch-pinch-zoom { --tw-pinch-zoom: pinch-zoom; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); } - @property --tw-pan-x { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-pan-y { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-pinch-zoom { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-pan-x: initial; + --tw-pan-y: initial; + --tw-pinch-zoom: initial; + } + } } " `) @@ -7442,17 +6663,14 @@ test('select', async () => { -webkit-user-select: all; user-select: all; } - .select-auto { -webkit-user-select: auto; user-select: auto; } - .select-none { -webkit-user-select: none; user-select: none; } - .select-text { -webkit-user-select: text; user-select: text; @@ -7479,15 +6697,12 @@ test('resize', async () => { .resize { resize: both; } - .resize-none { resize: none; } - .resize-x { resize: horizontal; } - .resize-y { resize: vertical; } @@ -7510,35 +6725,31 @@ test('resize', async () => { test('scroll-snap-type', async () => { expect(await run(['snap-none', 'snap-x', 'snap-y', 'snap-both'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-scroll-snap-strictness: proximity; - } - } - } - + @layer properties; .snap-both { scroll-snap-type: both var(--tw-scroll-snap-strictness); } - .snap-none { scroll-snap-type: none; } - .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } - .snap-y { scroll-snap-type: y var(--tw-scroll-snap-strictness); } - @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-scroll-snap-strictness: proximity; + } + } + } " `) expect( @@ -7558,27 +6769,25 @@ test('scroll-snap-type', async () => { test('--tw-scroll-snap-strictness', async () => { expect(await run(['snap-mandatory', 'snap-proximity'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-scroll-snap-strictness: proximity; - } - } - } - + @layer properties; .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } - .snap-proximity { --tw-scroll-snap-strictness: proximity; } - @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-scroll-snap-strictness: proximity; + } + } + } " `) expect( @@ -7593,15 +6802,12 @@ test('scroll-snap-align', async () => { .snap-align-none { scroll-snap-align: none; } - .snap-center { scroll-snap-align: center; } - .snap-end { scroll-snap-align: end; } - .snap-start { scroll-snap-align: start; } @@ -7627,7 +6833,6 @@ test('scroll-snap-stop', async () => { .snap-always { scroll-snap-stop: always; } - .snap-normal { scroll-snap-stop: normal; } @@ -7654,19 +6859,15 @@ test('scroll-m', async () => { :root, :host { --spacing-4: 1rem; } - .-scroll-m-4 { scroll-margin: calc(var(--spacing-4) * -1); } - .-scroll-m-\\[var\\(--value\\)\\] { scroll-margin: calc(var(--value) * -1); } - .scroll-m-4 { scroll-margin: var(--spacing-4); } - .scroll-m-\\[4px\\] { scroll-margin: 4px; } @@ -7699,19 +6900,15 @@ test('scroll-mx', async () => { :root, :host { --spacing-4: 1rem; } - .-scroll-mx-4 { scroll-margin-inline: calc(var(--spacing-4) * -1); } - .-scroll-mx-\\[var\\(--value\\)\\] { scroll-margin-inline: calc(var(--value) * -1); } - .scroll-mx-4 { scroll-margin-inline: var(--spacing-4); } - .scroll-mx-\\[4px\\] { scroll-margin-inline: 4px; } @@ -7744,19 +6941,15 @@ test('scroll-my', async () => { :root, :host { --spacing-4: 1rem; } - .-scroll-my-4 { scroll-margin-block: calc(var(--spacing-4) * -1); } - .-scroll-my-\\[var\\(--value\\)\\] { scroll-margin-block: calc(var(--value) * -1); } - .scroll-my-4 { scroll-margin-block: var(--spacing-4); } - .scroll-my-\\[4px\\] { scroll-margin-block: 4px; } @@ -7789,19 +6982,15 @@ test('scroll-ms', async () => { :root, :host { --spacing-4: 1rem; } - .-scroll-ms-4 { scroll-margin-inline-start: calc(var(--spacing-4) * -1); } - .-scroll-ms-\\[var\\(--value\\)\\] { scroll-margin-inline-start: calc(var(--value) * -1); } - .scroll-ms-4 { scroll-margin-inline-start: var(--spacing-4); } - .scroll-ms-\\[4px\\] { scroll-margin-inline-start: 4px; } @@ -7834,19 +7023,15 @@ test('scroll-me', async () => { :root, :host { --spacing-4: 1rem; } - .-scroll-me-4 { scroll-margin-inline-end: calc(var(--spacing-4) * -1); } - .-scroll-me-\\[var\\(--value\\)\\] { scroll-margin-inline-end: calc(var(--value) * -1); } - .scroll-me-4 { scroll-margin-inline-end: var(--spacing-4); } - .scroll-me-\\[4px\\] { scroll-margin-inline-end: 4px; } @@ -7879,19 +7064,15 @@ test('scroll-mbs', async () => { :root, :host { --spacing-4: 1rem; } - .-scroll-mbs-4 { scroll-margin-block-start: calc(var(--spacing-4) * -1); } - .-scroll-mbs-\\[var\\(--value\\)\\] { scroll-margin-block-start: calc(var(--value) * -1); } - .scroll-mbs-4 { scroll-margin-block-start: var(--spacing-4); } - .scroll-mbs-\\[4px\\] { scroll-margin-block-start: 4px; } @@ -7924,19 +7105,15 @@ test('scroll-mbe', async () => { :root, :host { --spacing-4: 1rem; } - .-scroll-mbe-4 { scroll-margin-block-end: calc(var(--spacing-4) * -1); } - .-scroll-mbe-\\[var\\(--value\\)\\] { scroll-margin-block-end: calc(var(--value) * -1); } - .scroll-mbe-4 { scroll-margin-block-end: var(--spacing-4); } - .scroll-mbe-\\[4px\\] { scroll-margin-block-end: 4px; } @@ -7969,19 +7146,15 @@ test('scroll-mt', async () => { :root, :host { --spacing-4: 1rem; } - .-scroll-mt-4 { scroll-margin-top: calc(var(--spacing-4) * -1); } - .-scroll-mt-\\[var\\(--value\\)\\] { scroll-margin-top: calc(var(--value) * -1); } - .scroll-mt-4 { scroll-margin-top: var(--spacing-4); } - .scroll-mt-\\[4px\\] { scroll-margin-top: 4px; } @@ -8014,19 +7187,15 @@ test('scroll-mr', async () => { :root, :host { --spacing-4: 1rem; } - .-scroll-mr-4 { scroll-margin-right: calc(var(--spacing-4) * -1); } - .-scroll-mr-\\[var\\(--value\\)\\] { scroll-margin-right: calc(var(--value) * -1); } - .scroll-mr-4 { scroll-margin-right: var(--spacing-4); } - .scroll-mr-\\[4px\\] { scroll-margin-right: 4px; } @@ -8059,19 +7228,15 @@ test('scroll-mb', async () => { :root, :host { --spacing-4: 1rem; } - .-scroll-mb-4 { scroll-margin-bottom: calc(var(--spacing-4) * -1); } - .-scroll-mb-\\[var\\(--value\\)\\] { scroll-margin-bottom: calc(var(--value) * -1); } - .scroll-mb-4 { scroll-margin-bottom: var(--spacing-4); } - .scroll-mb-\\[4px\\] { scroll-margin-bottom: 4px; } @@ -8104,19 +7269,15 @@ test('scroll-ml', async () => { :root, :host { --spacing-4: 1rem; } - .-scroll-ml-4 { scroll-margin-left: calc(var(--spacing-4) * -1); } - .-scroll-ml-\\[var\\(--value\\)\\] { scroll-margin-left: calc(var(--value) * -1); } - .scroll-ml-4 { scroll-margin-left: var(--spacing-4); } - .scroll-ml-\\[4px\\] { scroll-margin-left: 4px; } @@ -8149,11 +7310,9 @@ test('scroll-p', async () => { :root, :host { --spacing-4: 1rem; } - .scroll-p-4 { scroll-padding: var(--spacing-4); } - .scroll-p-\\[4px\\] { scroll-padding: 4px; } @@ -8186,11 +7345,9 @@ test('scroll-px', async () => { :root, :host { --spacing-4: 1rem; } - .scroll-px-4 { scroll-padding-inline: var(--spacing-4); } - .scroll-px-\\[4px\\] { scroll-padding-inline: 4px; } @@ -8223,11 +7380,9 @@ test('scroll-py', async () => { :root, :host { --spacing-4: 1rem; } - .scroll-py-4 { scroll-padding-block: var(--spacing-4); } - .scroll-py-\\[4px\\] { scroll-padding-block: 4px; } @@ -8260,11 +7415,9 @@ test('scroll-ps', async () => { :root, :host { --spacing-4: 1rem; } - .scroll-ps-4 { scroll-padding-inline-start: var(--spacing-4); } - .scroll-ps-\\[4px\\] { scroll-padding-inline-start: 4px; } @@ -8297,11 +7450,9 @@ test('scroll-pe', async () => { :root, :host { --spacing-4: 1rem; } - .scroll-pe-4 { scroll-padding-inline-end: var(--spacing-4); } - .scroll-pe-\\[4px\\] { scroll-padding-inline-end: 4px; } @@ -8334,11 +7485,9 @@ test('scroll-pbs', async () => { :root, :host { --spacing-4: 1rem; } - .scroll-pbs-4 { scroll-padding-block-start: var(--spacing-4); } - .scroll-pbs-\\[4px\\] { scroll-padding-block-start: 4px; } @@ -8371,11 +7520,9 @@ test('scroll-pbe', async () => { :root, :host { --spacing-4: 1rem; } - .scroll-pbe-4 { scroll-padding-block-end: var(--spacing-4); } - .scroll-pbe-\\[4px\\] { scroll-padding-block-end: 4px; } @@ -8408,11 +7555,9 @@ test('scroll-pt', async () => { :root, :host { --spacing-4: 1rem; } - .scroll-pt-4 { scroll-padding-top: var(--spacing-4); } - .scroll-pt-\\[4px\\] { scroll-padding-top: 4px; } @@ -8445,11 +7590,9 @@ test('scroll-pr', async () => { :root, :host { --spacing-4: 1rem; } - .scroll-pr-4 { scroll-padding-right: var(--spacing-4); } - .scroll-pr-\\[4px\\] { scroll-padding-right: 4px; } @@ -8482,11 +7625,9 @@ test('scroll-pb', async () => { :root, :host { --spacing-4: 1rem; } - .scroll-pb-4 { scroll-padding-bottom: var(--spacing-4); } - .scroll-pb-\\[4px\\] { scroll-padding-bottom: 4px; } @@ -8519,11 +7660,9 @@ test('scroll-pl', async () => { :root, :host { --spacing-4: 1rem; } - .scroll-pl-4 { scroll-padding-left: var(--spacing-4); } - .scroll-pl-\\[4px\\] { scroll-padding-left: 4px; } @@ -8546,7 +7685,6 @@ test('list-style-position', async () => { .list-inside { list-style-position: inside; } - .list-outside { list-style-position: outside; } @@ -8564,15 +7702,12 @@ test('list', async () => { .list-\\[var\\(--value\\)\\] { list-style-type: var(--value); } - .list-decimal { list-style-type: decimal; } - .list-disc { list-style-type: disc; } - .list-none { list-style-type: none; } @@ -8606,7 +7741,6 @@ test('list', async () => { :root, :host { --list-style-type-none: disc; } - .list-none { list-style-type: var(--list-style-type-none); } @@ -8620,7 +7754,6 @@ test('list-image', async () => { .list-image-\\[var\\(--value\\)\\] { list-style-image: var(--value); } - .list-image-none { list-style-image: none; } @@ -8649,9 +7782,8 @@ test('list-image', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --list-style-image-none: url("../foo.png"); + --list-style-image-none: url(../foo.png); } - .list-image-none { list-style-image: var(--list-style-image-none); } @@ -8665,7 +7797,6 @@ test('appearance', async () => { .appearance-auto { appearance: auto; } - .appearance-none { appearance: none; } @@ -8697,25 +7828,20 @@ test('color-scheme', async () => { .scheme-dark { color-scheme: dark; } - .scheme-light { color-scheme: light; } - .scheme-light-dark { color-scheme: light dark; } - .scheme-normal { color-scheme: normal; } - .scheme-only-dark { - color-scheme: dark only; + color-scheme: only dark; } - .scheme-only-light { - color-scheme: light only; + color-scheme: only light; } " `) @@ -8757,31 +7883,24 @@ test('columns', async () => { --container-3xs: 16rem; --container-7xl: 80rem; } - .columns-3xs { columns: var(--container-3xs); } - .columns-4 { columns: 4; } - .columns-7xl { columns: var(--container-7xl); } - .columns-99 { columns: 99; } - .columns-\\[123\\] { columns: 123; } - .columns-\\[var\\(--value\\)\\] { columns: var(--value); } - .columns-auto { columns: auto; } @@ -8820,7 +7939,6 @@ test('columns', async () => { :root, :host { --columns-auto: 3; } - .columns-auto { columns: var(--columns-auto); } @@ -8845,31 +7963,24 @@ test('break-before', async () => { .break-before-all { break-before: all; } - .break-before-auto { break-before: auto; } - .break-before-avoid { break-before: avoid; } - .break-before-avoid-page { break-before: avoid-page; } - .break-before-column { break-before: column; } - .break-before-left { break-before: left; } - .break-before-page { break-before: page; } - .break-before-right { break-before: right; } @@ -8911,15 +8022,12 @@ test('break-inside', async () => { .break-inside-auto { break-inside: auto; } - .break-inside-avoid { break-inside: avoid; } - .break-inside-avoid-column { break-inside: avoid-column; } - .break-inside-avoid-page { break-inside: avoid-page; } @@ -8957,31 +8065,24 @@ test('break-after', async () => { .break-after-all { break-after: all; } - .break-after-auto { break-after: auto; } - .break-after-avoid { break-after: avoid; } - .break-after-avoid-page { break-after: avoid-page; } - .break-after-column { break-after: column; } - .break-after-left { break-after: left; } - .break-after-page { break-after: page; } - .break-after-right { break-after: right; } @@ -9024,19 +8125,15 @@ test('auto-cols', async () => { .auto-cols-\\[2fr\\] { grid-auto-columns: 2fr; } - .auto-cols-auto { grid-auto-columns: auto; } - .auto-cols-fr { grid-auto-columns: minmax(0, 1fr); } - .auto-cols-max { grid-auto-columns: max-content; } - .auto-cols-min { grid-auto-columns: min-content; } @@ -9070,7 +8167,6 @@ test('auto-cols', async () => { :root, :host { --grid-auto-columns-auto: 2fr; } - .auto-cols-auto { grid-auto-columns: var(--grid-auto-columns-auto); } @@ -9092,19 +8188,15 @@ test('grid-flow', async () => { .grid-flow-col { grid-auto-flow: column; } - .grid-flow-col-dense { grid-auto-flow: column dense; } - .grid-flow-dense { grid-auto-flow: dense; } - .grid-flow-row { grid-auto-flow: row; } - .grid-flow-row-dense { grid-auto-flow: row dense; } @@ -9141,19 +8233,15 @@ test('auto-rows', async () => { .auto-rows-\\[2fr\\] { grid-auto-rows: 2fr; } - .auto-rows-auto { grid-auto-rows: auto; } - .auto-rows-fr { grid-auto-rows: minmax(0, 1fr); } - .auto-rows-max { grid-auto-rows: max-content; } - .auto-rows-min { grid-auto-rows: min-content; } @@ -9187,7 +8275,6 @@ test('auto-rows', async () => { :root, :host { --grid-auto-rows-auto: 2fr; } - .auto-rows-auto { grid-auto-rows: var(--grid-auto-rows-auto); } @@ -9209,19 +8296,15 @@ test('grid-cols', async () => { .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } - .grid-cols-99 { grid-template-columns: repeat(99, minmax(0, 1fr)); } - .grid-cols-\\[123\\] { - grid-template-columns: 123px; + grid-template-columns: 123; } - .grid-cols-none { grid-template-columns: none; } - .grid-cols-subgrid { grid-template-columns: subgrid; } @@ -9260,7 +8343,6 @@ test('grid-cols', async () => { :root, :host { --grid-template-columns-none: 200px 1fr; } - .grid-cols-none { grid-template-columns: var(--grid-template-columns-none); } @@ -9282,19 +8364,15 @@ test('grid-rows', async () => { .grid-rows-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } - .grid-rows-99 { grid-template-rows: repeat(99, minmax(0, 1fr)); } - .grid-rows-\\[123\\] { - grid-template-rows: 123px; + grid-template-rows: 123; } - .grid-rows-none { grid-template-rows: none; } - .grid-rows-subgrid { grid-template-rows: subgrid; } @@ -9333,7 +8411,6 @@ test('grid-rows', async () => { :root, :host { --grid-template-rows-none: 200px 1fr; } - .grid-rows-none { grid-template-rows: var(--grid-template-rows-none); } @@ -9348,15 +8425,12 @@ test('flex-direction', async () => { .flex-col { flex-direction: column; } - .flex-col-reverse { flex-direction: column-reverse; } - .flex-row { flex-direction: row; } - .flex-row-reverse { flex-direction: row-reverse; } @@ -9382,11 +8456,9 @@ test('flex-wrap', async () => { .flex-nowrap { flex-wrap: nowrap; } - .flex-wrap { flex-wrap: wrap; } - .flex-wrap-reverse { flex-wrap: wrap-reverse; } @@ -9423,39 +8495,30 @@ test('place-content', async () => { .place-content-around { place-content: space-around; } - .place-content-baseline { - place-content: baseline start; + place-content: baseline; } - .place-content-between { place-content: space-between; } - .place-content-center { place-content: center; } - .place-content-center-safe { place-content: safe center; } - .place-content-end { place-content: end; } - .place-content-end-safe { place-content: safe end; } - .place-content-evenly { place-content: space-evenly; } - .place-content-start { place-content: start; } - .place-content-stretch { place-content: stretch; } @@ -9500,29 +8563,23 @@ test('place-items', async () => { .place-items-baseline { place-items: baseline; } - .place-items-center { place-items: center; } - .place-items-center-safe { place-items: safe center; } - .place-items-end { place-items: end; } - .place-items-end-safe { place-items: safe end; } - .place-items-start { place-items: start; } - .place-items-stretch { - place-items: stretch stretch; + place-items: stretch; } " `) @@ -9563,43 +8620,33 @@ test('align-content', async () => { .content-around { align-content: space-around; } - .content-baseline { align-content: baseline; } - .content-between { align-content: space-between; } - .content-center { align-content: center; } - .content-center-safe { align-content: safe center; } - .content-end { align-content: flex-end; } - .content-end-safe { align-content: safe flex-end; } - .content-evenly { align-content: space-evenly; } - .content-normal { align-content: normal; } - .content-start { align-content: flex-start; } - .content-stretch { align-content: stretch; } @@ -9647,31 +8694,24 @@ test('items', async () => { .items-baseline { align-items: baseline; } - .items-baseline-last { align-items: last baseline; } - .items-center { align-items: center; } - .items-center-safe { align-items: safe center; } - .items-end { align-items: flex-end; } - .items-end-safe { align-items: safe flex-end; } - .items-start { align-items: flex-start; } - .items-stretch { align-items: stretch; } @@ -9715,39 +8755,30 @@ test('justify', async () => { .justify-around { justify-content: space-around; } - .justify-between { justify-content: space-between; } - .justify-center { justify-content: center; } - .justify-center-safe { justify-content: safe center; } - .justify-end { justify-content: flex-end; } - .justify-end-safe { justify-content: safe flex-end; } - .justify-evenly { justify-content: space-evenly; } - .justify-normal { justify-content: normal; } - .justify-start { justify-content: flex-start; } - .justify-stretch { justify-content: stretch; } @@ -9791,23 +8822,18 @@ test('justify-items', async () => { .justify-items-center { justify-items: center; } - .justify-items-center-safe { justify-items: safe center; } - .justify-items-end { justify-items: end; } - .justify-items-end-safe { justify-items: safe end; } - .justify-items-start { justify-items: start; } - .justify-items-stretch { justify-items: stretch; } @@ -9844,11 +8870,9 @@ test('gap', async () => { :root, :host { --spacing-4: 1rem; } - .gap-4 { gap: var(--spacing-4); } - .gap-\\[4px\\] { gap: 4px; } @@ -9873,11 +8897,9 @@ test('gap-x', async () => { :root, :host { --spacing-4: 1rem; } - .gap-x-4 { column-gap: var(--spacing-4); } - .gap-x-\\[4px\\] { column-gap: 4px; } @@ -9904,11 +8926,9 @@ test('gap-y', async () => { :root, :host { --spacing-4: 1rem; } - .gap-y-4 { row-gap: var(--spacing-4); } - .gap-y-\\[4px\\] { row-gap: 4px; } @@ -9932,41 +8952,43 @@ test('space-x', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-space-x-reverse: 0; - } - } - } - + @layer properties; :root, :host { --spacing-4: 1rem; } - - :where(.-space-x-4 > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-x-reverse))); + .-space-x-4 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-x-reverse))); + } } - - :where(.space-x-4 > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(var(--spacing-4) * var(--tw-space-x-reverse)); - margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse))); + .space-x-4 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(var(--spacing-4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse))); + } } - - :where(.space-x-\\[4px\\] > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(4px * var(--tw-space-x-reverse)); - margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse))); + .space-x-\\[4px\\] { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(4px * var(--tw-space-x-reverse)); + margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse))); + } } - @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-space-x-reverse: 0; + } + } + } " `) expect(await run(['space-x', 'space-x-4/foo', 'space-x-[4px]/foo', '-space-x-4/foo'])).toEqual('') @@ -9985,41 +9007,43 @@ test('space-y', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-space-y-reverse: 0; - } - } - } - + @layer properties; :root, :host { --spacing-4: 1rem; } - - :where(.-space-y-4 > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-y-reverse))); + .-space-y-4 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-y-reverse))); + } } - - :where(.space-y-4 > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse)); - margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse))); + .space-y-4 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse)); + margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse))); + } } - - :where(.space-y-\\[4px\\] > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(4px * var(--tw-space-y-reverse)); - margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse))); + .space-y-\\[4px\\] { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(4px * var(--tw-space-y-reverse)); + margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse))); + } } - @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-space-y-reverse: 0; + } + } + } " `) expect(await run(['space-y', 'space-y-4/foo', 'space-y-[4px]/foo', '-space-y-4/foo'])).toEqual('') @@ -10028,23 +9052,24 @@ test('space-y', async () => { test('space-x-reverse', async () => { expect(await run(['space-x-reverse'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-space-x-reverse: 0; - } + @layer properties; + .space-x-reverse { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 1; } } - - :where(.space-x-reverse > :not(:last-child)) { - --tw-space-x-reverse: 1; - } - @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-space-x-reverse: 0; + } + } + } " `) expect(await run(['-space-x-reverse', 'space-x-reverse/foo'])).toEqual('') @@ -10053,23 +9078,24 @@ test('space-x-reverse', async () => { test('space-y-reverse', async () => { expect(await run(['space-y-reverse'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-space-y-reverse: 0; - } + @layer properties; + .space-y-reverse { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 1; } } - - :where(.space-y-reverse > :not(:last-child)) { - --tw-space-y-reverse: 1; - } - @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-space-y-reverse: 0; + } + } + } " `) expect(await run(['-space-y-reverse', 'space-y-reverse/foo'])).toEqual('') @@ -10078,57 +9104,60 @@ test('space-y-reverse', async () => { test('divide-x', async () => { expect(await run(['divide-x', 'divide-x-4', 'divide-x-123', 'divide-x-[4px]'])) .toMatchInlineSnapshot(` - " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + " + @layer properties; + .divide-x { + :where(& > :not(:last-child)) { --tw-divide-x-reverse: 0; - --tw-border-style: solid; + border-inline-style: var(--tw-border-style); + border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); + border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } } - } - - :where(.divide-x > :not(:last-child)) { - --tw-divide-x-reverse: 0; - border-inline-style: var(--tw-border-style); - border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); - border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); - } - - :where(.divide-x-4 > :not(:last-child)) { - --tw-divide-x-reverse: 0; - border-inline-style: var(--tw-border-style); - border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); - border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); - } - - :where(.divide-x-123 > :not(:last-child)) { - --tw-divide-x-reverse: 0; - border-inline-style: var(--tw-border-style); - border-inline-start-width: calc(123px * var(--tw-divide-x-reverse)); - border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse))); - } - - :where(.divide-x-\\[4px\\] > :not(:last-child)) { - --tw-divide-x-reverse: 0; - border-inline-style: var(--tw-border-style); - border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); - border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); - } - - @property --tw-divide-x-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; - } - - @property --tw-border-style { - syntax: "*"; - inherits: false; - initial-value: solid; - } - " - `) + .divide-x-4 { + :where(& > :not(:last-child)) { + --tw-divide-x-reverse: 0; + border-inline-style: var(--tw-border-style); + border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); + border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); + } + } + .divide-x-123 { + :where(& > :not(:last-child)) { + --tw-divide-x-reverse: 0; + border-inline-style: var(--tw-border-style); + border-inline-start-width: calc(123px * var(--tw-divide-x-reverse)); + border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse))); + } + } + .divide-x-\\[4px\\] { + :where(& > :not(:last-child)) { + --tw-divide-x-reverse: 0; + border-inline-style: var(--tw-border-style); + border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); + border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); + } + } + @property --tw-divide-x-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; + } + @property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-divide-x-reverse: 0; + --tw-border-style: solid; + } + } + } + " + `) expect( await run([ '-divide-x', @@ -10157,33 +9186,33 @@ test('divide-x with custom default border width', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-divide-x-reverse: 0; - --tw-border-style: solid; - } + @layer properties; + .divide-x { + :where(& > :not(:last-child)) { + --tw-divide-x-reverse: 0; + border-inline-style: var(--tw-border-style); + border-inline-start-width: calc(2px * var(--tw-divide-x-reverse)); + border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); } } - - :where(.divide-x > :not(:last-child)) { - --tw-divide-x-reverse: 0; - border-inline-style: var(--tw-border-style); - border-inline-start-width: calc(2px * var(--tw-divide-x-reverse)); - border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); - } - @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-divide-x-reverse: 0; + --tw-border-style: solid; + } + } + } " `) expect(await run(['divide-x/foo'])).toEqual('') @@ -10192,61 +9221,64 @@ test('divide-x with custom default border width', async () => { test('divide-y', async () => { expect(await run(['divide-y', 'divide-y-4', 'divide-y-123', 'divide-y-[4px]'])) .toMatchInlineSnapshot(` - " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + " + @layer properties; + .divide-y { + :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; - --tw-border-style: solid; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(1px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } } - } - - :where(.divide-y > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(1px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - } - - :where(.divide-y-4 > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(4px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); - } - - :where(.divide-y-123 > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(123px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(123px * calc(1 - var(--tw-divide-y-reverse))); - } - - :where(.divide-y-\\[4px\\] > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(4px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); - } - - @property --tw-divide-y-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; - } - - @property --tw-border-style { - syntax: "*"; - inherits: false; - initial-value: solid; - } - " - `) + .divide-y-4 { + :where(& > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(4px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); + } + } + .divide-y-123 { + :where(& > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(123px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(123px * calc(1 - var(--tw-divide-y-reverse))); + } + } + .divide-y-\\[4px\\] { + :where(& > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(4px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); + } + } + @property --tw-divide-y-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; + } + @property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-divide-y-reverse: 0; + --tw-border-style: solid; + } + } + } + " + `) expect( await run([ '-divide-y', @@ -10275,34 +9307,34 @@ test('divide-y with custom default border width', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-divide-y-reverse: 0; - --tw-border-style: solid; - } + @layer properties; + .divide-y { + :where(& > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(2px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); } } - - :where(.divide-y > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(2px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); - } - @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-divide-y-reverse: 0; + --tw-border-style: solid; + } + } + } " `) expect(await run(['divide-y/foo'])).toEqual('') @@ -10311,23 +9343,24 @@ test('divide-y with custom default border width', async () => { test('divide-x-reverse', async () => { expect(await run(['divide-x-reverse'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-divide-x-reverse: 0; - } + @layer properties; + .divide-x-reverse { + :where(& > :not(:last-child)) { + --tw-divide-x-reverse: 1; } } - - :where(.divide-x-reverse > :not(:last-child)) { - --tw-divide-x-reverse: 1; - } - @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-divide-x-reverse: 0; + } + } + } " `) expect(await run(['-divide-x-reverse', 'divide-x-reverse/foo'])).toEqual('') @@ -10336,23 +9369,24 @@ test('divide-x-reverse', async () => { test('divide-y-reverse', async () => { expect(await run(['divide-y-reverse'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-divide-y-reverse: 0; - } + @layer properties; + .divide-y-reverse { + :where(& > :not(:last-child)) { + --tw-divide-y-reverse: 1; } } - - :where(.divide-y-reverse > :not(:last-child)) { - --tw-divide-y-reverse: 1; - } - @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-divide-y-reverse: 0; + } + } + } " `) expect(await run(['-divide-y-reverse', 'divide-y-reverse/foo'])).toEqual('') @@ -10363,29 +9397,35 @@ test('divide-style', async () => { 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; + .divide-dashed { + :where(& > :not(:last-child)) { + --tw-border-style: dashed; + border-style: dashed; + } } - - :where(.divide-dotted > :not(:last-child)) { - --tw-border-style: dotted; - border-style: dotted; + .divide-dotted { + :where(& > :not(:last-child)) { + --tw-border-style: dotted; + border-style: dotted; + } } - - :where(.divide-double > :not(:last-child)) { - --tw-border-style: double; - border-style: double; + .divide-double { + :where(& > :not(:last-child)) { + --tw-border-style: double; + border-style: double; + } } - - :where(.divide-none > :not(:last-child)) { - --tw-border-style: none; - border-style: none; + .divide-none { + :where(& > :not(:last-child)) { + --tw-border-style: none; + border-style: none; + } } - - :where(.divide-solid > :not(:last-child)) { - --tw-border-style: solid; - border-style: solid; + .divide-solid { + :where(& > :not(:last-child)) { + --tw-border-style: solid; + border-style: solid; + } } " `) @@ -10443,119 +9483,86 @@ test('accent', async () => { --color-red-500: #ef4444; --accent-color-blue-500: #3b82f6; } - .accent-\\[\\#0088cc\\] { - accent-color: #08c; + accent-color: #0088cc; } - - .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { - accent-color: oklab(59.9824% -.067 -.124 / .5); + .accent-\\[\\#0088cc\\]\\/50 { + accent-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + accent-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { + accent-color: color-mix(in oklab, #0088cc 50%, transparent); } - .accent-blue-500 { accent-color: var(--accent-color-blue-500); } - - .accent-current, .accent-current\\/50 { - accent-color: currentColor; + .accent-current { + accent-color: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .accent-current\\/50 { + .accent-current\\/50 { + accent-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { accent-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .accent-current\\/\\[0\\.5\\] { - accent-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .accent-current\\/\\[0\\.5\\] { + accent-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { accent-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .accent-current\\/\\[50\\%\\] { - accent-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .accent-current\\/\\[50\\%\\] { + accent-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { accent-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .accent-inherit { accent-color: inherit; } - .accent-red-500 { accent-color: var(--color-red-500); } - .accent-red-500\\/2\\.5 { - accent-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .accent-red-500\\/2\\.5 { + accent-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { accent-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .accent-red-500\\/2\\.25 { - accent-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .accent-red-500\\/2\\.25 { + accent-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { accent-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .accent-red-500\\/2\\.75 { - accent-color: #ef444407; - } - - @supports (color: color-mix(in lab, red, red)) { - .accent-red-500\\/2\\.75 { + accent-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { accent-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .accent-red-500\\/50 { - accent-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .accent-red-500\\/50 { + accent-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .accent-red-500\\/\\[0\\.5\\] { - accent-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .accent-red-500\\/\\[0\\.5\\] { + accent-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .accent-red-500\\/\\[50\\%\\] { - accent-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .accent-red-500\\/\\[50\\%\\] { + accent-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .accent-transparent { - accent-color: #0000; + accent-color: transparent; } " `) @@ -10633,119 +9640,86 @@ test('caret', async () => { --color-red-500: #ef4444; --caret-color-blue-500: #3b82f6; } - .caret-\\[\\#0088cc\\] { - caret-color: #08c; + caret-color: #0088cc; } - - .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { - caret-color: oklab(59.9824% -.067 -.124 / .5); + .caret-\\[\\#0088cc\\]\\/50 { + caret-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + caret-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { + caret-color: color-mix(in oklab, #0088cc 50%, transparent); } - .caret-blue-500 { caret-color: var(--caret-color-blue-500); } - - .caret-current, .caret-current\\/50 { - caret-color: currentColor; + .caret-current { + caret-color: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .caret-current\\/50 { + .caret-current\\/50 { + caret-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { caret-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .caret-current\\/\\[0\\.5\\] { - caret-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .caret-current\\/\\[0\\.5\\] { + caret-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { caret-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .caret-current\\/\\[50\\%\\] { - caret-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .caret-current\\/\\[50\\%\\] { + caret-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { caret-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .caret-inherit { caret-color: inherit; } - .caret-red-500 { caret-color: var(--color-red-500); } - - .caret-red-500\\/2\\.5 { - caret-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .caret-red-500\\/2\\.5 { + .caret-red-500\\/2\\.5 { + caret-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { caret-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .caret-red-500\\/2\\.25 { - caret-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .caret-red-500\\/2\\.25 { + caret-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { caret-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .caret-red-500\\/2\\.75 { - caret-color: #ef444407; - } - - @supports (color: color-mix(in lab, red, red)) { - .caret-red-500\\/2\\.75 { + caret-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { caret-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .caret-red-500\\/50 { - caret-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .caret-red-500\\/50 { + caret-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .caret-red-500\\/\\[0\\.5\\] { - caret-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .caret-red-500\\/\\[0\\.5\\] { + caret-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .caret-red-500\\/\\[50\\%\\] { - caret-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .caret-red-500\\/\\[50\\%\\] { + caret-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .caret-transparent { - caret-color: #0000; + caret-color: transparent; } " `) @@ -10821,119 +9795,122 @@ test('divide-color', async () => { --color-red-500: #ef4444; --border-color-best-blue: #6495ed; } - - :where(.divide-\\[\\#0088cc\\] > :not(:last-child)) { - border-color: #08c; - } - - :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) { - border-color: oklab(59.9824% -.067 -.124 / .5); - } - - :where(.divide-best-blue > :not(:last-child)) { - border-color: var(--border-color-best-blue); - } - - :where(.divide-current > :not(:last-child)), :where(.divide-current\\/50 > :not(:last-child)) { - border-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - :where(.divide-current\\/50 > :not(:last-child)) { - border-color: color-mix(in oklab, currentcolor 50%, transparent); + .divide-\\[\\#0088cc\\] { + :where(& > :not(:last-child)) { + border-color: #0088cc; } } - - :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) { - border-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) { - border-color: color-mix(in oklab, currentcolor 50%, transparent); + .divide-\\[\\#0088cc\\]\\/50 { + :where(& > :not(:last-child)) { + border-color: color-mix(in oklab, #0088cc 50%, transparent); } } - - :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { - border-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { - border-color: color-mix(in oklab, currentcolor 50%, transparent); + .divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + :where(& > :not(:last-child)) { + border-color: color-mix(in oklab, #0088cc 50%, transparent); } } - - :where(.divide-inherit > :not(:last-child)) { - border-color: inherit; + .divide-\\[\\#0088cc\\]\\/\\[50\\%\\] { + :where(& > :not(:last-child)) { + border-color: color-mix(in oklab, #0088cc 50%, transparent); + } } - - :where(.divide-red-500 > :not(:last-child)) { - border-color: var(--color-red-500); + .divide-best-blue { + :where(& > :not(:last-child)) { + border-color: var(--border-color-best-blue); + } } - - :where(.divide-red-500\\/2\\.5 > :not(:last-child)) { - border-color: #ef444406; + .divide-current { + :where(& > :not(:last-child)) { + border-color: currentcolor; + } } - - @supports (color: color-mix(in lab, red, red)) { - :where(.divide-red-500\\/2\\.5 > :not(:last-child)) { - border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); + .divide-current\\/50 { + :where(& > :not(:last-child)) { + border-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, currentcolor 50%, transparent); + } } } - - :where(.divide-red-500\\/2\\.25 > :not(:last-child)) { - border-color: #ef444406; + .divide-current\\/\\[0\\.5\\] { + :where(& > :not(:last-child)) { + border-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, currentcolor 50%, transparent); + } + } } - - @supports (color: color-mix(in lab, red, red)) { - :where(.divide-red-500\\/2\\.25 > :not(:last-child)) { - border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); + .divide-current\\/\\[50\\%\\] { + :where(& > :not(:last-child)) { + border-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, currentcolor 50%, transparent); + } } } - - :where(.divide-red-500\\/2\\.75 > :not(:last-child)) { - border-color: #ef444407; + .divide-inherit { + :where(& > :not(:last-child)) { + border-color: inherit; + } } - - @supports (color: color-mix(in lab, red, red)) { - :where(.divide-red-500\\/2\\.75 > :not(:last-child)) { - border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); + .divide-red-500 { + :where(& > :not(:last-child)) { + border-color: var(--color-red-500); } } - - :where(.divide-red-500\\/50 > :not(:last-child)) { - border-color: #ef444480; + .divide-red-500\\/2\\.5 { + :where(& > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); + } + } } - - @supports (color: color-mix(in lab, red, red)) { - :where(.divide-red-500\\/50 > :not(:last-child)) { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + .divide-red-500\\/2\\.25 { + :where(& > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); + } } } - - :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) { - border-color: #ef444480; + .divide-red-500\\/2\\.75 { + :where(& > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); + } + } } - - @supports (color: color-mix(in lab, red, red)) { - :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + .divide-red-500\\/50 { + :where(& > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } } - - :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) { - border-color: #ef444480; + .divide-red-500\\/\\[0\\.5\\] { + :where(& > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } } - - @supports (color: color-mix(in lab, red, red)) { - :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + .divide-red-500\\/\\[50\\%\\] { + :where(& > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } } - - :where(.divide-transparent > :not(:last-child)) { - border-color: #0000; + .divide-transparent { + :where(& > :not(:last-child)) { + border-color: transparent; + } } " `) @@ -10988,29 +9965,23 @@ test('place-self', async () => { .place-self-auto { place-self: auto; } - .place-self-center { place-self: center; } - .place-self-center-safe { place-self: safe center; } - .place-self-end { place-self: end; } - .place-self-end-safe { place-self: safe end; } - .place-self-start { place-self: start; } - .place-self-stretch { - place-self: stretch stretch; + place-self: stretch; } " `) @@ -11049,35 +10020,27 @@ test('self', async () => { .self-auto { align-self: auto; } - .self-baseline { align-self: baseline; } - .self-baseline-last { align-self: last baseline; } - .self-center { align-self: center; } - .self-center-safe { align-self: safe center; } - .self-end { align-self: flex-end; } - .self-end-safe { align-self: safe flex-end; } - .self-start { align-self: flex-start; } - .self-stretch { align-self: stretch; } @@ -11119,27 +10082,21 @@ test('justify-self', async () => { .justify-self-auto { justify-self: auto; } - .justify-self-center { justify-self: center; } - .justify-self-center-safe { justify-self: safe center; } - .justify-self-end { justify-self: flex-end; } - .justify-self-end-safe { justify-self: safe flex-end; } - .justify-self-start { justify-self: flex-start; } - .justify-self-stretch { justify-self: stretch; } @@ -11178,19 +10135,15 @@ test('overflow', async () => { .overflow-auto { overflow: auto; } - .overflow-clip { overflow: clip; } - .overflow-hidden { overflow: hidden; } - .overflow-scroll { overflow: scroll; } - .overflow-visible { overflow: visible; } @@ -11227,19 +10180,15 @@ test('overflow-x', async () => { .overflow-x-auto { overflow-x: auto; } - .overflow-x-clip { overflow-x: clip; } - .overflow-x-hidden { overflow-x: hidden; } - .overflow-x-scroll { overflow-x: scroll; } - .overflow-x-visible { overflow-x: visible; } @@ -11276,19 +10225,15 @@ test('overflow-y', async () => { .overflow-y-auto { overflow-y: auto; } - .overflow-y-clip { overflow-y: clip; } - .overflow-y-hidden { overflow-y: hidden; } - .overflow-y-scroll { overflow-y: scroll; } - .overflow-y-visible { overflow-y: visible; } @@ -11318,11 +10263,9 @@ test('overscroll', async () => { .overscroll-auto { overscroll-behavior: auto; } - .overscroll-contain { overscroll-behavior: contain; } - .overscroll-none { overscroll-behavior: none; } @@ -11348,11 +10291,9 @@ test('overscroll-x', async () => { .overscroll-x-auto { overscroll-behavior-x: auto; } - .overscroll-x-contain { overscroll-behavior-x: contain; } - .overscroll-x-none { overscroll-behavior-x: none; } @@ -11378,11 +10319,9 @@ test('overscroll-y', async () => { .overscroll-y-auto { overscroll-behavior-y: auto; } - .overscroll-y-contain { overscroll-behavior-y: contain; } - .overscroll-y-none { overscroll-behavior-y: none; } @@ -11407,7 +10346,6 @@ test('scroll-behavior', async () => { .scroll-auto { scroll-behavior: auto; } - .scroll-smooth { scroll-behavior: smooth; } @@ -11424,11 +10362,9 @@ test('scrollbar-width', async () => { .scrollbar-auto { scrollbar-width: auto; } - .scrollbar-none { scrollbar-width: none; } - .scrollbar-thin { scrollbar-width: thin; } @@ -11450,20 +10386,18 @@ test('scrollbar-width', async () => { test('scrollbar-gutter', async () => { expect(await run(['scrollbar-gutter-auto', 'scrollbar-gutter-stable', 'scrollbar-gutter-both'])) .toMatchInlineSnapshot(` - " - .scrollbar-gutter-auto { - scrollbar-gutter: auto; - } - - .scrollbar-gutter-both { - scrollbar-gutter: stable both-edges; - } - - .scrollbar-gutter-stable { - scrollbar-gutter: stable; - } - " - `) + " + .scrollbar-gutter-auto { + scrollbar-gutter: auto; + } + .scrollbar-gutter-both { + scrollbar-gutter: stable both-edges; + } + .scrollbar-gutter-stable { + scrollbar-gutter: stable; + } + " + `) expect( await run([ 'scrollbar-gutter', @@ -11499,88 +10433,66 @@ test('scrollbar-thumb', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-scrollbar-thumb: #0000; - --tw-scrollbar-track: #0000; - } - } - } - + @layer properties; :root, :host { --color-red-500: #ef4444; } - .scrollbar-thumb-\\[\\#0088cc\\] { - --tw-scrollbar-thumb: #08c; + --tw-scrollbar-thumb: #0088cc; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-thumb-\\[\\#0088cc\\]\\/50 { - --tw-scrollbar-thumb: oklab(59.9824% -.067 -.124 / .5); + --tw-scrollbar-thumb: color-mix(in oklab, #0088cc 50%, transparent); scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-thumb-current { --tw-scrollbar-thumb: currentcolor; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-thumb-inherit { --tw-scrollbar-thumb: inherit; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-thumb-red-500 { --tw-scrollbar-thumb: var(--color-red-500); scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-thumb-red-500\\/50 { - --tw-scrollbar-thumb: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .scrollbar-thumb-red-500\\/50 { + --tw-scrollbar-thumb: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent); } - } - - .scrollbar-thumb-red-500\\/50 { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-thumb-red-500\\/\\[0\\.5\\] { - --tw-scrollbar-thumb: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .scrollbar-thumb-red-500\\/\\[0\\.5\\] { + --tw-scrollbar-thumb: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent); } - } - - .scrollbar-thumb-red-500\\/\\[0\\.5\\] { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-thumb-transparent { --tw-scrollbar-thumb: transparent; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - @property --tw-scrollbar-thumb { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-scrollbar-track { syntax: ""; inherits: false; initial-value: #0000; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-scrollbar-thumb: #0000; + --tw-scrollbar-track: #0000; + } + } + } " `) expect( @@ -11616,88 +10528,66 @@ test('scrollbar-track', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-scrollbar-thumb: #0000; - --tw-scrollbar-track: #0000; - } - } - } - + @layer properties; :root, :host { --color-red-500: #ef4444; } - .scrollbar-track-\\[\\#0088cc\\] { - --tw-scrollbar-track: #08c; + --tw-scrollbar-track: #0088cc; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-track-\\[\\#0088cc\\]\\/50 { - --tw-scrollbar-track: oklab(59.9824% -.067 -.124 / .5); + --tw-scrollbar-track: color-mix(in oklab, #0088cc 50%, transparent); scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-track-current { --tw-scrollbar-track: currentcolor; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-track-inherit { --tw-scrollbar-track: inherit; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-track-red-500 { --tw-scrollbar-track: var(--color-red-500); scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-track-red-500\\/50 { - --tw-scrollbar-track: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .scrollbar-track-red-500\\/50 { + --tw-scrollbar-track: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent); } - } - - .scrollbar-track-red-500\\/50 { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-track-red-500\\/\\[0\\.5\\] { - --tw-scrollbar-track: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .scrollbar-track-red-500\\/\\[0\\.5\\] { + --tw-scrollbar-track: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent); } - } - - .scrollbar-track-red-500\\/\\[0\\.5\\] { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-track-transparent { --tw-scrollbar-track: transparent; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - @property --tw-scrollbar-thumb { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-scrollbar-track { syntax: ""; inherits: false; initial-value: #0000; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-scrollbar-thumb: #0000; + --tw-scrollbar-track: #0000; + } + } + } " `) expect( @@ -11715,9 +10605,9 @@ test('truncate', async () => { expect(await run(['truncate'])).toMatchInlineSnapshot(` " .truncate { + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; } " `) @@ -11730,7 +10620,6 @@ test('text-overflow', async () => { .text-clip { text-overflow: clip; } - .text-ellipsis { text-overflow: ellipsis; } @@ -11748,12 +10637,10 @@ test('hyphens', async () => { -webkit-hyphens: auto; hyphens: auto; } - .hyphens-manual { -webkit-hyphens: manual; hyphens: manual; } - .hyphens-none { -webkit-hyphens: none; hyphens: none; @@ -11788,23 +10675,18 @@ test('whitespace', async () => { .whitespace-break-spaces { white-space: break-spaces; } - .whitespace-normal { white-space: normal; } - .whitespace-nowrap { white-space: nowrap; } - .whitespace-pre { white-space: pre; } - .whitespace-pre-line { white-space: pre-line; } - .whitespace-pre-wrap { white-space: pre-wrap; } @@ -11835,15 +10717,12 @@ test('tab', async () => { .tab-2 { tab-size: 2; } - .tab-8 { tab-size: 8; } - .tab-\\[3\\] { tab-size: 3; } - .tab-\\[12px\\] { tab-size: 12px; } @@ -11869,15 +10748,12 @@ test('text-wrap', async () => { .text-balance { text-wrap: balance; } - .text-nowrap { text-wrap: nowrap; } - .text-pretty { text-wrap: pretty; } - .text-wrap { text-wrap: wrap; } @@ -11905,15 +10781,12 @@ test('word-break', async () => { overflow-wrap: normal; word-break: normal; } - .break-words { overflow-wrap: break-word; } - .break-all { word-break: break-all; } - .break-keep { word-break: keep-all; } @@ -11939,11 +10812,9 @@ test('overflow-wrap', async () => { .wrap-anywhere { overflow-wrap: anywhere; } - .wrap-break-word { overflow-wrap: break-word; } - .wrap-normal { overflow-wrap: normal; } @@ -11976,26 +10847,21 @@ test('rounded', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded { border-radius: var(--radius); } - .rounded-\\[4px\\] { border-radius: 4px; } - .rounded-full { - border-radius: 3.40282e38px; + border-radius: calc(infinity * 1px); } - .rounded-none { border-radius: 0; } - .rounded-sm { border-radius: var(--radius-sm); } @@ -12016,7 +10882,6 @@ test('rounded', async () => { :root, :host { --radius-full: 99999px; } - .rounded-full { border-radius: var(--radius-full); } @@ -12057,30 +10922,25 @@ test('rounded-s', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-s { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); } - .rounded-s-\\[4px\\] { border-start-start-radius: 4px; border-end-start-radius: 4px; } - .rounded-s-full { border-start-start-radius: var(--radius-full); border-end-start-radius: var(--radius-full); } - .rounded-s-none { border-start-start-radius: var(--radius-none); border-end-start-radius: var(--radius-none); } - .rounded-s-sm { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); @@ -12122,30 +10982,25 @@ test('rounded-e', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-e { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); } - .rounded-e-\\[4px\\] { border-start-end-radius: 4px; border-end-end-radius: 4px; } - .rounded-e-full { border-start-end-radius: var(--radius-full); border-end-end-radius: var(--radius-full); } - .rounded-e-none { border-start-end-radius: var(--radius-none); border-end-end-radius: var(--radius-none); } - .rounded-e-sm { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); @@ -12187,30 +11042,25 @@ test('rounded-t', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-t { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } - .rounded-t-\\[4px\\] { border-top-left-radius: 4px; border-top-right-radius: 4px; } - .rounded-t-full { border-top-left-radius: var(--radius-full); border-top-right-radius: var(--radius-full); } - .rounded-t-none { border-top-left-radius: var(--radius-none); border-top-right-radius: var(--radius-none); } - .rounded-t-sm { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); @@ -12252,30 +11102,25 @@ test('rounded-r', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-r { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); } - .rounded-r-\\[4px\\] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .rounded-r-full { border-top-right-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); } - .rounded-r-none { border-top-right-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); } - .rounded-r-sm { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); @@ -12317,30 +11162,25 @@ test('rounded-b', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-b { border-bottom-right-radius: var(--radius); border-bottom-left-radius: var(--radius); } - .rounded-b-\\[4px\\] { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .rounded-b-full { border-bottom-right-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); } - .rounded-b-none { border-bottom-right-radius: var(--radius-none); border-bottom-left-radius: var(--radius-none); } - .rounded-b-sm { border-bottom-right-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); @@ -12382,30 +11222,25 @@ test('rounded-l', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-l { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); } - .rounded-l-\\[4px\\] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } - .rounded-l-full { border-top-left-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); } - .rounded-l-none { border-top-left-radius: var(--radius-none); border-bottom-left-radius: var(--radius-none); } - .rounded-l-sm { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); @@ -12447,26 +11282,21 @@ test('rounded-ss', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-ss { border-start-start-radius: var(--radius); } - .rounded-ss-\\[4px\\] { border-start-start-radius: 4px; } - .rounded-ss-full { border-start-start-radius: var(--radius-full); } - .rounded-ss-none { border-start-start-radius: var(--radius-none); } - .rounded-ss-sm { border-start-start-radius: var(--radius-sm); } @@ -12507,26 +11337,21 @@ test('rounded-se', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-se { border-start-end-radius: var(--radius); } - .rounded-se-\\[4px\\] { border-start-end-radius: 4px; } - .rounded-se-full { border-start-end-radius: var(--radius-full); } - .rounded-se-none { border-start-end-radius: var(--radius-none); } - .rounded-se-sm { border-start-end-radius: var(--radius-sm); } @@ -12567,26 +11392,21 @@ test('rounded-ee', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-ee { border-end-end-radius: var(--radius); } - .rounded-ee-\\[4px\\] { border-end-end-radius: 4px; } - .rounded-ee-full { border-end-end-radius: var(--radius-full); } - .rounded-ee-none { border-end-end-radius: var(--radius-none); } - .rounded-ee-sm { border-end-end-radius: var(--radius-sm); } @@ -12627,26 +11447,21 @@ test('rounded-es', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-es { border-end-start-radius: var(--radius); } - .rounded-es-\\[4px\\] { border-end-start-radius: 4px; } - .rounded-es-full { border-end-start-radius: var(--radius-full); } - .rounded-es-none { border-end-start-radius: var(--radius-none); } - .rounded-es-sm { border-end-start-radius: var(--radius-sm); } @@ -12687,26 +11502,21 @@ test('rounded-tl', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-tl { border-top-left-radius: var(--radius); } - .rounded-tl-\\[4px\\] { border-top-left-radius: 4px; } - .rounded-tl-full { border-top-left-radius: var(--radius-full); } - .rounded-tl-none { border-top-left-radius: var(--radius-none); } - .rounded-tl-sm { border-top-left-radius: var(--radius-sm); } @@ -12747,26 +11557,21 @@ test('rounded-tr', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-tr { border-top-right-radius: var(--radius); } - .rounded-tr-\\[4px\\] { border-top-right-radius: 4px; } - .rounded-tr-full { border-top-right-radius: var(--radius-full); } - .rounded-tr-none { border-top-right-radius: var(--radius-none); } - .rounded-tr-sm { border-top-right-radius: var(--radius-sm); } @@ -12807,26 +11612,21 @@ test('rounded-br', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-br { border-bottom-right-radius: var(--radius); } - .rounded-br-\\[4px\\] { border-bottom-right-radius: 4px; } - .rounded-br-full { border-bottom-right-radius: var(--radius-full); } - .rounded-br-none { border-bottom-right-radius: var(--radius-none); } - .rounded-br-sm { border-bottom-right-radius: var(--radius-sm); } @@ -12867,26 +11667,21 @@ test('rounded-bl', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: .125rem; - --radius: .25rem; + --radius-sm: 0.125rem; + --radius: 0.25rem; } - .rounded-bl { border-bottom-left-radius: var(--radius); } - .rounded-bl-\\[4px\\] { border-bottom-left-radius: 4px; } - .rounded-bl-full { border-bottom-left-radius: var(--radius-full); } - .rounded-bl-none { border-bottom-left-radius: var(--radius-none); } - .rounded-bl-sm { border-bottom-left-radius: var(--radius-sm); } @@ -12924,27 +11719,22 @@ test('border-style', async () => { --tw-border-style: dashed; border-style: dashed; } - .border-dotted { --tw-border-style: dotted; border-style: dotted; } - .border-double { --tw-border-style: double; border-style: double; } - .border-hidden { --tw-border-style: hidden; border-style: hidden; } - .border-none { --tw-border-style: none; border-style: none; } - .border-solid { --tw-border-style: solid; border-style: solid; @@ -13077,24 +11867,23 @@ test('border with custom default border width', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-border-style: solid; - } - } - } - + @layer properties; .border { border-style: var(--tw-border-style); border-width: 2px; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-border-style: solid; + } + } + } " `) expect(await run(['-border', 'border/foo'])).toEqual('') @@ -13258,815 +12047,532 @@ test('bg', async () => { --color-red-500: #ef4444; --background-color-blue-500: #3b82f6; } - .bg-\\[\\#0088cc\\] { - background-color: #08c; + background-color: #0088cc; } - - .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { - background-color: oklab(59.9824% -.067 -.124 / .5); + .bg-\\[\\#0088cc\\]\\/50 { + background-color: color-mix(in oklab, #0088cc 50%, transparent); } - - .bg-\\[color\\:var\\(--some-var\\)\\], .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 { + .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + background-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { + background-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .bg-\\[color\\:var\\(--some-var\\)\\] { background-color: var(--some-var); } - - @supports (color: color-mix(in lab, red, red)) { - .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 { + .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 { + background-color: var(--some-var); + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } - .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] { background-color: var(--some-var); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } - .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] { background-color: var(--some-var); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } - - .bg-\\[var\\(--some-var\\)\\], .bg-\\[var\\(--some-var\\)\\]\\/50 { + .bg-\\[var\\(--some-var\\)\\] { background-color: var(--some-var); } - - @supports (color: color-mix(in lab, red, red)) { - .bg-\\[var\\(--some-var\\)\\]\\/50 { + .bg-\\[var\\(--some-var\\)\\]\\/50 { + background-color: var(--some-var); + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } - .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] { background-color: var(--some-var); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } - .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] { background-color: var(--some-var); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } - .bg-blue-500 { background-color: var(--background-color-blue-500); } - - .bg-current, .bg-current\\/50 { - background-color: currentColor; + .bg-current { + background-color: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .bg-current\\/50 { + .bg-current\\/50 { + background-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .bg-current\\/\\[0\\.5\\] { - background-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-current\\/\\[0\\.5\\] { + background-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .bg-current\\/\\[50\\%\\] { - background-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-current\\/\\[50\\%\\] { + background-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .bg-current\\/\\[var\\(--bg-opacity\\)\\] { - background-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-current\\/\\[var\\(--bg-opacity\\)\\] { + background-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, currentcolor var(--bg-opacity), transparent); } } - .bg-inherit { background-color: inherit; } - .bg-red-500 { background-color: var(--color-red-500); } - .bg-red-500\\/2\\.5 { - background-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-red-500\\/2\\.5 { + background-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .bg-red-500\\/2\\.25 { - background-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-red-500\\/2\\.25 { + background-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .bg-red-500\\/2\\.75 { - background-color: #ef444407; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-red-500\\/2\\.75 { + background-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .bg-red-500\\/50 { - background-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-red-500\\/50 { + background-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .bg-red-500\\/100 { background-color: var(--color-red-500); } - .bg-red-500\\/\\[0\\.5\\] { - background-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-red-500\\/\\[0\\.5\\] { + background-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .bg-red-500\\/\\[50\\%\\] { - background-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-red-500\\/\\[50\\%\\] { + background-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .bg-red-500\\/\\[100\\%\\] { background-color: var(--color-red-500); } - .bg-transparent { - background-color: #0000; + background-color: transparent; } - .-bg-linear-45 { --tw-gradient-position: calc(45deg * -1); - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .-bg-linear-45 { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: calc(45deg * -1) in oklab; } - } - - .-bg-linear-45 { background-image: linear-gradient(var(--tw-gradient-stops)); } - .-bg-linear-45\\/oklab { --tw-gradient-position: calc(45deg * -1); - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .-bg-linear-45\\/oklab { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: calc(45deg * -1) in oklab; } - } - - .-bg-linear-45\\/oklab { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-45 { --tw-gradient-position: 45deg; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-45 { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: 45deg in oklab; } - } - - .bg-linear-45 { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-45\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: 45deg; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-45\\/\\[in_hsl_longer_hue\\] { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: 45deg in hsl longer hue; } - } - - .bg-linear-45\\/\\[in_hsl_longer_hue\\] { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-45\\/oklab { --tw-gradient-position: 45deg; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-45\\/oklab { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: 45deg in oklab; } - } - - .bg-linear-45\\/oklab { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-45\\/shorter { --tw-gradient-position: 45deg; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-45\\/shorter { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: 45deg in oklch shorter hue; } - } - - .bg-linear-45\\/shorter { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-b { --tw-gradient-position: to bottom; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-b { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to bottom in oklab; } - } - - .bg-linear-to-b { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-bl { --tw-gradient-position: to bottom left; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-bl { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to bottom left in oklab; } - } - - .bg-linear-to-bl { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-br { --tw-gradient-position: to bottom right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-br { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to bottom right in oklab; } - } - - .bg-linear-to-br { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-l { --tw-gradient-position: to left; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-l { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to left in oklab; } - } - - .bg-linear-to-l { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-r { --tw-gradient-position: to right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-r { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklab; } - } - - .bg-linear-to-r { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: to right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in hsl longer hue; } - } - - .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-r\\/\\[longer\\] { --tw-gradient-position: to right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-r\\/\\[longer\\] { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right longer; } - } - - .bg-linear-to-r\\/\\[longer\\] { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-r\\/decreasing { --tw-gradient-position: to right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-r\\/decreasing { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklch decreasing hue; } - } - - .bg-linear-to-r\\/decreasing { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-r\\/hsl { --tw-gradient-position: to right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-r\\/hsl { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in hsl; } - } - - .bg-linear-to-r\\/hsl { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-r\\/increasing { --tw-gradient-position: to right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-r\\/increasing { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklch increasing hue; } - } - - .bg-linear-to-r\\/increasing { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-r\\/longer { --tw-gradient-position: to right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-r\\/longer { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklch longer hue; } - } - - .bg-linear-to-r\\/longer { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-r\\/oklab { --tw-gradient-position: to right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-r\\/oklab { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklab; } - } - - .bg-linear-to-r\\/oklab { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-r\\/oklch { --tw-gradient-position: to right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-r\\/oklch { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklch; } - } - - .bg-linear-to-r\\/oklch { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-r\\/shorter { --tw-gradient-position: to right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-r\\/shorter { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklch shorter hue; } - } - - .bg-linear-to-r\\/shorter { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-r\\/srgb { --tw-gradient-position: to right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-r\\/srgb { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in srgb; } - } - - .bg-linear-to-r\\/srgb { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-t { --tw-gradient-position: to top; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-t { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to top in oklab; } - } - - .bg-linear-to-t { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-tl { --tw-gradient-position: to top left; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-tl { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to top left in oklab; } - } - - .bg-linear-to-tl { background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-linear-to-tr { --tw-gradient-position: to top right; - } - - @supports (background-image: linear-gradient(in lab, red, red)) { - .bg-linear-to-tr { + @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to top right in oklab; } - } - - .bg-linear-to-tr { background-image: linear-gradient(var(--tw-gradient-stops)); } - .-bg-conic-45\\/oklab { --tw-gradient-position: from calc(45deg * -1) in oklab; background-image: conic-gradient(var(--tw-gradient-stops)); } - .-bg-linear-\\[1\\.3rad\\] { - --tw-gradient-position: calc(74.4845deg * -1); - background-image: linear-gradient(var(--tw-gradient-stops, calc(74.4845deg * -1))); + --tw-gradient-position: calc(1.3rad * -1); + background-image: linear-gradient(var(--tw-gradient-stops,calc(1.3rad * -1))); } - .-bg-linear-\\[125deg\\] { --tw-gradient-position: calc(125deg * -1); - background-image: linear-gradient(var(--tw-gradient-stops, calc(125deg * -1))); + background-image: linear-gradient(var(--tw-gradient-stops,calc(125deg * -1))); } - .bg-conic-45\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: from 45deg in hsl longer hue; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-conic-45\\/oklab { --tw-gradient-position: from 45deg in oklab; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-conic-45\\/shorter { --tw-gradient-position: from 45deg in oklch shorter hue; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-conic\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: in hsl longer hue; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-conic\\/decreasing { --tw-gradient-position: in oklch decreasing hue; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-conic\\/hsl { --tw-gradient-position: in hsl; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-conic\\/increasing { --tw-gradient-position: in oklch increasing hue; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-conic\\/longer { --tw-gradient-position: in oklch longer hue; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-conic\\/oklab { --tw-gradient-position: in oklab; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-conic\\/oklch { --tw-gradient-position: in oklch; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-conic\\/shorter { --tw-gradient-position: in oklch shorter hue; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-conic\\/srgb { --tw-gradient-position: in srgb; background-image: conic-gradient(var(--tw-gradient-stops)); } - .bg-linear-\\[1\\.3rad\\] { - --tw-gradient-position: 74.4845deg; - background-image: linear-gradient(var(--tw-gradient-stops, 74.4845deg)); + --tw-gradient-position: 1.3rad; + background-image: linear-gradient(var(--tw-gradient-stops,1.3rad)); } - .bg-linear-\\[125deg\\] { --tw-gradient-position: 125deg; - background-image: linear-gradient(var(--tw-gradient-stops, 125deg)); + background-image: linear-gradient(var(--tw-gradient-stops,125deg)); } - .bg-linear-\\[to_bottom\\] { --tw-gradient-position: to bottom; - background-image: linear-gradient(var(--tw-gradient-stops, to bottom)); + background-image: linear-gradient(var(--tw-gradient-stops,to bottom)); } - .bg-radial-\\[circle_at_center\\] { --tw-gradient-position: circle at center; - background-image: radial-gradient(var(--tw-gradient-stops, circle at center)); + background-image: radial-gradient(var(--tw-gradient-stops,circle at center)); } - .bg-radial\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: in hsl longer hue; background-image: radial-gradient(var(--tw-gradient-stops)); } - .bg-radial\\/decreasing { --tw-gradient-position: in oklch decreasing hue; background-image: radial-gradient(var(--tw-gradient-stops)); } - .bg-radial\\/hsl { --tw-gradient-position: in hsl; background-image: radial-gradient(var(--tw-gradient-stops)); } - .bg-radial\\/increasing { --tw-gradient-position: in oklch increasing hue; background-image: radial-gradient(var(--tw-gradient-stops)); } - .bg-radial\\/longer { --tw-gradient-position: in oklch longer hue; background-image: radial-gradient(var(--tw-gradient-stops)); } - .bg-radial\\/oklab { --tw-gradient-position: in oklab; background-image: radial-gradient(var(--tw-gradient-stops)); } - .bg-radial\\/oklch { --tw-gradient-position: in oklch; background-image: radial-gradient(var(--tw-gradient-stops)); } - .bg-radial\\/shorter { --tw-gradient-position: in oklch shorter hue; background-image: radial-gradient(var(--tw-gradient-stops)); } - .bg-radial\\/srgb { --tw-gradient-position: in srgb; background-image: radial-gradient(var(--tw-gradient-stops)); } - .bg-\\[image\\:var\\(--my-gradient\\)\\] { background-image: var(--my-gradient); } - .bg-\\[linear-gradient\\(to_bottom\\,red\\,blue\\)\\] { - background-image: linear-gradient(red, #00f); + background-image: linear-gradient(to bottom,red,blue); } - .bg-\\[url\\(\\/image\\.png\\)\\] { - background-image: url("/image.png"); + background-image: url(/image.png); } - .bg-\\[url\\:var\\(--my-url\\)\\] { background-image: var(--my-url); } - .bg-none { background-image: none; } - .bg-\\[contain\\] { background-size: contain; } - .bg-\\[cover\\] { background-size: cover; } - - .bg-\\[length\\:120px_120px\\], .bg-\\[size\\:120px_120px\\] { + .bg-\\[length\\:120px_120px\\] { + background-size: 120px 120px; + } + .bg-\\[size\\:120px_120px\\] { background-size: 120px 120px; } - .bg-auto { background-size: auto; } - .bg-contain { background-size: contain; } - .bg-cover { background-size: cover; } - .bg-fixed { background-attachment: fixed; } - .bg-local { background-attachment: local; } - .bg-scroll { background-attachment: scroll; } - .bg-\\[50\\%\\] { background-position: 50%; } - .bg-\\[120px\\] { background-position: 120px; } - - .bg-\\[120px_120px\\], .bg-\\[position\\:120px_120px\\] { + .bg-\\[120px_120px\\] { + background-position: 120px 120px; + } + .bg-\\[position\\:120px_120px\\] { background-position: 120px 120px; } - .bg-bottom { background-position: bottom; } - .bg-bottom-left { - background-position: 0 100%; + background-position: left bottom; } - .bg-bottom-right { - background-position: 100% 100%; + background-position: right bottom; } - .bg-center { background-position: center; } - .bg-left { - background-position: 0; + background-position: left; } - .bg-left-bottom { - background-position: 0 100%; + background-position: left bottom; } - .bg-left-top { - background-position: 0 0; + background-position: left top; } - .bg-right { - background-position: 100%; + background-position: right; } - .bg-right-bottom { - background-position: 100% 100%; + background-position: right bottom; } - .bg-right-top { - background-position: 100% 0; + background-position: right top; } - .bg-top { background-position: top; } - .bg-top-left { - background-position: 0 0; + background-position: left top; } - .bg-top-right { - background-position: 100% 0; + background-position: right top; } - .bg-no-repeat { background-repeat: no-repeat; } - .bg-repeat { background-repeat: repeat; } - .bg-repeat-round { background-repeat: round; } - .bg-repeat-space { background-repeat: space; } - .bg-repeat-x { background-repeat: repeat-x; } - .bg-repeat-y { background-repeat: repeat-y; } @@ -14181,32 +12687,21 @@ test('bg', async () => { ).toMatchInlineSnapshot(` " .bg-current\\/custom { - background-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-current\\/custom { + background-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, currentcolor var(--opacity-custom, var(--custom-opacity)), transparent); } } - .bg-current\\/half { - background-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-current\\/half { - background-color: color-mix(in oklab, currentcolor var(--opacity-half, .5), transparent); + background-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, currentcolor var(--opacity-half, 0.5), transparent); } } - .\\[color\\:red\\]\\/half { - color: color-mix(in srgb, red .5, transparent); - } - - @supports (color: color-mix(in lab, red, red)) { - .\\[color\\:red\\]\\/half { - color: color-mix(in oklab, red var(--opacity-half, .5), transparent); + color: color-mix(in srgb, red 0.5, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, red var(--opacity-half, 0.5), transparent); } } " @@ -14229,11 +12724,9 @@ test('bg-position', async () => { .bg-position-\\[120px\\] { background-position: 120px; } - .bg-position-\\[120px_120px\\] { background-position: 120px 120px; } - .bg-position-\\[var\\(--some-var\\)\\] { background-position: var(--some-var); } @@ -14270,11 +12763,9 @@ test('bg-size', async () => { .bg-size-\\[120px\\] { background-size: 120px; } - .bg-size-\\[120px_120px\\] { background-size: 120px 120px; } - .bg-size-\\[var\\(--some-var\\)\\] { background-size: var(--some-var); } @@ -14341,308 +12832,212 @@ test('from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-gradient-position: initial; - --tw-gradient-from: #0000; - --tw-gradient-via: #0000; - --tw-gradient-to: #0000; - --tw-gradient-stops: initial; - --tw-gradient-via-stops: initial; - --tw-gradient-from-position: 0%; - --tw-gradient-via-position: 50%; - --tw-gradient-to-position: 100%; - } - } - } - + @layer properties; :root, :host { --color-red-500: #ef4444; } - .from-\\[\\#0088cc\\] { - --tw-gradient-from: #08c; + --tw-gradient-from: #0088cc; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - - .from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-from: oklab(59.9824% -.067 -.124 / .5); + .from-\\[\\#0088cc\\]\\/50 { + --tw-gradient-from: color-mix(in oklab, #0088cc 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)); + } + .from-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-gradient-from: color-mix(in oklab, #0088cc 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)); + } + .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-from: color-mix(in oklab, #0088cc 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)); } - .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)); } - .from-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-from: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .from-\\[color\\:var\\(--my-color\\)\\]\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .from-\\[color\\:var\\(--my-color\\)\\]\\/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)); } - .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-from: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } - .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-from: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } - .from-\\[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)); } - .from-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-from: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .from-\\[var\\(--my-color\\)\\]\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .from-\\[var\\(--my-color\\)\\]\\/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)); } - .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-from: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .from-\\[var\\(--my-color\\)\\]\\/\\[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)); } - .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-from: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .from-\\[var\\(--my-color\\)\\]\\/\\[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)); } - .from-current { --tw-gradient-from: currentcolor; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-current\\/50 { --tw-gradient-from: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .from-current\\/50 { + @supports (color: color-mix(in lab, red, red)) { --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)); } - .from-current\\/\\[0\\.5\\] { --tw-gradient-from: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .from-current\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --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)); } - .from-current\\/\\[50\\%\\] { --tw-gradient-from: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .from-current\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --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)); } - .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)); } - .from-red-500 { --tw-gradient-from: var(--color-red-500); --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 { - --tw-gradient-from: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .from-red-500\\/50 { + --tw-gradient-from: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --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)); } - .from-red-500\\/\\[0\\.5\\] { - --tw-gradient-from: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .from-red-500\\/\\[0\\.5\\] { + --tw-gradient-from: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --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)); } - .from-red-500\\/\\[50\\%\\] { - --tw-gradient-from: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .from-red-500\\/\\[50\\%\\] { + --tw-gradient-from: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --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)); } - .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)); } - .from-0\\% { --tw-gradient-from-position: 0%; } - .from-5\\% { --tw-gradient-from-position: 5%; } - .from-100\\% { --tw-gradient-from-position: 100%; } - .from-\\[50\\%\\] { --tw-gradient-from-position: 50%; } - .from-\\[50px\\] { --tw-gradient-from-position: 50px; } - - .from-\\[length\\:var\\(--my-position\\)\\], .from-\\[percentage\\:var\\(--my-position\\)\\] { + .from-\\[length\\:var\\(--my-position\\)\\] { + --tw-gradient-from-position: var(--my-position); + } + .from-\\[percentage\\:var\\(--my-position\\)\\] { --tw-gradient-from-position: var(--my-position); } - @property --tw-gradient-position { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-stops { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-gradient-via-stops { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } - @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } - @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + } + } + } " `) expect( @@ -14726,328 +13121,234 @@ test('via', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-gradient-position: initial; - --tw-gradient-from: #0000; - --tw-gradient-via: #0000; - --tw-gradient-to: #0000; - --tw-gradient-stops: initial; - --tw-gradient-via-stops: initial; - --tw-gradient-from-position: 0%; - --tw-gradient-via-position: 50%; - --tw-gradient-to-position: 100%; - } - } - } - + @layer properties; :root, :host { --color-red-500: #ef4444; } - .via-\\[\\#0088cc\\] { - --tw-gradient-via: #08c; + --tw-gradient-via: #0088cc; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - - .via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-via: oklab(59.9824% -.067 -.124 / .5); + .via-\\[\\#0088cc\\]\\/50 { + --tw-gradient-via: color-mix(in oklab, #0088cc 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); + } + .via-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-gradient-via: color-mix(in oklab, #0088cc 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); + } + .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-via: color-mix(in oklab, #0088cc 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); } - .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); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-via: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .via-\\[color\\:var\\(--my-color\\)\\]\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .via-\\[color\\:var\\(--my-color\\)\\]\\/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); } - .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-via: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[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); } - .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-via: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[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); } - .via-\\[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); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-via: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .via-\\[var\\(--my-color\\)\\]\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .via-\\[var\\(--my-color\\)\\]\\/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); } - - .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { - --tw-gradient-via: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { - --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); - } - } - .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + --tw-gradient-via: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); + } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-via: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .via-\\[var\\(--my-color\\)\\]\\/\\[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); } - .via-current { --tw-gradient-via: currentcolor; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-current\\/50 { --tw-gradient-via: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .via-current\\/50 { + @supports (color: color-mix(in lab, red, red)) { --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); } - .via-current\\/\\[0\\.5\\] { --tw-gradient-via: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .via-current\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --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); } - .via-current\\/\\[50\\%\\] { --tw-gradient-via: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .via-current\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --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); } - .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); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-red-500 { --tw-gradient-via: var(--color-red-500); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-red-500\\/50 { - --tw-gradient-via: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .via-red-500\\/50 { + --tw-gradient-via: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --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); } - .via-red-500\\/\\[0\\.5\\] { - --tw-gradient-via: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .via-red-500\\/\\[0\\.5\\] { + --tw-gradient-via: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --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); } - .via-red-500\\/\\[50\\%\\] { - --tw-gradient-via: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .via-red-500\\/\\[50\\%\\] { + --tw-gradient-via: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --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); } - .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); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-0\\% { --tw-gradient-via-position: 0%; } - .via-5\\% { --tw-gradient-via-position: 5%; } - .via-100\\% { --tw-gradient-via-position: 100%; } - .via-\\[50\\%\\] { --tw-gradient-via-position: 50%; } - .via-\\[50px\\] { --tw-gradient-via-position: 50px; } - - .via-\\[length\\:var\\(--my-position\\)\\], .via-\\[percentage\\:var\\(--my-position\\)\\] { + .via-\\[length\\:var\\(--my-position\\)\\] { + --tw-gradient-via-position: var(--my-position); + } + .via-\\[percentage\\:var\\(--my-position\\)\\] { --tw-gradient-via-position: var(--my-position); } - @property --tw-gradient-position { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-stops { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-gradient-via-stops { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } - @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } - @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + } + } + } " `) expect( @@ -15129,308 +13430,212 @@ test('to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-gradient-position: initial; - --tw-gradient-from: #0000; - --tw-gradient-via: #0000; - --tw-gradient-to: #0000; - --tw-gradient-stops: initial; - --tw-gradient-via-stops: initial; - --tw-gradient-from-position: 0%; - --tw-gradient-via-position: 50%; - --tw-gradient-to-position: 100%; - } - } - } - + @layer properties; :root, :host { --color-red-500: #ef4444; } - .to-\\[\\#0088cc\\] { - --tw-gradient-to: #08c; + --tw-gradient-to: #0088cc; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - - .to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-to: oklab(59.9824% -.067 -.124 / .5); + .to-\\[\\#0088cc\\]\\/50 { + --tw-gradient-to: color-mix(in oklab, #0088cc 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)); + } + .to-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-gradient-to: color-mix(in oklab, #0088cc 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)); + } + .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-to: color-mix(in oklab, #0088cc 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)); } - .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)); } - .to-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-to: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .to-\\[color\\:var\\(--my-color\\)\\]\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .to-\\[color\\:var\\(--my-color\\)\\]\\/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)); } - .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-to: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } - .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-to: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } - .to-\\[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)); } - .to-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-to: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .to-\\[var\\(--my-color\\)\\]\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .to-\\[var\\(--my-color\\)\\]\\/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)); } - .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-to: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .to-\\[var\\(--my-color\\)\\]\\/\\[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)); } - .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-to: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } - } - - .to-\\[var\\(--my-color\\)\\]\\/\\[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)); } - .to-current { --tw-gradient-to: currentcolor; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-current\\/50 { --tw-gradient-to: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .to-current\\/50 { + @supports (color: color-mix(in lab, red, red)) { --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)); } - .to-current\\/\\[0\\.5\\] { --tw-gradient-to: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .to-current\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --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)); } - .to-current\\/\\[50\\%\\] { --tw-gradient-to: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .to-current\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --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)); } - .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)); } - .to-red-500 { --tw-gradient-to: var(--color-red-500); --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 { - --tw-gradient-to: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .to-red-500\\/50 { + --tw-gradient-to: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --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)); } - .to-red-500\\/\\[0\\.5\\] { - --tw-gradient-to: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .to-red-500\\/\\[0\\.5\\] { + --tw-gradient-to: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --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)); } - .to-red-500\\/\\[50\\%\\] { - --tw-gradient-to: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .to-red-500\\/\\[50\\%\\] { + --tw-gradient-to: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --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)); } - .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)); } - .to-0\\% { --tw-gradient-to-position: 0%; } - .to-5\\% { --tw-gradient-to-position: 5%; } - .to-100\\% { --tw-gradient-to-position: 100%; } - .to-\\[50\\%\\] { --tw-gradient-to-position: 50%; } - .to-\\[50px\\] { --tw-gradient-to-position: 50px; } - - .to-\\[length\\:var\\(--my-position\\)\\], .to-\\[percentage\\:var\\(--my-position\\)\\] { + .to-\\[length\\:var\\(--my-position\\)\\] { + --tw-gradient-to-position: var(--my-position); + } + .to-\\[percentage\\:var\\(--my-position\\)\\] { --tw-gradient-to-position: var(--my-position); } - @property --tw-gradient-position { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-stops { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-gradient-via-stops { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } - @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } - @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + } + } + } " `) expect( @@ -15536,199 +13741,126 @@ test('mask', async () => { ).toMatchInlineSnapshot(` " .mask-\\[image\\:var\\(--some-var\\)\\] { - -webkit-mask-image: var(--some-var); - -webkit-mask-image: var(--some-var); mask-image: var(--some-var); } - .mask-\\[linear-gradient\\(\\#ffff\\,\\#0000\\)\\] { - -webkit-mask-image: linear-gradient(#fff, #0000); - mask-image: linear-gradient(#fff, #0000); + mask-image: linear-gradient(#ffff,#0000); } - .mask-\\[url\\(http\\:\\/\\/example\\.com\\)\\] { - -webkit-mask-image: url("http://example.com"); - mask-image: url("http://example.com"); + mask-image: url(http://example.com); } - - .mask-\\[url\\:var\\(--some-var\\)\\], .mask-\\[var\\(--some-var\\)\\] { - -webkit-mask-image: var(--some-var); - -webkit-mask-image: var(--some-var); + .mask-\\[url\\:var\\(--some-var\\)\\] { + mask-image: var(--some-var); + } + .mask-\\[var\\(--some-var\\)\\] { mask-image: var(--some-var); } - .mask-none { - -webkit-mask-image: none; mask-image: none; } - .mask-add { - -webkit-mask-composite: source-over; - -webkit-mask-composite: source-over; mask-composite: add; } - .mask-exclude { - -webkit-mask-composite: xor; - -webkit-mask-composite: xor; mask-composite: exclude; } - .mask-intersect { - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; mask-composite: intersect; } - .mask-subtract { - -webkit-mask-composite: source-out; - -webkit-mask-composite: source-out; mask-composite: subtract; } - .mask-alpha { - -webkit-mask-source-type: alpha; - -webkit-mask-source-type: alpha; mask-mode: alpha; } - .mask-luminance { - -webkit-mask-source-type: luminance; - -webkit-mask-source-type: luminance; mask-mode: luminance; } - .mask-match { - -webkit-mask-source-type: auto; - -webkit-mask-source-type: auto; mask-mode: match-source; } - .mask-type-alpha { mask-type: alpha; } - .mask-type-luminance { mask-type: luminance; } - .mask-\\[contain\\] { - -webkit-mask-size: contain; mask-size: contain; } - .mask-\\[cover\\] { - -webkit-mask-size: cover; mask-size: cover; } - - .mask-\\[length\\:120px_120px\\], .mask-\\[size\\:120px_120px\\] { - -webkit-mask-size: 120px 120px; + .mask-\\[length\\:120px_120px\\] { + mask-size: 120px 120px; + } + .mask-\\[size\\:120px_120px\\] { mask-size: 120px 120px; } - .mask-auto { - -webkit-mask-size: auto; mask-size: auto; } - .mask-contain { - -webkit-mask-size: contain; mask-size: contain; } - .mask-cover { - -webkit-mask-size: cover; mask-size: cover; } - .mask-\\[50\\%\\] { - -webkit-mask-position: 50%; mask-position: 50%; } - .mask-\\[120px\\] { - -webkit-mask-position: 120px; mask-position: 120px; } - - .mask-\\[120px_120px\\], .mask-\\[position\\:120px_120px\\] { - -webkit-mask-position: 120px 120px; + .mask-\\[120px_120px\\] { + mask-position: 120px 120px; + } + .mask-\\[position\\:120px_120px\\] { mask-position: 120px 120px; } - .mask-bottom { - -webkit-mask-position: bottom; mask-position: bottom; } - .mask-bottom-left { - -webkit-mask-position: 0 100%; - mask-position: 0 100%; + mask-position: left bottom; } - .mask-bottom-right { - -webkit-mask-position: 100% 100%; - mask-position: 100% 100%; + mask-position: right bottom; } - .mask-center { - -webkit-mask-position: center; mask-position: center; } - .mask-left { - -webkit-mask-position: 0; - mask-position: 0; + mask-position: left; } - .mask-right { - -webkit-mask-position: 100%; - mask-position: 100%; + mask-position: right; } - .mask-top { - -webkit-mask-position: top; mask-position: top; } - .mask-top-left { - -webkit-mask-position: 0 0; - mask-position: 0 0; + mask-position: left top; } - .mask-top-right { - -webkit-mask-position: 100% 0; - mask-position: 100% 0; + mask-position: right top; } - .mask-no-repeat { - -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } - .mask-repeat { - -webkit-mask-repeat: repeat; mask-repeat: repeat; } - .mask-repeat-round { - -webkit-mask-repeat: round; mask-repeat: round; } - .mask-repeat-space { - -webkit-mask-repeat: space; mask-repeat: space; } - .mask-repeat-x { - -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; } - .mask-repeat-y { - -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; } " @@ -15834,12 +13966,9 @@ test('mask', async () => { ).toMatchInlineSnapshot(` " .\\[color\\:red\\]\\/half { - color: color-mix(in srgb, red .5, transparent); - } - - @supports (color: color-mix(in lab, red, red)) { - .\\[color\\:red\\]\\/half { - color: color-mix(in oklab, red var(--opacity-half, .5), transparent); + color: color-mix(in srgb, red 0.5, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, red var(--opacity-half, 0.5), transparent); } } " @@ -15860,18 +13989,12 @@ test('mask-position', async () => { ).toMatchInlineSnapshot(` " .mask-position-\\[120px\\] { - -webkit-mask-position: 120px; mask-position: 120px; } - .mask-position-\\[120px_120px\\] { - -webkit-mask-position: 120px 120px; mask-position: 120px 120px; } - .mask-position-\\[var\\(--some-var\\)\\] { - -webkit-mask-position: var(--some-var); - -webkit-mask-position: var(--some-var); mask-position: var(--some-var); } " @@ -15905,18 +14028,12 @@ test('mask-size', async () => { ).toMatchInlineSnapshot(` " .mask-size-\\[120px\\] { - -webkit-mask-size: 120px; mask-size: 120px; } - .mask-size-\\[120px_120px\\] { - -webkit-mask-size: 120px 120px; mask-size: 120px 120px; } - .mask-size-\\[var\\(--some-var\\)\\] { - -webkit-mask-size: var(--some-var); - -webkit-mask-size: var(--some-var); mask-size: var(--some-var); } " @@ -15962,201 +14079,152 @@ test('mask-t-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-top-from-position: 0%; - --tw-mask-top-to-position: 100%; - --tw-mask-top-from-color: black; - --tw-mask-top-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-t-from-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-t-from-\\(--my-var\\), .mask-t-from-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-t-from-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-t-from-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); + --tw-mask-top-from-position: var(--my-var); } - .mask-t-from-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-from-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-from-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-from-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-from-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-from-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-from-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-top-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-top-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-top-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-top-from-position: 0%; + --tw-mask-top-to-position: 100%; + --tw-mask-top-from-color: black; + --tw-mask-top-to-color: transparent; + } + } + } " `) expect( @@ -16222,201 +14290,152 @@ test('mask-t-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-top-from-position: 0%; - --tw-mask-top-to-position: 100%; - --tw-mask-top-from-color: black; - --tw-mask-top-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-t-to-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-t-to-\\(--my-var\\), .mask-t-to-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-t-to-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-t-to-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); + --tw-mask-top-to-position: var(--my-var); } - .mask-t-to-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-to-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-to-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-to-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-to-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-to-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-t-to-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-top-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-top-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-top-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-top-from-position: 0%; + --tw-mask-top-to-position: 100%; + --tw-mask-top-from-color: black; + --tw-mask-top-to-color: transparent; + } + } + } " `) expect( @@ -16483,201 +14502,152 @@ test('mask-r-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-right-from-position: 0%; - --tw-mask-right-to-position: 100%; - --tw-mask-right-from-color: black; - --tw-mask-right-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-r-from-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-r-from-\\(--my-var\\), .mask-r-from-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-r-from-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-r-from-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); + --tw-mask-right-from-position: var(--my-var); } - .mask-r-from-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-from-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-from-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-from-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-from-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-from-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-from-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-right-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-right-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-right-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-right-from-position: 0%; + --tw-mask-right-to-position: 100%; + --tw-mask-right-from-color: black; + --tw-mask-right-to-color: transparent; + } + } + } " `) expect( @@ -16744,201 +14714,152 @@ test('mask-r-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-right-from-position: 0%; - --tw-mask-right-to-position: 100%; - --tw-mask-right-from-color: black; - --tw-mask-right-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-r-to-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-r-to-\\(--my-var\\), .mask-r-to-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-r-to-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-r-to-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); + --tw-mask-right-to-position: var(--my-var); } - .mask-r-to-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-to-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-to-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-to-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-to-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-to-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-r-to-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-right-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-right-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-right-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-right-from-position: 0%; + --tw-mask-right-to-position: 100%; + --tw-mask-right-from-color: black; + --tw-mask-right-to-color: transparent; + } + } + } " `) expect( @@ -17005,201 +14926,152 @@ test('mask-b-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-bottom-from-position: 0%; - --tw-mask-bottom-to-position: 100%; - --tw-mask-bottom-from-color: black; - --tw-mask-bottom-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-b-from-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-b-from-\\(--my-var\\), .mask-b-from-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-b-from-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-b-from-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); + --tw-mask-bottom-from-position: var(--my-var); } - .mask-b-from-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-from-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-from-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-from-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-from-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-from-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-from-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-bottom-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-bottom-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-bottom-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-bottom-from-position: 0%; + --tw-mask-bottom-to-position: 100%; + --tw-mask-bottom-from-color: black; + --tw-mask-bottom-to-color: transparent; + } + } + } " `) expect( @@ -17266,201 +15138,152 @@ test('mask-b-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-bottom-from-position: 0%; - --tw-mask-bottom-to-position: 100%; - --tw-mask-bottom-from-color: black; - --tw-mask-bottom-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-b-to-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-b-to-\\(--my-var\\), .mask-b-to-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-b-to-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-b-to-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); + --tw-mask-bottom-to-position: var(--my-var); } - .mask-b-to-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-to-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-to-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-to-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-to-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-to-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-b-to-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-bottom-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-bottom-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-bottom-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-bottom-from-position: 0%; + --tw-mask-bottom-to-position: 100%; + --tw-mask-bottom-from-color: black; + --tw-mask-bottom-to-color: transparent; + } + } + } " `) expect( @@ -17527,201 +15350,152 @@ test('mask-l-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-left-from-position: 0%; - --tw-mask-left-to-position: 100%; - --tw-mask-left-from-color: black; - --tw-mask-left-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-l-from-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-l-from-\\(--my-var\\), .mask-l-from-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-l-from-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-l-from-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); + --tw-mask-left-from-position: var(--my-var); } - .mask-l-from-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-from-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-from-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-from-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-from-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-from-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-from-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-left-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-left-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-left-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-left-from-position: 0%; + --tw-mask-left-to-position: 100%; + --tw-mask-left-from-color: black; + --tw-mask-left-to-color: transparent; + } + } + } " `) expect( @@ -17788,201 +15562,152 @@ test('mask-l-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-left-from-position: 0%; - --tw-mask-left-to-position: 100%; - --tw-mask-left-from-color: black; - --tw-mask-left-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-l-to-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-l-to-\\(--my-var\\), .mask-l-to-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-l-to-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-l-to-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); + --tw-mask-left-to-position: var(--my-var); } - .mask-l-to-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-to-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-to-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-to-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-to-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-to-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-l-to-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-left-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-left-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-left-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-left-from-position: 0%; + --tw-mask-left-to-position: 100%; + --tw-mask-left-from-color: black; + --tw-mask-left-to-color: transparent; + } + } + } " `) expect( @@ -18049,247 +15774,196 @@ test('mask-x-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-right-from-position: 0%; - --tw-mask-right-to-position: 100%; - --tw-mask-right-from-color: black; - --tw-mask-right-to-color: transparent; - --tw-mask-left-from-position: 0%; - --tw-mask-left-to-position: 100%; - --tw-mask-left-from-color: black; - --tw-mask-left-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-x-from-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-color: var(--my-var); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-x-from-\\(--my-var\\), .mask-x-from-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-x-from-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: var(--my-var); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-x-from-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); + --tw-mask-right-from-position: var(--my-var); + --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); + --tw-mask-left-from-position: var(--my-var); } - .mask-x-from-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 0); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-from-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-from-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 1.5); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-from-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 2); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-from-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 2%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-from-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-from-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0px; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-right-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-right-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-right-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @property --tw-mask-left-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-left-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-left-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-left-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-right-from-position: 0%; + --tw-mask-right-to-position: 100%; + --tw-mask-right-from-color: black; + --tw-mask-right-to-color: transparent; + --tw-mask-left-from-position: 0%; + --tw-mask-left-to-position: 100%; + --tw-mask-left-from-color: black; + --tw-mask-left-to-color: transparent; + } + } + } " `) expect( @@ -18356,247 +16030,196 @@ test('mask-x-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-right-from-position: 0%; - --tw-mask-right-to-position: 100%; - --tw-mask-right-from-color: black; - --tw-mask-right-to-color: transparent; - --tw-mask-left-from-position: 0%; - --tw-mask-left-to-position: 100%; - --tw-mask-left-from-color: black; - --tw-mask-left-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-x-to-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-color: var(--my-var); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-x-to-\\(--my-var\\), .mask-x-to-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-x-to-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: var(--my-var); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-x-to-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); + --tw-mask-right-to-position: var(--my-var); + --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); + --tw-mask-left-to-position: var(--my-var); } - .mask-x-to-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 0); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-to-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-to-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 1.5); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-to-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 2); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-to-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 2%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-to-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-x-to-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0px; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-right-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-right-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-right-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @property --tw-mask-left-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-left-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-left-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-left-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-right-from-position: 0%; + --tw-mask-right-to-position: 100%; + --tw-mask-right-from-color: black; + --tw-mask-right-to-color: transparent; + --tw-mask-left-from-position: 0%; + --tw-mask-left-to-position: 100%; + --tw-mask-left-from-color: black; + --tw-mask-left-to-color: transparent; + } + } + } " `) expect( @@ -18663,247 +16286,196 @@ test('mask-y-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-top-from-position: 0%; - --tw-mask-top-to-position: 100%; - --tw-mask-top-from-color: black; - --tw-mask-top-to-color: transparent; - --tw-mask-bottom-from-position: 0%; - --tw-mask-bottom-to-position: 100%; - --tw-mask-bottom-from-color: black; - --tw-mask-bottom-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-y-from-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-color: var(--my-var); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-y-from-\\(--my-var\\), .mask-y-from-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-y-from-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: var(--my-var); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-y-from-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); + --tw-mask-top-from-position: var(--my-var); + --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); + --tw-mask-bottom-from-position: var(--my-var); } - .mask-y-from-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 0); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-from-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-from-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 1.5); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-from-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 2); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-from-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 2%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-from-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-from-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0px; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-top-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-top-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-top-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @property --tw-mask-bottom-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-bottom-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-bottom-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-bottom-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-top-from-position: 0%; + --tw-mask-top-to-position: 100%; + --tw-mask-top-from-color: black; + --tw-mask-top-to-color: transparent; + --tw-mask-bottom-from-position: 0%; + --tw-mask-bottom-to-position: 100%; + --tw-mask-bottom-from-color: black; + --tw-mask-bottom-to-color: transparent; + } + } + } " `) expect( @@ -18970,247 +16542,196 @@ test('mask-y-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-top-from-position: 0%; - --tw-mask-top-to-position: 100%; - --tw-mask-top-from-color: black; - --tw-mask-top-to-color: transparent; - --tw-mask-bottom-from-position: 0%; - --tw-mask-bottom-to-position: 100%; - --tw-mask-bottom-from-color: black; - --tw-mask-bottom-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-y-to-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-color: var(--my-var); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-y-to-\\(--my-var\\), .mask-y-to-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-y-to-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: var(--my-var); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-y-to-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); + --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); + --tw-mask-top-to-position: var(--my-var); + --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); + --tw-mask-bottom-to-position: var(--my-var); } - .mask-y-to-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 0); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-to-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-to-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 1.5); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-to-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 2); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-to-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 2%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-to-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-y-to-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0px; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-top-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-top-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-top-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-top-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @property --tw-mask-bottom-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-bottom-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-bottom-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-bottom-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-top-from-position: 0%; + --tw-mask-top-to-position: 100%; + --tw-mask-top-from-color: black; + --tw-mask-top-to-color: transparent; + --tw-mask-bottom-from-position: 0%; + --tw-mask-bottom-to-position: 100%; + --tw-mask-bottom-from-color: black; + --tw-mask-bottom-to-color: transparent; + } + } + } " `) expect( @@ -19247,110 +16768,88 @@ test('mask-y-to', async () => { ], input, ), - ).toEqual('') -}) - -test('mask-linear', async () => { - expect(await run(['mask-linear-45', 'mask-linear-[3rad]', '-mask-linear-45'])) - .toMatchInlineSnapshot(` - " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-linear-position: 0deg; - --tw-mask-linear-from-position: 0%; - --tw-mask-linear-to-position: 100%; - --tw-mask-linear-from-color: black; - --tw-mask-linear-to-color: transparent; - } - } - } - - .-mask-linear-45 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position))); - --tw-mask-linear-position: calc(1deg * -45); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; - } - - .mask-linear-45 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position))); - --tw-mask-linear-position: calc(1deg * 45); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; - } - - .mask-linear-\\[3rad\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position))); - --tw-mask-linear-position: 171.887deg; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; - } - - @property --tw-mask-linear { - syntax: "*"; - inherits: false; - initial-value: linear-gradient(#fff, #fff); - } - - @property --tw-mask-radial { - syntax: "*"; - inherits: false; - initial-value: linear-gradient(#fff, #fff); - } - - @property --tw-mask-conic { - syntax: "*"; - inherits: false; - initial-value: linear-gradient(#fff, #fff); - } - - @property --tw-mask-linear-position { - syntax: "*"; - inherits: false; - initial-value: 0deg; - } - - @property --tw-mask-linear-from-position { - syntax: "*"; - inherits: false; - initial-value: 0%; - } - - @property --tw-mask-linear-to-position { - syntax: "*"; - inherits: false; - initial-value: 100%; - } - - @property --tw-mask-linear-from-color { - syntax: "*"; - inherits: false; - initial-value: black; - } + ).toEqual('') +}) - @property --tw-mask-linear-to-color { - syntax: "*"; - inherits: false; - initial-value: transparent; - } - " - `) +test('mask-linear', async () => { + expect(await run(['mask-linear-45', 'mask-linear-[3rad]', '-mask-linear-45'])) + .toMatchInlineSnapshot(` + " + @layer properties; + .-mask-linear-45 { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; + --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position))); + --tw-mask-linear-position: calc(1deg * -45); + } + .mask-linear-45 { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; + --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position))); + --tw-mask-linear-position: calc(1deg * 45); + } + .mask-linear-\\[3rad\\] { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; + --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position))); + --tw-mask-linear-position: 3rad; + } + @property --tw-mask-linear { + syntax: "*"; + inherits: false; + initial-value: linear-gradient(#fff, #fff); + } + @property --tw-mask-radial { + syntax: "*"; + inherits: false; + initial-value: linear-gradient(#fff, #fff); + } + @property --tw-mask-conic { + syntax: "*"; + inherits: false; + initial-value: linear-gradient(#fff, #fff); + } + @property --tw-mask-linear-position { + syntax: "*"; + inherits: false; + initial-value: 0deg; + } + @property --tw-mask-linear-from-position { + syntax: "*"; + inherits: false; + initial-value: 0%; + } + @property --tw-mask-linear-to-position { + syntax: "*"; + inherits: false; + initial-value: 100%; + } + @property --tw-mask-linear-from-color { + syntax: "*"; + inherits: false; + initial-value: black; + } + @property --tw-mask-linear-to-color { + syntax: "*"; + inherits: false; + initial-value: transparent; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-linear-position: 0deg; + --tw-mask-linear-from-position: 0%; + --tw-mask-linear-to-position: 100%; + --tw-mask-linear-from-color: black; + --tw-mask-linear-to-color: transparent; + } + } + } + " + `) expect( await run([ 'mask-linear', @@ -19397,180 +16896,134 @@ test('mask-linear-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-linear-position: 0deg; - --tw-mask-linear-from-position: 0%; - --tw-mask-linear-to-position: 100%; - --tw-mask-linear-from-color: black; - --tw-mask-linear-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-linear-from-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-linear-from-\\(--my-var\\), .mask-linear-from-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-linear-from-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-linear-from-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); + --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); + --tw-mask-linear-from-position: var(--my-var); } - .mask-linear-from-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-from-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-from-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-from-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-from-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-from-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-from-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-linear-position { syntax: "*"; inherits: false; initial-value: 0deg; } - @property --tw-mask-linear-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-linear-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-linear-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-linear-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-linear-position: 0deg; + --tw-mask-linear-from-position: 0%; + --tw-mask-linear-to-position: 100%; + --tw-mask-linear-from-color: black; + --tw-mask-linear-to-color: transparent; + } + } + } " `) expect( @@ -19637,180 +17090,134 @@ test('mask-linear-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-linear-position: 0deg; - --tw-mask-linear-from-position: 0%; - --tw-mask-linear-to-position: 100%; - --tw-mask-linear-from-color: black; - --tw-mask-linear-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-linear-to-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-linear-to-\\(--my-var\\), .mask-linear-to-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-linear-to-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-linear-to-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); + --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); + --tw-mask-linear-to-position: var(--my-var); } - .mask-linear-to-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-to-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-to-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-to-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-to-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-to-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-linear-to-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-linear-position { syntax: "*"; inherits: false; initial-value: 0deg; } - @property --tw-mask-linear-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-linear-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-linear-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-linear-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-linear-position: 0deg; + --tw-mask-linear-from-position: 0%; + --tw-mask-linear-to-position: 100%; + --tw-mask-linear-from-color: black; + --tw-mask-linear-to-color: transparent; + } + } + } " `) expect( @@ -19863,117 +17270,97 @@ test('mask-radial', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-radial-from-position: 0%; - --tw-mask-radial-to-position: 100%; - --tw-mask-radial-from-color: black; - --tw-mask-radial-to-color: transparent; - --tw-mask-radial-shape: ellipse; - --tw-mask-radial-size: farthest-corner; - --tw-mask-radial-position: center; - } - } - } - + @layer properties; .mask-radial-\\[25\\%_25\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops, var(--tw-mask-radial-size))); --tw-mask-radial-size: 25% 25%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-circle { --tw-mask-radial-shape: circle; } - .mask-ellipse { --tw-mask-radial-shape: ellipse; } - .mask-radial-closest-corner { --tw-mask-radial-size: closest-corner; } - .mask-radial-closest-side { --tw-mask-radial-size: closest-side; } - .mask-radial-farthest-corner { --tw-mask-radial-size: farthest-corner; } - .mask-radial-farthest-side { --tw-mask-radial-size: farthest-side; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-radial-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-radial-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-radial-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @property --tw-mask-radial-shape { syntax: "*"; inherits: false; initial-value: ellipse; } - @property --tw-mask-radial-size { syntax: "*"; inherits: false; initial-value: farthest-corner; } - @property --tw-mask-radial-position { syntax: "*"; inherits: false; initial-value: center; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-radial-from-position: 0%; + --tw-mask-radial-to-position: 100%; + --tw-mask-radial-from-color: black; + --tw-mask-radial-to-color: transparent; + --tw-mask-radial-shape: ellipse; + --tw-mask-radial-size: farthest-corner; + --tw-mask-radial-position: center; + } + } + } " `) expect( @@ -20022,35 +17409,27 @@ test('mask-radial-at', async () => { .mask-radial-at-\\[25\\%\\] { --tw-mask-radial-position: 25%; } - .mask-radial-at-bottom { --tw-mask-radial-position: bottom; } - .mask-radial-at-bottom-left { --tw-mask-radial-position: bottom left; } - .mask-radial-at-bottom-right { --tw-mask-radial-position: bottom right; } - .mask-radial-at-left { --tw-mask-radial-position: left; } - .mask-radial-at-right { --tw-mask-radial-position: right; } - .mask-radial-at-top { --tw-mask-radial-position: top; } - .mask-radial-at-top-left { --tw-mask-radial-position: top left; } - .mask-radial-at-top-right { --tw-mask-radial-position: top right; } @@ -20124,194 +17503,146 @@ test('mask-radial-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-radial-from-position: 0%; - --tw-mask-radial-to-position: 100%; - --tw-mask-radial-from-color: black; - --tw-mask-radial-to-color: transparent; - --tw-mask-radial-shape: ellipse; - --tw-mask-radial-size: farthest-corner; - --tw-mask-radial-position: center; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-radial-from-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-radial-from-\\(--my-var\\), .mask-radial-from-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-radial-from-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-radial-from-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); + --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); + --tw-mask-radial-from-position: var(--my-var); } - .mask-radial-from-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-from-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-from-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-from-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-from-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-from-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-from-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-radial-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-radial-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-radial-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @property --tw-mask-radial-shape { syntax: "*"; inherits: false; initial-value: ellipse; } - @property --tw-mask-radial-size { syntax: "*"; inherits: false; initial-value: farthest-corner; } - @property --tw-mask-radial-position { syntax: "*"; inherits: false; initial-value: center; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-radial-from-position: 0%; + --tw-mask-radial-to-position: 100%; + --tw-mask-radial-from-color: black; + --tw-mask-radial-to-color: transparent; + --tw-mask-radial-shape: ellipse; + --tw-mask-radial-size: farthest-corner; + --tw-mask-radial-position: center; + } + } + } " `) expect( @@ -20378,194 +17709,146 @@ test('mask-radial-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-radial-from-position: 0%; - --tw-mask-radial-to-position: 100%; - --tw-mask-radial-from-color: black; - --tw-mask-radial-to-color: transparent; - --tw-mask-radial-shape: ellipse; - --tw-mask-radial-size: farthest-corner; - --tw-mask-radial-position: center; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-radial-to-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-radial-to-\\(--my-var\\), .mask-radial-to-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-radial-to-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-radial-to-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); + --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); + --tw-mask-radial-to-position: var(--my-var); } - .mask-radial-to-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-to-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-to-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-to-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-to-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-to-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-radial-to-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-radial-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-radial-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-radial-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @property --tw-mask-radial-shape { syntax: "*"; inherits: false; initial-value: ellipse; } - @property --tw-mask-radial-size { syntax: "*"; inherits: false; initial-value: farthest-corner; } - @property --tw-mask-radial-position { syntax: "*"; inherits: false; initial-value: center; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-radial-from-position: 0%; + --tw-mask-radial-to-position: 100%; + --tw-mask-radial-from-color: black; + --tw-mask-radial-to-color: transparent; + --tw-mask-radial-shape: ellipse; + --tw-mask-radial-size: farthest-corner; + --tw-mask-radial-position: center; + } + } + } " `) expect( @@ -20608,104 +17891,82 @@ test('mask-radial-to', async () => { test('mask-conic', async () => { expect(await run(['mask-conic-45', 'mask-conic-[3rad]', '-mask-conic-45'])) .toMatchInlineSnapshot(` - " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-conic-position: 0deg; - --tw-mask-conic-from-position: 0%; - --tw-mask-conic-to-position: 100%; - --tw-mask-conic-from-color: black; - --tw-mask-conic-to-color: transparent; + " + @layer properties; + .-mask-conic-45 { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; + --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position))); + --tw-mask-conic-position: calc(1deg * -45); + } + .mask-conic-45 { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; + --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position))); + --tw-mask-conic-position: calc(1deg * 45); + } + .mask-conic-\\[3rad\\] { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; + --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position))); + --tw-mask-conic-position: 3rad; + } + @property --tw-mask-linear { + syntax: "*"; + inherits: false; + initial-value: linear-gradient(#fff, #fff); + } + @property --tw-mask-radial { + syntax: "*"; + inherits: false; + initial-value: linear-gradient(#fff, #fff); + } + @property --tw-mask-conic { + syntax: "*"; + inherits: false; + initial-value: linear-gradient(#fff, #fff); + } + @property --tw-mask-conic-position { + syntax: "*"; + inherits: false; + initial-value: 0deg; + } + @property --tw-mask-conic-from-position { + syntax: "*"; + inherits: false; + initial-value: 0%; + } + @property --tw-mask-conic-to-position { + syntax: "*"; + inherits: false; + initial-value: 100%; + } + @property --tw-mask-conic-from-color { + syntax: "*"; + inherits: false; + initial-value: black; + } + @property --tw-mask-conic-to-color { + syntax: "*"; + inherits: false; + initial-value: transparent; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-conic-position: 0deg; + --tw-mask-conic-from-position: 0%; + --tw-mask-conic-to-position: 100%; + --tw-mask-conic-from-color: black; + --tw-mask-conic-to-color: transparent; + } } } - } - - .-mask-conic-45 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position))); - --tw-mask-conic-position: calc(1deg * -45); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; - } - - .mask-conic-45 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position))); - --tw-mask-conic-position: calc(1deg * 45); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; - } - - .mask-conic-\\[3rad\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position))); - --tw-mask-conic-position: 171.887deg; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; - } - - @property --tw-mask-linear { - syntax: "*"; - inherits: false; - initial-value: linear-gradient(#fff, #fff); - } - - @property --tw-mask-radial { - syntax: "*"; - inherits: false; - initial-value: linear-gradient(#fff, #fff); - } - - @property --tw-mask-conic { - syntax: "*"; - inherits: false; - initial-value: linear-gradient(#fff, #fff); - } - - @property --tw-mask-conic-position { - syntax: "*"; - inherits: false; - initial-value: 0deg; - } - - @property --tw-mask-conic-from-position { - syntax: "*"; - inherits: false; - initial-value: 0%; - } - - @property --tw-mask-conic-to-position { - syntax: "*"; - inherits: false; - initial-value: 100%; - } - - @property --tw-mask-conic-from-color { - syntax: "*"; - inherits: false; - initial-value: black; - } - - @property --tw-mask-conic-to-color { - syntax: "*"; - inherits: false; - initial-value: transparent; - } - " - `) + " + `) expect( await run([ 'mask-conic', @@ -20752,180 +18013,134 @@ test('mask-conic-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-conic-position: 0deg; - --tw-mask-conic-from-position: 0%; - --tw-mask-conic-to-position: 100%; - --tw-mask-conic-from-color: black; - --tw-mask-conic-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-conic-from-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-conic-from-\\(--my-var\\), .mask-conic-from-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-conic-from-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-conic-from-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); + --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); + --tw-mask-conic-from-position: var(--my-var); } - .mask-conic-from-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-from-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-from-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-from-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-from-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-from-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-from-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic-position { syntax: "*"; inherits: false; initial-value: 0deg; } - @property --tw-mask-conic-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-conic-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-conic-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-conic-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-conic-position: 0deg; + --tw-mask-conic-from-position: 0%; + --tw-mask-conic-to-position: 100%; + --tw-mask-conic-from-color: black; + --tw-mask-conic-to-color: transparent; + } + } + } " `) expect( @@ -20992,180 +18207,134 @@ test('mask-conic-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-conic-position: 0deg; - --tw-mask-conic-from-position: 0%; - --tw-mask-conic-to-position: 100%; - --tw-mask-conic-from-color: black; - --tw-mask-conic-to-color: transparent; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; } - .mask-conic-to-\\(color\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-color: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - - .mask-conic-to-\\(--my-var\\), .mask-conic-to-\\(length\\:--my-var\\) { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + .mask-conic-to-\\(--my-var\\) { mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: var(--my-var); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; + } + .mask-conic-to-\\(length\\:--my-var\\) { + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-composite: intersect; + --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); + --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); + --tw-mask-conic-to-position: var(--my-var); } - .mask-conic-to-0 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: calc(var(--spacing) * 0); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-to-0\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-to-1\\.5 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: calc(var(--spacing) * 1.5); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-to-2 { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: calc(var(--spacing) * 2); - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-to-2\\% { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: 2%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-to-\\[0\\%\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: 0%; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - .mask-conic-to-\\[0px\\] { - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: 0px; - -webkit-mask-composite: source-in; - -webkit-mask-composite: source-in; - mask-composite: intersect; } - @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } - @property --tw-mask-conic-position { syntax: "*"; inherits: false; initial-value: 0deg; } - @property --tw-mask-conic-from-position { syntax: "*"; inherits: false; initial-value: 0%; } - @property --tw-mask-conic-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-conic-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-conic-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-conic-position: 0deg; + --tw-mask-conic-from-position: 0%; + --tw-mask-conic-to-position: 100%; + --tw-mask-conic-from-color: black; + --tw-mask-conic-to-color: transparent; + } + } + } " `) expect( @@ -21212,7 +18381,6 @@ test('box-decoration', async () => { -webkit-box-decoration-break: clone; box-decoration-break: clone; } - .box-decoration-slice { -webkit-box-decoration-break: slice; box-decoration-break: slice; @@ -21238,17 +18406,13 @@ test('bg-clip', async () => { .bg-clip-border { background-clip: border-box; } - .bg-clip-content { background-clip: content-box; } - .bg-clip-padding { background-clip: padding-box; } - .bg-clip-text { - -webkit-background-clip: text; background-clip: text; } " @@ -21275,11 +18439,9 @@ test('bg-origin', async () => { .bg-origin-border { background-origin: border-box; } - .bg-origin-content { background-origin: content-box; } - .bg-origin-padding { background-origin: padding-box; } @@ -21312,37 +18474,24 @@ test('mask-clip', async () => { ).toMatchInlineSnapshot(` " .mask-clip-border { - -webkit-mask-clip: border-box; mask-clip: border-box; } - .mask-clip-content { - -webkit-mask-clip: content-box; mask-clip: content-box; } - .mask-clip-fill { - -webkit-mask-clip: fill-box; mask-clip: fill-box; } - .mask-clip-padding { - -webkit-mask-clip: padding-box; mask-clip: padding-box; } - .mask-clip-stroke { - -webkit-mask-clip: stroke-box; mask-clip: stroke-box; } - .mask-clip-view { - -webkit-mask-clip: view-box; mask-clip: view-box; } - .mask-no-clip { - -webkit-mask-clip: no-clip; mask-clip: no-clip; } " @@ -21381,32 +18530,21 @@ test('mask-origin', async () => { ).toMatchInlineSnapshot(` " .mask-origin-border { - -webkit-mask-origin: border-box; mask-origin: border-box; } - .mask-origin-content { - -webkit-mask-origin: content-box; mask-origin: content-box; } - .mask-origin-fill { - -webkit-mask-origin: fill-box; mask-origin: fill-box; } - .mask-origin-padding { - -webkit-mask-origin: padding-box; mask-origin: padding-box; } - .mask-origin-stroke { - -webkit-mask-origin: stroke-box; mask-origin: stroke-box; } - .mask-origin-view { - -webkit-mask-origin: view-box; mask-origin: view-box; } " @@ -21455,63 +18593,48 @@ test('bg-blend', async () => { .bg-blend-color { background-blend-mode: color; } - .bg-blend-color-burn { background-blend-mode: color-burn; } - .bg-blend-color-dodge { background-blend-mode: color-dodge; } - .bg-blend-darken { background-blend-mode: darken; } - .bg-blend-difference { background-blend-mode: difference; } - .bg-blend-exclusion { background-blend-mode: exclusion; } - .bg-blend-hard-light { background-blend-mode: hard-light; } - .bg-blend-hue { background-blend-mode: hue; } - .bg-blend-lighten { background-blend-mode: lighten; } - .bg-blend-luminosity { background-blend-mode: luminosity; } - .bg-blend-multiply { background-blend-mode: multiply; } - .bg-blend-normal { background-blend-mode: normal; } - .bg-blend-overlay { background-blend-mode: overlay; } - .bg-blend-saturation { background-blend-mode: saturation; } - .bg-blend-screen { background-blend-mode: screen; } - .bg-blend-soft-light { background-blend-mode: soft-light; } @@ -21583,71 +18706,54 @@ test('mix-blend', async () => { .mix-blend-color { mix-blend-mode: color; } - .mix-blend-color-burn { mix-blend-mode: color-burn; } - .mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .mix-blend-darken { mix-blend-mode: darken; } - .mix-blend-difference { mix-blend-mode: difference; } - .mix-blend-exclusion { mix-blend-mode: exclusion; } - .mix-blend-hard-light { mix-blend-mode: hard-light; } - .mix-blend-hue { mix-blend-mode: hue; } - .mix-blend-lighten { mix-blend-mode: lighten; } - .mix-blend-luminosity { mix-blend-mode: luminosity; } - .mix-blend-multiply { mix-blend-mode: multiply; } - .mix-blend-normal { mix-blend-mode: normal; } - .mix-blend-overlay { mix-blend-mode: overlay; } - .mix-blend-plus-darker { mix-blend-mode: plus-darker; } - .mix-blend-plus-lighter { mix-blend-mode: plus-lighter; } - .mix-blend-saturation { mix-blend-mode: saturation; } - .mix-blend-screen { mix-blend-mode: screen; } - .mix-blend-soft-light { mix-blend-mode: soft-light; } @@ -21732,119 +18838,86 @@ test('fill', async () => { --color-red-500: #ef4444; --fill-blue-500: #3b82f6; } - .fill-\\[\\#0088cc\\] { - fill: #08c; + fill: #0088cc; } - - .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { - fill: oklab(59.9824% -.067 -.124 / .5); + .fill-\\[\\#0088cc\\]\\/50 { + fill: color-mix(in oklab, #0088cc 50%, transparent); + } + .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + fill: color-mix(in oklab, #0088cc 50%, transparent); + } + .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { + fill: color-mix(in oklab, #0088cc 50%, transparent); } - .fill-blue-500 { fill: var(--fill-blue-500); } - - .fill-current, .fill-current\\/50 { - fill: currentColor; + .fill-current { + fill: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .fill-current\\/50 { + .fill-current\\/50 { + fill: currentcolor; + @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, currentcolor 50%, transparent); } } - .fill-current\\/\\[0\\.5\\] { - fill: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .fill-current\\/\\[0\\.5\\] { + fill: currentcolor; + @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, currentcolor 50%, transparent); } } - .fill-current\\/\\[50\\%\\] { - fill: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .fill-current\\/\\[50\\%\\] { + fill: currentcolor; + @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, currentcolor 50%, transparent); } } - .fill-inherit { fill: inherit; } - .fill-red-500 { fill: var(--color-red-500); } - .fill-red-500\\/2\\.5 { - fill: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .fill-red-500\\/2\\.5 { + fill: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .fill-red-500\\/2\\.25 { - fill: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .fill-red-500\\/2\\.25 { + fill: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .fill-red-500\\/2\\.75 { - fill: #ef444407; - } - - @supports (color: color-mix(in lab, red, red)) { - .fill-red-500\\/2\\.75 { + fill: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .fill-red-500\\/50 { - fill: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .fill-red-500\\/50 { + fill: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .fill-red-500\\/\\[0\\.5\\] { - fill: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .fill-red-500\\/\\[0\\.5\\] { + fill: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .fill-red-500\\/\\[50\\%\\] { - fill: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .fill-red-500\\/\\[50\\%\\] { + fill: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .fill-transparent { - fill: #0000; + fill: transparent; } " `) @@ -21928,210 +19001,157 @@ test('stroke', async () => { --color-red-500: #ef4444; --stroke-blue-500: #3b82f6; } - .stroke-\\[\\#0088cc\\] { - stroke: #08c; + stroke: #0088cc; } - - .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { - stroke: oklab(59.9824% -.067 -.124 / .5); + .stroke-\\[\\#0088cc\\]\\/50 { + stroke: color-mix(in oklab, #0088cc 50%, transparent); } - - .stroke-\\[color\\:var\\(--my-color\\)\\], .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + stroke: color-mix(in oklab, #0088cc 50%, transparent); + } + .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { + stroke: color-mix(in oklab, #0088cc 50%, transparent); + } + .stroke-\\[color\\:var\\(--my-color\\)\\] { stroke: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 { + stroke: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { stroke: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { stroke: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } - - .stroke-\\[var\\(--my-color\\)\\], .stroke-\\[var\\(--my-color\\)\\]\\/50 { + .stroke-\\[var\\(--my-color\\)\\] { stroke: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-\\[var\\(--my-color\\)\\]\\/50 { + .stroke-\\[var\\(--my-color\\)\\]\\/50 { + stroke: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { stroke: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { stroke: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .stroke-blue-500 { stroke: var(--stroke-blue-500); } - - .stroke-current, .stroke-current\\/50 { - stroke: currentColor; + .stroke-current { + stroke: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-current\\/50 { + .stroke-current\\/50 { + stroke: currentcolor; + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, currentcolor 50%, transparent); } } - .stroke-current\\/\\[0\\.5\\] { - stroke: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-current\\/\\[0\\.5\\] { + stroke: currentcolor; + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, currentcolor 50%, transparent); } } - .stroke-current\\/\\[50\\%\\] { - stroke: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-current\\/\\[50\\%\\] { + stroke: currentcolor; + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, currentcolor 50%, transparent); } } - .stroke-inherit { stroke: inherit; } - .stroke-none { stroke: none; } - .stroke-red-500 { stroke: var(--color-red-500); } - .stroke-red-500\\/2\\.5 { - stroke: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-red-500\\/2\\.5 { + stroke: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .stroke-red-500\\/2\\.25 { - stroke: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-red-500\\/2\\.25 { + stroke: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .stroke-red-500\\/2\\.75 { - stroke: #ef444407; - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-red-500\\/2\\.75 { + stroke: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .stroke-red-500\\/50 { - stroke: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-red-500\\/50 { + stroke: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .stroke-red-500\\/\\[0\\.5\\] { - stroke: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-red-500\\/\\[0\\.5\\] { + stroke: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .stroke-red-500\\/\\[50\\%\\] { - stroke: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .stroke-red-500\\/\\[50\\%\\] { + stroke: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .stroke-transparent { - stroke: #0000; + stroke: transparent; } - .stroke-0 { stroke-width: 0; } - .stroke-1 { - stroke-width: 1px; + stroke-width: 1; } - .stroke-2 { - stroke-width: 2px; + stroke-width: 2; } - .stroke-\\[1\\.5\\] { - stroke-width: 1.5px; + stroke-width: 1.5; } - .stroke-\\[12px\\] { stroke-width: 12px; } - .stroke-\\[50\\%\\] { stroke-width: 50%; } - - .stroke-\\[length\\:var\\(--my-width\\)\\], .stroke-\\[number\\:var\\(--my-width\\)\\], .stroke-\\[percentage\\:var\\(--my-width\\)\\] { + .stroke-\\[length\\:var\\(--my-width\\)\\] { + stroke-width: var(--my-width); + } + .stroke-\\[number\\:var\\(--my-width\\)\\] { + stroke-width: var(--my-width); + } + .stroke-\\[percentage\\:var\\(--my-width\\)\\] { stroke-width: var(--my-width); } " @@ -22197,75 +19217,57 @@ test('object', async () => { .object-contain { object-fit: contain; } - .object-cover { object-fit: cover; } - .object-fill { object-fit: fill; } - .object-none { object-fit: none; } - .object-scale-down { object-fit: scale-down; } - .object-\\[var\\(--value\\)\\] { object-position: var(--value); } - .object-bottom { object-position: bottom; } - .object-bottom-left { object-position: left bottom; } - .object-bottom-right { object-position: right bottom; } - .object-center { object-position: center; } - .object-left { object-position: left; } - .object-left-bottom { object-position: left bottom; } - .object-left-top { object-position: left top; } - .object-right { object-position: right; } - .object-right-bottom { object-position: right bottom; } - .object-right-top { object-position: right top; } - .object-top { object-position: top; } - .object-top-left { object-position: left top; } - .object-top-right { object-position: right top; } @@ -22318,7 +19320,6 @@ test('object', async () => { :root, :host { --object-position-center: top left; } - .object-center { object-position: var(--object-position-center); } @@ -22341,26 +19342,21 @@ test('p', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .p-1 { padding: calc(var(--spacing) * 1); } - .p-4 { padding: calc(var(--spacing) * 4); } - .p-99 { padding: calc(var(--spacing) * 99); } - .p-\\[4px\\] { padding: 4px; } - .p-big { padding: var(--spacing-big); } @@ -22384,26 +19380,21 @@ test('px', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .px-1 { padding-inline: calc(var(--spacing) * 1); } - .px-2\\.5 { padding-inline: calc(var(--spacing) * 2.5); } - .px-99 { padding-inline: calc(var(--spacing) * 99); } - .px-\\[4px\\] { padding-inline: 4px; } - .px-big { padding-inline: var(--spacing-big); } @@ -22427,26 +19418,21 @@ test('py', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .py-1 { padding-block: calc(var(--spacing) * 1); } - .py-4 { padding-block: calc(var(--spacing) * 4); } - .py-99 { padding-block: calc(var(--spacing) * 99); } - .py-\\[4px\\] { padding-block: 4px; } - .py-big { padding-block: var(--spacing-big); } @@ -22470,26 +19456,21 @@ test('pt', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .pt-1 { padding-top: calc(var(--spacing) * 1); } - .pt-4 { padding-top: calc(var(--spacing) * 4); } - .pt-99 { padding-top: calc(var(--spacing) * 99); } - .pt-\\[4px\\] { padding-top: 4px; } - .pt-big { padding-top: var(--spacing-big); } @@ -22513,26 +19494,21 @@ test('ps', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .ps-1 { padding-inline-start: calc(var(--spacing) * 1); } - .ps-4 { padding-inline-start: calc(var(--spacing) * 4); } - .ps-99 { padding-inline-start: calc(var(--spacing) * 99); } - .ps-\\[4px\\] { padding-inline-start: 4px; } - .ps-big { padding-inline-start: var(--spacing-big); } @@ -22556,26 +19532,21 @@ test('pe', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .pe-1 { padding-inline-end: calc(var(--spacing) * 1); } - .pe-4 { padding-inline-end: calc(var(--spacing) * 4); } - .pe-99 { padding-inline-end: calc(var(--spacing) * 99); } - .pe-\\[4px\\] { padding-inline-end: 4px; } - .pe-big { padding-inline-end: var(--spacing-big); } @@ -22599,26 +19570,21 @@ test('pbs', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .pbs-1 { padding-block-start: calc(var(--spacing) * 1); } - .pbs-4 { padding-block-start: calc(var(--spacing) * 4); } - .pbs-99 { padding-block-start: calc(var(--spacing) * 99); } - .pbs-\\[4px\\] { padding-block-start: 4px; } - .pbs-big { padding-block-start: var(--spacing-big); } @@ -22642,26 +19608,21 @@ test('pbe', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .pbe-1 { padding-block-end: calc(var(--spacing) * 1); } - .pbe-4 { padding-block-end: calc(var(--spacing) * 4); } - .pbe-99 { padding-block-end: calc(var(--spacing) * 99); } - .pbe-\\[4px\\] { padding-block-end: 4px; } - .pbe-big { padding-block-end: var(--spacing-big); } @@ -22685,26 +19646,21 @@ test('pr', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .pr-1 { padding-right: calc(var(--spacing) * 1); } - .pr-4 { padding-right: calc(var(--spacing) * 4); } - .pr-99 { padding-right: calc(var(--spacing) * 99); } - .pr-\\[4px\\] { padding-right: 4px; } - .pr-big { padding-right: var(--spacing-big); } @@ -22728,26 +19684,21 @@ test('pb', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .pb-1 { padding-bottom: calc(var(--spacing) * 1); } - .pb-4 { padding-bottom: calc(var(--spacing) * 4); } - .pb-99 { padding-bottom: calc(var(--spacing) * 99); } - .pb-\\[4px\\] { padding-bottom: 4px; } - .pb-big { padding-bottom: var(--spacing-big); } @@ -22771,26 +19722,21 @@ test('pl', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --spacing-big: 100rem; } - .pl-1 { padding-left: calc(var(--spacing) * 1); } - .pl-4 { padding-left: calc(var(--spacing) * 4); } - .pl-99 { padding-left: calc(var(--spacing) * 99); } - .pl-\\[4px\\] { padding-left: 4px; } - .pl-big { padding-left: var(--spacing-big); } @@ -22807,23 +19753,18 @@ test('text-align', async () => { .text-center { text-align: center; } - .text-end { text-align: end; } - .text-justify { text-align: justify; } - .text-left { text-align: left; } - .text-right { text-align: right; } - .text-start { text-align: start; } @@ -22851,9 +19792,8 @@ test('indent', async () => { expect(await run(['indent-[4px]', '-indent-[4px]'])).toMatchInlineSnapshot(` " .-indent-\\[4px\\] { - text-indent: -4px; + text-indent: calc(4px * -1); } - .indent-\\[4px\\] { text-indent: 4px; } @@ -22881,35 +19821,27 @@ test('align', async () => { .align-\\[var\\(--value\\)\\] { vertical-align: var(--value); } - .align-baseline { vertical-align: baseline; } - .align-bottom { vertical-align: bottom; } - .align-middle { vertical-align: middle; } - .align-sub { vertical-align: sub; } - .align-super { vertical-align: super; } - .align-text-bottom { vertical-align: text-bottom; } - .align-text-top { vertical-align: text-top; } - .align-top { vertical-align: top; } @@ -22971,59 +19903,53 @@ test('font', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-font-weight: initial; - } - } - } - + @layer properties; :root, :host { - --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol", "Noto Color Emoji"; + --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; --font-weight-bold: 650; } - .font-\\[\\"arial_rounded\\"\\] { - font-family: arial rounded; + font-family: "arial rounded"; } - - .font-\\[family-name\\:var\\(--my-family\\)\\], .font-\\[generic-name\\:var\\(--my-family\\)\\] { + .font-\\[family-name\\:var\\(--my-family\\)\\] { + font-family: var(--my-family); + } + .font-\\[generic-name\\:var\\(--my-family\\)\\] { font-family: var(--my-family); } - .font-\\[ui-sans-serif\\] { font-family: ui-sans-serif; } - .font-sans { font-family: var(--font-sans); } - .font-\\[100\\] { --tw-font-weight: 100; font-weight: 100; } - .font-\\[number\\:var\\(--my-weight\\)\\] { --tw-font-weight: var(--my-weight); font-weight: var(--my-weight); } - .font-\\[var\\(--my-family\\)\\] { --tw-font-weight: var(--my-family); font-weight: var(--my-family); } - .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } - @property --tw-font-weight { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-font-weight: initial; + } + } } " `) @@ -23074,15 +20000,12 @@ test('font-features', async () => { .font-features-\\(--my-features\\) { font-feature-settings: var(--my-features); } - .font-features-\\[\\"c2sc\\"\\,\\"smcp\\"\\] { font-feature-settings: "c2sc","smcp"; } - .font-features-\\[\\"smcp\\"\\] { font-feature-settings: "smcp"; } - .font-features-\\[var\\(--my-features\\)\\] { font-feature-settings: var(--my-features); } @@ -23104,15 +20027,12 @@ test('text-transform', async () => { .capitalize { text-transform: capitalize; } - .lowercase { text-transform: lowercase; } - .normal-case { text-transform: none; } - .uppercase { text-transform: uppercase; } @@ -23138,7 +20058,6 @@ test('font-style', async () => { .italic { font-style: italic; } - .not-italic { font-style: normal; } @@ -23154,11 +20073,9 @@ test('font-stretch', async () => { .font-stretch-50\\% { font-stretch: 50%; } - .font-stretch-200\\% { font-stretch: 200%; } - .font-stretch-ultra-expanded { font-stretch: ultra-expanded; } @@ -23186,15 +20103,12 @@ test('text-decoration-line', async () => { .line-through { text-decoration-line: line-through; } - .no-underline { text-decoration-line: none; } - .overline { text-decoration-line: overline; } - .underline { text-decoration-line: underline; } @@ -23248,115 +20162,117 @@ test('placeholder', async () => { :root, :host { --color-red-500: #ef4444; } - - .placeholder-\\[\\#0088cc\\]::placeholder { - color: #08c; - } - - .placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { - color: oklab(59.9824% -.067 -.124 / .5); - } - - .placeholder-current::placeholder, .placeholder-current\\/50::placeholder { - color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .placeholder-current\\/50::placeholder { - color: color-mix(in oklab, currentcolor 50%, transparent); + .placeholder-\\[\\#0088cc\\] { + &::placeholder { + color: #0088cc; } } - - .placeholder-current\\/\\[0\\.5\\]::placeholder { - color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .placeholder-current\\/\\[0\\.5\\]::placeholder { - color: color-mix(in oklab, currentcolor 50%, transparent); + .placeholder-\\[\\#0088cc\\]\\/50 { + &::placeholder { + color: color-mix(in oklab, #0088cc 50%, transparent); } } - - .placeholder-current\\/\\[50\\%\\]::placeholder { - color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .placeholder-current\\/\\[50\\%\\]::placeholder { - color: color-mix(in oklab, currentcolor 50%, transparent); + .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + &::placeholder { + color: color-mix(in oklab, #0088cc 50%, transparent); } } - - .placeholder-inherit::placeholder { - color: inherit; - } - - .placeholder-red-500::placeholder { - color: var(--color-red-500); + .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\] { + &::placeholder { + color: color-mix(in oklab, #0088cc 50%, transparent); + } } - - .placeholder-red-500\\/2\\.5::placeholder { - color: #ef444406; + .placeholder-current { + &::placeholder { + color: currentcolor; + } } - - @supports (color: color-mix(in lab, red, red)) { - .placeholder-red-500\\/2\\.5::placeholder { - color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); + .placeholder-current\\/50 { + &::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } } } - - .placeholder-red-500\\/2\\.25::placeholder { - color: #ef444406; + .placeholder-current\\/\\[0\\.5\\] { + &::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } } - - @supports (color: color-mix(in lab, red, red)) { - .placeholder-red-500\\/2\\.25::placeholder { - color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); + .placeholder-current\\/\\[50\\%\\] { + &::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } } } - - .placeholder-red-500\\/2\\.75::placeholder { - color: #ef444407; + .placeholder-inherit { + &::placeholder { + color: inherit; + } } - - @supports (color: color-mix(in lab, red, red)) { - .placeholder-red-500\\/2\\.75::placeholder { - color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); + .placeholder-red-500 { + &::placeholder { + color: var(--color-red-500); } } - - .placeholder-red-500\\/50::placeholder { - color: #ef444480; + .placeholder-red-500\\/2\\.5 { + &::placeholder { + color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); + } + } } - - @supports (color: color-mix(in lab, red, red)) { - .placeholder-red-500\\/50::placeholder { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + .placeholder-red-500\\/2\\.25 { + &::placeholder { + color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); + } } } - - .placeholder-red-500\\/\\[0\\.5\\]::placeholder { - color: #ef444480; + .placeholder-red-500\\/2\\.75 { + &::placeholder { + color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); + } + } } - - @supports (color: color-mix(in lab, red, red)) { - .placeholder-red-500\\/\\[0\\.5\\]::placeholder { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + .placeholder-red-500\\/50 { + &::placeholder { + color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } } - - .placeholder-red-500\\/\\[50\\%\\]::placeholder { - color: #ef444480; + .placeholder-red-500\\/\\[0\\.5\\] { + &::placeholder { + color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } } - - @supports (color: color-mix(in lab, red, red)) { - .placeholder-red-500\\/\\[50\\%\\]::placeholder { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + .placeholder-red-500\\/\\[50\\%\\] { + &::placeholder { + color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } } } - - .placeholder-transparent::placeholder { - color: #0000; + .placeholder-transparent { + &::placeholder { + color: transparent; + } } " `) @@ -23444,249 +20360,156 @@ test('decoration', async () => { --color-red-500: #ef4444; --text-decoration-color-blue-500: #3b82f6; } - .decoration-\\[\\#0088cc\\] { - text-decoration-color: #08c; + text-decoration-color: #0088cc; } - - .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { - text-decoration-color: oklab(59.9824% -.067 -.124 / .5); + .decoration-\\[\\#0088cc\\]\\/50 { + text-decoration-color: color-mix(in oklab, #0088cc 50%, transparent); } - - .decoration-\\[color\\:var\\(--my-color\\)\\], .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 { - -webkit-text-decoration-color: var(--my-color); - -webkit-text-decoration-color: var(--my-color); + .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + text-decoration-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { + text-decoration-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .decoration-\\[color\\:var\\(--my-color\\)\\] { text-decoration-color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 { - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 { + text-decoration-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { - -webkit-text-decoration-color: var(--my-color); - -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { - -webkit-text-decoration-color: var(--my-color); - -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - - .decoration-\\[var\\(--my-color\\)\\], .decoration-\\[var\\(--my-color\\)\\]\\/50 { - -webkit-text-decoration-color: var(--my-color); - -webkit-text-decoration-color: var(--my-color); + .decoration-\\[var\\(--my-color\\)\\] { text-decoration-color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .decoration-\\[var\\(--my-color\\)\\]\\/50 { - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + .decoration-\\[var\\(--my-color\\)\\]\\/50 { + text-decoration-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { - -webkit-text-decoration-color: var(--my-color); - -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { - -webkit-text-decoration-color: var(--my-color); - -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .decoration-blue-500 { - -webkit-text-decoration-color: var(--text-decoration-color-blue-500); - -webkit-text-decoration-color: var(--text-decoration-color-blue-500); text-decoration-color: var(--text-decoration-color-blue-500); } - - .decoration-current, .decoration-current\\/50 { - text-decoration-color: currentColor; + .decoration-current { + text-decoration-color: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .decoration-current\\/50 { - -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); + .decoration-current\\/50 { + text-decoration-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .decoration-current\\/\\[0\\.5\\] { - text-decoration-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .decoration-current\\/\\[0\\.5\\] { - -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); + text-decoration-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .decoration-current\\/\\[50\\%\\] { - text-decoration-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .decoration-current\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); + text-decoration-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .decoration-inherit { - -webkit-text-decoration-color: inherit; - -webkit-text-decoration-color: inherit; text-decoration-color: inherit; } - .decoration-red-500 { - -webkit-text-decoration-color: var(--color-red-500); - -webkit-text-decoration-color: var(--color-red-500); text-decoration-color: var(--color-red-500); } - .decoration-red-500\\/50 { - text-decoration-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .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 srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .decoration-red-500\\/\\[0\\.5\\] { - text-decoration-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .decoration-red-500\\/\\[0\\.5\\] { - -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 srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .decoration-red-500\\/\\[50\\%\\] { - text-decoration-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .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 srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .decoration-transparent { - text-decoration-color: #0000; + text-decoration-color: transparent; } - .decoration-dashed { text-decoration-style: dashed; } - .decoration-dotted { text-decoration-style: dotted; } - .decoration-double { text-decoration-style: double; } - .decoration-solid { text-decoration-style: solid; } - .decoration-wavy { text-decoration-style: wavy; } - .decoration-0 { - text-decoration-thickness: 0; + text-decoration-thickness: 0px; } - .decoration-1 { text-decoration-thickness: 1px; } - .decoration-2 { text-decoration-thickness: 2px; } - .decoration-4 { text-decoration-thickness: 4px; } - .decoration-123 { text-decoration-thickness: 123px; } - .decoration-\\[12px\\] { text-decoration-thickness: 12px; } - .decoration-\\[50\\%\\] { - text-decoration-thickness: .5em; + text-decoration-thickness: 50%; } - - .decoration-\\[length\\:var\\(--my-thickness\\)\\], .decoration-\\[percentage\\:var\\(--my-thickness\\)\\] { + .decoration-\\[length\\:var\\(--my-thickness\\)\\] { + text-decoration-thickness: var(--my-thickness); + } + .decoration-\\[percentage\\:var\\(--my-thickness\\)\\] { text-decoration-thickness: var(--my-thickness); } - .decoration-auto { text-decoration-thickness: auto; } - .decoration-from-font { text-decoration-thickness: from-font; } @@ -23763,15 +20586,12 @@ test('animate', async () => { :root, :host { --animate-spin: spin 1s linear infinite; } - .animate-\\[bounce_1s_infinite\\] { - animation: 1s infinite bounce; + animation: bounce 1s infinite; } - .animate-none { animation: none; } - .animate-spin { animation: var(--animate-spin); } @@ -23806,7 +20626,6 @@ test('animate', async () => { :root, :host { --animate-none: bounce 1s infinite; } - .animate-none { animation: var(--animate-none); } @@ -23873,306 +20692,244 @@ test('filter', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-drop-shadow: initial; - --tw-drop-shadow-color: initial; - --tw-drop-shadow-alpha: 100%; - --tw-drop-shadow-size: initial; - } - } - } - + @layer properties; :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --blur-xl: 24px; --color-red-500: #ef4444; - --drop-shadow: 0 1px 1px #0000000d; - --drop-shadow-xl: 0 9px 7px #0000001a; + --drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05); + --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); --drop-shadow-calc: 0 0 calc(1 * var(--spacing)) black; } - .blur-\\[4px\\] { --tw-blur: blur(4px); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .blur-none { --tw-blur: ; - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .blur-xl { --tw-blur: blur(var(--blur-xl)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .brightness-50 { --tw-brightness: brightness(50%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .brightness-\\[1\\.23\\] { --tw-brightness: brightness(1.23); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .contrast-50 { --tw-contrast: contrast(50%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .contrast-\\[1\\.23\\] { --tw-contrast: contrast(1.23); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .drop-shadow\\/25 { --tw-drop-shadow-alpha: 25%; - --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .25))); + --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(from rgb(0 0 0 / 0.05) l a b / 25%))); --tw-drop-shadow: drop-shadow(var(--drop-shadow)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .drop-shadow { - --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d)); + --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.05))); --tw-drop-shadow: drop-shadow(var(--drop-shadow)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .drop-shadow-\\[0_0_red\\] { --tw-drop-shadow-size: drop-shadow(0 0 var(--tw-drop-shadow-color, red)); --tw-drop-shadow: var(--tw-drop-shadow-size); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .drop-shadow-calc { --tw-drop-shadow-size: drop-shadow(0 0 calc(1 * var(--spacing)) var(--tw-drop-shadow-color, black)); --tw-drop-shadow: drop-shadow(var(--drop-shadow-calc)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .drop-shadow-multi { - --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d)) drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a)); - --tw-drop-shadow: drop-shadow(0 1px 1px #0000000d) drop-shadow(0 9px 7px #0000001a); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.05))) drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))); + --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) drop-shadow( 0 9px 7px rgb(0 0 0 / 0.1)); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .drop-shadow-xl { - --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a)); + --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))); --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .drop-shadow-none { --tw-drop-shadow: ; - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .drop-shadow-inherit { --tw-drop-shadow-color: inherit; --tw-drop-shadow: var(--tw-drop-shadow-size); } - .drop-shadow-red-500 { --tw-drop-shadow-color: #ef4444; - } - - @supports (color: color-mix(in lab, red, red)) { - .drop-shadow-red-500 { + @supports (color: color-mix(in lab, red, red)) { --tw-drop-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-drop-shadow-alpha), transparent); } - } - - .drop-shadow-red-500 { --tw-drop-shadow: var(--tw-drop-shadow-size); } - .drop-shadow-red-500\\/50 { - --tw-drop-shadow-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .drop-shadow-red-500\\/50 { + --tw-drop-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-drop-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-drop-shadow-alpha), transparent); } - } - - .drop-shadow-red-500\\/50 { --tw-drop-shadow: var(--tw-drop-shadow-size); } - .grayscale { --tw-grayscale: grayscale(100%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .grayscale-0 { --tw-grayscale: grayscale(0%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .grayscale-\\[var\\(--value\\)\\] { --tw-grayscale: grayscale(var(--value)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .-hue-rotate-15 { --tw-hue-rotate: hue-rotate(calc(15deg * -1)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .-hue-rotate-\\[45deg\\] { --tw-hue-rotate: hue-rotate(calc(45deg * -1)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .hue-rotate-15 { --tw-hue-rotate: hue-rotate(15deg); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .hue-rotate-\\[45deg\\] { --tw-hue-rotate: hue-rotate(45deg); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .invert { --tw-invert: invert(100%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .invert-0 { --tw-invert: invert(0%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .invert-\\[var\\(--value\\)\\] { --tw-invert: invert(var(--value)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .saturate-0 { --tw-saturate: saturate(0%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .saturate-\\[1\\.75\\] { --tw-saturate: saturate(1.75); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .saturate-\\[var\\(--value\\)\\] { --tw-saturate: saturate(var(--value)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .sepia { --tw-sepia: sepia(100%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .sepia-0 { --tw-sepia: sepia(0%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .sepia-\\[50\\%\\] { --tw-sepia: sepia(50%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .sepia-\\[var\\(--value\\)\\] { --tw-sepia: sepia(var(--value)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .filter { - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .filter-\\[var\\(--value\\)\\] { filter: var(--value); } - .filter-none { filter: none; } - @property --tw-blur { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-brightness { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-contrast { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-grayscale { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-hue-rotate { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-invert { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-opacity { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-saturate { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-sepia { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-drop-shadow { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-drop-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-drop-shadow-size { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + } + } } " `) @@ -24267,99 +21024,85 @@ test('filter', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-drop-shadow: initial; - --tw-drop-shadow-color: initial; - --tw-drop-shadow-alpha: 100%; - --tw-drop-shadow-size: initial; - } - } - } - + @layer properties; :root, :host { --blur-none: 2px; } - .blur-none { --tw-blur: blur(var(--blur-none)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - @property --tw-blur { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-brightness { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-contrast { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-grayscale { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-hue-rotate { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-invert { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-opacity { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-saturate { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-sepia { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-drop-shadow { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-drop-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-drop-shadow-size { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + } + } } " `) @@ -24412,264 +21155,222 @@ test('backdrop-filter', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-backdrop-blur: initial; - --tw-backdrop-brightness: initial; - --tw-backdrop-contrast: initial; - --tw-backdrop-grayscale: initial; - --tw-backdrop-hue-rotate: initial; - --tw-backdrop-invert: initial; - --tw-backdrop-opacity: initial; - --tw-backdrop-saturate: initial; - --tw-backdrop-sepia: initial; - } - } - } - + @layer properties; :root, :host { --blur-xl: 24px; } - .backdrop-blur-\\[4px\\] { --tw-backdrop-blur: blur(4px); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-blur-none { --tw-backdrop-blur: ; - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-blur-xl { --tw-backdrop-blur: blur(var(--blur-xl)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-brightness-50 { --tw-backdrop-brightness: brightness(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-brightness-\\[1\\.23\\] { --tw-backdrop-brightness: brightness(1.23); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-contrast-50 { --tw-backdrop-contrast: contrast(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-contrast-\\[1\\.23\\] { --tw-backdrop-contrast: contrast(1.23); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-grayscale { --tw-backdrop-grayscale: grayscale(100%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-grayscale-0 { --tw-backdrop-grayscale: grayscale(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-grayscale-\\[var\\(--value\\)\\] { --tw-backdrop-grayscale: grayscale(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .-backdrop-hue-rotate-15 { --tw-backdrop-hue-rotate: hue-rotate(calc(15deg * -1)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .-backdrop-hue-rotate-\\[45deg\\] { --tw-backdrop-hue-rotate: hue-rotate(calc(45deg * -1)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-hue-rotate-15 { --tw-backdrop-hue-rotate: hue-rotate(15deg); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-hue-rotate-\\[45deg\\] { --tw-backdrop-hue-rotate: hue-rotate(45deg); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-invert { --tw-backdrop-invert: invert(100%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-invert-0 { --tw-backdrop-invert: invert(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-invert-\\[var\\(--value\\)\\] { --tw-backdrop-invert: invert(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-opacity-1\\.25 { --tw-backdrop-opacity: opacity(1.25%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-opacity-2\\.5 { --tw-backdrop-opacity: opacity(2.5%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-opacity-3\\.75 { --tw-backdrop-opacity: opacity(3.75%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-opacity-50 { --tw-backdrop-opacity: opacity(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-opacity-71 { --tw-backdrop-opacity: opacity(71%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-opacity-\\[0\\.5\\] { - --tw-backdrop-opacity: opacity(.5); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + --tw-backdrop-opacity: opacity(0.5); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-saturate-0 { --tw-backdrop-saturate: saturate(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-saturate-\\[1\\.75\\] { --tw-backdrop-saturate: saturate(1.75); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-saturate-\\[var\\(--value\\)\\] { --tw-backdrop-saturate: saturate(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-sepia { --tw-backdrop-sepia: sepia(100%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-sepia-0 { --tw-backdrop-sepia: sepia(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-sepia-\\[50\\%\\] { --tw-backdrop-sepia: sepia(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-sepia-\\[var\\(--value\\)\\] { --tw-backdrop-sepia: sepia(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-filter-\\[var\\(--value\\)\\] { -webkit-backdrop-filter: var(--value); backdrop-filter: var(--value); } - .backdrop-filter-none { -webkit-backdrop-filter: none; backdrop-filter: none; } - @property --tw-backdrop-blur { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-brightness { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-contrast { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-grayscale { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-hue-rotate { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-invert { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-opacity { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-saturate { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-sepia { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-backdrop-blur: initial; + --tw-backdrop-brightness: initial; + --tw-backdrop-contrast: initial; + --tw-backdrop-grayscale: initial; + --tw-backdrop-hue-rotate: initial; + --tw-backdrop-invert: initial; + --tw-backdrop-opacity: initial; + --tw-backdrop-saturate: initial; + --tw-backdrop-sepia: initial; + } + } } " `) @@ -24758,75 +21459,65 @@ test('backdrop-filter', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-backdrop-blur: initial; - --tw-backdrop-brightness: initial; - --tw-backdrop-contrast: initial; - --tw-backdrop-grayscale: initial; - --tw-backdrop-hue-rotate: initial; - --tw-backdrop-invert: initial; - --tw-backdrop-opacity: initial; - --tw-backdrop-saturate: initial; - --tw-backdrop-sepia: initial; - } - } - } - + @layer properties; :root, :host { --backdrop-blur-none: 2px; } - .backdrop-blur-none { --tw-backdrop-blur: blur(var(--backdrop-blur-none)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - @property --tw-backdrop-blur { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-brightness { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-contrast { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-grayscale { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-hue-rotate { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-invert { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-opacity { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-saturate { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-backdrop-sepia { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-backdrop-blur: initial; + --tw-backdrop-brightness: initial; + --tw-backdrop-contrast: initial; + --tw-backdrop-grayscale: initial; + --tw-backdrop-hue-rotate: initial; + --tw-backdrop-invert: initial; + --tw-backdrop-opacity: initial; + --tw-backdrop-saturate: initial; + --tw-backdrop-sepia: initial; + } + } } " `) @@ -24861,52 +21552,44 @@ test('transition', async () => { " :root, :host { --default-transition-timing-function: ease; - --default-transition-duration: .1s; + --default-transition-duration: 100ms; --transition-property-opacity: opacity; } - .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-\\[var\\(--value\\)\\] { transition-property: var(--value); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-opacity { transition-property: var(--transition-property-opacity); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-shadow { transition-property: box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .transition-none { transition-property: none; } @@ -24929,19 +21612,17 @@ test('transition', async () => { .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, ease); - transition-duration: var(--tw-duration, .1s); + transition-duration: var(--tw-duration, 100ms); } - .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, ease); - transition-duration: var(--tw-duration, .1s); + transition-duration: var(--tw-duration, 100ms); } - .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, ease); - transition-duration: var(--tw-duration, .1s); + transition-duration: var(--tw-duration, 100ms); } " `) @@ -24989,7 +21670,6 @@ test('transition', async () => { :root, :host { --transition-property-colors: transform; } - .transition-colors { transition-property: var(--transition-property-colors); transition-timing-function: var(--tw-ease, ease); @@ -25005,7 +21685,6 @@ test('transition-behavior', async () => { .transition-discrete { transition-behavior: allow-discrete; } - .transition-normal { transition-behavior: normal; } @@ -25019,15 +21698,13 @@ test('delay', async () => { expect(await run(['delay-123', 'delay-200', 'delay-[300ms]'])).toMatchInlineSnapshot(` " .delay-123 { - transition-delay: .123s; + transition-delay: 123ms; } - .delay-200 { - transition-delay: .2s; + transition-delay: 200ms; } - .delay-\\[300ms\\] { - transition-delay: .3s; + transition-delay: 300ms; } " `) @@ -25048,32 +21725,29 @@ test('delay', async () => { test('duration', async () => { expect(await run(['duration-123', 'duration-200', 'duration-[300ms]'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-duration: initial; - } - } - } - + @layer properties; .duration-123 { - --tw-duration: .123s; - transition-duration: .123s; + --tw-duration: 123ms; + transition-duration: 123ms; } - .duration-200 { - --tw-duration: .2s; - transition-duration: .2s; + --tw-duration: 200ms; + transition-duration: 200ms; } - .duration-\\[300ms\\] { - --tw-duration: .3s; - transition-duration: .3s; + --tw-duration: 300ms; + transition-duration: 300ms; } - @property --tw-duration { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-duration: initial; + } + } } " `) @@ -25104,37 +21778,33 @@ test('ease', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-ease: initial; - } - } - } - + @layer properties; :root, :host { - --ease-in: cubic-bezier(.4, 0, 1, 1); - --ease-out: cubic-bezier(0, 0, .2, 1); + --ease-in: cubic-bezier(0.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, 0.2, 1); } - .ease-\\[var\\(--value\\)\\] { --tw-ease: var(--value); transition-timing-function: var(--value); } - .ease-in { --tw-ease: var(--ease-in); transition-timing-function: var(--ease-in); } - .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } - @property --tw-ease { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-ease: initial; + } + } } " `) @@ -25161,26 +21831,24 @@ test('ease', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-ease: initial; - } - } - } - + @layer properties; :root, :host { --ease-linear: steps(4); } - .ease-linear { --tw-ease: var(--ease-linear); transition-timing-function: var(--ease-linear); } - @property --tw-ease { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-ease: initial; + } + } } " `) @@ -25200,19 +21868,15 @@ test('will-change', async () => { .will-change-\\[var\\(--value\\)\\] { will-change: var(--value); } - .will-change-auto { will-change: auto; } - .will-change-contents { will-change: contents; } - .will-change-scroll { will-change: scroll-position; } - .will-change-transform { will-change: transform; } @@ -25250,76 +21914,64 @@ test('contain', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-contain-size: initial; - --tw-contain-layout: initial; - --tw-contain-paint: initial; - --tw-contain-style: initial; - } - } - } - + @layer properties; .contain-inline-size { --tw-contain-size: inline-size; - contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); + contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); } - .contain-layout { --tw-contain-layout: layout; - contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); + contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); } - .contain-paint { --tw-contain-paint: paint; - contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); + contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); } - .contain-size { --tw-contain-size: size; - contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); + contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); } - .contain-style { --tw-contain-style: style; - contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); + contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); } - .contain-\\[unset\\] { contain: unset; } - .contain-content { contain: content; } - .contain-none { contain: none; } - .contain-strict { contain: strict; } - @property --tw-contain-size { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-contain-layout { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-contain-paint { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-contain-style { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-contain-size: initial; + --tw-contain-layout: initial; + --tw-contain-paint: initial; + --tw-contain-style: initial; + } + } } " `) @@ -25351,33 +22003,30 @@ test('content', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-content: ""; - } - } - } - + @layer properties; :root, :host { - --content-slash: "/"; + --content-slash: '/'; } - .content-\\[\\"hello_world\\"\\] { --tw-content: "hello world"; content: var(--tw-content); } - .content-slash { --tw-content: var(--content-slash); content: var(--tw-content); } - @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-content: ""; + } + } + } " `) expect(await run(['content', '-content-["hello_world"]', 'content-["hello_world"]/foo'])).toEqual( @@ -25392,7 +22041,6 @@ test('forced-color-adjust', async () => { .forced-color-adjust-auto { forced-color-adjust: auto; } - .forced-color-adjust-none { forced-color-adjust: none; } @@ -25425,37 +22073,33 @@ test('leading', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-leading: initial; - } - } - } - + @layer properties; :root, :host { --leading-tight: 1.25; --leading-6: 1.5rem; } - .leading-6 { --tw-leading: var(--leading-6); line-height: var(--leading-6); } - .leading-\\[var\\(--value\\)\\] { --tw-leading: var(--value); line-height: var(--value); } - .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } - @property --tw-leading { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-leading: initial; + } + } } " `) @@ -25483,26 +22127,24 @@ test('leading', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-leading: initial; - } - } - } - + @layer properties; :root, :host { --leading-none: 2; } - .leading-none { --tw-leading: var(--leading-none); line-height: var(--leading-none); } - @property --tw-leading { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-leading: initial; + } + } } " `) @@ -25522,42 +22164,37 @@ test('tracking', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-tracking: initial; - } - } - } - + @layer properties; :root, :host { --tracking-normal: 0em; - --tracking-wide: .025em; + --tracking-wide: 0.025em; } - .-tracking-\\[var\\(--value\\)\\] { --tw-tracking: calc(var(--value) * -1); letter-spacing: calc(var(--value) * -1); } - .tracking-\\[var\\(--value\\)\\] { --tw-tracking: var(--value); letter-spacing: var(--value); } - .tracking-normal { --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); } - .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } - @property --tw-tracking { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-tracking: initial; + } + } } " `) @@ -25579,7 +22216,6 @@ test('font-smoothing', async () => { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - .subpixel-antialiased { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; @@ -25611,85 +22247,72 @@ test('font-variant-numeric', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-ordinal: initial; - --tw-slashed-zero: initial; - --tw-numeric-figure: initial; - --tw-numeric-spacing: initial; - --tw-numeric-fraction: initial; - } - } - } - + @layer properties; .diagonal-fractions { --tw-numeric-fraction: diagonal-fractions; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } - .lining-nums { --tw-numeric-figure: lining-nums; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } - .oldstyle-nums { --tw-numeric-figure: oldstyle-nums; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } - .ordinal { --tw-ordinal: ordinal; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } - .proportional-nums { --tw-numeric-spacing: proportional-nums; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } - .slashed-zero { --tw-slashed-zero: slashed-zero; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } - .stacked-fractions { --tw-numeric-fraction: stacked-fractions; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } - .tabular-nums { --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } - .normal-nums { font-variant-numeric: normal; } - @property --tw-ordinal { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-slashed-zero { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-numeric-figure { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-numeric-spacing { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-numeric-fraction { syntax: "*"; - inherits: false + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-ordinal: initial; + --tw-slashed-zero: initial; + --tw-numeric-figure: initial; + --tw-numeric-spacing: initial; + --tw-numeric-fraction: initial; + } + } } " `) @@ -25779,251 +22402,200 @@ test('outline', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-outline-style: solid; - } - } - } - + @layer properties; :root, :host { --color-red-500: #ef4444; --outline-color-blue-500: #3b82f6; } - .outline-hidden { --tw-outline-style: none; outline-style: none; - } - - @media (forced-colors: active) { - .outline-hidden { + @media (forced-colors: active) { + outline: 2px solid transparent; outline-offset: 2px; - outline: 2px solid #0000; } } - .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } - .outline-0 { outline-style: var(--tw-outline-style); - outline-width: 0; + outline-width: 0px; } - .outline-\\[1\\.5\\] { outline-style: var(--tw-outline-style); - outline-width: 1.5px; + outline-width: 1.5; } - .outline-\\[12px\\] { outline-style: var(--tw-outline-style); outline-width: 12px; } - .outline-\\[50\\%\\] { outline-style: var(--tw-outline-style); outline-width: 50%; } - - .outline-\\[length\\:var\\(--my-width\\)\\], .outline-\\[number\\:var\\(--my-width\\)\\], .outline-\\[percentage\\:var\\(--my-width\\)\\] { + .outline-\\[length\\:var\\(--my-width\\)\\] { + outline-style: var(--tw-outline-style); + outline-width: var(--my-width); + } + .outline-\\[number\\:var\\(--my-width\\)\\] { + outline-style: var(--tw-outline-style); + outline-width: var(--my-width); + } + .outline-\\[percentage\\:var\\(--my-width\\)\\] { outline-style: var(--tw-outline-style); outline-width: var(--my-width); } - .outline-\\[\\#0088cc\\] { - outline-color: #08c; + outline-color: #0088cc; } - - .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { - outline-color: oklab(59.9824% -.067 -.124 / .5); + .outline-\\[\\#0088cc\\]\\/50 { + outline-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + outline-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { + outline-color: color-mix(in oklab, #0088cc 50%, transparent); } - .outline-\\[black\\] { - outline-color: #000; + outline-color: black; } - .outline-\\[black\\]\\/50 { - outline-color: oklab(0% none none / .5); + outline-color: color-mix(in oklab, black 50%, transparent); } - .outline-\\[black\\]\\/\\[0\\.5\\] { - outline-color: oklab(0% none none / .5); + outline-color: color-mix(in oklab, black 50%, transparent); } - .outline-\\[black\\]\\/\\[50\\%\\] { - outline-color: oklab(0% none none / .5); + outline-color: color-mix(in oklab, black 50%, transparent); } - - .outline-\\[color\\:var\\(--value\\)\\], .outline-\\[color\\:var\\(--value\\)\\]\\/50 { + .outline-\\[color\\:var\\(--value\\)\\] { outline-color: var(--value); } - - @supports (color: color-mix(in lab, red, red)) { - .outline-\\[color\\:var\\(--value\\)\\]\\/50 { + .outline-\\[color\\:var\\(--value\\)\\]\\/50 { + outline-color: var(--value); + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } - .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { outline-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } - .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { outline-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } - - .outline-\\[var\\(--value\\)\\], .outline-\\[var\\(--value\\)\\]\\/50 { + .outline-\\[var\\(--value\\)\\] { outline-color: var(--value); } - - @supports (color: color-mix(in lab, red, red)) { - .outline-\\[var\\(--value\\)\\]\\/50 { + .outline-\\[var\\(--value\\)\\]\\/50 { + outline-color: var(--value); + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } - .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] { outline-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } - .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] { outline-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } - .outline-blue-500 { outline-color: var(--outline-color-blue-500); } - - .outline-current, .outline-current\\/50 { - outline-color: currentColor; + .outline-current { + outline-color: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .outline-current\\/50 { + .outline-current\\/50 { + outline-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .outline-current\\/\\[0\\.5\\] { - outline-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .outline-current\\/\\[0\\.5\\] { + outline-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .outline-current\\/\\[50\\%\\] { - outline-color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .outline-current\\/\\[50\\%\\] { + outline-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .outline-inherit { outline-color: inherit; } - .outline-red-500 { outline-color: var(--color-red-500); } - .outline-red-500\\/50 { - outline-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .outline-red-500\\/50 { + outline-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .outline-red-500\\/\\[0\\.5\\] { - outline-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .outline-red-500\\/\\[0\\.5\\] { + outline-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .outline-red-500\\/\\[50\\%\\] { - outline-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .outline-red-500\\/\\[50\\%\\] { + outline-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .outline-transparent { - outline-color: #0000; + outline-color: transparent; } - .outline-dashed { --tw-outline-style: dashed; outline-style: dashed; } - .outline-dotted { --tw-outline-style: dotted; outline-style: dotted; } - .outline-double { --tw-outline-style: double; outline-style: double; } - .outline-none { --tw-outline-style: none; outline-style: none; } - .outline-solid { --tw-outline-style: solid; outline-style: solid; } - @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-outline-style: solid; + } + } + } " `) expect( @@ -26038,24 +22610,23 @@ test('outline', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-outline-style: solid; - } - } - } - + @layer properties; .outline { outline-style: var(--tw-outline-style); outline-width: 2px; } - @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-outline-style: solid; + } + } + } " `) expect( @@ -26112,15 +22683,12 @@ test('outline-offset', async () => { .-outline-offset-4 { outline-offset: calc(4px * -1); } - .-outline-offset-\\[var\\(--value\\)\\] { outline-offset: calc(var(--value) * -1); } - .outline-offset-4 { outline-offset: 4px; } - .outline-offset-\\[var\\(--value\\)\\] { outline-offset: var(--value); } @@ -26151,21 +22719,17 @@ test('opacity', async () => { ).toMatchInlineSnapshot(` " .opacity-2\\.5 { - opacity: .025; + opacity: 2.5%; } - .opacity-3\\.25 { - opacity: .0325; + opacity: 3.25%; } - .opacity-4\\.75 { - opacity: .0475; + opacity: 4.75%; } - .opacity-15 { - opacity: .15; + opacity: 15%; } - .opacity-\\[var\\(--value\\)\\] { opacity: var(--value); } @@ -26208,27 +22772,21 @@ test('underline-offset', async () => { .-underline-offset-4 { text-underline-offset: calc(4px * -1); } - .-underline-offset-123 { text-underline-offset: calc(123px * -1); } - .-underline-offset-\\[var\\(--value\\)\\] { text-underline-offset: calc(var(--value) * -1); } - .underline-offset-4 { text-underline-offset: 4px; } - .underline-offset-123 { text-underline-offset: 123px; } - .underline-offset-\\[var\\(--value\\)\\] { text-underline-offset: var(--value); } - .underline-offset-auto { text-underline-offset: auto; } @@ -26265,7 +22823,6 @@ test('underline-offset', async () => { :root, :host { --text-underline-offset-auto: 4px; } - .underline-offset-auto { text-underline-offset: var(--text-underline-offset-auto); } @@ -26344,273 +22901,209 @@ test('text', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: .25rem; + --spacing: 0.25rem; --color-red-500: #ef4444; --text-color-blue-500: #3b82f6; - --text-sm: .875rem; + --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; --leading-snug: 1.375; } - .text-\\[10px\\]\\/none { font-size: 10px; line-height: 1; } - .text-\\[12px\\]\\/6 { font-size: 12px; line-height: calc(var(--spacing) * 6); } - .text-\\[50\\%\\]\\/6 { font-size: 50%; line-height: calc(var(--spacing) * 6); } - .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 { font-size: clamp(1rem, var(--size), 3rem); line-height: calc(var(--spacing) * 9); } - .text-\\[larger\\]\\/6 { font-size: larger; line-height: calc(var(--spacing) * 6); } - .text-\\[xx-large\\]\\/6 { font-size: xx-large; line-height: calc(var(--spacing) * 6); } - .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } - .text-sm\\/6 { font-size: var(--text-sm); line-height: calc(var(--spacing) * 6); } - .text-sm\\/\\[4px\\] { font-size: var(--text-sm); line-height: 4px; } - .text-sm\\/none { font-size: var(--text-sm); line-height: 1; } - .text-sm\\/snug { font-size: var(--text-sm); line-height: var(--leading-snug); } - .text-\\[12px\\] { font-size: 12px; } - .text-\\[50\\%\\] { font-size: 50%; } - .text-\\[absolute-size\\:var\\(--my-size\\)\\] { font-size: var(--my-size); } - .text-\\[clamp\\(1rem\\,2rem\\,3rem\\)\\] { - font-size: 2rem; + font-size: clamp(1rem, 2rem, 3rem); } - .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\] { font-size: clamp(1rem, var(--size), 3rem); } - .text-\\[larger\\] { font-size: larger; } - - .text-\\[length\\:var\\(--my-size\\)\\], .text-\\[percentage\\:var\\(--my-size\\)\\], .text-\\[relative-size\\:var\\(--my-size\\)\\] { + .text-\\[length\\:var\\(--my-size\\)\\] { + font-size: var(--my-size); + } + .text-\\[percentage\\:var\\(--my-size\\)\\] { + font-size: var(--my-size); + } + .text-\\[relative-size\\:var\\(--my-size\\)\\] { font-size: var(--my-size); } - .text-\\[xx-large\\] { font-size: xx-large; } - .text-\\[\\#0088cc\\] { - color: #08c; + color: #0088cc; } - - .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { - color: oklab(59.9824% -.067 -.124 / .5); + .text-\\[\\#0088cc\\]\\/50 { + color: color-mix(in oklab, #0088cc 50%, transparent); } - - .text-\\[color\\:var\\(--my-color\\)\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .text-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + color: color-mix(in oklab, #0088cc 50%, transparent); + } + .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { + color: color-mix(in oklab, #0088cc 50%, transparent); + } + .text-\\[color\\:var\\(--my-color\\)\\] { color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .text-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .text-\\[color\\:var\\(--my-color\\)\\]\\/50 { + color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - - .text-\\[var\\(--my-color\\)\\], .text-\\[var\\(--my-color\\)\\]\\/50 { + .text-\\[var\\(--my-color\\)\\] { color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .text-\\[var\\(--my-color\\)\\]\\/50 { + .text-\\[var\\(--my-color\\)\\]\\/50 { + color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .text-blue-500 { color: var(--text-color-blue-500); } - - .text-current, .text-current\\/50 { - color: currentColor; + .text-current { + color: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .text-current\\/50 { + .text-current\\/50 { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } - .text-current\\/\\[0\\.5\\] { - color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-current\\/\\[0\\.5\\] { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } - .text-current\\/\\[50\\%\\] { - color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-current\\/\\[50\\%\\] { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } - .text-inherit { color: inherit; } - .text-red-500 { color: var(--color-red-500); } - .text-red-500\\/2\\.5 { - color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red-500\\/2\\.5 { + color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .text-red-500\\/2\\.25 { - color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red-500\\/2\\.25 { + color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .text-red-500\\/2\\.75 { - color: #ef444407; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red-500\\/2\\.75 { + color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .text-red-500\\/50 { - color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red-500\\/50 { + color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .text-red-500\\/\\[0\\.5\\] { - color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red-500\\/\\[0\\.5\\] { + color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .text-red-500\\/\\[50\\%\\] { - color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-red-500\\/\\[50\\%\\] { + color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .text-transparent { - color: #0000; + color: transparent; } " `) @@ -26704,293 +23197,196 @@ test('text-shadow', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-text-shadow-color: initial; - --tw-text-shadow-alpha: 100%; - } - } - } - + @layer properties; :root, :host { --color-red-500: #ef4444; } - .text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-text-shadow-alpha: 25%; text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value)); - } - - @supports (color: lab(from red l a b)) { - .text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { + @supports (color: lab(from red l a b)) { text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(from var(--value) l a b / 25%)); } } - .text-shadow-\\[10px_10px\\]\\/25 { --tw-text-shadow-alpha: 25%; text-shadow: 10px 10px var(--tw-text-shadow-color, currentcolor); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-\\[10px_10px\\]\\/25 { + @supports (color: color-mix(in lab, red, red)) { text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); } } - .text-shadow-\\[12px_12px_\\#0088cc\\]\\/25 { --tw-text-shadow-alpha: 25%; - text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(59.9824% -.067 -.124 / .25)); + text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(from #0088cc l a b / 25%)); } - .text-shadow-sm\\/25 { --tw-text-shadow-alpha: 25%; - text-shadow: 0px 1px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .25)), 0px 2px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .25)); + text-shadow: 0px 1px 2px var(--tw-text-shadow-color, oklab(from rgb(0 0 0 / 0.06) l a b / 25%)), 0px 2px 2px var(--tw-text-shadow-color, oklab(from rgb(0 0 0 / 0.06) l a b / 25%)); } - .text-shadow-2xs { - text-shadow: 0px 1px 0px var(--tw-text-shadow-color, #0000001a); + text-shadow: 0px 1px 0px var(--tw-text-shadow-color, rgb(0 0 0 / 0.1)); } - .text-shadow-\\[\\#0088cc\\] { - --tw-text-shadow-color: #08c; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-\\[\\#0088cc\\] { - --tw-text-shadow-color: color-mix(in oklab, #08c var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: #0088cc; + @supports (color: color-mix(in lab, red, red)) { + --tw-text-shadow-color: color-mix(in oklab, #0088cc var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-\\[\\#0088cc\\]\\/50 { - --tw-text-shadow-color: #0088cc80; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-\\[\\#0088cc\\]\\/50 { - --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-text-shadow-color: #0088cc80; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-text-shadow-color: #0088cc80; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-\\[10px_10px\\] { text-shadow: 10px 10px var(--tw-text-shadow-color, currentcolor); } - .text-shadow-\\[12px_12px_\\#0088cc\\] { - text-shadow: 12px 12px var(--tw-text-shadow-color, #08c); + text-shadow: 12px 12px var(--tw-text-shadow-color, #0088cc); } - .text-shadow-\\[12px_12px_var\\(--value\\)\\] { text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value)); } - .text-shadow-\\[color\\:var\\(--value\\)\\] { --tw-text-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-\\[color\\:var\\(--value\\)\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, var(--value) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-text-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-text-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-text-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - - .text-shadow-\\[shadow\\:var\\(--value\\)\\], .text-shadow-\\[var\\(--value\\)\\] { + .text-shadow-\\[shadow\\:var\\(--value\\)\\] { + text-shadow: var(--value); + } + .text-shadow-\\[var\\(--value\\)\\] { text-shadow: var(--value); } - .text-shadow-current { --tw-text-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-current { + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, currentcolor var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-current\\/50 { --tw-text-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-current\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-current\\/\\[0\\.5\\] { --tw-text-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-current\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-current\\/\\[50\\%\\] { --tw-text-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-current\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-inherit { --tw-text-shadow-color: inherit; } - .text-shadow-none { text-shadow: none; } - .text-shadow-red-500 { --tw-text-shadow-color: #ef4444; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-red-500 { + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-red-500\\/2\\.5 { - --tw-text-shadow-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-red-500\\/2\\.5 { + --tw-text-shadow-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-red-500\\/2\\.25 { - --tw-text-shadow-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-red-500\\/2\\.25 { + --tw-text-shadow-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-red-500\\/2\\.75 { - --tw-text-shadow-color: #ef444407; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-red-500\\/2\\.75 { + --tw-text-shadow-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-red-500\\/50 { - --tw-text-shadow-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-red-500\\/50 { + --tw-text-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-red-500\\/\\[0\\.5\\] { - --tw-text-shadow-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-red-500\\/\\[0\\.5\\] { + --tw-text-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-red-500\\/\\[50\\%\\] { - --tw-text-shadow-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-red-500\\/\\[50\\%\\] { + --tw-text-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-sm { - text-shadow: 0px 1px 2px var(--tw-text-shadow-color, #0000000f), 0px 2px 2px var(--tw-text-shadow-color, #0000000f); + text-shadow: 0px 1px 2px var(--tw-text-shadow-color, rgb(0 0 0 / 0.06)), 0px 2px 2px var(--tw-text-shadow-color, rgb(0 0 0 / 0.06)); } - .text-shadow-transparent { --tw-text-shadow-color: transparent; - } - - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-transparent { + @supports (color: color-mix(in lab, red, red)) { --tw-text-shadow-color: color-mix(in oklab, transparent var(--tw-text-shadow-alpha), transparent); } } - @property --tw-text-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-text-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-text-shadow-color: initial; + --tw-text-shadow-alpha: 100%; + } + } + } " `) expect( @@ -27071,401 +23467,283 @@ test('shadow', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } - + @layer properties; :root, :host { --color-red-500: #ef4444; --box-shadow-color-blue-500: #3b82f6; } - .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-shadow-alpha: 25%; - --tw-shadow: 12px 12px var(--tw-shadow-color, var(--value)); - } - - @supports (color: lab(from red l a b)) { - .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { + --tw-shadow: 12px 12px var(--tw-shadow-color, var(--value)); + @supports (color: lab(from red l a b)) { --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(from var(--value) l a b / 25%)); } - } - - .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-\\[10px_10px\\]\\/25 { --tw-shadow-alpha: 25%; --tw-shadow: 10px 10px var(--tw-shadow-color, currentcolor); - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-\\[10px_10px\\]\\/25 { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); } - } - - .shadow-\\[10px_10px\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-\\[12px_12px_\\#0088cc\\]\\/25 { --tw-shadow-alpha: 25%; - --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(59.9824% -.067 -.124 / .25)); + --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(from #0088cc l a b / 25%)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-sm\\/25 { --tw-shadow-alpha: 25%; - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(0% 0 0 / .25)), 0 1px 2px -1px var(--tw-shadow-color, oklab(0% 0 0 / .25)); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 25%)), 0 1px 2px -1px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 25%)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-\\[10px_10px\\] { --tw-shadow: 10px 10px var(--tw-shadow-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-\\[12px_12px_\\#0088cc\\] { - --tw-shadow: 12px 12px var(--tw-shadow-color, #08c); + --tw-shadow: 12px 12px var(--tw-shadow-color, #0088cc); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-\\[12px_12px_var\\(--value\\)\\] { --tw-shadow: 12px 12px var(--tw-shadow-color, var(--value)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - - .shadow-\\[shadow\\:var\\(--value\\)\\], .shadow-\\[var\\(--value\\)\\] { + .shadow-\\[shadow\\:var\\(--value\\)\\] { + --tw-shadow: var(--value); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-\\[var\\(--value\\)\\] { --tw-shadow: var(--value); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-sm { - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-xl { - --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a); + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-\\[\\#0088cc\\] { - --tw-shadow-color: #08c; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-\\[\\#0088cc\\] { - --tw-shadow-color: color-mix(in oklab, #08c var(--tw-shadow-alpha), transparent); + --tw-shadow-color: #0088cc; + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, #0088cc var(--tw-shadow-alpha), transparent); } } - .shadow-\\[\\#0088cc\\]\\/50 { - --tw-shadow-color: #0088cc80; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-\\[\\#0088cc\\]\\/50 { - --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent); + --tw-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-shadow-color: #0088cc80; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent); + --tw-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-shadow-color: #0088cc80; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent); + --tw-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-\\[color\\:var\\(--value\\)\\] { --tw-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-\\[color\\:var\\(--value\\)\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--value) var(--tw-shadow-alpha), transparent); } } - .shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-\\[color\\:var\\(--value\\)\\]\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-blue-500 { --tw-shadow-color: #3b82f6; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-blue-500 { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--box-shadow-color-blue-500) var(--tw-shadow-alpha), transparent); } } - .shadow-current { --tw-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-current { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, currentcolor var(--tw-shadow-alpha), transparent); } } - .shadow-current\\/50 { --tw-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-current\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-current\\/\\[0\\.5\\] { --tw-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-current\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-current\\/\\[50\\%\\] { --tw-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-current\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-inherit { --tw-shadow-color: inherit; } - .shadow-red-500 { --tw-shadow-color: #ef4444; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-red-500 { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent); } } - .shadow-red-500\\/2\\.5 { - --tw-shadow-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-red-500\\/2\\.5 { + --tw-shadow-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-red-500\\/2\\.25 { - --tw-shadow-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-red-500\\/2\\.25 { + --tw-shadow-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-red-500\\/2\\.75 { - --tw-shadow-color: #ef444407; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-red-500\\/2\\.75 { + --tw-shadow-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-red-500\\/50 { - --tw-shadow-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-red-500\\/50 { + --tw-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-red-500\\/\\[0\\.5\\] { - --tw-shadow-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-red-500\\/\\[0\\.5\\] { + --tw-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-red-500\\/\\[50\\%\\] { - --tw-shadow-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-red-500\\/\\[50\\%\\] { + --tw-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent); } } - .shadow-transparent { --tw-shadow-color: transparent; - } - - @supports (color: color-mix(in lab, red, red)) { - .shadow-transparent { + @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent); } } - @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-ring-inset { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0; + initial-value: 0px; } - @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } - @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } " `) expect( @@ -27546,410 +23824,288 @@ test('inset-shadow', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } - + @layer properties; :root, :host { --color-red-500: #ef4444; } - .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 { --tw-inset-shadow-alpha: 25%; - --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c), inset 12px 12px var(--tw-inset-shadow-color, var(--value, #08c)); - } - - @supports (color: lab(from red l a b)) { - .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 { - --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(59.9824% -.067 -.124 / .25)), inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value, #08c) l a b / 25%)); + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #0088cc), inset 12px 12px var(--tw-inset-shadow-color, var(--value,#0088cc)); + @supports (color: lab(from red l a b)) { + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from #0088cc l a b / 25%)), inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value,#0088cc) l a b / 25%)); } - } - - .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-inset-shadow-alpha: 25%; --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value)); - } - - @supports (color: lab(from red l a b)) { - .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { + @supports (color: lab(from red l a b)) { --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value) l a b / 25%)); } - } - - .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-\\[10px_10px\\]\\/25 { --tw-inset-shadow-alpha: 25%; --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, currentcolor); - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-\\[10px_10px\\]\\/25 { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); } - } - - .inset-shadow-\\[10px_10px\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-\\[12px_12px_\\#0088cc\\]\\/25 { --tw-inset-shadow-alpha: 25%; - --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(59.9824% -.067 -.124 / .25)); + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from #0088cc l a b / 25%)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-sm\\/25 { --tw-inset-shadow-alpha: 25%; - --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, oklab(0% 0 0 / .25)); + --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, oklab(from rgb(0 0 0 / 0.05) l a b / 25%)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow { - --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, #0000000d); + --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-\\[10px_10px\\] { --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\] { - --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c), inset 12px 12px var(--tw-inset-shadow-color, var(--value, #08c)); + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #0088cc), inset 12px 12px var(--tw-inset-shadow-color, var(--value,#0088cc)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-\\[12px_12px_\\#0088cc\\] { - --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c); + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #0088cc); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-\\[12px_12px_var\\(--value\\)\\] { --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - - .inset-shadow-\\[shadow\\:var\\(--value\\)\\], .inset-shadow-\\[var\\(--value\\)\\] { + .inset-shadow-\\[shadow\\:var\\(--value\\)\\] { + --tw-inset-shadow: inset var(--value); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .inset-shadow-\\[var\\(--value\\)\\] { --tw-inset-shadow: inset var(--value); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-none { --tw-inset-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-sm { - --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, #0000000d); + --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-\\[\\#0088cc\\] { - --tw-inset-shadow-color: #08c; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-\\[\\#0088cc\\] { - --tw-inset-shadow-color: color-mix(in oklab, #08c var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: #0088cc; + @supports (color: color-mix(in lab, red, red)) { + --tw-inset-shadow-color: color-mix(in oklab, #0088cc var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-\\[\\#0088cc\\]\\/50 { - --tw-inset-shadow-color: #0088cc80; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-\\[\\#0088cc\\]\\/50 { - --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-inset-shadow-color: #0088cc80; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-shadow-color: #0088cc80; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-\\[color\\:var\\(--value\\)\\] { --tw-inset-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-\\[color\\:var\\(--value\\)\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, var(--value) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-inset-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-inset-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-inset-shadow-color: var(--value); - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-current { --tw-inset-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-current { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, currentcolor var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-current\\/50 { --tw-inset-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-current\\/50 { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-current\\/\\[0\\.5\\] { --tw-inset-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-current\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-current\\/\\[50\\%\\] { --tw-inset-shadow-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-current\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-inherit { --tw-inset-shadow-color: inherit; } - .inset-shadow-red-500 { --tw-inset-shadow-color: #ef4444; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-red-500 { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-red-500\\/2\\.5 { - --tw-inset-shadow-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-red-500\\/2\\.5 { + --tw-inset-shadow-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-red-500\\/2\\.25 { - --tw-inset-shadow-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-red-500\\/2\\.25 { + --tw-inset-shadow-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-red-500\\/2\\.75 { - --tw-inset-shadow-color: #ef444407; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-red-500\\/2\\.75 { + --tw-inset-shadow-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-red-500\\/50 { - --tw-inset-shadow-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-red-500\\/50 { + --tw-inset-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-red-500\\/\\[0\\.5\\] { - --tw-inset-shadow-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-red-500\\/\\[0\\.5\\] { + --tw-inset-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-red-500\\/\\[50\\%\\] { - --tw-inset-shadow-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-red-500\\/\\[50\\%\\] { + --tw-inset-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } - .inset-shadow-transparent { --tw-inset-shadow-color: transparent; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-transparent { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-shadow-color: color-mix(in oklab, transparent var(--tw-inset-shadow-alpha), transparent); } } - @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-ring-inset { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0; + initial-value: 0px; } - @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } - @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } " `) expect( @@ -28027,340 +24183,233 @@ test('ring', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } - + @layer properties; :root, :host { --color-red-500: #ef4444; --ring-color-blue-500: #3b82f6; } - .ring { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .ring-0 { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .ring-1 { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .ring-2 { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .ring-4 { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .ring-\\[12px\\] { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(12px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(12px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .ring-\\[length\\:var\\(--my-width\\)\\] { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(var(--my-width) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(var(--my-width) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .ring-\\[\\#0088cc\\] { - --tw-ring-color: #08c; + --tw-ring-color: #0088cc; } - - .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-ring-color: oklab(59.9824% -.067 -.124 / .5); + .ring-\\[\\#0088cc\\]\\/50 { + --tw-ring-color: color-mix(in oklab, #0088cc 50%, transparent); } - - .ring-\\[color\\:var\\(--my-color\\)\\], .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-ring-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .ring-\\[color\\:var\\(--my-color\\)\\] { --tw-ring-color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { + --tw-ring-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - - .ring-\\[var\\(--my-color\\)\\], .ring-\\[var\\(--my-color\\)\\]\\/50 { + .ring-\\[var\\(--my-color\\)\\] { --tw-ring-color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .ring-\\[var\\(--my-color\\)\\]\\/50 { + .ring-\\[var\\(--my-color\\)\\]\\/50 { + --tw-ring-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-blue-500 { --tw-ring-color: var(--ring-color-blue-500); } - - .ring-current, .ring-current\\/50 { + .ring-current { --tw-ring-color: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .ring-current\\/50 { + .ring-current\\/50 { + --tw-ring-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .ring-current\\/\\[0\\.5\\] { --tw-ring-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-current\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .ring-current\\/\\[50\\%\\] { --tw-ring-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-current\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .ring-inherit { --tw-ring-color: inherit; } - .ring-red-500 { --tw-ring-color: var(--color-red-500); } - .ring-red-500\\/2\\.5 { - --tw-ring-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-red-500\\/2\\.5 { + --tw-ring-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .ring-red-500\\/2\\.25 { - --tw-ring-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-red-500\\/2\\.25 { + --tw-ring-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .ring-red-500\\/2\\.75 { - --tw-ring-color: #ef444407; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-red-500\\/2\\.75 { + --tw-ring-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .ring-red-500\\/50 { - --tw-ring-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-red-500\\/50 { + --tw-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .ring-red-500\\/\\[0\\.5\\] { - --tw-ring-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-red-500\\/\\[0\\.5\\] { + --tw-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .ring-red-500\\/\\[50\\%\\] { - --tw-ring-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-red-500\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .ring-transparent { --tw-ring-color: transparent; } - .ring-inset { --tw-ring-inset: inset; } - @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-ring-inset { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0; + initial-value: 0px; } - @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } - @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - " - `) - expect( - await run( - ['ring'], - css` - @theme { - --default-ring-width: 2px; - } - @tailwind utilities; - `, - ), - ).toMatchInlineSnapshot(` - " @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; @@ -28378,90 +24427,110 @@ test('ring', async () => { } } } - + " + `) + expect( + await run( + ['ring'], + css` + @theme { + --default-ring-width: 2px; + } + @tailwind utilities; + `, + ), + ).toMatchInlineSnapshot(` + " + @layer properties; .ring { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-ring-inset { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0; + initial-value: 0px; } - @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } - @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } " `) expect( @@ -28551,314 +24620,243 @@ test('inset-ring', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } - + @layer properties; :root, :host { --color-red-500: #ef4444; } - .inset-ring { --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-ring-0 { --tw-inset-ring-shadow: inset 0 0 0 0px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-ring-1 { --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-ring-2 { --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-ring-4 { --tw-inset-ring-shadow: inset 0 0 0 4px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-ring-\\[12px\\] { --tw-inset-ring-shadow: inset 0 0 0 12px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-ring-\\[length\\:var\\(--my-width\\)\\] { --tw-inset-ring-shadow: inset 0 0 0 var(--my-width) var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-ring-\\[\\#0088cc\\] { - --tw-inset-ring-color: #08c; + --tw-inset-ring-color: #0088cc; } - - .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-ring-color: oklab(59.9824% -.067 -.124 / .5); + .inset-ring-\\[\\#0088cc\\]\\/50 { + --tw-inset-ring-color: color-mix(in oklab, #0088cc 50%, transparent); } - - .inset-ring-\\[color\\:var\\(--my-color\\)\\], .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-inset-ring-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .inset-ring-\\[color\\:var\\(--my-color\\)\\] { --tw-inset-ring-color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { + --tw-inset-ring-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-inset-ring-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-inset-ring-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - - .inset-ring-\\[var\\(--my-color\\)\\], .inset-ring-\\[var\\(--my-color\\)\\]\\/50 { + .inset-ring-\\[var\\(--my-color\\)\\] { --tw-inset-ring-color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-\\[var\\(--my-color\\)\\]\\/50 { + .inset-ring-\\[var\\(--my-color\\)\\]\\/50 { + --tw-inset-ring-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-inset-ring-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-inset-ring-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - - .inset-ring-current, .inset-ring-current\\/50 { + .inset-ring-current { --tw-inset-ring-color: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-current\\/50 { + .inset-ring-current\\/50 { + --tw-inset-ring-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .inset-ring-current\\/\\[0\\.5\\] { --tw-inset-ring-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-current\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .inset-ring-current\\/\\[50\\%\\] { --tw-inset-ring-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-current\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .inset-ring-inherit { --tw-inset-ring-color: inherit; } - .inset-ring-red-500 { --tw-inset-ring-color: var(--color-red-500); } - .inset-ring-red-500\\/2\\.5 { - --tw-inset-ring-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-red-500\\/2\\.5 { + --tw-inset-ring-color: color-mix(in srgb, #ef4444 2.5%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .inset-ring-red-500\\/2\\.25 { - --tw-inset-ring-color: #ef444406; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-red-500\\/2\\.25 { + --tw-inset-ring-color: color-mix(in srgb, #ef4444 2.25%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .inset-ring-red-500\\/2\\.75 { - --tw-inset-ring-color: #ef444407; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-red-500\\/2\\.75 { + --tw-inset-ring-color: color-mix(in srgb, #ef4444 2.75%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - - .inset-ring-red-500\\/50 { - --tw-inset-ring-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-red-500\\/50 { + .inset-ring-red-500\\/50 { + --tw-inset-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .inset-ring-red-500\\/\\[0\\.5\\] { - --tw-inset-ring-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-red-500\\/\\[0\\.5\\] { + --tw-inset-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .inset-ring-red-500\\/\\[50\\%\\] { - --tw-inset-ring-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .inset-ring-red-500\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .inset-ring-transparent { --tw-inset-ring-color: transparent; } - @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-shadow-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @property --tw-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-ring-color { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-ring-inset { syntax: "*"; - inherits: false + inherits: false; } - @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0; + initial-value: 0px; } - @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } - @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } " `) expect( @@ -28951,177 +24949,132 @@ test('ring-offset', async () => { --color-red-500: #ef4444; --ring-offset-color-blue-500: #3b82f6; } - .ring-offset-0 { --tw-ring-offset-width: 0px; - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } - .ring-offset-1 { --tw-ring-offset-width: 1px; - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } - .ring-offset-2 { --tw-ring-offset-width: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } - .ring-offset-4 { --tw-ring-offset-width: 4px; - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } - .ring-offset-\\[12px\\] { --tw-ring-offset-width: 12px; - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } - .ring-offset-\\[length\\:var\\(--my-width\\)\\] { --tw-ring-offset-width: var(--my-width); - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } - .ring-offset-\\[\\#0088cc\\] { - --tw-ring-offset-color: #08c; + --tw-ring-offset-color: #0088cc; } - - .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-ring-offset-color: oklab(59.9824% -.067 -.124 / .5); + .ring-offset-\\[\\#0088cc\\]\\/50 { + --tw-ring-offset-color: color-mix(in oklab, #0088cc 50%, transparent); } - - .ring-offset-\\[color\\:var\\(--my-color\\)\\], .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\] { + --tw-ring-offset-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in oklab, #0088cc 50%, transparent); + } + .ring-offset-\\[color\\:var\\(--my-color\\)\\] { --tw-ring-offset-color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 { + .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 { + --tw-ring-offset-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-offset-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-offset-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - - .ring-offset-\\[var\\(--my-color\\)\\], .ring-offset-\\[var\\(--my-color\\)\\]\\/50 { + .ring-offset-\\[var\\(--my-color\\)\\] { --tw-ring-offset-color: var(--my-color); } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-\\[var\\(--my-color\\)\\]\\/50 { + .ring-offset-\\[var\\(--my-color\\)\\]\\/50 { + --tw-ring-offset-color: var(--my-color); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-offset-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-offset-color: var(--my-color); - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-offset-blue-500 { --tw-ring-offset-color: var(--ring-offset-color-blue-500); } - - .ring-offset-current, .ring-offset-current\\/50 { + .ring-offset-current { --tw-ring-offset-color: currentcolor; } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-current\\/50 { + .ring-offset-current\\/50 { + --tw-ring-offset-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .ring-offset-current\\/\\[0\\.5\\] { --tw-ring-offset-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-current\\/\\[0\\.5\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .ring-offset-current\\/\\[50\\%\\] { --tw-ring-offset-color: currentcolor; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-current\\/\\[50\\%\\] { + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .ring-offset-inherit { --tw-ring-offset-color: inherit; } - .ring-offset-red-500 { --tw-ring-offset-color: var(--color-red-500); } - .ring-offset-red-500\\/50 { - --tw-ring-offset-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-red-500\\/50 { + --tw-ring-offset-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .ring-offset-red-500\\/\\[0\\.5\\] { - --tw-ring-offset-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-red-500\\/\\[0\\.5\\] { + --tw-ring-offset-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .ring-offset-red-500\\/\\[50\\%\\] { - --tw-ring-offset-color: #ef444480; - } - - @supports (color: color-mix(in lab, red, red)) { - .ring-offset-red-500\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in srgb, #ef4444 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .ring-offset-transparent { --tw-ring-offset-color: transparent; } @@ -29177,25 +25130,23 @@ test('@container', async () => { ).toMatchInlineSnapshot(` " .\\@container-normal\\/sidebar { - container: sidebar; + container-type: normal; + container-name: sidebar; } - .\\@container-size\\/sidebar { - container: sidebar / size; + container-type: size; + container-name: sidebar; } - .\\@container\\/sidebar { - container: sidebar / inline-size; + container-type: inline-size; + container-name: sidebar; } - .\\@container { container-type: inline-size; } - .\\@container-normal { container-type: normal; } - .\\@container-size { container-type: size; } @@ -29231,7 +25182,6 @@ describe('spacing utilities', () => { :root, :host { --spacing-4: 1rem; } - .px-4 { padding-inline: var(--spacing-4); } @@ -29256,7 +25206,6 @@ describe('spacing utilities', () => { :root, :host { --spacing-4: 1rem; } - .px-4 { padding-inline: var(--spacing-4); } @@ -29280,15 +25229,12 @@ describe('spacing utilities', () => { :root, :host { --spacing: 4px; } - .px-0\\.25 { - padding-inline: calc(var(--spacing) * .25); + padding-inline: calc(var(--spacing) * 0.25); } - .px-1\\.5 { padding-inline: calc(var(--spacing) * 1.5); } - .px-2\\.75 { padding-inline: calc(var(--spacing) * 2.75); } @@ -29327,19 +25273,15 @@ describe('spacing utilities', () => { :root, :host { --spacing-sm: 8px; } - .w-sm { width: var(--spacing-sm); } - .max-w-sm { max-width: var(--spacing-sm); } - .min-w-sm { min-width: var(--spacing-sm); } - .basis-sm { flex-basis: var(--spacing-sm); } @@ -29417,9 +25359,8 @@ describe('custom utilities', () => { text-box-trim: both; text-box-edge: cap alphabetic; } - - @media (min-width: 1024px) { - .lg\\:text-trim { + .lg\\:text-trim { + @media (width >= 1024px) { text-box-trim: both; text-box-edge: cap alphabetic; } @@ -29459,7 +25400,6 @@ describe('custom utilities', () => { value: var(--example-foo); } } - :root, :host { --example-foo: 123px; } @@ -29516,6 +25456,9 @@ describe('custom utilities', () => { @layer utilities { .really-round { --custom-prop: hi; + border-radius: 50rem; + } + .really-round { border-radius: 30rem; } } @@ -29544,7 +25487,10 @@ describe('custom utilities', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .push-1\\/2, .push-50\\% { + .push-1\\/2 { + right: 50%; + } + .push-50\\% { right: 50%; } } @@ -29577,10 +25523,12 @@ describe('custom utilities', () => { " @layer utilities { .text-sm { - font-size: var(--text-sm, .8755rem); + font-size: var(--text-sm, 0.8755rem); line-height: var(--text-sm--line-height, 1.255rem); - text-rendering: optimizelegibility; - font-size: var(--text-sm, .875rem); + text-rendering: optimizeLegibility; + } + .text-sm { + font-size: var(--text-sm, 0.875rem); line-height: var(--tw-leading, var(--text-sm--line-height, 1.25rem)); } } @@ -29612,11 +25560,9 @@ describe('custom utilities', () => { .rounded { border-radius: 50rem; } - .rounded-\\[33px\\] { border-radius: 33px; } - .rounded-xl { border-radius: var(--radius-xl, 16px); } @@ -29645,15 +25591,12 @@ describe('custom utilities', () => { .top-\\[100px\\] { top: 100px; } - .push-left { right: 100%; } - .right-\\[100px\\] { right: 100px; } - .bottom-\\[100px\\] { bottom: 100px; } @@ -29712,23 +25655,22 @@ describe('custom utilities', () => { " .bar { z-index: 10; + .baz { + z-index: 20; + } } - - .bar .baz { - z-index: 20; - } - .foo { + display: flex; flex-direction: column; text-decoration-line: underline; - display: flex; } - - @media (hover: hover) { - .hover\\:foo:hover { - flex-direction: column; - text-decoration-line: underline; - display: flex; + .hover\\:foo { + &:hover { + @media (hover: hover) { + display: flex; + flex-direction: column; + text-decoration-line: underline; + } } } " @@ -29755,13 +25697,10 @@ describe('custom utilities', () => { " .bar { flex-wrap: wrap; - } - - @media (prefers-color-scheme: dark) { - .bar { + @media (prefers-color-scheme: dark) { + display: flex; flex-direction: column; text-decoration-line: underline; - display: flex; } } " @@ -29876,7 +25815,6 @@ describe('custom utilities', () => { .example-1 { --resolved-value: 1; } - .example-2 { --resolved-value: 2; } @@ -29908,15 +25846,12 @@ describe('custom utilities', () => { .example-1 { --resolved-value: var(--example-1, 1); } - .example-2 { --resolved-value: var(--example-2, 2); } - .example-4 { --resolved-value: var(--example-4, 4); } - .example-a { --resolved-value: var(--example-a, 8); } @@ -29941,20 +25876,18 @@ describe('custom utilities', () => { ` expect(await run(['border--0', 'border--1', 'border--2'], input)).toMatchInlineSnapshot(` - " - .border--0 { - border-color: var(--color-border-0, #e5e7eb); - } - - .border--1 { - border-color: var(--color-border-1, #d1d5db); - } - - .border--2 { - border-color: var(--color-border-2, #9ca3af); - } - " - `) + " + .border--0 { + border-color: var(--color-border-0, #e5e7eb); + } + .border--1 { + border-color: var(--color-border-1, #d1d5db); + } + .border--2 { + border-color: var(--color-border-2, #9ca3af); + } + " + `) expect(await run(['border--3'], input)).toEqual('') }) @@ -29984,15 +25917,12 @@ describe('custom utilities', () => { .example-1 { --resolved-value: var(--example-1, 1); } - .example-2 { --resolved-value: var(--example-2, 2); } - .example-4 { --resolved-value: var(--example-4, 4); } - .example-a { --resolved-value: var(--example-a, 8); } @@ -30023,15 +25953,12 @@ describe('custom utilities', () => { .example-1 { --resolved-value: var(--example-1, 1); } - .example-2 { --resolved-value: var(--example-2, 2); } - .example-4 { --resolved-value: var(--example-4, 4); } - .example-a { --resolved-value: var(--example-a, 8); } @@ -30050,20 +25977,18 @@ describe('custom utilities', () => { ` expect(await run(['example-1', 'example-76', 'example-971'], input)).toMatchInlineSnapshot(` - " - .example-1 { - --resolved-value: 1; - } - - .example-76 { - --resolved-value: 76; - } - - .example-971 { - --resolved-value: 971; - } - " - `) + " + .example-1 { + --resolved-value: 1; + } + .example-76 { + --resolved-value: 76; + } + .example-971 { + --resolved-value: 971; + } + " + `) expect(await run(['example-foo'], input)).toEqual('') }) @@ -30129,17 +26054,14 @@ describe('custom utilities', () => { .toMatchInlineSnapshot(` " .example-0\\.5 { - --value-as-number: .5; + --value-as-number: 0.5; } - .example-1 { --value-as-number: 1; } - .example-2\\/3 { --value-as-ratio: 2 / 3; } - .example-20\\% { --value-as-percentage: 20%; } @@ -30207,15 +26129,12 @@ describe('custom utilities', () => { .example-\\[1\\] { --resolved-value: 1; } - .example-\\[76\\] { --resolved-value: 76; } - .example-\\[971\\] { --resolved-value: 971; } - .example-\\[integer\\:var\\(--my-value\\)\\] { --resolved-value: var(--my-value); } @@ -30261,19 +26180,15 @@ describe('custom utilities', () => { .example-\\(--my-value\\) { --resolved-value: var(--my-value); } - .example-\\[1\\] { --resolved-value: 1; } - .example-\\[76\\] { --resolved-value: 76; } - .example-\\[971\\] { --resolved-value: 971; } - .example-\\[var\\(--my-value\\)\\] { --resolved-value: var(--my-value); } @@ -30306,19 +26221,15 @@ describe('custom utilities', () => { .example-\\(--my-value\\) { --resolved-value: var(--my-value); } - .example-\\[1\\] { --resolved-value: 1; } - .example-\\[76\\] { --resolved-value: 76; } - .example-\\[971\\] { --resolved-value: 971; } - .example-\\[var\\(--my-value\\)\\] { --resolved-value: var(--my-value); } @@ -30351,19 +26262,15 @@ describe('custom utilities', () => { .example-\\(--my-value\\) { --resolved-value: var(--my-value); } - .example-\\[1\\] { --resolved-value: 1; } - .example-\\[76\\] { --resolved-value: 76; } - .example-\\[971\\] { --resolved-value: 971; } - .example-\\[var\\(--my-value\\)\\] { --resolved-value: var(--my-value); } @@ -30387,20 +26294,18 @@ describe('custom utilities', () => { ` expect(await run(['example-a', 'example-76', 'example-[123]'], input)).toMatchInlineSnapshot(` - " - .example-76 { - --resolved-value: 76; - } - - .example-\\[123\\] { - --resolved-value: 123; - } - - .example-a { - --resolved-value: var(--example-a, 8); - } - " - `) + " + .example-76 { + --resolved-value: 76; + } + .example-\\[123\\] { + --resolved-value: 123; + } + .example-a { + --resolved-value: var(--example-a, 8); + } + " + `) expect(await run(['example-[#0088cc]', 'example-[1px]'], input)).toEqual('') }) @@ -30425,11 +26330,9 @@ describe('custom utilities', () => { .example-12 { --resolved-value: calc(12 * 1%); } - .example-\\[20\\%\\] { --resolved-value: 20%; } - .example-full { --resolved-value: var(--example-full, 100%); } @@ -30458,11 +26361,9 @@ describe('custom utilities', () => { .example-37 { --resolved-value: calc(37 * 1%); } - .example-\\[50\\%\\] { --resolved-value: 50%; } - .example-full { --resolved-value: var(--example-full, 100%); } @@ -30505,23 +26406,18 @@ describe('custom utilities', () => { .-example-\\[10px\\] { --resolved-value: calc(10px * -1); } - .-example-\\[20\\%\\] { --resolved-value: calc(20% * -1); } - .-example-full { --resolved-value: calc(var(--example-full, 100%) * -1); } - .example-\\[10px\\] { --resolved-value: 10px; } - .example-\\[20\\%\\] { --resolved-value: 20%; } - .example-full { --resolved-value: var(--example-full, 100%); } @@ -30568,7 +26464,6 @@ describe('custom utilities', () => { :root, :host { --spacing: 4px; } - .example-12 { margin: calc(var(--spacing) * 12); } @@ -30592,7 +26487,7 @@ describe('custom utilities', () => { expect(await run(['example-12'], input)).toMatchInlineSnapshot(` " .example-12 { - margin: 48px; + margin: calc(4px * 12); } " `) @@ -30612,7 +26507,6 @@ describe('custom utilities', () => { .example { --resolved-value: 4; } - .example-123 { --resolved-value: 123; } @@ -30636,7 +26530,6 @@ describe('custom utilities', () => { .example { --resolved-value: calc(4 * 2); } - .example-123 { --resolved-value: calc(123 * 2); } @@ -30662,7 +26555,6 @@ describe('custom utilities', () => { --resolved-value: 4; --resolved-modifier: 25; } - .example { --resolved-value: 4; } @@ -30688,7 +26580,6 @@ describe('custom utilities', () => { --resolved-value: 123; --resolved-modifier: 1; } - .example-123\\/25 { --resolved-value: 123; --resolved-modifier: 25; @@ -30716,17 +26607,14 @@ describe('custom utilities', () => { --resolved-value: 12; --resolved-modifier: 34; } - .example-1 { --resolved-value: 1; --resolved-modifier: 34; } - .example-1\\/1 { --resolved-value: 1; --resolved-modifier: 1; } - .example\\/1 { --resolved-value: 12; --resolved-modifier: 1; @@ -30773,27 +26661,22 @@ describe('custom utilities', () => { --resolved-modifier: 16px; --resolved-modifier-with-calc: calc(16px * 2); } - .example-sm\\/7 { --resolved-value: var(--value-sm, 14px); --resolved-modifier: var(--modifier-7, 28px); --resolved-modifier-with-calc: calc(var(--modifier-7, 28px) * 2); } - .example-sm\\/literal { --resolved-value: var(--value-sm, 14px); --resolved-modifier-literals: literal; } - .example-sm\\/literal-2 { --resolved-value: var(--value-sm, 14px); --resolved-modifier-literals: literal-2; } - .example-\\[12px\\] { --resolved-value: 12px; } - .example-sm { --resolved-value: var(--value-sm, 14px); } @@ -30826,11 +26709,9 @@ describe('custom utilities', () => { .example-1\\/1 { --resolved-value: 1 / 1; } - .example-\\[7\\/9\\] { --resolved-value: 7/9; } - .example-video { --resolved-value: var(--example-video, 16 / 9); } @@ -30858,14 +26739,13 @@ describe('custom utilities', () => { expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(` " .example-xs\\/6 { - font-size: var(--text-xs, .75rem); - line-height: var(--text-xs--line-height, calc(1 / .75)); + font-size: var(--text-xs, 0.75rem); + line-height: var(--text-xs--line-height, calc(1 / 0.75)); line-height: 6; } - .example-xs { - font-size: var(--text-xs, .75rem); - line-height: var(--text-xs--line-height, calc(1 / .75)); + font-size: var(--text-xs, 0.75rem); + line-height: var(--text-xs--line-height, calc(1 / 0.75)); } " `) @@ -30891,14 +26771,13 @@ describe('custom utilities', () => { expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(` " .example-xs\\/6 { - font-size: var(--text-xs, .75rem); - line-height: var(--text-xs--line-height, calc(1 / .75)); + font-size: var(--text-xs, 0.75rem); + line-height: var(--text-xs--line-height, calc(1 / 0.75)); line-height: 6; } - .example-xs { - font-size: var(--text-xs, .75rem); - line-height: var(--text-xs--line-height, calc(1 / .75)); + font-size: var(--text-xs, 0.75rem); + line-height: var(--text-xs--line-height, calc(1 / 0.75)); } " `) @@ -30924,14 +26803,13 @@ describe('custom utilities', () => { expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(` " .example-xs\\/6 { - font-size: var(--text-xs, .75rem); - line-height: var(--text-xs--line-height, calc(1 / .75)); + font-size: var(--text-xs, 0.75rem); + line-height: var(--text-xs--line-height, calc(1 / 0.75)); line-height: 6; } - .example-xs { - font-size: var(--text-xs, .75rem); - line-height: var(--text-xs--line-height, calc(1 / .75)); + font-size: var(--text-xs, 0.75rem); + line-height: var(--text-xs--line-height, calc(1 / 0.75)); } " `) @@ -30957,14 +26835,13 @@ describe('custom utilities', () => { expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(` " .example-xs\\/6 { - font-size: var(--text-xs, .75rem); - line-height: var(--text-xs--line-height, calc(1 / .75)); + font-size: var(--text-xs, 0.75rem); + line-height: var(--text-xs--line-height, calc(1 / 0.75)); line-height: 6; } - .example-xs { - font-size: var(--text-xs, .75rem); - line-height: var(--text-xs--line-height, calc(1 / .75)); + font-size: var(--text-xs, 0.75rem); + line-height: var(--text-xs--line-height, calc(1 / 0.75)); } " `) @@ -31014,9 +26891,8 @@ describe('custom utilities', () => { " :root, :host { --example-foo: red; - --color-red-500: red; + --color-red-500: #f00; } - .example-foo { color: var(--color-red-500); background-color: var(--example-foo); @@ -31051,8 +26927,6 @@ describe('custom utilities', () => { " .mask-r-20\\% { --mask-right: linear-gradient(to left, transparent, black 20%); - -webkit-mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic); - -webkit-mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic); mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic); } " @@ -31078,7 +26952,6 @@ describe('custom utilities', () => { :root, :host { --example-a: 8; } - .example-a { --resolved-value: var(--example-a); } @@ -31173,8 +27046,8 @@ describe('custom utilities', () => { expect(await run(['example-xs'], input)).toMatchInlineSnapshot(` " .example-xs { - font-size: var(--text-xs, .75rem); - line-height: 1.33333; + font-size: var(--text-xs, 0.75rem); + line-height: calc(1 / 0.75); } " `) @@ -31201,8 +27074,8 @@ describe('custom utilities', () => { expect(await run(['example-xs'], input)).toMatchInlineSnapshot(` " .example-xs { - font-size: .75rem; - line-height: var(--text-xs--line-height, calc(1 / .75)); + font-size: 0.75rem; + line-height: var(--text-xs--line-height, calc(1 / 0.75)); } " `) @@ -31230,13 +27103,11 @@ describe('custom utilities', () => { " :root, :host { --color-red-500: #ef4444; - --spacing: .25rem; + --spacing: 0.25rem; } - .foo-123 { font-size: calc(var(--spacing) * 123); } - .foo-red-500 { color: var(--color-red-500); } diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 305859d5b443..f6ab54ca8090 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -8,8 +8,10 @@ const css = String.raw test('*', async () => { expect(await run(['*:flex'])).toMatchInlineSnapshot(` " - :is(.\\*\\:flex > *) { - display: flex; + .\\*\\:flex { + :is(& > *) { + display: flex; + } } " `) @@ -19,8 +21,10 @@ test('*', async () => { test('**', async () => { expect(await run(['**:flex'])).toMatchInlineSnapshot(` " - :is(.\\*\\*\\:flex *) { - display: flex; + .\\*\\*\\:flex { + :is(& *) { + display: flex; + } } " `) @@ -30,8 +34,10 @@ test('**', async () => { test('first-letter', async () => { expect(await run(['first-letter:flex'])).toMatchInlineSnapshot(` " - .first-letter\\:flex:first-letter { - display: flex; + .first-letter\\:flex { + &::first-letter { + display: flex; + } } " `) @@ -41,8 +47,10 @@ test('first-letter', async () => { test('first-line', async () => { expect(await run(['first-line:flex'])).toMatchInlineSnapshot(` " - .first-line\\:flex:first-line { - display: flex; + .first-line\\:flex { + &::first-line { + display: flex; + } } " `) @@ -52,20 +60,19 @@ test('first-line', async () => { test('marker', async () => { expect(await run(['marker:flex'])).toMatchInlineSnapshot(` " - .marker\\:flex ::marker { - display: flex; - } - - .marker\\:flex::marker { - display: flex; - } - - .marker\\:flex ::-webkit-details-marker { - display: flex; - } - - .marker\\:flex::-webkit-details-marker { - display: flex; + .marker\\:flex { + & *::marker { + display: flex; + } + &::marker { + display: flex; + } + & *::-webkit-details-marker { + display: flex; + } + &::-webkit-details-marker { + display: flex; + } } " `) @@ -75,12 +82,13 @@ test('marker', async () => { test('selection', async () => { expect(await run(['selection:flex'])).toMatchInlineSnapshot(` " - .selection\\:flex ::selection { - display: flex; - } - - .selection\\:flex::selection { - display: flex; + .selection\\:flex { + & *::selection { + display: flex; + } + &::selection { + display: flex; + } } " `) @@ -90,8 +98,10 @@ test('selection', async () => { test('file', async () => { expect(await run(['file:flex'])).toMatchInlineSnapshot(` " - .file\\:flex::file-selector-button { - display: flex; + .file\\:flex { + &::file-selector-button { + display: flex; + } } " `) @@ -101,8 +111,10 @@ test('file', async () => { test('placeholder', async () => { expect(await run(['placeholder:flex'])).toMatchInlineSnapshot(` " - .placeholder\\:flex::placeholder { - display: flex; + .placeholder\\:flex { + &::placeholder { + display: flex; + } } " `) @@ -112,8 +124,10 @@ test('placeholder', async () => { test('backdrop', async () => { expect(await run(['backdrop:flex'])).toMatchInlineSnapshot(` " - .backdrop\\:flex::backdrop { - display: flex; + .backdrop\\:flex { + &::backdrop { + display: flex; + } } " `) @@ -123,8 +137,10 @@ test('backdrop', async () => { test('details-content', async () => { expect(await run(['details-content:flex'])).toMatchInlineSnapshot(` " - .details-content\\:flex::details-content { - display: flex; + .details-content\\:flex { + &::details-content { + display: flex; + } } " `) @@ -134,23 +150,24 @@ test('details-content', async () => { test('before', async () => { expect(await run(['before:flex'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-content: ""; - } + @layer properties; + .before\\:flex { + &::before { + content: var(--tw-content); + display: flex; } } - - .before\\:flex:before { - content: var(--tw-content); - display: flex; - } - @property --tw-content { syntax: "*"; - inherits: false; initial-value: ""; + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-content: ""; + } + } } " `) @@ -160,23 +177,24 @@ test('before', async () => { test('after', async () => { expect(await run(['after:flex'])).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-content: ""; - } + @layer properties; + .after\\:flex { + &::after { + content: var(--tw-content); + display: flex; } } - - .after\\:flex:after { - content: var(--tw-content); - display: flex; - } - @property --tw-content { syntax: "*"; - inherits: false; initial-value: ""; + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-content: ""; + } + } } " `) @@ -186,8 +204,20 @@ test('after', async () => { test('first', async () => { expect(await run(['first:flex', 'group-first:flex', 'peer-first:flex'])).toMatchInlineSnapshot(` " - .group-first\\:flex:is(:where(.group):first-child *), .peer-first\\:flex:is(:where(.peer):first-child ~ *), .first\\:flex:first-child { - display: flex; + .group-first\\:flex { + &:is(:where(.group):first-child *) { + display: flex; + } + } + .peer-first\\:flex { + &:is(:where(.peer):first-child ~ *) { + display: flex; + } + } + .first\\:flex { + &:first-child { + display: flex; + } } " `) @@ -197,8 +227,20 @@ test('first', async () => { test('last', async () => { expect(await run(['last:flex', 'group-last:flex', 'peer-last:flex'])).toMatchInlineSnapshot(` " - .group-last\\:flex:is(:where(.group):last-child *), .peer-last\\:flex:is(:where(.peer):last-child ~ *), .last\\:flex:last-child { - display: flex; + .group-last\\:flex { + &:is(:where(.group):last-child *) { + display: flex; + } + } + .peer-last\\:flex { + &:is(:where(.peer):last-child ~ *) { + display: flex; + } + } + .last\\:flex { + &:last-child { + display: flex; + } } " `) @@ -208,8 +250,20 @@ test('last', async () => { test('only', async () => { expect(await run(['only:flex', 'group-only:flex', 'peer-only:flex'])).toMatchInlineSnapshot(` " - .group-only\\:flex:is(:where(.group):only-child *), .peer-only\\:flex:is(:where(.peer):only-child ~ *), .only\\:flex:only-child { - display: flex; + .group-only\\:flex { + &:is(:where(.group):only-child *) { + display: flex; + } + } + .peer-only\\:flex { + &:is(:where(.peer):only-child ~ *) { + display: flex; + } + } + .only\\:flex { + &:only-child { + display: flex; + } } " `) @@ -219,8 +273,20 @@ test('only', async () => { test('odd', async () => { expect(await run(['odd:flex', 'group-odd:flex', 'peer-odd:flex'])).toMatchInlineSnapshot(` " - .group-odd\\:flex:is(:where(.group):nth-child(odd) *), .peer-odd\\:flex:is(:where(.peer):nth-child(odd) ~ *), .odd\\:flex:nth-child(odd) { - display: flex; + .group-odd\\:flex { + &:is(:where(.group):nth-child(odd) *) { + display: flex; + } + } + .peer-odd\\:flex { + &:is(:where(.peer):nth-child(odd) ~ *) { + display: flex; + } + } + .odd\\:flex { + &:nth-child(odd) { + display: flex; + } } " `) @@ -230,8 +296,20 @@ test('odd', async () => { test('even', async () => { expect(await run(['even:flex', 'group-even:flex', 'peer-even:flex'])).toMatchInlineSnapshot(` " - .group-even\\:flex:is(:where(.group):nth-child(2n) *), .peer-even\\:flex:is(:where(.peer):nth-child(2n) ~ *), .even\\:flex:nth-child(2n) { - display: flex; + .group-even\\:flex { + &:is(:where(.group):nth-child(even) *) { + display: flex; + } + } + .peer-even\\:flex { + &:is(:where(.peer):nth-child(even) ~ *) { + display: flex; + } + } + .even\\:flex { + &:nth-child(even) { + display: flex; + } } " `) @@ -242,8 +320,20 @@ test('first-of-type', async () => { expect(await run(['first-of-type:flex', 'group-first-of-type:flex', 'peer-first-of-type:flex'])) .toMatchInlineSnapshot(` " - .group-first-of-type\\:flex:is(:where(.group):first-of-type *), .peer-first-of-type\\:flex:is(:where(.peer):first-of-type ~ *), .first-of-type\\:flex:first-of-type { - display: flex; + .group-first-of-type\\:flex { + &:is(:where(.group):first-of-type *) { + display: flex; + } + } + .peer-first-of-type\\:flex { + &:is(:where(.peer):first-of-type ~ *) { + display: flex; + } + } + .first-of-type\\:flex { + &:first-of-type { + display: flex; + } } " `) @@ -254,8 +344,20 @@ test('last-of-type', async () => { expect(await run(['last-of-type:flex', 'group-last-of-type:flex', 'peer-last-of-type:flex'])) .toMatchInlineSnapshot(` " - .group-last-of-type\\:flex:is(:where(.group):last-of-type *), .peer-last-of-type\\:flex:is(:where(.peer):last-of-type ~ *), .last-of-type\\:flex:last-of-type { - display: flex; + .group-last-of-type\\:flex { + &:is(:where(.group):last-of-type *) { + display: flex; + } + } + .peer-last-of-type\\:flex { + &:is(:where(.peer):last-of-type ~ *) { + display: flex; + } + } + .last-of-type\\:flex { + &:last-of-type { + display: flex; + } } " `) @@ -266,8 +368,20 @@ test('only-of-type', async () => { expect(await run(['only-of-type:flex', 'group-only-of-type:flex', 'peer-only-of-type:flex'])) .toMatchInlineSnapshot(` " - .group-only-of-type\\:flex:is(:where(.group):only-of-type *), .peer-only-of-type\\:flex:is(:where(.peer):only-of-type ~ *), .only-of-type\\:flex:only-of-type { - display: flex; + .group-only-of-type\\:flex { + &:is(:where(.group):only-of-type *) { + display: flex; + } + } + .peer-only-of-type\\:flex { + &:is(:where(.peer):only-of-type ~ *) { + display: flex; + } + } + .only-of-type\\:flex { + &:only-of-type { + display: flex; + } } " `) @@ -278,8 +392,20 @@ test('visited', async () => { expect(await run(['visited:flex', 'group-visited:flex', 'peer-visited:flex'])) .toMatchInlineSnapshot(` " - .group-visited\\:flex:is(:where(.group):visited *), .peer-visited\\:flex:is(:where(.peer):visited ~ *), .visited\\:flex:visited { - display: flex; + .group-visited\\:flex { + &:is(:where(.group):visited *) { + display: flex; + } + } + .peer-visited\\:flex { + &:is(:where(.peer):visited ~ *) { + display: flex; + } + } + .visited\\:flex { + &:visited { + display: flex; + } } " `) @@ -290,8 +416,20 @@ test('target', async () => { expect(await run(['target:flex', 'group-target:flex', 'peer-target:flex'])) .toMatchInlineSnapshot(` " - .group-target\\:flex:is(:where(.group):target *), .peer-target\\:flex:is(:where(.peer):target ~ *), .target\\:flex:target { - display: flex; + .group-target\\:flex { + &:is(:where(.group):target *) { + display: flex; + } + } + .peer-target\\:flex { + &:is(:where(.peer):target ~ *) { + display: flex; + } + } + .target\\:flex { + &:target { + display: flex; + } } " `) @@ -302,8 +440,25 @@ test('open', async () => { expect(await run(['open:flex', 'group-open:flex', 'peer-open:flex', 'not-open:flex'])) .toMatchInlineSnapshot(` " - .not-open\\:flex:not(:is([open], :popover-open, :open)), .group-open\\:flex:is(:where(.group):is([open], :popover-open, :open) *), .peer-open\\:flex:is(:where(.peer):is([open], :popover-open, :open) ~ *), .open\\:flex:is([open], :popover-open, :open) { - display: flex; + .not-open\\:flex { + &:not(*:is([open], :popover-open, :open)) { + display: flex; + } + } + .group-open\\:flex { + &:is(:where(.group):is([open], :popover-open, :open) *) { + display: flex; + } + } + .peer-open\\:flex { + &:is(:where(.peer):is([open], :popover-open, :open) ~ *) { + display: flex; + } + } + .open\\:flex { + &:is([open], :popover-open, :open) { + display: flex; + } } " `) @@ -314,8 +469,20 @@ test('default', async () => { expect(await run(['default:flex', 'group-default:flex', 'peer-default:flex'])) .toMatchInlineSnapshot(` " - .group-default\\:flex:is(:where(.group):default *), .peer-default\\:flex:is(:where(.peer):default ~ *), .default\\:flex:default { - display: flex; + .group-default\\:flex { + &:is(:where(.group):default *) { + display: flex; + } + } + .peer-default\\:flex { + &:is(:where(.peer):default ~ *) { + display: flex; + } + } + .default\\:flex { + &:default { + display: flex; + } } " `) @@ -326,8 +493,20 @@ test('checked', async () => { expect(await run(['checked:flex', 'group-checked:flex', 'peer-checked:flex'])) .toMatchInlineSnapshot(` " - .group-checked\\:flex:is(:where(.group):checked *), .peer-checked\\:flex:is(:where(.peer):checked ~ *), .checked\\:flex:checked { - display: flex; + .group-checked\\:flex { + &:is(:where(.group):checked *) { + display: flex; + } + } + .peer-checked\\:flex { + &:is(:where(.peer):checked ~ *) { + display: flex; + } + } + .checked\\:flex { + &:checked { + display: flex; + } } " `) @@ -338,8 +517,20 @@ test('indeterminate', async () => { expect(await run(['indeterminate:flex', 'group-indeterminate:flex', 'peer-indeterminate:flex'])) .toMatchInlineSnapshot(` " - .group-indeterminate\\:flex:is(:where(.group):indeterminate *), .peer-indeterminate\\:flex:is(:where(.peer):indeterminate ~ *), .indeterminate\\:flex:indeterminate { - display: flex; + .group-indeterminate\\:flex { + &:is(:where(.group):indeterminate *) { + display: flex; + } + } + .peer-indeterminate\\:flex { + &:is(:where(.peer):indeterminate ~ *) { + display: flex; + } + } + .indeterminate\\:flex { + &:indeterminate { + display: flex; + } } " `) @@ -355,8 +546,20 @@ test('placeholder-shown', async () => { ]), ).toMatchInlineSnapshot(` " - .group-placeholder-shown\\:flex:is(:where(.group):placeholder-shown *), .peer-placeholder-shown\\:flex:is(:where(.peer):placeholder-shown ~ *), .placeholder-shown\\:flex:placeholder-shown { - display: flex; + .group-placeholder-shown\\:flex { + &:is(:where(.group):placeholder-shown *) { + display: flex; + } + } + .peer-placeholder-shown\\:flex { + &:is(:where(.peer):placeholder-shown ~ *) { + display: flex; + } + } + .placeholder-shown\\:flex { + &:placeholder-shown { + display: flex; + } } " `) @@ -367,12 +570,20 @@ test('autofill', async () => { expect(await run(['autofill:flex', 'group-autofill:flex', 'peer-autofill:flex'])) .toMatchInlineSnapshot(` " - .group-autofill\\:flex:is(:where(.group):autofill *), .peer-autofill\\:flex:is(:where(.peer):autofill ~ *) { - display: flex; + .group-autofill\\:flex { + &:is(:where(.group):autofill *) { + display: flex; + } } - - .autofill\\:flex:autofill { - display: flex; + .peer-autofill\\:flex { + &:is(:where(.peer):autofill ~ *) { + display: flex; + } + } + .autofill\\:flex { + &:autofill { + display: flex; + } } " `) @@ -383,8 +594,20 @@ test('optional', async () => { expect(await run(['optional:flex', 'group-optional:flex', 'peer-optional:flex'])) .toMatchInlineSnapshot(` " - .group-optional\\:flex:is(:where(.group):optional *), .peer-optional\\:flex:is(:where(.peer):optional ~ *), .optional\\:flex:optional { - display: flex; + .group-optional\\:flex { + &:is(:where(.group):optional *) { + display: flex; + } + } + .peer-optional\\:flex { + &:is(:where(.peer):optional ~ *) { + display: flex; + } + } + .optional\\:flex { + &:optional { + display: flex; + } } " `) @@ -395,8 +618,20 @@ test('required', async () => { expect(await run(['required:flex', 'group-required:flex', 'peer-required:flex'])) .toMatchInlineSnapshot(` " - .group-required\\:flex:is(:where(.group):required *), .peer-required\\:flex:is(:where(.peer):required ~ *), .required\\:flex:required { - display: flex; + .group-required\\:flex { + &:is(:where(.group):required *) { + display: flex; + } + } + .peer-required\\:flex { + &:is(:where(.peer):required ~ *) { + display: flex; + } + } + .required\\:flex { + &:required { + display: flex; + } } " `) @@ -406,8 +641,20 @@ test('required', async () => { test('valid', async () => { expect(await run(['valid:flex', 'group-valid:flex', 'peer-valid:flex'])).toMatchInlineSnapshot(` " - .group-valid\\:flex:is(:where(.group):valid *), .peer-valid\\:flex:is(:where(.peer):valid ~ *), .valid\\:flex:valid { - display: flex; + .group-valid\\:flex { + &:is(:where(.group):valid *) { + display: flex; + } + } + .peer-valid\\:flex { + &:is(:where(.peer):valid ~ *) { + display: flex; + } + } + .valid\\:flex { + &:valid { + display: flex; + } } " `) @@ -418,8 +665,20 @@ test('invalid', async () => { expect(await run(['invalid:flex', 'group-invalid:flex', 'peer-invalid:flex'])) .toMatchInlineSnapshot(` " - .group-invalid\\:flex:is(:where(.group):invalid *), .peer-invalid\\:flex:is(:where(.peer):invalid ~ *), .invalid\\:flex:invalid { - display: flex; + .group-invalid\\:flex { + &:is(:where(.group):invalid *) { + display: flex; + } + } + .peer-invalid\\:flex { + &:is(:where(.peer):invalid ~ *) { + display: flex; + } + } + .invalid\\:flex { + &:invalid { + display: flex; + } } " `) @@ -430,12 +689,20 @@ test('user-valid', async () => { expect(await run(['user-valid:flex', 'group-user-valid:flex', 'peer-user-valid:flex'])) .toMatchInlineSnapshot(` " - .group-user-valid\\:flex:is(:where(.group):user-valid *), .peer-user-valid\\:flex:is(:where(.peer):user-valid ~ *) { - display: flex; + .group-user-valid\\:flex { + &:is(:where(.group):user-valid *) { + display: flex; + } } - - .user-valid\\:flex:user-valid { - display: flex; + .peer-user-valid\\:flex { + &:is(:where(.peer):user-valid ~ *) { + display: flex; + } + } + .user-valid\\:flex { + &:user-valid { + display: flex; + } } " `) @@ -446,12 +713,20 @@ test('user-invalid', async () => { expect(await run(['user-invalid:flex', 'group-user-invalid:flex', 'peer-user-invalid:flex'])) .toMatchInlineSnapshot(` " - .group-user-invalid\\:flex:is(:where(.group):user-invalid *), .peer-user-invalid\\:flex:is(:where(.peer):user-invalid ~ *) { - display: flex; + .group-user-invalid\\:flex { + &:is(:where(.group):user-invalid *) { + display: flex; + } } - - .user-invalid\\:flex:user-invalid { - display: flex; + .peer-user-invalid\\:flex { + &:is(:where(.peer):user-invalid ~ *) { + display: flex; + } + } + .user-invalid\\:flex { + &:user-invalid { + display: flex; + } } " `) @@ -462,8 +737,20 @@ test('in-range', async () => { expect(await run(['in-range:flex', 'group-in-range:flex', 'peer-in-range:flex'])) .toMatchInlineSnapshot(` " - .group-in-range\\:flex:is(:where(.group):in-range *), .peer-in-range\\:flex:is(:where(.peer):in-range ~ *), .in-range\\:flex:in-range { - display: flex; + .group-in-range\\:flex { + &:is(:where(.group):in-range *) { + display: flex; + } + } + .peer-in-range\\:flex { + &:is(:where(.peer):in-range ~ *) { + display: flex; + } + } + .in-range\\:flex { + &:in-range { + display: flex; + } } " `) @@ -474,8 +761,20 @@ test('out-of-range', async () => { expect(await run(['out-of-range:flex', 'group-out-of-range:flex', 'peer-out-of-range:flex'])) .toMatchInlineSnapshot(` " - .group-out-of-range\\:flex:is(:where(.group):out-of-range *), .peer-out-of-range\\:flex:is(:where(.peer):out-of-range ~ *), .out-of-range\\:flex:out-of-range { - display: flex; + .group-out-of-range\\:flex { + &:is(:where(.group):out-of-range *) { + display: flex; + } + } + .peer-out-of-range\\:flex { + &:is(:where(.peer):out-of-range ~ *) { + display: flex; + } + } + .out-of-range\\:flex { + &:out-of-range { + display: flex; + } } " `) @@ -486,8 +785,20 @@ test('read-only', async () => { expect(await run(['read-only:flex', 'group-read-only:flex', 'peer-read-only:flex'])) .toMatchInlineSnapshot(` " - .group-read-only\\:flex:is(:where(.group):read-only *), .peer-read-only\\:flex:is(:where(.peer):read-only ~ *), .read-only\\:flex:read-only { - display: flex; + .group-read-only\\:flex { + &:is(:where(.group):read-only *) { + display: flex; + } + } + .peer-read-only\\:flex { + &:is(:where(.peer):read-only ~ *) { + display: flex; + } + } + .read-only\\:flex { + &:read-only { + display: flex; + } } " `) @@ -497,8 +808,20 @@ test('read-only', async () => { test('empty', async () => { expect(await run(['empty:flex', 'group-empty:flex', 'peer-empty:flex'])).toMatchInlineSnapshot(` " - .group-empty\\:flex:is(:where(.group):empty *), .peer-empty\\:flex:is(:where(.peer):empty ~ *), .empty\\:flex:empty { - display: flex; + .group-empty\\:flex { + &:is(:where(.group):empty *) { + display: flex; + } + } + .peer-empty\\:flex { + &:is(:where(.peer):empty ~ *) { + display: flex; + } + } + .empty\\:flex { + &:empty { + display: flex; + } } " `) @@ -509,8 +832,20 @@ test('focus-within', async () => { expect(await run(['focus-within:flex', 'group-focus-within:flex', 'peer-focus-within:flex'])) .toMatchInlineSnapshot(` " - .group-focus-within\\:flex:is(:where(.group):focus-within *), .peer-focus-within\\:flex:is(:where(.peer):focus-within ~ *), .focus-within\\:flex:focus-within { - display: flex; + .group-focus-within\\:flex { + &:is(:where(.group):focus-within *) { + display: flex; + } + } + .peer-focus-within\\:flex { + &:is(:where(.peer):focus-within ~ *) { + display: flex; + } + } + .focus-within\\:flex { + &:focus-within { + display: flex; + } } " `) @@ -520,9 +855,25 @@ test('focus-within', async () => { test('hover', async () => { expect(await run(['hover:flex', 'group-hover:flex', 'peer-hover:flex'])).toMatchInlineSnapshot(` " - @media (hover: hover) { - .group-hover\\:flex:is(:where(.group):hover *), .peer-hover\\:flex:is(:where(.peer):hover ~ *), .hover\\:flex:hover { - display: flex; + .group-hover\\:flex { + &:is(:where(.group):hover *) { + @media (hover: hover) { + display: flex; + } + } + } + .peer-hover\\:flex { + &:is(:where(.peer):hover ~ *) { + @media (hover: hover) { + display: flex; + } + } + } + .hover\\:flex { + &:hover { + @media (hover: hover) { + display: flex; + } } } " @@ -533,8 +884,20 @@ test('hover', async () => { test('focus', async () => { expect(await run(['focus:flex', 'group-focus:flex', 'peer-focus:flex'])).toMatchInlineSnapshot(` " - .group-focus\\:flex:is(:where(.group):focus *), .peer-focus\\:flex:is(:where(.peer):focus ~ *), .focus\\:flex:focus { - display: flex; + .group-focus\\:flex { + &:is(:where(.group):focus *) { + display: flex; + } + } + .peer-focus\\:flex { + &:is(:where(.peer):focus ~ *) { + display: flex; + } + } + .focus\\:flex { + &:focus { + display: flex; + } } " `) @@ -544,27 +907,33 @@ test('focus', async () => { test('group-hover group-focus sorting', async () => { expect(await run(['group-hover:flex', 'group-focus:flex'])).toMatchInlineSnapshot(` " - @media (hover: hover) { - .group-hover\\:flex:is(:where(.group):hover *) { - display: flex; + .group-hover\\:flex { + &:is(:where(.group):hover *) { + @media (hover: hover) { + display: flex; + } } } - - .group-focus\\:flex:is(:where(.group):focus *) { - display: flex; + .group-focus\\:flex { + &:is(:where(.group):focus *) { + display: flex; + } } " `) expect(await run(['group-focus:flex', 'group-hover:flex'])).toMatchInlineSnapshot(` " - @media (hover: hover) { - .group-hover\\:flex:is(:where(.group):hover *) { - display: flex; + .group-hover\\:flex { + &:is(:where(.group):hover *) { + @media (hover: hover) { + display: flex; + } } } - - .group-focus\\:flex:is(:where(.group):focus *) { - display: flex; + .group-focus\\:flex { + &:is(:where(.group):focus *) { + display: flex; + } } " `) @@ -574,8 +943,20 @@ test('focus-visible', async () => { expect(await run(['focus-visible:flex', 'group-focus-visible:flex', 'peer-focus-visible:flex'])) .toMatchInlineSnapshot(` " - .group-focus-visible\\:flex:is(:where(.group):focus-visible *), .peer-focus-visible\\:flex:is(:where(.peer):focus-visible ~ *), .focus-visible\\:flex:focus-visible { - display: flex; + .group-focus-visible\\:flex { + &:is(:where(.group):focus-visible *) { + display: flex; + } + } + .peer-focus-visible\\:flex { + &:is(:where(.peer):focus-visible ~ *) { + display: flex; + } + } + .focus-visible\\:flex { + &:focus-visible { + display: flex; + } } " `) @@ -586,8 +967,20 @@ test('active', async () => { expect(await run(['active:flex', 'group-active:flex', 'peer-active:flex'])) .toMatchInlineSnapshot(` " - .group-active\\:flex:is(:where(.group):active *), .peer-active\\:flex:is(:where(.peer):active ~ *), .active\\:flex:active { - display: flex; + .group-active\\:flex { + &:is(:where(.group):active *) { + display: flex; + } + } + .peer-active\\:flex { + &:is(:where(.peer):active ~ *) { + display: flex; + } + } + .active\\:flex { + &:active { + display: flex; + } } " `) @@ -598,8 +991,20 @@ test('enabled', async () => { expect(await run(['enabled:flex', 'group-enabled:flex', 'peer-enabled:flex'])) .toMatchInlineSnapshot(` " - .group-enabled\\:flex:is(:where(.group):enabled *), .peer-enabled\\:flex:is(:where(.peer):enabled ~ *), .enabled\\:flex:enabled { - display: flex; + .group-enabled\\:flex { + &:is(:where(.group):enabled *) { + display: flex; + } + } + .peer-enabled\\:flex { + &:is(:where(.peer):enabled ~ *) { + display: flex; + } + } + .enabled\\:flex { + &:enabled { + display: flex; + } } " `) @@ -610,8 +1015,20 @@ test('disabled', async () => { expect(await run(['disabled:flex', 'group-disabled:flex', 'peer-disabled:flex'])) .toMatchInlineSnapshot(` " - .group-disabled\\:flex:is(:where(.group):disabled *), .peer-disabled\\:flex:is(:where(.peer):disabled ~ *), .disabled\\:flex:disabled { - display: flex; + .group-disabled\\:flex { + &:is(:where(.group):disabled *) { + display: flex; + } + } + .peer-disabled\\:flex { + &:is(:where(.peer):disabled ~ *) { + display: flex; + } + } + .disabled\\:flex { + &:disabled { + display: flex; + } } " `) @@ -621,8 +1038,20 @@ test('disabled', async () => { test('inert', async () => { expect(await run(['inert:flex', 'group-inert:flex', 'peer-inert:flex'])).toMatchInlineSnapshot(` " - .group-inert\\:flex:is(:where(.group):is([inert], [inert] *) *), .peer-inert\\:flex:is(:where(.peer):is([inert], [inert] *) ~ *), .inert\\:flex:is([inert], [inert] *) { - display: flex; + .group-inert\\:flex { + &:is(:where(.group):is([inert], [inert] *) *) { + display: flex; + } + } + .peer-inert\\:flex { + &:is(:where(.peer):is([inert], [inert] *) ~ *) { + display: flex; + } + } + .inert\\:flex { + &:is([inert], [inert] *) { + display: flex; + } } " `) @@ -640,21 +1069,49 @@ test('group-[...]', async () => { ]), ).toMatchInlineSnapshot(` " - .group-\\[\\&_p\\]\\:flex:is(:where(.group) p *), .group-\\[\\&\\:hover\\]\\:group-\\[\\&_p\\]\\:flex:is(:where(.group):hover *):is(:where(.group) p *) { - display: flex; - } - - @media (hover: hover) { - .group-\\[\\&_p\\]\\:hover\\:flex:is(:where(.group) p *):hover, .hover\\:group-\\[\\&_p\\]\\:flex:hover:is(:where(.group) p *) { + .group-\\[\\&_p\\]\\:flex { + &:is(:where(.group) p *) { display: flex; } - - @media (hover: hover) { - .hover\\:group-\\[\\&_p\\]\\:hover\\:flex:hover:is(:where(.group) p *):hover { + } + .group-\\[\\&\\:hover\\]\\:group-\\[\\&_p\\]\\:flex { + &:is(:where(.group):hover *) { + &:is(:where(.group) p *) { display: flex; } } } + .group-\\[\\&_p\\]\\:hover\\:flex { + &:is(:where(.group) p *) { + &:hover { + @media (hover: hover) { + display: flex; + } + } + } + } + .hover\\:group-\\[\\&_p\\]\\:flex { + &:hover { + @media (hover: hover) { + &:is(:where(.group) p *) { + display: flex; + } + } + } + } + .hover\\:group-\\[\\&_p\\]\\:hover\\:flex { + &:hover { + @media (hover: hover) { + &:is(:where(.group) p *) { + &:hover { + @media (hover: hover) { + display: flex; + } + } + } + } + } + } " `) @@ -691,24 +1148,40 @@ test('group-*', async () => { ), ).toMatchInlineSnapshot(` " - @media (hover: hover) { - .group-hover\\:flex:is(:where(.group):hover *) { + .group-hover\\:flex { + &:is(:where(.group):hover *) { + @media (hover: hover) { + display: flex; + } + } + } + .group-focus\\:flex { + &:is(:where(.group):focus *) { display: flex; } } - - .group-focus\\:flex:is(:where(.group):focus *) { - display: flex; + .group-focus\\:group-hover\\:flex { + &:is(:where(.group):focus *) { + &:is(:where(.group):hover *) { + @media (hover: hover) { + display: flex; + } + } + } } - - @media (hover: hover) { - .group-focus\\:group-hover\\:flex:is(:where(.group):focus *):is(:where(.group):hover *), .group-hover\\:group-focus\\:flex:is(:where(.group):hover *):is(:where(.group):focus *) { - display: flex; + .group-hover\\:group-focus\\:flex { + &:is(:where(.group):hover *) { + @media (hover: hover) { + &:is(:where(.group):focus *) { + display: flex; + } + } } } - - .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { - display: flex; + .group-hocus\\:flex { + &:is(:is(:where(.group):hover, :where(.group):focus) *) { + display: flex; + } } " `) @@ -742,15 +1215,47 @@ test('peer-[...]', async () => { ]), ).toMatchInlineSnapshot(` " - .peer-\\[\\&_p\\]\\:flex:is(:where(.peer) p ~ *), .peer-\\[\\&\\:hover\\]\\:peer-\\[\\&_p\\]\\:flex:is(:where(.peer):hover ~ *):is(:where(.peer) p ~ *) { - display: flex; - } - - @media (hover: hover) { - .hover\\:peer-\\[\\&_p\\]\\:flex:hover:is(:where(.peer) p ~ *), .peer-\\[\\&_p\\]\\:hover\\:flex:is(:where(.peer) p ~ *):hover, .hover\\:peer-\\[\\&_p\\]\\:focus\\:flex:hover:is(:where(.peer) p ~ *):focus { + .peer-\\[\\&_p\\]\\:flex { + &:is(:where(.peer) p ~ *) { display: flex; } } + .peer-\\[\\&\\:hover\\]\\:peer-\\[\\&_p\\]\\:flex { + &:is(:where(.peer):hover ~ *) { + &:is(:where(.peer) p ~ *) { + display: flex; + } + } + } + .hover\\:peer-\\[\\&_p\\]\\:flex { + &:hover { + @media (hover: hover) { + &:is(:where(.peer) p ~ *) { + display: flex; + } + } + } + } + .peer-\\[\\&_p\\]\\:hover\\:flex { + &:is(:where(.peer) p ~ *) { + &:hover { + @media (hover: hover) { + display: flex; + } + } + } + } + .hover\\:peer-\\[\\&_p\\]\\:focus\\:flex { + &:hover { + @media (hover: hover) { + &:is(:where(.peer) p ~ *) { + &:focus { + display: flex; + } + } + } + } + } " `) @@ -781,24 +1286,40 @@ test('peer-*', async () => { ), ).toMatchInlineSnapshot(` " - @media (hover: hover) { - .peer-hover\\:flex:is(:where(.peer):hover ~ *) { + .peer-hover\\:flex { + &:is(:where(.peer):hover ~ *) { + @media (hover: hover) { + display: flex; + } + } + } + .peer-focus\\:flex { + &:is(:where(.peer):focus ~ *) { display: flex; } } - - .peer-focus\\:flex:is(:where(.peer):focus ~ *) { - display: flex; + .peer-focus\\:peer-hover\\:flex { + &:is(:where(.peer):focus ~ *) { + &:is(:where(.peer):hover ~ *) { + @media (hover: hover) { + display: flex; + } + } + } } - - @media (hover: hover) { - .peer-focus\\:peer-hover\\:flex:is(:where(.peer):focus ~ *):is(:where(.peer):hover ~ *), .peer-hover\\:peer-focus\\:flex:is(:where(.peer):hover ~ *):is(:where(.peer):focus ~ *) { - display: flex; + .peer-hover\\:peer-focus\\:flex { + &:is(:where(.peer):hover ~ *) { + @media (hover: hover) { + &:is(:where(.peer):focus ~ *) { + display: flex; + } + } } } - - .peer-hocus\\:flex:is(:is(:where(.peer):hover, :where(.peer):focus) ~ *) { - display: flex; + .peer-hocus\\:flex { + &:is(:is(:where(.peer):hover, :where(.peer):focus) ~ *) { + display: flex; + } } " `) @@ -824,8 +1345,10 @@ test('peer-*', async () => { test('ltr', async () => { expect(await run(['ltr:flex'])).toMatchInlineSnapshot(` " - .ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { - display: flex; + .ltr\\:flex { + &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { + display: flex; + } } " `) @@ -835,8 +1358,10 @@ test('ltr', async () => { test('rtl', async () => { expect(await run(['rtl:flex'])).toMatchInlineSnapshot(` " - .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { - display: flex; + .rtl\\:flex { + &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + display: flex; + } } " `) @@ -846,8 +1371,8 @@ test('rtl', async () => { test('motion-safe', async () => { expect(await run(['motion-safe:flex'])).toMatchInlineSnapshot(` " - @media (prefers-reduced-motion: no-preference) { - .motion-safe\\:flex { + .motion-safe\\:flex { + @media (prefers-reduced-motion: no-preference) { display: flex; } } @@ -859,8 +1384,8 @@ test('motion-safe', async () => { test('motion-reduce', async () => { expect(await run(['motion-reduce:flex'])).toMatchInlineSnapshot(` " - @media (prefers-reduced-motion: reduce) { - .motion-reduce\\:flex { + .motion-reduce\\:flex { + @media (prefers-reduced-motion: reduce) { display: flex; } } @@ -872,8 +1397,8 @@ test('motion-reduce', async () => { test('dark', async () => { expect(await run(['dark:flex'])).toMatchInlineSnapshot(` " - @media (prefers-color-scheme: dark) { - .dark\\:flex { + .dark\\:flex { + @media (prefers-color-scheme: dark) { display: flex; } } @@ -885,9 +1410,9 @@ test('dark', async () => { test('starting', async () => { expect(await run(['starting:opacity-0'])).toMatchInlineSnapshot(` " - @starting-style { - .starting\\:opacity-0 { - opacity: 0; + .starting\\:opacity-0 { + @starting-style { + opacity: 0%; } } " @@ -898,8 +1423,8 @@ test('starting', async () => { test('print', async () => { expect(await run(['print:flex'])).toMatchInlineSnapshot(` " - @media print { - .print\\:flex { + .print\\:flex { + @media print { display: flex; } } @@ -926,32 +1451,28 @@ test('default breakpoints', async () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 640px) { - .sm\\:flex { + .sm\\:flex { + @media (width >= 640px) { display: flex; } } - - @media (min-width: 768px) { - .md\\:flex { + .md\\:flex { + @media (width >= 768px) { display: flex; } } - - @media (min-width: 1024px) { - .lg\\:flex { + .lg\\:flex { + @media (width >= 1024px) { display: flex; } } - - @media (min-width: 1280px) { - .xl\\:flex { + .xl\\:flex { + @media (width >= 1280px) { display: flex; } } - - @media (min-width: 1536px) { - .\\32 xl\\:flex { + .\\32 xl\\:flex { + @media (width >= 1536px) { display: flex; } } @@ -988,8 +1509,8 @@ test('custom breakpoint', async () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 5000px) { - .\\31 0xl\\:flex { + .\\31 0xl\\:flex { + @media (width >= 5000px) { display: flex; } } @@ -1013,20 +1534,18 @@ test('max-*', async () => { ), ).toMatchInlineSnapshot(` " - @media not all and (min-width: 1024px) { - .max-lg\\:flex { + .max-lg\\:flex { + @media (width < 1024px) { display: flex; } } - - @media not all and (min-width: 768px) { - .max-md\\:flex { + .max-md\\:flex { + @media (width < 768px) { display: flex; } } - - @media not all and (min-width: 640px) { - .max-sm\\:flex { + .max-sm\\:flex { + @media (width < 640px) { display: flex; } } @@ -1064,20 +1583,18 @@ test('min-*', async () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 640px) { - .min-sm\\:flex { + .min-sm\\:flex { + @media (width >= 640px) { display: flex; } } - - @media (min-width: 768px) { - .min-md\\:flex { + .min-md\\:flex { + @media (width >= 768px) { display: flex; } } - - @media (min-width: 1024px) { - .min-lg\\:flex { + .min-lg\\:flex { + @media (width >= 1024px) { display: flex; } } @@ -1117,31 +1634,30 @@ test('sorting stacked min-* and max-* variants', async () => { ), ).toMatchInlineSnapshot(` " - @media (min-width: 280px) { - @media not all and (min-width: 640px) { - .min-xs\\:max-sm\\:flex { + .min-xs\\:max-sm\\:flex { + @media (width >= 280px) { + @media (width < 640px) { display: flex; } } } - - @media (min-width: 640px) { - @media not all and (min-width: 1280px) { - .min-sm\\:max-xl\\:flex { + .min-sm\\:max-xl\\:flex { + @media (width >= 640px) { + @media (width < 1280px) { display: flex; } } - - @media not all and (min-width: 1024px) { - .min-sm\\:max-lg\\:flex { + } + .min-sm\\:max-lg\\:flex { + @media (width >= 640px) { + @media (width < 1024px) { display: flex; } } } - - @media (min-width: 768px) { - @media not all and (min-width: 1024px) { - .min-md\\:max-lg\\:flex { + .min-md\\:max-lg\\:flex { + @media (width >= 768px) { + @media (width < 1024px) { display: flex; } } @@ -1166,25 +1682,26 @@ test('stacked min-* and max-* variants should come after unprefixed variants', a ), ).toMatchInlineSnapshot(` " - @media (min-width: 640px) { - .sm\\:flex { + .sm\\:flex { + @media (width >= 640px) { display: flex; } - - @media not all and (min-width: 1024px) { - .min-sm\\:max-lg\\:flex { + } + .min-sm\\:max-lg\\:flex { + @media (width >= 640px) { + @media (width < 1024px) { display: flex; } } } - - @media (min-width: 768px) { - .md\\:flex { + .md\\:flex { + @media (width >= 768px) { display: flex; } - - @media not all and (min-width: 1024px) { - .min-md\\:max-lg\\:flex { + } + .min-md\\:max-lg\\:flex { + @media (width >= 768px) { + @media (width < 1024px) { display: flex; } } @@ -1224,50 +1741,58 @@ test('min, max and unprefixed breakpoints', async () => { ), ).toMatchInlineSnapshot(` " - @media not all and (min-width: 1024px) { - .max-lg\\:flex { + .max-lg\\:flex { + @media (width < 1024px) { display: flex; } } - - @media not all and (min-width: 1000px) { - .max-\\[1000px\\]\\:flex { + .max-\\[1000px\\]\\:flex { + @media (width < 1000px) { display: flex; } } - - @media not all and (min-width: 768px) { - .max-md\\:flex { + .max-md\\:flex { + @media (width < 768px) { display: flex; } } - - @media not all and (min-width: 640px) { - .max-sm\\:flex { + .max-sm\\:flex { + @media (width < 640px) { display: flex; } } - - @media (min-width: 640px) { - .min-sm\\:flex, .sm\\:flex { + .min-sm\\:flex { + @media (width >= 640px) { display: flex; } } - - @media (min-width: 700px) { - .min-\\[700px\\]\\:flex { + .sm\\:flex { + @media (width >= 640px) { display: flex; } } - - @media (min-width: 768px) { - .md\\:flex, .min-md\\:flex { + .min-\\[700px\\]\\:flex { + @media (width >= 700px) { display: flex; } } - - @media (min-width: 1024px) { - .lg\\:flex, .min-lg\\:flex { + .md\\:flex { + @media (width >= 768px) { + display: flex; + } + } + .min-md\\:flex { + @media (width >= 768px) { + display: flex; + } + } + .lg\\:flex { + @media (width >= 1024px) { + display: flex; + } + } + .min-lg\\:flex { + @media (width >= 1024px) { display: flex; } } @@ -1301,122 +1826,103 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti ]), ).toMatchInlineSnapshot(` " - @media not all and (min-width: calc(1000px + 12em)) { - .max-\\[calc\\(1000px\\+12em\\)\\]\\:flex { + .max-\\[calc\\(1000px\\+12em\\)\\]\\:flex { + @media (width < calc(1000px + 12em)) { display: flex; } } - - @media not all and (min-width: calc(50vh + 12em)) { - .max-\\[calc\\(50vh\\+12em\\)\\]\\:flex { + .max-\\[calc\\(50vh\\+12em\\)\\]\\:flex { + @media (width < calc(50vh + 12em)) { display: flex; } } - - @media not all and (min-width: 12em) { - .max-\\[12em\\]\\:flex { + .max-\\[12em\\]\\:flex { + @media (width < 12em) { display: flex; } } - - @media not all and (min-width: 10em) { - .max-\\[10em\\]\\:flex { + .max-\\[10em\\]\\:flex { + @media (width < 10em) { display: flex; } } - - @media not all and (min-width: 12px) { - .max-\\[12px\\]\\:flex { + .max-\\[12px\\]\\:flex { + @media (width < 12px) { display: flex; } } - - @media not all and (min-width: 10px) { - .max-\\[10px\\]\\:flex { + .max-\\[10px\\]\\:flex { + @media (width < 10px) { display: flex; } } - - @media not all and (min-width: 12rem) { - .max-\\[12rem\\]\\:flex { + .max-\\[12rem\\]\\:flex { + @media (width < 12rem) { display: flex; } } - - @media not all and (min-width: 10rem) { - .max-\\[10rem\\]\\:flex { + .max-\\[10rem\\]\\:flex { + @media (width < 10rem) { display: flex; } } - - @media not all and (min-width: 12vh) { - .max-\\[12vh\\]\\:flex { + .max-\\[12vh\\]\\:flex { + @media (width < 12vh) { display: flex; } } - - @media not all and (min-width: 10vh) { - .max-\\[10vh\\]\\:flex { + .max-\\[10vh\\]\\:flex { + @media (width < 10vh) { display: flex; } } - - @media (min-width: calc(1000px + 12em)) { - .min-\\[calc\\(1000px\\+12em\\)\\]\\:flex { + .min-\\[calc\\(1000px\\+12em\\)\\]\\:flex { + @media (width >= calc(1000px + 12em)) { display: flex; } } - - @media (min-width: calc(50vh + 12em)) { - .min-\\[calc\\(50vh\\+12em\\)\\]\\:flex { + .min-\\[calc\\(50vh\\+12em\\)\\]\\:flex { + @media (width >= calc(50vh + 12em)) { display: flex; } } - - @media (min-width: 10em) { - .min-\\[10em\\]\\:flex { + .min-\\[10em\\]\\:flex { + @media (width >= 10em) { display: flex; } } - - @media (min-width: 12em) { - .min-\\[12em\\]\\:flex { + .min-\\[12em\\]\\:flex { + @media (width >= 12em) { display: flex; } } - - @media (min-width: 10px) { - .min-\\[10px\\]\\:flex { + .min-\\[10px\\]\\:flex { + @media (width >= 10px) { display: flex; } } - - @media (min-width: 12px) { - .min-\\[12px\\]\\:flex { + .min-\\[12px\\]\\:flex { + @media (width >= 12px) { display: flex; } } - - @media (min-width: 10rem) { - .min-\\[10rem\\]\\:flex { + .min-\\[10rem\\]\\:flex { + @media (width >= 10rem) { display: flex; } } - - @media (min-width: 12rem) { - .min-\\[12rem\\]\\:flex { + .min-\\[12rem\\]\\:flex { + @media (width >= 12rem) { display: flex; } } - - @media (min-width: 10vh) { - .min-\\[10vh\\]\\:flex { + .min-\\[10vh\\]\\:flex { + @media (width >= 10vh) { display: flex; } } - - @media (min-width: 12vh) { - .min-\\[12vh\\]\\:flex { + .min-\\[12vh\\]\\:flex { + @media (width >= 12vh) { display: flex; } } @@ -1438,50 +1944,43 @@ test('supports', async () => { ]), ).toMatchInlineSnapshot(` " - @supports (gap: var(--tw)) { - .supports-gap\\:grid { + .supports-gap\\:grid { + @supports (gap: var(--tw)) { display: grid; } } - - @supports (display: grid) and font-format(opentype) { - .supports-\\[\\(display\\:grid\\)_and_font-format\\(opentype\\)\\]\\:grid { + .supports-\\[\\(display\\:grid\\)_and_font-format\\(opentype\\)\\]\\:grid { + @supports (display:grid) and font-format(opentype) { display: grid; } } - - @supports (--test: var(--tw)) { - .supports-\\[--test\\]\\:flex { + .supports-\\[--test\\]\\:flex { + @supports (--test: var(--tw)) { display: flex; } } - - @supports (display: grid) { - .supports-\\[display\\:grid\\]\\:flex { + .supports-\\[display\\:grid\\]\\:flex { + @supports (display:grid) { display: flex; } } - - @supports font-format(opentype) { - .supports-\\[font-format\\(opentype\\)\\]\\:grid { + .supports-\\[font-format\\(opentype\\)\\]\\:grid { + @supports font-format(opentype) { display: grid; } } - - @supports font-tech(color-COLRv1) { - .supports-\\[font-tech\\(color-COLRv1\\)\\]\\:flex { + .supports-\\[font-tech\\(color-COLRv1\\)\\]\\:flex { + @supports font-tech(color-COLRv1) { display: flex; } } - - @supports selector(A > B) { - .supports-\\[selector\\(A_\\>_B\\)\\]\\:flex { + .supports-\\[selector\\(A_\\>_B\\)\\]\\:flex { + @supports selector(A > B) { display: flex; } } - - @supports var(--test) { - .supports-\\[var\\(--test\\)\\]\\:flex { + .supports-\\[var\\(--test\\)\\]\\:flex { + @supports var(--test) { display: flex; } } @@ -1610,162 +2109,366 @@ test('not', async () => { ), ).toMatchInlineSnapshot(` " - .not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target), .not-open\\:flex:not(:is([open], :popover-open, :open)), .not-default\\:flex:not(:default), .not-checked\\:flex:not(:checked), .not-indeterminate\\:flex:not(:indeterminate), .not-placeholder-shown\\:flex:not(:placeholder-shown) { - display: flex; + .not-first\\:flex { + &:not(*:first-child) { + display: flex; + } } - - .not-autofill\\:flex:not(:autofill) { - display: flex; + .not-last\\:flex { + &:not(*:last-child) { + display: flex; + } } - - .not-optional\\:flex:not(:optional), .not-required\\:flex:not(:required), .not-valid\\:flex:not(:valid), .not-invalid\\:flex:not(:invalid), .not-in-range\\:flex:not(:in-range), .not-out-of-range\\:flex:not(:out-of-range), .not-read-only\\:flex:not(:read-only), .not-empty\\:flex:not(:empty), .not-focus-within\\:flex:not(:focus-within), .not-hover\\:flex:not(:hover) { - display: flex; + .not-only\\:flex { + &:not(*:only-child) { + display: flex; + } } - - @media not all and (hover: hover) { - .not-hover\\:flex { + .not-odd\\:flex { + &:not(*:nth-child(odd)) { display: flex; } } - - .not-focus\\:flex:not(:focus), .not-focus-visible\\:flex:not(:focus-visible), .not-active\\:flex:not(:active), .not-enabled\\:flex:not(:enabled), .not-disabled\\:flex:not(:disabled), .not-inert\\:flex:not(:is([inert], [inert] *)), .not-has-checked\\:flex:not(:has(:checked)), .not-aria-selected\\:flex:not([aria-selected="true"]), .not-data-foo\\:flex:not([data-foo]), .not-nth-2\\:flex:not(:nth-child(2)) { - display: flex; + .not-even\\:flex { + &:not(*:nth-child(even)) { + display: flex; + } } - - @supports not (grid: var(--tw)) { - .not-supports-grid\\:flex { + .not-first-of-type\\:flex { + &:not(*:first-of-type) { display: flex; } } - - @media not all and (prefers-reduced-motion: no-preference) { - .not-motion-safe\\:flex { + .not-last-of-type\\:flex { + &:not(*:last-of-type) { display: flex; } } - - @media not all and (prefers-reduced-motion: reduce) { - .not-motion-reduce\\:flex { + .not-only-of-type\\:flex { + &:not(*:only-of-type) { display: flex; } } - - @media not all and (prefers-contrast: more) { - .not-contrast-more\\:flex { + .not-visited\\:flex { + &:not(*:visited) { display: flex; } } - - @media not all and (prefers-contrast: less) { - .not-contrast-less\\:flex { + .not-target\\:flex { + &:not(*:target) { display: flex; } } - - @media (min-width: 640px) { - .not-max-sm\\:flex { + .not-open\\:flex { + &:not(*:is([open], :popover-open, :open)) { display: flex; } } - - @media (min-width: 130px) { - .not-max-\\[130px\\]\\:flex { + .not-default\\:flex { + &:not(*:default) { display: flex; } } - - @media not all and (min-width: 130px) { - .not-min-\\[130px\\]\\:flex { + .not-checked\\:flex { + &:not(*:checked) { display: flex; } } - - @media not all and (min-width: 640px) { - .not-min-sm\\:flex, .not-sm\\:flex { + .not-indeterminate\\:flex { + &:not(*:indeterminate) { display: flex; } } - - @media not all and (orientation: portrait) { - .not-portrait\\:flex { + .not-placeholder-shown\\:flex { + &:not(*:placeholder-shown) { display: flex; } } - - @media not all and (orientation: landscape) { - .not-landscape\\:flex { + .not-autofill\\:flex { + &:not(*:autofill) { display: flex; } } - - .not-ltr\\:flex:not(:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)), .not-rtl\\:flex:not(:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)) { - display: flex; + .not-optional\\:flex { + &:not(*:optional) { + display: flex; + } } - - @media not all and (prefers-color-scheme: dark) { - .not-dark\\:flex { + .not-required\\:flex { + &:not(*:required) { display: flex; } } - - @media not print { - .not-print\\:flex { + .not-valid\\:flex { + &:not(*:valid) { display: flex; } } - - @media not all and (forced-colors: active) { - .not-forced-colors\\:flex { + .not-invalid\\:flex { + &:not(*:invalid) { display: flex; } } - - @media not all and (scripting: none) { - .not-noscript\\:flex { + .not-in-range\\:flex { + &:not(*:in-range) { display: flex; } } - - .not-hocus\\:flex:not(:hover, :focus), .not-device-hocus\\:flex:not(:hover, :focus) { - display: flex; + .not-out-of-range\\:flex { + &:not(*:out-of-range) { + display: flex; + } } - - @media not all and (hover: hover) { - .not-device-hocus\\:flex { + .not-read-only\\:flex { + &:not(*:read-only) { display: flex; } } - - .not-\\[\\:checked\\]\\:flex:not(:checked) { - display: flex; + .not-empty\\:flex { + &:not(*:empty) { + display: flex; + } } - - @media not all and (orientation: landscape) { - .not-\\[\\@media_\\(orientation\\:landscape\\)\\]\\:flex { + .not-focus-within\\:flex { + &:not(*:focus-within) { display: flex; } } - - @media (orientation: portrait) { - .not-\\[\\@media_not_\\(orientation\\:portrait\\)\\]\\:flex { + .not-hover\\:flex { + &:not(*:hover) { + display: flex; + } + @media not (hover: hover) { display: flex; } } - - @media not print { - .not-\\[\\@media_print\\]\\:flex { + .not-focus\\:flex { + &:not(*:focus) { display: flex; } } - - @media not all and (orientation: portrait) { - .not-\\[\\@media\\(orientation\\:portrait\\)\\]\\:flex { + .not-focus-visible\\:flex { + &:not(*:focus-visible) { display: flex; } } - - .group-not-checked\\:flex:is(:where(.group):not(:checked) *), .group-not-hocus\\:flex:is(:where(.group):not(:hover, :focus) *), .group-not-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(:hover, :focus) *), .group-not-\\[\\:checked\\]\\:flex:is(:where(.group):not(:checked) *), .group-not-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(:checked) *), .peer-not-checked\\:flex:is(:where(.peer):not(:checked) ~ *), .peer-not-hocus\\:flex:is(:where(.peer):not(:hover, :focus) ~ *), .peer-not-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):not(:hover, :focus) ~ *), .peer-not-\\[\\:checked\\]\\:flex:is(:where(.peer):not(:checked) ~ *), .peer-not-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):not(:checked) ~ *) { - display: flex; + .not-active\\:flex { + &:not(*:active) { + display: flex; + } + } + .not-enabled\\:flex { + &:not(*:enabled) { + display: flex; + } + } + .not-disabled\\:flex { + &:not(*:disabled) { + display: flex; + } + } + .not-inert\\:flex { + &:not(*:is([inert], [inert] *)) { + display: flex; + } + } + .not-has-checked\\:flex { + &:not(*:has(*:checked)) { + display: flex; + } + } + .not-aria-selected\\:flex { + &:not(*[aria-selected="true"]) { + display: flex; + } + } + .not-data-foo\\:flex { + &:not(*[data-foo]) { + display: flex; + } + } + .not-nth-2\\:flex { + &:not(*:nth-child(2)) { + display: flex; + } + } + .not-supports-grid\\:flex { + @supports not (grid: var(--tw)) { + display: flex; + } + } + .not-motion-safe\\:flex { + @media not (prefers-reduced-motion: no-preference) { + display: flex; + } + } + .not-motion-reduce\\:flex { + @media not (prefers-reduced-motion: reduce) { + display: flex; + } + } + .not-contrast-more\\:flex { + @media not (prefers-contrast: more) { + display: flex; + } + } + .not-contrast-less\\:flex { + @media not (prefers-contrast: less) { + display: flex; + } + } + .not-max-sm\\:flex { + @media not (width < 640px) { + display: flex; + } + } + .not-max-\\[130px\\]\\:flex { + @media not (width < 130px) { + display: flex; + } + } + .not-min-\\[130px\\]\\:flex { + @media not (width >= 130px) { + display: flex; + } + } + .not-min-sm\\:flex { + @media not (width >= 640px) { + display: flex; + } + } + .not-sm\\:flex { + @media not (width >= 640px) { + display: flex; + } + } + .not-portrait\\:flex { + @media not (orientation: portrait) { + display: flex; + } + } + .not-landscape\\:flex { + @media not (orientation: landscape) { + display: flex; + } + } + .not-ltr\\:flex { + &:not(*:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)) { + display: flex; + } + } + .not-rtl\\:flex { + &:not(*:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)) { + display: flex; + } + } + .not-dark\\:flex { + @media not (prefers-color-scheme: dark) { + display: flex; + } + } + .not-print\\:flex { + @media not print { + display: flex; + } + } + .not-forced-colors\\:flex { + @media not (forced-colors: active) { + display: flex; + } + } + .not-noscript\\:flex { + @media not (scripting: none) { + display: flex; + } + } + .not-hocus\\:flex { + &:not(*:hover, *:focus) { + display: flex; + } + } + .not-device-hocus\\:flex { + &:not(*:hover, *:focus) { + display: flex; + } + @media not (hover: hover) { + display: flex; + } + } + .not-\\[\\:checked\\]\\:flex { + &:not(*:is(:checked)) { + display: flex; + } + } + .not-\\[\\@media_\\(orientation\\:landscape\\)\\]\\:flex { + @media not (orientation:landscape) { + display: flex; + } + } + .not-\\[\\@media_not_\\(orientation\\:portrait\\)\\]\\:flex { + @media (orientation:portrait) { + display: flex; + } + } + .not-\\[\\@media_print\\]\\:flex { + @media not print { + display: flex; + } + } + .not-\\[\\@media\\(orientation\\:portrait\\)\\]\\:flex { + @media not (orientation:portrait) { + display: flex; + } + } + .group-not-checked\\:flex { + &:is(:where(.group):not(*:checked) *) { + display: flex; + } + } + .group-not-hocus\\:flex { + &:is(:where(.group):not(*:hover, *:focus) *) { + display: flex; + } + } + .group-not-hocus\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name):not(*:hover, *:focus) *) { + display: flex; + } + } + .group-not-\\[\\:checked\\]\\:flex { + &:is(:where(.group):not(*:is(:checked)) *) { + display: flex; + } + } + .group-not-\\[\\:checked\\]\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name):not(*:is(:checked)) *) { + display: flex; + } + } + .peer-not-checked\\:flex { + &:is(:where(.peer):not(*:checked) ~ *) { + display: flex; + } + } + .peer-not-hocus\\:flex { + &:is(:where(.peer):not(*:hover, *:focus) ~ *) { + display: flex; + } + } + .peer-not-hocus\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name):not(*:hover, *:focus) ~ *) { + display: flex; + } + } + .peer-not-\\[\\:checked\\]\\:flex { + &:is(:where(.peer):not(*:is(:checked)) ~ *) { + display: flex; + } + } + .peer-not-\\[\\:checked\\]\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name):not(*:is(:checked)) ~ *) { + display: flex; + } } " `) @@ -1807,26 +2510,23 @@ test('not', async () => { ), ).toMatchInlineSnapshot(` " - @container not style(--a) { - .not-has-a\\:flex { + .not-has-a\\:flex { + @container not style(--a) { display: flex; } } - - @container style(--b) { - .not-has-b\\:flex { + .not-has-b\\:flex { + @container style(--b) { display: flex; } } - - @container foo not style(--c) { - .not-has-c\\:flex { + .not-has-c\\:flex { + @container foo not style(--c) { display: flex; } } - - @container bar style(--d) { - .not-has-d\\:flex { + .not-has-d\\:flex { + @container bar style(--d) { display: flex; } } @@ -1935,8 +2635,30 @@ test('in', async () => { ]), ).toMatchInlineSnapshot(` " - .not-in-\\[\\.group\\]\\:flex:not(:where(.group) *), .not-in-\\[p\\]\\:flex:not(:where(:is(p)) *), :where([data-visible]) .in-data-visible\\:flex, :where(.group) .in-\\[\\.group\\]\\:flex, :where(:is(p)) .in-\\[p\\]\\:flex { - display: flex; + .not-in-\\[\\.group\\]\\:flex { + &:not(:where(*:is(.group)) *) { + display: flex; + } + } + .not-in-\\[p\\]\\:flex { + &:not(:where(*:is(p)) *) { + display: flex; + } + } + .in-data-visible\\:flex { + :where(*[data-visible]) & { + display: flex; + } + } + .in-\\[\\.group\\]\\:flex { + :where(*:is(.group)) & { + display: flex; + } + } + .in-\\[p\\]\\:flex { + :where(*:is(p)) & { + display: flex; + } } " `) @@ -1993,71 +2715,300 @@ test('has', async () => { ), ).toMatchInlineSnapshot(` " - .group-has-checked\\:flex:is(:where(.group):has(:checked) *), .group-has-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *), .group-has-hocus\\:flex:is(:where(.group):has(:hover, :focus) *), .group-has-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:hover, :focus) *), .group-has-\\[\\:checked\\]\\:flex:is(:where(.group):has(:checked) *), .group-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *), .group-has-\\[\\&\\>img\\]\\:flex:is(:where(.group):has(* > img) *), .group-has-\\[\\&\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(* > img) *), .group-has-\\[\\+img\\]\\:flex:is(:where(.group):has( + img) *), .group-has-\\[\\>img\\]\\:flex:is(:where(.group):has( > img) *), .group-has-\\[\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has( > img) *), .group-has-\\[\\~img\\]\\:flex:is(:where(.group):has( ~ img) *), .peer-has-checked\\:flex:is(:where(.peer):has(:checked) ~ *), .peer-has-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:checked) ~ *), .peer-has-hocus\\:flex:is(:where(.peer):has(:hover, :focus) ~ *), .peer-has-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:hover, :focus) ~ *), .peer-has-\\[\\:checked\\]\\:flex:is(:where(.peer):has(:checked) ~ *), .peer-has-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:checked) ~ *), .peer-has-\\[\\&\\>img\\]\\:flex:is(:where(.peer):has(* > img) ~ *), .peer-has-\\[\\&\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(* > img) ~ *), .peer-has-\\[\\+img\\]\\:flex:is(:where(.peer):has( + img) ~ *), .peer-has-\\[\\>img\\]\\:flex:is(:where(.peer):has( > img) ~ *), .peer-has-\\[\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has( > img) ~ *), .peer-has-\\[\\~img\\]\\:flex:is(:where(.peer):has( ~ img) ~ *), .has-checked\\:flex:has(:checked), .has-hocus\\:flex:has(:hover, :focus), .has-\\[\\:checked\\]\\:flex:has(:checked), .has-\\[\\&\\>img\\]\\:flex:has(* > img), .has-\\[\\+img\\]\\:flex:has( + img), .has-\\[\\>img\\]\\:flex:has( > img), .has-\\[\\~img\\]\\:flex:has( ~ img) { - display: flex; + .group-has-checked\\:flex { + &:is(:where(.group):has(*:checked) *) { + display: flex; + } } - " - `) - - expect( - await run( - [ - 'has-[:checked]/foo:flex', - 'has-[@media_print]:flex', - 'has-custom-at-rule:flex', - 'has-nested-selectors:flex', - ], - css` - @custom-variant custom-at-rule (@media foo); - @custom-variant nested-selectors { - &:hover { - &:focus { - @slot; - } - } - } - @tailwind utilities; - `, - ), - ).toEqual('') -}) - -test('aria', async () => { - expect( - await run([ - 'aria-checked:flex', - 'aria-[invalid=spelling]:flex', - 'aria-[valuenow=1]:flex', - 'aria-[valuenow_=_"1"]:flex', - - 'group-aria-[modal]:flex', - 'group-aria-checked:flex', - 'group-aria-[valuenow=1]:flex', - 'group-aria-[modal]/parent-name:flex', - 'group-aria-checked/parent-name:flex', - 'group-aria-[valuenow=1]/parent-name:flex', - - 'peer-aria-[modal]:flex', - 'peer-aria-checked:flex', - 'peer-aria-[valuenow=1]:flex', - 'peer-aria-[modal]/sibling-name:flex', - 'peer-aria-checked/sibling-name:flex', - 'peer-aria-[valuenow=1]/sibling-name:flex', - ]), - ).toMatchInlineSnapshot(` - " - .group-aria-checked\\:flex:is(:where(.group)[aria-checked="true"] *), .group-aria-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-checked="true"] *), .group-aria-\\[modal\\]\\:flex:is(:where(.group)[aria-modal] *), .group-aria-\\[modal\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-modal] *), .group-aria-\\[valuenow\\=1\\]\\:flex:is(:where(.group)[aria-valuenow="1"] *), .group-aria-\\[valuenow\\=1\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-valuenow="1"] *), .peer-aria-checked\\:flex:is(:where(.peer)[aria-checked="true"] ~ *), .peer-aria-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-checked="true"] ~ *), .peer-aria-\\[modal\\]\\:flex:is(:where(.peer)[aria-modal] ~ *), .peer-aria-\\[modal\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-modal] ~ *), .peer-aria-\\[valuenow\\=1\\]\\:flex:is(:where(.peer)[aria-valuenow="1"] ~ *), .peer-aria-\\[valuenow\\=1\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-valuenow="1"] ~ *), .aria-checked\\:flex[aria-checked="true"], .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"], .aria-\\[valuenow_\\=_\\"1\\"\\]\\:flex[aria-valuenow="1"], .aria-\\[valuenow\\=1\\]\\:flex[aria-valuenow="1"] { - display: flex; + .group-has-checked\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name):has(*:checked) *) { + display: flex; + } } - " - `) - expect(await run(['aria-checked/foo:flex', 'aria-[invalid=spelling]/foo:flex'])).toEqual('') -}) - -test('data', async () => { - expect( - await run([ - 'data-disabled:flex', + .group-has-hocus\\:flex { + &:is(:where(.group):has(*:hover, *:focus) *) { + display: flex; + } + } + .group-has-hocus\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name):has(*:hover, *:focus) *) { + display: flex; + } + } + .group-has-\\[\\:checked\\]\\:flex { + &:is(:where(.group):has(*:is(:checked)) *) { + display: flex; + } + } + .group-has-\\[\\:checked\\]\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name):has(*:is(:checked)) *) { + display: flex; + } + } + .group-has-\\[\\&\\>img\\]\\:flex { + &:is(:where(.group):has(*>img) *) { + display: flex; + } + } + .group-has-\\[\\&\\>img\\]\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name):has(*>img) *) { + display: flex; + } + } + .group-has-\\[\\+img\\]\\:flex { + &:is(:where(.group):has(+img) *) { + display: flex; + } + } + .group-has-\\[\\>img\\]\\:flex { + &:is(:where(.group):has(>img) *) { + display: flex; + } + } + .group-has-\\[\\>img\\]\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name):has(>img) *) { + display: flex; + } + } + .group-has-\\[\\~img\\]\\:flex { + &:is(:where(.group):has(~img) *) { + display: flex; + } + } + .peer-has-checked\\:flex { + &:is(:where(.peer):has(*:checked) ~ *) { + display: flex; + } + } + .peer-has-checked\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name):has(*:checked) ~ *) { + display: flex; + } + } + .peer-has-hocus\\:flex { + &:is(:where(.peer):has(*:hover, *:focus) ~ *) { + display: flex; + } + } + .peer-has-hocus\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name):has(*:hover, *:focus) ~ *) { + display: flex; + } + } + .peer-has-\\[\\:checked\\]\\:flex { + &:is(:where(.peer):has(*:is(:checked)) ~ *) { + display: flex; + } + } + .peer-has-\\[\\:checked\\]\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name):has(*:is(:checked)) ~ *) { + display: flex; + } + } + .peer-has-\\[\\&\\>img\\]\\:flex { + &:is(:where(.peer):has(*>img) ~ *) { + display: flex; + } + } + .peer-has-\\[\\&\\>img\\]\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name):has(*>img) ~ *) { + display: flex; + } + } + .peer-has-\\[\\+img\\]\\:flex { + &:is(:where(.peer):has(+img) ~ *) { + display: flex; + } + } + .peer-has-\\[\\>img\\]\\:flex { + &:is(:where(.peer):has(>img) ~ *) { + display: flex; + } + } + .peer-has-\\[\\>img\\]\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name):has(>img) ~ *) { + display: flex; + } + } + .peer-has-\\[\\~img\\]\\:flex { + &:is(:where(.peer):has(~img) ~ *) { + display: flex; + } + } + .has-checked\\:flex { + &:has(*:checked) { + display: flex; + } + } + .has-hocus\\:flex { + &:has(*:hover, *:focus) { + display: flex; + } + } + .has-\\[\\:checked\\]\\:flex { + &:has(*:is(:checked)) { + display: flex; + } + } + .has-\\[\\&\\>img\\]\\:flex { + &:has(*>img) { + display: flex; + } + } + .has-\\[\\+img\\]\\:flex { + &:has(+img) { + display: flex; + } + } + .has-\\[\\>img\\]\\:flex { + &:has(>img) { + display: flex; + } + } + .has-\\[\\~img\\]\\:flex { + &:has(~img) { + display: flex; + } + } + " + `) + + expect( + await run( + [ + 'has-[:checked]/foo:flex', + 'has-[@media_print]:flex', + 'has-custom-at-rule:flex', + 'has-nested-selectors:flex', + ], + css` + @custom-variant custom-at-rule (@media foo); + @custom-variant nested-selectors { + &:hover { + &:focus { + @slot; + } + } + } + @tailwind utilities; + `, + ), + ).toEqual('') +}) + +test('aria', async () => { + expect( + await run([ + 'aria-checked:flex', + 'aria-[invalid=spelling]:flex', + 'aria-[valuenow=1]:flex', + 'aria-[valuenow_=_"1"]:flex', + + 'group-aria-[modal]:flex', + 'group-aria-checked:flex', + 'group-aria-[valuenow=1]:flex', + 'group-aria-[modal]/parent-name:flex', + 'group-aria-checked/parent-name:flex', + 'group-aria-[valuenow=1]/parent-name:flex', + + 'peer-aria-[modal]:flex', + 'peer-aria-checked:flex', + 'peer-aria-[valuenow=1]:flex', + 'peer-aria-[modal]/sibling-name:flex', + 'peer-aria-checked/sibling-name:flex', + 'peer-aria-[valuenow=1]/sibling-name:flex', + ]), + ).toMatchInlineSnapshot(` + " + .group-aria-checked\\:flex { + &:is(:where(.group)[aria-checked="true"] *) { + display: flex; + } + } + .group-aria-checked\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name)[aria-checked="true"] *) { + display: flex; + } + } + .group-aria-\\[modal\\]\\:flex { + &:is(:where(.group)[aria-modal] *) { + display: flex; + } + } + .group-aria-\\[modal\\]\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name)[aria-modal] *) { + display: flex; + } + } + .group-aria-\\[valuenow\\=1\\]\\:flex { + &:is(:where(.group)[aria-valuenow="1"] *) { + display: flex; + } + } + .group-aria-\\[valuenow\\=1\\]\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name)[aria-valuenow="1"] *) { + display: flex; + } + } + .peer-aria-checked\\:flex { + &:is(:where(.peer)[aria-checked="true"] ~ *) { + display: flex; + } + } + .peer-aria-checked\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name)[aria-checked="true"] ~ *) { + display: flex; + } + } + .peer-aria-\\[modal\\]\\:flex { + &:is(:where(.peer)[aria-modal] ~ *) { + display: flex; + } + } + .peer-aria-\\[modal\\]\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name)[aria-modal] ~ *) { + display: flex; + } + } + .peer-aria-\\[valuenow\\=1\\]\\:flex { + &:is(:where(.peer)[aria-valuenow="1"] ~ *) { + display: flex; + } + } + .peer-aria-\\[valuenow\\=1\\]\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name)[aria-valuenow="1"] ~ *) { + display: flex; + } + } + .aria-checked\\:flex { + &[aria-checked="true"] { + display: flex; + } + } + .aria-\\[invalid\\=spelling\\]\\:flex { + &[aria-invalid="spelling"] { + display: flex; + } + } + .aria-\\[valuenow_\\=_\\"1\\"\\]\\:flex { + &[aria-valuenow = "1"] { + display: flex; + } + } + .aria-\\[valuenow\\=1\\]\\:flex { + &[aria-valuenow="1"] { + display: flex; + } + } + " + `) + expect(await run(['aria-checked/foo:flex', 'aria-[invalid=spelling]/foo:flex'])).toEqual('') +}) + +test('data', async () => { + expect( + await run([ + 'data-disabled:flex', 'data-[potato=salad]:flex', 'data-[potato_=_"salad"]:flex', 'data-[potato_^=_"salad"]:flex', @@ -2085,8 +3036,120 @@ test('data', async () => { ]), ).toMatchInlineSnapshot(` " - .group-data-\\[disabled\\]\\:flex:is(:where(.group)[data-disabled] *), .group-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-disabled] *), .group-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo$="bar" i] *), .group-data-\\[foo\\$\\=bar_baz_i\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo$="bar baz" i] *), .group-data-\\[foo\\=1\\]\\:flex:is(:where(.group)[data-foo="1"] *), .group-data-\\[foo\\=1\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo="1"] *), .group-data-\\[foo\\=bar\\ baz\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo="bar baz"] *), .peer-data-\\[disabled\\]\\:flex:is(:where(.peer)[data-disabled] ~ *), .peer-data-\\[disabled\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-disabled] ~ *), .peer-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo$="bar" i] ~ *), .peer-data-\\[foo\\$\\=bar_baz_i\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo$="bar baz" i] ~ *), .peer-data-\\[foo\\=1\\]\\:flex:is(:where(.peer)[data-foo="1"] ~ *), .peer-data-\\[foo\\=1\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo="1"] ~ *), .peer-data-\\[foo\\=bar\\ baz\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo="bar baz"] ~ *), .data-disabled\\:flex[data-disabled], .data-\\[foo\\$\\=\\'bar\\'_i\\]\\:flex[data-foo$="bar" i], .data-\\[foo\\$\\=bar_baz_i\\]\\:flex[data-foo$="bar baz" i], .data-\\[foo\\=1\\]\\:flex[data-foo="1"], .data-\\[foo\\=bar_baz\\]\\:flex[data-foo="bar baz"], .data-\\[potato_\\=_\\"salad\\"\\]\\:flex[data-potato="salad"], .data-\\[potato_\\^\\=_\\"salad\\"\\]\\:flex[data-potato^="salad"], .data-\\[potato\\=\\"\\^_\\=\\"\\]\\:flex[data-potato="^ ="], .data-\\[potato\\=salad\\]\\:flex[data-potato="salad"] { - display: flex; + .group-data-\\[disabled\\]\\:flex { + &:is(:where(.group)[data-disabled] *) { + display: flex; + } + } + .group-data-\\[disabled\\]\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name)[data-disabled] *) { + display: flex; + } + } + .group-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name)[data-foo$='bar' i] *) { + display: flex; + } + } + .group-data-\\[foo\\$\\=bar_baz_i\\]\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name)[data-foo$="bar baz" i] *) { + display: flex; + } + } + .group-data-\\[foo\\=1\\]\\:flex { + &:is(:where(.group)[data-foo="1"] *) { + display: flex; + } + } + .group-data-\\[foo\\=1\\]\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name)[data-foo="1"] *) { + display: flex; + } + } + .group-data-\\[foo\\=bar\\ baz\\]\\/parent-name\\:flex { + &:is(:where(.group\\/parent-name)[data-foo="bar baz"] *) { + display: flex; + } + } + .peer-data-\\[disabled\\]\\:flex { + &:is(:where(.peer)[data-disabled] ~ *) { + display: flex; + } + } + .peer-data-\\[disabled\\]\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name)[data-disabled] ~ *) { + display: flex; + } + } + .peer-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name)[data-foo$='bar' i] ~ *) { + display: flex; + } + } + .peer-data-\\[foo\\$\\=bar_baz_i\\]\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name)[data-foo$="bar baz" i] ~ *) { + display: flex; + } + } + .peer-data-\\[foo\\=1\\]\\:flex { + &:is(:where(.peer)[data-foo="1"] ~ *) { + display: flex; + } + } + .peer-data-\\[foo\\=1\\]\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name)[data-foo="1"] ~ *) { + display: flex; + } + } + .peer-data-\\[foo\\=bar\\ baz\\]\\/sibling-name\\:flex { + &:is(:where(.peer\\/sibling-name)[data-foo="bar baz"] ~ *) { + display: flex; + } + } + .data-disabled\\:flex { + &[data-disabled] { + display: flex; + } + } + .data-\\[foo\\$\\=\\'bar\\'_i\\]\\:flex { + &[data-foo$='bar' i] { + display: flex; + } + } + .data-\\[foo\\$\\=bar_baz_i\\]\\:flex { + &[data-foo$="bar baz" i] { + display: flex; + } + } + .data-\\[foo\\=1\\]\\:flex { + &[data-foo="1"] { + display: flex; + } + } + .data-\\[foo\\=bar_baz\\]\\:flex { + &[data-foo="bar baz"] { + display: flex; + } + } + .data-\\[potato_\\=_\\"salad\\"\\]\\:flex { + &[data-potato = "salad"] { + display: flex; + } + } + .data-\\[potato_\\^\\=_\\"salad\\"\\]\\:flex { + &[data-potato ^= "salad"] { + display: flex; + } + } + .data-\\[potato\\=\\"\\^_\\=\\"\\]\\:flex { + &[data-potato="^ ="] { + display: flex; + } + } + .data-\\[potato\\=salad\\]\\:flex { + &[data-potato="salad"] { + display: flex; + } } " `) @@ -2103,8 +3166,8 @@ test('data', async () => { test('portrait', async () => { expect(await run(['portrait:flex'])).toMatchInlineSnapshot(` " - @media (orientation: portrait) { - .portrait\\:flex { + .portrait\\:flex { + @media (orientation: portrait) { display: flex; } } @@ -2116,8 +3179,8 @@ test('portrait', async () => { test('landscape', async () => { expect(await run(['landscape:flex'])).toMatchInlineSnapshot(` " - @media (orientation: landscape) { - .landscape\\:flex { + .landscape\\:flex { + @media (orientation: landscape) { display: flex; } } @@ -2129,8 +3192,8 @@ test('landscape', async () => { test('contrast-more', async () => { expect(await run(['contrast-more:flex'])).toMatchInlineSnapshot(` " - @media (prefers-contrast: more) { - .contrast-more\\:flex { + .contrast-more\\:flex { + @media (prefers-contrast: more) { display: flex; } } @@ -2142,8 +3205,8 @@ test('contrast-more', async () => { test('contrast-less', async () => { expect(await run(['contrast-less:flex'])).toMatchInlineSnapshot(` " - @media (prefers-contrast: less) { - .contrast-less\\:flex { + .contrast-less\\:flex { + @media (prefers-contrast: less) { display: flex; } } @@ -2155,8 +3218,8 @@ test('contrast-less', async () => { test('forced-colors', async () => { expect(await run(['forced-colors:flex'])).toMatchInlineSnapshot(` " - @media (forced-colors: active) { - .forced-colors\\:flex { + .forced-colors\\:flex { + @media (forced-colors: active) { display: flex; } } @@ -2168,8 +3231,8 @@ test('forced-colors', async () => { test('inverted-colors', async () => { expect(await run(['inverted-colors:flex'])).toMatchInlineSnapshot(` " - @media (inverted-colors: inverted) { - .inverted-colors\\:flex { + .inverted-colors\\:flex { + @media (inverted-colors: inverted) { display: flex; } } @@ -2180,8 +3243,8 @@ test('inverted-colors', async () => { test('pointer-none', async () => { expect(await run(['pointer-none:flex'])).toMatchInlineSnapshot(` " - @media (pointer: none) { - .pointer-none\\:flex { + .pointer-none\\:flex { + @media (pointer: none) { display: flex; } } @@ -2192,8 +3255,8 @@ test('pointer-none', async () => { test('pointer-coarse', async () => { expect(await run(['pointer-coarse:flex'])).toMatchInlineSnapshot(` " - @media (pointer: coarse) { - .pointer-coarse\\:flex { + .pointer-coarse\\:flex { + @media (pointer: coarse) { display: flex; } } @@ -2204,8 +3267,8 @@ test('pointer-coarse', async () => { test('pointer-fine', async () => { expect(await run(['pointer-fine:flex'])).toMatchInlineSnapshot(` " - @media (pointer: fine) { - .pointer-fine\\:flex { + .pointer-fine\\:flex { + @media (pointer: fine) { display: flex; } } @@ -2216,8 +3279,8 @@ test('pointer-fine', async () => { test('any-pointer-none', async () => { expect(await run(['any-pointer-none:flex'])).toMatchInlineSnapshot(` " - @media (any-pointer: none) { - .any-pointer-none\\:flex { + .any-pointer-none\\:flex { + @media (any-pointer: none) { display: flex; } } @@ -2228,8 +3291,8 @@ test('any-pointer-none', async () => { test('any-pointer-coarse', async () => { expect(await run(['any-pointer-coarse:flex'])).toMatchInlineSnapshot(` " - @media (any-pointer: coarse) { - .any-pointer-coarse\\:flex { + .any-pointer-coarse\\:flex { + @media (any-pointer: coarse) { display: flex; } } @@ -2240,8 +3303,8 @@ test('any-pointer-coarse', async () => { test('any-pointer-fine', async () => { expect(await run(['any-pointer-fine:flex'])).toMatchInlineSnapshot(` " - @media (any-pointer: fine) { - .any-pointer-fine\\:flex { + .any-pointer-fine\\:flex { + @media (any-pointer: fine) { display: flex; } } @@ -2252,8 +3315,8 @@ test('any-pointer-fine', async () => { test('scripting-none', async () => { expect(await run(['noscript:flex'])).toMatchInlineSnapshot(` " - @media (scripting: none) { - .noscript\\:flex { + .noscript\\:flex { + @media (scripting: none) { display: flex; } } @@ -2277,8 +3340,55 @@ test('nth', async () => { ]), ).toMatchInlineSnapshot(` " - .nth-3\\:flex:nth-child(3), .nth-\\[2n\\+1\\]\\:flex:nth-child(odd), .nth-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-child(odd of .foo), .nth-last-3\\:flex:nth-last-child(3), .nth-last-\\[2n\\+1\\]\\:flex:nth-last-child(odd), .nth-last-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-last-child(odd of .foo), .nth-of-type-3\\:flex:nth-of-type(3), .nth-of-type-\\[2n\\+1\\]\\:flex:nth-of-type(odd), .nth-last-of-type-3\\:flex:nth-last-of-type(3), .nth-last-of-type-\\[2n\\+1\\]\\:flex:nth-last-of-type(odd) { - display: flex; + .nth-3\\:flex { + &:nth-child(3) { + display: flex; + } + } + .nth-\\[2n\\+1\\]\\:flex { + &:nth-child(2n+1) { + display: flex; + } + } + .nth-\\[2n\\+1_of_\\.foo\\]\\:flex { + &:nth-child(2n+1 of .foo) { + display: flex; + } + } + .nth-last-3\\:flex { + &:nth-last-child(3) { + display: flex; + } + } + .nth-last-\\[2n\\+1\\]\\:flex { + &:nth-last-child(2n+1) { + display: flex; + } + } + .nth-last-\\[2n\\+1_of_\\.foo\\]\\:flex { + &:nth-last-child(2n+1 of .foo) { + display: flex; + } + } + .nth-of-type-3\\:flex { + &:nth-of-type(3) { + display: flex; + } + } + .nth-of-type-\\[2n\\+1\\]\\:flex { + &:nth-of-type(2n+1) { + display: flex; + } + } + .nth-last-of-type-3\\:flex { + &:nth-last-of-type(3) { + display: flex; + } + } + .nth-last-of-type-\\[2n\\+1\\]\\:flex { + &:nth-last-of-type(2n+1) { + display: flex; + } } " `) @@ -2348,98 +3458,93 @@ test('container queries', async () => { ), ).toMatchInlineSnapshot(` " - @container name not (min-width: 1440px) { - .\\@max-foo-bar\\/name\\:flex { + .\\@max-foo-bar\\/name\\:flex { + @container name (width < 1440px) { display: flex; } } - - @container not (min-width: 1440px) { - .\\@max-foo-bar\\:flex { + .\\@max-foo-bar\\:flex { + @container (width < 1440px) { display: flex; } } - - @container name not (min-width: 1024px) { - .\\@max-lg\\/name\\:flex { + .\\@max-lg\\/name\\:flex { + @container name (width < 1024px) { display: flex; } } - - @container not (min-width: 1024px) { - .\\@max-lg\\:flex { + .\\@max-lg\\:flex { + @container (width < 1024px) { display: flex; } } - - @container name not (min-width: 456px) { - .\\@max-\\[456px\\]\\/name\\:flex { + .\\@max-\\[456px\\]\\/name\\:flex { + @container name (width < 456px) { display: flex; } } - - @container not (min-width: 123px) { - .\\@max-\\[123px\\]\\:flex { + .\\@max-\\[123px\\]\\:flex { + @container (width < 123px) { display: flex; } } - - @container (min-width: 123px) { - .\\@\\[123px\\]\\:flex, .\\@min-\\[123px\\]\\:flex { + .\\@\\[123px\\]\\:flex { + @container (width >= 123px) { display: flex; } } - - @container name (min-width: 456px) { - .\\@\\[456px\\]\\/name\\:flex, .\\@min-\\[456px\\]\\/name\\:flex { + .\\@min-\\[123px\\]\\:flex { + @container (width >= 123px) { display: flex; } } - - @container name (min-width: 1024px) { - .\\@lg\\/name\\:flex { + .\\@\\[456px\\]\\/name\\:flex { + @container name (width >= 456px) { display: flex; } } - - @container (min-width: 1024px) { - .\\@lg\\:flex { + .\\@min-\\[456px\\]\\/name\\:flex { + @container name (width >= 456px) { + display: flex; + } + } + .\\@lg\\/name\\:flex { + @container name (width >= 1024px) { + display: flex; + } + } + .\\@lg\\:flex { + @container (width >= 1024px) { display: flex; } } - - @container name (min-width: 1024px) { - .\\@min-lg\\/name\\:flex { + .\\@min-lg\\/name\\:flex { + @container name (width >= 1024px) { display: flex; } } - - @container (min-width: 1024px) { - .\\@min-lg\\:flex { + .\\@min-lg\\:flex { + @container (width >= 1024px) { display: flex; } } - - @container name (min-width: 1440px) { - .\\@foo-bar\\/name\\:flex { + .\\@foo-bar\\/name\\:flex { + @container name (width >= 1440px) { display: flex; } } - - @container (min-width: 1440px) { - .\\@foo-bar\\:flex { + .\\@foo-bar\\:flex { + @container (width >= 1440px) { display: flex; } } - - @container name (min-width: 1440px) { - .\\@min-foo-bar\\/name\\:flex { + .\\@min-foo-bar\\/name\\:flex { + @container name (width >= 1440px) { display: flex; } } - - @container (min-width: 1440px) { - .\\@min-foo-bar\\:flex { + .\\@min-foo-bar\\:flex { + @container (width >= 1440px) { display: flex; } } @@ -2566,189 +3671,408 @@ test('variant order', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-content: ""; + @layer properties; + .group-hover\\:flex { + &:is(:where(.group):hover *) { + @media (hover: hover) { + display: flex; } } } - - @media (hover: hover) { - .group-hover\\:flex:is(:where(.group):hover *), .peer-hover\\:flex:is(:where(.peer):hover ~ *) { + .peer-hover\\:flex { + &:is(:where(.peer):hover ~ *) { + @media (hover: hover) { + display: flex; + } + } + } + .first-letter\\:flex { + &::first-letter { display: flex; } } - - .first-letter\\:flex:first-letter, .first-line\\:flex:first-line { - display: flex; + .first-line\\:flex { + &::first-line { + display: flex; + } } - - .marker\\:flex ::marker { - display: flex; + .marker\\:flex { + & *::marker { + display: flex; + } + &::marker { + display: flex; + } + & *::-webkit-details-marker { + display: flex; + } + &::-webkit-details-marker { + display: flex; + } } - - .marker\\:flex::marker { - display: flex; + .selection\\:flex { + & *::selection { + display: flex; + } + &::selection { + display: flex; + } } - - .marker\\:flex ::-webkit-details-marker { - display: flex; + .file\\:flex { + &::file-selector-button { + display: flex; + } } - - .marker\\:flex::-webkit-details-marker { - display: flex; + .placeholder\\:flex { + &::placeholder { + display: flex; + } } - - .selection\\:flex ::selection { - display: flex; + .backdrop\\:flex { + &::backdrop { + display: flex; + } } - - .selection\\:flex::selection { - display: flex; + .details-content\\:flex { + &::details-content { + display: flex; + } } - - .file\\:flex::file-selector-button { - display: flex; + .before\\:flex { + &::before { + content: var(--tw-content); + display: flex; + } } - - .placeholder\\:flex::placeholder, .backdrop\\:flex::backdrop { - display: flex; + .after\\:flex { + &::after { + content: var(--tw-content); + display: flex; + } } - - .details-content\\:flex::details-content { - display: flex; + .first\\:flex { + &:first-child { + display: flex; + } } - - .before\\:flex:before, .after\\:flex:after { - content: var(--tw-content); - display: flex; + .last\\:flex { + &:last-child { + display: flex; + } } - - .first\\:flex:first-child, .last\\:flex:last-child, .only\\:flex:only-child, .odd\\:flex:nth-child(odd), .even\\:flex:nth-child(2n), .first-of-type\\:flex:first-of-type, .last-of-type\\:flex:last-of-type, .only-of-type\\:flex:only-of-type, .visited\\:flex:visited, .target\\:flex:target, .open\\:flex:is([open], :popover-open, :open), .default\\:flex:default, .checked\\:flex:checked, .indeterminate\\:flex:indeterminate, .placeholder-shown\\:flex:placeholder-shown { - display: flex; + .only\\:flex { + &:only-child { + display: flex; + } } - - .autofill\\:flex:autofill { - display: flex; + .odd\\:flex { + &:nth-child(odd) { + display: flex; + } } - - .optional\\:flex:optional, .required\\:flex:required, .valid\\:flex:valid, .invalid\\:flex:invalid, .in-range\\:flex:in-range, .out-of-range\\:flex:out-of-range, .read-only\\:flex:read-only, .empty\\:flex:empty, .focus-within\\:flex:focus-within { - display: flex; + .even\\:flex { + &:nth-child(even) { + display: flex; + } } - - @media (hover: hover) { - .hover\\:flex:hover { + .first-of-type\\:flex { + &:first-of-type { display: flex; } } - - .focus\\:flex:focus, .focus-visible\\:flex:focus-visible, .active\\:flex:active, .enabled\\:flex:enabled, .disabled\\:flex:disabled, .has-\\[\\:hover\\]\\:flex:has(:hover), .aria-busy\\:flex[aria-busy="true"], .aria-checked\\:flex[aria-checked="true"], .aria-disabled\\:flex[aria-disabled="true"], .aria-expanded\\:flex[aria-expanded="true"], .aria-hidden\\:flex[aria-hidden="true"], .aria-pressed\\:flex[aria-pressed="true"], .aria-readonly\\:flex[aria-readonly="true"], .aria-required\\:flex[aria-required="true"], .aria-selected\\:flex[aria-selected="true"], .aria-\\[custom\\=true\\]\\:flex[aria-custom="true"], .data-custom\\:flex[data-custom], .data-\\[custom\\=true\\]\\:flex[data-custom="true"] { - display: flex; + .last-of-type\\:flex { + &:last-of-type { + display: flex; + } } - - @supports (display: flex) { - .supports-\\[display\\:flex\\]\\:flex { + .only-of-type\\:flex { + &:only-of-type { display: flex; } } - - @media (prefers-reduced-motion: no-preference) { - .motion-safe\\:flex { + .visited\\:flex { + &:visited { display: flex; } } - - @media (prefers-reduced-motion: reduce) { - .motion-reduce\\:flex { + .target\\:flex { + &:target { display: flex; } } - - @media (prefers-contrast: more) { - .contrast-more\\:flex { + .open\\:flex { + &:is([open], :popover-open, :open) { display: flex; } } - - @media (prefers-contrast: less) { - .contrast-less\\:flex { + .default\\:flex { + &:default { display: flex; } } - - @media (min-width: 640px) { - .sm\\:flex { + .checked\\:flex { + &:checked { display: flex; } } - - @media (min-width: 768px) { - .md\\:flex { + .indeterminate\\:flex { + &:indeterminate { display: flex; } } - - @media (min-width: 1024px) { - .lg\\:flex { + .placeholder-shown\\:flex { + &:placeholder-shown { display: flex; } } - - @media (min-width: 1280px) { - .xl\\:flex { + .autofill\\:flex { + &:autofill { display: flex; } } - - @media (min-width: 1536px) { - .\\32 xl\\:flex { + .optional\\:flex { + &:optional { display: flex; } } - - @media (orientation: portrait) { - .portrait\\:flex { + .required\\:flex { + &:required { display: flex; } } - - @media (orientation: landscape) { - .landscape\\:flex { + .valid\\:flex { + &:valid { display: flex; } } - - .ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *), .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { - display: flex; + .invalid\\:flex { + &:invalid { + display: flex; + } } - - @media (prefers-color-scheme: dark) { - .dark\\:flex { + .in-range\\:flex { + &:in-range { display: flex; } } - - @media print { - .print\\:flex { + .out-of-range\\:flex { + &:out-of-range { display: flex; } } - - @media (forced-colors: active) { - .forced-colors\\:flex { + .read-only\\:flex { + &:read-only { display: flex; } } - - .\\[\\&_p\\]\\:flex p { - display: flex; + .empty\\:flex { + &:empty { + display: flex; + } + } + .focus-within\\:flex { + &:focus-within { + display: flex; + } + } + .hover\\:flex { + &:hover { + @media (hover: hover) { + display: flex; + } + } + } + .focus\\:flex { + &:focus { + display: flex; + } + } + .focus-visible\\:flex { + &:focus-visible { + display: flex; + } + } + .active\\:flex { + &:active { + display: flex; + } + } + .enabled\\:flex { + &:enabled { + display: flex; + } + } + .disabled\\:flex { + &:disabled { + display: flex; + } + } + .has-\\[\\:hover\\]\\:flex { + &:has(*:is(:hover)) { + display: flex; + } + } + .aria-busy\\:flex { + &[aria-busy="true"] { + display: flex; + } + } + .aria-checked\\:flex { + &[aria-checked="true"] { + display: flex; + } + } + .aria-disabled\\:flex { + &[aria-disabled="true"] { + display: flex; + } + } + .aria-expanded\\:flex { + &[aria-expanded="true"] { + display: flex; + } + } + .aria-hidden\\:flex { + &[aria-hidden="true"] { + display: flex; + } + } + .aria-pressed\\:flex { + &[aria-pressed="true"] { + display: flex; + } + } + .aria-readonly\\:flex { + &[aria-readonly="true"] { + display: flex; + } + } + .aria-required\\:flex { + &[aria-required="true"] { + display: flex; + } + } + .aria-selected\\:flex { + &[aria-selected="true"] { + display: flex; + } + } + .aria-\\[custom\\=true\\]\\:flex { + &[aria-custom="true"] { + display: flex; + } + } + .data-custom\\:flex { + &[data-custom] { + display: flex; + } + } + .data-\\[custom\\=true\\]\\:flex { + &[data-custom="true"] { + display: flex; + } + } + .supports-\\[display\\:flex\\]\\:flex { + @supports (display:flex) { + display: flex; + } + } + .motion-safe\\:flex { + @media (prefers-reduced-motion: no-preference) { + display: flex; + } + } + .motion-reduce\\:flex { + @media (prefers-reduced-motion: reduce) { + display: flex; + } + } + .contrast-more\\:flex { + @media (prefers-contrast: more) { + display: flex; + } + } + .contrast-less\\:flex { + @media (prefers-contrast: less) { + display: flex; + } + } + .sm\\:flex { + @media (width >= 640px) { + display: flex; + } + } + .md\\:flex { + @media (width >= 768px) { + display: flex; + } + } + .lg\\:flex { + @media (width >= 1024px) { + display: flex; + } + } + .xl\\:flex { + @media (width >= 1280px) { + display: flex; + } + } + .\\32 xl\\:flex { + @media (width >= 1536px) { + display: flex; + } + } + .portrait\\:flex { + @media (orientation: portrait) { + display: flex; + } + } + .landscape\\:flex { + @media (orientation: landscape) { + display: flex; + } + } + .ltr\\:flex { + &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { + display: flex; + } + } + .rtl\\:flex { + &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + display: flex; + } + } + .dark\\:flex { + @media (prefers-color-scheme: dark) { + display: flex; + } + } + .print\\:flex { + @media print { + display: flex; + } + } + .forced-colors\\:flex { + @media (forced-colors: active) { + display: flex; + } + } + .\\[\\&_p\\]\\:flex { + & p { + display: flex; + } } - @property --tw-content { syntax: "*"; - inherits: false; initial-value: ""; + inherits: false; + } + @layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-content: ""; + } + } } " `) @@ -2778,8 +4102,35 @@ test('variants with the same root are sorted deterministically', async () => { for (let classList of classLists) { expect(await run(classList)).toMatchInlineSnapshot(` " - .data-active\\:flex[data-active], .data-focus\\:flex[data-focus], .data-hover\\:flex[data-hover], .data-\\[bar\\]\\:flex[data-bar], .data-\\[baz\\]\\:flex[data-baz], .data-\\[foo\\]\\:flex[data-foo] { - display: flex; + .data-active\\:flex { + &[data-active] { + display: flex; + } + } + .data-focus\\:flex { + &[data-focus] { + display: flex; + } + } + .data-hover\\:flex { + &[data-hover] { + display: flex; + } + } + .data-\\[bar\\]\\:flex { + &[data-bar] { + display: flex; + } + } + .data-\\[baz\\]\\:flex { + &[data-baz] { + display: flex; + } + } + .data-\\[foo\\]\\:flex { + &[data-foo] { + display: flex; + } } " `) @@ -2827,8 +4178,30 @@ test('matchVariant sorts deterministically', async () => { }), ).toMatchInlineSnapshot(` " - .is-data\\:flex[data-default], .is-data-foo\\:flex[data-foo], .is-data-bar\\:flex[data-bar], .is-data-\\[potato\\]\\:flex[data-potato], .is-data-\\[sandwich\\]\\:flex[data-sandwich] { - display: flex; + .is-data\\:flex { + &:is([data-default]) { + display: flex; + } + } + .is-data-foo\\:flex { + &:is([data-foo]) { + display: flex; + } + } + .is-data-bar\\:flex { + &:is([data-bar]) { + display: flex; + } + } + .is-data-\\[potato\\]\\:flex { + &:is([data-potato]) { + display: flex; + } + } + .is-data-\\[sandwich\\]\\:flex { + &:is([data-sandwich]) { + display: flex; + } } " `) @@ -2848,8 +4221,25 @@ test('move modifier of compound variant to sub-variant if its also a compound va ]), ).toMatchInlineSnapshot(` " - .not-group-focus\\/name\\:flex:not(:is(:where(.group\\/name):focus *)), .group-peer-focus\\/name\\:flex:is(:where(.group\\/name):is(:where(.peer):focus ~ *) *), :where(:is(:where(.group\\/name):focus *)) .in-group-focus\\/name\\:flex, .has-group-focus\\/name\\:flex:has(:is(:where(.group\\/name):focus *)) { - display: flex; + .not-group-focus\\/name\\:flex { + &:not(*:is(:where(.group\\/name):focus *)) { + display: flex; + } + } + .group-peer-focus\\/name\\:flex { + &:is(:where(.group\\/name):is(:where(.peer):focus ~ *) *) { + display: flex; + } + } + .in-group-focus\\/name\\:flex { + :where(*:is(:where(.group\\/name):focus *)) & { + display: flex; + } + } + .has-group-focus\\/name\\:flex { + &:has(*:is(:where(.group\\/name):focus *)) { + display: flex; + } } " `) From eb9d2f9ff5a85cd1b33ed7983d6cbc47c629659b Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 15 May 2026 22:24:28 +0200 Subject: [PATCH 03/20] temp: re-add leading `0` Will be undone once Lightning CSS is enabled again --- packages/tailwindcss/src/css-functions.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 364ba0e33312..ffd463ddf224 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -1048,10 +1048,10 @@ describe('theme(…)', () => { 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', ], ['maxWidth.xs', '20rem'], - ['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'], - ['letterSpacing.wide', '.025em'], + ['transitionTimingFunction.in-out', 'cubic-bezier(0.4, 0, 0.2, 1)'], + ['letterSpacing.wide', '0.025em'], ['lineHeight.tight', '1.25'], - ['backgroundColor.red.500', 'oklch(63.7% .237 25.331)'], + ['backgroundColor.red.500', 'oklch(63.7% 0.237 25.331)'], ])('theme(%s) → %s', async (value, result) => { let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8') let compiled = await compileCss(css` From 1cfdf1ed33dc408e6ca6f4e409c4b893864adae3 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 15 May 2026 22:24:44 +0200 Subject: [PATCH 04/20] temp: ignore invalid variant test Will be re-enabled once Lightning CSS is enabled again --- packages/tailwindcss/src/variants.test.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index f6ab54ca8090..8c63b9afb72f 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -3156,7 +3156,9 @@ test('data', async () => { expect( await run([ 'data-[]:flex', - 'data-[foo_^_=_"bar"]:flex', // Can't have spaces between `^` and `=` + // TODO: Re-enable when Lightning CSS is enabled again. We don't validate + // the CSS, we just expect a valid looking syntax. + // 'data-[foo_^_=_"bar"]:flex', // Can't have spaces between `^` and `=` 'data-disabled/foo:flex', 'data-[potato=salad]/foo:flex', ]), From 1abb491357e0df3a9109ae89f748e9ec93a40851 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 16 May 2026 23:10:18 +0200 Subject: [PATCH 05/20] remove unnecessary AST tests These tests don't really test AST specific things. They really test how `walk` works and what happens when you use certain `WalkAction` commands... --- packages/tailwindcss/src/ast.test.ts | 344 +-------------------------- 1 file changed, 2 insertions(+), 342 deletions(-) diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts index d5f3c6dcd87d..d8606bff6c7d 100644 --- a/packages/tailwindcss/src/ast.test.ts +++ b/packages/tailwindcss/src/ast.test.ts @@ -1,19 +1,10 @@ import { expect, it } from 'vitest' -import { - atRule, - context, - cssContext, - decl, - optimizeAst, - styleRule, - toCss, - type AstNode, -} from './ast' +import { context, cssContext, decl, optimizeAst, styleRule, toCss, type AstNode } from './ast' import * as CSS from './css-parser' import { buildDesignSystem } from './design-system' import { pretty } from './test-utils/run' import { Theme } from './theme' -import { walk, WalkAction } from './walk' +import { walk } from './walk' const css = String.raw const defaultDesignSystem = buildDesignSystem(new Theme()) @@ -88,36 +79,6 @@ it('allows the placement of context nodes', () => { `) }) -it('should stop walking when returning `WalkAction.Stop`', () => { - let ast = [ - styleRule('.foo', [styleRule('.nested', [styleRule('.bail', [decl('color', 'red')])])]), - styleRule('.bar'), - styleRule('.baz'), - styleRule('.qux'), - ] - - let seen = new Set() - - walk(ast, (node) => { - if (node.kind === 'rule') { - seen.add(node.selector) - } - - if (node.kind === 'rule' && node.selector === '.bail') { - return WalkAction.Stop - } - }) - - // We do not want to see `.bar`, `.baz`, or `.qux` because we bailed early - expect(seen).toMatchInlineSnapshot(` - Set { - ".foo", - ".nested", - ".bail", - } - `) -}) - it('should not emit empty rules once optimized', () => { let ast = CSS.parse(css` /* Empty rule */ @@ -330,304 +291,3 @@ it('should not emit color-mix() fallbacks inside @keyframes', () => { " `) }) - -it('should only visit children once when calling `replaceWith` with single element array', () => { - let visited = new Set() - - let ast: AstNode[] = [ - atRule('@media', '', [styleRule('.foo', [decl('color', 'blue')])]), - styleRule('.bar', [decl('color', 'blue')]), - ] - - walk(ast, (node) => { - if (visited.has(node)) { - throw new Error('Visited node twice') - } - visited.add(node) - - if (node.kind === 'at-rule') return WalkAction.Replace(node.nodes) - }) -}) - -it('should only visit children once when calling `replaceWith` with multi-element array', () => { - let visited = new Set() - - let ast: AstNode[] = [ - atRule('@media', '', [ - context({}, [ - styleRule('.foo', [decl('color', 'red')]), - styleRule('.baz', [decl('color', 'blue')]), - ]), - ]), - styleRule('.bar', [decl('color', 'green')]), - ] - - walk(ast, (node) => { - let key = id(node) - if (visited.has(key)) { - throw new Error('Visited node twice') - } - visited.add(key) - - if (node.kind === 'at-rule') return WalkAction.Replace(node.nodes) - }) - - expect(visited).toMatchInlineSnapshot(` - Set { - "@media ", - "", - ".foo", - "color: red", - ".baz", - "color: blue", - ".bar", - "color: green", - } - `) -}) - -it('should never visit children when calling `replaceWith` with `WalkAction.Skip`', () => { - let visited = new Set() - - let inner = styleRule('.foo', [decl('color', 'blue')]) - - let ast: AstNode[] = [atRule('@media', '', [inner]), styleRule('.bar', [decl('color', 'blue')])] - - walk(ast, (node) => { - visited.add(node) - - if (node.kind === 'at-rule') { - return WalkAction.ReplaceSkip(node.nodes) - } - }) - - expect(visited).not.toContain(inner) - expect(visited).toMatchInlineSnapshot(` - Set { - { - "kind": "at-rule", - "name": "@media", - "nodes": [ - { - "kind": "rule", - "nodes": [ - { - "important": false, - "kind": "declaration", - "property": "color", - "value": "blue", - }, - ], - "selector": ".foo", - }, - ], - "params": "", - }, - { - "kind": "rule", - "nodes": [ - { - "important": false, - "kind": "declaration", - "property": "color", - "value": "blue", - }, - ], - "selector": ".bar", - }, - { - "important": false, - "kind": "declaration", - "property": "color", - "value": "blue", - }, - } - `) -}) - -it('should skip the correct number of children based on the replaced children nodes', () => { - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.ReplaceSkip([]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 3", - "--index: 4", - ] - `) - } - - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.Replace([]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 3", - "--index: 4", - ] - `) - } - - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.ReplaceSkip([decl('--index', '2.1')]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 3", - "--index: 4", - ] - `) - } - - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.Replace([decl('--index', '2.1')]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 2.1", - "--index: 3", - "--index: 4", - ] - `) - } - - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.ReplaceSkip([decl('--index', '2.1'), decl('--index', '2.2')]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 3", - "--index: 4", - ] - `) - } - - { - let ast = [ - decl('--index', '0'), - decl('--index', '1'), - decl('--index', '2'), - decl('--index', '3'), - decl('--index', '4'), - ] - let visited: string[] = [] - walk(ast, (node) => { - visited.push(id(node)) - if (node.kind === 'declaration' && node.value === '2') { - return WalkAction.Replace([decl('--index', '2.1'), decl('--index', '2.2')]) - } - }) - - expect(visited).toMatchInlineSnapshot(` - [ - "--index: 0", - "--index: 1", - "--index: 2", - "--index: 2.1", - "--index: 2.2", - "--index: 3", - "--index: 4", - ] - `) - } -}) - -function id(node: AstNode) { - switch (node.kind) { - case 'at-rule': - return `${node.name} ${node.params}` - case 'rule': - return node.selector - case 'context': - return '' - case 'at-root': - return '' - case 'declaration': - return `${node.property}: ${node.value}` - case 'comment': - return `// ${node.value}` - default: - node satisfies never - throw new Error('Unknown node kind') - } -} From 6bf2ce80ba5ec862bfcce193fcb0cd2446767391 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 27 May 2026 15:37:19 +0200 Subject: [PATCH 06/20] check booleans before traversing strings --- packages/tailwindcss/src/ast.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index ce841f3776e1..49e0bb5bfe79 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -286,9 +286,9 @@ export function optimizeAst( // found in the theme config. if ( polyfills & Polyfills.ColorMix && - node.value.includes('color-mix(') && !context.supportsColorMix && - !context.keyframes + !context.keyframes && + node.value.includes('color-mix(') ) { colorMixDeclarations.get(parent).add(node) } From 592917c2f4392f18909973112391c2ccaec5c562 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 28 May 2026 01:31:19 +0200 Subject: [PATCH 07/20] expose helper functions --- packages/tailwindcss/src/selector-parser.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/tailwindcss/src/selector-parser.ts b/packages/tailwindcss/src/selector-parser.ts index fcc78b2e90f7..0d32f366acf3 100644 --- a/packages/tailwindcss/src/selector-parser.ts +++ b/packages/tailwindcss/src/selector-parser.ts @@ -70,7 +70,7 @@ function compound(nodes: SelectorAstNode[]): SelectorCompoundNode { } } -function fun(value: string, nodes: SelectorAstNode[]): SelectorFunctionNode { +export function fun(value: string, nodes: SelectorAstNode[]): SelectorFunctionNode { return { kind: 'function', value, @@ -85,7 +85,7 @@ function list(nodes: SelectorAstNode[]): SelectorListNode { } } -function selector(value: string): SelectorNode { +export function selector(value: string): SelectorNode { return { kind: 'selector', value, From 00a7d042cb715772ba79f8bad78a473b859de8c8 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 28 May 2026 01:31:29 +0200 Subject: [PATCH 08/20] expose `cloneAstNode` for Selector AST --- packages/tailwindcss/src/selector-parser.ts | 31 +++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/packages/tailwindcss/src/selector-parser.ts b/packages/tailwindcss/src/selector-parser.ts index 0d32f366acf3..ea0eb88c8952 100644 --- a/packages/tailwindcss/src/selector-parser.ts +++ b/packages/tailwindcss/src/selector-parser.ts @@ -99,6 +99,37 @@ function value(value: string): SelectorValueNode { } } +export function cloneAstNode(node: T): T { + switch (node.kind) { + case 'combinator': + case 'selector': + case 'value': + return { + kind: node.kind, + value: node.value, + } as T + + case 'complex': + case 'compound': + case 'list': + return { + kind: node.kind, + nodes: node.nodes.map(cloneAstNode), + } as T + + case 'function': + return { + kind: node.kind, + value: node.value, + nodes: node.nodes.map(cloneAstNode), + } satisfies SelectorFunctionNode as T + + default: + node satisfies never + throw new Error(`Unknown node kind: ${(node as any).kind}`) + } +} + export function toCss(ast: SelectorAstNode[], minify = false) { let css = '' for (let node of ast) { From f6979ff9b5cd13226efcb3ae65560ab37c49d1b7 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 28 May 2026 02:00:11 +0200 Subject: [PATCH 09/20] expose helpers --- packages/tailwindcss/src/ast.ts | 94 +++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index 49e0bb5bfe79..084d7646952d 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -1,4 +1,5 @@ import { Polyfills } from '.' +import * as SelectorParser from '../src/selector-parser' import { parseAtRule } from './css-parser' import type { DesignSystem } from './design-system' import type { Source, SourceLocation } from './source-maps/source' @@ -682,6 +683,99 @@ export function optimizeAst( return newAst } +// A set of at-rules that can be hoisted to the top without any repercussions. +// Typically at-rules that rely on the environment, not parent information and +// contain other rules/declarations. +export const HOISTABLE_AT_RULES = new Set([ + '@container', + '@layer', + '@media', + '@page', + '@starting-style', + '@supports', + '@view-transition', +]) + +// As set of at-rules that can be dropped if they don't contain any nodes. We +// don't have the distinction between an at-rule with no body, or an at-rule +// with a body that is empty right now. +export const DROPPABLE_IF_EMPTY_AT_RULES = new Set([ + '@container', + '@media', + '@page', + '@starting-style', + '@supports', + '@view-transition', +]) + +// An `element` and a `*` can only appear once, and if they do, they have +// to be first. If multiple exist, a `:is(…)` should be used. +// +// - `div*` is invalid, must be `div:is(*)` +// - `**` is invalid, must be `*:is(*)` +// - `.classdiv` is invalid, must be `div.class` +// +function mustBeFirst(node: SelectorParser.SelectorAstNode | undefined) { + return node?.kind === 'selector' && (node.value === '*' || /^[a-zA-Z-]+$/.test(node.value)) +} + +export function optimizeSelector(selector: string): string { + let ast = SelectorParser.parse(selector) + + let changed = false + walk(ast, { + exit(node, ctx) { + if (node.kind === 'compound') { + let idx = node.nodes.findIndex((child) => mustBeFirst(child)) + if (idx >= 0) { + // Optimization: Already in the correct spot, nothing to do here + if (idx === ctx.index) return + + changed = true + node.nodes.unshift(...node.nodes.splice(idx, 1)) + } + return + } + + if (node.kind !== 'function') return + if (node.value !== ':is') return + if (node.nodes.length !== 1) return + + let current = node.nodes[0] + if (current.kind !== 'selector' && current.kind !== 'function') return + + if (ctx.parent?.kind !== 'compound') { + changed = true + return WalkAction.Replace(current) + } + + let existing = ctx.siblings.find((sibling) => sibling !== node && mustBeFirst(sibling)) + if (!existing) { + changed = true + return WalkAction.Replace(current) + } + + if (!mustBeFirst(current)) { + changed = true + return WalkAction.Replace(current) + } + + if ( + existing.kind === 'selector' && + existing.value === '*' && + current.kind === 'selector' && + current.value !== '*' + ) { + changed = true + ctx.siblings[ctx.siblings.indexOf(existing)] = SelectorParser.fun(':is', [existing]) + return WalkAction.Replace(current) + } + }, + }) + + return changed ? SelectorParser.toCss(ast) : selector +} + export function toCss(ast: AstNode[], track?: boolean) { let pos = 0 From aa658cb4e4153390552258a84f108c19e5cbcf5e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 28 May 2026 01:05:36 +0200 Subject: [PATCH 10/20] add CSS nesting specific tests + oracle implementation --- packages/tailwindcss/src/ast.test.ts | 1319 +++++++++++++++++++++++++- 1 file changed, 1311 insertions(+), 8 deletions(-) diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts index d8606bff6c7d..794e86579122 100644 --- a/packages/tailwindcss/src/ast.test.ts +++ b/packages/tailwindcss/src/ast.test.ts @@ -1,20 +1,33 @@ -import { expect, it } from 'vitest' -import { context, cssContext, decl, optimizeAst, styleRule, toCss, type AstNode } from './ast' +import { describe, expect, it, test } from 'vitest' +import * as SelectorParser from '../src/selector-parser' +import { + atRule, + cloneAstNode, + context, + cssContext, + decl, + DROPPABLE_IF_EMPTY_AT_RULES, + HOISTABLE_AT_RULES, + optimizeAst, + optimizeSelector, + rule, + styleRule, + toCss, + type AstNode, +} from './ast' import * as CSS from './css-parser' import { buildDesignSystem } from './design-system' +import { SourceLocation } from './source-maps/source' import { pretty } from './test-utils/run' import { Theme } from './theme' -import { walk } from './walk' +import { segment } from './utils/segment' +import { walk, WalkAction } from './walk' const css = String.raw const defaultDesignSystem = buildDesignSystem(new Theme()) it('should pretty print an AST', () => { - expect( - pretty( - toCss(optimizeAst(CSS.parse('.foo{color:red;&:hover{color:blue;}}'), defaultDesignSystem)), - ), - ).toMatchInlineSnapshot(` + expect(pretty(toCss(CSS.parse('.foo{color:red;&:hover{color:blue;}}')))).toMatchInlineSnapshot(` " .foo { color: red; @@ -121,6 +134,7 @@ it('should not emit empty rules once optimized', () => { /* Exceptions: */ @charset "UTF-8"; @layer foo, bar, baz; + @layer foo, bar, baz; /* Will be deduped */ @custom-media --modern (color), (hover); @namespace 'http://www.w3.org/1999/xhtml'; @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap'); @@ -155,6 +169,7 @@ it('should not emit empty rules once optimized', () => { } @charset "UTF-8"; @layer foo, bar, baz; + @layer foo, bar, baz; @custom-media --modern (color), (hover); @namespace 'http://www.w3.org/1999/xhtml'; @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap'); @@ -291,3 +306,1291 @@ it('should not emit color-mix() fallbacks inside @keyframes', () => { " `) }) + +describe('optimization', () => { + function optimize(input: string) { + let ast = CSS.parse(input) + + let cssOracle = pretty(toCss(handleNestingOracle(ast))) + + return cssOracle + } + + // See: https://drafts.csswg.org/css-nesting-1/ + describe('CSS Nesting Module Level 1', () => { + it('uses the descendant combinator by default', async () => { + expect( + optimize(css` + .a { + element { + --x: 1; + } + .class { + --x: 2; + } + #id { + --x: 3; + } + :pseudo-class { + --x: 4; + } + ::pseudo-element { + --x: 5; + } + [attribute] { + --x: 6; + } + * { + --x: 7; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a element { + --x: 1; + } + .a .class { + --x: 2; + } + .a #id { + --x: 3; + } + .a :pseudo-class { + --x: 4; + } + .a ::pseudo-element { + --x: 5; + } + .a [attribute] { + --x: 6; + } + .a * { + --x: 7; + } + " + `) + }) + + it('shoud be possible to change the combinator', async () => { + expect( + optimize(css` + .a { + + .b { + --x: 1; + } + > .c { + --x: 2; + } + ~ .d { + --x: 3; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a + .b { + --x: 1; + } + .a > .c { + --x: 2; + } + .a ~ .d { + --x: 3; + } + " + `) + }) + + it('should replace the first rule, that contains `&` with `:scope`', async () => { + expect( + optimize(css` + /* Standalone */ + & { + --x: 1; + } + + /* In an at-rule */ + @supports (--y: 1) { + & { + --x: 2; + } + } + + /* With :is(…) */ + :is(&) { + --x: 3; + } + + /* In an at-rule, with :is(…) */ + @supports (--y: 2) { + :is(&) { + --x: 4; + } + } + + /* With multiple selectors */ + &, + .a { + --x: 5; + } + + /* With multiple selectors + :is(…) */ + :is(&), + .b { + --x: 6; + } + + /* With multiple selectors in an at-rule */ + @supports (--y: 3) { + &, + .c { + --x: 7; + } + } + + /* With multiple selectors in an at-rule + :is(…) */ + @supports (--y: 4) { + :is(&), + .d { + --x: 8; + } + } + `), + ).toMatchInlineSnapshot(` + " + :scope { + --x: 1; + } + @supports (--y: 1) { + :scope { + --x: 2; + } + } + :scope { + --x: 3; + } + @supports (--y: 2) { + :scope { + --x: 4; + } + } + :scope, .a { + --x: 5; + } + :scope, .b { + --x: 6; + } + @supports (--y: 3) { + :scope, .c { + --x: 7; + } + } + @supports (--y: 4) { + :scope, .d { + --x: 8; + } + } + " + `) + }) + + it('should be possible to use `&` to explicitly match the parent', async () => { + expect( + optimize(css` + .a { + & + .b { + --x: 1; + } + & > .c { + --x: 2; + } + & ~ .d { + --x: 3; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a + .b { + --x: 1; + } + .a > .c { + --x: 2; + } + .a ~ .d { + --x: 3; + } + " + `) + }) + + it('should be possible to use `&` in a different location', async () => { + expect( + optimize(css` + .a { + .b & { + --x: 1; + } + .c + & { + --x: 2; + } + .d > & { + --x: 3; + } + .e ~ & { + --x: 4; + } + } + `), + ).toMatchInlineSnapshot(` + " + .b .a { + --x: 1; + } + .c + .a { + --x: 2; + } + .d > .a { + --x: 3; + } + .e ~ .a { + --x: 4; + } + " + `) + }) + + it('should be possible to use `&` on its own', async () => { + expect( + optimize(css` + .a { + & { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a { + --x: 1; + } + " + `) + }) + + it('should be possible to use `&` nested in `:is(…)`', async () => { + expect( + optimize(css` + .a { + :is(&) { + --x: 1; + } + :is(:is(:is(&))) { + --x: 2; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a { + --x: 1; + --x: 2; + } + " + `) + }) + + it('should be possible to handle nesting with a parent selector list', async () => { + expect( + optimize(css` + .a, + .b { + .c, + .d & { + --x: 1; + &:hover { + --x: 2; + } + } + } + `), + ).toMatchInlineSnapshot(` + " + :is(.a, .b) .c, .d :is(.a, .b) { + --x: 1; + } + :is(:is(.a, .b) .c, .d :is(.a, .b)):hover { + --x: 2; + } + " + `) + }) + + it('should not replace `\&`', () => { + expect( + optimize(css` + .a { + .b-\& { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a .b-\\& { + --x: 1; + } + " + `) + }) + + it('should not replace `&` as part of a string', () => { + expect( + optimize(css` + .a { + [data-b='c&d'] { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a [data-b='c&d'] { + --x: 1; + } + " + `) + }) + + it.each([ + ['element', '&element', 'element:is(element)'], + ['element', 'element&', 'element:is(element)'], + ['element', '&.class', 'element.class'], + ['element', '.class&', 'element.class'], + ['element', '&#id', 'element#id'], + ['element', '#id&', 'element#id'], + ['element', '&:pseudo-class', 'element:pseudo-class'], + ['element', ':pseudo-class&', 'element:pseudo-class'], + ['element', '&::pseudo-element', 'element::pseudo-element'], + ['element', '::pseudo-element&', 'element::pseudo-element'], + ['element', '&:pseudo-fn()', 'element:pseudo-fn()'], + ['element', ':pseudo-fn()&', 'element:pseudo-fn()'], + ['element', '&[attribute]', 'element[attribute]'], + ['element', '[attribute]&', 'element[attribute]'], + ['element', '&*', 'element:is(*)'], + ['element', '*&', 'element:is(*)'], + + ['.class', '&element', 'element.class'], + ['.class', 'element&', 'element.class'], + ['.class', '&.class', '.class.class'], + ['.class', '.class&', '.class.class'], + ['.class', '&#id', '.class#id'], + ['.class', '#id&', '#id.class'], + ['.class', '&:pseudo-class', '.class:pseudo-class'], + ['.class', ':pseudo-class&', ':pseudo-class.class'], + ['.class', '&::pseudo-element', '.class::pseudo-element'], + ['.class', '::pseudo-element&', '::pseudo-element.class'], + ['.class', '&:pseudo-fn()', '.class:pseudo-fn()'], + ['.class', ':pseudo-fn()&', ':pseudo-fn().class'], + ['.class', '&[attribute]', '.class[attribute]'], + ['.class', '[attribute]&', '[attribute].class'], + ['.class', '&*', '*.class'], + ['.class', '*&', '*.class'], + + ['#id', '&element', 'element#id'], + ['#id', 'element&', 'element#id'], + ['#id', '&.class', '#id.class'], + ['#id', '.class&', '.class#id'], + ['#id', '&#id', '#id#id'], + ['#id', '#id&', '#id#id'], + ['#id', '&:pseudo-class', '#id:pseudo-class'], + ['#id', ':pseudo-class&', ':pseudo-class#id'], + ['#id', '&::pseudo-element', '#id::pseudo-element'], + ['#id', '::pseudo-element&', '::pseudo-element#id'], + ['#id', '&:pseudo-fn()', '#id:pseudo-fn()'], + ['#id', ':pseudo-fn()&', ':pseudo-fn()#id'], + ['#id', '&[attribute]', '#id[attribute]'], + ['#id', '[attribute]&', '[attribute]#id'], + ['#id', '&*', '*#id'], + ['#id', '*&', '*#id'], + + [':pseudo-class', '&element', 'element:pseudo-class'], + [':pseudo-class', 'element&', 'element:pseudo-class'], + [':pseudo-class', '&.class', ':pseudo-class.class'], + [':pseudo-class', '.class&', '.class:pseudo-class'], + [':pseudo-class', '&#id', ':pseudo-class#id'], + [':pseudo-class', '#id&', '#id:pseudo-class'], + [':pseudo-class', '&:pseudo-class', ':pseudo-class:pseudo-class'], + [':pseudo-class', ':pseudo-class&', ':pseudo-class:pseudo-class'], + [':pseudo-class', '&::pseudo-element', ':pseudo-class::pseudo-element'], + [':pseudo-class', '::pseudo-element&', '::pseudo-element:pseudo-class'], + [':pseudo-class', '&:pseudo-fn()', ':pseudo-class:pseudo-fn()'], + [':pseudo-class', ':pseudo-fn()&', ':pseudo-fn():pseudo-class'], + [':pseudo-class', '&[attribute]', ':pseudo-class[attribute]'], + [':pseudo-class', '[attribute]&', '[attribute]:pseudo-class'], + [':pseudo-class', '&*', '*:pseudo-class'], + [':pseudo-class', '*&', '*:pseudo-class'], + + ['::pseudo-element', '&element', 'element::pseudo-element'], + ['::pseudo-element', 'element&', 'element::pseudo-element'], + ['::pseudo-element', '&.class', '::pseudo-element.class'], + ['::pseudo-element', '.class&', '.class::pseudo-element'], + ['::pseudo-element', '&#id', '::pseudo-element#id'], + ['::pseudo-element', '#id&', '#id::pseudo-element'], + ['::pseudo-element', '&:pseudo-class', '::pseudo-element:pseudo-class'], + ['::pseudo-element', ':pseudo-class&', ':pseudo-class::pseudo-element'], + ['::pseudo-element', '&::pseudo-element', '::pseudo-element::pseudo-element'], + ['::pseudo-element', '::pseudo-element&', '::pseudo-element::pseudo-element'], + ['::pseudo-element', '&:pseudo-fn()', '::pseudo-element:pseudo-fn()'], + ['::pseudo-element', ':pseudo-fn()&', ':pseudo-fn()::pseudo-element'], + ['::pseudo-element', '&[attribute]', '::pseudo-element[attribute]'], + ['::pseudo-element', '[attribute]&', '[attribute]::pseudo-element'], + ['::pseudo-element', '&*', '*::pseudo-element'], + ['::pseudo-element', '*&', '*::pseudo-element'], + + [':pseudo-fn()', '&element', 'element:pseudo-fn()'], + [':pseudo-fn()', 'element&', 'element:pseudo-fn()'], + [':pseudo-fn()', '&.class', ':pseudo-fn().class'], + [':pseudo-fn()', '.class&', '.class:pseudo-fn()'], + [':pseudo-fn()', '&#id', ':pseudo-fn()#id'], + [':pseudo-fn()', '#id&', '#id:pseudo-fn()'], + [':pseudo-fn()', '&:pseudo-class', ':pseudo-fn():pseudo-class'], + [':pseudo-fn()', ':pseudo-class&', ':pseudo-class:pseudo-fn()'], + [':pseudo-fn()', '&::pseudo-element', ':pseudo-fn()::pseudo-element'], + [':pseudo-fn()', '::pseudo-element&', '::pseudo-element:pseudo-fn()'], + [':pseudo-fn()', '&:pseudo-fn()', ':pseudo-fn():pseudo-fn()'], + [':pseudo-fn()', ':pseudo-fn()&', ':pseudo-fn():pseudo-fn()'], + [':pseudo-fn()', '&[attribute]', ':pseudo-fn()[attribute]'], + [':pseudo-fn()', '[attribute]&', '[attribute]:pseudo-fn()'], + [':pseudo-fn()', '&*', '*:pseudo-fn()'], + [':pseudo-fn()', '*&', '*:pseudo-fn()'], + + ['[attribute]', '&element', 'element[attribute]'], + ['[attribute]', 'element&', 'element[attribute]'], + ['[attribute]', '&.class', '[attribute].class'], + ['[attribute]', '.class&', '.class[attribute]'], + ['[attribute]', '&#id', '[attribute]#id'], + ['[attribute]', '#id&', '#id[attribute]'], + ['[attribute]', '&:pseudo-class', '[attribute]:pseudo-class'], + ['[attribute]', ':pseudo-class&', ':pseudo-class[attribute]'], + ['[attribute]', '&::pseudo-element', '[attribute]::pseudo-element'], + ['[attribute]', '::pseudo-element&', '::pseudo-element[attribute]'], + ['[attribute]', '&:pseudo-fn()', '[attribute]:pseudo-fn()'], + ['[attribute]', ':pseudo-fn()&', ':pseudo-fn()[attribute]'], + ['[attribute]', '&[attribute]', '[attribute][attribute]'], + ['[attribute]', '[attribute]&', '[attribute][attribute]'], + ['[attribute]', '&*', '*[attribute]'], + ['[attribute]', '*&', '*[attribute]'], + + ['*', '&element', 'element:is(*)'], + ['*', 'element&', 'element:is(*)'], + ['*', '&.class', '*.class'], + ['*', '.class&', '*.class'], + ['*', '&#id', '*#id'], + ['*', '#id&', '*#id'], + ['*', '&:pseudo-class', '*:pseudo-class'], + ['*', ':pseudo-class&', '*:pseudo-class'], + ['*', '&::pseudo-element', '*::pseudo-element'], + ['*', '::pseudo-element&', '*::pseudo-element'], + ['*', '&:pseudo-fn()', '*:pseudo-fn()'], + ['*', ':pseudo-fn()&', '*:pseudo-fn()'], + ['*', '&[attribute]', '*[attribute]'], + ['*', '[attribute]&', '*[attribute]'], + ['*', '&*', '*:is(*)'], + ['*', '*&', '*:is(*)'], + + ['&', '&element', 'element:scope'], + ['&', 'element&', 'element:scope'], + ['&', '&.class', ':scope.class'], + ['&', '.class&', '.class:scope'], + ['&', '&#id', ':scope#id'], + ['&', '#id&', '#id:scope'], + ['&', '&:pseudo-class', ':scope:pseudo-class'], + ['&', ':pseudo-class&', ':pseudo-class:scope'], + ['&', '&::pseudo-element', ':scope::pseudo-element'], + ['&', '::pseudo-element&', '::pseudo-element:scope'], + ['&', '&:pseudo-fn()', ':scope:pseudo-fn()'], + ['&', ':pseudo-fn()&', ':pseudo-fn():scope'], + ['&', '&[attribute]', ':scope[attribute]'], + ['&', '[attribute]&', '[attribute]:scope'], + ['&', '&*', '*:scope'], + ['&', '*&', '*:scope'], + ])(`'%s { %s }' → '%s' (%#)`, async (root, nested, expected) => { + let optimized = optimize(toCss([rule(root, [rule(nested, [decl('--x', '0')])])])) + let ast = CSS.parse(optimized) + + let count = 0 + walk(ast, () => void count++) + + // 1 rule, 1 declaration + expect(count).toBe(2) + + if (ast[0].kind !== 'rule') throw new Error('expected a rule') + expect(ast[0].selector).toEqual(expected) + }) + + test('multiple selectors in the list are relative to the parent', async () => { + expect( + optimize(css` + .a, + .b { + --x: 1; + + .c { + --x: 2; + } + &.d { + --x: 3; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a, .b { + --x: 1; + } + :is(.a, .b) + .c { + --x: 2; + } + :is(.a, .b).d { + --x: 3; + } + " + `) + }) + + it('should be possible to use `&` multiple times', async () => { + expect( + optimize(css` + .a { + & .b & .c & .d { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a .b .a .c .a .d { + --x: 1; + } + " + `) + }) + + it('should be possible to use `&` multiple times in a row', async () => { + expect( + optimize(css` + .a { + &&& { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + .a.a.a { + --x: 1; + } + " + `) + }) + + it('should be possible to use `&` inside a selector', async () => { + expect( + optimize(css` + .a { + :not(&) { + --x: 1; + } + } + `), + ).toMatchInlineSnapshot(` + " + :not(.a) { + --x: 1; + } + " + `) + }) + + it('should be possible to use deeply nested CSS', async () => { + expect( + optimize(css` + .a, + .b { + --x: 1; + + .c & { + --x: 2; + + &:hover, + &:focus { + --x: 3; + .d { + --x: 4; + } + } + } + } + `), + ).toMatchInlineSnapshot(` + " + .a, .b { + --x: 1; + } + .c :is(.a, .b) { + --x: 2; + } + :is(.c :is(.a, .b)):hover, :is(.c :is(.a, .b)):focus { + --x: 3; + } + :is(:is(.c :is(.a, .b)):hover, :is(.c :is(.a, .b)):focus) .d { + --x: 4; + } + " + `) + }) + + it('should properly split rules to guarantee specificity', async () => { + expect( + optimize(css` + .a { + --before: 1; + &:hover { + --inside: 1; + } + --after: 1; + } + `), + ).toMatchInlineSnapshot(` + " + .a { + --before: 1; + } + .a:hover { + --inside: 1; + } + .a { + --after: 1; + } + " + `) + }) + + it('should hoist at-rules', async () => { + expect( + optimize(css` + @layer utilities { + .a, + .b { + @media (print) { + --x: 1; + .c { + @media (min-width: 123px) { + --x: 2; + } + } + } + } + .d { + @media (print) { + @media (min-width: 123px) { + --x: 3; + } + } + } + } + @property --foo { + syntax: '*'; + } + @layer utilities { + .e { + @media (print) { + --x: 4; + } + } + } + `), + ).toMatchInlineSnapshot(` + " + @layer utilities { + @media (print) { + .a, .b { + --x: 1; + } + @media (min-width: 123px) { + :is(.a, .b) .c { + --x: 2; + } + .d { + --x: 3; + } + } + } + } + @property --foo { + syntax: '*'; + } + @layer utilities { + @media (print) { + .e { + --x: 4; + } + } + } + " + `) + }) + + it('should leave `@property` and `@apply` alone', async () => { + expect( + optimize(css` + .foo { + .bar { + @apply text-red-500 hover:text-red-600; + } + } + + .baz { + @property --tw-content { + syntax: '*'; + initial-value: ''; + inherits: false; + } + + @property --tw-border-spacing-x { + syntax: ''; + inherits: false; + initial-value: 0; + } + } + `), + ).toMatchInlineSnapshot(` + " + .foo .bar { + @apply text-red-500 hover:text-red-600; + } + .baz { + @property --tw-content { + syntax: '*'; + initial-value: ''; + inherits: false; + } + @property --tw-border-spacing-x { + syntax: ''; + inherits: false; + initial-value: 0; + } + } + " + `) + }) + }) +}) + +// A simple step-by-step but slow implementation of CSS nesting used as an +// oracle to test faster and more efficient solutions against. +export function handleNestingOracle(ast: AstNode[]): AstNode[] { + // Remove empty nodes + // + // Inside-out such that a node containing another node that is empty, also gets + // cleaned up when walking up the tree. + // + // For at-rules, we only want to get rid of at-rules like `@supports` and + // `@media` that we know are safe to remove when they are empty. + // + // Known at-rules that are not safe to delete: `@charset`, `@layer`, + // `@namespace`, `@custom-media`, `@apply`, … + // + // ```css + // .foo {} + // @media (min-width: 123px) { + // .bar {} + // } + // @layer base; + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // @layer base; + // ``` + { + walk(ast, { + exit(node) { + if (!('nodes' in node)) return + if (node.nodes.length > 0) return + if (node.kind === 'at-rule' && !DROPPABLE_IF_EMPTY_AT_RULES.has(node.name)) return + + return WalkAction.ReplaceSkip([]) + }, + }) + } + + // A rule with an `&` selector should be converted to a `:scope` if that rule + // has no parent rule. Parent at-rules don't count since they don't contain + // selectors. + // + // ```css + // & { + // color: red; + // } + // :is(&) { + // color: blue; + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // :scope { + // color: red; + // } + // :scope { + // color: blue; + // } + // ``` + { + walk(ast, (node) => { + if (node.kind !== 'rule') return + + let ast = SelectorParser.parse(node.selector) + + walk(ast, (node) => { + // Nested in `:is(…)`, unwrap + while (node.kind === 'function' && node.value === ':is' && node.nodes.length === 1) { + node = node.nodes[0] + } + + // Just `&`, replace with `:scope` + if (node.kind === 'selector' && node.value === '&') { + return WalkAction.ReplaceSkip(SelectorParser.selector(':scope')) + } + }) + + node.selector = SelectorParser.toCss(ast) + + return WalkAction.Skip + }) + } + + // Remove intermediate nodes with an `&` selector, or `&` nested inside + // `:is(…)` n-levels deep, and replace them by its `nodes`. + // + // ```css + // .foo { + // & { + // color: red; + // } + // :is(&) { + // color: green; + // } + // :is(:is(&)) { + // color: blue; + // & { + // color: black + // } + // } + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // .foo { + // color: red; + // color: green; + // color: blue; + // color: black; + // } + // ``` + { + walk(ast, (node) => { + if (node.kind !== 'rule') return + + let ast = SelectorParser.parse(node.selector) + + while ( + ast.length === 1 && + ast[0].kind === 'function' && + ast[0].value === ':is' && + ast[0].nodes.length === 1 + ) { + ast = ast[0].nodes + } + + // Just `&`, replace by its `nodes` + if (ast.length === 1 && ast[0].kind === 'selector' && ast[0].value === '&') { + return WalkAction.Replace(node.nodes) + } + }) + } + + // Split into groups, this allows us to reduce the problem space, and only + // have to think about linear nesting because there will only ever be a single + // rule or at-rule at each level. + // + // ```css + // .foo { + // --x: 1; + // .bar { + // --x: 2; + // } + // --x: 3; + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // .foo { + // --x: 1; + // } + // .foo { + // .bar { + // --x: 2; + // } + // } + // .foo { + // --x: 3; + // } + // ``` + { + walk(ast, { + exit(node) { + if (!('nodes' in node)) return + + let last: AstNode | null = null + let groups: AstNode[][] = [] + for (let child of node.nodes) { + if (last === null || 'nodes' in child) { + groups.push([child]) + } else { + if ('nodes' in last) { + groups.push([child]) + } else { + groups[groups.length - 1].push(child) + } + } + last = child + } + + if (groups.length <= 1) { + return + } + + node.nodes = [] + return WalkAction.Replace( + groups.map((nodes) => Object.assign(cloneAstNode(node), { nodes })), + ) + }, + }) + } + + // Hoist at-rules to the top in the order they were seen in + // + // ```css + // .foo { + // @media (print) { + // @supports (display: grid) { + // color: red; + // } + // } + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // @media (print) { + // @supports (display: grid) { + // .foo { + // color: red; + // } + // } + // } + // ``` + { + for (let [idx, node] of ast.entries()) { + if (!('nodes' in node)) continue + + let nodes: AstNode[] = [node] + let atRules: [ + name: string, + params: string, + src: SourceLocation | undefined, + dst: SourceLocation | undefined, + ][] = [] + walk(nodes, (node) => { + if (node.kind !== 'at-rule') return + if (node.nodes.length <= 0) return + if (!HOISTABLE_AT_RULES.has(node.name)) return + + // Track the at-rule + atRules.unshift([node.name, node.params, node.src, node.dst]) + + // Replace the at-rule by its nodes + return WalkAction.Replace(node.nodes) + }) + + // No at-rules found + if (atRules.length <= 0) continue + + // Wrap `node` in the at-rules + { + let root: AstNode | null = null + for (let [name, params, src, dst] of atRules) { + root = atRule(name, params, root ? [root] : nodes) + if (src || dst) Object.assign(root, { src, dst }) + } + if (root) ast[idx] = root + } + } + } + + // Insert explicit `&`, when one was not used + // + // ```css + // .foo { + // .a, .b:is(&) { + // --x: 1; + // } + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // .foo { + // & .a, .b:is(&) { + // --x: 1; + // } + // } + // ``` + { + walk(ast, (node, ctx) => { + if (node.kind !== 'rule') return + if (!ctx.path().some((node) => node.kind === 'rule')) return // Only inject `&` when it's not the first rule + + node.selector = segment(node.selector, ',') + .map((selector) => { + selector = selector.trim() + + let hasAmpersand = false + walk(SelectorParser.parse(selector.trim()), (node) => { + if (node.kind === 'selector' && node.value === '&') { + hasAmpersand = true + return WalkAction.Stop + } + }) + + return hasAmpersand ? selector : `& ${selector}` + }) + .join(', ') + }) + } + + // Flatten selectors with `:is(…)` semantics + // + // ```css + // .foo, .bar { + // &:hover { + // --x: 1; + // } + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // :is(.foo, .bar):hover { + // --x: 1; + // } + // ``` + { + walk(ast, { + exit(node, ctx) { + if (node.kind !== 'rule') return + if (ctx.parent?.kind !== 'rule') return + + let parentAst = SelectorParser.parse(`:is(${ctx.parent.selector})`) + + // Wrap parent selector in `:is(…)` + let ast = SelectorParser.parse(node.selector) + walk(ast, (node) => { + if (node.kind === 'selector' && node.value === '&') { + return WalkAction.ReplaceSkip(parentAst.map(SelectorParser.cloneAstNode)) + } + }) + ctx.parent.selector = SelectorParser.toCss(ast) + + // Override the parent's nodes with our nodes now that we merged the + // selectors together. + ctx.parent.nodes = node.nodes + }, + }) + } + + // Optimize the selector by unwrapping unnecessary `:is(…)` + // + // ```css + // .a:is(.b) { + // color: red; + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // .a.b { + // color: red; + // } + // ``` + { + walk(ast, (node) => { + if (node.kind !== 'rule') return + node.selector = optimizeSelector(node.selector) + }) + } + + // Merge adjacent at-rules + // + // ```css + // @media (print) { + // .a, .b { + // --x: 1; + // } + // } + // + // @media (print) { + // @media (min-width: 123px) { + // :is(.a, .b) .c { + // --x: 2; + // } + // } + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // @media (print) { + // .a, .b { + // --x: 1; + // } + // + // @media (min-width: 123px) { + // :is(.a, .b) .c { + // --x: 2; + // } + // } + // } + // ``` + { + walk(ast, { + enter(node, ctx) { + if (node.kind !== 'at-rule') return + + let next = ctx.siblings[ctx.index + 1] + + if (!next) return + if (next.kind !== 'at-rule') return + if (next.name !== node.name) return + if (next.params !== node.params) return + + // Move our nodes over + next.nodes = node.nodes.concat(next.nodes) + + // We merge everything into the last at-rule, but from a CSS perspective + // this should look as-if we merged it into the first one. + next.src = node.src + next.dst = node.dst + + return WalkAction.Replace([]) + }, + }) + } + + // Merge adjacent rules with the same selector + // + // ```css + // .a { + // --x: 1; + // } + // .a { + // --y: 1; + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // .a { + // --x: 1; + // --y: 1; + // } + // ``` + { + walk(ast, { + enter(node, ctx) { + if (node.kind !== 'rule') return + + let next = ctx.siblings[ctx.index + 1] + + if (!next) return + if (next.kind !== 'rule') return + if (next.selector !== node.selector) return + + // Move our nodes over + next.nodes = node.nodes.concat(next.nodes) + + // We merge everything into the last at-rule, but from a CSS perspective + // this should look as-if we merged it into the first one. + next.src = node.src + next.dst = node.dst + + return WalkAction.Replace([]) + }, + }) + } + + // Remove declarations that occur later with the same property / value / + // important information. A potential future improvement could be getting rid + // of overrides, but often a fallback value is used this way. + // + // ```css + // .foo { + // --x: 1; + // --x: 2; + // --x: 1; + // } + // ``` + // + // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ + // + // ```css + // .foo { + // --x: 2; + // --x: 1; + // } + // ``` + { + walk(ast, (node, ctx) => { + if (node.kind !== 'declaration') return + + for (let i = ctx.index + 1; i < ctx.siblings.length; i++) { + let next = ctx.siblings[i] + if ( + next.kind === 'declaration' && + next.property === node.property && + next.value === node.value && + next.important === node.important + ) { + return WalkAction.Replace([]) + } + } + }) + } + + return ast +} From 252bf810d4c1743dd3f1b753a94b906a70c8d2be Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 28 May 2026 01:21:00 +0200 Subject: [PATCH 11/20] cache variable extraction --- packages/tailwindcss/src/utils/variables.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/utils/variables.ts b/packages/tailwindcss/src/utils/variables.ts index 57ac4c3a5d27..b72987565a03 100644 --- a/packages/tailwindcss/src/utils/variables.ts +++ b/packages/tailwindcss/src/utils/variables.ts @@ -1,7 +1,8 @@ import * as ValueParser from '../value-parser' import { walk, WalkAction } from '../walk' +import { DefaultMap } from './default-map' -export function extractUsedVariables(raw: string): string[] { +let extractUsedVariablesCache = new DefaultMap((raw) => { let variables: string[] = [] walk(ValueParser.parse(raw), (node) => { if (node.kind !== 'function' || node.value !== 'var') return @@ -15,4 +16,8 @@ export function extractUsedVariables(raw: string): string[] { return WalkAction.Skip }) return variables +}) + +export function extractUsedVariables(raw: string): string[] { + return extractUsedVariablesCache.get(raw) } From d6492eb753f4c27c0e57fed29610ba9f66b6556c Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 28 May 2026 01:21:36 +0200 Subject: [PATCH 12/20] simplify `optimizeAst` step This part of the optimize AST step is covered automatically by the custom nesting handling. --- packages/tailwindcss/src/ast.ts | 32 +------------------------------- 1 file changed, 1 insertion(+), 31 deletions(-) diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index 084d7646952d..ee0b6a621870 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -305,37 +305,7 @@ export function optimizeAst( transform(child, nodes, context, depth + 1) } - // Keep the last decl when there are exact duplicates. Keeping the *first* one might - // not be correct when given nested rules where a rule sits between declarations. - let seen: Record = {} - let toRemove = new Set() - - // Keep track of all nodes that produce a given declaration - for (let child of nodes) { - if (child.kind !== 'declaration') continue - - let key = `${child.property}:${child.value}:${child.important}` - seen[key] ??= [] - seen[key].push(child) - } - - // And remove all but the last of each - for (let key in seen) { - for (let i = 0; i < seen[key].length - 1; ++i) { - toRemove.add(seen[key][i]) - } - } - - if (toRemove.size > 0) { - nodes = nodes.filter((node) => !toRemove.has(node)) - } - - if (nodes.length === 0) return - - // Rules with `&` as the selector should be flattened - if (node.selector === '&') { - parent.push(...nodes) - } else { + if (nodes.length > 0) { parent.push({ ...node, nodes }) } } From b010e422125e167af960750d4271cd1476e94c83 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 28 May 2026 01:31:49 +0200 Subject: [PATCH 13/20] handle nesting --- .../src/__snapshots__/index.test.ts.snap | 8 +- .../src/__snapshots__/utilities.test.ts.snap | 308 +- packages/tailwindcss/src/ast.test.ts | 33 +- packages/tailwindcss/src/ast.ts | 365 ++- packages/tailwindcss/src/at-import.test.ts | 6 +- .../tailwindcss/src/compat/config.test.ts | 200 +- .../src/compat/container-config.test.ts | 240 +- .../tailwindcss/src/compat/plugin-api.test.ts | 690 ++-- .../src/compat/screens-config.test.ts | 226 +- .../tailwindcss/src/css-functions.test.ts | 16 +- packages/tailwindcss/src/important.test.ts | 40 +- packages/tailwindcss/src/index.test.ts | 1094 +++---- packages/tailwindcss/src/intellisense.test.ts | 16 +- packages/tailwindcss/src/prefix.test.ts | 40 +- .../src/source-maps/source-map.test.ts | 765 +++-- packages/tailwindcss/src/utilities.test.ts | 1930 ++++++++---- packages/tailwindcss/src/variants.test.ts | 2784 ++++++----------- 17 files changed, 4382 insertions(+), 4379 deletions(-) diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 6d84bbc226fc..031c32af9161 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -17,8 +17,8 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } -.sm\\:flex { - @media (width >= 40rem) { +@media (width >= 40rem) { + .sm\\:flex { display: flex; } } @@ -231,7 +231,9 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = ` @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 212e919a3994..342f7772e17d 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -78,7 +78,9 @@ exports[`border-* 1`] = ` } .border-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -87,7 +89,9 @@ exports[`border-* 1`] = ` } .border-\\[var\\(--my-color\\)\\]\\/50 { border-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-\\[var\\(--my-color\\)\\]\\/50 { border-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -99,7 +103,9 @@ exports[`border-* 1`] = ` } .border-current\\/50 { border-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-current\\/50 { border-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -111,25 +117,33 @@ exports[`border-* 1`] = ` } .border-red-500\\/2\\.5 { border-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-red-500\\/2\\.5 { border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .border-red-500\\/2\\.25 { border-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-red-500\\/2\\.25 { border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .border-red-500\\/2\\.75 { border-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-red-500\\/2\\.75 { border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .border-red-500\\/50 { border-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-red-500\\/50 { border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -229,7 +243,9 @@ exports[`border-b-* 1`] = ` } .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-bottom-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -238,7 +254,9 @@ exports[`border-b-* 1`] = ` } .border-b-\\[var\\(--my-color\\)\\]\\/50 { border-bottom-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-b-\\[var\\(--my-color\\)\\]\\/50 { border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -250,7 +268,9 @@ exports[`border-b-* 1`] = ` } .border-b-current\\/50 { border-bottom-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-b-current\\/50 { border-bottom-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -262,25 +282,33 @@ exports[`border-b-* 1`] = ` } .border-b-red-500\\/2\\.5 { border-bottom-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-b-red-500\\/2\\.5 { border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .border-b-red-500\\/2\\.25 { border-bottom-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-b-red-500\\/2\\.25 { border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .border-b-red-500\\/2\\.75 { border-bottom-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-b-red-500\\/2\\.75 { border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .border-b-red-500\\/50 { border-bottom-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-b-red-500\\/50 { border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -380,7 +408,9 @@ exports[`border-be-* 1`] = ` } .border-be-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-end-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-be-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -389,7 +419,9 @@ exports[`border-be-* 1`] = ` } .border-be-\\[var\\(--my-color\\)\\]\\/50 { border-block-end-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-be-\\[var\\(--my-color\\)\\]\\/50 { border-block-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -401,7 +433,9 @@ exports[`border-be-* 1`] = ` } .border-be-current\\/50 { border-block-end-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-be-current\\/50 { border-block-end-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -413,25 +447,33 @@ exports[`border-be-* 1`] = ` } .border-be-red-500\\/2\\.5 { border-block-end-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-be-red-500\\/2\\.5 { border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .border-be-red-500\\/2\\.25 { border-block-end-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-be-red-500\\/2\\.25 { border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .border-be-red-500\\/2\\.75 { border-block-end-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-be-red-500\\/2\\.75 { border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .border-be-red-500\\/50 { border-block-end-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-be-red-500\\/50 { border-block-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -531,7 +573,9 @@ exports[`border-bs-* 1`] = ` } .border-bs-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-start-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-bs-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -540,7 +584,9 @@ exports[`border-bs-* 1`] = ` } .border-bs-\\[var\\(--my-color\\)\\]\\/50 { border-block-start-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-bs-\\[var\\(--my-color\\)\\]\\/50 { border-block-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -552,7 +598,9 @@ exports[`border-bs-* 1`] = ` } .border-bs-current\\/50 { border-block-start-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-bs-current\\/50 { border-block-start-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -564,25 +612,33 @@ exports[`border-bs-* 1`] = ` } .border-bs-red-500\\/2\\.5 { border-block-start-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-bs-red-500\\/2\\.5 { border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .border-bs-red-500\\/2\\.25 { border-block-start-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-bs-red-500\\/2\\.25 { border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .border-bs-red-500\\/2\\.75 { border-block-start-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-bs-red-500\\/2\\.75 { border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .border-bs-red-500\\/50 { border-block-start-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-bs-red-500\\/50 { border-block-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -682,7 +738,9 @@ exports[`border-e-* 1`] = ` } .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-end-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -691,7 +749,9 @@ exports[`border-e-* 1`] = ` } .border-e-\\[var\\(--my-color\\)\\]\\/50 { border-inline-end-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-e-\\[var\\(--my-color\\)\\]\\/50 { border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -703,7 +763,9 @@ exports[`border-e-* 1`] = ` } .border-e-current\\/50 { border-inline-end-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-e-current\\/50 { border-inline-end-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -715,25 +777,33 @@ exports[`border-e-* 1`] = ` } .border-e-red-500\\/2\\.5 { border-inline-end-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-e-red-500\\/2\\.5 { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .border-e-red-500\\/2\\.25 { border-inline-end-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-e-red-500\\/2\\.25 { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .border-e-red-500\\/2\\.75 { border-inline-end-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-e-red-500\\/2\\.75 { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .border-e-red-500\\/50 { border-inline-end-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-e-red-500\\/50 { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -833,7 +903,9 @@ exports[`border-l-* 1`] = ` } .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-left-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -842,7 +914,9 @@ exports[`border-l-* 1`] = ` } .border-l-\\[var\\(--my-color\\)\\]\\/50 { border-left-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-l-\\[var\\(--my-color\\)\\]\\/50 { border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -854,7 +928,9 @@ exports[`border-l-* 1`] = ` } .border-l-current\\/50 { border-left-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-l-current\\/50 { border-left-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -866,25 +942,33 @@ exports[`border-l-* 1`] = ` } .border-l-red-500\\/2\\.5 { border-left-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-l-red-500\\/2\\.5 { border-left-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .border-l-red-500\\/2\\.25 { border-left-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-l-red-500\\/2\\.25 { border-left-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .border-l-red-500\\/2\\.75 { border-left-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-l-red-500\\/2\\.75 { border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .border-l-red-500\\/50 { border-left-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-l-red-500\\/50 { border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -984,7 +1068,9 @@ exports[`border-r-* 1`] = ` } .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-right-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -993,7 +1079,9 @@ exports[`border-r-* 1`] = ` } .border-r-\\[var\\(--my-color\\)\\]\\/50 { border-right-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-r-\\[var\\(--my-color\\)\\]\\/50 { border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -1005,7 +1093,9 @@ exports[`border-r-* 1`] = ` } .border-r-current\\/50 { border-right-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-r-current\\/50 { border-right-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -1017,25 +1107,33 @@ exports[`border-r-* 1`] = ` } .border-r-red-500\\/2\\.5 { border-right-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-r-red-500\\/2\\.5 { border-right-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .border-r-red-500\\/2\\.25 { border-right-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-r-red-500\\/2\\.25 { border-right-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .border-r-red-500\\/2\\.75 { border-right-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-r-red-500\\/2\\.75 { border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .border-r-red-500\\/50 { border-right-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-r-red-500\\/50 { border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -1135,7 +1233,9 @@ exports[`border-s-* 1`] = ` } .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-start-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -1144,7 +1244,9 @@ exports[`border-s-* 1`] = ` } .border-s-\\[var\\(--my-color\\)\\]\\/50 { border-inline-start-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-s-\\[var\\(--my-color\\)\\]\\/50 { border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -1156,7 +1258,9 @@ exports[`border-s-* 1`] = ` } .border-s-current\\/50 { border-inline-start-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-s-current\\/50 { border-inline-start-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -1168,25 +1272,33 @@ exports[`border-s-* 1`] = ` } .border-s-red-500\\/2\\.5 { border-inline-start-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-s-red-500\\/2\\.5 { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .border-s-red-500\\/2\\.25 { border-inline-start-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-s-red-500\\/2\\.25 { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .border-s-red-500\\/2\\.75 { border-inline-start-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-s-red-500\\/2\\.75 { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .border-s-red-500\\/50 { border-inline-start-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-s-red-500\\/50 { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -1286,7 +1398,9 @@ exports[`border-t-* 1`] = ` } .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-top-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -1295,7 +1409,9 @@ exports[`border-t-* 1`] = ` } .border-t-\\[var\\(--my-color\\)\\]\\/50 { border-top-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-t-\\[var\\(--my-color\\)\\]\\/50 { border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -1307,7 +1423,9 @@ exports[`border-t-* 1`] = ` } .border-t-current\\/50 { border-top-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-t-current\\/50 { border-top-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -1319,25 +1437,33 @@ exports[`border-t-* 1`] = ` } .border-t-red-500\\/2\\.5 { border-top-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-t-red-500\\/2\\.5 { border-top-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .border-t-red-500\\/2\\.25 { border-top-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-t-red-500\\/2\\.25 { border-top-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .border-t-red-500\\/2\\.75 { border-top-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-t-red-500\\/2\\.75 { border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .border-t-red-500\\/50 { border-top-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-t-red-500\\/50 { border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -1437,7 +1563,9 @@ exports[`border-x-* 1`] = ` } .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -1446,7 +1574,9 @@ exports[`border-x-* 1`] = ` } .border-x-\\[var\\(--my-color\\)\\]\\/50 { border-inline-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-x-\\[var\\(--my-color\\)\\]\\/50 { border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -1458,7 +1588,9 @@ exports[`border-x-* 1`] = ` } .border-x-current\\/50 { border-inline-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-x-current\\/50 { border-inline-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -1470,25 +1602,33 @@ exports[`border-x-* 1`] = ` } .border-x-red-500\\/2\\.5 { border-inline-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-x-red-500\\/2\\.5 { border-inline-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .border-x-red-500\\/2\\.25 { border-inline-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-x-red-500\\/2\\.25 { border-inline-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .border-x-red-500\\/2\\.75 { border-inline-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-x-red-500\\/2\\.75 { border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .border-x-red-500\\/50 { border-inline-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-x-red-500\\/50 { border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -1588,7 +1728,9 @@ exports[`border-y-* 1`] = ` } .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -1597,7 +1739,9 @@ exports[`border-y-* 1`] = ` } .border-y-\\[var\\(--my-color\\)\\]\\/50 { border-block-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-y-\\[var\\(--my-color\\)\\]\\/50 { border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -1609,7 +1753,9 @@ exports[`border-y-* 1`] = ` } .border-y-current\\/50 { border-block-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-y-current\\/50 { border-block-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -1621,25 +1767,33 @@ exports[`border-y-* 1`] = ` } .border-y-red-500\\/2\\.5 { border-block-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-y-red-500\\/2\\.5 { border-block-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .border-y-red-500\\/2\\.25 { border-block-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-y-red-500\\/2\\.25 { border-block-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .border-y-red-500\\/2\\.75 { border-block-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-y-red-500\\/2\\.75 { border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .border-y-red-500\\/50 { border-block-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { +} +@supports (color: color-mix(in lab, red, red)) { + .border-y-red-500\\/50 { border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts index 794e86579122..c791d9c8b25a 100644 --- a/packages/tailwindcss/src/ast.test.ts +++ b/packages/tailwindcss/src/ast.test.ts @@ -7,6 +7,7 @@ import { cssContext, decl, DROPPABLE_IF_EMPTY_AT_RULES, + handleNesting, HOISTABLE_AT_RULES, optimizeAst, optimizeSelector, @@ -84,9 +85,9 @@ it('allows the placement of context nodes', () => { } .bar { color: blue; - .baz { - color: green; - } + } + .bar .baz { + color: green; } " `) @@ -255,21 +256,23 @@ it('should not emit exact duplicate declarations in the same rule', () => { expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(` " .foo { - .bar { - color: blue; - color: green; - } color: red; } + .foo .bar { + color: blue; + color: green; + } .foo { color: green; color: blue; color: red; background: blue; - .bar { - color: blue; - color: green; - } + } + .foo .bar { + color: blue; + color: green; + } + .foo { caret-color: orange; } " @@ -311,9 +314,13 @@ describe('optimization', () => { function optimize(input: string) { let ast = CSS.parse(input) - let cssOracle = pretty(toCss(handleNestingOracle(ast))) + let cssOracle = pretty(toCss(handleNestingOracle(ast.map(cloneAstNode)))) + let cssOptimized = pretty(toCss(handleNesting(ast.map(cloneAstNode)))) + + // Ensure the results matches the slower oracle version + expect(cssOptimized).toEqual(cssOracle) - return cssOracle + return cssOptimized } // See: https://drafts.csswg.org/css-nesting-1/ diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index ee0b6a621870..303e7d5235c6 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -5,6 +5,7 @@ import type { DesignSystem } from './design-system' import type { Source, SourceLocation } from './source-maps/source' 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' import { walk, WalkAction, type VisitContext } from './walk' @@ -650,7 +651,360 @@ export function optimizeAst( } } - return newAst + return handleNesting(newAst) +} + +export function handleNesting(ast: AstNode[]): AstNode[] { + // Track `rule` selectors as we go + let selectorStack: string[] = [] + + // Track `at-rule` information as we go. Tracking this separately from the + // selector stack for rules such that we can hoist this above all the rules. + let atRuleStack: [ + name: string, + params: string, + src: SourceLocation | undefined, + dst: SourceLocation | undefined, + ][] = [] + + // The current "nodes" we can push to + let nodes = null as AstNode[] | null + + // Optimization: Track the declaration properties we've seen in the current + // nodes. + let seenDeclarationProperties = new Set() + + // Track nodes lists where we want to dedupe declarations + let dedupeDeclarationsInNodes = new Set() + + // The final, new AST + let result: AstNode[] = [] + + // Track whether we should skip a node in the `exit` phase + let skipExit = new Set() + + walk(ast, { + enter(node) { + switch (node.kind) { + case 'rule': { + nodes = null // Start a new level + + // First time we see a rule + if (selectorStack.length === 0) { + // A rule with a selector containing `&` should replace the `&` with + // `:scope` if there is no parent rule. + // + // Note: there could be false positives when the `&` is escaped or + // part of a string inside an attribute selector. But the + // SelectorParser will take care of that. + if (node.selector.includes('&')) { + let ast = SelectorParser.parse(node.selector) + let changed = false + + walk(ast, (node) => { + if (node.kind === 'selector' && node.value === '&') { + changed = true + node.value = ':scope' + } + }) + + if (changed) { + selectorStack.push(SelectorParser.toCss(ast)) + } else { + selectorStack.push(node.selector) + } + } + + // No nesting markers, track as-is + else { + selectorStack.push(node.selector) + } + } + + // Nested rule, ensure `&` is present in each selector. Then track the + // selector. + else { + // A rule with just `&` can be replaced by its children. Let's + // ignore this node and keep walking its children. + if (node.selector === '&') { + skipExit.add(node) + return + } + + // `&` is using `:is(…)` semantics + let parentSelector = `:is(${selectorStack[selectorStack.length - 1]})` + let selector = segment(node.selector, ',') + .map((selector) => { + // Slow path: we need to replace the `&` with the parent + // selector. A simple `replaceAll(…)` won't work because a `&` + // could be escaped, or could be part of an attribute selector. + // + // Much safer to parse the selector and replace the `&` that way + if (selector.includes('&')) { + let ast = SelectorParser.parse(selector) + let changed = false + walk(ast, (node) => { + if (node.kind === 'selector' && node.value === '&') { + changed = true + node.value = parentSelector + } + }) + + // It could be that `&` was not found as an actual selector, + // in that case we still have to prepend the parent selector. + return changed ? SelectorParser.toCss(ast) : `${parentSelector} ${selector}` + } + + // Fast path: we know there isn't a `&` so we can prepend the + // parent selector immediately. + else { + return `${parentSelector} ${selector}` + } + }) + .join(', ') + selectorStack.push(selector) + } + break + } + + case 'at-rule': { + nodes = null // Start a new level + + // `@layer` is hoistable, but when it's empty then we have to make + // sure that we still emit it because this might influence the layer + // order. We can't just get grid of it. + if (node.nodes.length === 0 && !DROPPABLE_IF_EMPTY_AT_RULES.has(node.name)) { + emit(node) + skipExit.add(node) + return WalkAction.Skip + } + + // Hoist at-rules + else if (HOISTABLE_AT_RULES.has(node.name)) { + atRuleStack.push([node.name, node.params, node.src, node.dst]) + } + + // If we can't hoist them, emit them immediately as-is + else { + emit(node) + skipExit.add(node) + return WalkAction.Skip + } + break + } + + case 'declaration': + case 'comment': { + emit(node) + break + } + + case 'context': + case 'at-root': + break + + default: + node satisfies never + break + } + }, + exit(node) { + if (skipExit.delete(node)) return + + switch (node.kind) { + case 'rule': { + nodes = null + selectorStack.pop() + break + } + + case 'at-rule': { + nodes = null + atRuleStack.pop() + break + } + + case 'declaration': + case 'comment': + case 'context': + case 'at-root': + break + + default: + node satisfies never + break + } + }, + }) + + // Dedupe declarations that we've already seen before if they match the + // `property`, `value` and `important` information. + { + for (let nodes of dedupeDeclarationsInNodes) { + let seen = new Set() + for (let i = nodes.length - 1; i >= 0; --i) { + let node = nodes[i] + if (node.kind !== 'declaration') continue + + let id = `${node.property}\0${node.value}\0${node.important}` + + if (seen.has(id)) nodes.splice(i, 1) + else seen.add(id) + } + } + } + + return result + + function emit(node: AstNode) { + // Existing nodes are available, emit into those nodes + if (nodes) { + // Optimization: track used declarations in the current node. + if (node.kind === 'declaration') { + if (seenDeclarationProperties.has(node.property)) { + dedupeDeclarationsInNodes.add(nodes) + } else { + seenDeclarationProperties.add(node.property) + } + } + + nodes.push(node) + return + } + + // Nothing available, setup a fresh node + { + // There are no parent rules or at-rules available, which means taht we + // can emit the node as-is. + if (selectorStack.length === 0 && atRuleStack.length === 0) { + let target = result + let lastNode = target[target.length - 1] + + // Optimization: when the current and last node are the same, ignore the + // new node entirely otherwise we will get unnecessary duplicate + // results. + // + // We only care about at-rules with no body because some of them (such + // as `@charset` or `@layer`) need to be emitted. A normal rule that's + // empty doesn't need to be emitted. + if ( + lastNode && + lastNode.kind === 'at-rule' && + node.kind === 'at-rule' && + lastNode.name === node.name && + lastNode.params === node.params + ) { + return + } + + result.push(node) + return + } + + // Track the new "parent" nodes + { + nodes = [node] + + // Clear out seen declarations from the previous work in progress nodes + seenDeclarationProperties.clear() + + // Track new declaration + if (node.kind === 'declaration') { + seenDeclarationProperties.add(node.property) + } + } + + // Track the new root node that we build up to store in the final AST + let root = null as AstNode | null + + let target = result + let atRuleOffset = 0 + + // Optimization: merge adjacent at-rules + // + // Figure out whether we can push our new node into a previous node that + // was already emitted. + // + // We have to make sure that the order stays the same, so therefore we + // only ever have to look at the last node that was emitted. + { + let lastNode = target[target.length - 1] + if (lastNode && lastNode.kind === 'at-rule') { + for (let i = 0; i < atRuleStack.length; i++) { + let atRule = atRuleStack[i] + if (lastNode.kind !== 'at-rule') break + if (lastNode.name !== atRule[0]) break + if (lastNode.params !== atRule[1]) break + + atRuleOffset++ + target = lastNode.nodes + lastNode = lastNode.nodes[lastNode.nodes.length - 1] + } + } + } + + // Build up the rule + if (selectorStack.length > 0) { + let selector = optimizeSelector(selectorStack[selectorStack.length - 1]) + + // Optimization: merge adjacent rules with the same selector + // + // Figure out whether we can push into an existing rule. + // + // If we have some at-rules that we have to keep into account, then we + // definitely can't. + if (atRuleStack.length - atRuleOffset <= 0) { + let lastNode = target[target.length - 1] + if (lastNode && lastNode.kind === 'rule' && lastNode.selector === selector) { + lastNode.nodes.push(...nodes) + + // Ensure that our current nodes points to the nodes of the + // `lastNode`, otherwise we will lose information. + nodes = lastNode.nodes + + // We appended a group that could contain declarations already in the + // existing rule, so let the final dedupe pass handle it once. + // + // Note: we could loop over _all_ previous nodes to figure out if we + // really want to dedupe this. But this could result in a bunch of + // duplicate work if we have `n` nodes that we want to merge + // together. + dedupeDeclarationsInNodes.add(nodes) + + // We know that we don't have to handle any more at-rules, so we can + // bail early since we just merged the nodes with the same selector. + return + } + } + + // Can't push into existing node, create a new node + root = rule(selector, nodes) + if (node.src || node.dst) Object.assign(root, { src: node.src, dst: node.dst }) + } + + // Wrap in at-rules, if we can push into an existing node then we can + // ignore `offset` amount of nodes since the `root`/`nodes` will already + // point to a nested node. + for (let i = atRuleStack.length - 1; i >= atRuleOffset; --i) { + let [name, params, src, dst] = atRuleStack[i] + + root = atRule(name, params, root ? [root] : nodes) + if (src || dst) Object.assign(root, { src, dst }) + } + + // Track the root node in the AST + if (root) { + target.push(root) + } + + // We didn't build up any new root, so we can move our node directly into + // the target. This can happen when we emit a node that is not a + // declaration or a comment. + else { + target.push(...nodes) + } + } + } } // A set of at-rules that can be hoisted to the top without any repercussions. @@ -679,7 +1033,7 @@ export const DROPPABLE_IF_EMPTY_AT_RULES = new Set([ ]) // An `element` and a `*` can only appear once, and if they do, they have -// to be first. If multiple exist, a `:is(…)` should be used. +// to be first. If multiple exist, an `:is(…)` should be used. // // - `div*` is invalid, must be `div:is(*)` // - `**` is invalid, must be `*:is(*)` @@ -689,13 +1043,14 @@ function mustBeFirst(node: SelectorParser.SelectorAstNode | undefined) { return node?.kind === 'selector' && (node.value === '*' || /^[a-zA-Z-]+$/.test(node.value)) } -export function optimizeSelector(selector: string): string { +let optimizedSelectorCache = new DefaultMap((selector) => { let ast = SelectorParser.parse(selector) let changed = false walk(ast, { exit(node, ctx) { if (node.kind === 'compound') { + // Swap nodes in a compound selector if one of the nodes has to be first let idx = node.nodes.findIndex((child) => mustBeFirst(child)) if (idx >= 0) { // Optimization: Already in the correct spot, nothing to do here @@ -707,6 +1062,7 @@ export function optimizeSelector(selector: string): string { return } + // Unwrap `:is(…)` if (node.kind !== 'function') return if (node.value !== ':is') return if (node.nodes.length !== 1) return @@ -744,6 +1100,9 @@ export function optimizeSelector(selector: string): string { }) return changed ? SelectorParser.toCss(ast) : selector +}) +export function optimizeSelector(selector: string): string { + return optimizedSelectorCache.get(selector) } export function toCss(ast: AstNode[], track?: boolean) { diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts index 9a6a8fa231a9..10945db31c43 100644 --- a/packages/tailwindcss/src/at-import.test.ts +++ b/packages/tailwindcss/src/at-import.test.ts @@ -645,10 +645,8 @@ test('resolves `@variant` used as `@custom-variant` inside `@reference`', async ), ).toMatchInlineSnapshot(` " - .dark\\:flex { - &:where([data-theme='dark'] *) { - display: flex; - } + .dark\\:flex:where([data-theme='dark'] *) { + display: flex; } " `) diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index 5f785fd05ed7..a662e4b535f8 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -33,8 +33,8 @@ test('Config files can change dark mode (media)', async () => { ), ).toMatchInlineSnapshot(` " - .dark\\:underline { - @media (prefers-color-scheme: dark) { + @media (prefers-color-scheme: dark) { + .dark\\:underline { text-decoration-line: underline; } } @@ -56,10 +56,8 @@ test('Config files can change dark mode (selector)', async () => { ), ).toMatchInlineSnapshot(` " - .dark\\:underline { - &:where(.dark, .dark *) { - text-decoration-line: underline; - } + .dark\\:underline:where(.dark, .dark *) { + text-decoration-line: underline; } " `) @@ -83,10 +81,8 @@ test('Config files can change dark mode (variant)', async () => { ), ).toMatchInlineSnapshot(` " - .dark\\:underline { - &:where(:not(.light)) { - text-decoration-line: underline; - } + .dark\\:underline:where(:not(.light)) { + text-decoration-line: underline; } " `) @@ -151,10 +147,8 @@ test('Plugins loaded from config files can contribute to the config', async () = ), ).toMatchInlineSnapshot(` " - .dark\\:underline { - &:where(:not(.light)) { - text-decoration-line: underline; - } + .dark\\:underline:where(:not(.light)) { + text-decoration-line: underline; } " `) @@ -178,10 +172,8 @@ test('Config file presets can contribute to the config', async () => { ), ).toMatchInlineSnapshot(` " - .dark\\:underline { - &:where(:not(.light)) { - text-decoration-line: underline; - } + .dark\\:underline:where(:not(.light)) { + text-decoration-line: underline; } " `) @@ -304,15 +296,11 @@ test('Variants in CSS overwrite variants from plugins', async () => { ), ).toMatchInlineSnapshot(` " - .dark\\:underline { - &:is(.my-dark) { - text-decoration-line: underline; - } + .dark\\:underline.my-dark { + text-decoration-line: underline; } - .light\\:underline { - &:is(.my-light) { - text-decoration-line: underline; - } + .light\\:underline.my-light { + text-decoration-line: underline; } " `) @@ -395,19 +383,17 @@ describe('theme callbacks', () => { ).toMatchInlineSnapshot(` " @layer properties; - .prose { - [class~=lead-base] { - font-size: 100rem; - line-height: 201rem; - } - [class~=lead-md] { - font-size: 200rem; - line-height: 101rem; - } - [class~=lead-xl] { - font-size: 200rem; - line-height: 201rem; - } + .prose [class~=lead-base] { + font-size: 100rem; + line-height: 201rem; + } + .prose [class~=lead-md] { + font-size: 200rem; + line-height: 101rem; + } + .prose [class~=lead-xl] { + font-size: 200rem; + line-height: 201rem; } .leading-base { --tw-leading: 201rem; @@ -584,35 +570,23 @@ describe('theme overrides order', () => { .bg-slate-600 { background-color: #200600; } - .hover-bg-slate-100 { - &:hover { - background-color: #000100; - } + .hover-bg-slate-100:hover { + background-color: #000100; } - .hover-bg-slate-200 { - &:hover { - background-color: #200200; - } + .hover-bg-slate-200:hover { + background-color: #200200; } - .hover-bg-slate-300 { - &:hover { - background-color: #000300; - } + .hover-bg-slate-300:hover { + background-color: #000300; } - .hover-bg-slate-400 { - &:hover { - background-color: #100400; - } + .hover-bg-slate-400:hover { + background-color: #100400; } - .hover-bg-slate-500 { - &:hover { - background-color: #100500; - } + .hover-bg-slate-500:hover { + background-color: #100500; } - .hover-bg-slate-600 { - &:hover { - background-color: #200600; - } + .hover-bg-slate-600:hover { + background-color: #200600; } " `) @@ -1180,43 +1154,35 @@ test('creates variants for `data`, `supports`, and `aria` theme options at the s ), ).toMatchInlineSnapshot(` " - .aria-hidden\\:flex { - &[aria-hidden="true"] { - display: flex; - } + .aria-hidden\\:flex[aria-hidden="true"] { + display: flex; } - .aria-polite\\:underline { - &[aria-live="polite"] { - text-decoration-line: underline; - } + .aria-polite\\:underline[aria-live="polite"] { + text-decoration-line: underline; } - .data-checked\\:underline { - &[data-ui~="checked"] { - text-decoration-line: underline; - } + .data-checked\\:underline[data-ui~="checked"] { + text-decoration-line: underline; } - .data-foo\\:flex { - &[data-foo] { - display: flex; - } + .data-foo\\:flex[data-foo] { + display: flex; } - .supports-child-combinator\\:underline { - @supports selector(h2 > p) { + @supports selector(h2 > p) { + .supports-child-combinator\\:underline { text-decoration-line: underline; } } - .supports-foo\\:underline { - @supports (bar: var(--tw)) { + @supports (bar: var(--tw)) { + .supports-foo\\:underline { text-decoration-line: underline; } } - .supports-grid\\:flex { - @supports (grid: var(--tw)) { + @supports (grid: var(--tw)) { + .supports-grid\\:flex { display: flex; } } - .print\\:flex { - @media print { + @media print { + .print\\:flex { display: flex; } } @@ -1260,25 +1226,23 @@ test('merges css breakpoints with js config screens', async () => { ), ).toMatchInlineSnapshot(` " - .sm\\:flex { - @media (width >= 44rem) { + @media (width >= 44rem) { + .sm\\:flex { display: flex; } - } - .min-sm\\:max-md\\:underline { - @media (width >= 44rem) { - @media (width < 50rem) { + @media (width < 50rem) { + .min-sm\\:max-md\\:underline { text-decoration-line: underline; } } } - .md\\:flex { - @media (width >= 50rem) { + @media (width >= 50rem) { + .md\\:flex { display: flex; } } - .lg\\:flex { - @media (width >= 64rem) { + @media (width >= 64rem) { + .lg\\:flex { display: flex; } } @@ -1314,11 +1278,9 @@ test('utilities must be prefixed', async () => { .tw\\:underline { text-decoration-line: underline; } - .tw\\:hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; - } + @media (hover: hover) { + .tw\\:hover\\:line-through:hover { + text-decoration-line: line-through; } } " @@ -1460,19 +1422,15 @@ test('important: `#app`', async () => { ), ).toMatchInlineSnapshot(` " - #app { - .custom { - color: red; - } - .underline { - text-decoration-line: underline; - } - .hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; - } - } + #app .custom { + color: red; + } + #app .underline { + text-decoration-line: underline; + } + @media (hover: hover) { + :is(#app .hover\\:line-through):hover { + text-decoration-line: line-through; } } " @@ -1507,11 +1465,9 @@ test('important: true', async () => { .underline { text-decoration-line: underline !important; } - .hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through !important; - } + @media (hover: hover) { + .hover\\:line-through:hover { + text-decoration-line: line-through !important; } } " @@ -1550,8 +1506,8 @@ test('blocklisted candidates are not generated', async () => { .underline { text-decoration-line: underline; } - .md\\:bg-white { - @media (width >= 48rem) { + @media (width >= 48rem) { + .md\\:bg-white { background-color: var(--color-white, #fff); } } diff --git a/packages/tailwindcss/src/compat/container-config.test.ts b/packages/tailwindcss/src/compat/container-config.test.ts index f38f046054cd..e3f10b70d609 100644 --- a/packages/tailwindcss/src/compat/container-config.test.ts +++ b/packages/tailwindcss/src/compat/container-config.test.ts @@ -37,19 +37,29 @@ test('creates a custom utility to extend the built-in container', async () => { " .container { width: 100%; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: 40rem; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .container { max-width: 48rem; } - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .container { max-width: 64rem; } - @media (width >= 80rem) { + } + @media (width >= 80rem) { + .container { max-width: 80rem; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .container { max-width: 96rem; } } @@ -99,28 +109,42 @@ test('allows padding to be defined at custom breakpoints', async () => { " .container { width: 100%; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: 40rem; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .container { max-width: 48rem; } - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .container { max-width: 64rem; } - @media (width >= 80rem) { + } + @media (width >= 80rem) { + .container { max-width: 80rem; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .container { max-width: 96rem; } } .container { padding-inline: 1rem; - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .container { padding-inline: 2rem; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .container { padding-inline: 3rem; } } @@ -164,30 +188,44 @@ test('allows breakpoints to be overwritten', async () => { " .container { width: 100%; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: 40rem; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .container { max-width: 48rem; } - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .container { max-width: 64rem; } - @media (width >= 80rem) { + } + @media (width >= 80rem) { + .container { max-width: 80rem; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .container { max-width: 96rem; } } - .container { - @media (width >= 40rem) { + @media (width >= 40rem) { + .container { max-width: none; } - @media (width >= 1280px) { + } + @media (width >= 1280px) { + .container { max-width: 1280px; } - @media (width >= 1536px) { + } + @media (width >= 1536px) { + .container { max-width: 1536px; } } @@ -234,27 +272,39 @@ test('padding applies to custom `container` screens', async () => { " .container { width: 100%; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: 40rem; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .container { max-width: 48rem; } - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .container { max-width: 64rem; } - @media (width >= 80rem) { + } + @media (width >= 80rem) { + .container { max-width: 80rem; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .container { max-width: 96rem; } } - .container { - @media (width >= 40rem) { + @media (width >= 40rem) { + .container { max-width: none; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .container { max-width: 48rem; padding-inline: 3rem; } @@ -301,25 +351,37 @@ test("an empty `screen` config will undo all custom media screens and won't appl " .container { width: 100%; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: 40rem; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .container { max-width: 48rem; } - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .container { max-width: 64rem; } - @media (width >= 80rem) { + } + @media (width >= 80rem) { + .container { max-width: 80rem; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .container { max-width: 96rem; } } .container { padding-inline: 1rem; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: none; } } @@ -420,53 +482,81 @@ test('combines custom padding and screen overwrites', async () => { " .\\!container { width: 100% !important; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .\\!container { max-width: 40rem !important; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .\\!container { max-width: 48rem !important; } - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .\\!container { max-width: 64rem !important; } - @media (width >= 80rem) { + } + @media (width >= 80rem) { + .\\!container { max-width: 80rem !important; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .\\!container { max-width: 96rem !important; } } .container { width: 100%; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: 40rem; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .container { max-width: 48rem; } - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .container { max-width: 64rem; } - @media (width >= 80rem) { + } + @media (width >= 80rem) { + .container { max-width: 80rem; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .container { max-width: 96rem; } } .\\!container { margin-inline: auto !important; padding-inline: 2rem !important; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .\\!container { max-width: none !important; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .\\!container { max-width: 48rem !important; } - @media (width >= 1280px) { + } + @media (width >= 1280px) { + .\\!container { max-width: 1280px !important; } - @media (width >= 1536px) { + } + @media (width >= 1536px) { + .\\!container { max-width: 1536px !important; padding-inline: 4rem !important; } @@ -474,16 +564,24 @@ test('combines custom padding and screen overwrites', async () => { .container { margin-inline: auto; padding-inline: 2rem; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: none; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .container { max-width: 48rem; } - @media (width >= 1280px) { + } + @media (width >= 1280px) { + .container { max-width: 1280px; } - @media (width >= 1536px) { + } + @media (width >= 1536px) { + .container { max-width: 1536px; padding-inline: 4rem; } @@ -536,35 +634,53 @@ test('filters out complex breakpoints', async () => { " .container { width: 100%; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: 40rem; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .container { max-width: 48rem; } - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .container { max-width: 64rem; } - @media (width >= 80rem) { + } + @media (width >= 80rem) { + .container { max-width: 80rem; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .container { max-width: 96rem; } } .container { margin-inline: auto; padding-inline: 2rem; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: none; } - @media (width >= 20px) { + } + @media (width >= 20px) { + .container { max-width: 20px; } - @media (width >= 100px) { + } + @media (width >= 100px) { + .container { max-width: 100px; } - @media (width >= 300px) { + } + @media (width >= 300px) { + .container { max-width: 300px; } } diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index d103af823cd2..b4684913e6a4 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -278,7 +278,9 @@ describe('theme', async () => { } .variable { color: #ef4444; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .variable { color: color-mix(in oklab, #ef4444 var(--opacity), transparent); } } @@ -345,7 +347,9 @@ describe('theme', async () => { } .css-variable { color: rgba(255 0 0 / ); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .css-variable { color: color-mix(in oklab, rgba(255 0 0 / ) var(--opacity), transparent); } } @@ -357,7 +361,9 @@ describe('theme', async () => { } .js-variable { color: rgb(255 0 0 / 1); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .js-variable { color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent); } } @@ -1031,11 +1037,7 @@ describe('theme', async () => { " .foo-bar { background-color: red; - } - .foo-bar { color: red; - } - .foo-bar { --my-prop: bar-valuer; } " @@ -1524,15 +1526,11 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex { - &:is(:is(:where(.group):hover, :where(.group):focus) *) { - display: flex; - } + .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { + display: flex; } - .hocus\\:underline { - &:hover, &:focus { - text-decoration-line: underline; - } + .hocus\\:underline:hover, .hocus\\:underline:focus { + text-decoration-line: underline; } } " @@ -1564,21 +1562,17 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex { - &:is(:where(.group):hover *) { - display: flex; - } - &:is(:where(.group):focus *) { - display: flex; - } + .group-hocus\\:flex:is(:where(.group):hover *) { + display: flex; } - .hocus\\:underline { - &:hover { - text-decoration-line: underline; - } - &:focus { - text-decoration-line: underline; - } + .group-hocus\\:flex:is(:where(.group):focus *) { + display: flex; + } + .hocus\\:underline:hover { + text-decoration-line: underline; + } + .hocus\\:underline:focus { + text-decoration-line: underline; } } " @@ -1613,21 +1607,17 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex { - &:is(:where(.group):hover *) { - display: flex; - } - &:is(:where(.group):focus *) { - display: flex; - } + .group-hocus\\:flex:is(:where(.group):hover *) { + display: flex; } - .hocus\\:underline { - &:hover { - text-decoration-line: underline; - } - &:focus { - text-decoration-line: underline; - } + .group-hocus\\:flex:is(:where(.group):focus *) { + display: flex; + } + .hocus\\:underline:hover { + text-decoration-line: underline; + } + .hocus\\:underline:focus { + text-decoration-line: underline; } } " @@ -1664,26 +1654,22 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex { - @media (hover: hover) { - &:is(:where(.group):hover *) { - display: flex; - } - } - &:is(:where(.group):focus *) { + @media (hover: hover) { + .group-hocus\\:flex:is(:where(.group):hover *) { display: flex; } } - .hocus\\:underline { - @media (hover: hover) { - &:hover { - text-decoration-line: underline; - } - } - &:focus { + .group-hocus\\:flex:is(:where(.group):focus *) { + display: flex; + } + @media (hover: hover) { + .hocus\\:underline:hover { text-decoration-line: underline; } } + .hocus\\:underline:focus { + text-decoration-line: underline; + } } " `) @@ -1717,21 +1703,13 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .potato\\:flex { - @media (max-width: 400px) { - @supports (font:bold) { - &:large-potato { - display: flex; - } + @media (max-width: 400px) { + @supports (font:bold) { + .potato\\:flex:large-potato { + display: flex; } - } - } - .potato\\:underline { - @media (max-width: 400px) { - @supports (font:bold) { - &:large-potato { - text-decoration-line: underline; - } + .potato\\:underline:large-potato { + text-decoration-line: underline; } } } @@ -1773,12 +1751,12 @@ describe('addVariant', () => { @layer utilities { .hocus\\:underline { --custom-property: @slot; - &:hover { - text-decoration-line: underline; - } - &:focus { - text-decoration-line: underline; - } + } + .hocus\\:underline:hover { + text-decoration-line: underline; + } + .hocus\\:underline:focus { + text-decoration-line: underline; } } " @@ -1812,25 +1790,17 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-optional\\:flex { - &:is(:where(.group):optional *) { - display: flex; - } + .group-optional\\:flex:is(:where(.group):optional *) { + display: flex; } - .group-optional\\/foo\\:flex { - &:is(:where(.group\\/foo):optional *) { - display: flex; - } + .group-optional\\/foo\\:flex:is(:where(.group\\/foo):optional *) { + display: flex; } - .peer-optional\\:flex { - &:is(:where(.peer):optional ~ *) { - display: flex; - } + .peer-optional\\:flex:is(:where(.peer):optional ~ *) { + display: flex; } - .optional\\:flex { - &:optional { - display: flex; - } + .optional\\:flex:optional { + display: flex; } } " @@ -1864,15 +1834,11 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .potato-\\[baked\\]\\:flex { - .potato-baked & { - display: flex; - } + .potato-baked .potato-\\[baked\\]\\:flex { + display: flex; } - .potato-\\[yellow\\]\\:underline { - .potato-yellow & { - text-decoration-line: underline; - } + .potato-yellow .potato-\\[yellow\\]\\:underline { + text-decoration-line: underline; } } " @@ -1904,13 +1870,13 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .potato-\\[baked\\]\\:flex { - @media (potato: baked) { + @media (potato: baked) { + .potato-\\[baked\\]\\:flex { display: flex; } } - .potato-\\[yellow\\]\\:underline { - @media (potato: yellow) { + @media (potato: yellow) { + .potato-\\[yellow\\]\\:underline { text-decoration-line: underline; } } @@ -1946,21 +1912,17 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .potato-\\[baked\\]\\:flex { - @media (potato: baked) { - @supports (font:bold) { - &:large-potato { - display: flex; - } + @media (potato: baked) { + @supports (font:bold) { + .potato-\\[baked\\]\\:flex:large-potato { + display: flex; } } } - .potato-\\[yellow\\]\\:underline { - @media (potato: yellow) { - @supports (font:bold) { - &:large-potato { - text-decoration-line: underline; - } + @media (potato: yellow) { + @supports (font:bold) { + .potato-\\[yellow\\]\\:underline:large-potato { + text-decoration-line: underline; } } } @@ -1999,15 +1961,11 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .tooltip-bottom\\:underline { - &[data-location="bottom"] { - text-decoration-line: underline; - } + .tooltip-bottom\\:underline[data-location="bottom"] { + text-decoration-line: underline; } - .tooltip-top\\:flex { - &[data-location="top"] { - display: flex; - } + .tooltip-top\\:flex[data-location="top"] { + display: flex; } } " @@ -2051,25 +2009,17 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .alphabet-d\\:underline { - &[data-order="1"] { - text-decoration-line: underline; - } + .alphabet-d\\:underline[data-order="1"] { + text-decoration-line: underline; } - .alphabet-a\\:underline { - &[data-order="2"] { - text-decoration-line: underline; - } + .alphabet-a\\:underline[data-order="2"] { + text-decoration-line: underline; } - .alphabet-c\\:underline { - &[data-order="3"] { - text-decoration-line: underline; - } + .alphabet-c\\:underline[data-order="3"] { + text-decoration-line: underline; } - .alphabet-b\\:underline { - &[data-order="4"] { - text-decoration-line: underline; - } + .alphabet-b\\:underline[data-order="4"] { + text-decoration-line: underline; } } " @@ -2103,16 +2053,14 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .test-\\[a\\,b\\,c\\]\\:underline { - &.a > * { - text-decoration-line: underline; - } - &.b > * { - text-decoration-line: underline; - } - &.c > * { - text-decoration-line: underline; - } + .test-\\[a\\,b\\,c\\]\\:underline.a > * { + text-decoration-line: underline; + } + .test-\\[a\\,b\\,c\\]\\:underline.b > * { + text-decoration-line: underline; + } + .test-\\[a\\,b\\,c\\]\\:underline.c > * { + text-decoration-line: underline; } } " @@ -2148,18 +2096,18 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .testmin-\\[500px\\]\\:underline { - @media (min-width: 500px) { + @media (min-width: 500px) { + .testmin-\\[500px\\]\\:underline { text-decoration-line: underline; } } - .testmin-\\[600px\\]\\:flex { - @media (min-width: 600px) { + @media (min-width: 600px) { + .testmin-\\[600px\\]\\:flex { display: flex; } } - .testmin-\\[700px\\]\\:italic { - @media (min-width: 700px) { + @media (min-width: 700px) { + .testmin-\\[700px\\]\\:italic { font-style: italic; } } @@ -2198,18 +2146,18 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .testmin-\\[500px\\]\\:italic { - @media (min-width: 500px) { + @media (min-width: 500px) { + .testmin-\\[500px\\]\\:italic { font-style: italic; } } - .testmin-example\\:italic { - @media (min-width: 600px) { + @media (min-width: 600px) { + .testmin-example\\:italic { font-style: italic; } } - .testmin-\\[700px\\]\\:italic { - @media (min-width: 700px) { + @media (min-width: 700px) { + .testmin-\\[700px\\]\\:italic { font-style: italic; } } @@ -2258,30 +2206,28 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { - @media (min-width: 100px) { - @media (max-width: 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { + .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - .testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 { - @media (min-width: 150px) { - @media (max-width: 400px) { + @media (min-width: 150px) { + @media (max-width: 400px) { + .testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - .testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 { - @media (min-width: 100px) { - @media (max-width: 350px) { + @media (min-width: 100px) { + @media (max-width: 350px) { + .testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 { order: 3; } } - } - .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 { - @media (min-width: 100px) { - @media (max-width: 300px) { + @media (max-width: 300px) { + .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } } @@ -2330,24 +2276,16 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:hover\\:underline { - @media (min-width: 100px) { - @media (max-width: 200px) { - &:hover { - @media (hover: hover) { - text-decoration-line: underline; - } - } - } - } - } - .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:focus\\:underline { - @media (min-width: 100px) { - @media (max-width: 200px) { - &:focus { + @media (min-width: 100px) { + @media (max-width: 200px) { + @media (hover: hover) { + .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:hover\\:underline:hover { text-decoration-line: underline; } } + .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:focus\\:underline:focus { + text-decoration-line: underline; + } } } } @@ -2394,30 +2332,30 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { - @media (min-width: 100px) { - @media (max-width: 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { + .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { - @media (min-width: 200px) { - @media (max-width: 400px) { + @media (min-width: 200px) { + @media (max-width: 400px) { + .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { - @media (min-width: 100px) { - @media (max-width: 300px) { + @media (min-width: 100px) { + @media (max-width: 300px) { + .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { order: 3; } } } - .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { - @media (min-width: 200px) { - @media (max-width: 300px) { + @media (min-width: 200px) { + @media (max-width: 300px) { + .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } } @@ -2466,30 +2404,26 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .testmax-\\[400px\\]\\:testmin-\\[100px\\]\\:underline { - @media (max-width: 400px) { - @media (min-width: 100px) { + @media (max-width: 400px) { + @media (min-width: 100px) { + .testmax-\\[400px\\]\\:testmin-\\[100px\\]\\:underline { text-decoration-line: underline; } } - } - .testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline { - @media (max-width: 400px) { - @media (min-width: 200px) { + @media (min-width: 200px) { + .testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline { text-decoration-line: underline; } } } - .testmax-\\[300px\\]\\:testmin-\\[100px\\]\\:underline { - @media (max-width: 300px) { - @media (min-width: 100px) { + @media (max-width: 300px) { + @media (min-width: 100px) { + .testmax-\\[300px\\]\\:testmin-\\[100px\\]\\:underline { text-decoration-line: underline; } } - } - .testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline { - @media (max-width: 300px) { - @media (min-width: 200px) { + @media (min-width: 200px) { + .testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline { text-decoration-line: underline; } } @@ -2546,30 +2480,30 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { - @media (min-width: 100px) { - @media (max-width: 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { + .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { - @media (min-width: 200px) { - @media (max-width: 400px) { + @media (min-width: 200px) { + @media (max-width: 400px) { + .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { - @media (min-width: 100px) { - @media (max-width: 300px) { + @media (min-width: 100px) { + @media (max-width: 300px) { + .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { order: 3; } } } - .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { - @media (min-width: 200px) { - @media (max-width: 300px) { + @media (min-width: 200px) { + @media (max-width: 300px) { + .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } } @@ -2606,10 +2540,8 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .foo\\:underline { - .foo.bar & { - text-decoration-line: underline; - } + .foo.bar .foo\\:underline { + text-decoration-line: underline; } } " @@ -2672,10 +2604,8 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .foo\\:underline { - .foo-good & { - text-decoration-line: underline; - } + .foo-good .foo\\:underline { + text-decoration-line: underline; } } " @@ -2709,10 +2639,8 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .foo\\:underline { - .foo-good & { - text-decoration-line: underline; - } + .foo-good .foo\\:underline { + text-decoration-line: underline; } } " @@ -2751,13 +2679,13 @@ describe('matchVariant', () => { ), ).toMatchInlineSnapshot(` " - .my-container-\\[250px\\]\\:underline { - @container (min-width: 250px) { + @container (min-width: 250px) { + .my-container-\\[250px\\]\\:underline { text-decoration-line: underline; } } - .my-container-\\[250px\\]\\/placement\\:underline { - @container placement (min-width: 250px) { + @container placement (min-width: 250px) { + .my-container-\\[250px\\]\\/placement\\:underline { text-decoration-line: underline; } } @@ -2803,25 +2731,17 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-optional-\\[test\\]\\:flex { - &:is(:where(.group):optional:has(test) :where(.group) *) { - display: flex; - } + .group-optional-\\[test\\]\\:flex:is(:where(.group):optional:has(test) :where(.group) *) { + display: flex; } - .group-optional-\\[test\\]\\/foo\\:flex { - &:is(:where(.group\\/foo):optional:has(test) :where(.group\\/foo) *) { - display: flex; - } + .group-optional-\\[test\\]\\/foo\\:flex:is(:where(.group\\/foo):optional:has(test) :where(.group\\/foo) *) { + display: flex; } - .peer-optional-\\[test\\]\\:flex { - &:is(:where(.peer):optional:has(test) :where(.peer) ~ *) { - display: flex; - } + .peer-optional-\\[test\\]\\:flex:is(:where(.peer):optional:has(test) :where(.peer) ~ *) { + display: flex; } - .optional-\\[test\\]\\:flex { - &:optional:has(test) & { - display: flex; - } + .optional-\\[test\\]\\:flex:optional:has(test) .optional-\\[test\\]\\:flex { + display: flex; } } " @@ -2855,15 +2775,11 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .foo-known\\:flex { - &:is(known) { - display: flex; - } + known.foo-known\\:flex { + display: flex; } - .foo-\\[test\\]\\:flex { - &:is(test) { - display: flex; - } + test.foo-\\[test\\]\\:flex { + display: flex; } } " @@ -2900,15 +2816,11 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .foo-string\\:flex { - &:is(some string) { - display: flex; - } + .foo-string\\:flex:is(some string) { + display: flex; } - .foo-\\[test\\]\\:flex { - &:is(test) { - display: flex; - } + test.foo-\\[test\\]\\:flex { + display: flex; } } " @@ -2955,8 +2867,8 @@ describe('addUtilities()', () => { text-box-trim: both; text-box-edge: cap alphabetic; } - .lg\\:text-trim { - @media (width >= 1024px) { + @media (width >= 1024px) { + .lg\\:text-trim { text-box-trim: both; text-box-edge: cap alphabetic; } @@ -3162,14 +3074,18 @@ describe('addUtilities()', () => { @layer utilities { .foo { display: flex; - @media (prefers-color-scheme: dark) { + } + @media (prefers-color-scheme: dark) { + .foo { text-decoration-line: underline; } } - .lg\\:foo { - @media (width >= 1024px) { + @media (width >= 1024px) { + .lg\\:foo { display: flex; - @media (prefers-color-scheme: dark) { + } + @media (prefers-color-scheme: dark) { + .lg\\:foo { text-decoration-line: underline; } } @@ -3247,8 +3163,8 @@ describe('addUtilities()', () => { appearance: none; background-color: #fff; } - .lg\\:form-textarea { - @media (width >= 1024px) { + @media (width >= 1024px) { + .lg\\:form-textarea { appearance: none; background-color: #fff; } @@ -3289,15 +3205,13 @@ describe('addUtilities()', () => { " .form-input { background-color: red; - &::placeholder { - background-color: red; - } } - .lg\\:form-textarea { - @media (width >= 1024px) { - &:hover:focus { - background-color: red; - } + .form-input::placeholder { + background-color: red; + } + @media (width >= 1024px) { + .lg\\:form-textarea:hover:focus { + background-color: red; } } " @@ -3335,53 +3249,20 @@ describe('addUtilities()', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .j { - &.j { - color: red; - } - .j& { - color: red; - } - } - .a { - & .b:hover .c { - color: red; - } - } - .b { - .a &:hover .c { - color: red; - } - } - .c { - .a .b:hover & { - color: red; - } - } - .d { - & > * { - color: red; - } + .j.j { + color: red; } - .e { - & .bar:not(.f):has(.g) { - color: red; - } + .a .b:hover .c { + color: red; } - .g { - .e .bar:not(.f):has(&) { - color: red; - } + .d > * { + color: red; } - .h { - & ~ .i { - color: red; - } + .e .bar:not(.f):has(.g) { + color: red; } - .i { - .h ~ & { - color: red; - } + .h ~ .i { + color: red; } } " @@ -3415,25 +3296,8 @@ describe('addUtilities()', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .tw\\:a { - & .tw\\:b:hover .tw\\:c.tw\\:d { - color: red; - } - } - .tw\\:b { - .tw\\:a &:hover .tw\\:c.tw\\:d { - color: red; - } - } - .tw\\:c { - .tw\\:a .tw\\:b:hover &.tw\\:d { - color: red; - } - } - .tw\\:d { - .tw\\:a .tw\\:b:hover .tw\\:c& { - color: red; - } + .tw\\:a .tw\\:b:hover .tw\\:c.tw\\:d { + color: red; } } " @@ -3465,34 +3329,24 @@ describe('addUtilities()', () => { ), ).toMatchInlineSnapshot(` " - .foo { - :where(.foo > :first-child) { + .foo :where(.foo > :first-child) { + color: red; + } + @media (width >= 768px) { + .md\\:foo :where(.md\\:foo > :first-child) { + color: red; + } + :is(.not-hover\\:md\\:foo:not(*:hover)) :where(.not-hover\\:md\\:foo > :first-child) { color: red; } } - .md\\:foo { + @media not (hover: hover) { @media (width >= 768px) { - :where(.md\\:foo > :first-child) { + .not-hover\\:md\\:foo :where(.not-hover\\:md\\:foo > :first-child) { color: red; } } } - .not-hover\\:md\\:foo { - &:not(*:hover) { - @media (width >= 768px) { - :where(.not-hover\\:md\\:foo > :first-child) { - color: red; - } - } - } - @media not (hover: hover) { - @media (width >= 768px) { - :where(.not-hover\\:md\\:foo > :first-child) { - color: red; - } - } - } - } " `) }) @@ -3591,8 +3445,8 @@ describe('matchUtilities()', () => { .border-block-\\[var\\(--foo\\)\\] { border-block-width: var(--foo); } - .lg\\:border-block-2 { - @media (width >= 1024px) { + @media (width >= 1024px) { + .lg\\:border-block-2 { border-block-width: 2px; } } @@ -3652,11 +3506,9 @@ describe('matchUtilities()', () => { .\\@w-1 { width: 1px; } - .hover\\:\\@w-1 { - &:hover { - @media (hover: hover) { - width: 1px; - } + @media (hover: hover) { + .hover\\:\\@w-1:hover { + width: 1px; } } " @@ -4022,7 +3874,9 @@ describe('matchUtilities()', () => { } .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 { scrollbar-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 { scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -4031,7 +3885,9 @@ describe('matchUtilities()', () => { } .scrollbar-\\[var\\(--my-color\\)\\]\\/50 { scrollbar-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-\\[var\\(--my-color\\)\\]\\/50 { scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -4110,7 +3966,9 @@ describe('matchUtilities()', () => { " .scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] { scrollbar-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] { scrollbar-color: color-mix(in oklab, var(--my-color) 25%, transparent); } } @@ -4128,7 +3986,9 @@ describe('matchUtilities()', () => { } .scrollbar-current\\/45 { scrollbar-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-current\\/45 { scrollbar-color: color-mix(in oklab, currentcolor 45%, transparent); } } @@ -4224,14 +4084,12 @@ describe('matchUtilities()', () => { --foo: bar; display: flex; } - .lg\\:foo-\\[12px\\] { - @media (width >= 1024px) { + @media (width >= 1024px) { + .lg\\:foo-\\[12px\\] { --foo: 12px; display: flex; } - } - .lg\\:foo-bar { - @media (width >= 1024px) { + .lg\\:foo-bar { --foo: bar; display: flex; } @@ -4303,34 +4161,24 @@ describe('matchUtilities()', () => { ), ).toMatchInlineSnapshot(` " - .foo-red { - :where(.foo-red > :first-child) { + .foo-red :where(.foo-red > :first-child) { + color: red; + } + @media (width >= 768px) { + .md\\:foo-red :where(.md\\:foo-red > :first-child) { + color: red; + } + :is(.not-hover\\:md\\:foo-red:not(*:hover)) :where(.not-hover\\:md\\:foo-red > :first-child) { color: red; } } - .md\\:foo-red { + @media not (hover: hover) { @media (width >= 768px) { - :where(.md\\:foo-red > :first-child) { + .not-hover\\:md\\:foo-red :where(.not-hover\\:md\\:foo-red > :first-child) { color: red; } } } - .not-hover\\:md\\:foo-red { - &:not(*:hover) { - @media (width >= 768px) { - :where(.not-hover\\:md\\:foo-red > :first-child) { - color: red; - } - } - } - @media not (hover: hover) { - @media (width >= 768px) { - :where(.not-hover\\:md\\:foo-red > :first-child) { - color: red; - } - } - } - } " `) }) @@ -4387,16 +4235,16 @@ describe('addComponents()', () => { .btn-blue { background-color: #3490dc; color: #fff; - &:hover { - background-color: #2779bd; - } + } + .btn-blue:hover { + background-color: #2779bd; } .btn-red { background-color: #e3342f; color: #fff; - &:hover { - background-color: #cc1f1a; - } + } + .btn-red:hover { + background-color: #cc1f1a; } " `) @@ -4432,11 +4280,9 @@ describe('matchComponents()', () => { .prose { --container-size: normal; } - .hover\\:prose-lg { - &:hover { - @media (hover: hover) { - --container-size: lg; - } + @media (hover: hover) { + .hover\\:prose-lg:hover { + --container-size: lg; } } " diff --git a/packages/tailwindcss/src/compat/screens-config.test.ts b/packages/tailwindcss/src/compat/screens-config.test.ts index 4f42bec3d2b6..993ef4a4afa7 100644 --- a/packages/tailwindcss/src/compat/screens-config.test.ts +++ b/packages/tailwindcss/src/compat/screens-config.test.ts @@ -51,37 +51,33 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => { .max-w-screen-sm { max-width: 44rem; } - .sm\\:flex { - @media (width >= 44rem) { + @media (width >= 44rem) { + .sm\\:flex { display: flex; } - } - .min-sm\\:max-md\\:underline { - @media (width >= 44rem) { - @media (width < 50rem) { + @media (width < 50rem) { + .min-sm\\:max-md\\:underline { text-decoration-line: underline; } } } - .md\\:flex { - @media (width >= 50rem) { + @media (width >= 50rem) { + .md\\:flex { display: flex; } - } - .min-md\\:max-lg\\:underline { - @media (width >= 50rem) { - @media (width < 64rem) { + @media (width < 64rem) { + .min-md\\:max-lg\\:underline { text-decoration-line: underline; } } } - .lg\\:flex { - @media (width >= 64rem) { + @media (width >= 64rem) { + .lg\\:flex { display: flex; } } - .print\\:items-end { - @media print { + @media print { + .print\\:items-end { align-items: flex-end; } } @@ -138,54 +134,46 @@ test('JS config `screens` extend CSS `--breakpoint-*`', async () => { ), ).toMatchInlineSnapshot(` " - .min-xs\\:flex { - @media (width >= 30rem) { + @media (width >= 30rem) { + .min-xs\\:flex { display: flex; } - } - .xs\\:flex { - @media (width >= 30rem) { + .xs\\:flex { display: flex; } - } - .min-xs\\:max-md\\:underline { - @media (width >= 30rem) { - @media (width < 50rem) { + @media (width < 50rem) { + .min-xs\\:max-md\\:underline { text-decoration-line: underline; } } } - .sm\\:flex { - @media (width >= 40rem) { + @media (width >= 40rem) { + .sm\\:flex { display: flex; } - } - .min-sm\\:max-md\\:underline { - @media (width >= 40rem) { - @media (width < 50rem) { + @media (width < 50rem) { + .min-sm\\:max-md\\:underline { text-decoration-line: underline; } } } - .md\\:flex { - @media (width >= 50rem) { + @media (width >= 50rem) { + .md\\:flex { display: flex; } - } - .min-md\\:max-lg\\:underline { - @media (width >= 50rem) { - @media (width < 60rem) { + @media (width < 60rem) { + .min-md\\:max-lg\\:underline { text-decoration-line: underline; } } } - .lg\\:flex { - @media (width >= 60rem) { + @media (width >= 60rem) { + .lg\\:flex { display: flex; } } - .print\\:items-end { - @media print { + @media print { + .print\\:items-end { align-items: flex-end; } } @@ -229,37 +217,33 @@ test('JS config `screens` only setup, even if those match the default-theme expo ), ).toMatchInlineSnapshot(` " - .sm\\:flex { - @media (width >= 40rem) { + @media (width >= 40rem) { + .sm\\:flex { display: flex; } - } - .min-sm\\:max-md\\:underline { - @media (width >= 40rem) { - @media (width < 48rem) { + @media (width < 48rem) { + .min-sm\\:max-md\\:underline { text-decoration-line: underline; } } } - .md\\:flex { - @media (width >= 48rem) { + @media (width >= 48rem) { + .md\\:flex { display: flex; } - } - .min-md\\:max-lg\\:underline { - @media (width >= 48rem) { - @media (width < 64rem) { + @media (width < 64rem) { + .min-md\\:max-lg\\:underline { text-decoration-line: underline; } } } - .lg\\:flex { - @media (width >= 64rem) { + @media (width >= 64rem) { + .lg\\:flex { display: flex; } } - .print\\:items-end { - @media print { + @media print { + .print\\:items-end { align-items: flex-end; } } @@ -315,61 +299,45 @@ test('JS config `screens` overwrite CSS `--breakpoint-*`', async () => { ), ).toMatchInlineSnapshot(` " - .mini\\:flex { - @media (width >= 40rem) { + @media (width >= 40rem) { + .mini\\:flex { display: flex; } - } - .sm\\:flex { - @media (width >= 40rem) { + .sm\\:flex { display: flex; } - } - .min-mini\\:max-midi\\:underline { - @media (width >= 40rem) { - @media (width < 48rem) { + @media (width < 48rem) { + .min-mini\\:max-midi\\:underline { text-decoration-line: underline; } - } - } - .min-sm\\:max-md\\:underline { - @media (width >= 40rem) { - @media (width < 48rem) { + .min-sm\\:max-md\\:underline { text-decoration-line: underline; } } } - .md\\:flex { - @media (width >= 48rem) { + @media (width >= 48rem) { + .md\\:flex { display: flex; } - } - .midi\\:flex { - @media (width >= 48rem) { + .midi\\:flex { display: flex; } - } - .min-md\\:max-lg\\:underline { - @media (width >= 48rem) { - @media (width < 64rem) { + @media (width < 64rem) { + .min-md\\:max-lg\\:underline { text-decoration-line: underline; } - } - } - .min-midi\\:max-maxi\\:underline { - @media (width >= 48rem) { - @media (width < 64rem) { + .min-midi\\:max-maxi\\:underline { text-decoration-line: underline; } } } - .maxi\\:flex { - @media (width >= 64rem) { + @media (width >= 64rem) { + .maxi\\:flex { display: flex; } } - .print\\:items-end { - @media print { + @media print { + .print\\:items-end { align-items: flex-end; } } @@ -436,37 +404,33 @@ test('JS config with `theme: { extends }` should not include the `default-config ), ).toMatchInlineSnapshot(` " - .mini\\:flex { - @media (width >= 40rem) { + @media (width >= 40rem) { + .mini\\:flex { display: flex; } - } - .min-mini\\:max-midi\\:underline { - @media (width >= 40rem) { - @media (width < 48rem) { + @media (width < 48rem) { + .min-mini\\:max-midi\\:underline { text-decoration-line: underline; } } } - .midi\\:flex { - @media (width >= 48rem) { + @media (width >= 48rem) { + .midi\\:flex { display: flex; } - } - .min-midi\\:max-maxi\\:underline { - @media (width >= 48rem) { - @media (width < 64rem) { + @media (width < 64rem) { + .min-midi\\:max-maxi\\:underline { text-decoration-line: underline; } } } - .maxi\\:flex { - @media (width >= 64rem) { + @media (width >= 64rem) { + .maxi\\:flex { display: flex; } } - .print\\:items-end { - @media print { + @media print { + .print\\:items-end { align-items: flex-end; } } @@ -547,38 +511,36 @@ describe('complex screen configs', () => { ), ).toMatchInlineSnapshot(` " - .lg\\:flex { - @media (width >= 868px) { + @media (width >= 868px) { + .lg\\:flex { display: flex; } - } - .min-lg\\:flex { - @media (width >= 868px) { + .min-lg\\:flex { display: flex; } } - .sm\\:flex { - @media (639px >= width) { + @media (639px >= width) { + .sm\\:flex { display: flex; } } - .md\\:flex { - @media (767px >= width >= 668px), (width >= 868px) { + @media (767px >= width >= 668px), (width >= 868px) { + .md\\:flex { display: flex; } } - .xl\\:flex { - @media (1279px >= width >= 1024px) { + @media (1279px >= width >= 1024px) { + .xl\\:flex { display: flex; } } - .tall\\:flex { - @media (min-height: 800px) { + @media (min-height: 800px) { + .tall\\:flex { display: flex; } } - .print\\:items-end { - @media print { + @media print { + .print\\:items-end { align-items: flex-end; } } @@ -626,33 +588,29 @@ describe('complex screen configs', () => { ), ).toMatchInlineSnapshot(` " - .min-sm\\:flex { - @media (width >= 40rem) { + @media (width >= 40rem) { + .min-sm\\:flex { display: flex; } - } - .sm\\:flex { - @media (width >= 40rem) { + .sm\\:flex { display: flex; } } - .md\\:flex { - @media (width >= 48rem) { + @media (width >= 48rem) { + .md\\:flex { display: flex; } - } - .min-md\\:flex { - @media (width >= 48rem) { + .min-md\\:flex { display: flex; } } - .portrait\\:flex { - @media screen and (orientation: portrait) { + @media screen and (orientation: portrait) { + .portrait\\:flex { display: flex; } } - .print\\:items-end { - @media print { + @media print { + .print\\:items-end { align-items: flex-end; } } diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index ffd463ddf224..2a255a3c8bfc 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -204,7 +204,9 @@ describe('--theme(…)', () => { } .red { color: color-mix(in srgb, #f00 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .red { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -641,7 +643,9 @@ describe('theme(…)', () => { " .red { color: #f00; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .red { color: color-mix(in oklab, #f00 var(--opacity), transparent); } } @@ -664,7 +668,9 @@ describe('theme(…)', () => { " .red { color: #f00; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .red { color: color-mix(in oklab, #f00 var(--opacity,50%), transparent); } } @@ -1090,8 +1096,8 @@ describe('theme(…)', () => { ), ).toMatchInlineSnapshot(` " - .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] { - @media (width >= 40rem) { + @media (width >= 40rem) { + .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] { --color: #f00; } } diff --git a/packages/tailwindcss/src/important.test.ts b/packages/tailwindcss/src/important.test.ts index 91fcef921b71..88baf62d7da6 100644 --- a/packages/tailwindcss/src/important.test.ts +++ b/packages/tailwindcss/src/important.test.ts @@ -16,16 +16,12 @@ test('Utilities can be wrapped in a selector', async () => { ), ).toMatchInlineSnapshot(` " - #app { - .underline { - text-decoration-line: underline; - } - .hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; - } - } + #app .underline { + text-decoration-line: underline; + } + @media (hover: hover) { + :is(#app .hover\\:line-through):hover { + text-decoration-line: line-through; } } " @@ -53,11 +49,9 @@ test('Utilities can be marked with important', async () => { .underline { text-decoration-line: underline !important; } - .hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through !important; - } + @media (hover: hover) { + .hover\\:line-through:hover { + text-decoration-line: line-through !important; } } " @@ -80,16 +74,12 @@ test('Utilities can be wrapped with a selector and marked as important', async ( ), ).toMatchInlineSnapshot(` " - #app { - .underline { - text-decoration-line: underline !important; - } - .hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through !important; - } - } + #app .underline { + text-decoration-line: underline !important; + } + @media (hover: hover) { + :is(#app .hover\\:line-through):hover { + text-decoration-line: line-through !important; } } " diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 021d7044ee7a..0a5df42681f5 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -34,20 +34,18 @@ describe('compiling CSS', () => { .flex { display: flex; } - .hover\\:underline { - &:hover { - @media (hover: hover) { - text-decoration-line: underline; - } + @media (hover: hover) { + .hover\\:underline:hover { + text-decoration-line: underline; } } - .md\\:grid { - @media (width >= 768px) { + @media (width >= 768px) { + .md\\:grid { display: grid; } } - .dark\\:bg-black { - @media (prefers-color-scheme: dark) { + @media (prefers-color-scheme: dark) { + .dark\\:bg-black { background-color: var(--color-black); } } @@ -260,7 +258,9 @@ describe('arbitrary properties', () => { " .\\[color\\:var\\(--my-color\\)\\]\\/50 { color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .\\[color\\:var\\(--my-color\\)\\]\\/50 { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -413,19 +413,23 @@ describe('@apply', () => { animation: var(--animate-spin); background-color: var(--color-red-500); text-decoration-line: underline; - &:hover { - @media (hover: hover) { - background-color: var(--color-blue-500); - } + } + @media (hover: hover) { + .foo:hover { + background-color: var(--color-blue-500); } - @media (width >= 768px) { + } + @media (width >= 768px) { + .foo { background-color: var(--color-green-500); } - &:hover:focus { - background-color: var(--color-red-200); - @media (width >= 768px) { - background-color: var(--color-green-200); - } + } + .foo:hover:focus { + background-color: var(--color-red-200); + } + @media (width >= 768px) { + .foo:hover:focus { + background-color: var(--color-green-200); } } @property --tw-translate-x { @@ -649,13 +653,11 @@ describe('@apply', () => { `), ).toMatchInlineSnapshot(` " - .foo { - &:before { - content: 'bar'; - } - &:after { - content: 'baz'; - } + .foo:before { + content: 'bar'; + } + .foo:after { + content: 'baz'; } " `) @@ -693,15 +695,11 @@ describe('@apply', () => { ), ).toMatchInlineSnapshot(` " - .a { - &:focus { - display: flex !important; - } + .a:focus { + display: flex !important; } - .b { - &:focus { - display: flex !important; - } + .b:focus { + display: flex !important; } .c { display: flex !important; @@ -713,10 +711,8 @@ describe('@apply', () => { display: flex; } @layer base { - body { - &:focus { - display: flex !important; - } + body:focus { + display: flex !important; } } " @@ -750,9 +746,9 @@ describe('@apply', () => { } .ignore-me { text-decoration-line: underline; - div { - display: flex; - } + } + .ignore-me div { + display: flex; } " `) @@ -800,30 +796,30 @@ describe('@apply', () => { } .test { background-color: var(--color-green-500); - &:hover { - background-color: var(--color-red-500); - } - &:disabled { - background-color: var(--color-indigo-500); - } + } + .test:hover { + background-color: var(--color-red-500); + } + .test:disabled { + background-color: var(--color-indigo-500); } .test2 { background-color: var(--color-green-500); - &:hover { - background-color: var(--color-red-500); - } - &:disabled { - background-color: var(--color-indigo-500); - } + } + .test2:hover { + background-color: var(--color-red-500); + } + .test2:disabled { + background-color: var(--color-indigo-500); } .foo { background-color: var(--color-green-500); - &:hover { - background-color: var(--color-red-500); - } - &:disabled { - background-color: var(--color-indigo-500); - } + } + .foo:hover { + background-color: var(--color-red-500); + } + .foo:disabled { + background-color: var(--color-indigo-500); } " `) @@ -962,10 +958,8 @@ describe('arbitrary variants', () => { it('should generate arbitrary variants', async () => { expect(await run(['[&_p]:flex'])).toMatchInlineSnapshot(` " - .\\[\\&_p\\]\\:flex { - & p { - display: flex; - } + .\\[\\&_p\\]\\:flex p { + display: flex; } " `) @@ -974,8 +968,8 @@ describe('arbitrary variants', () => { it('should generate arbitrary at-rule variants', async () => { expect(await run(['[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(` " - .\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex { - @media (width>=123px) { + @media (width>=123px) { + .\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex { display: flex; } } @@ -992,13 +986,9 @@ describe('variant stacking', () => { it('should stack simple variants', async () => { expect(await run(['focus:hover:flex'])).toMatchInlineSnapshot(` " - .focus\\:hover\\:flex { - &:focus { - &:hover { - @media (hover: hover) { - display: flex; - } - } + @media (hover: hover) { + :is(.focus\\:hover\\:flex:focus):hover { + display: flex; } } " @@ -1008,13 +998,9 @@ describe('variant stacking', () => { it('should stack arbitrary variants and simple variants', async () => { expect(await run(['[&_p]:hover:flex'])).toMatchInlineSnapshot(` " - .\\[\\&_p\\]\\:hover\\:flex { - & p { - &:hover { - @media (hover: hover) { - display: flex; - } - } + @media (hover: hover) { + :is(.\\[\\&_p\\]\\:hover\\:flex p):hover { + display: flex; } } " @@ -1024,11 +1010,9 @@ describe('variant stacking', () => { it('should stack multiple arbitrary variants', async () => { expect(await run(['[&_p]:[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(` " - .\\[\\&_p\\]\\:\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex { - & p { - @media (width>=123px) { - display: flex; - } + @media (width>=123px) { + .\\[\\&_p\\]\\:\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex p { + display: flex; } } " @@ -1039,24 +1023,16 @@ describe('variant stacking', () => { expect(await run(['before:hover:flex', 'hover:before:flex'])).toMatchInlineSnapshot(` " @layer properties; - .before\\:hover\\:flex { - &::before { - content: var(--tw-content); - &:hover { - @media (hover: hover) { - display: flex; - } - } - } + .before\\:hover\\:flex::before { + content: var(--tw-content); } - .hover\\:before\\:flex { - &:hover { - @media (hover: hover) { - &::before { - content: var(--tw-content); - display: flex; - } - } + @media (hover: hover) { + :is(.before\\:hover\\:flex::before):hover { + display: flex; + } + :is(.hover\\:before\\:flex:hover)::before { + content: var(--tw-content); + display: flex; } } @property --tw-content { @@ -1228,12 +1204,10 @@ describe('sorting', () => { .gap-4 { gap: var(--spacing-4); } - .space-x-2 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(var(--spacing-2) * var(--tw-space-x-reverse)); - margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse))); - } + :where(.space-x-2 > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(var(--spacing-2) * var(--tw-space-x-reverse)); + margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse))); } @property --tw-space-x-reverse { syntax: "*"; @@ -1346,17 +1320,13 @@ describe('sorting', () => { .flex { display: flex; } - .hover\\:flex { - &:hover { - @media (hover: hover) { - display: flex; - } + @media (hover: hover) { + .hover\\:flex:hover { + display: flex; } } - .focus\\:pointer-events-none { - &:focus { - pointer-events: none; - } + .focus\\:pointer-events-none:focus { + pointer-events: none; } " `) @@ -1389,32 +1359,22 @@ describe('sorting', () => { .flex { display: flex; } - .hover\\:flex { - &:hover { - @media (hover: hover) { - display: flex; - } - } - } - .focus\\:flex { - &:focus { + @media (hover: hover) { + .hover\\:flex:hover { display: flex; } } - .hover\\:focus\\:flex { - &:hover { - @media (hover: hover) { - &:focus { - display: flex; - } - } - } + .focus\\:flex:focus { + display: flex; } - .disabled\\:flex { - &:disabled { + @media (hover: hover) { + :is(.hover\\:focus\\:flex:hover):focus { display: flex; } } + .disabled\\:flex:disabled { + display: flex; + } " `) }) @@ -1445,107 +1405,53 @@ describe('sorting', () => { ), ).toMatchInlineSnapshot(` " - .group-hover\\:flex { - &:is(:where(.group):hover *) { - @media (hover: hover) { - display: flex; - } + @media (hover: hover) { + .group-hover\\:flex:is(:where(.group):hover *) { + display: flex; } } - .group-focus\\:flex { - &:is(:where(.group):focus *) { + .group-focus\\:flex:is(:where(.group):focus *) { + display: flex; + } + @media (hover: hover) { + .peer-hover\\:flex:is(:where(.peer):hover ~ *) { display: flex; } - } - .peer-hover\\:flex { - &:is(:where(.peer):hover ~ *) { - @media (hover: hover) { + @media (hover: hover) { + :is(.group-hover\\:peer-hover\\:flex:is(:where(.group):hover *)):is(:where(.peer):hover ~ *) { display: flex; } - } - } - .group-hover\\:peer-hover\\:flex { - &:is(:where(.group):hover *) { - @media (hover: hover) { - &:is(:where(.peer):hover ~ *) { - @media (hover: hover) { - display: flex; - } - } + :is(.peer-hover\\:group-hover\\:flex:is(:where(.peer):hover ~ *)):is(:where(.group):hover *) { + display: flex; } } - } - .peer-hover\\:group-hover\\:flex { - &:is(:where(.peer):hover ~ *) { - @media (hover: hover) { - &:is(:where(.group):hover *) { - @media (hover: hover) { - display: flex; - } - } - } + :is(.group-focus\\:peer-hover\\:flex:is(:where(.group):focus *)):is(:where(.peer):hover ~ *) { + display: flex; } - } - .group-focus\\:peer-hover\\:flex { - &:is(:where(.group):focus *) { - &:is(:where(.peer):hover ~ *) { - @media (hover: hover) { - display: flex; - } - } + :is(.peer-hover\\:group-focus\\:flex:is(:where(.peer):hover ~ *)):is(:where(.group):focus *) { + display: flex; } } - .peer-hover\\:group-focus\\:flex { - &:is(:where(.peer):hover ~ *) { - @media (hover: hover) { - &:is(:where(.group):focus *) { - display: flex; - } - } - } + .peer-focus\\:flex:is(:where(.peer):focus ~ *) { + display: flex; } - .peer-focus\\:flex { - &:is(:where(.peer):focus ~ *) { + @media (hover: hover) { + :is(.group-hover\\:peer-focus\\:flex:is(:where(.group):hover *)):is(:where(.peer):focus ~ *) { display: flex; } - } - .group-hover\\:peer-focus\\:flex { - &:is(:where(.group):hover *) { - @media (hover: hover) { - &:is(:where(.peer):focus ~ *) { - display: flex; - } - } - } - } - .peer-focus\\:group-hover\\:flex { - &:is(:where(.peer):focus ~ *) { - &:is(:where(.group):hover *) { - @media (hover: hover) { - display: flex; - } - } + :is(.peer-focus\\:group-hover\\:flex:is(:where(.peer):focus ~ *)):is(:where(.group):hover *) { + display: flex; } } - .group-focus\\:peer-focus\\:flex { - &:is(:where(.group):focus *) { - &:is(:where(.peer):focus ~ *) { - display: flex; - } - } + :is(.group-focus\\:peer-focus\\:flex:is(:where(.group):focus *)):is(:where(.peer):focus ~ *) { + display: flex; } - .peer-focus\\:group-focus\\:flex { - &:is(:where(.peer):focus ~ *) { - &:is(:where(.group):focus *) { - display: flex; - } - } + :is(.peer-focus\\:group-focus\\:flex:is(:where(.peer):focus ~ *)):is(:where(.group):focus *) { + display: flex; } - .hover\\:flex { - &:hover { - @media (hover: hover) { - display: flex; - } + @media (hover: hover) { + .hover\\:flex:hover { + display: flex; } } " @@ -3570,15 +3476,11 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex { - &:is(:is(:where(.group):hover, :where(.group):focus) *) { - display: flex; - } + .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { + display: flex; } - .hocus\\:underline { - &:hover, &:focus { - text-decoration-line: underline; - } + .hocus\\:underline:hover, .hocus\\:underline:focus { + text-decoration-line: underline; } } " @@ -3608,21 +3510,17 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex { - &:is(:where(.group):hover *) { - display: flex; - } - &:is(:where(.group):focus *) { - display: flex; - } + .group-hocus\\:flex:is(:where(.group):hover *) { + display: flex; } - .hocus\\:underline { - &:hover { - text-decoration-line: underline; - } - &:focus { - text-decoration-line: underline; - } + .group-hocus\\:flex:is(:where(.group):focus *) { + display: flex; + } + .hocus\\:underline:hover { + text-decoration-line: underline; + } + .hocus\\:underline:focus { + text-decoration-line: underline; } } " @@ -3655,21 +3553,17 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex { - &:is(:where(.group):hover *) { - display: flex; - } - &:is(:where(.group):focus *) { - display: flex; - } + .group-hocus\\:flex:is(:where(.group):hover *) { + display: flex; } - .hocus\\:underline { - &:hover { - text-decoration-line: underline; - } - &:focus { - text-decoration-line: underline; - } + .group-hocus\\:flex:is(:where(.group):focus *) { + display: flex; + } + .hocus\\:underline:hover { + text-decoration-line: underline; + } + .hocus\\:underline:focus { + text-decoration-line: underline; } } " @@ -3704,26 +3598,22 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex { - @media (hover: hover) { - &:is(:where(.group):hover *) { - display: flex; - } - } - &:is(:where(.group):focus *) { + @media (hover: hover) { + .group-hocus\\:flex:is(:where(.group):hover *) { display: flex; } } - .hocus\\:underline { - @media (hover: hover) { - &:hover { - text-decoration-line: underline; - } - } - &:focus { + .group-hocus\\:flex:is(:where(.group):focus *) { + display: flex; + } + @media (hover: hover) { + .hocus\\:underline:hover { text-decoration-line: underline; } } + .hocus\\:underline:focus { + text-decoration-line: underline; + } } " `) @@ -3760,12 +3650,12 @@ describe('plugins', () => { @layer utilities { .hocus\\:underline { --custom-property: @slot; - &:hover { - text-decoration-line: underline; - } - &:focus { - text-decoration-line: underline; - } + } + .hocus\\:underline:hover { + text-decoration-line: underline; + } + .hocus\\:underline:focus { + text-decoration-line: underline; } } " @@ -3797,18 +3687,14 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .rtl\\:flex { - &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { - display: flex; - } + .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + display: flex; } - .dark\\:flex { - &:is([data-theme=dark] *) { - display: flex; - } + .dark\\:flex:is([data-theme=dark] *) { + display: flex; } - .starting\\:flex { - @starting-style { + @starting-style { + .starting\\:flex { display: flex; } } @@ -4184,15 +4070,11 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex { - &:is(:is(:where(.group):hover, :where(.group):focus) *) { - display: flex; - } + .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { + display: flex; } - .hocus\\:underline { - &:hover, &:focus { - text-decoration-line: underline; - } + .hocus\\:underline:hover, .hocus\\:underline:focus { + text-decoration-line: underline; } } " @@ -4214,12 +4096,10 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .any-hover\\:hover\\:underline { - @media (any-hover: hover) { - &:hover { - @media (hover: hover) { - text-decoration-line: underline; - } + @media (any-hover: hover) { + @media (hover: hover) { + .any-hover\\:hover\\:underline:hover { + text-decoration-line: underline; } } } @@ -4243,21 +4123,17 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .cant-hover\\:focus\\:underline { - &:not(:hover), &:not(:active) { - &:focus { - text-decoration-line: underline; - } - } - @media not (any-hover: hover) { - &:focus { - text-decoration-line: underline; - } + :is(.cant-hover\\:focus\\:underline:not(:hover), .cant-hover\\:focus\\:underline:not(:active)):focus { + text-decoration-line: underline; + } + @media not (any-hover: hover) { + .cant-hover\\:focus\\:underline:focus { + text-decoration-line: underline; } - @media not (pointer: fine) { - &:focus { - text-decoration-line: underline; - } + } + @media not (pointer: fine) { + .cant-hover\\:focus\\:underline:focus { + text-decoration-line: underline; } } } @@ -4286,15 +4162,11 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-selected\\:underline { - &:is(:where(.group)[data-selected] *) { - text-decoration-line: underline; - } + .group-selected\\:underline:is(:where(.group)[data-selected] *) { + text-decoration-line: underline; } - .selected\\:underline { - &[data-selected] { - text-decoration-line: underline; - } + .selected\\:underline[data-selected] { + text-decoration-line: underline; } } " @@ -4321,15 +4193,11 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:underline { - &:is(:is(:where(.group):hover, :where(.group):focus) *) { - text-decoration-line: underline; - } + .group-hocus\\:underline:is(:is(:where(.group):hover, :where(.group):focus) *) { + text-decoration-line: underline; } - .hocus\\:underline { - &:hover, &:focus { - text-decoration-line: underline; - } + .hocus\\:underline:hover, .hocus\\:underline:focus { + text-decoration-line: underline; } } " @@ -4359,21 +4227,17 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:underline { - &:is(:where(.group):hover *) { - text-decoration-line: underline; - } - &:is(:where(.group):focus *) { - text-decoration-line: underline; - } + .group-hocus\\:underline:is(:where(.group):hover *) { + text-decoration-line: underline; } - .hocus\\:underline { - &:hover { - text-decoration-line: underline; - } - &:focus { - text-decoration-line: underline; - } + .group-hocus\\:underline:is(:where(.group):focus *) { + text-decoration-line: underline; + } + .hocus\\:underline:hover { + text-decoration-line: underline; + } + .hocus\\:underline:focus { + text-decoration-line: underline; } } " @@ -4404,9 +4268,9 @@ describe('@custom-variant', () => { @layer utilities { .custom-before\\:underline { --has-before: 1; - &::before { - text-decoration-line: underline; - } + } + .custom-before\\:underline::before { + text-decoration-line: underline; } } " @@ -4440,11 +4304,9 @@ describe('@custom-variant', () => { @layer utilities { .custom-before\\:underline { --has-before: 1; - &::before { - &:hover, &:focus { - text-decoration-line: underline; - } - } + } + :is(.custom-before\\:underline::before):hover, :is(.custom-before\\:underline::before):focus { + text-decoration-line: underline; } } " @@ -4476,26 +4338,22 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:underline { - &:is(:where(.group):hover *) { - @media (hover: hover) { - text-decoration-line: underline; - } - } - &:is(:where(.group):focus *) { + @media (hover: hover) { + .group-hocus\\:underline:is(:where(.group):hover *) { text-decoration-line: underline; } } - .hocus\\:underline { - &:hover { - @media (hover: hover) { - text-decoration-line: underline; - } - } - &:focus { + .group-hocus\\:underline:is(:where(.group):focus *) { + text-decoration-line: underline; + } + @media (hover: hover) { + .hocus\\:underline:hover { text-decoration-line: underline; } } + .hocus\\:underline:focus { + text-decoration-line: underline; + } } " `) @@ -4522,18 +4380,12 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:underline { - @media (hover: hover) { - &:is(:where(.group):hover *) { - text-decoration-line: underline; - } + @media (hover: hover) { + .group-hocus\\:underline:is(:where(.group):hover *) { + text-decoration-line: underline; } - } - .hocus\\:underline { - @media (hover: hover) { - &:hover { - text-decoration-line: underline; - } + .hocus\\:underline:hover { + text-decoration-line: underline; } } } @@ -4560,8 +4412,8 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .any-hover\\:underline { - @media (any-hover: hover) { + @media (any-hover: hover) { + .any-hover\\:underline { text-decoration-line: underline; } } @@ -4593,11 +4445,13 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .desktop\\:underline { - @media (any-hover: hover) { + @media (any-hover: hover) { + .desktop\\:underline { text-decoration-line: underline; } - @media (pointer: fine) { + } + @media (pointer: fine) { + .desktop\\:underline { text-decoration-line: underline; } } @@ -4631,12 +4485,14 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .custom-variant\\:underline { - @media (orientation: landscape) { - @media screen { + @media (orientation: landscape) { + @media screen { + .custom-variant\\:underline { text-decoration-line: underline; } - @media print { + } + @media print { + .custom-variant\\:underline { display: none; } } @@ -4668,14 +4524,14 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .custom-dark\\:underline { - @media (prefers-color-scheme: dark) { - text-decoration-line: underline; - } - &:is(.dark *) { + @media (prefers-color-scheme: dark) { + .custom-dark\\:underline { text-decoration-line: underline; } } + .custom-dark\\:underline:is(.dark *) { + text-decoration-line: underline; + } } " `) @@ -4698,18 +4554,14 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .rtl\\:flex { - &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { - display: flex; - } + .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + display: flex; } - .dark\\:flex { - &:is([data-theme='dark'] *) { - display: flex; - } + .dark\\:flex:is([data-theme='dark'] *) { + display: flex; } - .starting\\:flex { - @starting-style { + @starting-style { + .starting\\:flex { display: flex; } } @@ -4733,13 +4585,13 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .not-foo\\:flex { - @media not foo { + @media not foo { + .not-foo\\:flex { display: flex; } } - .foo\\:flex { - @media foo { + @media foo { + .foo\\:flex { display: flex; } } @@ -4766,13 +4618,9 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:flex { - &:hover { - @media (hover: hover) { - &:focus { - display: flex; - } - } + @media (hover: hover) { + :is(.hocus\\:flex:hover):focus { + display: flex; } } " @@ -4799,12 +4647,8 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:flex { - &:hover { - &:focus { - display: flex; - } - } + :is(.hocus\\:flex:hover):focus { + display: flex; } " `) @@ -4830,12 +4674,8 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:flex { - &:hover { - &:focus { - display: flex; - } - } + :is(.hocus\\:flex:hover):focus { + display: flex; } " `) @@ -4961,41 +4801,17 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .a\\:flex { - .a { - display: flex; - } + .a\\:flex .a { + display: flex; } - .b\\:flex { - .b { - .a { - .a-inside-b { - display: flex; - } - } - } + :is(:is(.b\\:flex .b) .a) .a-inside-b { + display: flex; } - .a\\:b\\:flex { - .a { - .b { - .a { - .a-inside-b { - display: flex; - } - } - } - } + :is(:is(:is(.a\\:b\\:flex .a) .b) .a) .a-inside-b { + display: flex; } - .b\\:a\\:flex { - .b { - .a { - .a-inside-b { - .a { - display: flex; - } - } - } - } + :is(:is(:is(.b\\:a\\:flex .b) .a) .a-inside-b) .a { + display: flex; } " `) @@ -5030,17 +4846,11 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:flex { - &:hover { - &:focus { - display: flex; - } - } - &[data-hover] { - &:focus { - display: flex; - } - } + :is(.hocus\\:flex:hover):focus { + display: flex; + } + :is(.hocus\\:flex[data-hover]):focus { + display: flex; } " `) @@ -5083,12 +4893,8 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .baz\\:flex { - &:active { - [data-broken-circle] & { - display: flex; - } - } + [data-broken-circle] :is(.baz\\:flex:active) { + display: flex; } " `) @@ -5300,20 +5106,18 @@ test('JS APIs support @variant', async () => { .underline { text-decoration-line: underline; } - .bar-one { - @media (prefers-color-scheme: dark) { + @media (prefers-color-scheme: dark) { + .bar-one { --bar: 1; } - } - .foo { - @media (prefers-color-scheme: dark) { + .foo { --foo: foo; } } } @layer base { - body { - @media (prefers-color-scheme: dark) { + @media (prefers-color-scheme: dark) { + body { color: red; } } @@ -5390,11 +5194,9 @@ describe('`@reference "…" imports`', () => { ), ).toMatchInlineSnapshot(` " - .bar { - @media (width >= 768px) { - &:hover, &:focus { - color: red; - } + @media (width >= 768px) { + .bar:hover, .bar:focus { + color: red; } } " @@ -5633,11 +5435,9 @@ describe('`@reference "…" imports`', () => { ), ).toMatchInlineSnapshot(` " - .bar { - @media (width >= 768px) { - &:hover, &:focus { - color: red; - } + @media (width >= 768px) { + .bar:hover, .bar:focus { + color: red; } } " @@ -5668,11 +5468,9 @@ describe('`@reference "…" imports`', () => { `), ).toMatchInlineSnapshot(` " - .bar { - @media (width >= 48rem) { - &:hover, &:focus { - color: red; - } + @media (width >= 48rem) { + .bar:hover, .bar:focus { + color: red; } } " @@ -5692,10 +5490,8 @@ describe('@variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:underline { - &:hover, &:focus { - text-decoration-line: underline; - } + .hocus\\:underline:hover, .hocus\\:underline:focus { + text-decoration-line: underline; } " `) @@ -5720,13 +5516,11 @@ describe('@variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:underline { - &:hover { - text-decoration-line: underline; - } - &:focus { - text-decoration-line: underline; - } + .hocus\\:underline:hover { + text-decoration-line: underline; + } + .hocus\\:underline:focus { + text-decoration-line: underline; } " `) @@ -5779,40 +5573,38 @@ describe('@variant', () => { " .btn { background: black; - @media (prefers-color-scheme: dark) { - background: white; - } } - &:hover { - @media (hover: hover) { - @media (orientation: landscape) { - .btn2 { - color: red; - } - } + @media (prefers-color-scheme: dark) { + .btn { + background: white; } } - &:hover { - @media (hover: hover) { - .foo { + @media (hover: hover) { + @media (orientation: landscape) { + :is(:scope:hover) .btn2 { color: red; } - @media (orientation: landscape) { - .bar { - color: blue; - } + } + :is(:scope:hover) .foo { + color: red; + } + @media (orientation: landscape) { + :is(:scope:hover) .bar { + color: blue; } - .baz { - @media (orientation: portrait) { - color: green; - } + } + @media (orientation: portrait) { + :is(:scope:hover) .baz { + color: green; } } } @media something { @media (orientation: landscape) { @page { - color: red; + :scope { + color: red; + } } } } @@ -5837,9 +5629,9 @@ describe('@variant', () => { " .btn { background: black; - &:hover, &:focus { - background: white; - } + } + .btn:hover, .btn:focus { + background: white; } " `) @@ -5866,18 +5658,12 @@ describe('@variant', () => { " .btn { background: black; - &:disabled { - &:focus { - background: white; - } - } } - .disabled\\:focus\\:underline { - &:disabled { - &:focus { - text-decoration-line: underline; - } - } + :is(.btn:disabled):focus { + background: white; + } + :is(.disabled\\:focus\\:underline:disabled):focus { + text-decoration-line: underline; } " `) @@ -5900,15 +5686,15 @@ describe('@variant', () => { " .btn { background: black; - &:hover { - @media (hover: hover) { - background: red; - } - } - &:focus { + } + @media (hover: hover) { + .btn:hover { background: red; } } + .btn:focus { + background: red; + } " `) @@ -5954,15 +5740,15 @@ describe('@variant', () => { " .btn { background: black; - &:hover { - @media (hover: hover) { - background: red; - } - } - &:focus { + } + @media (hover: hover) { + .btn:hover { background: red; } } + .btn:focus { + background: red; + } " `) }, @@ -5984,12 +5770,12 @@ describe('@variant', () => { " .btn { background: black; - &:is(:hover,:focus) { - background: red; - } - &:disabled { - background: red; - } + } + .btn:is(:hover, :focus) { + background: red; + } + .btn:disabled { + background: red; } " `) @@ -6015,26 +5801,26 @@ describe('@variant', () => { " .btn { background: black; - &:hover { - @media (hover: hover) { - background: red; - &:active { - background: blue; - } - &:disabled { - background: blue; - } - } - } - &:focus { + } + @media (hover: hover) { + .btn:hover { background: red; - &:active { - background: blue; - } - &:disabled { - background: blue; - } } + :is(.btn:hover):active { + background: blue; + } + :is(.btn:hover):disabled { + background: blue; + } + } + .btn:focus { + background: red; + } + :is(.btn:focus):active { + background: blue; + } + :is(.btn:focus):disabled { + background: blue; } " `) @@ -6125,12 +5911,10 @@ describe('@variant', () => { " .btn { background: black; - &:hover { - @media (hover: hover) { - &:focus { - background: red; - } - } + } + @media (hover: hover) { + :is(.btn:hover):focus { + background: red; } } " @@ -6153,17 +5937,15 @@ describe('@variant', () => { " .btn { background: black; - &:hover { - @media (hover: hover) { - &:focus { - background: red; - } - } - } - &:disabled { + } + @media (hover: hover) { + :is(.btn:hover):focus { background: red; } } + .btn:disabled { + background: red; + } " `) }) @@ -6184,17 +5966,13 @@ describe('@variant', () => { " .btn { background: black; - &:is(:hover,:focus) { - &:disabled { - background: red; - } - } - &[aria-disabled="true"] { - &:hover { - @media (hover: hover) { - background: red; - } - } + } + :is(.btn:is(:hover, :focus)):disabled { + background: red; + } + @media (hover: hover) { + :is(.btn[aria-disabled="true"]):hover { + background: red; } } " @@ -6222,30 +6000,24 @@ describe('@variant', () => { " .btn { background: black; - &[data-a] { - background: red; - &[data-d] { - background: blue; - } - &[data-e] { - &[data-f] { - background: blue; - } - } - } - &[data-b] { - &[data-c] { - background: red; - &[data-d] { - background: blue; - } - &[data-e] { - &[data-f] { - background: blue; - } - } - } - } + } + .btn[data-a] { + background: red; + } + :is(.btn[data-a])[data-d] { + background: blue; + } + :is(:is(.btn[data-a])[data-e])[data-f] { + background: blue; + } + :is(.btn[data-b])[data-c] { + background: red; + } + :is(:is(.btn[data-b])[data-c])[data-d] { + background: blue; + } + :is(:is(:is(.btn[data-b])[data-c])[data-e])[data-f] { + background: blue; } " `) @@ -6311,10 +6083,10 @@ describe('@variant', () => { " .btn { background: black; - @container (width >= 768px) { - &.foo { - background: white; - } + } + @container (width >= 768px) { + .btn.foo { + background: white; } } " @@ -6341,7 +6113,9 @@ describe('`color-mix(…)` polyfill', () => { } .text-red-500\\/50 { color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red-500\\/50 { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -6369,7 +6143,9 @@ describe('`color-mix(…)` polyfill', () => { } .text-red\\/50 { color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red\\/50 { color: color-mix(in oklab, var(--color-red) 50%, transparent); } } @@ -6397,7 +6173,9 @@ describe('`color-mix(…)` polyfill', () => { } .mixed { color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, oklch(70.5% 0.213 47.604)); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .mixed { color: color-mix(in lch, var(--color-red-500) 50%, var(--color-orange-500)); } } @@ -6427,7 +6205,9 @@ describe('`color-mix(…)` polyfill', () => { } .stacked { color: color-mix( in lch, color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent) 50%, transparent ); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stacked { color: color-mix( in lch, color-mix(in lch, var(--color-red-500) 50%, transparent) 50%, transparent ); } } @@ -6460,7 +6240,9 @@ describe('`color-mix(…)` polyfill', () => { } .gradient { background: linear-gradient( 90deg, color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent) 0%, color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent) 0%, 100% ); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .gradient { background: linear-gradient( 90deg, color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%, color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%, 100% ); } } @@ -6489,7 +6271,9 @@ describe('`color-mix(…)` polyfill', () => { } .text-red-500\\/50 { color: color-mix(in srgb,oklch(63.7% 0.237 25.331)50%,transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red-500\\/50 { color: color-mix(in oklab,var(--color-red-500)50%,transparent); } } @@ -6515,19 +6299,25 @@ describe('`color-mix(…)` polyfill', () => { } .text-\\(--my-color\\)\\/\\(--my-opacity\\) { color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-\\(--my-color\\)\\/\\(--my-opacity\\) { color: color-mix(in oklab, var(--my-color) var(--my-opacity), transparent); } } .text-\\(--my-color\\)\\/50 { color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-\\(--my-color\\)\\/50 { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .text-red-500\\/\\(--my-opacity\\) { color: oklch(63.7% 0.237 25.331); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red-500\\/\\(--my-opacity\\) { color: color-mix(in oklab, var(--color-red-500) var(--my-opacity), transparent); } } @@ -6540,7 +6330,9 @@ describe('`color-mix(…)` polyfill', () => { " .text-current\\/50 { color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-current\\/50 { color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -6563,7 +6355,9 @@ describe('`color-mix(…)` polyfill', () => { " .text-red\\/50 { color: var(--color-red); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red\\/50 { color: color-mix(in oklab, var(--color-red) 50%, transparent); } } @@ -6591,7 +6385,9 @@ describe('`color-mix(…)` polyfill', () => { " .stacked { color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stacked { color: color-mix( in oklab, color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent) var(--my-outer-opacity), transparent ); } } @@ -6639,7 +6435,9 @@ describe('`color-mix(…)` polyfill', () => { } .text-red-500\\/\\(--my-half\\) { color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red-500\\/\\(--my-half\\) { color: color-mix(in oklab, var(--color-red-500) var(--my-half), transparent); } } @@ -6679,9 +6477,13 @@ describe('`color-mix(…)` polyfill', () => { } .shadow-xl { --tw-shadow: 0 6px 18px 4px var(--tw-shadow-color, color-mix(in srgb, red 25%, transparent)); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-xl { --tw-shadow: 0 6px 18px 4px var(--tw-shadow-color, color-mix(in oklab, var(--color-red-500) 25%, transparent)); } + } + .shadow-xl { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } @property --tw-shadow { @@ -6788,8 +6590,8 @@ describe('`color-mix(…)` polyfill', () => { ), ).toMatchInlineSnapshot(` " - .mixed { - @supports (color: color-mix(in lab, red, red)) { + @supports (color: color-mix(in lab, red, red)) { + .mixed { background: color-mix(in oklab, var(--color-1), var(--color-2) 0%); } } diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index 17e11f4feec6..5f76939e2e97 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -213,11 +213,9 @@ test('Utilities do not show wrapping selector in intellisense', async () => { text-decoration-line: underline; } ", - ".hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; - } + "@media (hover: hover) { + .hover\\:line-through:hover { + text-decoration-line: line-through; } } ", @@ -244,11 +242,9 @@ test('Utilities, when marked as important, show as important in intellisense', a text-decoration-line: underline !important; } ", - ".hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through !important; - } + "@media (hover: hover) { + .hover\\:line-through:hover { + text-decoration-line: line-through !important; } } ", diff --git a/packages/tailwindcss/src/prefix.test.ts b/packages/tailwindcss/src/prefix.test.ts index 0436d73f5746..00d6bc27b830 100644 --- a/packages/tailwindcss/src/prefix.test.ts +++ b/packages/tailwindcss/src/prefix.test.ts @@ -35,25 +35,15 @@ test('utilities must be prefixed', async () => { .tw\\:underline { text-decoration-line: underline; } - .tw\\:group-hover\\:flex { - &:is(:where(.tw\\:group):hover *) { - @media (hover: hover) { - display: flex; - } + @media (hover: hover) { + .tw\\:group-hover\\:flex:is(:where(.tw\\:group):hover *) { + display: flex; } - } - .tw\\:peer-hover\\:flex { - &:is(:where(.tw\\:peer):hover ~ *) { - @media (hover: hover) { - display: flex; - } + .tw\\:peer-hover\\:flex:is(:where(.tw\\:peer):hover ~ *) { + display: flex; } - } - .tw\\:hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; - } + .tw\\:hover\\:line-through:hover { + text-decoration-line: line-through; } } " @@ -248,11 +238,9 @@ test('a prefix can be configured via @import theme(…)', async () => { .tw\\:underline { text-decoration-line: underline; } - .tw\\:hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; - } + @media (hover: hover) { + .tw\\:hover\\:line-through:hover { + text-decoration-line: line-through; } } " @@ -306,11 +294,9 @@ test('a prefix can be configured via @import prefix(…)', async () => { .tw\\:underline { text-decoration-line: underline; } - .tw\\:hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; - } + @media (hover: hover) { + .tw\\:hover\\:line-through:hover { + text-decoration-line: line-through; } } " diff --git a/packages/tailwindcss/src/source-maps/source-map.test.ts b/packages/tailwindcss/src/source-maps/source-map.test.ts index 25399e843898..8f12d9e205c2 100644 --- a/packages/tailwindcss/src/source-maps/source-map.test.ts +++ b/packages/tailwindcss/src/source-maps/source-map.test.ts @@ -115,12 +115,16 @@ test('source maps trace back to @import location', async ({ expect }) => { 2 @layer theme { | 3 @import './theme.css' layer(theme); ^^^^^^^^^^^^^ B @ 2:0-13 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ B @ 3:0-34 | --- theme.css --- - 3 :root, :host { | 1 @theme default { - ^^^^^^^^^^^^^ C @ 3:2-15 | ^^^^^^^^^^^^^^^ C @ 1:0-15 - 4 --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'... | 2 --font-sans: - ^ D @ 4:4 | ^ D @ 2:2 - 4 --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'... | 3 ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI S... - ^ E @ 4:4 | ^ E @ 3:0 + 3 :root, :host { | 2 --font-sans: + ^ C @ 3:2 | ^ C @ 2:2 + 3 :root, :host { | 3 ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI S... + ^ D @ 3:2 | ^ D @ 3:0 + 3 :root, :host { | 4 'Noto Color Emoji'; + ^^^^^^^^^^^^^ E @ 3:2-15 | ^^^^^^^^^^^^^^^^^^^^^^ E @ 4:0-22 + 4 --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'... | + ^ C @ 4:4 | + 4 --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'... | + ^ D @ 4:4 | 4 --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'... | 4 'Noto Color Emoji'; ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... F @ 4:4-5:0 | ^ F @ 4:0 5 'Noto Color Emoji'; | 4 'Noto Color Emoji'; @@ -146,431 +150,375 @@ test('source maps trace back to @import location', async ({ expect }) => { 12 @layer base { | 4 @import './preflight.css' layer(base); ^^^^^^^^^^^^ N @ 12:0-12 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ N @ 4:0-37 | --- preflight.css --- - 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 7 *, - ^ O @ 13:2 | ^ O @ 7:0 - 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 8 ::after, - ^ P @ 13:2 | ^ P @ 8:0 - 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 9 ::before, - ^ Q @ 13:2 | ^ Q @ 9:0 - 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 10 ::backdrop, - ^ R @ 13:2 | ^ R @ 10:0 - 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 11 ::file-selector-button { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ S @ 13:2-59 | ^^^^^^^^^^^^^^^^^^^^^^^ S @ 11:0-23 - 14 box-sizing: border-box; | 12 box-sizing: border-box; /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^ T @ 14:4-26 | ^^^^^^^^^^^^^^^^^^^^^^ T @ 12:2-24 + 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 12 box-sizing: border-box; /* 1 */ + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ O @ 13:2-59 | ^^^^^^^^^^^^^^^^^^^^^^ O @ 12:2-24 + 14 box-sizing: border-box; | + ^^^^^^^^^^^^^^^^^^^^^^ O @ 14:4-26 | 15 margin: 0; | 13 margin: 0; /* 2 */ - ^^^^^^^^^ U @ 15:4-13 | ^^^^^^^^^ U @ 13:2-11 + ^^^^^^^^^ P @ 15:4-13 | ^^^^^^^^^ P @ 13:2-11 16 padding: 0; | 14 padding: 0; /* 2 */ - ^^^^^^^^^^ V @ 16:4-14 | ^^^^^^^^^^ V @ 14:2-12 + ^^^^^^^^^^ Q @ 16:4-14 | ^^^^^^^^^^ Q @ 14:2-12 17 border: 0 solid; | 15 border: 0 solid; /* 3 */ - ^^^^^^^^^^^^^^^ W @ 17:4-19 | ^^^^^^^^^^^^^^^ W @ 15:2-17 + ^^^^^^^^^^^^^^^ R @ 17:4-19 | ^^^^^^^^^^^^^^^ R @ 15:2-17 | 16 } 18 } | - 19 html, :host { | 28 html, - ^ X @ 19:2 | ^ X @ 28:0 - 19 html, :host { | 29 :host { - ^^^^^^^^^^^^ Y @ 19:2-14 | ^^^^^^ Y @ 29:0-6 - 20 line-height: 1.5; | 30 line-height: 1.5; /* 1 */ - ^^^^^^^^^^^^^^^^ Z @ 20:4-20 | ^^^^^^^^^^^^^^^^ Z @ 30:2-18 + 19 html, :host { | 30 line-height: 1.5; /* 1 */ + ^^^^^^^^^^^^ S @ 19:2-14 | ^^^^^^^^^^^^^^^^ S @ 30:2-18 + 20 line-height: 1.5; | + ^^^^^^^^^^^^^^^^ S @ 20:4-20 | 21 -webkit-text-size-adjust: 100%; | 31 -webkit-text-size-adjust: 100%; /* 2 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AA @ 21:4-34 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AA @ 31:2-32 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ T @ 21:4-34 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ T @ 31:2-32 22 tab-size: 4; | 32 tab-size: 4; /* 3 */ - ^^^^^^^^^^^ AB @ 22:4-15 | ^^^^^^^^^^^ AB @ 32:2-13 + ^^^^^^^^^^^ U @ 22:4-15 | ^^^^^^^^^^^ U @ 32:2-13 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 33 font-family: --theme( - ^ AC @ 23:4 | ^ AC @ 33:2 + ^ V @ 23:4 | ^ V @ 33:2 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 34 --default-font-family, - ^ AD @ 23:4 | ^ AD @ 34:0 + ^ W @ 23:4 | ^ W @ 34:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 35 ui-sans-serif, - ^ AE @ 23:4 | ^ AE @ 35:0 + ^ X @ 23:4 | ^ X @ 35:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 36 system-ui, - ^ AF @ 23:4 | ^ AF @ 36:0 + ^ Y @ 23:4 | ^ Y @ 36:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 37 sans-serif, - ^ AG @ 23:4 | ^ AG @ 37:0 + ^ Z @ 23:4 | ^ Z @ 37:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 38 'Apple Color Emoji', - ^ AH @ 23:4 | ^ AH @ 38:0 + ^ AA @ 23:4 | ^ AA @ 38:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 39 'Segoe UI Emoji', - ^ AI @ 23:4 | ^ AI @ 39:0 + ^ AB @ 23:4 | ^ AB @ 39:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 40 'Segoe UI Symbol', - ^ AJ @ 23:4 | ^ AJ @ 40:0 + ^ AC @ 23:4 | ^ AC @ 40:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 41 'Noto Color Emoji' - ^ AK @ 23:4 | ^ AK @ 41:0 + ^ AD @ 23:4 | ^ AD @ 41:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 42 ); /* 4 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... AL @ 23:4-159 | ^^^ AL @ 42:0-3 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... AE @ 23:4-159 | ^^^ AE @ 42:0-3 24 font-feature-settings: var(--default-font-feature-settings, normal); | 43 font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AM @ 24:4-71 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AM @ 43:2-73 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AF @ 24:4-71 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AF @ 43:2-73 25 font-variation-settings: var(--default-font-variation-settings, normal); | 44 font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AN @ 25:4-75 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AN @ 44:2-77 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AG @ 25:4-75 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AG @ 44:2-77 26 -webkit-tap-highlight-color: transparent; | 45 -webkit-tap-highlight-color: transparent; /* 7 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AO @ 26:4-44 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AO @ 45:2-42 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AH @ 26:4-44 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AH @ 45:2-42 | 46 } 27 } | - 28 hr { | 54 hr { - ^^^ AP @ 28:2-5 | ^^^ AP @ 54:0-3 - 29 height: 0; | 55 height: 0; /* 1 */ - ^^^^^^^^^ AQ @ 29:4-13 | ^^^^^^^^^ AQ @ 55:2-11 + 28 hr { | 55 height: 0; /* 1 */ + ^^^ AI @ 28:2-5 | ^^^^^^^^^ AI @ 55:2-11 + 29 height: 0; | + ^^^^^^^^^ AI @ 29:4-13 | 30 color: inherit; | 56 color: inherit; /* 2 */ - ^^^^^^^^^^^^^^ AR @ 30:4-18 | ^^^^^^^^^^^^^^ AR @ 56:2-16 + ^^^^^^^^^^^^^^ AJ @ 30:4-18 | ^^^^^^^^^^^^^^ AJ @ 56:2-16 31 border-top-width: 1px; | 57 border-top-width: 1px; /* 3 */ - ^^^^^^^^^^^^^^^^^^^^^ AS @ 31:4-25 | ^^^^^^^^^^^^^^^^^^^^^ AS @ 57:2-23 + ^^^^^^^^^^^^^^^^^^^^^ AK @ 31:4-25 | ^^^^^^^^^^^^^^^^^^^^^ AK @ 57:2-23 | 58 } 32 } | - 33 abbr:where([title]) { | 64 abbr:where([title]) { - ^^^^^^^^^^^^^^^^^^^^ AT @ 33:2-22 | ^^^^^^^^^^^^^^^^^^^^ AT @ 64:0-20 - 34 -webkit-text-decoration: underline dotted; | 65 -webkit-text-decoration: underline dotted; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AU @ 34:4-45 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AU @ 65:2-43 + 33 abbr:where([title]) { | 65 -webkit-text-decoration: underline dotted; + ^^^^^^^^^^^^^^^^^^^^ AL @ 33:2-22 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AL @ 65:2-43 + 34 -webkit-text-decoration: underline dotted; | + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AL @ 34:4-45 | 35 text-decoration: underline dotted; | 66 text-decoration: underline dotted; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AV @ 35:4-37 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AV @ 66:2-35 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AM @ 35:4-37 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AM @ 66:2-35 | 67 } 36 } | - 37 h1, h2, h3, h4, h5, h6 { | 73 h1, - ^ AW @ 37:2 | ^ AW @ 73:0 - 37 h1, h2, h3, h4, h5, h6 { | 74 h2, - ^ AX @ 37:2 | ^ AX @ 74:0 - 37 h1, h2, h3, h4, h5, h6 { | 75 h3, - ^ AY @ 37:2 | ^ AY @ 75:0 - 37 h1, h2, h3, h4, h5, h6 { | 76 h4, - ^ AZ @ 37:2 | ^ AZ @ 76:0 - 37 h1, h2, h3, h4, h5, h6 { | 77 h5, - ^ BA @ 37:2 | ^ BA @ 77:0 - 37 h1, h2, h3, h4, h5, h6 { | 78 h6 { - ^^^^^^^^^^^^^^^^^^^^^^^ BB @ 37:2-25 | ^^^ BB @ 78:0-3 - 38 font-size: inherit; | 79 font-size: inherit; - ^^^^^^^^^^^^^^^^^^ BC @ 38:4-22 | ^^^^^^^^^^^^^^^^^^ BC @ 79:2-20 + 37 h1, h2, h3, h4, h5, h6 { | 79 font-size: inherit; + ^^^^^^^^^^^^^^^^^^^^^^^ AN @ 37:2-25 | ^^^^^^^^^^^^^^^^^^ AN @ 79:2-20 + 38 font-size: inherit; | + ^^^^^^^^^^^^^^^^^^ AN @ 38:4-22 | 39 font-weight: inherit; | 80 font-weight: inherit; - ^^^^^^^^^^^^^^^^^^^^ BD @ 39:4-24 | ^^^^^^^^^^^^^^^^^^^^ BD @ 80:2-22 + ^^^^^^^^^^^^^^^^^^^^ AO @ 39:4-24 | ^^^^^^^^^^^^^^^^^^^^ AO @ 80:2-22 | 81 } 40 } | - 41 a { | 87 a { - ^^ BE @ 41:2-4 | ^^ BE @ 87:0-2 - 42 color: inherit; | 88 color: inherit; - ^^^^^^^^^^^^^^ BF @ 42:4-18 | ^^^^^^^^^^^^^^ BF @ 88:2-16 + 41 a { | 88 color: inherit; + ^^ AP @ 41:2-4 | ^^^^^^^^^^^^^^ AP @ 88:2-16 + 42 color: inherit; | + ^^^^^^^^^^^^^^ AP @ 42:4-18 | 43 -webkit-text-decoration: inherit; | 89 -webkit-text-decoration: inherit; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BG @ 43:4-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BG @ 89:2-34 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AQ @ 43:4-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AQ @ 89:2-34 44 text-decoration: inherit; | 90 text-decoration: inherit; - ^^^^^^^^^^^^^^^^^^^^^^^^ BH @ 44:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ BH @ 90:2-26 + ^^^^^^^^^^^^^^^^^^^^^^^^ AR @ 44:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ AR @ 90:2-26 | 91 } 45 } | - 46 b, strong { | 97 b, - ^ BI @ 46:2 | ^ BI @ 97:0 - 46 b, strong { | 98 strong { - ^^^^^^^^^^ BJ @ 46:2-12 | ^^^^^^^ BJ @ 98:0-7 - 47 font-weight: bolder; | 99 font-weight: bolder; - ^^^^^^^^^^^^^^^^^^^ BK @ 47:4-23 | ^^^^^^^^^^^^^^^^^^^ BK @ 99:2-21 + 46 b, strong { | 99 font-weight: bolder; + ^^^^^^^^^^ AS @ 46:2-12 | ^^^^^^^^^^^^^^^^^^^ AS @ 99:2-21 | 100 } + 47 font-weight: bolder; | + ^^^^^^^^^^^^^^^^^^^ AS @ 47:4-23 | 48 } | - 49 code, kbd, samp, pre { | 109 code, - ^ BL @ 49:2 | ^ BL @ 109:0 - 49 code, kbd, samp, pre { | 110 kbd, - ^ BM @ 49:2 | ^ BM @ 110:0 - 49 code, kbd, samp, pre { | 111 samp, - ^ BN @ 49:2 | ^ BN @ 111:0 - 49 code, kbd, samp, pre { | 112 pre { - ^^^^^^^^^^^^^^^^^^^^^ BO @ 49:2-23 | ^^^^ BO @ 112:0-4 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 113 font-family: --theme( - ^ BP @ 50:4 | ^ BP @ 113:2 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 114 --default-mono-font-family, - ^ BQ @ 50:4 | ^ BQ @ 114:0 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 115 ui-monospace, - ^ BR @ 50:4 | ^ BR @ 115:0 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 116 SFMono-Regular, - ^ BS @ 50:4 | ^ BS @ 116:0 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 117 Menlo, - ^ BT @ 50:4 | ^ BT @ 117:0 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 118 Monaco, - ^ BU @ 50:4 | ^ BU @ 118:0 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 119 Consolas, - ^ BV @ 50:4 | ^ BV @ 119:0 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 120 'Liberation Mono', - ^ BW @ 50:4 | ^ BW @ 120:0 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 121 'Courier New', - ^ BX @ 50:4 | ^ BX @ 121:0 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 122 monospace - ^ BY @ 50:4 | ^ BY @ 122:0 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 123 ); /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... BZ @ 50:4-148 | ^^^ BZ @ 123:0-3 + 49 code, kbd, samp, pre { | 113 font-family: --theme( + ^ AT @ 49:2 | ^ AT @ 113:2 + 49 code, kbd, samp, pre { | 114 --default-mono-font-family, + ^ AU @ 49:2 | ^ AU @ 114:0 + 49 code, kbd, samp, pre { | 115 ui-monospace, + ^ AV @ 49:2 | ^ AV @ 115:0 + 49 code, kbd, samp, pre { | 116 SFMono-Regular, + ^ AW @ 49:2 | ^ AW @ 116:0 + 49 code, kbd, samp, pre { | 117 Menlo, + ^ AX @ 49:2 | ^ AX @ 117:0 + 49 code, kbd, samp, pre { | 118 Monaco, + ^ AY @ 49:2 | ^ AY @ 118:0 + 49 code, kbd, samp, pre { | 119 Consolas, + ^ AZ @ 49:2 | ^ AZ @ 119:0 + 49 code, kbd, samp, pre { | 120 'Liberation Mono', + ^ BA @ 49:2 | ^ BA @ 120:0 + 49 code, kbd, samp, pre { | 121 'Courier New', + ^ BB @ 49:2 | ^ BB @ 121:0 + 49 code, kbd, samp, pre { | 122 monospace + ^ BC @ 49:2 | ^ BC @ 122:0 + 49 code, kbd, samp, pre { | 123 ); /* 1 */ + ^^^^^^^^^^^^^^^^^^^^^ BD @ 49:2-23 | ^^^ BD @ 123:0-3 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | + ^ AT @ 50:4 | + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | + ^ AU @ 50:4 | + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | + ^ AV @ 50:4 | + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | + ^ AW @ 50:4 | + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | + ^ AX @ 50:4 | + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | + ^ AY @ 50:4 | + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | + ^ AZ @ 50:4 | + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | + ^ BA @ 50:4 | + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | + ^ BB @ 50:4 | + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | + ^ BC @ 50:4 | + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... BD @ 50:4-148 | 51 font-feature-settings: var(--default-mono-font-feature-settings, normal); | 124 font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CA @ 51:4-76 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CA @ 124:2-78 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BE @ 51:4-76 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BE @ 124:2-78 52 font-variation-settings: var(--default-mono-font-variation-settings, normal); | 125 font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CB @ 52:4-80 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CB @ 125:2-82 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BF @ 52:4-80 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... BF @ 125:2-82 53 font-size: 1em; | 126 font-size: 1em; /* 4 */ - ^^^^^^^^^^^^^^ CC @ 53:4-18 | ^^^^^^^^^^^^^^ CC @ 126:2-16 + ^^^^^^^^^^^^^^ BG @ 53:4-18 | ^^^^^^^^^^^^^^ BG @ 126:2-16 | 127 } 54 } | - 55 small { | 133 small { - ^^^^^^ CD @ 55:2-8 | ^^^^^^ CD @ 133:0-6 - 56 font-size: 80%; | 134 font-size: 80%; - ^^^^^^^^^^^^^^ CE @ 56:4-18 | ^^^^^^^^^^^^^^ CE @ 134:2-16 + 55 small { | 134 font-size: 80%; + ^^^^^^ BH @ 55:2-8 | ^^^^^^^^^^^^^^ BH @ 134:2-16 | 135 } + 56 font-size: 80%; | + ^^^^^^^^^^^^^^ BH @ 56:4-18 | 57 } | - 58 sub, sup { | 141 sub, - ^ CF @ 58:2 | ^ CF @ 141:0 - 58 sub, sup { | 142 sup { - ^^^^^^^^^ CG @ 58:2-11 | ^^^^ CG @ 142:0-4 - 59 font-size: 75%; | 143 font-size: 75%; - ^^^^^^^^^^^^^^ CH @ 59:4-18 | ^^^^^^^^^^^^^^ CH @ 143:2-16 + 58 sub, sup { | 143 font-size: 75%; + ^^^^^^^^^ BI @ 58:2-11 | ^^^^^^^^^^^^^^ BI @ 143:2-16 + 59 font-size: 75%; | + ^^^^^^^^^^^^^^ BI @ 59:4-18 | 60 line-height: 0; | 144 line-height: 0; - ^^^^^^^^^^^^^^ CI @ 60:4-18 | ^^^^^^^^^^^^^^ CI @ 144:2-16 + ^^^^^^^^^^^^^^ BJ @ 60:4-18 | ^^^^^^^^^^^^^^ BJ @ 144:2-16 61 position: relative; | 145 position: relative; - ^^^^^^^^^^^^^^^^^^ CJ @ 61:4-22 | ^^^^^^^^^^^^^^^^^^ CJ @ 145:2-20 + ^^^^^^^^^^^^^^^^^^ BK @ 61:4-22 | ^^^^^^^^^^^^^^^^^^ BK @ 145:2-20 62 vertical-align: baseline; | 146 vertical-align: baseline; - ^^^^^^^^^^^^^^^^^^^^^^^^ CK @ 62:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ CK @ 146:2-26 + ^^^^^^^^^^^^^^^^^^^^^^^^ BL @ 62:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ BL @ 146:2-26 | 147 } 63 } | - 64 sub { | 149 sub { - ^^^^ CL @ 64:2-6 | ^^^^ CL @ 149:0-4 - 65 bottom: -0.25em; | 150 bottom: -0.25em; - ^^^^^^^^^^^^^^^ CM @ 65:4-19 | ^^^^^^^^^^^^^^^ CM @ 150:2-17 + | 149 sub { + 64 sub { | 150 bottom: -0.25em; + ^^^^ BM @ 64:2-6 | ^^^^^^^^^^^^^^^ BM @ 150:2-17 | 151 } + 65 bottom: -0.25em; | + ^^^^^^^^^^^^^^^ BM @ 65:4-19 | 66 } | - 67 sup { | 153 sup { - ^^^^ CN @ 67:2-6 | ^^^^ CN @ 153:0-4 - 68 top: -0.5em; | 154 top: -0.5em; - ^^^^^^^^^^^ CO @ 68:4-15 | ^^^^^^^^^^^ CO @ 154:2-13 + | 153 sup { + 67 sup { | 154 top: -0.5em; + ^^^^ BN @ 67:2-6 | ^^^^^^^^^^^ BN @ 154:2-13 | 155 } + 68 top: -0.5em; | + ^^^^^^^^^^^ BN @ 68:4-15 | 69 } | - 70 table { | 163 table { - ^^^^^^ CP @ 70:2-8 | ^^^^^^ CP @ 163:0-6 - 71 text-indent: 0; | 164 text-indent: 0; /* 1 */ - ^^^^^^^^^^^^^^ CQ @ 71:4-18 | ^^^^^^^^^^^^^^ CQ @ 164:2-16 + 70 table { | 164 text-indent: 0; /* 1 */ + ^^^^^^ BO @ 70:2-8 | ^^^^^^^^^^^^^^ BO @ 164:2-16 + 71 text-indent: 0; | + ^^^^^^^^^^^^^^ BO @ 71:4-18 | 72 border-color: inherit; | 165 border-color: inherit; /* 2 */ - ^^^^^^^^^^^^^^^^^^^^^ CR @ 72:4-25 | ^^^^^^^^^^^^^^^^^^^^^ CR @ 165:2-23 + ^^^^^^^^^^^^^^^^^^^^^ BP @ 72:4-25 | ^^^^^^^^^^^^^^^^^^^^^ BP @ 165:2-23 73 border-collapse: collapse; | 166 border-collapse: collapse; /* 3 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^ CS @ 73:4-29 | ^^^^^^^^^^^^^^^^^^^^^^^^^ CS @ 166:2-27 + ^^^^^^^^^^^^^^^^^^^^^^^^^ BQ @ 73:4-29 | ^^^^^^^^^^^^^^^^^^^^^^^^^ BQ @ 166:2-27 | 167 } 74 } | - 75 :-moz-focusring { | 173 :-moz-focusring { - ^^^^^^^^^^^^^^^^ CT @ 75:2-18 | ^^^^^^^^^^^^^^^^ CT @ 173:0-16 - 76 outline: auto; | 174 outline: auto; - ^^^^^^^^^^^^^ CU @ 76:4-17 | ^^^^^^^^^^^^^ CU @ 174:2-15 + 75 :-moz-focusring { | 174 outline: auto; + ^^^^^^^^^^^^^^^^ BR @ 75:2-18 | ^^^^^^^^^^^^^ BR @ 174:2-15 | 175 } + 76 outline: auto; | + ^^^^^^^^^^^^^ BR @ 76:4-17 | 77 } | - 78 progress { | 181 progress { - ^^^^^^^^^ CV @ 78:2-11 | ^^^^^^^^^ CV @ 181:0-9 - 79 vertical-align: baseline; | 182 vertical-align: baseline; - ^^^^^^^^^^^^^^^^^^^^^^^^ CW @ 79:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ CW @ 182:2-26 + 78 progress { | 182 vertical-align: baseline; + ^^^^^^^^^ BS @ 78:2-11 | ^^^^^^^^^^^^^^^^^^^^^^^^ BS @ 182:2-26 | 183 } + 79 vertical-align: baseline; | + ^^^^^^^^^^^^^^^^^^^^^^^^ BS @ 79:4-28 | 80 } | - 81 summary { | 189 summary { - ^^^^^^^^ CX @ 81:2-10 | ^^^^^^^^ CX @ 189:0-8 - 82 display: list-item; | 190 display: list-item; - ^^^^^^^^^^^^^^^^^^ CY @ 82:4-22 | ^^^^^^^^^^^^^^^^^^ CY @ 190:2-20 + 81 summary { | 190 display: list-item; + ^^^^^^^^ BT @ 81:2-10 | ^^^^^^^^^^^^^^^^^^ BT @ 190:2-20 | 191 } + 82 display: list-item; | + ^^^^^^^^^^^^^^^^^^ BT @ 82:4-22 | 83 } | - 84 ol, ul, menu { | 197 ol, - ^ CZ @ 84:2 | ^ CZ @ 197:0 - 84 ol, ul, menu { | 198 ul, - ^ DA @ 84:2 | ^ DA @ 198:0 - 84 ol, ul, menu { | 199 menu { - ^^^^^^^^^^^^^ DB @ 84:2-15 | ^^^^^ DB @ 199:0-5 - 85 list-style: none; | 200 list-style: none; - ^^^^^^^^^^^^^^^^ DC @ 85:4-20 | ^^^^^^^^^^^^^^^^ DC @ 200:2-18 + 84 ol, ul, menu { | 200 list-style: none; + ^^^^^^^^^^^^^ BU @ 84:2-15 | ^^^^^^^^^^^^^^^^ BU @ 200:2-18 | 201 } + 85 list-style: none; | + ^^^^^^^^^^^^^^^^ BU @ 85:4-20 | 86 } | - 87 img, svg, video, canvas, audio, iframe, embed, object { | 209 img, - ^ DD @ 87:2 | ^ DD @ 209:0 - 87 img, svg, video, canvas, audio, iframe, embed, object { | 210 svg, - ^ DE @ 87:2 | ^ DE @ 210:0 - 87 img, svg, video, canvas, audio, iframe, embed, object { | 211 video, - ^ DF @ 87:2 | ^ DF @ 211:0 - 87 img, svg, video, canvas, audio, iframe, embed, object { | 212 canvas, - ^ DG @ 87:2 | ^ DG @ 212:0 - 87 img, svg, video, canvas, audio, iframe, embed, object { | 213 audio, - ^ DH @ 87:2 | ^ DH @ 213:0 - 87 img, svg, video, canvas, audio, iframe, embed, object { | 214 iframe, - ^ DI @ 87:2 | ^ DI @ 214:0 - 87 img, svg, video, canvas, audio, iframe, embed, object { | 215 embed, - ^ DJ @ 87:2 | ^ DJ @ 215:0 - 87 img, svg, video, canvas, audio, iframe, embed, object { | 216 object { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DK @ 87:2-56 | ^^^^^^^ DK @ 216:0-7 - 88 display: block; | 217 display: block; /* 1 */ - ^^^^^^^^^^^^^^ DL @ 88:4-18 | ^^^^^^^^^^^^^^ DL @ 217:2-16 + 87 img, svg, video, canvas, audio, iframe, embed, object { | 217 display: block; /* 1 */ + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BV @ 87:2-56 | ^^^^^^^^^^^^^^ BV @ 217:2-16 + 88 display: block; | + ^^^^^^^^^^^^^^ BV @ 88:4-18 | 89 vertical-align: middle; | 218 vertical-align: middle; /* 2 */ - ^^^^^^^^^^^^^^^^^^^^^^ DM @ 89:4-26 | ^^^^^^^^^^^^^^^^^^^^^^ DM @ 218:2-24 + ^^^^^^^^^^^^^^^^^^^^^^ BW @ 89:4-26 | ^^^^^^^^^^^^^^^^^^^^^^ BW @ 218:2-24 | 219 } 90 } | - 91 img, video { | 225 img, - ^ DN @ 91:2 | ^ DN @ 225:0 - 91 img, video { | 226 video { - ^^^^^^^^^^^ DO @ 91:2-13 | ^^^^^^ DO @ 226:0-6 - 92 max-width: 100%; | 227 max-width: 100%; - ^^^^^^^^^^^^^^^ DP @ 92:4-19 | ^^^^^^^^^^^^^^^ DP @ 227:2-17 + 91 img, video { | 227 max-width: 100%; + ^^^^^^^^^^^ BX @ 91:2-13 | ^^^^^^^^^^^^^^^ BX @ 227:2-17 + 92 max-width: 100%; | + ^^^^^^^^^^^^^^^ BX @ 92:4-19 | 93 height: auto; | 228 height: auto; - ^^^^^^^^^^^^ DQ @ 93:4-16 | ^^^^^^^^^^^^ DQ @ 228:2-14 + ^^^^^^^^^^^^ BY @ 93:4-16 | ^^^^^^^^^^^^ BY @ 228:2-14 | 229 } 94 } | - 95 button, input, select, optgroup, textarea, ::file-selector-button { | 238 button, - ^ DR @ 95:2 | ^ DR @ 238:0 - 95 button, input, select, optgroup, textarea, ::file-selector-button { | 239 input, - ^ DS @ 95:2 | ^ DS @ 239:0 - 95 button, input, select, optgroup, textarea, ::file-selector-button { | 240 select, - ^ DT @ 95:2 | ^ DT @ 240:0 - 95 button, input, select, optgroup, textarea, ::file-selector-button { | 241 optgroup, - ^ DU @ 95:2 | ^ DU @ 241:0 - 95 button, input, select, optgroup, textarea, ::file-selector-button { | 242 textarea, - ^ DV @ 95:2 | ^ DV @ 242:0 - 95 button, input, select, optgroup, textarea, ::file-selector-button { | 243 ::file-selector-button { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DW @ 95:2-68 | ^^^^^^^^^^^^^^^^^^^^^^^ DW @ 243:0-23 - 96 font: inherit; | 244 font: inherit; /* 1 */ - ^^^^^^^^^^^^^ DX @ 96:4-17 | ^^^^^^^^^^^^^ DX @ 244:2-15 + 95 button, input, select, optgroup, textarea, ::file-selector-button { | 244 font: inherit; /* 1 */ + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BZ @ 95:2-68 | ^^^^^^^^^^^^^ BZ @ 244:2-15 + 96 font: inherit; | + ^^^^^^^^^^^^^ BZ @ 96:4-17 | 97 font-feature-settings: inherit; | 245 font-feature-settings: inherit; /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DY @ 97:4-34 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DY @ 245:2-32 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CA @ 97:4-34 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CA @ 245:2-32 98 font-variation-settings: inherit; | 246 font-variation-settings: inherit; /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DZ @ 98:4-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DZ @ 246:2-34 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CB @ 98:4-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CB @ 246:2-34 99 letter-spacing: inherit; | 247 letter-spacing: inherit; /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^^ EA @ 99:4-27 | ^^^^^^^^^^^^^^^^^^^^^^^ EA @ 247:2-25 + ^^^^^^^^^^^^^^^^^^^^^^^ CC @ 99:4-27 | ^^^^^^^^^^^^^^^^^^^^^^^ CC @ 247:2-25 100 color: inherit; | 248 color: inherit; /* 1 */ - ^^^^^^^^^^^^^^ EB @ 100:4-18 | ^^^^^^^^^^^^^^ EB @ 248:2-16 + ^^^^^^^^^^^^^^ CD @ 100:4-18 | ^^^^^^^^^^^^^^ CD @ 248:2-16 101 border-radius: 0; | 249 border-radius: 0; /* 2 */ - ^^^^^^^^^^^^^^^^ EC @ 101:4-20 | ^^^^^^^^^^^^^^^^ EC @ 249:2-18 + ^^^^^^^^^^^^^^^^ CE @ 101:4-20 | ^^^^^^^^^^^^^^^^ CE @ 249:2-18 102 background-color: transparent; | 250 background-color: transparent; /* 3 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ED @ 102:4-33 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ED @ 250:2-31 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CF @ 102:4-33 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CF @ 250:2-31 103 opacity: 1; | 251 opacity: 1; /* 4 */ - ^^^^^^^^^^ EE @ 103:4-14 | ^^^^^^^^^^ EE @ 251:2-12 + ^^^^^^^^^^ CG @ 103:4-14 | ^^^^^^^^^^ CG @ 251:2-12 | 252 } 104 } | - 105 :where(select:is([multiple], [size])) optgroup { | 258 :where(select:is([multiple], [size])) optgroup { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EF @ 105:2-49 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EF @ 258:0-47 - 106 font-weight: bolder; | 259 font-weight: bolder; - ^^^^^^^^^^^^^^^^^^^ EG @ 106:4-23 | ^^^^^^^^^^^^^^^^^^^ EG @ 259:2-21 + 105 :where(select:is([multiple], [size])) optgroup { | 259 font-weight: bolder; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CH @ 105:2-49 | ^^^^^^^^^^^^^^^^^^^ CH @ 259:2-21 | 260 } + 106 font-weight: bolder; | + ^^^^^^^^^^^^^^^^^^^ CH @ 106:4-23 | 107 } | - 108 :where(select:is([multiple], [size])) optgroup option { | 266 :where(select:is([multiple], [size])) optgroup option { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EH @ 108:2-56 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EH @ 266:0-54 - 109 padding-inline-start: 20px; | 267 padding-inline-start: 20px; - ^^^^^^^^^^^^^^^^^^^^^^^^^^ EI @ 109:4-30 | ^^^^^^^^^^^^^^^^^^^^^^^^^^ EI @ 267:2-28 + 108 :where(select:is([multiple], [size])) optgroup option { | 267 padding-inline-start: 20px; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CI @ 108:2-56 | ^^^^^^^^^^^^^^^^^^^^^^^^^^ CI @ 267:2-28 | 268 } + 109 padding-inline-start: 20px; | + ^^^^^^^^^^^^^^^^^^^^^^^^^^ CI @ 109:4-30 | 110 } | - 111 ::file-selector-button { | 274 ::file-selector-button { - ^^^^^^^^^^^^^^^^^^^^^^^ EJ @ 111:2-25 | ^^^^^^^^^^^^^^^^^^^^^^^ EJ @ 274:0-23 - 112 margin-inline-end: 4px; | 275 margin-inline-end: 4px; - ^^^^^^^^^^^^^^^^^^^^^^ EK @ 112:4-26 | ^^^^^^^^^^^^^^^^^^^^^^ EK @ 275:2-24 + 111 ::file-selector-button { | 275 margin-inline-end: 4px; + ^^^^^^^^^^^^^^^^^^^^^^^ CJ @ 111:2-25 | ^^^^^^^^^^^^^^^^^^^^^^ CJ @ 275:2-24 | 276 } + 112 margin-inline-end: 4px; | + ^^^^^^^^^^^^^^^^^^^^^^ CJ @ 112:4-26 | 113 } | - 114 ::placeholder { | 282 ::placeholder { - ^^^^^^^^^^^^^^ EL @ 114:2-16 | ^^^^^^^^^^^^^^ EL @ 282:0-14 - 115 opacity: 1; | 283 opacity: 1; - ^^^^^^^^^^ EM @ 115:4-14 | ^^^^^^^^^^ EM @ 283:2-12 + 114 ::placeholder { | 283 opacity: 1; + ^^^^^^^^^^^^^^ CK @ 114:2-16 | ^^^^^^^^^^ CK @ 283:2-12 | 284 } + 115 opacity: 1; | + ^^^^^^^^^^ CK @ 115:4-14 | 116 } | 117 @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { | 291 @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or - ^ EN @ 117:2 | ^ EN @ 291:0 + ^ CL @ 117:2 | ^ CL @ 291:0 117 @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { | 292 (contain-intrinsic-size: 1px) /* Safari 17+ */ { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... EO @ 117:2-92 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EO @ 292:0-49 - 118 ::placeholder { | 293 ::placeholder { - ^^^^^^^^^^^^^^ EP @ 118:4-18 | ^^^^^^^^^^^^^^ EP @ 293:2-16 - 119 color: currentcolor; | 294 color: color-mix(in oklab, currentcolor 50%, transparent); - ^^^^^^^^^^^^^^^^^^^ EQ @ 119:6-25 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EQ @ 294:4-61 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CM @ 117:2-92 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CM @ 292:0-49 + | 293 ::placeholder { + 118 ::placeholder { | 294 color: color-mix(in oklab, currentcolor 50%, transparent); + ^^^^^^^^^^^^^^ CN @ 118:4-18 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CN @ 294:4-61 | 295 } | 296 } - 120 @supports (color: color-mix(in lab, red, red)) { | - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EQ @ 120:6-53 | - 121 color: color-mix(in oklab, currentcolor 50%, transparent); | - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EQ @ 121:8-65 | - 122 } | - 123 } | - 124 } | - 125 textarea { | 302 textarea { - ^^^^^^^^^ ER @ 125:2-11 | ^^^^^^^^^ ER @ 302:0-9 - 126 resize: vertical; | 303 resize: vertical; - ^^^^^^^^^^^^^^^^ ES @ 126:4-20 | ^^^^^^^^^^^^^^^^ ES @ 303:2-18 + 119 color: currentcolor; | + ^^^^^^^^^^^^^^^^^^^ CN @ 119:6-25 | + 120 } | + 121 @supports (color: color-mix(in lab, red, red)) { | + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CN @ 121:4-51 | + 122 ::placeholder { | + ^^^^^^^^^^^^^^ CN @ 122:6-20 | + 123 color: color-mix(in oklab, currentcolor 50%, transparent); | + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CN @ 123:8-65 | + 124 } | + 125 } | + 126 } | + 127 textarea { | 303 resize: vertical; + ^^^^^^^^^ CO @ 127:2-11 | ^^^^^^^^^^^^^^^^ CO @ 303:2-18 | 304 } - 127 } | - 128 ::-webkit-search-decoration { | 310 ::-webkit-search-decoration { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ET @ 128:2-30 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ET @ 310:0-28 - 129 -webkit-appearance: none; | 311 -webkit-appearance: none; - ^^^^^^^^^^^^^^^^^^^^^^^^ EU @ 129:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ EU @ 311:2-26 + 128 resize: vertical; | + ^^^^^^^^^^^^^^^^ CO @ 128:4-20 | + 129 } | + 130 ::-webkit-search-decoration { | 311 -webkit-appearance: none; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CP @ 130:2-30 | ^^^^^^^^^^^^^^^^^^^^^^^^ CP @ 311:2-26 | 312 } - 130 } | - 131 ::-webkit-date-and-time-value { | 319 ::-webkit-date-and-time-value { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EV @ 131:2-32 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EV @ 319:0-30 - 132 min-height: 1lh; | 320 min-height: 1lh; /* 1 */ - ^^^^^^^^^^^^^^^ EW @ 132:4-19 | ^^^^^^^^^^^^^^^ EW @ 320:2-17 - 133 text-align: inherit; | 321 text-align: inherit; /* 2 */ - ^^^^^^^^^^^^^^^^^^^ EX @ 133:4-23 | ^^^^^^^^^^^^^^^^^^^ EX @ 321:2-21 + 131 -webkit-appearance: none; | + ^^^^^^^^^^^^^^^^^^^^^^^^ CP @ 131:4-28 | + 132 } | + 133 ::-webkit-date-and-time-value { | 320 min-height: 1lh; /* 1 */ + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CQ @ 133:2-32 | ^^^^^^^^^^^^^^^ CQ @ 320:2-17 + 134 min-height: 1lh; | + ^^^^^^^^^^^^^^^ CQ @ 134:4-19 | + 135 text-align: inherit; | 321 text-align: inherit; /* 2 */ + ^^^^^^^^^^^^^^^^^^^ CR @ 135:4-23 | ^^^^^^^^^^^^^^^^^^^ CR @ 321:2-21 | 322 } - 134 } | - 135 ::-webkit-datetime-edit { | 328 ::-webkit-datetime-edit { - ^^^^^^^^^^^^^^^^^^^^^^^^ EY @ 135:2-26 | ^^^^^^^^^^^^^^^^^^^^^^^^ EY @ 328:0-24 - 136 display: inline-flex; | 329 display: inline-flex; - ^^^^^^^^^^^^^^^^^^^^ EZ @ 136:4-24 | ^^^^^^^^^^^^^^^^^^^^ EZ @ 329:2-22 + 136 } | + 137 ::-webkit-datetime-edit { | 329 display: inline-flex; + ^^^^^^^^^^^^^^^^^^^^^^^^ CS @ 137:2-26 | ^^^^^^^^^^^^^^^^^^^^ CS @ 329:2-22 | 330 } - 137 } | - 138 ::-webkit-datetime-edit-fields-wrapper { | 336 ::-webkit-datetime-edit-fields-wrapper { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FA @ 138:2-41 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FA @ 336:0-39 - 139 padding: 0; | 337 padding: 0; - ^^^^^^^^^^ FB @ 139:4-14 | ^^^^^^^^^^ FB @ 337:2-12 + 138 display: inline-flex; | + ^^^^^^^^^^^^^^^^^^^^ CS @ 138:4-24 | + 139 } | + 140 ::-webkit-datetime-edit-fields-wrapper { | 337 padding: 0; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CT @ 140:2-41 | ^^^^^^^^^^ CT @ 337:2-12 | 338 } - 140 } | - 141 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 340 ::-webkit-datetime-edit, - ^ FC @ 141:2 | ^ FC @ 340:0 - 141 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 341 ::-webkit-datetime-edit-year-field, - ^ FD @ 141:2 | ^ FD @ 341:0 - 141 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 342 ::-webkit-datetime-edit-month-field, - ^ FE @ 141:2 | ^ FE @ 342:0 - 141 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 343 ::-webkit-datetime-edit-day-field, - ^ FF @ 141:2 | ^ FF @ 343:0 - 141 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 344 ::-webkit-datetime-edit-hour-field, - ^ FG @ 141:2 | ^ FG @ 344:0 - 141 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 345 ::-webkit-datetime-edit-minute-field, - ^ FH @ 141:2 | ^ FH @ 345:0 - 141 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 346 ::-webkit-datetime-edit-second-field, - ^ FI @ 141:2 | ^ FI @ 346:0 - 141 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 347 ::-webkit-datetime-edit-millisecond-field, - ^ FJ @ 141:2 | ^ FJ @ 347:0 - 141 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 348 ::-webkit-datetime-edit-meridiem-field { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... FK @ 141:2-329 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FK @ 348:0-39 - 142 padding-block: 0; | 349 padding-block: 0; - ^^^^^^^^^^^^^^^^ FL @ 142:4-20 | ^^^^^^^^^^^^^^^^ FL @ 349:2-18 + 141 padding: 0; | + ^^^^^^^^^^ CT @ 141:4-14 | + 142 } | + 143 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 349 padding-block: 0; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CU @ 143:2-329 | ^^^^^^^^^^^^^^^^ CU @ 349:2-18 | 350 } - 143 } | - 144 ::-webkit-calendar-picker-indicator { | 356 ::-webkit-calendar-picker-indicator { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FM @ 144:2-38 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FM @ 356:0-36 - 145 line-height: 1; | 357 line-height: 1; - ^^^^^^^^^^^^^^ FN @ 145:4-18 | ^^^^^^^^^^^^^^ FN @ 357:2-16 + 144 padding-block: 0; | + ^^^^^^^^^^^^^^^^ CU @ 144:4-20 | + 145 } | + 146 ::-webkit-calendar-picker-indicator { | 357 line-height: 1; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CV @ 146:2-38 | ^^^^^^^^^^^^^^ CV @ 357:2-16 | 358 } - 146 } | - 147 :-moz-ui-invalid { | 364 :-moz-ui-invalid { - ^^^^^^^^^^^^^^^^^ FO @ 147:2-19 | ^^^^^^^^^^^^^^^^^ FO @ 364:0-17 - 148 box-shadow: none; | 365 box-shadow: none; - ^^^^^^^^^^^^^^^^ FP @ 148:4-20 | ^^^^^^^^^^^^^^^^ FP @ 365:2-18 + 147 line-height: 1; | + ^^^^^^^^^^^^^^ CV @ 147:4-18 | + 148 } | + 149 :-moz-ui-invalid { | 365 box-shadow: none; + ^^^^^^^^^^^^^^^^^ CW @ 149:2-19 | ^^^^^^^^^^^^^^^^ CW @ 365:2-18 | 366 } - 149 } | - 150 button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 372 button, - ^ FQ @ 150:2 | ^ FQ @ 372:0 - 150 button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 373 input:where([type='button'], [type='reset'], [type='submit']), - ^ FR @ 150:2 | ^ FR @ 373:0 - 150 button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 374 ::file-selector-button { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... FS @ 150:2-96 | ^^^^^^^^^^^^^^^^^^^^^^^ FS @ 374:0-23 - 151 appearance: button; | 375 appearance: button; - ^^^^^^^^^^^^^^^^^^ FT @ 151:4-22 | ^^^^^^^^^^^^^^^^^^ FT @ 375:2-20 + 150 box-shadow: none; | + ^^^^^^^^^^^^^^^^ CW @ 150:4-20 | + 151 } | + 152 button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 375 appearance: button; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CX @ 152:2-96 | ^^^^^^^^^^^^^^^^^^ CX @ 375:2-20 | 376 } - 152 } | - 153 ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { | 382 ::-webkit-inner-spin-button, - ^ FU @ 153:2 | ^ FU @ 382:0 - 153 ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { | 383 ::-webkit-outer-spin-button { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FV @ 153:2-59 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FV @ 383:0-28 - 154 height: auto; | 384 height: auto; - ^^^^^^^^^^^^ FW @ 154:4-16 | ^^^^^^^^^^^^ FW @ 384:2-14 + 153 appearance: button; | + ^^^^^^^^^^^^^^^^^^ CX @ 153:4-22 | + 154 } | + 155 ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { | 384 height: auto; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CY @ 155:2-59 | ^^^^^^^^^^^^ CY @ 384:2-14 | 385 } - 155 } | - 156 [hidden]:where(:not([hidden='until-found'])) { | 391 [hidden]:where(:not([hidden='until-found'])) { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FX @ 156:2-47 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FX @ 391:0-45 - 157 display: none !important; | 392 display: none !important; - ^^^^^^^^^^^^^^^^^^^^^^^^ FY @ 157:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ FY @ 392:2-26 + 156 height: auto; | + ^^^^^^^^^^^^ CY @ 156:4-16 | + 157 } | + 158 [hidden]:where(:not([hidden='until-found'])) { | 392 display: none !important; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CZ @ 158:2-47 | ^^^^^^^^^^^^^^^^^^^^^^^^ CZ @ 392:2-26 | 393 } - 158 } | - 159 } | + 159 display: none !important; | + ^^^^^^^^^^^^^^^^^^^^^^^^ CZ @ 159:4-28 | + 160 } | + 161 } | | --- index.css --- - 160 @layer utilities; | 5 @import './utilities.css' layer(utilities); - ^^^^^^^^^^^^^^^^ FZ @ 160:0-16 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FZ @ 5:0-42 + 162 @layer utilities; | 5 @import './utilities.css' layer(utilities); + ^^^^^^^^^^^^^^^^ DA @ 162:0-16 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DA @ 5:0-42 | --- input.css --- - 161 .foo { | 3 .foo { - ^^^^^ GA @ 161:0-5 | ^^^^^ GA @ 3:0-5 - 162 text-decoration-line: underline; | 4 @apply underline; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GB @ 162:2-33 | ^^^^^^^^^ GB @ 4:9-18 + 163 .foo { | 4 @apply underline; + ^^^^^ DB @ 163:0-5 | ^^^^^^^^^ DB @ 4:9-18 | 5 } - 163 } | - 164 | + 164 text-decoration-line: underline; | + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DB @ 164:2-33 | + 165 } | + 166 | " `) }) @@ -615,12 +563,12 @@ test('source maps are generated for utilities', async ({ expect }) => { 2 display: flex; | ^^^^^^^^^^^^^ A @ 2:2-15 | 3 } | - 4 .custom { | - ^^^^^^^^ A @ 4:0-8 | | --- input.css --- - 5 color: orange; | 4 color: orange; - ^^^^^^^^^^^^^ B @ 5:2-15 | ^^^^^^^^^^^^^ B @ 4:2-15 + 4 .custom { | 4 color: orange; + ^^^^^^^^ B @ 4:0-8 | ^^^^^^^^^^^^^ B @ 4:2-15 | 5 } + 5 color: orange; | + ^^^^^^^^^^^^^ B @ 5:2-15 | 6 } | 7 .custom-js { | ^^^^^^^^^^^ A @ 7:0-11 | @@ -689,29 +637,32 @@ test('@apply generates source maps', async ({ expect }) => { " output.css | input.css | - 1 .foo { | 1 .foo { - ^^^^^ A @ 1:0-5 | ^^^^^ A @ 1:0-5 - 2 color: blue; | 2 color: blue; - ^^^^^^^^^^^ B @ 2:2-13 | ^^^^^^^^^^^ B @ 2:2-13 + 1 .foo { | 2 color: blue; + ^^^^^ A @ 1:0-5 | ^^^^^^^^^^^ A @ 2:2-13 + 2 color: blue; | + ^^^^^^^^^^^ A @ 2:2-13 | 3 color: #000; | 3 @apply text-[#000] hover:text-[#f00]; - ^^^^^^^^^^^ C @ 3:2-13 | ^^^^^^^^^^^ C @ 3:9-20 - 4 &:hover { | 3 @apply text-[#000] hover:text-[#f00]; - ^^^^^^^^ D @ 4:2-10 | ^^^^^^^^^^^^^^^^^ D @ 3:21-38 - 5 @media (hover: hover) { | - ^^^^^^^^^^^^^^^^^^^^^^ D @ 5:4-26 | - 6 color: #f00; | - ^^^^^^^^^^^ D @ 6:6-17 | - 7 } | + ^^^^^^^^^^^ B @ 3:2-13 | ^^^^^^^^^^^ B @ 3:9-20 + 4 } | + 5 @media (hover: hover) { | 3 @apply text-[#000] hover:text-[#f00]; + ^^^^^^^^^^^^^^^^^^^^^^ C @ 5:0-22 | ^^^^^^^^^^^^^^^^^ C @ 3:21-38 + 6 .foo:hover { | + ^^^^^^^^^^^ C @ 6:2-13 | + 7 color: #f00; | + ^^^^^^^^^^^ C @ 7:4-15 | 8 } | - 9 text-decoration-line: underline; | 4 @apply underline; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ E @ 9:2-33 | ^^^^^^^^^ E @ 4:9-18 - 10 @apply --my-mixin-1 --my-mixin-2(); | 5 @apply --my-mixin-1 --my-mixin-2(); - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ F @ 10:2-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ F @ 5:2-36 - 11 color: red; | 6 color: red; - ^^^^^^^^^^ G @ 11:2-12 | ^^^^^^^^^^ G @ 6:2-12 + 9 } | + 10 .foo { | 4 @apply underline; + ^^^^^ D @ 10:0-5 | ^^^^^^^^^ D @ 4:9-18 + 11 text-decoration-line: underline; | + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ D @ 11:2-33 | + 12 @apply --my-mixin-1 --my-mixin-2(); | 5 @apply --my-mixin-1 --my-mixin-2(); + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ E @ 12:2-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ E @ 5:2-36 + 13 color: red; | 6 color: red; + ^^^^^^^^^^ F @ 13:2-12 | ^^^^^^^^^^ F @ 6:2-12 | 7 } - 12 } | - 13 | + 14 } | + 15 | " `) }) @@ -737,49 +688,49 @@ test('@variant generates source maps', async ({ expect }) => { expect(annotations).toMatchInlineSnapshot(` " - output.css | input.css - | - 1 .foo { | 1 .foo { - ^^^^^ A @ 1:0-5 | ^^^^^ A @ 1:0-5 - 2 color: red; | 2 color: red; - ^^^^^^^^^^ B @ 2:2-12 | ^^^^^^^^^^ B @ 2:2-12 - 3 &[data-a] { | - | 4 @variant data-a, data-b:data-c { - 4 color: green; | 5 color: green; - ^^^^^^^^^^^^ C @ 4:4-16 | ^^^^^^^^^^^^ C @ 5:4-16 - 5 &[data-d] { | - | 7 @variant data-d, data-e:data-f { - 6 color: blue; | 8 color: blue; - ^^^^^^^^^^^ D @ 6:6-17 | ^^^^^^^^^^^ D @ 8:6-17 - | 9 } - | 10 } - | 11 } - 7 } | - 8 &[data-e] { | - 9 &[data-f] { | - 10 color: blue; | - ^^^^^^^^^^^ D @ 10:8-19 | - 11 } | - 12 } | - 13 } | - 14 &[data-b] { | - 15 &[data-c] { | - 16 color: green; | - ^^^^^^^^^^^^ C @ 16:6-18 | - 17 &[data-d] { | - 18 color: blue; | - ^^^^^^^^^^^ D @ 18:8-19 | - 19 } | - 20 &[data-e] { | - 21 &[data-f] { | - 22 color: blue; | - ^^^^^^^^^^^ D @ 22:10-21 | - 23 } | - 24 } | - 25 } | - 26 } | - 27 } | - 28 | + output.css | input.css + | + 1 .foo { | 2 color: red; + ^^^^^ A @ 1:0-5 | ^^^^^^^^^^ A @ 2:2-12 + 2 color: red; | + ^^^^^^^^^^ A @ 2:2-12 | + 3 } | + | 4 @variant data-a, data-b:data-c { + 4 .foo[data-a] { | 5 color: green; + ^^^^^^^^^^^^^ B @ 4:0-13 | ^^^^^^^^^^^^ B @ 5:4-16 + 5 color: green; | + ^^^^^^^^^^^^ B @ 5:2-14 | + 6 } | + | 7 @variant data-d, data-e:data-f { + 7 :is(.foo[data-a])[data-d] { | 8 color: blue; + ^^^^^^^^^^^^^^^^^^^^^^^^^^ C @ 7:0-26 | ^^^^^^^^^^^ C @ 8:6-17 + | 9 } + | 10 } + | 11 } + 8 color: blue; | + ^^^^^^^^^^^ C @ 8:2-13 | + 9 } | + 10 :is(:is(.foo[data-a])[data-e])[data-f] { | + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ C @ 10:0-39 | + 11 color: blue; | + ^^^^^^^^^^^ C @ 11:2-13 | + 12 } | + 13 :is(.foo[data-b])[data-c] { | + ^^^^^^^^^^^^^^^^^^^^^^^^^^ B @ 13:0-26 | + 14 color: green; | + ^^^^^^^^^^^^ B @ 14:2-14 | + 15 } | + 16 :is(:is(.foo[data-b])[data-c])[data-d] { | + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ C @ 16:0-39 | + 17 color: blue; | + ^^^^^^^^^^^ C @ 17:2-13 | + 18 } | + 19 :is(:is(:is(.foo[data-b])[data-c])[data-e])[data-f] { | + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ C @ 19:0-52 | + 20 color: blue; | + ^^^^^^^^^^^ C @ 20:2-13 | + 21 } | + 22 | " `) }) @@ -865,25 +816,19 @@ test('Source locations for `addBase` point to the `@plugin` that generated them' expect(annotations).toMatchInlineSnapshot(` " - output.css | input.css - | - 1 @layer base { | 1 @plugin "./plugin.js"; - ^^^^^^^^^^^^ A @ 1:0-12 | ^^^^^^^^^^^^^^^^^^^^^ A @ 1:0-21 - 2 body { | - ^^^^^ A @ 2:2-7 | - 3 color: red; | - ^^^^^^^^^^ A @ 3:4-14 | - 4 } | - 5 } | - 6 @layer base { | 2 @config "./config.js"; - ^^^^^^^^^^^^ B @ 6:0-12 | ^^^^^^^^^^^^^^^^^^^^^ B @ 2:0-21 - 7 body { | - ^^^^^ B @ 7:2-7 | - 8 color: green; | - ^^^^^^^^^^^^ B @ 8:4-16 | - 9 } | - 10 } | - 11 | + output.css | input.css + | + 1 @layer base { | 1 @plugin "./plugin.js"; + ^^^^^^^^^^^^ A @ 1:0-12 | ^^^^^^^^^^^^^^^^^^^^^ A @ 1:0-21 + 2 body { | + ^^^^^ A @ 2:2-7 | + 3 color: red; | + ^^^^^^^^^^ A @ 3:4-14 | + 4 color: green; | 2 @config "./config.js"; + ^^^^^^^^^^^^ B @ 4:4-16 | ^^^^^^^^^^^^^^^^^^^^^ B @ 2:0-21 + 5 } | + 6 } | + 7 | " `) }) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index c78ffbfbb22b..80097430b576 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -4104,19 +4104,29 @@ describe('container', () => { } .container { width: 100%; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: 40rem; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .container { max-width: 48rem; } - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .container { max-width: 64rem; } - @media (width >= 80rem) { + } + @media (width >= 80rem) { + .container { max-width: 80rem; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .container { max-width: 96rem; } } @@ -4151,25 +4161,39 @@ describe('container', () => { " .container { width: 100%; - @media (width >= 40em) { + } + @media (width >= 40em) { + .container { max-width: 40em; } - @media (width >= 48em) { + } + @media (width >= 48em) { + .container { max-width: 48em; } - @media (width >= 30px) { + } + @media (width >= 30px) { + .container { max-width: 30px; } - @media (width >= 1600px) { + } + @media (width >= 1600px) { + .container { max-width: 1600px; } - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .container { max-width: 64rem; } - @media (width >= 80rem) { + } + @media (width >= 80rem) { + .container { max-width: 80rem; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .container { max-width: 96rem; } } @@ -4208,26 +4232,38 @@ describe('container', () => { } .container { width: 100%; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { max-width: 40rem; } - @media (width >= 48rem) { + } + @media (width >= 48rem) { + .container { max-width: 48rem; } - @media (width >= 64rem) { + } + @media (width >= 64rem) { + .container { max-width: 64rem; } - @media (width >= 80rem) { + } + @media (width >= 80rem) { + .container { max-width: 80rem; } - @media (width >= 96rem) { + } + @media (width >= 96rem) { + .container { max-width: 96rem; } } .container { margin-inline: auto; padding-inline: 1rem; - @media (width >= 40rem) { + } + @media (width >= 40rem) { + .container { padding-inline: 2rem; } } @@ -4812,8 +4848,6 @@ test('perspective-origin', async () => { } .perspective-origin-top { perspective-origin: var(--perspective-origin-top); - } - .perspective-origin-top { perspective: var(--perspective-origin-top); } " @@ -8956,26 +8990,20 @@ test('space-x', async () => { :root, :host { --spacing-4: 1rem; } - .-space-x-4 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-x-reverse))); - } + :where(.-space-x-4 > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-x-reverse))); } - .space-x-4 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(var(--spacing-4) * var(--tw-space-x-reverse)); - margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse))); - } + :where(.space-x-4 > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(var(--spacing-4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse))); } - .space-x-\\[4px\\] { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(4px * var(--tw-space-x-reverse)); - margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse))); - } + :where(.space-x-\\[4px\\] > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(4px * var(--tw-space-x-reverse)); + margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse))); } @property --tw-space-x-reverse { syntax: "*"; @@ -9011,26 +9039,20 @@ test('space-y', async () => { :root, :host { --spacing-4: 1rem; } - .-space-y-4 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-y-reverse))); - } + :where(.-space-y-4 > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-y-reverse))); } - .space-y-4 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse)); - margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse))); - } + :where(.space-y-4 > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse)); + margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse))); } - .space-y-\\[4px\\] { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(4px * var(--tw-space-y-reverse)); - margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse))); - } + :where(.space-y-\\[4px\\] > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(4px * var(--tw-space-y-reverse)); + margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse))); } @property --tw-space-y-reverse { syntax: "*"; @@ -9053,10 +9075,8 @@ test('space-x-reverse', async () => { expect(await run(['space-x-reverse'])).toMatchInlineSnapshot(` " @layer properties; - .space-x-reverse { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 1; - } + :where(.space-x-reverse > :not(:last-child)) { + --tw-space-x-reverse: 1; } @property --tw-space-x-reverse { syntax: "*"; @@ -9079,10 +9099,8 @@ test('space-y-reverse', async () => { expect(await run(['space-y-reverse'])).toMatchInlineSnapshot(` " @layer properties; - .space-y-reverse { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 1; - } + :where(.space-y-reverse > :not(:last-child)) { + --tw-space-y-reverse: 1; } @property --tw-space-y-reverse { syntax: "*"; @@ -9106,37 +9124,29 @@ test('divide-x', async () => { .toMatchInlineSnapshot(` " @layer properties; - .divide-x { - :where(& > :not(:last-child)) { - --tw-divide-x-reverse: 0; - border-inline-style: var(--tw-border-style); - border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); - border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); - } + :where(.divide-x > :not(:last-child)) { + --tw-divide-x-reverse: 0; + border-inline-style: var(--tw-border-style); + border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); + border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } - .divide-x-4 { - :where(& > :not(:last-child)) { - --tw-divide-x-reverse: 0; - border-inline-style: var(--tw-border-style); - border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); - border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); - } + :where(.divide-x-4 > :not(:last-child)) { + --tw-divide-x-reverse: 0; + border-inline-style: var(--tw-border-style); + border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); + border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } - .divide-x-123 { - :where(& > :not(:last-child)) { - --tw-divide-x-reverse: 0; - border-inline-style: var(--tw-border-style); - border-inline-start-width: calc(123px * var(--tw-divide-x-reverse)); - border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse))); - } + :where(.divide-x-123 > :not(:last-child)) { + --tw-divide-x-reverse: 0; + border-inline-style: var(--tw-border-style); + border-inline-start-width: calc(123px * var(--tw-divide-x-reverse)); + border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse))); } - .divide-x-\\[4px\\] { - :where(& > :not(:last-child)) { - --tw-divide-x-reverse: 0; - border-inline-style: var(--tw-border-style); - border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); - border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); - } + :where(.divide-x-\\[4px\\] > :not(:last-child)) { + --tw-divide-x-reverse: 0; + border-inline-style: var(--tw-border-style); + border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); + border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } @property --tw-divide-x-reverse { syntax: "*"; @@ -9187,13 +9197,11 @@ test('divide-x with custom default border width', async () => { ).toMatchInlineSnapshot(` " @layer properties; - .divide-x { - :where(& > :not(:last-child)) { - --tw-divide-x-reverse: 0; - border-inline-style: var(--tw-border-style); - border-inline-start-width: calc(2px * var(--tw-divide-x-reverse)); - border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); - } + :where(.divide-x > :not(:last-child)) { + --tw-divide-x-reverse: 0; + border-inline-style: var(--tw-border-style); + border-inline-start-width: calc(2px * var(--tw-divide-x-reverse)); + border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); } @property --tw-divide-x-reverse { syntax: "*"; @@ -9223,41 +9231,33 @@ test('divide-y', async () => { .toMatchInlineSnapshot(` " @layer properties; - .divide-y { - :where(& > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(1px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - } + :where(.divide-y > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(1px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } - .divide-y-4 { - :where(& > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(4px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); - } + :where(.divide-y-4 > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(4px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); } - .divide-y-123 { - :where(& > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(123px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(123px * calc(1 - var(--tw-divide-y-reverse))); - } + :where(.divide-y-123 > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(123px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(123px * calc(1 - var(--tw-divide-y-reverse))); } - .divide-y-\\[4px\\] { - :where(& > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(4px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); - } + :where(.divide-y-\\[4px\\] > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(4px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); } @property --tw-divide-y-reverse { syntax: "*"; @@ -9308,14 +9308,12 @@ test('divide-y with custom default border width', async () => { ).toMatchInlineSnapshot(` " @layer properties; - .divide-y { - :where(& > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(2px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); - } + :where(.divide-y > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(2px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); } @property --tw-divide-y-reverse { syntax: "*"; @@ -9344,10 +9342,8 @@ test('divide-x-reverse', async () => { expect(await run(['divide-x-reverse'])).toMatchInlineSnapshot(` " @layer properties; - .divide-x-reverse { - :where(& > :not(:last-child)) { - --tw-divide-x-reverse: 1; - } + :where(.divide-x-reverse > :not(:last-child)) { + --tw-divide-x-reverse: 1; } @property --tw-divide-x-reverse { syntax: "*"; @@ -9370,10 +9366,8 @@ test('divide-y-reverse', async () => { expect(await run(['divide-y-reverse'])).toMatchInlineSnapshot(` " @layer properties; - .divide-y-reverse { - :where(& > :not(:last-child)) { - --tw-divide-y-reverse: 1; - } + :where(.divide-y-reverse > :not(:last-child)) { + --tw-divide-y-reverse: 1; } @property --tw-divide-y-reverse { syntax: "*"; @@ -9397,35 +9391,25 @@ test('divide-style', async () => { await run(['divide-solid', 'divide-dashed', 'divide-dotted', 'divide-double', 'divide-none']), ).toMatchInlineSnapshot(` " - .divide-dashed { - :where(& > :not(:last-child)) { - --tw-border-style: dashed; - border-style: dashed; - } + :where(.divide-dashed > :not(:last-child)) { + --tw-border-style: dashed; + border-style: dashed; } - .divide-dotted { - :where(& > :not(:last-child)) { - --tw-border-style: dotted; - border-style: dotted; - } + :where(.divide-dotted > :not(:last-child)) { + --tw-border-style: dotted; + border-style: dotted; } - .divide-double { - :where(& > :not(:last-child)) { - --tw-border-style: double; - border-style: double; - } + :where(.divide-double > :not(:last-child)) { + --tw-border-style: double; + border-style: double; } - .divide-none { - :where(& > :not(:last-child)) { - --tw-border-style: none; - border-style: none; - } + :where(.divide-none > :not(:last-child)) { + --tw-border-style: none; + border-style: none; } - .divide-solid { - :where(& > :not(:last-child)) { - --tw-border-style: solid; - border-style: solid; - } + :where(.divide-solid > :not(:last-child)) { + --tw-border-style: solid; + border-style: solid; } " `) @@ -9503,19 +9487,25 @@ test('accent', async () => { } .accent-current\\/50 { accent-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .accent-current\\/50 { accent-color: color-mix(in oklab, currentcolor 50%, transparent); } } .accent-current\\/\\[0\\.5\\] { accent-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .accent-current\\/\\[0\\.5\\] { accent-color: color-mix(in oklab, currentcolor 50%, transparent); } } .accent-current\\/\\[50\\%\\] { accent-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .accent-current\\/\\[50\\%\\] { accent-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -9527,37 +9517,49 @@ test('accent', async () => { } .accent-red-500\\/2\\.5 { accent-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .accent-red-500\\/2\\.5 { accent-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .accent-red-500\\/2\\.25 { accent-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .accent-red-500\\/2\\.25 { accent-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .accent-red-500\\/2\\.75 { accent-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .accent-red-500\\/2\\.75 { accent-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .accent-red-500\\/50 { accent-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .accent-red-500\\/50 { accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .accent-red-500\\/\\[0\\.5\\] { accent-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .accent-red-500\\/\\[0\\.5\\] { accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .accent-red-500\\/\\[50\\%\\] { accent-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .accent-red-500\\/\\[50\\%\\] { accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -9660,19 +9662,25 @@ test('caret', async () => { } .caret-current\\/50 { caret-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .caret-current\\/50 { caret-color: color-mix(in oklab, currentcolor 50%, transparent); } } .caret-current\\/\\[0\\.5\\] { caret-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .caret-current\\/\\[0\\.5\\] { caret-color: color-mix(in oklab, currentcolor 50%, transparent); } } .caret-current\\/\\[50\\%\\] { caret-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .caret-current\\/\\[50\\%\\] { caret-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -9684,37 +9692,49 @@ test('caret', async () => { } .caret-red-500\\/2\\.5 { caret-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .caret-red-500\\/2\\.5 { caret-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .caret-red-500\\/2\\.25 { caret-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .caret-red-500\\/2\\.25 { caret-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .caret-red-500\\/2\\.75 { caret-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .caret-red-500\\/2\\.75 { caret-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .caret-red-500\\/50 { caret-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .caret-red-500\\/50 { caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .caret-red-500\\/\\[0\\.5\\] { caret-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .caret-red-500\\/\\[0\\.5\\] { caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .caret-red-500\\/\\[50\\%\\] { caret-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .caret-red-500\\/\\[50\\%\\] { caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -9795,123 +9815,105 @@ test('divide-color', async () => { --color-red-500: #ef4444; --border-color-best-blue: #6495ed; } - .divide-\\[\\#0088cc\\] { - :where(& > :not(:last-child)) { - border-color: #0088cc; - } + :where(.divide-\\[\\#0088cc\\] > :not(:last-child)) { + border-color: #0088cc; } - .divide-\\[\\#0088cc\\]\\/50 { - :where(& > :not(:last-child)) { - border-color: color-mix(in oklab, #0088cc 50%, transparent); - } + :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)) { + border-color: color-mix(in oklab, #0088cc 50%, transparent); } - .divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - :where(& > :not(:last-child)) { - border-color: color-mix(in oklab, #0088cc 50%, transparent); - } + :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)) { + border-color: color-mix(in oklab, #0088cc 50%, transparent); } - .divide-\\[\\#0088cc\\]\\/\\[50\\%\\] { - :where(& > :not(:last-child)) { - border-color: color-mix(in oklab, #0088cc 50%, transparent); - } + :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) { + border-color: color-mix(in oklab, #0088cc 50%, transparent); } - .divide-best-blue { - :where(& > :not(:last-child)) { - border-color: var(--border-color-best-blue); - } + :where(.divide-best-blue > :not(:last-child)) { + border-color: var(--border-color-best-blue); } - .divide-current { - :where(& > :not(:last-child)) { - border-color: currentcolor; - } + :where(.divide-current > :not(:last-child)) { + border-color: currentcolor; } - .divide-current\\/50 { - :where(& > :not(:last-child)) { - border-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, currentcolor 50%, transparent); - } - } + :where(.divide-current\\/50 > :not(:last-child)) { + border-color: currentcolor; } - .divide-current\\/\\[0\\.5\\] { - :where(& > :not(:last-child)) { - border-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, currentcolor 50%, transparent); - } + @supports (color: color-mix(in lab, red, red)) { + :where(.divide-current\\/50 > :not(:last-child)) { + border-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .divide-current\\/\\[50\\%\\] { - :where(& > :not(:last-child)) { - border-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, currentcolor 50%, transparent); - } - } + :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) { + border-color: currentcolor; } - .divide-inherit { - :where(& > :not(:last-child)) { - border-color: inherit; + @supports (color: color-mix(in lab, red, red)) { + :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) { + border-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .divide-red-500 { - :where(& > :not(:last-child)) { - border-color: var(--color-red-500); - } + :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { + border-color: currentcolor; } - .divide-red-500\\/2\\.5 { - :where(& > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); - } + @supports (color: color-mix(in lab, red, red)) { + :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { + border-color: color-mix(in oklab, currentcolor 50%, transparent); } } - .divide-red-500\\/2\\.25 { - :where(& > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); - } + :where(.divide-inherit > :not(:last-child)) { + border-color: inherit; + } + :where(.divide-red-500 > :not(:last-child)) { + border-color: var(--color-red-500); + } + :where(.divide-red-500\\/2\\.5 > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 2.5%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + :where(.divide-red-500\\/2\\.5 > :not(:last-child)) { + border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .divide-red-500\\/2\\.75 { - :where(& > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); - } + :where(.divide-red-500\\/2\\.25 > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 2.25%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + :where(.divide-red-500\\/2\\.25 > :not(:last-child)) { + border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .divide-red-500\\/50 { - :where(& > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + :where(.divide-red-500\\/2\\.75 > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 2.75%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + :where(.divide-red-500\\/2\\.75 > :not(:last-child)) { + border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .divide-red-500\\/\\[0\\.5\\] { - :where(& > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + :where(.divide-red-500\\/50 > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 50%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + :where(.divide-red-500\\/50 > :not(:last-child)) { + border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .divide-red-500\\/\\[50\\%\\] { - :where(& > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 50%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) { + border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .divide-transparent { - :where(& > :not(:last-child)) { - border-color: transparent; + :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) { + border-color: color-mix(in srgb, #ef4444 50%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + :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)) { + border-color: transparent; + } " `) expect( @@ -10459,16 +10461,24 @@ test('scrollbar-thumb', async () => { } .scrollbar-thumb-red-500\\/50 { --tw-scrollbar-thumb: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-thumb-red-500\\/50 { --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent); } + } + .scrollbar-thumb-red-500\\/50 { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } .scrollbar-thumb-red-500\\/\\[0\\.5\\] { --tw-scrollbar-thumb: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-thumb-red-500\\/\\[0\\.5\\] { --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent); } + } + .scrollbar-thumb-red-500\\/\\[0\\.5\\] { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } .scrollbar-thumb-transparent { @@ -10554,16 +10564,24 @@ test('scrollbar-track', async () => { } .scrollbar-track-red-500\\/50 { --tw-scrollbar-track: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-track-red-500\\/50 { --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent); } + } + .scrollbar-track-red-500\\/50 { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } .scrollbar-track-red-500\\/\\[0\\.5\\] { --tw-scrollbar-track: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-track-red-500\\/\\[0\\.5\\] { --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent); } + } + .scrollbar-track-red-500\\/\\[0\\.5\\] { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } .scrollbar-track-transparent { @@ -12064,19 +12082,25 @@ test('bg', async () => { } .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 { background-color: var(--some-var); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] { background-color: var(--some-var); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] { background-color: var(--some-var); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } @@ -12085,19 +12109,25 @@ test('bg', async () => { } .bg-\\[var\\(--some-var\\)\\]\\/50 { background-color: var(--some-var); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[var\\(--some-var\\)\\]\\/50 { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] { background-color: var(--some-var); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] { background-color: var(--some-var); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } @@ -12109,25 +12139,33 @@ test('bg', async () => { } .bg-current\\/50 { background-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-current\\/50 { background-color: color-mix(in oklab, currentcolor 50%, transparent); } } .bg-current\\/\\[0\\.5\\] { background-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-current\\/\\[0\\.5\\] { background-color: color-mix(in oklab, currentcolor 50%, transparent); } } .bg-current\\/\\[50\\%\\] { background-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-current\\/\\[50\\%\\] { background-color: color-mix(in oklab, currentcolor 50%, transparent); } } .bg-current\\/\\[var\\(--bg-opacity\\)\\] { background-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-current\\/\\[var\\(--bg-opacity\\)\\] { background-color: color-mix(in oklab, currentcolor var(--bg-opacity), transparent); } } @@ -12139,25 +12177,33 @@ test('bg', async () => { } .bg-red-500\\/2\\.5 { background-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-red-500\\/2\\.5 { background-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .bg-red-500\\/2\\.25 { background-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-red-500\\/2\\.25 { background-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .bg-red-500\\/2\\.75 { background-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-red-500\\/2\\.75 { background-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .bg-red-500\\/50 { background-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-red-500\\/50 { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -12166,13 +12212,17 @@ test('bg', async () => { } .bg-red-500\\/\\[0\\.5\\] { background-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-red-500\\/\\[0\\.5\\] { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .bg-red-500\\/\\[50\\%\\] { background-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-red-500\\/\\[50\\%\\] { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -12184,170 +12234,266 @@ test('bg', async () => { } .-bg-linear-45 { --tw-gradient-position: calc(45deg * -1); - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .-bg-linear-45 { --tw-gradient-position: calc(45deg * -1) in oklab; } + } + .-bg-linear-45 { background-image: linear-gradient(var(--tw-gradient-stops)); } .-bg-linear-45\\/oklab { --tw-gradient-position: calc(45deg * -1); - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .-bg-linear-45\\/oklab { --tw-gradient-position: calc(45deg * -1) in oklab; } + } + .-bg-linear-45\\/oklab { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-45 { --tw-gradient-position: 45deg; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-45 { --tw-gradient-position: 45deg in oklab; } + } + .bg-linear-45 { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-45\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: 45deg; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-45\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: 45deg in hsl longer hue; } + } + .bg-linear-45\\/\\[in_hsl_longer_hue\\] { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-45\\/oklab { --tw-gradient-position: 45deg; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-45\\/oklab { --tw-gradient-position: 45deg in oklab; } + } + .bg-linear-45\\/oklab { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-45\\/shorter { --tw-gradient-position: 45deg; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-45\\/shorter { --tw-gradient-position: 45deg in oklch shorter hue; } + } + .bg-linear-45\\/shorter { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-b { --tw-gradient-position: to bottom; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-b { --tw-gradient-position: to bottom in oklab; } + } + .bg-linear-to-b { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-bl { --tw-gradient-position: to bottom left; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-bl { --tw-gradient-position: to bottom left in oklab; } + } + .bg-linear-to-bl { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-br { --tw-gradient-position: to bottom right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-br { --tw-gradient-position: to bottom right in oklab; } + } + .bg-linear-to-br { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-l { --tw-gradient-position: to left; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-l { --tw-gradient-position: to left in oklab; } + } + .bg-linear-to-l { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r { --tw-gradient-position: to right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-r { --tw-gradient-position: to right in oklab; } + } + .bg-linear-to-r { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: to right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: to right in hsl longer hue; } + } + .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r\\/\\[longer\\] { --tw-gradient-position: to right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-r\\/\\[longer\\] { --tw-gradient-position: to right longer; } + } + .bg-linear-to-r\\/\\[longer\\] { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r\\/decreasing { --tw-gradient-position: to right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-r\\/decreasing { --tw-gradient-position: to right in oklch decreasing hue; } + } + .bg-linear-to-r\\/decreasing { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r\\/hsl { --tw-gradient-position: to right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-r\\/hsl { --tw-gradient-position: to right in hsl; } + } + .bg-linear-to-r\\/hsl { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r\\/increasing { --tw-gradient-position: to right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-r\\/increasing { --tw-gradient-position: to right in oklch increasing hue; } + } + .bg-linear-to-r\\/increasing { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r\\/longer { --tw-gradient-position: to right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-r\\/longer { --tw-gradient-position: to right in oklch longer hue; } + } + .bg-linear-to-r\\/longer { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r\\/oklab { --tw-gradient-position: to right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-r\\/oklab { --tw-gradient-position: to right in oklab; } + } + .bg-linear-to-r\\/oklab { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r\\/oklch { --tw-gradient-position: to right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-r\\/oklch { --tw-gradient-position: to right in oklch; } + } + .bg-linear-to-r\\/oklch { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r\\/shorter { --tw-gradient-position: to right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-r\\/shorter { --tw-gradient-position: to right in oklch shorter hue; } + } + .bg-linear-to-r\\/shorter { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r\\/srgb { --tw-gradient-position: to right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-r\\/srgb { --tw-gradient-position: to right in srgb; } + } + .bg-linear-to-r\\/srgb { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-t { --tw-gradient-position: to top; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-t { --tw-gradient-position: to top in oklab; } + } + .bg-linear-to-t { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-tl { --tw-gradient-position: to top left; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-tl { --tw-gradient-position: to top left in oklab; } + } + .bg-linear-to-tl { background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-tr { --tw-gradient-position: to top right; - @supports (background-image: linear-gradient(in lab, red, red)) { + } + @supports (background-image: linear-gradient(in lab, red, red)) { + .bg-linear-to-tr { --tw-gradient-position: to top right in oklab; } + } + .bg-linear-to-tr { background-image: linear-gradient(var(--tw-gradient-stops)); } .-bg-conic-45\\/oklab { @@ -12688,19 +12834,25 @@ test('bg', async () => { " .bg-current\\/custom { background-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-current\\/custom { background-color: color-mix(in oklab, currentcolor var(--opacity-custom, var(--custom-opacity)), transparent); } } .bg-current\\/half { background-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-current\\/half { background-color: color-mix(in oklab, currentcolor var(--opacity-half, 0.5), transparent); } } .\\[color\\:red\\]\\/half { color: color-mix(in srgb, red 0.5, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .\\[color\\:red\\]\\/half { color: color-mix(in oklab, red var(--opacity-half, 0.5), transparent); } } @@ -12858,23 +13010,35 @@ test('from', async () => { } .from-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-from: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .from-\\[color\\:var\\(--my-color\\)\\]\\/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)); } .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-from: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-from: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } .from-\\[var\\(--my-color\\)\\] { @@ -12883,23 +13047,35 @@ test('from', async () => { } .from-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-from: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .from-\\[var\\(--my-color\\)\\]\\/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)); } .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-from: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .from-\\[var\\(--my-color\\)\\]\\/\\[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)); } .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-from: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .from-\\[var\\(--my-color\\)\\]\\/\\[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)); } .from-current { @@ -12908,23 +13084,35 @@ test('from', async () => { } .from-current\\/50 { --tw-gradient-from: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-current\\/50 { --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent); } + } + .from-current\\/50 { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-current\\/\\[0\\.5\\] { --tw-gradient-from: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-current\\/\\[0\\.5\\] { --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)); } .from-current\\/\\[50\\%\\] { --tw-gradient-from: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-current\\/\\[50\\%\\] { --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent); } + } + .from-current\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-inherit { @@ -12937,23 +13125,35 @@ test('from', async () => { } .from-red-500\\/50 { --tw-gradient-from: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-red-500\\/50 { --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); } + } + .from-red-500\\/50 { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-red-500\\/\\[0\\.5\\] { --tw-gradient-from: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-red-500\\/\\[0\\.5\\] { --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)); } .from-red-500\\/\\[50\\%\\] { --tw-gradient-from: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .from-red-500\\/\\[50\\%\\] { --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); } + } + .from-red-500\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-transparent { @@ -13152,25 +13352,37 @@ test('via', async () => { } .via-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-via: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .via-\\[color\\:var\\(--my-color\\)\\]\\/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); } .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-via: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[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); } .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-via: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[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); } @@ -13181,25 +13393,37 @@ test('via', async () => { } .via-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-via: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .via-\\[var\\(--my-color\\)\\]\\/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); } .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-via: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .via-\\[var\\(--my-color\\)\\]\\/\\[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); } .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-via: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .via-\\[var\\(--my-color\\)\\]\\/\\[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); } @@ -13210,25 +13434,37 @@ test('via', async () => { } .via-current\\/50 { --tw-gradient-via: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-current\\/50 { --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent); } + } + .via-current\\/50 { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-current\\/\\[0\\.5\\] { --tw-gradient-via: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-current\\/\\[0\\.5\\] { --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); } .via-current\\/\\[50\\%\\] { --tw-gradient-via: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-current\\/\\[50\\%\\] { --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent); } + } + .via-current\\/\\[50\\%\\] { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } @@ -13244,25 +13480,37 @@ test('via', async () => { } .via-red-500\\/50 { --tw-gradient-via: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-red-500\\/50 { --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); } + } + .via-red-500\\/50 { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-red-500\\/\\[0\\.5\\] { --tw-gradient-via: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-red-500\\/\\[0\\.5\\] { --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); } .via-red-500\\/\\[50\\%\\] { --tw-gradient-via: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .via-red-500\\/\\[50\\%\\] { --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); } + } + .via-red-500\\/\\[50\\%\\] { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } @@ -13456,23 +13704,35 @@ test('to', async () => { } .to-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-to: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .to-\\[color\\:var\\(--my-color\\)\\]\\/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)); } .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-to: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-to: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } .to-\\[var\\(--my-color\\)\\] { @@ -13481,23 +13741,35 @@ test('to', async () => { } .to-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-to: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .to-\\[var\\(--my-color\\)\\]\\/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)); } .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-to: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .to-\\[var\\(--my-color\\)\\]\\/\\[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)); } .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-to: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } + } + .to-\\[var\\(--my-color\\)\\]\\/\\[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)); } .to-current { @@ -13506,23 +13778,35 @@ test('to', async () => { } .to-current\\/50 { --tw-gradient-to: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-current\\/50 { --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent); } + } + .to-current\\/50 { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-current\\/\\[0\\.5\\] { --tw-gradient-to: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-current\\/\\[0\\.5\\] { --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)); } .to-current\\/\\[50\\%\\] { --tw-gradient-to: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-current\\/\\[50\\%\\] { --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent); } + } + .to-current\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-inherit { @@ -13535,23 +13819,35 @@ test('to', async () => { } .to-red-500\\/50 { --tw-gradient-to: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-red-500\\/50 { --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); } + } + .to-red-500\\/50 { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-red-500\\/\\[0\\.5\\] { --tw-gradient-to: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-red-500\\/\\[0\\.5\\] { --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)); } .to-red-500\\/\\[50\\%\\] { --tw-gradient-to: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .to-red-500\\/\\[50\\%\\] { --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); } + } + .to-red-500\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-transparent { @@ -13967,7 +14263,9 @@ test('mask', async () => { " .\\[color\\:red\\]\\/half { color: color-mix(in srgb, red 0.5, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .\\[color\\:red\\]\\/half { color: color-mix(in oklab, red var(--opacity-half, 0.5), transparent); } } @@ -18858,19 +19156,25 @@ test('fill', async () => { } .fill-current\\/50 { fill: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .fill-current\\/50 { fill: color-mix(in oklab, currentcolor 50%, transparent); } } .fill-current\\/\\[0\\.5\\] { fill: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .fill-current\\/\\[0\\.5\\] { fill: color-mix(in oklab, currentcolor 50%, transparent); } } .fill-current\\/\\[50\\%\\] { fill: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .fill-current\\/\\[50\\%\\] { fill: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -18882,37 +19186,49 @@ test('fill', async () => { } .fill-red-500\\/2\\.5 { fill: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .fill-red-500\\/2\\.5 { fill: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .fill-red-500\\/2\\.25 { fill: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .fill-red-500\\/2\\.25 { fill: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .fill-red-500\\/2\\.75 { fill: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .fill-red-500\\/2\\.75 { fill: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .fill-red-500\\/50 { fill: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .fill-red-500\\/50 { fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .fill-red-500\\/\\[0\\.5\\] { fill: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .fill-red-500\\/\\[0\\.5\\] { fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .fill-red-500\\/\\[50\\%\\] { fill: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .fill-red-500\\/\\[50\\%\\] { fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -19018,19 +19334,25 @@ test('stroke', async () => { } .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 { stroke: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { stroke: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { stroke: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -19039,19 +19361,25 @@ test('stroke', async () => { } .stroke-\\[var\\(--my-color\\)\\]\\/50 { stroke: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[var\\(--my-color\\)\\]\\/50 { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { stroke: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { stroke: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -19063,19 +19391,25 @@ test('stroke', async () => { } .stroke-current\\/50 { stroke: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-current\\/50 { stroke: color-mix(in oklab, currentcolor 50%, transparent); } } .stroke-current\\/\\[0\\.5\\] { stroke: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-current\\/\\[0\\.5\\] { stroke: color-mix(in oklab, currentcolor 50%, transparent); } } .stroke-current\\/\\[50\\%\\] { stroke: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-current\\/\\[50\\%\\] { stroke: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -19090,37 +19424,49 @@ test('stroke', async () => { } .stroke-red-500\\/2\\.5 { stroke: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-red-500\\/2\\.5 { stroke: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .stroke-red-500\\/2\\.25 { stroke: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-red-500\\/2\\.25 { stroke: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .stroke-red-500\\/2\\.75 { stroke: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-red-500\\/2\\.75 { stroke: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .stroke-red-500\\/50 { stroke: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-red-500\\/50 { stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .stroke-red-500\\/\\[0\\.5\\] { stroke: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-red-500\\/\\[0\\.5\\] { stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .stroke-red-500\\/\\[50\\%\\] { stroke: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .stroke-red-500\\/\\[50\\%\\] { stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -20162,118 +20508,102 @@ test('placeholder', async () => { :root, :host { --color-red-500: #ef4444; } - .placeholder-\\[\\#0088cc\\] { - &::placeholder { - color: #0088cc; - } + .placeholder-\\[\\#0088cc\\]::placeholder { + color: #0088cc; } - .placeholder-\\[\\#0088cc\\]\\/50 { - &::placeholder { - color: color-mix(in oklab, #0088cc 50%, transparent); - } + .placeholder-\\[\\#0088cc\\]\\/50::placeholder { + color: color-mix(in oklab, #0088cc 50%, transparent); } - .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - &::placeholder { - color: color-mix(in oklab, #0088cc 50%, transparent); - } + .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder { + color: color-mix(in oklab, #0088cc 50%, transparent); } - .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\] { - &::placeholder { - color: color-mix(in oklab, #0088cc 50%, transparent); - } + .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { + color: color-mix(in oklab, #0088cc 50%, transparent); } - .placeholder-current { - &::placeholder { - color: currentcolor; - } + .placeholder-current::placeholder { + color: currentcolor; } - .placeholder-current\\/50 { - &::placeholder { - color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, currentcolor 50%, transparent); - } - } + .placeholder-current\\/50::placeholder { + color: currentcolor; } - .placeholder-current\\/\\[0\\.5\\] { - &::placeholder { - color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, currentcolor 50%, transparent); - } + @supports (color: color-mix(in lab, red, red)) { + .placeholder-current\\/50::placeholder { + color: color-mix(in oklab, currentcolor 50%, transparent); } } - .placeholder-current\\/\\[50\\%\\] { - &::placeholder { - color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, currentcolor 50%, transparent); - } - } + .placeholder-current\\/\\[0\\.5\\]::placeholder { + color: currentcolor; } - .placeholder-inherit { - &::placeholder { - color: inherit; + @supports (color: color-mix(in lab, red, red)) { + .placeholder-current\\/\\[0\\.5\\]::placeholder { + color: color-mix(in oklab, currentcolor 50%, transparent); } } - .placeholder-red-500 { - &::placeholder { - color: var(--color-red-500); - } + .placeholder-current\\/\\[50\\%\\]::placeholder { + color: currentcolor; } - .placeholder-red-500\\/2\\.5 { - &::placeholder { - color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); - } + @supports (color: color-mix(in lab, red, red)) { + .placeholder-current\\/\\[50\\%\\]::placeholder { + color: color-mix(in oklab, currentcolor 50%, transparent); } } - .placeholder-red-500\\/2\\.25 { - &::placeholder { - color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); - } + .placeholder-inherit::placeholder { + color: inherit; + } + .placeholder-red-500::placeholder { + color: var(--color-red-500); + } + .placeholder-red-500\\/2\\.5::placeholder { + color: color-mix(in srgb, #ef4444 2.5%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + .placeholder-red-500\\/2\\.5::placeholder { + color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } - .placeholder-red-500\\/2\\.75 { - &::placeholder { - color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); - } + .placeholder-red-500\\/2\\.25::placeholder { + color: color-mix(in srgb, #ef4444 2.25%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + .placeholder-red-500\\/2\\.25::placeholder { + color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } - .placeholder-red-500\\/50 { - &::placeholder { - color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .placeholder-red-500\\/2\\.75::placeholder { + color: color-mix(in srgb, #ef4444 2.75%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + .placeholder-red-500\\/2\\.75::placeholder { + color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } - .placeholder-red-500\\/\\[0\\.5\\] { - &::placeholder { - color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .placeholder-red-500\\/50::placeholder { + color: color-mix(in srgb, #ef4444 50%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + .placeholder-red-500\\/50::placeholder { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .placeholder-red-500\\/\\[50\\%\\] { - &::placeholder { - color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } + .placeholder-red-500\\/\\[0\\.5\\]::placeholder { + color: color-mix(in srgb, #ef4444 50%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + .placeholder-red-500\\/\\[0\\.5\\]::placeholder { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } - .placeholder-transparent { - &::placeholder { - color: transparent; + .placeholder-red-500\\/\\[50\\%\\]::placeholder { + color: color-mix(in srgb, #ef4444 50%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + .placeholder-red-500\\/\\[50\\%\\]::placeholder { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .placeholder-transparent::placeholder { + color: transparent; + } " `) expect( @@ -20377,19 +20707,25 @@ test('decoration', async () => { } .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 { text-decoration-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { text-decoration-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { text-decoration-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -20398,19 +20734,25 @@ test('decoration', async () => { } .decoration-\\[var\\(--my-color\\)\\]\\/50 { text-decoration-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[var\\(--my-color\\)\\]\\/50 { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { text-decoration-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { text-decoration-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -20422,19 +20764,25 @@ test('decoration', async () => { } .decoration-current\\/50 { text-decoration-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-current\\/50 { text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); } } .decoration-current\\/\\[0\\.5\\] { text-decoration-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-current\\/\\[0\\.5\\] { text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); } } .decoration-current\\/\\[50\\%\\] { text-decoration-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-current\\/\\[50\\%\\] { text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -20446,19 +20794,25 @@ test('decoration', async () => { } .decoration-red-500\\/50 { text-decoration-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-red-500\\/50 { text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .decoration-red-500\\/\\[0\\.5\\] { text-decoration-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-red-500\\/\\[0\\.5\\] { text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .decoration-red-500\\/\\[50\\%\\] { text-decoration-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .decoration-red-500\\/\\[50\\%\\] { text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -20770,16 +21124,24 @@ test('filter', async () => { } .drop-shadow-red-500 { --tw-drop-shadow-color: #ef4444; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .drop-shadow-red-500 { --tw-drop-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-drop-shadow-alpha), transparent); } + } + .drop-shadow-red-500 { --tw-drop-shadow: var(--tw-drop-shadow-size); } .drop-shadow-red-500\\/50 { --tw-drop-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .drop-shadow-red-500\\/50 { --tw-drop-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-drop-shadow-alpha), transparent); } + } + .drop-shadow-red-500\\/50 { --tw-drop-shadow: var(--tw-drop-shadow-size); } .grayscale { @@ -22410,7 +22772,9 @@ test('outline', async () => { .outline-hidden { --tw-outline-style: none; outline-style: none; - @media (forced-colors: active) { + } + @media (forced-colors: active) { + .outline-hidden { outline: 2px solid transparent; outline-offset: 2px; } @@ -22476,19 +22840,25 @@ test('outline', async () => { } .outline-\\[color\\:var\\(--value\\)\\]\\/50 { outline-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[color\\:var\\(--value\\)\\]\\/50 { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { outline-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { outline-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } @@ -22497,19 +22867,25 @@ test('outline', async () => { } .outline-\\[var\\(--value\\)\\]\\/50 { outline-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[var\\(--value\\)\\]\\/50 { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] { outline-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] { outline-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } @@ -22521,19 +22897,25 @@ test('outline', async () => { } .outline-current\\/50 { outline-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-current\\/50 { outline-color: color-mix(in oklab, currentcolor 50%, transparent); } } .outline-current\\/\\[0\\.5\\] { outline-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-current\\/\\[0\\.5\\] { outline-color: color-mix(in oklab, currentcolor 50%, transparent); } } .outline-current\\/\\[50\\%\\] { outline-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-current\\/\\[50\\%\\] { outline-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -22545,19 +22927,25 @@ test('outline', async () => { } .outline-red-500\\/50 { outline-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-red-500\\/50 { outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .outline-red-500\\/\\[0\\.5\\] { outline-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-red-500\\/\\[0\\.5\\] { outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .outline-red-500\\/\\[50\\%\\] { outline-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .outline-red-500\\/\\[50\\%\\] { outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -22999,19 +23387,25 @@ test('text', async () => { } .text-\\[color\\:var\\(--my-color\\)\\]\\/50 { color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-\\[color\\:var\\(--my-color\\)\\]\\/50 { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -23020,19 +23414,25 @@ test('text', async () => { } .text-\\[var\\(--my-color\\)\\]\\/50 { color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-\\[var\\(--my-color\\)\\]\\/50 { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -23044,19 +23444,25 @@ test('text', async () => { } .text-current\\/50 { color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-current\\/50 { color: color-mix(in oklab, currentcolor 50%, transparent); } } .text-current\\/\\[0\\.5\\] { color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-current\\/\\[0\\.5\\] { color: color-mix(in oklab, currentcolor 50%, transparent); } } .text-current\\/\\[50\\%\\] { color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-current\\/\\[50\\%\\] { color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -23068,37 +23474,49 @@ test('text', async () => { } .text-red-500\\/2\\.5 { color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red-500\\/2\\.5 { color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .text-red-500\\/2\\.25 { color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red-500\\/2\\.25 { color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .text-red-500\\/2\\.75 { color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red-500\\/2\\.75 { color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .text-red-500\\/50 { color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red-500\\/50 { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .text-red-500\\/\\[0\\.5\\] { color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red-500\\/\\[0\\.5\\] { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .text-red-500\\/\\[50\\%\\] { color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-red-500\\/\\[50\\%\\] { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -23204,14 +23622,18 @@ test('text-shadow', async () => { .text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-text-shadow-alpha: 25%; text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value)); - @supports (color: lab(from red l a b)) { + } + @supports (color: lab(from red l a b)) { + .text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(from var(--value) l a b / 25%)); } } .text-shadow-\\[10px_10px\\]\\/25 { --tw-text-shadow-alpha: 25%; text-shadow: 10px 10px var(--tw-text-shadow-color, currentcolor); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[10px_10px\\]\\/25 { text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); } } @@ -23228,25 +23650,33 @@ test('text-shadow', async () => { } .text-shadow-\\[\\#0088cc\\] { --tw-text-shadow-color: #0088cc; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[\\#0088cc\\] { --tw-text-shadow-color: color-mix(in oklab, #0088cc var(--tw-text-shadow-alpha), transparent); } } .text-shadow-\\[\\#0088cc\\]\\/50 { --tw-text-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[\\#0088cc\\]\\/50 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { --tw-text-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-text-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } @@ -23261,25 +23691,33 @@ test('text-shadow', async () => { } .text-shadow-\\[color\\:var\\(--value\\)\\] { --tw-text-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[color\\:var\\(--value\\)\\] { --tw-text-shadow-color: color-mix(in oklab, var(--value) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-text-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-text-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-text-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } @@ -23291,25 +23729,33 @@ test('text-shadow', async () => { } .text-shadow-current { --tw-text-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-current { --tw-text-shadow-color: color-mix(in oklab, currentcolor var(--tw-text-shadow-alpha), transparent); } } .text-shadow-current\\/50 { --tw-text-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-current\\/50 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-current\\/\\[0\\.5\\] { --tw-text-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-current\\/\\[0\\.5\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-current\\/\\[50\\%\\] { --tw-text-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-current\\/\\[50\\%\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } @@ -23321,43 +23767,57 @@ test('text-shadow', async () => { } .text-shadow-red-500 { --tw-text-shadow-color: #ef4444; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-red-500 { --tw-text-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-red-500\\/2\\.5 { --tw-text-shadow-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-red-500\\/2\\.5 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-red-500\\/2\\.25 { --tw-text-shadow-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-red-500\\/2\\.25 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-red-500\\/2\\.75 { --tw-text-shadow-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-red-500\\/2\\.75 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-red-500\\/50 { --tw-text-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-red-500\\/50 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-red-500\\/\\[0\\.5\\] { --tw-text-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-red-500\\/\\[0\\.5\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } .text-shadow-red-500\\/\\[50\\%\\] { --tw-text-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-red-500\\/\\[50\\%\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } @@ -23366,7 +23826,9 @@ test('text-shadow', async () => { } .text-shadow-transparent { --tw-text-shadow-color: transparent; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .text-shadow-transparent { --tw-text-shadow-color: color-mix(in oklab, transparent var(--tw-text-shadow-alpha), transparent); } } @@ -23475,17 +23937,25 @@ test('shadow', async () => { .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-shadow-alpha: 25%; --tw-shadow: 12px 12px var(--tw-shadow-color, var(--value)); - @supports (color: lab(from red l a b)) { + } + @supports (color: lab(from red l a b)) { + .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(from var(--value) l a b / 25%)); } + } + .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\\[10px_10px\\]\\/25 { --tw-shadow-alpha: 25%; --tw-shadow: 10px 10px var(--tw-shadow-color, currentcolor); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[10px_10px\\]\\/25 { --tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); } + } + .shadow-\\[10px_10px\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\\[12px_12px_\\#0088cc\\]\\/25 { @@ -23532,79 +24002,105 @@ test('shadow', async () => { } .shadow-\\[\\#0088cc\\] { --tw-shadow-color: #0088cc; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[\\#0088cc\\] { --tw-shadow-color: color-mix(in oklab, #0088cc var(--tw-shadow-alpha), transparent); } } .shadow-\\[\\#0088cc\\]\\/50 { --tw-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[\\#0088cc\\]\\/50 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { --tw-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-\\[color\\:var\\(--value\\)\\] { --tw-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[color\\:var\\(--value\\)\\] { --tw-shadow-color: color-mix(in oklab, var(--value) var(--tw-shadow-alpha), transparent); } } .shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-blue-500 { --tw-shadow-color: #3b82f6; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-blue-500 { --tw-shadow-color: color-mix(in oklab, var(--box-shadow-color-blue-500) var(--tw-shadow-alpha), transparent); } } .shadow-current { --tw-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-current { --tw-shadow-color: color-mix(in oklab, currentcolor var(--tw-shadow-alpha), transparent); } } .shadow-current\\/50 { --tw-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-current\\/50 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-current\\/\\[0\\.5\\] { --tw-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-current\\/\\[0\\.5\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-current\\/\\[50\\%\\] { --tw-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-current\\/\\[50\\%\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); } } @@ -23613,49 +24109,65 @@ test('shadow', async () => { } .shadow-red-500 { --tw-shadow-color: #ef4444; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-red-500 { --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent); } } .shadow-red-500\\/2\\.5 { --tw-shadow-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-red-500\\/2\\.5 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-red-500\\/2\\.25 { --tw-shadow-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-red-500\\/2\\.25 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-red-500\\/2\\.75 { --tw-shadow-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-red-500\\/2\\.75 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-red-500\\/50 { --tw-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-red-500\\/50 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-red-500\\/\\[0\\.5\\] { --tw-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-red-500\\/\\[0\\.5\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-red-500\\/\\[50\\%\\] { --tw-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-red-500\\/\\[50\\%\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-transparent { --tw-shadow-color: transparent; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .shadow-transparent { --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent); } } @@ -23831,25 +24343,37 @@ test('inset-shadow', async () => { .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 { --tw-inset-shadow-alpha: 25%; --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #0088cc), inset 12px 12px var(--tw-inset-shadow-color, var(--value,#0088cc)); - @supports (color: lab(from red l a b)) { + } + @supports (color: lab(from red l a b)) { + .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 { --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from #0088cc l a b / 25%)), inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value,#0088cc) l a b / 25%)); } + } + .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-inset-shadow-alpha: 25%; --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value)); - @supports (color: lab(from red l a b)) { + } + @supports (color: lab(from red l a b)) { + .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value) l a b / 25%)); } + } + .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .inset-shadow-\\[10px_10px\\]\\/25 { --tw-inset-shadow-alpha: 25%; --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, currentcolor); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[10px_10px\\]\\/25 { --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); } + } + .inset-shadow-\\[10px_10px\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .inset-shadow-\\[12px_12px_\\#0088cc\\]\\/25 { @@ -23900,73 +24424,97 @@ test('inset-shadow', async () => { } .inset-shadow-\\[\\#0088cc\\] { --tw-inset-shadow-color: #0088cc; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[\\#0088cc\\] { --tw-inset-shadow-color: color-mix(in oklab, #0088cc var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-\\[\\#0088cc\\]\\/50 { --tw-inset-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[\\#0088cc\\]\\/50 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { --tw-inset-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-inset-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-\\[color\\:var\\(--value\\)\\] { --tw-inset-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[color\\:var\\(--value\\)\\] { --tw-inset-shadow-color: color-mix(in oklab, var(--value) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-inset-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-inset-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-inset-shadow-color: var(--value); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-current { --tw-inset-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-current { --tw-inset-shadow-color: color-mix(in oklab, currentcolor var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-current\\/50 { --tw-inset-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-current\\/50 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-current\\/\\[0\\.5\\] { --tw-inset-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-current\\/\\[0\\.5\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-current\\/\\[50\\%\\] { --tw-inset-shadow-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-current\\/\\[50\\%\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } @@ -23975,49 +24523,65 @@ test('inset-shadow', async () => { } .inset-shadow-red-500 { --tw-inset-shadow-color: #ef4444; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-red-500 { --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-red-500\\/2\\.5 { --tw-inset-shadow-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-red-500\\/2\\.5 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-red-500\\/2\\.25 { --tw-inset-shadow-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-red-500\\/2\\.25 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-red-500\\/2\\.75 { --tw-inset-shadow-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-red-500\\/2\\.75 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-red-500\\/50 { --tw-inset-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-red-500\\/50 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-red-500\\/\\[0\\.5\\] { --tw-inset-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-red-500\\/\\[0\\.5\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-red-500\\/\\[50\\%\\] { --tw-inset-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-red-500\\/\\[50\\%\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } .inset-shadow-transparent { --tw-inset-shadow-color: transparent; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-shadow-transparent { --tw-inset-shadow-color: color-mix(in oklab, transparent var(--tw-inset-shadow-alpha), transparent); } } @@ -24233,19 +24797,25 @@ test('ring', async () => { } .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -24254,19 +24824,25 @@ test('ring', async () => { } .ring-\\[var\\(--my-color\\)\\]\\/50 { --tw-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[var\\(--my-color\\)\\]\\/50 { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -24278,19 +24854,25 @@ test('ring', async () => { } .ring-current\\/50 { --tw-ring-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-current\\/50 { --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } .ring-current\\/\\[0\\.5\\] { --tw-ring-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-current\\/\\[0\\.5\\] { --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } .ring-current\\/\\[50\\%\\] { --tw-ring-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-current\\/\\[50\\%\\] { --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -24302,37 +24884,49 @@ test('ring', async () => { } .ring-red-500\\/2\\.5 { --tw-ring-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-red-500\\/2\\.5 { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .ring-red-500\\/2\\.25 { --tw-ring-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-red-500\\/2\\.25 { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .ring-red-500\\/2\\.75 { --tw-ring-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-red-500\\/2\\.75 { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .ring-red-500\\/50 { --tw-ring-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-red-500\\/50 { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .ring-red-500\\/\\[0\\.5\\] { --tw-ring-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-red-500\\/\\[0\\.5\\] { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .ring-red-500\\/\\[50\\%\\] { --tw-ring-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-red-500\\/\\[50\\%\\] { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -24669,19 +25263,25 @@ test('inset-ring', async () => { } .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-inset-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-inset-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-inset-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -24690,19 +25290,25 @@ test('inset-ring', async () => { } .inset-ring-\\[var\\(--my-color\\)\\]\\/50 { --tw-inset-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[var\\(--my-color\\)\\]\\/50 { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-inset-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-inset-ring-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -24711,19 +25317,25 @@ test('inset-ring', async () => { } .inset-ring-current\\/50 { --tw-inset-ring-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-current\\/50 { --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } .inset-ring-current\\/\\[0\\.5\\] { --tw-inset-ring-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-current\\/\\[0\\.5\\] { --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } .inset-ring-current\\/\\[50\\%\\] { --tw-inset-ring-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-current\\/\\[50\\%\\] { --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -24735,37 +25347,49 @@ test('inset-ring', async () => { } .inset-ring-red-500\\/2\\.5 { --tw-inset-ring-color: color-mix(in srgb, #ef4444 2.5%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-red-500\\/2\\.5 { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } .inset-ring-red-500\\/2\\.25 { --tw-inset-ring-color: color-mix(in srgb, #ef4444 2.25%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-red-500\\/2\\.25 { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } .inset-ring-red-500\\/2\\.75 { --tw-inset-ring-color: color-mix(in srgb, #ef4444 2.75%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-red-500\\/2\\.75 { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } .inset-ring-red-500\\/50 { --tw-inset-ring-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-red-500\\/50 { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .inset-ring-red-500\\/\\[0\\.5\\] { --tw-inset-ring-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-red-500\\/\\[0\\.5\\] { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .inset-ring-red-500\\/\\[50\\%\\] { --tw-inset-ring-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .inset-ring-red-500\\/\\[50\\%\\] { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -24990,19 +25614,25 @@ test('ring-offset', async () => { } .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-ring-offset-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-offset-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-offset-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -25011,19 +25641,25 @@ test('ring-offset', async () => { } .ring-offset-\\[var\\(--my-color\\)\\]\\/50 { --tw-ring-offset-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[var\\(--my-color\\)\\]\\/50 { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-offset-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-offset-color: var(--my-color); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } @@ -25035,19 +25671,25 @@ test('ring-offset', async () => { } .ring-offset-current\\/50 { --tw-ring-offset-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-current\\/50 { --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); } } .ring-offset-current\\/\\[0\\.5\\] { --tw-ring-offset-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-current\\/\\[0\\.5\\] { --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); } } .ring-offset-current\\/\\[50\\%\\] { --tw-ring-offset-color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-current\\/\\[50\\%\\] { --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -25059,19 +25701,25 @@ test('ring-offset', async () => { } .ring-offset-red-500\\/50 { --tw-ring-offset-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-red-500\\/50 { --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .ring-offset-red-500\\/\\[0\\.5\\] { --tw-ring-offset-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-red-500\\/\\[0\\.5\\] { --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } .ring-offset-red-500\\/\\[50\\%\\] { --tw-ring-offset-color: color-mix(in srgb, #ef4444 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .ring-offset-red-500\\/\\[50\\%\\] { --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } @@ -25359,8 +26007,8 @@ describe('custom utilities', () => { text-box-trim: both; text-box-edge: cap alphabetic; } - .lg\\:text-trim { - @media (width >= 1024px) { + @media (width >= 1024px) { + .lg\\:text-trim { text-box-trim: both; text-box-edge: cap alphabetic; } @@ -25457,8 +26105,6 @@ describe('custom utilities', () => { .really-round { --custom-prop: hi; border-radius: 50rem; - } - .really-round { border-radius: 30rem; } } @@ -25526,8 +26172,6 @@ describe('custom utilities', () => { font-size: var(--text-sm, 0.8755rem); line-height: var(--text-sm--line-height, 1.255rem); text-rendering: optimizeLegibility; - } - .text-sm { font-size: var(--text-sm, 0.875rem); line-height: var(--tw-leading, var(--text-sm--line-height, 1.25rem)); } @@ -25655,22 +26299,20 @@ describe('custom utilities', () => { " .bar { z-index: 10; - .baz { - z-index: 20; - } + } + .bar .baz { + z-index: 20; } .foo { display: flex; flex-direction: column; text-decoration-line: underline; } - .hover\\:foo { - &:hover { - @media (hover: hover) { - display: flex; - flex-direction: column; - text-decoration-line: underline; - } + @media (hover: hover) { + .hover\\:foo:hover { + display: flex; + flex-direction: column; + text-decoration-line: underline; } } " @@ -25697,7 +26339,9 @@ describe('custom utilities', () => { " .bar { flex-wrap: wrap; - @media (prefers-color-scheme: dark) { + } + @media (prefers-color-scheme: dark) { + .bar { display: flex; flex-direction: column; text-decoration-line: underline; diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 8c63b9afb72f..14bda4dd1de8 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -8,10 +8,8 @@ const css = String.raw test('*', async () => { expect(await run(['*:flex'])).toMatchInlineSnapshot(` " - .\\*\\:flex { - :is(& > *) { - display: flex; - } + :is(.\\*\\:flex > *) { + display: flex; } " `) @@ -21,10 +19,8 @@ test('*', async () => { test('**', async () => { expect(await run(['**:flex'])).toMatchInlineSnapshot(` " - .\\*\\*\\:flex { - :is(& *) { - display: flex; - } + :is(.\\*\\*\\:flex *) { + display: flex; } " `) @@ -34,10 +30,8 @@ test('**', async () => { test('first-letter', async () => { expect(await run(['first-letter:flex'])).toMatchInlineSnapshot(` " - .first-letter\\:flex { - &::first-letter { - display: flex; - } + .first-letter\\:flex::first-letter { + display: flex; } " `) @@ -47,10 +41,8 @@ test('first-letter', async () => { test('first-line', async () => { expect(await run(['first-line:flex'])).toMatchInlineSnapshot(` " - .first-line\\:flex { - &::first-line { - display: flex; - } + .first-line\\:flex::first-line { + display: flex; } " `) @@ -60,19 +52,17 @@ test('first-line', async () => { test('marker', async () => { expect(await run(['marker:flex'])).toMatchInlineSnapshot(` " - .marker\\:flex { - & *::marker { - display: flex; - } - &::marker { - display: flex; - } - & *::-webkit-details-marker { - display: flex; - } - &::-webkit-details-marker { - display: flex; - } + .marker\\:flex *::marker { + display: flex; + } + .marker\\:flex::marker { + display: flex; + } + .marker\\:flex *::-webkit-details-marker { + display: flex; + } + .marker\\:flex::-webkit-details-marker { + display: flex; } " `) @@ -82,13 +72,11 @@ test('marker', async () => { test('selection', async () => { expect(await run(['selection:flex'])).toMatchInlineSnapshot(` " - .selection\\:flex { - & *::selection { - display: flex; - } - &::selection { - display: flex; - } + .selection\\:flex *::selection { + display: flex; + } + .selection\\:flex::selection { + display: flex; } " `) @@ -98,10 +86,8 @@ test('selection', async () => { test('file', async () => { expect(await run(['file:flex'])).toMatchInlineSnapshot(` " - .file\\:flex { - &::file-selector-button { - display: flex; - } + .file\\:flex::file-selector-button { + display: flex; } " `) @@ -111,10 +97,8 @@ test('file', async () => { test('placeholder', async () => { expect(await run(['placeholder:flex'])).toMatchInlineSnapshot(` " - .placeholder\\:flex { - &::placeholder { - display: flex; - } + .placeholder\\:flex::placeholder { + display: flex; } " `) @@ -124,10 +108,8 @@ test('placeholder', async () => { test('backdrop', async () => { expect(await run(['backdrop:flex'])).toMatchInlineSnapshot(` " - .backdrop\\:flex { - &::backdrop { - display: flex; - } + .backdrop\\:flex::backdrop { + display: flex; } " `) @@ -137,10 +119,8 @@ test('backdrop', async () => { test('details-content', async () => { expect(await run(['details-content:flex'])).toMatchInlineSnapshot(` " - .details-content\\:flex { - &::details-content { - display: flex; - } + .details-content\\:flex::details-content { + display: flex; } " `) @@ -151,11 +131,9 @@ test('before', async () => { expect(await run(['before:flex'])).toMatchInlineSnapshot(` " @layer properties; - .before\\:flex { - &::before { - content: var(--tw-content); - display: flex; - } + .before\\:flex::before { + content: var(--tw-content); + display: flex; } @property --tw-content { syntax: "*"; @@ -178,11 +156,9 @@ test('after', async () => { expect(await run(['after:flex'])).toMatchInlineSnapshot(` " @layer properties; - .after\\:flex { - &::after { - content: var(--tw-content); - display: flex; - } + .after\\:flex::after { + content: var(--tw-content); + display: flex; } @property --tw-content { syntax: "*"; @@ -204,20 +180,14 @@ test('after', async () => { test('first', async () => { expect(await run(['first:flex', 'group-first:flex', 'peer-first:flex'])).toMatchInlineSnapshot(` " - .group-first\\:flex { - &:is(:where(.group):first-child *) { - display: flex; - } + .group-first\\:flex:is(:where(.group):first-child *) { + display: flex; } - .peer-first\\:flex { - &:is(:where(.peer):first-child ~ *) { - display: flex; - } + .peer-first\\:flex:is(:where(.peer):first-child ~ *) { + display: flex; } - .first\\:flex { - &:first-child { - display: flex; - } + .first\\:flex:first-child { + display: flex; } " `) @@ -227,20 +197,14 @@ test('first', async () => { test('last', async () => { expect(await run(['last:flex', 'group-last:flex', 'peer-last:flex'])).toMatchInlineSnapshot(` " - .group-last\\:flex { - &:is(:where(.group):last-child *) { - display: flex; - } + .group-last\\:flex:is(:where(.group):last-child *) { + display: flex; } - .peer-last\\:flex { - &:is(:where(.peer):last-child ~ *) { - display: flex; - } + .peer-last\\:flex:is(:where(.peer):last-child ~ *) { + display: flex; } - .last\\:flex { - &:last-child { - display: flex; - } + .last\\:flex:last-child { + display: flex; } " `) @@ -250,20 +214,14 @@ test('last', async () => { test('only', async () => { expect(await run(['only:flex', 'group-only:flex', 'peer-only:flex'])).toMatchInlineSnapshot(` " - .group-only\\:flex { - &:is(:where(.group):only-child *) { - display: flex; - } + .group-only\\:flex:is(:where(.group):only-child *) { + display: flex; } - .peer-only\\:flex { - &:is(:where(.peer):only-child ~ *) { - display: flex; - } + .peer-only\\:flex:is(:where(.peer):only-child ~ *) { + display: flex; } - .only\\:flex { - &:only-child { - display: flex; - } + .only\\:flex:only-child { + display: flex; } " `) @@ -273,20 +231,14 @@ test('only', async () => { test('odd', async () => { expect(await run(['odd:flex', 'group-odd:flex', 'peer-odd:flex'])).toMatchInlineSnapshot(` " - .group-odd\\:flex { - &:is(:where(.group):nth-child(odd) *) { - display: flex; - } + .group-odd\\:flex:is(:where(.group):nth-child(odd) *) { + display: flex; } - .peer-odd\\:flex { - &:is(:where(.peer):nth-child(odd) ~ *) { - display: flex; - } + .peer-odd\\:flex:is(:where(.peer):nth-child(odd) ~ *) { + display: flex; } - .odd\\:flex { - &:nth-child(odd) { - display: flex; - } + .odd\\:flex:nth-child(odd) { + display: flex; } " `) @@ -296,20 +248,14 @@ test('odd', async () => { test('even', async () => { expect(await run(['even:flex', 'group-even:flex', 'peer-even:flex'])).toMatchInlineSnapshot(` " - .group-even\\:flex { - &:is(:where(.group):nth-child(even) *) { - display: flex; - } + .group-even\\:flex:is(:where(.group):nth-child(even) *) { + display: flex; } - .peer-even\\:flex { - &:is(:where(.peer):nth-child(even) ~ *) { - display: flex; - } + .peer-even\\:flex:is(:where(.peer):nth-child(even) ~ *) { + display: flex; } - .even\\:flex { - &:nth-child(even) { - display: flex; - } + .even\\:flex:nth-child(even) { + display: flex; } " `) @@ -320,20 +266,14 @@ test('first-of-type', async () => { expect(await run(['first-of-type:flex', 'group-first-of-type:flex', 'peer-first-of-type:flex'])) .toMatchInlineSnapshot(` " - .group-first-of-type\\:flex { - &:is(:where(.group):first-of-type *) { - display: flex; - } + .group-first-of-type\\:flex:is(:where(.group):first-of-type *) { + display: flex; } - .peer-first-of-type\\:flex { - &:is(:where(.peer):first-of-type ~ *) { - display: flex; - } + .peer-first-of-type\\:flex:is(:where(.peer):first-of-type ~ *) { + display: flex; } - .first-of-type\\:flex { - &:first-of-type { - display: flex; - } + .first-of-type\\:flex:first-of-type { + display: flex; } " `) @@ -344,20 +284,14 @@ test('last-of-type', async () => { expect(await run(['last-of-type:flex', 'group-last-of-type:flex', 'peer-last-of-type:flex'])) .toMatchInlineSnapshot(` " - .group-last-of-type\\:flex { - &:is(:where(.group):last-of-type *) { - display: flex; - } + .group-last-of-type\\:flex:is(:where(.group):last-of-type *) { + display: flex; } - .peer-last-of-type\\:flex { - &:is(:where(.peer):last-of-type ~ *) { - display: flex; - } + .peer-last-of-type\\:flex:is(:where(.peer):last-of-type ~ *) { + display: flex; } - .last-of-type\\:flex { - &:last-of-type { - display: flex; - } + .last-of-type\\:flex:last-of-type { + display: flex; } " `) @@ -368,20 +302,14 @@ test('only-of-type', async () => { expect(await run(['only-of-type:flex', 'group-only-of-type:flex', 'peer-only-of-type:flex'])) .toMatchInlineSnapshot(` " - .group-only-of-type\\:flex { - &:is(:where(.group):only-of-type *) { - display: flex; - } + .group-only-of-type\\:flex:is(:where(.group):only-of-type *) { + display: flex; } - .peer-only-of-type\\:flex { - &:is(:where(.peer):only-of-type ~ *) { - display: flex; - } + .peer-only-of-type\\:flex:is(:where(.peer):only-of-type ~ *) { + display: flex; } - .only-of-type\\:flex { - &:only-of-type { - display: flex; - } + .only-of-type\\:flex:only-of-type { + display: flex; } " `) @@ -392,20 +320,14 @@ test('visited', async () => { expect(await run(['visited:flex', 'group-visited:flex', 'peer-visited:flex'])) .toMatchInlineSnapshot(` " - .group-visited\\:flex { - &:is(:where(.group):visited *) { - display: flex; - } + .group-visited\\:flex:is(:where(.group):visited *) { + display: flex; } - .peer-visited\\:flex { - &:is(:where(.peer):visited ~ *) { - display: flex; - } + .peer-visited\\:flex:is(:where(.peer):visited ~ *) { + display: flex; } - .visited\\:flex { - &:visited { - display: flex; - } + .visited\\:flex:visited { + display: flex; } " `) @@ -416,20 +338,14 @@ test('target', async () => { expect(await run(['target:flex', 'group-target:flex', 'peer-target:flex'])) .toMatchInlineSnapshot(` " - .group-target\\:flex { - &:is(:where(.group):target *) { - display: flex; - } + .group-target\\:flex:is(:where(.group):target *) { + display: flex; } - .peer-target\\:flex { - &:is(:where(.peer):target ~ *) { - display: flex; - } + .peer-target\\:flex:is(:where(.peer):target ~ *) { + display: flex; } - .target\\:flex { - &:target { - display: flex; - } + .target\\:flex:target { + display: flex; } " `) @@ -440,25 +356,17 @@ test('open', async () => { expect(await run(['open:flex', 'group-open:flex', 'peer-open:flex', 'not-open:flex'])) .toMatchInlineSnapshot(` " - .not-open\\:flex { - &:not(*:is([open], :popover-open, :open)) { - display: flex; - } + .not-open\\:flex:not(*:is([open], :popover-open, :open)) { + display: flex; } - .group-open\\:flex { - &:is(:where(.group):is([open], :popover-open, :open) *) { - display: flex; - } + .group-open\\:flex:is(:where(.group):is([open], :popover-open, :open) *) { + display: flex; } - .peer-open\\:flex { - &:is(:where(.peer):is([open], :popover-open, :open) ~ *) { - display: flex; - } + .peer-open\\:flex:is(:where(.peer):is([open], :popover-open, :open) ~ *) { + display: flex; } - .open\\:flex { - &:is([open], :popover-open, :open) { - display: flex; - } + .open\\:flex:is([open], :popover-open, :open) { + display: flex; } " `) @@ -469,20 +377,14 @@ test('default', async () => { expect(await run(['default:flex', 'group-default:flex', 'peer-default:flex'])) .toMatchInlineSnapshot(` " - .group-default\\:flex { - &:is(:where(.group):default *) { - display: flex; - } + .group-default\\:flex:is(:where(.group):default *) { + display: flex; } - .peer-default\\:flex { - &:is(:where(.peer):default ~ *) { - display: flex; - } + .peer-default\\:flex:is(:where(.peer):default ~ *) { + display: flex; } - .default\\:flex { - &:default { - display: flex; - } + .default\\:flex:default { + display: flex; } " `) @@ -493,20 +395,14 @@ test('checked', async () => { expect(await run(['checked:flex', 'group-checked:flex', 'peer-checked:flex'])) .toMatchInlineSnapshot(` " - .group-checked\\:flex { - &:is(:where(.group):checked *) { - display: flex; - } + .group-checked\\:flex:is(:where(.group):checked *) { + display: flex; } - .peer-checked\\:flex { - &:is(:where(.peer):checked ~ *) { - display: flex; - } + .peer-checked\\:flex:is(:where(.peer):checked ~ *) { + display: flex; } - .checked\\:flex { - &:checked { - display: flex; - } + .checked\\:flex:checked { + display: flex; } " `) @@ -517,20 +413,14 @@ test('indeterminate', async () => { expect(await run(['indeterminate:flex', 'group-indeterminate:flex', 'peer-indeterminate:flex'])) .toMatchInlineSnapshot(` " - .group-indeterminate\\:flex { - &:is(:where(.group):indeterminate *) { - display: flex; - } + .group-indeterminate\\:flex:is(:where(.group):indeterminate *) { + display: flex; } - .peer-indeterminate\\:flex { - &:is(:where(.peer):indeterminate ~ *) { - display: flex; - } + .peer-indeterminate\\:flex:is(:where(.peer):indeterminate ~ *) { + display: flex; } - .indeterminate\\:flex { - &:indeterminate { - display: flex; - } + .indeterminate\\:flex:indeterminate { + display: flex; } " `) @@ -546,20 +436,14 @@ test('placeholder-shown', async () => { ]), ).toMatchInlineSnapshot(` " - .group-placeholder-shown\\:flex { - &:is(:where(.group):placeholder-shown *) { - display: flex; - } + .group-placeholder-shown\\:flex:is(:where(.group):placeholder-shown *) { + display: flex; } - .peer-placeholder-shown\\:flex { - &:is(:where(.peer):placeholder-shown ~ *) { - display: flex; - } + .peer-placeholder-shown\\:flex:is(:where(.peer):placeholder-shown ~ *) { + display: flex; } - .placeholder-shown\\:flex { - &:placeholder-shown { - display: flex; - } + .placeholder-shown\\:flex:placeholder-shown { + display: flex; } " `) @@ -570,20 +454,14 @@ test('autofill', async () => { expect(await run(['autofill:flex', 'group-autofill:flex', 'peer-autofill:flex'])) .toMatchInlineSnapshot(` " - .group-autofill\\:flex { - &:is(:where(.group):autofill *) { - display: flex; - } + .group-autofill\\:flex:is(:where(.group):autofill *) { + display: flex; } - .peer-autofill\\:flex { - &:is(:where(.peer):autofill ~ *) { - display: flex; - } + .peer-autofill\\:flex:is(:where(.peer):autofill ~ *) { + display: flex; } - .autofill\\:flex { - &:autofill { - display: flex; - } + .autofill\\:flex:autofill { + display: flex; } " `) @@ -594,20 +472,14 @@ test('optional', async () => { expect(await run(['optional:flex', 'group-optional:flex', 'peer-optional:flex'])) .toMatchInlineSnapshot(` " - .group-optional\\:flex { - &:is(:where(.group):optional *) { - display: flex; - } + .group-optional\\:flex:is(:where(.group):optional *) { + display: flex; } - .peer-optional\\:flex { - &:is(:where(.peer):optional ~ *) { - display: flex; - } + .peer-optional\\:flex:is(:where(.peer):optional ~ *) { + display: flex; } - .optional\\:flex { - &:optional { - display: flex; - } + .optional\\:flex:optional { + display: flex; } " `) @@ -618,20 +490,14 @@ test('required', async () => { expect(await run(['required:flex', 'group-required:flex', 'peer-required:flex'])) .toMatchInlineSnapshot(` " - .group-required\\:flex { - &:is(:where(.group):required *) { - display: flex; - } + .group-required\\:flex:is(:where(.group):required *) { + display: flex; } - .peer-required\\:flex { - &:is(:where(.peer):required ~ *) { - display: flex; - } + .peer-required\\:flex:is(:where(.peer):required ~ *) { + display: flex; } - .required\\:flex { - &:required { - display: flex; - } + .required\\:flex:required { + display: flex; } " `) @@ -641,20 +507,14 @@ test('required', async () => { test('valid', async () => { expect(await run(['valid:flex', 'group-valid:flex', 'peer-valid:flex'])).toMatchInlineSnapshot(` " - .group-valid\\:flex { - &:is(:where(.group):valid *) { - display: flex; - } + .group-valid\\:flex:is(:where(.group):valid *) { + display: flex; } - .peer-valid\\:flex { - &:is(:where(.peer):valid ~ *) { - display: flex; - } + .peer-valid\\:flex:is(:where(.peer):valid ~ *) { + display: flex; } - .valid\\:flex { - &:valid { - display: flex; - } + .valid\\:flex:valid { + display: flex; } " `) @@ -665,20 +525,14 @@ test('invalid', async () => { expect(await run(['invalid:flex', 'group-invalid:flex', 'peer-invalid:flex'])) .toMatchInlineSnapshot(` " - .group-invalid\\:flex { - &:is(:where(.group):invalid *) { - display: flex; - } + .group-invalid\\:flex:is(:where(.group):invalid *) { + display: flex; } - .peer-invalid\\:flex { - &:is(:where(.peer):invalid ~ *) { - display: flex; - } + .peer-invalid\\:flex:is(:where(.peer):invalid ~ *) { + display: flex; } - .invalid\\:flex { - &:invalid { - display: flex; - } + .invalid\\:flex:invalid { + display: flex; } " `) @@ -689,20 +543,14 @@ test('user-valid', async () => { expect(await run(['user-valid:flex', 'group-user-valid:flex', 'peer-user-valid:flex'])) .toMatchInlineSnapshot(` " - .group-user-valid\\:flex { - &:is(:where(.group):user-valid *) { - display: flex; - } + .group-user-valid\\:flex:is(:where(.group):user-valid *) { + display: flex; } - .peer-user-valid\\:flex { - &:is(:where(.peer):user-valid ~ *) { - display: flex; - } + .peer-user-valid\\:flex:is(:where(.peer):user-valid ~ *) { + display: flex; } - .user-valid\\:flex { - &:user-valid { - display: flex; - } + .user-valid\\:flex:user-valid { + display: flex; } " `) @@ -713,20 +561,14 @@ test('user-invalid', async () => { expect(await run(['user-invalid:flex', 'group-user-invalid:flex', 'peer-user-invalid:flex'])) .toMatchInlineSnapshot(` " - .group-user-invalid\\:flex { - &:is(:where(.group):user-invalid *) { - display: flex; - } + .group-user-invalid\\:flex:is(:where(.group):user-invalid *) { + display: flex; } - .peer-user-invalid\\:flex { - &:is(:where(.peer):user-invalid ~ *) { - display: flex; - } + .peer-user-invalid\\:flex:is(:where(.peer):user-invalid ~ *) { + display: flex; } - .user-invalid\\:flex { - &:user-invalid { - display: flex; - } + .user-invalid\\:flex:user-invalid { + display: flex; } " `) @@ -737,20 +579,14 @@ test('in-range', async () => { expect(await run(['in-range:flex', 'group-in-range:flex', 'peer-in-range:flex'])) .toMatchInlineSnapshot(` " - .group-in-range\\:flex { - &:is(:where(.group):in-range *) { - display: flex; - } + .group-in-range\\:flex:is(:where(.group):in-range *) { + display: flex; } - .peer-in-range\\:flex { - &:is(:where(.peer):in-range ~ *) { - display: flex; - } + .peer-in-range\\:flex:is(:where(.peer):in-range ~ *) { + display: flex; } - .in-range\\:flex { - &:in-range { - display: flex; - } + .in-range\\:flex:in-range { + display: flex; } " `) @@ -761,20 +597,14 @@ test('out-of-range', async () => { expect(await run(['out-of-range:flex', 'group-out-of-range:flex', 'peer-out-of-range:flex'])) .toMatchInlineSnapshot(` " - .group-out-of-range\\:flex { - &:is(:where(.group):out-of-range *) { - display: flex; - } + .group-out-of-range\\:flex:is(:where(.group):out-of-range *) { + display: flex; } - .peer-out-of-range\\:flex { - &:is(:where(.peer):out-of-range ~ *) { - display: flex; - } + .peer-out-of-range\\:flex:is(:where(.peer):out-of-range ~ *) { + display: flex; } - .out-of-range\\:flex { - &:out-of-range { - display: flex; - } + .out-of-range\\:flex:out-of-range { + display: flex; } " `) @@ -785,20 +615,14 @@ test('read-only', async () => { expect(await run(['read-only:flex', 'group-read-only:flex', 'peer-read-only:flex'])) .toMatchInlineSnapshot(` " - .group-read-only\\:flex { - &:is(:where(.group):read-only *) { - display: flex; - } + .group-read-only\\:flex:is(:where(.group):read-only *) { + display: flex; } - .peer-read-only\\:flex { - &:is(:where(.peer):read-only ~ *) { - display: flex; - } + .peer-read-only\\:flex:is(:where(.peer):read-only ~ *) { + display: flex; } - .read-only\\:flex { - &:read-only { - display: flex; - } + .read-only\\:flex:read-only { + display: flex; } " `) @@ -808,20 +632,14 @@ test('read-only', async () => { test('empty', async () => { expect(await run(['empty:flex', 'group-empty:flex', 'peer-empty:flex'])).toMatchInlineSnapshot(` " - .group-empty\\:flex { - &:is(:where(.group):empty *) { - display: flex; - } + .group-empty\\:flex:is(:where(.group):empty *) { + display: flex; } - .peer-empty\\:flex { - &:is(:where(.peer):empty ~ *) { - display: flex; - } + .peer-empty\\:flex:is(:where(.peer):empty ~ *) { + display: flex; } - .empty\\:flex { - &:empty { - display: flex; - } + .empty\\:flex:empty { + display: flex; } " `) @@ -832,20 +650,14 @@ test('focus-within', async () => { expect(await run(['focus-within:flex', 'group-focus-within:flex', 'peer-focus-within:flex'])) .toMatchInlineSnapshot(` " - .group-focus-within\\:flex { - &:is(:where(.group):focus-within *) { - display: flex; - } + .group-focus-within\\:flex:is(:where(.group):focus-within *) { + display: flex; } - .peer-focus-within\\:flex { - &:is(:where(.peer):focus-within ~ *) { - display: flex; - } + .peer-focus-within\\:flex:is(:where(.peer):focus-within ~ *) { + display: flex; } - .focus-within\\:flex { - &:focus-within { - display: flex; - } + .focus-within\\:flex:focus-within { + display: flex; } " `) @@ -855,25 +667,15 @@ test('focus-within', async () => { test('hover', async () => { expect(await run(['hover:flex', 'group-hover:flex', 'peer-hover:flex'])).toMatchInlineSnapshot(` " - .group-hover\\:flex { - &:is(:where(.group):hover *) { - @media (hover: hover) { - display: flex; - } + @media (hover: hover) { + .group-hover\\:flex:is(:where(.group):hover *) { + display: flex; } - } - .peer-hover\\:flex { - &:is(:where(.peer):hover ~ *) { - @media (hover: hover) { - display: flex; - } + .peer-hover\\:flex:is(:where(.peer):hover ~ *) { + display: flex; } - } - .hover\\:flex { - &:hover { - @media (hover: hover) { - display: flex; - } + .hover\\:flex:hover { + display: flex; } } " @@ -884,20 +686,14 @@ test('hover', async () => { test('focus', async () => { expect(await run(['focus:flex', 'group-focus:flex', 'peer-focus:flex'])).toMatchInlineSnapshot(` " - .group-focus\\:flex { - &:is(:where(.group):focus *) { - display: flex; - } + .group-focus\\:flex:is(:where(.group):focus *) { + display: flex; } - .peer-focus\\:flex { - &:is(:where(.peer):focus ~ *) { - display: flex; - } + .peer-focus\\:flex:is(:where(.peer):focus ~ *) { + display: flex; } - .focus\\:flex { - &:focus { - display: flex; - } + .focus\\:flex:focus { + display: flex; } " `) @@ -907,34 +703,26 @@ test('focus', async () => { test('group-hover group-focus sorting', async () => { expect(await run(['group-hover:flex', 'group-focus:flex'])).toMatchInlineSnapshot(` " - .group-hover\\:flex { - &:is(:where(.group):hover *) { - @media (hover: hover) { - display: flex; - } - } - } - .group-focus\\:flex { - &:is(:where(.group):focus *) { + @media (hover: hover) { + .group-hover\\:flex:is(:where(.group):hover *) { display: flex; } } + .group-focus\\:flex:is(:where(.group):focus *) { + display: flex; + } " `) expect(await run(['group-focus:flex', 'group-hover:flex'])).toMatchInlineSnapshot(` " - .group-hover\\:flex { - &:is(:where(.group):hover *) { - @media (hover: hover) { - display: flex; - } - } - } - .group-focus\\:flex { - &:is(:where(.group):focus *) { + @media (hover: hover) { + .group-hover\\:flex:is(:where(.group):hover *) { display: flex; } } + .group-focus\\:flex:is(:where(.group):focus *) { + display: flex; + } " `) }) @@ -943,20 +731,14 @@ test('focus-visible', async () => { expect(await run(['focus-visible:flex', 'group-focus-visible:flex', 'peer-focus-visible:flex'])) .toMatchInlineSnapshot(` " - .group-focus-visible\\:flex { - &:is(:where(.group):focus-visible *) { - display: flex; - } + .group-focus-visible\\:flex:is(:where(.group):focus-visible *) { + display: flex; } - .peer-focus-visible\\:flex { - &:is(:where(.peer):focus-visible ~ *) { - display: flex; - } + .peer-focus-visible\\:flex:is(:where(.peer):focus-visible ~ *) { + display: flex; } - .focus-visible\\:flex { - &:focus-visible { - display: flex; - } + .focus-visible\\:flex:focus-visible { + display: flex; } " `) @@ -967,20 +749,14 @@ test('active', async () => { expect(await run(['active:flex', 'group-active:flex', 'peer-active:flex'])) .toMatchInlineSnapshot(` " - .group-active\\:flex { - &:is(:where(.group):active *) { - display: flex; - } + .group-active\\:flex:is(:where(.group):active *) { + display: flex; } - .peer-active\\:flex { - &:is(:where(.peer):active ~ *) { - display: flex; - } + .peer-active\\:flex:is(:where(.peer):active ~ *) { + display: flex; } - .active\\:flex { - &:active { - display: flex; - } + .active\\:flex:active { + display: flex; } " `) @@ -991,20 +767,14 @@ test('enabled', async () => { expect(await run(['enabled:flex', 'group-enabled:flex', 'peer-enabled:flex'])) .toMatchInlineSnapshot(` " - .group-enabled\\:flex { - &:is(:where(.group):enabled *) { - display: flex; - } + .group-enabled\\:flex:is(:where(.group):enabled *) { + display: flex; } - .peer-enabled\\:flex { - &:is(:where(.peer):enabled ~ *) { - display: flex; - } + .peer-enabled\\:flex:is(:where(.peer):enabled ~ *) { + display: flex; } - .enabled\\:flex { - &:enabled { - display: flex; - } + .enabled\\:flex:enabled { + display: flex; } " `) @@ -1015,20 +785,14 @@ test('disabled', async () => { expect(await run(['disabled:flex', 'group-disabled:flex', 'peer-disabled:flex'])) .toMatchInlineSnapshot(` " - .group-disabled\\:flex { - &:is(:where(.group):disabled *) { - display: flex; - } + .group-disabled\\:flex:is(:where(.group):disabled *) { + display: flex; } - .peer-disabled\\:flex { - &:is(:where(.peer):disabled ~ *) { - display: flex; - } + .peer-disabled\\:flex:is(:where(.peer):disabled ~ *) { + display: flex; } - .disabled\\:flex { - &:disabled { - display: flex; - } + .disabled\\:flex:disabled { + display: flex; } " `) @@ -1038,20 +802,14 @@ test('disabled', async () => { test('inert', async () => { expect(await run(['inert:flex', 'group-inert:flex', 'peer-inert:flex'])).toMatchInlineSnapshot(` " - .group-inert\\:flex { - &:is(:where(.group):is([inert], [inert] *) *) { - display: flex; - } + .group-inert\\:flex:is(:where(.group):is([inert], [inert] *) *) { + display: flex; } - .peer-inert\\:flex { - &:is(:where(.peer):is([inert], [inert] *) ~ *) { - display: flex; - } + .peer-inert\\:flex:is(:where(.peer):is([inert], [inert] *) ~ *) { + display: flex; } - .inert\\:flex { - &:is([inert], [inert] *) { - display: flex; - } + .inert\\:flex:is([inert], [inert] *) { + display: flex; } " `) @@ -1069,46 +827,22 @@ test('group-[...]', async () => { ]), ).toMatchInlineSnapshot(` " - .group-\\[\\&_p\\]\\:flex { - &:is(:where(.group) p *) { - display: flex; - } + .group-\\[\\&_p\\]\\:flex:is(:where(.group) p *) { + display: flex; } - .group-\\[\\&\\:hover\\]\\:group-\\[\\&_p\\]\\:flex { - &:is(:where(.group):hover *) { - &:is(:where(.group) p *) { - display: flex; - } - } + :is(.group-\\[\\&\\:hover\\]\\:group-\\[\\&_p\\]\\:flex:is(:where(.group):hover *)):is(:where(.group) p *) { + display: flex; } - .group-\\[\\&_p\\]\\:hover\\:flex { - &:is(:where(.group) p *) { - &:hover { - @media (hover: hover) { - display: flex; - } - } + @media (hover: hover) { + :is(.group-\\[\\&_p\\]\\:hover\\:flex:is(:where(.group) p *)):hover { + display: flex; } - } - .hover\\:group-\\[\\&_p\\]\\:flex { - &:hover { - @media (hover: hover) { - &:is(:where(.group) p *) { - display: flex; - } - } + :is(.hover\\:group-\\[\\&_p\\]\\:flex:hover):is(:where(.group) p *) { + display: flex; } - } - .hover\\:group-\\[\\&_p\\]\\:hover\\:flex { - &:hover { - @media (hover: hover) { - &:is(:where(.group) p *) { - &:hover { - @media (hover: hover) { - display: flex; - } - } - } + @media (hover: hover) { + :is(:is(.hover\\:group-\\[\\&_p\\]\\:hover\\:flex:hover):is(:where(.group) p *)):hover { + display: flex; } } } @@ -1148,41 +882,25 @@ test('group-*', async () => { ), ).toMatchInlineSnapshot(` " - .group-hover\\:flex { - &:is(:where(.group):hover *) { - @media (hover: hover) { - display: flex; - } - } - } - .group-focus\\:flex { - &:is(:where(.group):focus *) { + @media (hover: hover) { + .group-hover\\:flex:is(:where(.group):hover *) { display: flex; } } - .group-focus\\:group-hover\\:flex { - &:is(:where(.group):focus *) { - &:is(:where(.group):hover *) { - @media (hover: hover) { - display: flex; - } - } - } + .group-focus\\:flex:is(:where(.group):focus *) { + display: flex; } - .group-hover\\:group-focus\\:flex { - &:is(:where(.group):hover *) { - @media (hover: hover) { - &:is(:where(.group):focus *) { - display: flex; - } - } + @media (hover: hover) { + :is(.group-focus\\:group-hover\\:flex:is(:where(.group):focus *)):is(:where(.group):hover *) { + display: flex; } - } - .group-hocus\\:flex { - &:is(:is(:where(.group):hover, :where(.group):focus) *) { + :is(.group-hover\\:group-focus\\:flex:is(:where(.group):hover *)):is(:where(.group):focus *) { display: flex; } } + .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { + display: flex; + } " `) @@ -1215,45 +933,21 @@ test('peer-[...]', async () => { ]), ).toMatchInlineSnapshot(` " - .peer-\\[\\&_p\\]\\:flex { - &:is(:where(.peer) p ~ *) { - display: flex; - } + .peer-\\[\\&_p\\]\\:flex:is(:where(.peer) p ~ *) { + display: flex; } - .peer-\\[\\&\\:hover\\]\\:peer-\\[\\&_p\\]\\:flex { - &:is(:where(.peer):hover ~ *) { - &:is(:where(.peer) p ~ *) { - display: flex; - } - } + :is(.peer-\\[\\&\\:hover\\]\\:peer-\\[\\&_p\\]\\:flex:is(:where(.peer):hover ~ *)):is(:where(.peer) p ~ *) { + display: flex; } - .hover\\:peer-\\[\\&_p\\]\\:flex { - &:hover { - @media (hover: hover) { - &:is(:where(.peer) p ~ *) { - display: flex; - } - } + @media (hover: hover) { + :is(.hover\\:peer-\\[\\&_p\\]\\:flex:hover):is(:where(.peer) p ~ *) { + display: flex; } - } - .peer-\\[\\&_p\\]\\:hover\\:flex { - &:is(:where(.peer) p ~ *) { - &:hover { - @media (hover: hover) { - display: flex; - } - } + :is(.peer-\\[\\&_p\\]\\:hover\\:flex:is(:where(.peer) p ~ *)):hover { + display: flex; } - } - .hover\\:peer-\\[\\&_p\\]\\:focus\\:flex { - &:hover { - @media (hover: hover) { - &:is(:where(.peer) p ~ *) { - &:focus { - display: flex; - } - } - } + :is(:is(.hover\\:peer-\\[\\&_p\\]\\:focus\\:flex:hover):is(:where(.peer) p ~ *)):focus { + display: flex; } } " @@ -1286,41 +980,25 @@ test('peer-*', async () => { ), ).toMatchInlineSnapshot(` " - .peer-hover\\:flex { - &:is(:where(.peer):hover ~ *) { - @media (hover: hover) { - display: flex; - } - } - } - .peer-focus\\:flex { - &:is(:where(.peer):focus ~ *) { + @media (hover: hover) { + .peer-hover\\:flex:is(:where(.peer):hover ~ *) { display: flex; } } - .peer-focus\\:peer-hover\\:flex { - &:is(:where(.peer):focus ~ *) { - &:is(:where(.peer):hover ~ *) { - @media (hover: hover) { - display: flex; - } - } - } + .peer-focus\\:flex:is(:where(.peer):focus ~ *) { + display: flex; } - .peer-hover\\:peer-focus\\:flex { - &:is(:where(.peer):hover ~ *) { - @media (hover: hover) { - &:is(:where(.peer):focus ~ *) { - display: flex; - } - } + @media (hover: hover) { + :is(.peer-focus\\:peer-hover\\:flex:is(:where(.peer):focus ~ *)):is(:where(.peer):hover ~ *) { + display: flex; } - } - .peer-hocus\\:flex { - &:is(:is(:where(.peer):hover, :where(.peer):focus) ~ *) { + :is(.peer-hover\\:peer-focus\\:flex:is(:where(.peer):hover ~ *)):is(:where(.peer):focus ~ *) { display: flex; } } + .peer-hocus\\:flex:is(:is(:where(.peer):hover, :where(.peer):focus) ~ *) { + display: flex; + } " `) @@ -1345,10 +1023,8 @@ test('peer-*', async () => { test('ltr', async () => { expect(await run(['ltr:flex'])).toMatchInlineSnapshot(` " - .ltr\\:flex { - &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { - display: flex; - } + .ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { + display: flex; } " `) @@ -1358,10 +1034,8 @@ test('ltr', async () => { test('rtl', async () => { expect(await run(['rtl:flex'])).toMatchInlineSnapshot(` " - .rtl\\:flex { - &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { - display: flex; - } + .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + display: flex; } " `) @@ -1371,8 +1045,8 @@ test('rtl', async () => { test('motion-safe', async () => { expect(await run(['motion-safe:flex'])).toMatchInlineSnapshot(` " - .motion-safe\\:flex { - @media (prefers-reduced-motion: no-preference) { + @media (prefers-reduced-motion: no-preference) { + .motion-safe\\:flex { display: flex; } } @@ -1384,8 +1058,8 @@ test('motion-safe', async () => { test('motion-reduce', async () => { expect(await run(['motion-reduce:flex'])).toMatchInlineSnapshot(` " - .motion-reduce\\:flex { - @media (prefers-reduced-motion: reduce) { + @media (prefers-reduced-motion: reduce) { + .motion-reduce\\:flex { display: flex; } } @@ -1397,8 +1071,8 @@ test('motion-reduce', async () => { test('dark', async () => { expect(await run(['dark:flex'])).toMatchInlineSnapshot(` " - .dark\\:flex { - @media (prefers-color-scheme: dark) { + @media (prefers-color-scheme: dark) { + .dark\\:flex { display: flex; } } @@ -1410,8 +1084,8 @@ test('dark', async () => { test('starting', async () => { expect(await run(['starting:opacity-0'])).toMatchInlineSnapshot(` " - .starting\\:opacity-0 { - @starting-style { + @starting-style { + .starting\\:opacity-0 { opacity: 0%; } } @@ -1423,8 +1097,8 @@ test('starting', async () => { test('print', async () => { expect(await run(['print:flex'])).toMatchInlineSnapshot(` " - .print\\:flex { - @media print { + @media print { + .print\\:flex { display: flex; } } @@ -1451,28 +1125,28 @@ test('default breakpoints', async () => { ), ).toMatchInlineSnapshot(` " - .sm\\:flex { - @media (width >= 640px) { + @media (width >= 640px) { + .sm\\:flex { display: flex; } } - .md\\:flex { - @media (width >= 768px) { + @media (width >= 768px) { + .md\\:flex { display: flex; } } - .lg\\:flex { - @media (width >= 1024px) { + @media (width >= 1024px) { + .lg\\:flex { display: flex; } } - .xl\\:flex { - @media (width >= 1280px) { + @media (width >= 1280px) { + .xl\\:flex { display: flex; } } - .\\32 xl\\:flex { - @media (width >= 1536px) { + @media (width >= 1536px) { + .\\32 xl\\:flex { display: flex; } } @@ -1509,8 +1183,8 @@ test('custom breakpoint', async () => { ), ).toMatchInlineSnapshot(` " - .\\31 0xl\\:flex { - @media (width >= 5000px) { + @media (width >= 5000px) { + .\\31 0xl\\:flex { display: flex; } } @@ -1534,18 +1208,18 @@ test('max-*', async () => { ), ).toMatchInlineSnapshot(` " - .max-lg\\:flex { - @media (width < 1024px) { + @media (width < 1024px) { + .max-lg\\:flex { display: flex; } } - .max-md\\:flex { - @media (width < 768px) { + @media (width < 768px) { + .max-md\\:flex { display: flex; } } - .max-sm\\:flex { - @media (width < 640px) { + @media (width < 640px) { + .max-sm\\:flex { display: flex; } } @@ -1583,18 +1257,18 @@ test('min-*', async () => { ), ).toMatchInlineSnapshot(` " - .min-sm\\:flex { - @media (width >= 640px) { + @media (width >= 640px) { + .min-sm\\:flex { display: flex; } } - .min-md\\:flex { - @media (width >= 768px) { + @media (width >= 768px) { + .min-md\\:flex { display: flex; } } - .min-lg\\:flex { - @media (width >= 1024px) { + @media (width >= 1024px) { + .min-lg\\:flex { display: flex; } } @@ -1634,30 +1308,28 @@ test('sorting stacked min-* and max-* variants', async () => { ), ).toMatchInlineSnapshot(` " - .min-xs\\:max-sm\\:flex { - @media (width >= 280px) { - @media (width < 640px) { + @media (width >= 280px) { + @media (width < 640px) { + .min-xs\\:max-sm\\:flex { display: flex; } } } - .min-sm\\:max-xl\\:flex { - @media (width >= 640px) { - @media (width < 1280px) { + @media (width >= 640px) { + @media (width < 1280px) { + .min-sm\\:max-xl\\:flex { display: flex; } } - } - .min-sm\\:max-lg\\:flex { - @media (width >= 640px) { - @media (width < 1024px) { + @media (width < 1024px) { + .min-sm\\:max-lg\\:flex { display: flex; } } } - .min-md\\:max-lg\\:flex { - @media (width >= 768px) { - @media (width < 1024px) { + @media (width >= 768px) { + @media (width < 1024px) { + .min-md\\:max-lg\\:flex { display: flex; } } @@ -1682,26 +1354,22 @@ test('stacked min-* and max-* variants should come after unprefixed variants', a ), ).toMatchInlineSnapshot(` " - .sm\\:flex { - @media (width >= 640px) { + @media (width >= 640px) { + .sm\\:flex { display: flex; } - } - .min-sm\\:max-lg\\:flex { - @media (width >= 640px) { - @media (width < 1024px) { + @media (width < 1024px) { + .min-sm\\:max-lg\\:flex { display: flex; } } } - .md\\:flex { - @media (width >= 768px) { + @media (width >= 768px) { + .md\\:flex { display: flex; } - } - .min-md\\:max-lg\\:flex { - @media (width >= 768px) { - @media (width < 1024px) { + @media (width < 1024px) { + .min-md\\:max-lg\\:flex { display: flex; } } @@ -1741,58 +1409,52 @@ test('min, max and unprefixed breakpoints', async () => { ), ).toMatchInlineSnapshot(` " - .max-lg\\:flex { - @media (width < 1024px) { + @media (width < 1024px) { + .max-lg\\:flex { display: flex; } } - .max-\\[1000px\\]\\:flex { - @media (width < 1000px) { + @media (width < 1000px) { + .max-\\[1000px\\]\\:flex { display: flex; } } - .max-md\\:flex { - @media (width < 768px) { + @media (width < 768px) { + .max-md\\:flex { display: flex; } } - .max-sm\\:flex { - @media (width < 640px) { + @media (width < 640px) { + .max-sm\\:flex { display: flex; } } - .min-sm\\:flex { - @media (width >= 640px) { + @media (width >= 640px) { + .min-sm\\:flex { display: flex; } - } - .sm\\:flex { - @media (width >= 640px) { + .sm\\:flex { display: flex; } } - .min-\\[700px\\]\\:flex { - @media (width >= 700px) { + @media (width >= 700px) { + .min-\\[700px\\]\\:flex { display: flex; } } - .md\\:flex { - @media (width >= 768px) { + @media (width >= 768px) { + .md\\:flex { display: flex; } - } - .min-md\\:flex { - @media (width >= 768px) { + .min-md\\:flex { display: flex; } } - .lg\\:flex { - @media (width >= 1024px) { + @media (width >= 1024px) { + .lg\\:flex { display: flex; } - } - .min-lg\\:flex { - @media (width >= 1024px) { + .min-lg\\:flex { display: flex; } } @@ -1826,103 +1488,103 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti ]), ).toMatchInlineSnapshot(` " - .max-\\[calc\\(1000px\\+12em\\)\\]\\:flex { - @media (width < calc(1000px + 12em)) { + @media (width < calc(1000px + 12em)) { + .max-\\[calc\\(1000px\\+12em\\)\\]\\:flex { display: flex; } } - .max-\\[calc\\(50vh\\+12em\\)\\]\\:flex { - @media (width < calc(50vh + 12em)) { + @media (width < calc(50vh + 12em)) { + .max-\\[calc\\(50vh\\+12em\\)\\]\\:flex { display: flex; } } - .max-\\[12em\\]\\:flex { - @media (width < 12em) { + @media (width < 12em) { + .max-\\[12em\\]\\:flex { display: flex; } } - .max-\\[10em\\]\\:flex { - @media (width < 10em) { + @media (width < 10em) { + .max-\\[10em\\]\\:flex { display: flex; } } - .max-\\[12px\\]\\:flex { - @media (width < 12px) { + @media (width < 12px) { + .max-\\[12px\\]\\:flex { display: flex; } } - .max-\\[10px\\]\\:flex { - @media (width < 10px) { + @media (width < 10px) { + .max-\\[10px\\]\\:flex { display: flex; } } - .max-\\[12rem\\]\\:flex { - @media (width < 12rem) { + @media (width < 12rem) { + .max-\\[12rem\\]\\:flex { display: flex; } } - .max-\\[10rem\\]\\:flex { - @media (width < 10rem) { + @media (width < 10rem) { + .max-\\[10rem\\]\\:flex { display: flex; } } - .max-\\[12vh\\]\\:flex { - @media (width < 12vh) { + @media (width < 12vh) { + .max-\\[12vh\\]\\:flex { display: flex; } } - .max-\\[10vh\\]\\:flex { - @media (width < 10vh) { + @media (width < 10vh) { + .max-\\[10vh\\]\\:flex { display: flex; } } - .min-\\[calc\\(1000px\\+12em\\)\\]\\:flex { - @media (width >= calc(1000px + 12em)) { + @media (width >= calc(1000px + 12em)) { + .min-\\[calc\\(1000px\\+12em\\)\\]\\:flex { display: flex; } } - .min-\\[calc\\(50vh\\+12em\\)\\]\\:flex { - @media (width >= calc(50vh + 12em)) { + @media (width >= calc(50vh + 12em)) { + .min-\\[calc\\(50vh\\+12em\\)\\]\\:flex { display: flex; } } - .min-\\[10em\\]\\:flex { - @media (width >= 10em) { + @media (width >= 10em) { + .min-\\[10em\\]\\:flex { display: flex; } } - .min-\\[12em\\]\\:flex { - @media (width >= 12em) { + @media (width >= 12em) { + .min-\\[12em\\]\\:flex { display: flex; } } - .min-\\[10px\\]\\:flex { - @media (width >= 10px) { + @media (width >= 10px) { + .min-\\[10px\\]\\:flex { display: flex; } } - .min-\\[12px\\]\\:flex { - @media (width >= 12px) { + @media (width >= 12px) { + .min-\\[12px\\]\\:flex { display: flex; } } - .min-\\[10rem\\]\\:flex { - @media (width >= 10rem) { + @media (width >= 10rem) { + .min-\\[10rem\\]\\:flex { display: flex; } } - .min-\\[12rem\\]\\:flex { - @media (width >= 12rem) { + @media (width >= 12rem) { + .min-\\[12rem\\]\\:flex { display: flex; } } - .min-\\[10vh\\]\\:flex { - @media (width >= 10vh) { + @media (width >= 10vh) { + .min-\\[10vh\\]\\:flex { display: flex; } } - .min-\\[12vh\\]\\:flex { - @media (width >= 12vh) { + @media (width >= 12vh) { + .min-\\[12vh\\]\\:flex { display: flex; } } @@ -1944,43 +1606,43 @@ test('supports', async () => { ]), ).toMatchInlineSnapshot(` " - .supports-gap\\:grid { - @supports (gap: var(--tw)) { + @supports (gap: var(--tw)) { + .supports-gap\\:grid { display: grid; } } - .supports-\\[\\(display\\:grid\\)_and_font-format\\(opentype\\)\\]\\:grid { - @supports (display:grid) and font-format(opentype) { + @supports (display:grid) and font-format(opentype) { + .supports-\\[\\(display\\:grid\\)_and_font-format\\(opentype\\)\\]\\:grid { display: grid; } } - .supports-\\[--test\\]\\:flex { - @supports (--test: var(--tw)) { + @supports (--test: var(--tw)) { + .supports-\\[--test\\]\\:flex { display: flex; } } - .supports-\\[display\\:grid\\]\\:flex { - @supports (display:grid) { + @supports (display:grid) { + .supports-\\[display\\:grid\\]\\:flex { display: flex; } } - .supports-\\[font-format\\(opentype\\)\\]\\:grid { - @supports font-format(opentype) { + @supports font-format(opentype) { + .supports-\\[font-format\\(opentype\\)\\]\\:grid { display: grid; } } - .supports-\\[font-tech\\(color-COLRv1\\)\\]\\:flex { - @supports font-tech(color-COLRv1) { + @supports font-tech(color-COLRv1) { + .supports-\\[font-tech\\(color-COLRv1\\)\\]\\:flex { display: flex; } } - .supports-\\[selector\\(A_\\>_B\\)\\]\\:flex { - @supports selector(A > B) { + @supports selector(A > B) { + .supports-\\[selector\\(A_\\>_B\\)\\]\\:flex { display: flex; } } - .supports-\\[var\\(--test\\)\\]\\:flex { - @supports var(--test) { + @supports var(--test) { + .supports-\\[var\\(--test\\)\\]\\:flex { display: flex; } } @@ -2109,366 +1771,266 @@ test('not', async () => { ), ).toMatchInlineSnapshot(` " - .not-first\\:flex { - &:not(*:first-child) { - display: flex; - } + .not-first\\:flex:not(*:first-child) { + display: flex; } - .not-last\\:flex { - &:not(*:last-child) { - display: flex; - } + .not-last\\:flex:not(*:last-child) { + display: flex; } - .not-only\\:flex { - &:not(*:only-child) { - display: flex; - } + .not-only\\:flex:not(*:only-child) { + display: flex; } - .not-odd\\:flex { - &:not(*:nth-child(odd)) { - display: flex; - } + .not-odd\\:flex:not(*:nth-child(odd)) { + display: flex; } - .not-even\\:flex { - &:not(*:nth-child(even)) { - display: flex; - } + .not-even\\:flex:not(*:nth-child(even)) { + display: flex; } - .not-first-of-type\\:flex { - &:not(*:first-of-type) { - display: flex; - } + .not-first-of-type\\:flex:not(*:first-of-type) { + display: flex; } - .not-last-of-type\\:flex { - &:not(*:last-of-type) { - display: flex; - } + .not-last-of-type\\:flex:not(*:last-of-type) { + display: flex; } - .not-only-of-type\\:flex { - &:not(*:only-of-type) { - display: flex; - } + .not-only-of-type\\:flex:not(*:only-of-type) { + display: flex; } - .not-visited\\:flex { - &:not(*:visited) { - display: flex; - } + .not-visited\\:flex:not(*:visited) { + display: flex; } - .not-target\\:flex { - &:not(*:target) { - display: flex; - } + .not-target\\:flex:not(*:target) { + display: flex; } - .not-open\\:flex { - &:not(*:is([open], :popover-open, :open)) { - display: flex; - } + .not-open\\:flex:not(*:is([open], :popover-open, :open)) { + display: flex; } - .not-default\\:flex { - &:not(*:default) { - display: flex; - } + .not-default\\:flex:not(*:default) { + display: flex; } - .not-checked\\:flex { - &:not(*:checked) { - display: flex; - } + .not-checked\\:flex:not(*:checked) { + display: flex; } - .not-indeterminate\\:flex { - &:not(*:indeterminate) { - display: flex; - } + .not-indeterminate\\:flex:not(*:indeterminate) { + display: flex; } - .not-placeholder-shown\\:flex { - &:not(*:placeholder-shown) { - display: flex; - } + .not-placeholder-shown\\:flex:not(*:placeholder-shown) { + display: flex; } - .not-autofill\\:flex { - &:not(*:autofill) { - display: flex; - } + .not-autofill\\:flex:not(*:autofill) { + display: flex; } - .not-optional\\:flex { - &:not(*:optional) { - display: flex; - } + .not-optional\\:flex:not(*:optional) { + display: flex; } - .not-required\\:flex { - &:not(*:required) { - display: flex; - } + .not-required\\:flex:not(*:required) { + display: flex; } - .not-valid\\:flex { - &:not(*:valid) { - display: flex; - } + .not-valid\\:flex:not(*:valid) { + display: flex; } - .not-invalid\\:flex { - &:not(*:invalid) { - display: flex; - } + .not-invalid\\:flex:not(*:invalid) { + display: flex; } - .not-in-range\\:flex { - &:not(*:in-range) { - display: flex; - } + .not-in-range\\:flex:not(*:in-range) { + display: flex; } - .not-out-of-range\\:flex { - &:not(*:out-of-range) { - display: flex; - } + .not-out-of-range\\:flex:not(*:out-of-range) { + display: flex; } - .not-read-only\\:flex { - &:not(*:read-only) { - display: flex; - } + .not-read-only\\:flex:not(*:read-only) { + display: flex; } - .not-empty\\:flex { - &:not(*:empty) { - display: flex; - } + .not-empty\\:flex:not(*:empty) { + display: flex; } - .not-focus-within\\:flex { - &:not(*:focus-within) { - display: flex; - } + .not-focus-within\\:flex:not(*:focus-within) { + display: flex; } - .not-hover\\:flex { - &:not(*:hover) { - display: flex; - } - @media not (hover: hover) { - display: flex; - } + .not-hover\\:flex:not(*:hover) { + display: flex; } - .not-focus\\:flex { - &:not(*:focus) { + @media not (hover: hover) { + .not-hover\\:flex { display: flex; } } - .not-focus-visible\\:flex { - &:not(*:focus-visible) { - display: flex; - } + .not-focus\\:flex:not(*:focus) { + display: flex; } - .not-active\\:flex { - &:not(*:active) { - display: flex; - } + .not-focus-visible\\:flex:not(*:focus-visible) { + display: flex; } - .not-enabled\\:flex { - &:not(*:enabled) { - display: flex; - } + .not-active\\:flex:not(*:active) { + display: flex; } - .not-disabled\\:flex { - &:not(*:disabled) { - display: flex; - } + .not-enabled\\:flex:not(*:enabled) { + display: flex; } - .not-inert\\:flex { - &:not(*:is([inert], [inert] *)) { - display: flex; - } + .not-disabled\\:flex:not(*:disabled) { + display: flex; } - .not-has-checked\\:flex { - &:not(*:has(*:checked)) { - display: flex; - } + .not-inert\\:flex:not(*:is([inert], [inert] *)) { + display: flex; } - .not-aria-selected\\:flex { - &:not(*[aria-selected="true"]) { - display: flex; - } + .not-has-checked\\:flex:not(*:has(*:checked)) { + display: flex; } - .not-data-foo\\:flex { - &:not(*[data-foo]) { - display: flex; - } + .not-aria-selected\\:flex:not(*[aria-selected="true"]) { + display: flex; } - .not-nth-2\\:flex { - &:not(*:nth-child(2)) { - display: flex; - } + .not-data-foo\\:flex:not(*[data-foo]) { + display: flex; } - .not-supports-grid\\:flex { - @supports not (grid: var(--tw)) { - display: flex; - } + .not-nth-2\\:flex:not(*:nth-child(2)) { + display: flex; } - .not-motion-safe\\:flex { - @media not (prefers-reduced-motion: no-preference) { + @supports not (grid: var(--tw)) { + .not-supports-grid\\:flex { display: flex; } } - .not-motion-reduce\\:flex { - @media not (prefers-reduced-motion: reduce) { + @media not (prefers-reduced-motion: no-preference) { + .not-motion-safe\\:flex { display: flex; } } - .not-contrast-more\\:flex { - @media not (prefers-contrast: more) { + @media not (prefers-reduced-motion: reduce) { + .not-motion-reduce\\:flex { display: flex; } } - .not-contrast-less\\:flex { - @media not (prefers-contrast: less) { + @media not (prefers-contrast: more) { + .not-contrast-more\\:flex { display: flex; } } - .not-max-sm\\:flex { - @media not (width < 640px) { + @media not (prefers-contrast: less) { + .not-contrast-less\\:flex { display: flex; } } - .not-max-\\[130px\\]\\:flex { - @media not (width < 130px) { + @media not (width < 640px) { + .not-max-sm\\:flex { display: flex; } } - .not-min-\\[130px\\]\\:flex { - @media not (width >= 130px) { + @media not (width < 130px) { + .not-max-\\[130px\\]\\:flex { display: flex; } } - .not-min-sm\\:flex { - @media not (width >= 640px) { + @media not (width >= 130px) { + .not-min-\\[130px\\]\\:flex { display: flex; } } - .not-sm\\:flex { - @media not (width >= 640px) { + @media not (width >= 640px) { + .not-min-sm\\:flex { display: flex; } - } - .not-portrait\\:flex { - @media not (orientation: portrait) { + .not-sm\\:flex { display: flex; } } - .not-landscape\\:flex { - @media not (orientation: landscape) { + @media not (orientation: portrait) { + .not-portrait\\:flex { display: flex; } } - .not-ltr\\:flex { - &:not(*:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)) { + @media not (orientation: landscape) { + .not-landscape\\:flex { display: flex; } } - .not-rtl\\:flex { - &:not(*:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)) { - display: flex; - } + .not-ltr\\:flex:not(*:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)) { + display: flex; } - .not-dark\\:flex { - @media not (prefers-color-scheme: dark) { - display: flex; - } + .not-rtl\\:flex:not(*:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)) { + display: flex; } - .not-print\\:flex { - @media not print { + @media not (prefers-color-scheme: dark) { + .not-dark\\:flex { display: flex; } } - .not-forced-colors\\:flex { - @media not (forced-colors: active) { + @media not print { + .not-print\\:flex { display: flex; } } - .not-noscript\\:flex { - @media not (scripting: none) { + @media not (forced-colors: active) { + .not-forced-colors\\:flex { display: flex; } } - .not-hocus\\:flex { - &:not(*:hover, *:focus) { + @media not (scripting: none) { + .not-noscript\\:flex { display: flex; } } - .not-device-hocus\\:flex { - &:not(*:hover, *:focus) { - display: flex; - } - @media not (hover: hover) { - display: flex; - } + .not-hocus\\:flex:not(*:hover, *:focus) { + display: flex; } - .not-\\[\\:checked\\]\\:flex { - &:not(*:is(:checked)) { - display: flex; - } + .not-device-hocus\\:flex:not(*:hover, *:focus) { + display: flex; } - .not-\\[\\@media_\\(orientation\\:landscape\\)\\]\\:flex { - @media not (orientation:landscape) { + @media not (hover: hover) { + .not-device-hocus\\:flex { display: flex; } } - .not-\\[\\@media_not_\\(orientation\\:portrait\\)\\]\\:flex { - @media (orientation:portrait) { - display: flex; - } + .not-\\[\\:checked\\]\\:flex:not(*:checked) { + display: flex; } - .not-\\[\\@media_print\\]\\:flex { - @media not print { + @media not (orientation:landscape) { + .not-\\[\\@media_\\(orientation\\:landscape\\)\\]\\:flex { display: flex; } } - .not-\\[\\@media\\(orientation\\:portrait\\)\\]\\:flex { - @media not (orientation:portrait) { + @media (orientation:portrait) { + .not-\\[\\@media_not_\\(orientation\\:portrait\\)\\]\\:flex { display: flex; } } - .group-not-checked\\:flex { - &:is(:where(.group):not(*:checked) *) { + @media not print { + .not-\\[\\@media_print\\]\\:flex { display: flex; } } - .group-not-hocus\\:flex { - &:is(:where(.group):not(*:hover, *:focus) *) { + @media not (orientation:portrait) { + .not-\\[\\@media\\(orientation\\:portrait\\)\\]\\:flex { display: flex; } } - .group-not-hocus\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name):not(*:hover, *:focus) *) { - display: flex; - } + .group-not-checked\\:flex:is(:where(.group):not(*:checked) *) { + display: flex; } - .group-not-\\[\\:checked\\]\\:flex { - &:is(:where(.group):not(*:is(:checked)) *) { - display: flex; - } + .group-not-hocus\\:flex:is(:where(.group):not(*:hover, *:focus) *) { + display: flex; } - .group-not-\\[\\:checked\\]\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name):not(*:is(:checked)) *) { - display: flex; - } + .group-not-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(*:hover, *:focus) *) { + display: flex; } - .peer-not-checked\\:flex { - &:is(:where(.peer):not(*:checked) ~ *) { - display: flex; - } + .group-not-\\[\\:checked\\]\\:flex:is(:where(.group):not(*:checked) *) { + display: flex; } - .peer-not-hocus\\:flex { - &:is(:where(.peer):not(*:hover, *:focus) ~ *) { - display: flex; - } + .group-not-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(*:checked) *) { + display: flex; } - .peer-not-hocus\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name):not(*:hover, *:focus) ~ *) { - display: flex; - } + .peer-not-checked\\:flex:is(:where(.peer):not(*:checked) ~ *) { + display: flex; } - .peer-not-\\[\\:checked\\]\\:flex { - &:is(:where(.peer):not(*:is(:checked)) ~ *) { - display: flex; - } + .peer-not-hocus\\:flex:is(:where(.peer):not(*:hover, *:focus) ~ *) { + display: flex; } - .peer-not-\\[\\:checked\\]\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name):not(*:is(:checked)) ~ *) { - display: flex; - } + .peer-not-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):not(*:hover, *:focus) ~ *) { + display: flex; + } + .peer-not-\\[\\:checked\\]\\:flex:is(:where(.peer):not(*:checked) ~ *) { + display: flex; + } + .peer-not-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):not(*:checked) ~ *) { + display: flex; } " `) @@ -2510,23 +2072,23 @@ test('not', async () => { ), ).toMatchInlineSnapshot(` " - .not-has-a\\:flex { - @container not style(--a) { + @container not style(--a) { + .not-has-a\\:flex { display: flex; } } - .not-has-b\\:flex { - @container style(--b) { + @container style(--b) { + .not-has-b\\:flex { display: flex; } } - .not-has-c\\:flex { - @container foo not style(--c) { + @container foo not style(--c) { + .not-has-c\\:flex { display: flex; } } - .not-has-d\\:flex { - @container bar style(--d) { + @container bar style(--d) { + .not-has-d\\:flex { display: flex; } } @@ -2635,30 +2197,20 @@ test('in', async () => { ]), ).toMatchInlineSnapshot(` " - .not-in-\\[\\.group\\]\\:flex { - &:not(:where(*:is(.group)) *) { - display: flex; - } + .not-in-\\[\\.group\\]\\:flex:not(:where(*.group) *) { + display: flex; } - .not-in-\\[p\\]\\:flex { - &:not(:where(*:is(p)) *) { - display: flex; - } + .not-in-\\[p\\]\\:flex:not(:where(p:is(*)) *) { + display: flex; } - .in-data-visible\\:flex { - :where(*[data-visible]) & { - display: flex; - } + :where(*[data-visible]) .in-data-visible\\:flex { + display: flex; } - .in-\\[\\.group\\]\\:flex { - :where(*:is(.group)) & { - display: flex; - } + :where(*.group) .in-\\[\\.group\\]\\:flex { + display: flex; } - .in-\\[p\\]\\:flex { - :where(*:is(p)) & { - display: flex; - } + :where(p:is(*)) .in-\\[p\\]\\:flex { + display: flex; } " `) @@ -2715,160 +2267,98 @@ test('has', async () => { ), ).toMatchInlineSnapshot(` " - .group-has-checked\\:flex { - &:is(:where(.group):has(*:checked) *) { - display: flex; - } + .group-has-checked\\:flex:is(:where(.group):has(*:checked) *) { + display: flex; } - .group-has-checked\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name):has(*:checked) *) { - display: flex; - } + .group-has-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(*:checked) *) { + display: flex; } - .group-has-hocus\\:flex { - &:is(:where(.group):has(*:hover, *:focus) *) { - display: flex; - } + .group-has-hocus\\:flex:is(:where(.group):has(*:hover, *:focus) *) { + display: flex; } - .group-has-hocus\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name):has(*:hover, *:focus) *) { - display: flex; - } + .group-has-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(*:hover, *:focus) *) { + display: flex; } - .group-has-\\[\\:checked\\]\\:flex { - &:is(:where(.group):has(*:is(:checked)) *) { - display: flex; - } + .group-has-\\[\\:checked\\]\\:flex:is(:where(.group):has(*:checked) *) { + display: flex; } - .group-has-\\[\\:checked\\]\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name):has(*:is(:checked)) *) { - display: flex; - } + .group-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(*:checked) *) { + display: flex; } - .group-has-\\[\\&\\>img\\]\\:flex { - &:is(:where(.group):has(*>img) *) { - display: flex; - } + .group-has-\\[\\&\\>img\\]\\:flex:is(:where(.group):has(* > img) *) { + display: flex; } - .group-has-\\[\\&\\>img\\]\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name):has(*>img) *) { - display: flex; - } + .group-has-\\[\\&\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(* > img) *) { + display: flex; } - .group-has-\\[\\+img\\]\\:flex { - &:is(:where(.group):has(+img) *) { - display: flex; - } + .group-has-\\[\\+img\\]\\:flex:is(:where(.group):has( + img) *) { + display: flex; } - .group-has-\\[\\>img\\]\\:flex { - &:is(:where(.group):has(>img) *) { - display: flex; - } + .group-has-\\[\\>img\\]\\:flex:is(:where(.group):has( > img) *) { + display: flex; } - .group-has-\\[\\>img\\]\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name):has(>img) *) { - display: flex; - } + .group-has-\\[\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has( > img) *) { + display: flex; } - .group-has-\\[\\~img\\]\\:flex { - &:is(:where(.group):has(~img) *) { - display: flex; - } + .group-has-\\[\\~img\\]\\:flex:is(:where(.group):has( ~ img) *) { + display: flex; } - .peer-has-checked\\:flex { - &:is(:where(.peer):has(*:checked) ~ *) { - display: flex; - } + .peer-has-checked\\:flex:is(:where(.peer):has(*:checked) ~ *) { + display: flex; } - .peer-has-checked\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name):has(*:checked) ~ *) { - display: flex; - } + .peer-has-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(*:checked) ~ *) { + display: flex; } - .peer-has-hocus\\:flex { - &:is(:where(.peer):has(*:hover, *:focus) ~ *) { - display: flex; - } + .peer-has-hocus\\:flex:is(:where(.peer):has(*:hover, *:focus) ~ *) { + display: flex; } - .peer-has-hocus\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name):has(*:hover, *:focus) ~ *) { - display: flex; - } + .peer-has-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(*:hover, *:focus) ~ *) { + display: flex; } - .peer-has-\\[\\:checked\\]\\:flex { - &:is(:where(.peer):has(*:is(:checked)) ~ *) { - display: flex; - } + .peer-has-\\[\\:checked\\]\\:flex:is(:where(.peer):has(*:checked) ~ *) { + display: flex; } - .peer-has-\\[\\:checked\\]\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name):has(*:is(:checked)) ~ *) { - display: flex; - } + .peer-has-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(*:checked) ~ *) { + display: flex; } - .peer-has-\\[\\&\\>img\\]\\:flex { - &:is(:where(.peer):has(*>img) ~ *) { - display: flex; - } + .peer-has-\\[\\&\\>img\\]\\:flex:is(:where(.peer):has(* > img) ~ *) { + display: flex; } - .peer-has-\\[\\&\\>img\\]\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name):has(*>img) ~ *) { - display: flex; - } + .peer-has-\\[\\&\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(* > img) ~ *) { + display: flex; } - .peer-has-\\[\\+img\\]\\:flex { - &:is(:where(.peer):has(+img) ~ *) { - display: flex; - } + .peer-has-\\[\\+img\\]\\:flex:is(:where(.peer):has( + img) ~ *) { + display: flex; } - .peer-has-\\[\\>img\\]\\:flex { - &:is(:where(.peer):has(>img) ~ *) { - display: flex; - } + .peer-has-\\[\\>img\\]\\:flex:is(:where(.peer):has( > img) ~ *) { + display: flex; } - .peer-has-\\[\\>img\\]\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name):has(>img) ~ *) { - display: flex; - } + .peer-has-\\[\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has( > img) ~ *) { + display: flex; } - .peer-has-\\[\\~img\\]\\:flex { - &:is(:where(.peer):has(~img) ~ *) { - display: flex; - } + .peer-has-\\[\\~img\\]\\:flex:is(:where(.peer):has( ~ img) ~ *) { + display: flex; } - .has-checked\\:flex { - &:has(*:checked) { - display: flex; - } + .has-checked\\:flex:has(*:checked) { + display: flex; } - .has-hocus\\:flex { - &:has(*:hover, *:focus) { - display: flex; - } + .has-hocus\\:flex:has(*:hover, *:focus) { + display: flex; } - .has-\\[\\:checked\\]\\:flex { - &:has(*:is(:checked)) { - display: flex; - } + .has-\\[\\:checked\\]\\:flex:has(*:checked) { + display: flex; } - .has-\\[\\&\\>img\\]\\:flex { - &:has(*>img) { - display: flex; - } + .has-\\[\\&\\>img\\]\\:flex:has(* > img) { + display: flex; } - .has-\\[\\+img\\]\\:flex { - &:has(+img) { - display: flex; - } + .has-\\[\\+img\\]\\:flex:has( + img) { + display: flex; } - .has-\\[\\>img\\]\\:flex { - &:has(>img) { - display: flex; - } + .has-\\[\\>img\\]\\:flex:has( > img) { + display: flex; } - .has-\\[\\~img\\]\\:flex { - &:has(~img) { - display: flex; - } + .has-\\[\\~img\\]\\:flex:has( ~ img) { + display: flex; } " `) @@ -2920,85 +2410,53 @@ test('aria', async () => { ]), ).toMatchInlineSnapshot(` " - .group-aria-checked\\:flex { - &:is(:where(.group)[aria-checked="true"] *) { - display: flex; - } - } - .group-aria-checked\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name)[aria-checked="true"] *) { - display: flex; - } + .group-aria-checked\\:flex:is(:where(.group)[aria-checked="true"] *) { + display: flex; } - .group-aria-\\[modal\\]\\:flex { - &:is(:where(.group)[aria-modal] *) { - display: flex; - } + .group-aria-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-checked="true"] *) { + display: flex; } - .group-aria-\\[modal\\]\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name)[aria-modal] *) { - display: flex; - } + .group-aria-\\[modal\\]\\:flex:is(:where(.group)[aria-modal] *) { + display: flex; } - .group-aria-\\[valuenow\\=1\\]\\:flex { - &:is(:where(.group)[aria-valuenow="1"] *) { - display: flex; - } + .group-aria-\\[modal\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-modal] *) { + display: flex; } - .group-aria-\\[valuenow\\=1\\]\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name)[aria-valuenow="1"] *) { - display: flex; - } + .group-aria-\\[valuenow\\=1\\]\\:flex:is(:where(.group)[aria-valuenow="1"] *) { + display: flex; } - .peer-aria-checked\\:flex { - &:is(:where(.peer)[aria-checked="true"] ~ *) { - display: flex; - } + .group-aria-\\[valuenow\\=1\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-valuenow="1"] *) { + display: flex; } - .peer-aria-checked\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name)[aria-checked="true"] ~ *) { - display: flex; - } + .peer-aria-checked\\:flex:is(:where(.peer)[aria-checked="true"] ~ *) { + display: flex; } - .peer-aria-\\[modal\\]\\:flex { - &:is(:where(.peer)[aria-modal] ~ *) { - display: flex; - } + .peer-aria-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-checked="true"] ~ *) { + display: flex; } - .peer-aria-\\[modal\\]\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name)[aria-modal] ~ *) { - display: flex; - } + .peer-aria-\\[modal\\]\\:flex:is(:where(.peer)[aria-modal] ~ *) { + display: flex; } - .peer-aria-\\[valuenow\\=1\\]\\:flex { - &:is(:where(.peer)[aria-valuenow="1"] ~ *) { - display: flex; - } + .peer-aria-\\[modal\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-modal] ~ *) { + display: flex; } - .peer-aria-\\[valuenow\\=1\\]\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name)[aria-valuenow="1"] ~ *) { - display: flex; - } + .peer-aria-\\[valuenow\\=1\\]\\:flex:is(:where(.peer)[aria-valuenow="1"] ~ *) { + display: flex; } - .aria-checked\\:flex { - &[aria-checked="true"] { - display: flex; - } + .peer-aria-\\[valuenow\\=1\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-valuenow="1"] ~ *) { + display: flex; } - .aria-\\[invalid\\=spelling\\]\\:flex { - &[aria-invalid="spelling"] { - display: flex; - } + .aria-checked\\:flex[aria-checked="true"] { + display: flex; } - .aria-\\[valuenow_\\=_\\"1\\"\\]\\:flex { - &[aria-valuenow = "1"] { - display: flex; - } + .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"] { + display: flex; } - .aria-\\[valuenow\\=1\\]\\:flex { - &[aria-valuenow="1"] { - display: flex; - } + .aria-\\[valuenow_\\=_\\"1\\"\\]\\:flex[aria-valuenow = "1"] { + display: flex; + } + .aria-\\[valuenow\\=1\\]\\:flex[aria-valuenow="1"] { + display: flex; } " `) @@ -3036,120 +2494,74 @@ test('data', async () => { ]), ).toMatchInlineSnapshot(` " - .group-data-\\[disabled\\]\\:flex { - &:is(:where(.group)[data-disabled] *) { - display: flex; - } + .group-data-\\[disabled\\]\\:flex:is(:where(.group)[data-disabled] *) { + display: flex; } - .group-data-\\[disabled\\]\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name)[data-disabled] *) { - display: flex; - } + .group-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-disabled] *) { + display: flex; } - .group-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name)[data-foo$='bar' i] *) { - display: flex; - } + .group-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo$='bar' i] *) { + display: flex; } - .group-data-\\[foo\\$\\=bar_baz_i\\]\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name)[data-foo$="bar baz" i] *) { - display: flex; - } + .group-data-\\[foo\\$\\=bar_baz_i\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo$="bar baz" i] *) { + display: flex; } - .group-data-\\[foo\\=1\\]\\:flex { - &:is(:where(.group)[data-foo="1"] *) { - display: flex; - } + .group-data-\\[foo\\=1\\]\\:flex:is(:where(.group)[data-foo="1"] *) { + display: flex; } - .group-data-\\[foo\\=1\\]\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name)[data-foo="1"] *) { - display: flex; - } + .group-data-\\[foo\\=1\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo="1"] *) { + display: flex; } - .group-data-\\[foo\\=bar\\ baz\\]\\/parent-name\\:flex { - &:is(:where(.group\\/parent-name)[data-foo="bar baz"] *) { - display: flex; - } + .group-data-\\[foo\\=bar\\ baz\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo="bar baz"] *) { + display: flex; } - .peer-data-\\[disabled\\]\\:flex { - &:is(:where(.peer)[data-disabled] ~ *) { - display: flex; - } + .peer-data-\\[disabled\\]\\:flex:is(:where(.peer)[data-disabled] ~ *) { + display: flex; } - .peer-data-\\[disabled\\]\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name)[data-disabled] ~ *) { - display: flex; - } + .peer-data-\\[disabled\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-disabled] ~ *) { + display: flex; } - .peer-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name)[data-foo$='bar' i] ~ *) { - display: flex; - } + .peer-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo$='bar' i] ~ *) { + display: flex; } - .peer-data-\\[foo\\$\\=bar_baz_i\\]\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name)[data-foo$="bar baz" i] ~ *) { - display: flex; - } + .peer-data-\\[foo\\$\\=bar_baz_i\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo$="bar baz" i] ~ *) { + display: flex; } - .peer-data-\\[foo\\=1\\]\\:flex { - &:is(:where(.peer)[data-foo="1"] ~ *) { - display: flex; - } + .peer-data-\\[foo\\=1\\]\\:flex:is(:where(.peer)[data-foo="1"] ~ *) { + display: flex; } - .peer-data-\\[foo\\=1\\]\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name)[data-foo="1"] ~ *) { - display: flex; - } + .peer-data-\\[foo\\=1\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo="1"] ~ *) { + display: flex; } - .peer-data-\\[foo\\=bar\\ baz\\]\\/sibling-name\\:flex { - &:is(:where(.peer\\/sibling-name)[data-foo="bar baz"] ~ *) { - display: flex; - } + .peer-data-\\[foo\\=bar\\ baz\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo="bar baz"] ~ *) { + display: flex; } - .data-disabled\\:flex { - &[data-disabled] { - display: flex; - } + .data-disabled\\:flex[data-disabled] { + display: flex; } - .data-\\[foo\\$\\=\\'bar\\'_i\\]\\:flex { - &[data-foo$='bar' i] { - display: flex; - } + .data-\\[foo\\$\\=\\'bar\\'_i\\]\\:flex[data-foo$='bar' i] { + display: flex; } - .data-\\[foo\\$\\=bar_baz_i\\]\\:flex { - &[data-foo$="bar baz" i] { - display: flex; - } + .data-\\[foo\\$\\=bar_baz_i\\]\\:flex[data-foo$="bar baz" i] { + display: flex; } - .data-\\[foo\\=1\\]\\:flex { - &[data-foo="1"] { - display: flex; - } + .data-\\[foo\\=1\\]\\:flex[data-foo="1"] { + display: flex; } - .data-\\[foo\\=bar_baz\\]\\:flex { - &[data-foo="bar baz"] { - display: flex; - } + .data-\\[foo\\=bar_baz\\]\\:flex[data-foo="bar baz"] { + display: flex; } - .data-\\[potato_\\=_\\"salad\\"\\]\\:flex { - &[data-potato = "salad"] { - display: flex; - } + .data-\\[potato_\\=_\\"salad\\"\\]\\:flex[data-potato = "salad"] { + display: flex; } - .data-\\[potato_\\^\\=_\\"salad\\"\\]\\:flex { - &[data-potato ^= "salad"] { - display: flex; - } + .data-\\[potato_\\^\\=_\\"salad\\"\\]\\:flex[data-potato ^= "salad"] { + display: flex; } - .data-\\[potato\\=\\"\\^_\\=\\"\\]\\:flex { - &[data-potato="^ ="] { - display: flex; - } + .data-\\[potato\\=\\"\\^_\\=\\"\\]\\:flex[data-potato="^ ="] { + display: flex; } - .data-\\[potato\\=salad\\]\\:flex { - &[data-potato="salad"] { - display: flex; - } + .data-\\[potato\\=salad\\]\\:flex[data-potato="salad"] { + display: flex; } " `) @@ -3168,8 +2580,8 @@ test('data', async () => { test('portrait', async () => { expect(await run(['portrait:flex'])).toMatchInlineSnapshot(` " - .portrait\\:flex { - @media (orientation: portrait) { + @media (orientation: portrait) { + .portrait\\:flex { display: flex; } } @@ -3181,8 +2593,8 @@ test('portrait', async () => { test('landscape', async () => { expect(await run(['landscape:flex'])).toMatchInlineSnapshot(` " - .landscape\\:flex { - @media (orientation: landscape) { + @media (orientation: landscape) { + .landscape\\:flex { display: flex; } } @@ -3194,8 +2606,8 @@ test('landscape', async () => { test('contrast-more', async () => { expect(await run(['contrast-more:flex'])).toMatchInlineSnapshot(` " - .contrast-more\\:flex { - @media (prefers-contrast: more) { + @media (prefers-contrast: more) { + .contrast-more\\:flex { display: flex; } } @@ -3207,8 +2619,8 @@ test('contrast-more', async () => { test('contrast-less', async () => { expect(await run(['contrast-less:flex'])).toMatchInlineSnapshot(` " - .contrast-less\\:flex { - @media (prefers-contrast: less) { + @media (prefers-contrast: less) { + .contrast-less\\:flex { display: flex; } } @@ -3220,8 +2632,8 @@ test('contrast-less', async () => { test('forced-colors', async () => { expect(await run(['forced-colors:flex'])).toMatchInlineSnapshot(` " - .forced-colors\\:flex { - @media (forced-colors: active) { + @media (forced-colors: active) { + .forced-colors\\:flex { display: flex; } } @@ -3233,8 +2645,8 @@ test('forced-colors', async () => { test('inverted-colors', async () => { expect(await run(['inverted-colors:flex'])).toMatchInlineSnapshot(` " - .inverted-colors\\:flex { - @media (inverted-colors: inverted) { + @media (inverted-colors: inverted) { + .inverted-colors\\:flex { display: flex; } } @@ -3245,8 +2657,8 @@ test('inverted-colors', async () => { test('pointer-none', async () => { expect(await run(['pointer-none:flex'])).toMatchInlineSnapshot(` " - .pointer-none\\:flex { - @media (pointer: none) { + @media (pointer: none) { + .pointer-none\\:flex { display: flex; } } @@ -3257,8 +2669,8 @@ test('pointer-none', async () => { test('pointer-coarse', async () => { expect(await run(['pointer-coarse:flex'])).toMatchInlineSnapshot(` " - .pointer-coarse\\:flex { - @media (pointer: coarse) { + @media (pointer: coarse) { + .pointer-coarse\\:flex { display: flex; } } @@ -3269,8 +2681,8 @@ test('pointer-coarse', async () => { test('pointer-fine', async () => { expect(await run(['pointer-fine:flex'])).toMatchInlineSnapshot(` " - .pointer-fine\\:flex { - @media (pointer: fine) { + @media (pointer: fine) { + .pointer-fine\\:flex { display: flex; } } @@ -3281,8 +2693,8 @@ test('pointer-fine', async () => { test('any-pointer-none', async () => { expect(await run(['any-pointer-none:flex'])).toMatchInlineSnapshot(` " - .any-pointer-none\\:flex { - @media (any-pointer: none) { + @media (any-pointer: none) { + .any-pointer-none\\:flex { display: flex; } } @@ -3293,8 +2705,8 @@ test('any-pointer-none', async () => { test('any-pointer-coarse', async () => { expect(await run(['any-pointer-coarse:flex'])).toMatchInlineSnapshot(` " - .any-pointer-coarse\\:flex { - @media (any-pointer: coarse) { + @media (any-pointer: coarse) { + .any-pointer-coarse\\:flex { display: flex; } } @@ -3305,8 +2717,8 @@ test('any-pointer-coarse', async () => { test('any-pointer-fine', async () => { expect(await run(['any-pointer-fine:flex'])).toMatchInlineSnapshot(` " - .any-pointer-fine\\:flex { - @media (any-pointer: fine) { + @media (any-pointer: fine) { + .any-pointer-fine\\:flex { display: flex; } } @@ -3317,8 +2729,8 @@ test('any-pointer-fine', async () => { test('scripting-none', async () => { expect(await run(['noscript:flex'])).toMatchInlineSnapshot(` " - .noscript\\:flex { - @media (scripting: none) { + @media (scripting: none) { + .noscript\\:flex { display: flex; } } @@ -3342,55 +2754,35 @@ test('nth', async () => { ]), ).toMatchInlineSnapshot(` " - .nth-3\\:flex { - &:nth-child(3) { - display: flex; - } + .nth-3\\:flex:nth-child(3) { + display: flex; } - .nth-\\[2n\\+1\\]\\:flex { - &:nth-child(2n+1) { - display: flex; - } + .nth-\\[2n\\+1\\]\\:flex:nth-child(2n+1) { + display: flex; } - .nth-\\[2n\\+1_of_\\.foo\\]\\:flex { - &:nth-child(2n+1 of .foo) { - display: flex; - } + .nth-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-child(2n+1 of .foo) { + display: flex; } - .nth-last-3\\:flex { - &:nth-last-child(3) { - display: flex; - } + .nth-last-3\\:flex:nth-last-child(3) { + display: flex; } - .nth-last-\\[2n\\+1\\]\\:flex { - &:nth-last-child(2n+1) { - display: flex; - } + .nth-last-\\[2n\\+1\\]\\:flex:nth-last-child(2n+1) { + display: flex; } - .nth-last-\\[2n\\+1_of_\\.foo\\]\\:flex { - &:nth-last-child(2n+1 of .foo) { - display: flex; - } + .nth-last-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-last-child(2n+1 of .foo) { + display: flex; } - .nth-of-type-3\\:flex { - &:nth-of-type(3) { - display: flex; - } + .nth-of-type-3\\:flex:nth-of-type(3) { + display: flex; } - .nth-of-type-\\[2n\\+1\\]\\:flex { - &:nth-of-type(2n+1) { - display: flex; - } + .nth-of-type-\\[2n\\+1\\]\\:flex:nth-of-type(2n+1) { + display: flex; } - .nth-last-of-type-3\\:flex { - &:nth-last-of-type(3) { - display: flex; - } + .nth-last-of-type-3\\:flex:nth-last-of-type(3) { + display: flex; } - .nth-last-of-type-\\[2n\\+1\\]\\:flex { - &:nth-last-of-type(2n+1) { - display: flex; - } + .nth-last-of-type-\\[2n\\+1\\]\\:flex:nth-last-of-type(2n+1) { + display: flex; } " `) @@ -3460,93 +2852,89 @@ test('container queries', async () => { ), ).toMatchInlineSnapshot(` " - .\\@max-foo-bar\\/name\\:flex { - @container name (width < 1440px) { + @container name (width < 1440px) { + .\\@max-foo-bar\\/name\\:flex { display: flex; } } - .\\@max-foo-bar\\:flex { - @container (width < 1440px) { + @container (width < 1440px) { + .\\@max-foo-bar\\:flex { display: flex; } } - .\\@max-lg\\/name\\:flex { - @container name (width < 1024px) { + @container name (width < 1024px) { + .\\@max-lg\\/name\\:flex { display: flex; } } - .\\@max-lg\\:flex { - @container (width < 1024px) { + @container (width < 1024px) { + .\\@max-lg\\:flex { display: flex; } } - .\\@max-\\[456px\\]\\/name\\:flex { - @container name (width < 456px) { + @container name (width < 456px) { + .\\@max-\\[456px\\]\\/name\\:flex { display: flex; } } - .\\@max-\\[123px\\]\\:flex { - @container (width < 123px) { + @container (width < 123px) { + .\\@max-\\[123px\\]\\:flex { display: flex; } } - .\\@\\[123px\\]\\:flex { - @container (width >= 123px) { + @container (width >= 123px) { + .\\@\\[123px\\]\\:flex { display: flex; } - } - .\\@min-\\[123px\\]\\:flex { - @container (width >= 123px) { + .\\@min-\\[123px\\]\\:flex { display: flex; } } - .\\@\\[456px\\]\\/name\\:flex { - @container name (width >= 456px) { + @container name (width >= 456px) { + .\\@\\[456px\\]\\/name\\:flex { display: flex; } - } - .\\@min-\\[456px\\]\\/name\\:flex { - @container name (width >= 456px) { + .\\@min-\\[456px\\]\\/name\\:flex { display: flex; } } - .\\@lg\\/name\\:flex { - @container name (width >= 1024px) { + @container name (width >= 1024px) { + .\\@lg\\/name\\:flex { display: flex; } } - .\\@lg\\:flex { - @container (width >= 1024px) { + @container (width >= 1024px) { + .\\@lg\\:flex { display: flex; } } - .\\@min-lg\\/name\\:flex { - @container name (width >= 1024px) { + @container name (width >= 1024px) { + .\\@min-lg\\/name\\:flex { display: flex; } } - .\\@min-lg\\:flex { - @container (width >= 1024px) { + @container (width >= 1024px) { + .\\@min-lg\\:flex { display: flex; } } - .\\@foo-bar\\/name\\:flex { - @container name (width >= 1440px) { + @container name (width >= 1440px) { + .\\@foo-bar\\/name\\:flex { display: flex; } } - .\\@foo-bar\\:flex { - @container (width >= 1440px) { + @container (width >= 1440px) { + .\\@foo-bar\\:flex { display: flex; } } - .\\@min-foo-bar\\/name\\:flex { - @container name (width >= 1440px) { + @container name (width >= 1440px) { + .\\@min-foo-bar\\/name\\:flex { display: flex; } } - .\\@min-foo-bar\\:flex { - @container (width >= 1440px) { + @container (width >= 1440px) { + .\\@min-foo-bar\\:flex { display: flex; } } @@ -3674,396 +3062,276 @@ test('variant order', async () => { ).toMatchInlineSnapshot(` " @layer properties; - .group-hover\\:flex { - &:is(:where(.group):hover *) { - @media (hover: hover) { - display: flex; - } - } - } - .peer-hover\\:flex { - &:is(:where(.peer):hover ~ *) { - @media (hover: hover) { - display: flex; - } - } - } - .first-letter\\:flex { - &::first-letter { + @media (hover: hover) { + .group-hover\\:flex:is(:where(.group):hover *) { display: flex; } - } - .first-line\\:flex { - &::first-line { + .peer-hover\\:flex:is(:where(.peer):hover ~ *) { display: flex; } } - .marker\\:flex { - & *::marker { - display: flex; - } - &::marker { - display: flex; - } - & *::-webkit-details-marker { - display: flex; - } - &::-webkit-details-marker { - display: flex; - } + .first-letter\\:flex::first-letter { + display: flex; } - .selection\\:flex { - & *::selection { - display: flex; - } - &::selection { - display: flex; - } + .first-line\\:flex::first-line { + display: flex; } - .file\\:flex { - &::file-selector-button { - display: flex; - } + .marker\\:flex *::marker { + display: flex; } - .placeholder\\:flex { - &::placeholder { - display: flex; - } + .marker\\:flex::marker { + display: flex; } - .backdrop\\:flex { - &::backdrop { - display: flex; - } + .marker\\:flex *::-webkit-details-marker { + display: flex; } - .details-content\\:flex { - &::details-content { - display: flex; - } + .marker\\:flex::-webkit-details-marker { + display: flex; } - .before\\:flex { - &::before { - content: var(--tw-content); - display: flex; - } + .selection\\:flex *::selection { + display: flex; } - .after\\:flex { - &::after { - content: var(--tw-content); - display: flex; - } + .selection\\:flex::selection { + display: flex; } - .first\\:flex { - &:first-child { - display: flex; - } + .file\\:flex::file-selector-button { + display: flex; } - .last\\:flex { - &:last-child { - display: flex; - } + .placeholder\\:flex::placeholder { + display: flex; } - .only\\:flex { - &:only-child { - display: flex; - } + .backdrop\\:flex::backdrop { + display: flex; } - .odd\\:flex { - &:nth-child(odd) { - display: flex; - } + .details-content\\:flex::details-content { + display: flex; } - .even\\:flex { - &:nth-child(even) { - display: flex; - } + .before\\:flex::before { + content: var(--tw-content); + display: flex; } - .first-of-type\\:flex { - &:first-of-type { - display: flex; - } + .after\\:flex::after { + content: var(--tw-content); + display: flex; } - .last-of-type\\:flex { - &:last-of-type { - display: flex; - } + .first\\:flex:first-child { + display: flex; } - .only-of-type\\:flex { - &:only-of-type { - display: flex; - } + .last\\:flex:last-child { + display: flex; } - .visited\\:flex { - &:visited { - display: flex; - } + .only\\:flex:only-child { + display: flex; } - .target\\:flex { - &:target { - display: flex; - } + .odd\\:flex:nth-child(odd) { + display: flex; } - .open\\:flex { - &:is([open], :popover-open, :open) { - display: flex; - } + .even\\:flex:nth-child(even) { + display: flex; } - .default\\:flex { - &:default { - display: flex; - } + .first-of-type\\:flex:first-of-type { + display: flex; } - .checked\\:flex { - &:checked { - display: flex; - } + .last-of-type\\:flex:last-of-type { + display: flex; } - .indeterminate\\:flex { - &:indeterminate { - display: flex; - } + .only-of-type\\:flex:only-of-type { + display: flex; } - .placeholder-shown\\:flex { - &:placeholder-shown { - display: flex; - } + .visited\\:flex:visited { + display: flex; } - .autofill\\:flex { - &:autofill { - display: flex; - } + .target\\:flex:target { + display: flex; } - .optional\\:flex { - &:optional { - display: flex; - } + .open\\:flex:is([open], :popover-open, :open) { + display: flex; } - .required\\:flex { - &:required { - display: flex; - } + .default\\:flex:default { + display: flex; } - .valid\\:flex { - &:valid { - display: flex; - } + .checked\\:flex:checked { + display: flex; } - .invalid\\:flex { - &:invalid { - display: flex; - } + .indeterminate\\:flex:indeterminate { + display: flex; } - .in-range\\:flex { - &:in-range { - display: flex; - } + .placeholder-shown\\:flex:placeholder-shown { + display: flex; } - .out-of-range\\:flex { - &:out-of-range { - display: flex; - } + .autofill\\:flex:autofill { + display: flex; } - .read-only\\:flex { - &:read-only { - display: flex; - } + .optional\\:flex:optional { + display: flex; } - .empty\\:flex { - &:empty { - display: flex; - } + .required\\:flex:required { + display: flex; } - .focus-within\\:flex { - &:focus-within { - display: flex; - } + .valid\\:flex:valid { + display: flex; } - .hover\\:flex { - &:hover { - @media (hover: hover) { - display: flex; - } - } + .invalid\\:flex:invalid { + display: flex; } - .focus\\:flex { - &:focus { - display: flex; - } + .in-range\\:flex:in-range { + display: flex; } - .focus-visible\\:flex { - &:focus-visible { - display: flex; - } + .out-of-range\\:flex:out-of-range { + display: flex; } - .active\\:flex { - &:active { - display: flex; - } + .read-only\\:flex:read-only { + display: flex; } - .enabled\\:flex { - &:enabled { - display: flex; - } + .empty\\:flex:empty { + display: flex; } - .disabled\\:flex { - &:disabled { - display: flex; - } + .focus-within\\:flex:focus-within { + display: flex; } - .has-\\[\\:hover\\]\\:flex { - &:has(*:is(:hover)) { + @media (hover: hover) { + .hover\\:flex:hover { display: flex; } } - .aria-busy\\:flex { - &[aria-busy="true"] { - display: flex; - } + .focus\\:flex:focus { + display: flex; } - .aria-checked\\:flex { - &[aria-checked="true"] { - display: flex; - } + .focus-visible\\:flex:focus-visible { + display: flex; } - .aria-disabled\\:flex { - &[aria-disabled="true"] { - display: flex; - } + .active\\:flex:active { + display: flex; } - .aria-expanded\\:flex { - &[aria-expanded="true"] { - display: flex; - } + .enabled\\:flex:enabled { + display: flex; } - .aria-hidden\\:flex { - &[aria-hidden="true"] { - display: flex; - } + .disabled\\:flex:disabled { + display: flex; } - .aria-pressed\\:flex { - &[aria-pressed="true"] { - display: flex; - } + .has-\\[\\:hover\\]\\:flex:has(*:hover) { + display: flex; } - .aria-readonly\\:flex { - &[aria-readonly="true"] { - display: flex; - } + .aria-busy\\:flex[aria-busy="true"] { + display: flex; } - .aria-required\\:flex { - &[aria-required="true"] { - display: flex; - } + .aria-checked\\:flex[aria-checked="true"] { + display: flex; } - .aria-selected\\:flex { - &[aria-selected="true"] { - display: flex; - } + .aria-disabled\\:flex[aria-disabled="true"] { + display: flex; } - .aria-\\[custom\\=true\\]\\:flex { - &[aria-custom="true"] { - display: flex; - } + .aria-expanded\\:flex[aria-expanded="true"] { + display: flex; } - .data-custom\\:flex { - &[data-custom] { - display: flex; - } + .aria-hidden\\:flex[aria-hidden="true"] { + display: flex; } - .data-\\[custom\\=true\\]\\:flex { - &[data-custom="true"] { - display: flex; - } + .aria-pressed\\:flex[aria-pressed="true"] { + display: flex; } - .supports-\\[display\\:flex\\]\\:flex { - @supports (display:flex) { - display: flex; - } + .aria-readonly\\:flex[aria-readonly="true"] { + display: flex; } - .motion-safe\\:flex { - @media (prefers-reduced-motion: no-preference) { - display: flex; - } + .aria-required\\:flex[aria-required="true"] { + display: flex; } - .motion-reduce\\:flex { - @media (prefers-reduced-motion: reduce) { - display: flex; - } + .aria-selected\\:flex[aria-selected="true"] { + display: flex; + } + .aria-\\[custom\\=true\\]\\:flex[aria-custom="true"] { + display: flex; + } + .data-custom\\:flex[data-custom] { + display: flex; + } + .data-\\[custom\\=true\\]\\:flex[data-custom="true"] { + display: flex; } - .contrast-more\\:flex { - @media (prefers-contrast: more) { + @supports (display:flex) { + .supports-\\[display\\:flex\\]\\:flex { display: flex; } } - .contrast-less\\:flex { - @media (prefers-contrast: less) { + @media (prefers-reduced-motion: no-preference) { + .motion-safe\\:flex { display: flex; } } - .sm\\:flex { - @media (width >= 640px) { + @media (prefers-reduced-motion: reduce) { + .motion-reduce\\:flex { display: flex; } } - .md\\:flex { - @media (width >= 768px) { + @media (prefers-contrast: more) { + .contrast-more\\:flex { display: flex; } } - .lg\\:flex { - @media (width >= 1024px) { + @media (prefers-contrast: less) { + .contrast-less\\:flex { display: flex; } } - .xl\\:flex { - @media (width >= 1280px) { + @media (width >= 640px) { + .sm\\:flex { display: flex; } } - .\\32 xl\\:flex { - @media (width >= 1536px) { + @media (width >= 768px) { + .md\\:flex { display: flex; } } - .portrait\\:flex { - @media (orientation: portrait) { + @media (width >= 1024px) { + .lg\\:flex { display: flex; } } - .landscape\\:flex { - @media (orientation: landscape) { + @media (width >= 1280px) { + .xl\\:flex { display: flex; } } - .ltr\\:flex { - &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { + @media (width >= 1536px) { + .\\32 xl\\:flex { display: flex; } } - .rtl\\:flex { - &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + @media (orientation: portrait) { + .portrait\\:flex { display: flex; } } - .dark\\:flex { - @media (prefers-color-scheme: dark) { + @media (orientation: landscape) { + .landscape\\:flex { display: flex; } } - .print\\:flex { - @media print { + .ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { + display: flex; + } + .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + display: flex; + } + @media (prefers-color-scheme: dark) { + .dark\\:flex { display: flex; } } - .forced-colors\\:flex { - @media (forced-colors: active) { + @media print { + .print\\:flex { display: flex; } } - .\\[\\&_p\\]\\:flex { - & p { + @media (forced-colors: active) { + .forced-colors\\:flex { display: flex; } } + .\\[\\&_p\\]\\:flex p { + display: flex; + } @property --tw-content { syntax: "*"; initial-value: ""; @@ -4104,35 +3372,23 @@ test('variants with the same root are sorted deterministically', async () => { for (let classList of classLists) { expect(await run(classList)).toMatchInlineSnapshot(` " - .data-active\\:flex { - &[data-active] { - display: flex; - } + .data-active\\:flex[data-active] { + display: flex; } - .data-focus\\:flex { - &[data-focus] { - display: flex; - } + .data-focus\\:flex[data-focus] { + display: flex; } - .data-hover\\:flex { - &[data-hover] { - display: flex; - } + .data-hover\\:flex[data-hover] { + display: flex; } - .data-\\[bar\\]\\:flex { - &[data-bar] { - display: flex; - } + .data-\\[bar\\]\\:flex[data-bar] { + display: flex; } - .data-\\[baz\\]\\:flex { - &[data-baz] { - display: flex; - } + .data-\\[baz\\]\\:flex[data-baz] { + display: flex; } - .data-\\[foo\\]\\:flex { - &[data-foo] { - display: flex; - } + .data-\\[foo\\]\\:flex[data-foo] { + display: flex; } " `) @@ -4180,30 +3436,20 @@ test('matchVariant sorts deterministically', async () => { }), ).toMatchInlineSnapshot(` " - .is-data\\:flex { - &:is([data-default]) { - display: flex; - } + .is-data\\:flex[data-default] { + display: flex; } - .is-data-foo\\:flex { - &:is([data-foo]) { - display: flex; - } + .is-data-foo\\:flex[data-foo] { + display: flex; } - .is-data-bar\\:flex { - &:is([data-bar]) { - display: flex; - } + .is-data-bar\\:flex[data-bar] { + display: flex; } - .is-data-\\[potato\\]\\:flex { - &:is([data-potato]) { - display: flex; - } + .is-data-\\[potato\\]\\:flex[data-potato] { + display: flex; } - .is-data-\\[sandwich\\]\\:flex { - &:is([data-sandwich]) { - display: flex; - } + .is-data-\\[sandwich\\]\\:flex[data-sandwich] { + display: flex; } " `) @@ -4223,25 +3469,17 @@ test('move modifier of compound variant to sub-variant if its also a compound va ]), ).toMatchInlineSnapshot(` " - .not-group-focus\\/name\\:flex { - &:not(*:is(:where(.group\\/name):focus *)) { - display: flex; - } + .not-group-focus\\/name\\:flex:not(*:is(:where(.group\\/name):focus *)) { + display: flex; } - .group-peer-focus\\/name\\:flex { - &:is(:where(.group\\/name):is(:where(.peer):focus ~ *) *) { - display: flex; - } + .group-peer-focus\\/name\\:flex:is(:where(.group\\/name):is(:where(.peer):focus ~ *) *) { + display: flex; } - .in-group-focus\\/name\\:flex { - :where(*:is(:where(.group\\/name):focus *)) & { - display: flex; - } + :where(*:is(:where(.group\\/name):focus *)) .in-group-focus\\/name\\:flex { + display: flex; } - .has-group-focus\\/name\\:flex { - &:has(*:is(:where(.group\\/name):focus *)) { - display: flex; - } + .has-group-focus\\/name\\:flex:has(*:is(:where(.group\\/name):focus *)) { + display: flex; } " `) From 1fa185f7f19aba879316bd782b4da90a6b4d6530 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 25 May 2026 00:59:53 +0200 Subject: [PATCH 14/20] validate `data-*` and `aria-*` attribute selectors --- packages/tailwindcss/src/variants.ts | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 4d4637d8f55d..82242861f90b 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -11,6 +11,7 @@ import { type Rule, type StyleRule, } from './ast' +import * as AttributeSelectorParser from './attribute-selector-parser' import { type Variant } from './candidate' import { applyVariant } from './compile' import type { DesignSystem } from './design-system' @@ -845,11 +846,15 @@ export function createVariants(theme: Theme): Variants { if (!variant.value || variant.modifier) return null if (variant.value.kind === 'arbitrary') { - ruleNode.nodes = [ - styleRule(`&[aria-${quoteAttributeValue(variant.value.value)}]`, ruleNode.nodes), - ] + let selector = `[aria-${quoteAttributeValue(variant.value.value)}]` + let parsed = AttributeSelectorParser.parse(selector) + if (parsed === null) return null + ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)] } else { - ruleNode.nodes = [styleRule(`&[aria-${variant.value.value}="true"]`, ruleNode.nodes)] + let selector = `[aria-${variant.value.value}="true"]` + let parsed = AttributeSelectorParser.parse(selector) + if (parsed === null) return null + ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)] } }) @@ -868,9 +873,11 @@ export function createVariants(theme: Theme): Variants { variants.functional('data', (ruleNode, variant) => { if (!variant.value || variant.modifier) return null - ruleNode.nodes = [ - styleRule(`&[data-${quoteAttributeValue(variant.value.value)}]`, ruleNode.nodes), - ] + let selector = `[data-${quoteAttributeValue(variant.value.value)}]` + let parsed = AttributeSelectorParser.parse(selector) + if (parsed === null) return null + + ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)] }) variants.functional('nth', (ruleNode, variant) => { From 8d0134ee25b00429a40f92d99bb37a4258c7dcdf Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 20 May 2026 21:29:19 +0200 Subject: [PATCH 15/20] revert: temp: ignore invalid variant test --- packages/tailwindcss/src/variants.test.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 14bda4dd1de8..5b46991db622 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -2568,9 +2568,7 @@ test('data', async () => { expect( await run([ 'data-[]:flex', - // TODO: Re-enable when Lightning CSS is enabled again. We don't validate - // the CSS, we just expect a valid looking syntax. - // 'data-[foo_^_=_"bar"]:flex', // Can't have spaces between `^` and `=` + 'data-[foo_^_=_"bar"]:flex', // Can't have spaces between `^` and `=` 'data-disabled/foo:flex', 'data-[potato=salad]/foo:flex', ]), From 727dda50357af2f88057c944f173a16d7928fe36 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 20 May 2026 21:27:49 +0200 Subject: [PATCH 16/20] revert: temp: re-add leading `0` --- packages/tailwindcss/src/css-functions.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 2a255a3c8bfc..575f86665fae 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -1054,10 +1054,10 @@ describe('theme(…)', () => { 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', ], ['maxWidth.xs', '20rem'], - ['transitionTimingFunction.in-out', 'cubic-bezier(0.4, 0, 0.2, 1)'], - ['letterSpacing.wide', '0.025em'], + ['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'], + ['letterSpacing.wide', '.025em'], ['lineHeight.tight', '1.25'], - ['backgroundColor.red.500', 'oklch(63.7% 0.237 25.331)'], + ['backgroundColor.red.500', 'oklch(63.7% .237 25.331)'], ])('theme(%s) → %s', async (value, result) => { let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8') let compiled = await compileCss(css` From 6d7f04aee58b68094535c133899a6288648989bb Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 20 May 2026 21:27:05 +0200 Subject: [PATCH 17/20] revert: temp: do not optimize --- .../src/__snapshots__/index.test.ts.snap | 219 +- .../src/__snapshots__/utilities.test.ts.snap | 978 +- packages/tailwindcss/src/at-import.test.ts | 18 +- .../tailwindcss/src/compat/config.test.ts | 113 +- .../src/compat/container-config.test.ts | 188 +- .../src/compat/legacy-utilities.test.ts | 41 +- .../tailwindcss/src/compat/plugin-api.test.ts | 504 +- .../src/compat/screens-config.test.ts | 142 +- .../tailwindcss/src/css-functions.test.ts | 138 +- packages/tailwindcss/src/important.test.ts | 26 +- packages/tailwindcss/src/index.test.ts | 1022 +- packages/tailwindcss/src/prefix.test.ts | 27 +- packages/tailwindcss/src/test-utils/run.ts | 3 +- packages/tailwindcss/src/utilities.test.ts | 8645 ++++++++++++----- packages/tailwindcss/src/variants.test.ts | 1326 +-- 15 files changed, 8463 insertions(+), 4927 deletions(-) diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 031c32af9161..04d3311150fb 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -2,277 +2,392 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = ` " -@layer properties; +@layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } +} + :root, :host { - --color-red-500: oklch(63.7% 0.237 25.331); - --spacing: 0.25rem; + --color-red-500: oklch(63.7% .237 25.331); + --spacing: .25rem; } + .w-4 { width: calc(var(--spacing) * 4); } + .bg-red-500 { background-color: var(--color-red-500); } + .shadow-sm { - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } -@media (width >= 40rem) { + +@media (min-width: 40rem) { .sm\\:flex { display: flex; } } + @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-ring-inset { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0px; + initial-value: 0; } + @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } + @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } -@layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } -} " `; exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = ` " -@layer theme, base, components, utilities; @layer theme { :root, :host { - --tw-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', - 'Noto Color Emoji'; - --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', + --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji"; + --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --tw-default-font-family: var(--tw-font-sans); --tw-default-mono-font-family: var(--tw-font-mono); } } + @layer base { - *, ::after, ::before, ::backdrop, ::file-selector-button { + *, :after, :before, ::backdrop { box-sizing: border-box; + border: 0 solid; margin: 0; padding: 0; + } + + ::file-selector-button { + box-sizing: border-box; border: 0 solid; + margin: 0; + padding: 0; } + html, :host { - line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; - font-family: var(--tw-default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); + line-height: 1.5; + font-family: var(--tw-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--tw-default-font-feature-settings, normal); font-variation-settings: var(--tw-default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } + hr { height: 0; color: inherit; border-top-width: 1px; } + abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } + h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } + a { color: inherit; -webkit-text-decoration: inherit; + -webkit-text-decoration: inherit; + -webkit-text-decoration: inherit; text-decoration: inherit; } + b, strong { font-weight: bolder; } + code, kbd, samp, pre { - font-family: var(--tw-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-family: var(--tw-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--tw-default-mono-font-feature-settings, normal); font-variation-settings: var(--tw-default-mono-font-variation-settings, normal); font-size: 1em; } + small { font-size: 80%; } + sub, sup { + vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; - vertical-align: baseline; } + sub { - bottom: -0.25em; + bottom: -.25em; } + sup { - top: -0.5em; + top: -.5em; } + table { text-indent: 0; border-color: inherit; border-collapse: collapse; } + :-moz-focusring { outline: auto; } + progress { vertical-align: baseline; } + summary { display: list-item; } + ol, ul, menu { list-style: none; } + img, svg, video, canvas, audio, iframe, embed, object { - display: block; vertical-align: middle; + display: block; } + img, video { max-width: 100%; height: auto; } - button, input, select, optgroup, textarea, ::file-selector-button { + + button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; + opacity: 1; + background-color: #0000; border-radius: 0; - background-color: transparent; + } + + ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; opacity: 1; + background-color: #0000; + border-radius: 0; } + :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } + :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } + ::file-selector-button { margin-inline-end: 4px; } + ::placeholder { opacity: 1; } - @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + + @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { - color: currentcolor; + color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } + textarea { resize: vertical; } + ::-webkit-search-decoration { -webkit-appearance: none; } + ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } + ::-webkit-datetime-edit { display: inline-flex; } + ::-webkit-datetime-edit-fields-wrapper { padding: 0; } - ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { + + ::-webkit-datetime-edit { + padding-block: 0; + } + + ::-webkit-datetime-edit-year-field { + padding-block: 0; + } + + ::-webkit-datetime-edit-month-field { + padding-block: 0; + } + + ::-webkit-datetime-edit-day-field { + padding-block: 0; + } + + ::-webkit-datetime-edit-hour-field { + padding-block: 0; + } + + ::-webkit-datetime-edit-minute-field { + padding-block: 0; + } + + ::-webkit-datetime-edit-second-field { padding-block: 0; } + + ::-webkit-datetime-edit-millisecond-field { + padding-block: 0; + } + + ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { line-height: 1; } + :-moz-ui-invalid { box-shadow: none; } - button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { + + button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + + ::file-selector-button { + appearance: button; + } + + ::-webkit-inner-spin-button { height: auto; } - [hidden]:where(:not([hidden='until-found'])) { + + ::-webkit-outer-spin-button { + height: auto; + } + + [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } -@layer utilities; + +@layer components, utilities; " `; diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 342f7772e17d..43e8fdf6f040 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -2,1815 +2,2057 @@ exports[`border-* 1`] = ` " -@layer properties; +@layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } +} + :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } + .border { border-style: var(--tw-border-style); border-width: 1px; } + .border-0 { border-style: var(--tw-border-style); - border-width: 0px; + border-width: 0; } + .border-2 { border-style: var(--tw-border-style); border-width: 2px; } + .border-4 { border-style: var(--tw-border-style); border-width: 4px; } + .border-123 { border-style: var(--tw-border-style); border-width: 123px; } + .border-\\[0_1\\] { border-style: var(--tw-border-style); - border-width: 0 1; + border-width: 0 1px; } + .border-\\[0_2px_0_2px\\] { border-style: var(--tw-border-style); - border-width: 0 2px 0 2px; + border-width: 0 2px; } + .border-\\[12px\\] { border-style: var(--tw-border-style); border-width: 12px; } + .border-\\[12px_8px\\] { border-style: var(--tw-border-style); border-width: 12px 8px; } -.border-\\[length\\:var\\(--my-width\\)\\] { - border-style: var(--tw-border-style); - border-width: var(--my-width); -} -.border-\\[line-width\\:var\\(--my-width\\)\\] { + +.border-\\[length\\:var\\(--my-width\\)\\], .border-\\[line-width\\:var\\(--my-width\\)\\] { border-style: var(--tw-border-style); border-width: var(--my-width); } + .border-\\[medium\\] { border-style: var(--tw-border-style); border-width: medium; } + .border-\\[thick\\] { border-style: var(--tw-border-style); border-width: thick; } + .border-\\[thin\\] { border-style: var(--tw-border-style); border-width: thin; } + .border-\\[thin_2px\\] { border-style: var(--tw-border-style); border-width: thin 2px; } + .border-\\[\\#0088cc\\] { - border-color: #0088cc; + border-color: #08c; } + .border-\\[\\#0088cc\\]\\/50 { - border-color: color-mix(in oklab, #0088cc 50%, transparent); + border-color: oklab(59.9824% -.067 -.124 / .5); } -.border-\\[color\\:var\\(--my-color\\)\\] { - border-color: var(--my-color); -} -.border-\\[color\\:var\\(--my-color\\)\\]\\/50 { + +.border-\\[color\\:var\\(--my-color\\)\\], .border-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } -.border-\\[var\\(--my-color\\)\\] { - border-color: var(--my-color); -} -.border-\\[var\\(--my-color\\)\\]\\/50 { + +.border-\\[var\\(--my-color\\)\\], .border-\\[var\\(--my-color\\)\\]\\/50 { border-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-\\[var\\(--my-color\\)\\]\\/50 { border-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .border-blue-500 { border-color: var(--border-color-blue-500); } -.border-current { - border-color: currentcolor; -} -.border-current\\/50 { - border-color: currentcolor; + +.border-current, .border-current\\/50 { + border-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .border-current\\/50 { border-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .border-inherit { border-color: inherit; } + .border-red-500 { border-color: var(--color-red-500); } + .border-red-500\\/2\\.5 { - border-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-red-500\\/2\\.5 { border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .border-red-500\\/2\\.25 { - border-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-red-500\\/2\\.25 { border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .border-red-500\\/2\\.75 { - border-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .border-red-500\\/2\\.75 { border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .border-red-500\\/50 { - border-color: color-mix(in srgb, #ef4444 50%, transparent); + border-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .border-red-500\\/50 { border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .border-transparent { - border-color: transparent; + border-color: #0000; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +" +`; + +exports[`border-b-* 1`] = ` +" @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-border-style: solid; } } } -" -`; -exports[`border-b-* 1`] = ` -" -@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } + .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } + .border-b-0 { border-bottom-style: var(--tw-border-style); - border-bottom-width: 0px; + border-bottom-width: 0; } + .border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } + .border-b-4 { border-bottom-style: var(--tw-border-style); border-bottom-width: 4px; } + .border-b-123 { border-bottom-style: var(--tw-border-style); border-bottom-width: 123px; } + .border-b-\\[0_1\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: 0 1; } + .border-b-\\[0_2px_0_2px\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: 0 2px 0 2px; } + .border-b-\\[12px\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: 12px; } + .border-b-\\[12px_8px\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: 12px 8px; } -.border-b-\\[length\\:var\\(--my-width\\)\\] { - border-bottom-style: var(--tw-border-style); - border-bottom-width: var(--my-width); -} -.border-b-\\[line-width\\:var\\(--my-width\\)\\] { + +.border-b-\\[length\\:var\\(--my-width\\)\\], .border-b-\\[line-width\\:var\\(--my-width\\)\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: var(--my-width); } + .border-b-\\[medium\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: medium; } + .border-b-\\[thick\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: thick; } + .border-b-\\[thin\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: thin; } + .border-b-\\[thin_2px\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: thin 2px; } + .border-b-\\[\\#0088cc\\] { - border-bottom-color: #0088cc; + border-bottom-color: #08c; } + .border-b-\\[\\#0088cc\\]\\/50 { - border-bottom-color: color-mix(in oklab, #0088cc 50%, transparent); + border-bottom-color: oklab(59.9824% -.067 -.124 / .5); } -.border-b-\\[color\\:var\\(--my-color\\)\\] { - border-bottom-color: var(--my-color); -} -.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 { + +.border-b-\\[color\\:var\\(--my-color\\)\\], .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-bottom-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } -.border-b-\\[var\\(--my-color\\)\\] { - border-bottom-color: var(--my-color); -} -.border-b-\\[var\\(--my-color\\)\\]\\/50 { + +.border-b-\\[var\\(--my-color\\)\\], .border-b-\\[var\\(--my-color\\)\\]\\/50 { border-bottom-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-b-\\[var\\(--my-color\\)\\]\\/50 { border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .border-b-blue-500 { border-bottom-color: var(--border-color-blue-500); } -.border-b-current { - border-bottom-color: currentcolor; -} -.border-b-current\\/50 { - border-bottom-color: currentcolor; + +.border-b-current, .border-b-current\\/50 { + border-bottom-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .border-b-current\\/50 { border-bottom-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .border-b-inherit { border-bottom-color: inherit; } + .border-b-red-500 { border-bottom-color: var(--color-red-500); } + .border-b-red-500\\/2\\.5 { - border-bottom-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-bottom-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-b-red-500\\/2\\.5 { border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .border-b-red-500\\/2\\.25 { - border-bottom-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-bottom-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-b-red-500\\/2\\.25 { border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .border-b-red-500\\/2\\.75 { - border-bottom-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-bottom-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .border-b-red-500\\/2\\.75 { border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .border-b-red-500\\/50 { - border-bottom-color: color-mix(in srgb, #ef4444 50%, transparent); + border-bottom-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .border-b-red-500\\/50 { border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .border-b-transparent { - border-bottom-color: transparent; + border-bottom-color: #0000; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +" +`; + +exports[`border-be-* 1`] = ` +" @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-border-style: solid; } } } -" -`; -exports[`border-be-* 1`] = ` -" -@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } + .border-be { border-block-end-style: var(--tw-border-style); border-block-end-width: 1px; } + .border-be-0 { border-block-end-style: var(--tw-border-style); - border-block-end-width: 0px; + border-block-end-width: 0; } + .border-be-2 { border-block-end-style: var(--tw-border-style); border-block-end-width: 2px; } + .border-be-4 { border-block-end-style: var(--tw-border-style); border-block-end-width: 4px; } + .border-be-123 { border-block-end-style: var(--tw-border-style); border-block-end-width: 123px; } + .border-be-\\[0_1\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: 0 1; } + .border-be-\\[0_2px_0_2px\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: 0 2px 0 2px; } + .border-be-\\[12px\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: 12px; } + .border-be-\\[12px_8px\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: 12px 8px; } -.border-be-\\[length\\:var\\(--my-width\\)\\] { - border-block-end-style: var(--tw-border-style); - border-block-end-width: var(--my-width); -} -.border-be-\\[line-width\\:var\\(--my-width\\)\\] { + +.border-be-\\[length\\:var\\(--my-width\\)\\], .border-be-\\[line-width\\:var\\(--my-width\\)\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: var(--my-width); } + .border-be-\\[medium\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: medium; } + .border-be-\\[thick\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: thick; } + .border-be-\\[thin\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: thin; } + .border-be-\\[thin_2px\\] { border-block-end-style: var(--tw-border-style); border-block-end-width: thin 2px; } + .border-be-\\[\\#0088cc\\] { - border-block-end-color: #0088cc; + border-block-end-color: #08c; } + .border-be-\\[\\#0088cc\\]\\/50 { - border-block-end-color: color-mix(in oklab, #0088cc 50%, transparent); -} -.border-be-\\[color\\:var\\(--my-color\\)\\] { - border-block-end-color: var(--my-color); + border-block-end-color: oklab(59.9824% -.067 -.124 / .5); } -.border-be-\\[color\\:var\\(--my-color\\)\\]\\/50 { + +.border-be-\\[color\\:var\\(--my-color\\)\\], .border-be-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-end-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-be-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } -.border-be-\\[var\\(--my-color\\)\\] { - border-block-end-color: var(--my-color); -} -.border-be-\\[var\\(--my-color\\)\\]\\/50 { + +.border-be-\\[var\\(--my-color\\)\\], .border-be-\\[var\\(--my-color\\)\\]\\/50 { border-block-end-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-be-\\[var\\(--my-color\\)\\]\\/50 { border-block-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .border-be-blue-500 { border-block-end-color: var(--border-color-blue-500); } -.border-be-current { - border-block-end-color: currentcolor; -} -.border-be-current\\/50 { - border-block-end-color: currentcolor; + +.border-be-current, .border-be-current\\/50 { + border-block-end-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .border-be-current\\/50 { border-block-end-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .border-be-inherit { border-block-end-color: inherit; } + .border-be-red-500 { border-block-end-color: var(--color-red-500); } + .border-be-red-500\\/2\\.5 { - border-block-end-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-block-end-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-be-red-500\\/2\\.5 { border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .border-be-red-500\\/2\\.25 { - border-block-end-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-block-end-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-be-red-500\\/2\\.25 { border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .border-be-red-500\\/2\\.75 { - border-block-end-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-block-end-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .border-be-red-500\\/2\\.75 { border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .border-be-red-500\\/50 { - border-block-end-color: color-mix(in srgb, #ef4444 50%, transparent); + border-block-end-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .border-be-red-500\\/50 { border-block-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .border-be-transparent { - border-block-end-color: transparent; + border-block-end-color: #0000; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +" +`; + +exports[`border-bs-* 1`] = ` +" @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-border-style: solid; } } } -" -`; -exports[`border-bs-* 1`] = ` -" -@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } + .border-bs { border-block-start-style: var(--tw-border-style); border-block-start-width: 1px; } + .border-bs-0 { border-block-start-style: var(--tw-border-style); - border-block-start-width: 0px; + border-block-start-width: 0; } + .border-bs-2 { border-block-start-style: var(--tw-border-style); border-block-start-width: 2px; } + .border-bs-4 { border-block-start-style: var(--tw-border-style); border-block-start-width: 4px; } + .border-bs-123 { border-block-start-style: var(--tw-border-style); border-block-start-width: 123px; } + .border-bs-\\[0_1\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: 0 1; } + .border-bs-\\[0_2px_0_2px\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: 0 2px 0 2px; } + .border-bs-\\[12px\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: 12px; } + .border-bs-\\[12px_8px\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: 12px 8px; } -.border-bs-\\[length\\:var\\(--my-width\\)\\] { - border-block-start-style: var(--tw-border-style); - border-block-start-width: var(--my-width); -} -.border-bs-\\[line-width\\:var\\(--my-width\\)\\] { + +.border-bs-\\[length\\:var\\(--my-width\\)\\], .border-bs-\\[line-width\\:var\\(--my-width\\)\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: var(--my-width); } + .border-bs-\\[medium\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: medium; } + .border-bs-\\[thick\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: thick; } + .border-bs-\\[thin\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: thin; } + .border-bs-\\[thin_2px\\] { border-block-start-style: var(--tw-border-style); border-block-start-width: thin 2px; } + .border-bs-\\[\\#0088cc\\] { - border-block-start-color: #0088cc; + border-block-start-color: #08c; } + .border-bs-\\[\\#0088cc\\]\\/50 { - border-block-start-color: color-mix(in oklab, #0088cc 50%, transparent); + border-block-start-color: oklab(59.9824% -.067 -.124 / .5); } -.border-bs-\\[color\\:var\\(--my-color\\)\\] { - border-block-start-color: var(--my-color); -} -.border-bs-\\[color\\:var\\(--my-color\\)\\]\\/50 { + +.border-bs-\\[color\\:var\\(--my-color\\)\\], .border-bs-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-start-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-bs-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } -.border-bs-\\[var\\(--my-color\\)\\] { - border-block-start-color: var(--my-color); -} -.border-bs-\\[var\\(--my-color\\)\\]\\/50 { + +.border-bs-\\[var\\(--my-color\\)\\], .border-bs-\\[var\\(--my-color\\)\\]\\/50 { border-block-start-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-bs-\\[var\\(--my-color\\)\\]\\/50 { border-block-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .border-bs-blue-500 { border-block-start-color: var(--border-color-blue-500); } -.border-bs-current { - border-block-start-color: currentcolor; -} -.border-bs-current\\/50 { - border-block-start-color: currentcolor; + +.border-bs-current, .border-bs-current\\/50 { + border-block-start-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .border-bs-current\\/50 { border-block-start-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .border-bs-inherit { border-block-start-color: inherit; } + .border-bs-red-500 { border-block-start-color: var(--color-red-500); } + .border-bs-red-500\\/2\\.5 { - border-block-start-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-block-start-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-bs-red-500\\/2\\.5 { border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .border-bs-red-500\\/2\\.25 { - border-block-start-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-block-start-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-bs-red-500\\/2\\.25 { border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .border-bs-red-500\\/2\\.75 { - border-block-start-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-block-start-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .border-bs-red-500\\/2\\.75 { border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .border-bs-red-500\\/50 { - border-block-start-color: color-mix(in srgb, #ef4444 50%, transparent); + border-block-start-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .border-bs-red-500\\/50 { border-block-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .border-bs-transparent { - border-block-start-color: transparent; + border-block-start-color: #0000; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +" +`; + +exports[`border-e-* 1`] = ` +" @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-border-style: solid; } } } -" -`; -exports[`border-e-* 1`] = ` -" -@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } + .border-e { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; } + .border-e-0 { border-inline-end-style: var(--tw-border-style); - border-inline-end-width: 0px; + border-inline-end-width: 0; } + .border-e-2 { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 2px; } + .border-e-4 { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 4px; } + .border-e-123 { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 123px; } + .border-e-\\[0_1\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0 1; } + .border-e-\\[0_2px_0_2px\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0 2px 0 2px; } + .border-e-\\[12px\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 12px; } + .border-e-\\[12px_8px\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 12px 8px; } -.border-e-\\[length\\:var\\(--my-width\\)\\] { - border-inline-end-style: var(--tw-border-style); - border-inline-end-width: var(--my-width); -} -.border-e-\\[line-width\\:var\\(--my-width\\)\\] { + +.border-e-\\[length\\:var\\(--my-width\\)\\], .border-e-\\[line-width\\:var\\(--my-width\\)\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: var(--my-width); } + .border-e-\\[medium\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: medium; } + .border-e-\\[thick\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: thick; } + .border-e-\\[thin\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: thin; } + .border-e-\\[thin_2px\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: thin 2px; } + .border-e-\\[\\#0088cc\\] { - border-inline-end-color: #0088cc; + border-inline-end-color: #08c; } + .border-e-\\[\\#0088cc\\]\\/50 { - border-inline-end-color: color-mix(in oklab, #0088cc 50%, transparent); -} -.border-e-\\[color\\:var\\(--my-color\\)\\] { - border-inline-end-color: var(--my-color); + border-inline-end-color: oklab(59.9824% -.067 -.124 / .5); } -.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 { + +.border-e-\\[color\\:var\\(--my-color\\)\\], .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-end-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } -.border-e-\\[var\\(--my-color\\)\\] { - border-inline-end-color: var(--my-color); -} -.border-e-\\[var\\(--my-color\\)\\]\\/50 { + +.border-e-\\[var\\(--my-color\\)\\], .border-e-\\[var\\(--my-color\\)\\]\\/50 { border-inline-end-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-e-\\[var\\(--my-color\\)\\]\\/50 { border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .border-e-blue-500 { border-inline-end-color: var(--border-color-blue-500); } -.border-e-current { - border-inline-end-color: currentcolor; -} -.border-e-current\\/50 { - border-inline-end-color: currentcolor; + +.border-e-current, .border-e-current\\/50 { + border-inline-end-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .border-e-current\\/50 { border-inline-end-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .border-e-inherit { border-inline-end-color: inherit; } + .border-e-red-500 { border-inline-end-color: var(--color-red-500); } + .border-e-red-500\\/2\\.5 { - border-inline-end-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-inline-end-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-e-red-500\\/2\\.5 { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .border-e-red-500\\/2\\.25 { - border-inline-end-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-inline-end-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-e-red-500\\/2\\.25 { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .border-e-red-500\\/2\\.75 { - border-inline-end-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-inline-end-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .border-e-red-500\\/2\\.75 { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .border-e-red-500\\/50 { - border-inline-end-color: color-mix(in srgb, #ef4444 50%, transparent); + border-inline-end-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .border-e-red-500\\/50 { border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .border-e-transparent { - border-inline-end-color: transparent; + border-inline-end-color: #0000; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +" +`; + +exports[`border-l-* 1`] = ` +" @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-border-style: solid; } } } -" -`; -exports[`border-l-* 1`] = ` -" -@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } + .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } + .border-l-0 { border-left-style: var(--tw-border-style); - border-left-width: 0px; + border-left-width: 0; } + .border-l-2 { border-left-style: var(--tw-border-style); border-left-width: 2px; } + .border-l-4 { border-left-style: var(--tw-border-style); border-left-width: 4px; } + .border-l-123 { border-left-style: var(--tw-border-style); border-left-width: 123px; } + .border-l-\\[0_1\\] { border-left-style: var(--tw-border-style); border-left-width: 0 1; } + .border-l-\\[0_2px_0_2px\\] { border-left-style: var(--tw-border-style); border-left-width: 0 2px 0 2px; } + .border-l-\\[12px\\] { border-left-style: var(--tw-border-style); border-left-width: 12px; } + .border-l-\\[12px_8px\\] { border-left-style: var(--tw-border-style); border-left-width: 12px 8px; } -.border-l-\\[length\\:var\\(--my-width\\)\\] { - border-left-style: var(--tw-border-style); - border-left-width: var(--my-width); -} -.border-l-\\[line-width\\:var\\(--my-width\\)\\] { + +.border-l-\\[length\\:var\\(--my-width\\)\\], .border-l-\\[line-width\\:var\\(--my-width\\)\\] { border-left-style: var(--tw-border-style); border-left-width: var(--my-width); } + .border-l-\\[medium\\] { border-left-style: var(--tw-border-style); border-left-width: medium; } + .border-l-\\[thick\\] { border-left-style: var(--tw-border-style); border-left-width: thick; } + .border-l-\\[thin\\] { border-left-style: var(--tw-border-style); border-left-width: thin; } + .border-l-\\[thin_2px\\] { border-left-style: var(--tw-border-style); border-left-width: thin 2px; } + .border-l-\\[\\#0088cc\\] { - border-left-color: #0088cc; + border-left-color: #08c; } + .border-l-\\[\\#0088cc\\]\\/50 { - border-left-color: color-mix(in oklab, #0088cc 50%, transparent); -} -.border-l-\\[color\\:var\\(--my-color\\)\\] { - border-left-color: var(--my-color); + border-left-color: oklab(59.9824% -.067 -.124 / .5); } -.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 { + +.border-l-\\[color\\:var\\(--my-color\\)\\], .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-left-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } -.border-l-\\[var\\(--my-color\\)\\] { - border-left-color: var(--my-color); -} -.border-l-\\[var\\(--my-color\\)\\]\\/50 { + +.border-l-\\[var\\(--my-color\\)\\], .border-l-\\[var\\(--my-color\\)\\]\\/50 { border-left-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-l-\\[var\\(--my-color\\)\\]\\/50 { border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .border-l-blue-500 { border-left-color: var(--border-color-blue-500); } -.border-l-current { - border-left-color: currentcolor; -} -.border-l-current\\/50 { - border-left-color: currentcolor; + +.border-l-current, .border-l-current\\/50 { + border-left-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .border-l-current\\/50 { border-left-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .border-l-inherit { border-left-color: inherit; } + .border-l-red-500 { border-left-color: var(--color-red-500); } + .border-l-red-500\\/2\\.5 { - border-left-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-left-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-l-red-500\\/2\\.5 { border-left-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .border-l-red-500\\/2\\.25 { - border-left-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-left-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-l-red-500\\/2\\.25 { border-left-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .border-l-red-500\\/2\\.75 { - border-left-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-left-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .border-l-red-500\\/2\\.75 { border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .border-l-red-500\\/50 { - border-left-color: color-mix(in srgb, #ef4444 50%, transparent); + border-left-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .border-l-red-500\\/50 { border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .border-l-transparent { - border-left-color: transparent; + border-left-color: #0000; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +" +`; + +exports[`border-r-* 1`] = ` +" @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-border-style: solid; } } } -" -`; -exports[`border-r-* 1`] = ` -" -@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } + .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } + .border-r-0 { border-right-style: var(--tw-border-style); - border-right-width: 0px; + border-right-width: 0; } + .border-r-2 { border-right-style: var(--tw-border-style); border-right-width: 2px; } + .border-r-4 { border-right-style: var(--tw-border-style); border-right-width: 4px; } + .border-r-123 { border-right-style: var(--tw-border-style); border-right-width: 123px; } + .border-r-\\[0_1\\] { border-right-style: var(--tw-border-style); border-right-width: 0 1; } + .border-r-\\[0_2px_0_2px\\] { border-right-style: var(--tw-border-style); border-right-width: 0 2px 0 2px; } + .border-r-\\[12px\\] { border-right-style: var(--tw-border-style); border-right-width: 12px; } + .border-r-\\[12px_8px\\] { border-right-style: var(--tw-border-style); border-right-width: 12px 8px; } -.border-r-\\[length\\:var\\(--my-width\\)\\] { - border-right-style: var(--tw-border-style); - border-right-width: var(--my-width); -} -.border-r-\\[line-width\\:var\\(--my-width\\)\\] { + +.border-r-\\[length\\:var\\(--my-width\\)\\], .border-r-\\[line-width\\:var\\(--my-width\\)\\] { border-right-style: var(--tw-border-style); border-right-width: var(--my-width); } + .border-r-\\[medium\\] { border-right-style: var(--tw-border-style); border-right-width: medium; } + .border-r-\\[thick\\] { border-right-style: var(--tw-border-style); border-right-width: thick; } + .border-r-\\[thin\\] { border-right-style: var(--tw-border-style); border-right-width: thin; } + .border-r-\\[thin_2px\\] { border-right-style: var(--tw-border-style); border-right-width: thin 2px; } + .border-r-\\[\\#0088cc\\] { - border-right-color: #0088cc; + border-right-color: #08c; } + .border-r-\\[\\#0088cc\\]\\/50 { - border-right-color: color-mix(in oklab, #0088cc 50%, transparent); -} -.border-r-\\[color\\:var\\(--my-color\\)\\] { - border-right-color: var(--my-color); + border-right-color: oklab(59.9824% -.067 -.124 / .5); } -.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 { + +.border-r-\\[color\\:var\\(--my-color\\)\\], .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-right-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } -.border-r-\\[var\\(--my-color\\)\\] { - border-right-color: var(--my-color); -} -.border-r-\\[var\\(--my-color\\)\\]\\/50 { + +.border-r-\\[var\\(--my-color\\)\\], .border-r-\\[var\\(--my-color\\)\\]\\/50 { border-right-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-r-\\[var\\(--my-color\\)\\]\\/50 { border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .border-r-blue-500 { border-right-color: var(--border-color-blue-500); } -.border-r-current { - border-right-color: currentcolor; -} -.border-r-current\\/50 { - border-right-color: currentcolor; + +.border-r-current, .border-r-current\\/50 { + border-right-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .border-r-current\\/50 { border-right-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .border-r-inherit { border-right-color: inherit; } + .border-r-red-500 { border-right-color: var(--color-red-500); } + .border-r-red-500\\/2\\.5 { - border-right-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-right-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-r-red-500\\/2\\.5 { border-right-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .border-r-red-500\\/2\\.25 { - border-right-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-right-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-r-red-500\\/2\\.25 { border-right-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .border-r-red-500\\/2\\.75 { - border-right-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-right-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .border-r-red-500\\/2\\.75 { border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .border-r-red-500\\/50 { - border-right-color: color-mix(in srgb, #ef4444 50%, transparent); + border-right-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .border-r-red-500\\/50 { border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .border-r-transparent { - border-right-color: transparent; + border-right-color: #0000; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +" +`; + +exports[`border-s-* 1`] = ` +" @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-border-style: solid; } } } -" -`; -exports[`border-s-* 1`] = ` -" -@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } + .border-s { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; } + .border-s-0 { border-inline-start-style: var(--tw-border-style); - border-inline-start-width: 0px; + border-inline-start-width: 0; } + .border-s-2 { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 2px; } + .border-s-4 { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 4px; } + .border-s-123 { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 123px; } + .border-s-\\[0_1\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 0 1; } + .border-s-\\[0_2px_0_2px\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 0 2px 0 2px; } + .border-s-\\[12px\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 12px; } + .border-s-\\[12px_8px\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 12px 8px; } -.border-s-\\[length\\:var\\(--my-width\\)\\] { - border-inline-start-style: var(--tw-border-style); - border-inline-start-width: var(--my-width); -} -.border-s-\\[line-width\\:var\\(--my-width\\)\\] { + +.border-s-\\[length\\:var\\(--my-width\\)\\], .border-s-\\[line-width\\:var\\(--my-width\\)\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: var(--my-width); } + .border-s-\\[medium\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: medium; } + .border-s-\\[thick\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: thick; } + .border-s-\\[thin\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: thin; } + .border-s-\\[thin_2px\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: thin 2px; } + .border-s-\\[\\#0088cc\\] { - border-inline-start-color: #0088cc; + border-inline-start-color: #08c; } + .border-s-\\[\\#0088cc\\]\\/50 { - border-inline-start-color: color-mix(in oklab, #0088cc 50%, transparent); -} -.border-s-\\[color\\:var\\(--my-color\\)\\] { - border-inline-start-color: var(--my-color); + border-inline-start-color: oklab(59.9824% -.067 -.124 / .5); } -.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 { + +.border-s-\\[color\\:var\\(--my-color\\)\\], .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-start-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } -.border-s-\\[var\\(--my-color\\)\\] { - border-inline-start-color: var(--my-color); -} -.border-s-\\[var\\(--my-color\\)\\]\\/50 { + +.border-s-\\[var\\(--my-color\\)\\], .border-s-\\[var\\(--my-color\\)\\]\\/50 { border-inline-start-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-s-\\[var\\(--my-color\\)\\]\\/50 { border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .border-s-blue-500 { border-inline-start-color: var(--border-color-blue-500); } -.border-s-current { - border-inline-start-color: currentcolor; -} -.border-s-current\\/50 { - border-inline-start-color: currentcolor; + +.border-s-current, .border-s-current\\/50 { + border-inline-start-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .border-s-current\\/50 { border-inline-start-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .border-s-inherit { border-inline-start-color: inherit; } + .border-s-red-500 { border-inline-start-color: var(--color-red-500); } + .border-s-red-500\\/2\\.5 { - border-inline-start-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-inline-start-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-s-red-500\\/2\\.5 { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .border-s-red-500\\/2\\.25 { - border-inline-start-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-inline-start-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-s-red-500\\/2\\.25 { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .border-s-red-500\\/2\\.75 { - border-inline-start-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-inline-start-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .border-s-red-500\\/2\\.75 { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .border-s-red-500\\/50 { - border-inline-start-color: color-mix(in srgb, #ef4444 50%, transparent); + border-inline-start-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .border-s-red-500\\/50 { border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .border-s-transparent { - border-inline-start-color: transparent; + border-inline-start-color: #0000; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +" +`; + +exports[`border-t-* 1`] = ` +" @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-border-style: solid; } } } -" -`; -exports[`border-t-* 1`] = ` -" -@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } + .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } + .border-t-0 { border-top-style: var(--tw-border-style); - border-top-width: 0px; + border-top-width: 0; } + .border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px; } + .border-t-4 { border-top-style: var(--tw-border-style); border-top-width: 4px; } + .border-t-123 { border-top-style: var(--tw-border-style); border-top-width: 123px; } + .border-t-\\[0_1\\] { border-top-style: var(--tw-border-style); border-top-width: 0 1; } + .border-t-\\[0_2px_0_2px\\] { border-top-style: var(--tw-border-style); border-top-width: 0 2px 0 2px; } + .border-t-\\[12px\\] { border-top-style: var(--tw-border-style); border-top-width: 12px; } + .border-t-\\[12px_8px\\] { border-top-style: var(--tw-border-style); border-top-width: 12px 8px; } -.border-t-\\[length\\:var\\(--my-width\\)\\] { - border-top-style: var(--tw-border-style); - border-top-width: var(--my-width); -} -.border-t-\\[line-width\\:var\\(--my-width\\)\\] { + +.border-t-\\[length\\:var\\(--my-width\\)\\], .border-t-\\[line-width\\:var\\(--my-width\\)\\] { border-top-style: var(--tw-border-style); border-top-width: var(--my-width); } + .border-t-\\[medium\\] { border-top-style: var(--tw-border-style); border-top-width: medium; } + .border-t-\\[thick\\] { border-top-style: var(--tw-border-style); border-top-width: thick; } + .border-t-\\[thin\\] { border-top-style: var(--tw-border-style); border-top-width: thin; } + .border-t-\\[thin_2px\\] { border-top-style: var(--tw-border-style); border-top-width: thin 2px; } + .border-t-\\[\\#0088cc\\] { - border-top-color: #0088cc; + border-top-color: #08c; } + .border-t-\\[\\#0088cc\\]\\/50 { - border-top-color: color-mix(in oklab, #0088cc 50%, transparent); -} -.border-t-\\[color\\:var\\(--my-color\\)\\] { - border-top-color: var(--my-color); + border-top-color: oklab(59.9824% -.067 -.124 / .5); } -.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 { + +.border-t-\\[color\\:var\\(--my-color\\)\\], .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-top-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } -.border-t-\\[var\\(--my-color\\)\\] { - border-top-color: var(--my-color); -} -.border-t-\\[var\\(--my-color\\)\\]\\/50 { + +.border-t-\\[var\\(--my-color\\)\\], .border-t-\\[var\\(--my-color\\)\\]\\/50 { border-top-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-t-\\[var\\(--my-color\\)\\]\\/50 { border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .border-t-blue-500 { border-top-color: var(--border-color-blue-500); } -.border-t-current { - border-top-color: currentcolor; -} -.border-t-current\\/50 { - border-top-color: currentcolor; + +.border-t-current, .border-t-current\\/50 { + border-top-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .border-t-current\\/50 { border-top-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .border-t-inherit { border-top-color: inherit; } + .border-t-red-500 { border-top-color: var(--color-red-500); } + .border-t-red-500\\/2\\.5 { - border-top-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-top-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-t-red-500\\/2\\.5 { border-top-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .border-t-red-500\\/2\\.25 { - border-top-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-top-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-t-red-500\\/2\\.25 { border-top-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .border-t-red-500\\/2\\.75 { - border-top-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-top-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .border-t-red-500\\/2\\.75 { border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .border-t-red-500\\/50 { - border-top-color: color-mix(in srgb, #ef4444 50%, transparent); + border-top-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .border-t-red-500\\/50 { border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .border-t-transparent { - border-top-color: transparent; + border-top-color: #0000; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +" +`; + +exports[`border-x-* 1`] = ` +" @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-border-style: solid; } } } -" -`; -exports[`border-x-* 1`] = ` -" -@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } + .border-x { border-inline-style: var(--tw-border-style); border-inline-width: 1px; } + .border-x-0 { border-inline-style: var(--tw-border-style); - border-inline-width: 0px; + border-inline-width: 0; } + .border-x-2 { border-inline-style: var(--tw-border-style); border-inline-width: 2px; } + .border-x-4 { border-inline-style: var(--tw-border-style); border-inline-width: 4px; } + .border-x-123 { border-inline-style: var(--tw-border-style); border-inline-width: 123px; } + .border-x-\\[0_1\\] { border-inline-style: var(--tw-border-style); - border-inline-width: 0 1; + border-inline-width: 0 1px; } + .border-x-\\[0_2px_0_2px\\] { border-inline-style: var(--tw-border-style); border-inline-width: 0 2px 0 2px; } + .border-x-\\[12px\\] { border-inline-style: var(--tw-border-style); border-inline-width: 12px; } + .border-x-\\[12px_8px\\] { border-inline-style: var(--tw-border-style); border-inline-width: 12px 8px; } -.border-x-\\[length\\:var\\(--my-width\\)\\] { - border-inline-style: var(--tw-border-style); - border-inline-width: var(--my-width); -} -.border-x-\\[line-width\\:var\\(--my-width\\)\\] { + +.border-x-\\[length\\:var\\(--my-width\\)\\], .border-x-\\[line-width\\:var\\(--my-width\\)\\] { border-inline-style: var(--tw-border-style); border-inline-width: var(--my-width); } + .border-x-\\[medium\\] { border-inline-style: var(--tw-border-style); border-inline-width: medium; } + .border-x-\\[thick\\] { border-inline-style: var(--tw-border-style); border-inline-width: thick; } + .border-x-\\[thin\\] { border-inline-style: var(--tw-border-style); border-inline-width: thin; } + .border-x-\\[thin_2px\\] { border-inline-style: var(--tw-border-style); border-inline-width: thin 2px; } + .border-x-\\[\\#0088cc\\] { - border-inline-color: #0088cc; + border-inline-color: #08c; } + .border-x-\\[\\#0088cc\\]\\/50 { - border-inline-color: color-mix(in oklab, #0088cc 50%, transparent); -} -.border-x-\\[color\\:var\\(--my-color\\)\\] { - border-inline-color: var(--my-color); + border-inline-color: oklab(59.9824% -.067 -.124 / .5); } -.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { + +.border-x-\\[color\\:var\\(--my-color\\)\\], .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } -.border-x-\\[var\\(--my-color\\)\\] { - border-inline-color: var(--my-color); -} -.border-x-\\[var\\(--my-color\\)\\]\\/50 { + +.border-x-\\[var\\(--my-color\\)\\], .border-x-\\[var\\(--my-color\\)\\]\\/50 { border-inline-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-x-\\[var\\(--my-color\\)\\]\\/50 { border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .border-x-blue-500 { border-inline-color: var(--border-color-blue-500); } -.border-x-current { - border-inline-color: currentcolor; -} -.border-x-current\\/50 { - border-inline-color: currentcolor; + +.border-x-current, .border-x-current\\/50 { + border-inline-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .border-x-current\\/50 { border-inline-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .border-x-inherit { border-inline-color: inherit; } + .border-x-red-500 { border-inline-color: var(--color-red-500); } + .border-x-red-500\\/2\\.5 { - border-inline-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-inline-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-x-red-500\\/2\\.5 { border-inline-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .border-x-red-500\\/2\\.25 { - border-inline-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-inline-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-x-red-500\\/2\\.25 { border-inline-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .border-x-red-500\\/2\\.75 { - border-inline-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-inline-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .border-x-red-500\\/2\\.75 { border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .border-x-red-500\\/50 { - border-inline-color: color-mix(in srgb, #ef4444 50%, transparent); + border-inline-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .border-x-red-500\\/50 { border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .border-x-transparent { - border-inline-color: transparent; + border-inline-color: #0000; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +" +`; + +exports[`border-y-* 1`] = ` +" @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-border-style: solid; } } } -" -`; -exports[`border-y-* 1`] = ` -" -@layer properties; :root, :host { --color-red-500: #ef4444; --border-color-blue-500: #3b82f6; } + .border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; } + .border-y-0 { border-block-style: var(--tw-border-style); - border-block-width: 0px; + border-block-width: 0; } + .border-y-2 { border-block-style: var(--tw-border-style); border-block-width: 2px; } + .border-y-4 { border-block-style: var(--tw-border-style); border-block-width: 4px; } + .border-y-123 { border-block-style: var(--tw-border-style); border-block-width: 123px; } + .border-y-\\[0_1\\] { border-block-style: var(--tw-border-style); - border-block-width: 0 1; + border-block-width: 0 1px; } + .border-y-\\[0_2px_0_2px\\] { border-block-style: var(--tw-border-style); border-block-width: 0 2px 0 2px; } + .border-y-\\[12px\\] { border-block-style: var(--tw-border-style); border-block-width: 12px; } + .border-y-\\[12px_8px\\] { border-block-style: var(--tw-border-style); border-block-width: 12px 8px; } -.border-y-\\[length\\:var\\(--my-width\\)\\] { - border-block-style: var(--tw-border-style); - border-block-width: var(--my-width); -} -.border-y-\\[line-width\\:var\\(--my-width\\)\\] { + +.border-y-\\[length\\:var\\(--my-width\\)\\], .border-y-\\[line-width\\:var\\(--my-width\\)\\] { border-block-style: var(--tw-border-style); border-block-width: var(--my-width); } + .border-y-\\[medium\\] { border-block-style: var(--tw-border-style); border-block-width: medium; } + .border-y-\\[thick\\] { border-block-style: var(--tw-border-style); border-block-width: thick; } + .border-y-\\[thin\\] { border-block-style: var(--tw-border-style); border-block-width: thin; } + .border-y-\\[thin_2px\\] { border-block-style: var(--tw-border-style); border-block-width: thin 2px; } + .border-y-\\[\\#0088cc\\] { - border-block-color: #0088cc; + border-block-color: #08c; } + .border-y-\\[\\#0088cc\\]\\/50 { - border-block-color: color-mix(in oklab, #0088cc 50%, transparent); -} -.border-y-\\[color\\:var\\(--my-color\\)\\] { - border-block-color: var(--my-color); + border-block-color: oklab(59.9824% -.067 -.124 / .5); } -.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { + +.border-y-\\[color\\:var\\(--my-color\\)\\], .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } -.border-y-\\[var\\(--my-color\\)\\] { - border-block-color: var(--my-color); -} -.border-y-\\[var\\(--my-color\\)\\]\\/50 { + +.border-y-\\[var\\(--my-color\\)\\], .border-y-\\[var\\(--my-color\\)\\]\\/50 { border-block-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .border-y-\\[var\\(--my-color\\)\\]\\/50 { border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .border-y-blue-500 { border-block-color: var(--border-color-blue-500); } -.border-y-current { - border-block-color: currentcolor; -} -.border-y-current\\/50 { - border-block-color: currentcolor; + +.border-y-current, .border-y-current\\/50 { + border-block-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .border-y-current\\/50 { border-block-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .border-y-inherit { border-block-color: inherit; } + .border-y-red-500 { border-block-color: var(--color-red-500); } + .border-y-red-500\\/2\\.5 { - border-block-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-block-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-y-red-500\\/2\\.5 { border-block-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .border-y-red-500\\/2\\.25 { - border-block-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-block-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .border-y-red-500\\/2\\.25 { border-block-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .border-y-red-500\\/2\\.75 { - border-block-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-block-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .border-y-red-500\\/2\\.75 { border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .border-y-red-500\\/50 { - border-block-color: color-mix(in srgb, #ef4444 50%, transparent); + border-block-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .border-y-red-500\\/50 { border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .border-y-transparent { - border-block-color: transparent; + border-block-color: #0000; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } -@layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-border-style: solid; - } - } -} " `; diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts index 10945db31c43..a19123105ce6 100644 --- a/packages/tailwindcss/src/at-import.test.ts +++ b/packages/tailwindcss/src/at-import.test.ts @@ -72,7 +72,7 @@ test('can recursively resolve relative @imports', async () => { ).toMatchInlineSnapshot(` " .baz { - color: blue; + color: #00f; } " `) @@ -149,7 +149,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import url('example.css'); + @import "example.css"; " `) @@ -162,7 +162,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import url('./example.css'); + @import "./example.css"; " `) @@ -175,7 +175,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import url('/example.css'); + @import "/example.css"; " `) @@ -188,7 +188,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import url(example.css); + @import "example.css"; " `) @@ -201,7 +201,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import url(./example.css); + @import "./example.css"; " `) @@ -214,7 +214,7 @@ test('url() imports are passed-through', async () => { ), ).toMatchInlineSnapshot(` " - @import url(/example.css); + @import "/example.css"; " `) }) @@ -374,7 +374,7 @@ test('@supports', async () => { ), ).toMatchInlineSnapshot(` " - @supports (selector(h2 > p)) and (font-tech(color-COLRv1)) { + @supports selector(h2 > p) and font-tech(color-COLRv1) { a { color: red; } @@ -645,7 +645,7 @@ test('resolves `@variant` used as `@custom-variant` inside `@reference`', async ), ).toMatchInlineSnapshot(` " - .dark\\:flex:where([data-theme='dark'] *) { + .dark\\:flex:where([data-theme="dark"] *) { display: flex; } " diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index a662e4b535f8..8780b9358ce6 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -218,6 +218,7 @@ test('Config files can affect the theme', async () => { .scrollbar-primary { scrollbar-color: #c0ffee; } + .bg-primary { background-color: #c0ffee; } @@ -296,10 +297,7 @@ test('Variants in CSS overwrite variants from plugins', async () => { ), ).toMatchInlineSnapshot(` " - .dark\\:underline.my-dark { - text-decoration-line: underline; - } - .light\\:underline.my-light { + .dark\\:underline.my-dark, .light\\:underline.my-light { text-decoration-line: underline; } " @@ -382,41 +380,47 @@ describe('theme callbacks', () => { ), ).toMatchInlineSnapshot(` " - @layer properties; - .prose [class~=lead-base] { + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-leading: initial; + } + } + } + + .prose [class~="lead-base"] { font-size: 100rem; line-height: 201rem; } - .prose [class~=lead-md] { + + .prose [class~="lead-md"] { font-size: 200rem; line-height: 101rem; } - .prose [class~=lead-xl] { + + .prose [class~="lead-xl"] { font-size: 200rem; line-height: 201rem; } + .leading-base { --tw-leading: 201rem; line-height: 201rem; } + .leading-md { --tw-leading: 101rem; line-height: 101rem; } + .leading-xl { --tw-leading: 201rem; line-height: 201rem; } + @property --tw-leading { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-leading: initial; - } - } + inherits: false } " `) @@ -460,9 +464,11 @@ describe('theme overrides order', () => { :root, :host { --color-blue: blue; } + .bg-blue { background-color: var(--color-blue); } + .bg-red { background-color: very-red; } @@ -552,39 +558,51 @@ describe('theme overrides order', () => { --color-slate-400: #100400; --color-slate-500: #100500; } + .bg-slate-100 { background-color: var(--color-slate-100); } + .bg-slate-200 { background-color: #200200; } + .bg-slate-300 { background-color: var(--color-slate-300); } + .bg-slate-400 { background-color: var(--color-slate-400); } + .bg-slate-500 { background-color: var(--color-slate-500); } + .bg-slate-600 { background-color: #200600; } + .hover-bg-slate-100:hover { background-color: #000100; } + .hover-bg-slate-200:hover { background-color: #200200; } + .hover-bg-slate-300:hover { background-color: #000300; } + .hover-bg-slate-400:hover { background-color: #100400; } + .hover-bg-slate-500:hover { background-color: #100500; } + .hover-bg-slate-600:hover { background-color: #200600; } @@ -662,8 +680,8 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-sans { - font-family: Potato Sans; font-feature-settings: "cv06"; + font-family: Potato Sans; } " `) @@ -701,8 +719,8 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-sans { + font-variation-settings: "XHGT" .7; font-family: Potato Sans; - font-variation-settings: "XHGT" 0.7; } " `) @@ -743,9 +761,9 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-sans { - font-family: Potato Sans; font-feature-settings: "cv06"; - font-variation-settings: "XHGT" 0.7; + font-variation-settings: "XHGT" .7; + font-family: Potato Sans; } " `) @@ -788,6 +806,7 @@ describe('default font family compatibility', () => { :root, :host { --font-sans: Sandwich Sans; } + .font-sans { font-family: var(--font-sans); } @@ -937,8 +956,8 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-mono { - font-family: Potato Mono; font-feature-settings: "cv06"; + font-family: Potato Mono; } " `) @@ -978,8 +997,8 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-mono { + font-variation-settings: "XHGT" .7; font-family: Potato Mono; - font-variation-settings: "XHGT" 0.7; } " `) @@ -1020,9 +1039,9 @@ describe('default font family compatibility', () => { ).toMatchInlineSnapshot(` " .font-mono { - font-family: Potato Mono; font-feature-settings: "cv06"; - font-variation-settings: "XHGT" 0.7; + font-variation-settings: "XHGT" .7; + font-family: Potato Mono; } " `) @@ -1065,6 +1084,7 @@ describe('default font family compatibility', () => { :root, :host { --font-mono: Sandwich Mono; } + .font-mono { font-family: var(--font-mono); } @@ -1157,30 +1177,33 @@ test('creates variants for `data`, `supports`, and `aria` theme options at the s .aria-hidden\\:flex[aria-hidden="true"] { display: flex; } - .aria-polite\\:underline[aria-live="polite"] { - text-decoration-line: underline; - } - .data-checked\\:underline[data-ui~="checked"] { + + .aria-polite\\:underline[aria-live="polite"], .data-checked\\:underline[data-ui~="checked"] { text-decoration-line: underline; } + .data-foo\\:flex[data-foo] { display: flex; } + @supports selector(h2 > p) { .supports-child-combinator\\:underline { text-decoration-line: underline; } } + @supports (bar: var(--tw)) { .supports-foo\\:underline { text-decoration-line: underline; } } + @supports (grid: var(--tw)) { .supports-grid\\:flex { display: flex; } } + @media print { .print\\:flex { display: flex; @@ -1226,22 +1249,25 @@ test('merges css breakpoints with js config screens', async () => { ), ).toMatchInlineSnapshot(` " - @media (width >= 44rem) { + @media (min-width: 44rem) { .sm\\:flex { display: flex; } - @media (width < 50rem) { + + @media not all and (min-width: 50rem) { .min-sm\\:max-md\\:underline { text-decoration-line: underline; } } } - @media (width >= 50rem) { + + @media (min-width: 50rem) { .md\\:flex { display: flex; } } - @media (width >= 64rem) { + + @media (min-width: 64rem) { .lg\\:flex { display: flex; } @@ -1275,9 +1301,11 @@ test('utilities must be prefixed', async () => { .tw\\:custom { color: red; } + .tw\\:underline { text-decoration-line: underline; } + @media (hover: hover) { .tw\\:hover\\:line-through:hover { text-decoration-line: line-through; @@ -1425,9 +1453,11 @@ test('important: `#app`', async () => { #app .custom { color: red; } + #app .underline { text-decoration-line: underline; } + @media (hover: hover) { :is(#app .hover\\:line-through):hover { text-decoration-line: line-through; @@ -1462,9 +1492,11 @@ test('important: true', async () => { .custom { color: red !important; } + .underline { text-decoration-line: underline !important; } + @media (hover: hover) { .hover\\:line-through:hover { text-decoration-line: line-through !important; @@ -1506,7 +1538,8 @@ test('blocklisted candidates are not generated', async () => { .underline { text-decoration-line: underline; } - @media (width >= 48rem) { + + @media (min-width: 48rem) { .md\\:bg-white { background-color: var(--color-white, #fff); } @@ -1707,16 +1740,19 @@ test('handles setting theme keys to null', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-50: oklch(0.971 0.013 17.38); - --color-red-100: oklch(0.936 0.032 17.717); - --color-red-200: oklch(0.885 0.062 18.334); + --color-red-50: oklch(97.1% .013 17.38); + --color-red-100: oklch(93.6% .032 17.717); + --color-red-200: oklch(88.5% .062 18.334); } + .bg-red-50 { background-color: var(--color-red-50); } + .bg-red-100 { background-color: var(--color-red-100); } + .bg-red-200 { background-color: var(--color-red-200); } @@ -1748,8 +1784,9 @@ test('The theme() function does not try indexing into strings', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-what: light-dark(#f00, #f00); + --color-what: light-dark(red, red); } + .text-what { color: var(--color-what); } @@ -1799,9 +1836,11 @@ test('camel case keys are preserved', async () => { .bg-blue-green { background-color: var(--color-blue-green); } + .bg-lightGreen { background-color: #c0ffee; } + :root, :host { --color-blue-green: slate; } diff --git a/packages/tailwindcss/src/compat/container-config.test.ts b/packages/tailwindcss/src/compat/container-config.test.ts index e3f10b70d609..39a12557c676 100644 --- a/packages/tailwindcss/src/compat/container-config.test.ts +++ b/packages/tailwindcss/src/compat/container-config.test.ts @@ -38,31 +38,37 @@ test('creates a custom utility to extend the built-in container', async () => { .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; } } + .container { margin-inline: auto; padding-inline: 2rem; @@ -110,40 +116,48 @@ test('allows padding to be defined at custom breakpoints', async () => { .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; } } + .container { padding-inline: 1rem; } - @media (width >= 64rem) { + + @media (min-width: 64rem) { .container { padding-inline: 2rem; } } - @media (width >= 96rem) { + + @media (min-width: 96rem) { .container { padding-inline: 3rem; } @@ -189,42 +203,50 @@ test('allows breakpoints to be overwritten', async () => { .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; } } - @media (width >= 40rem) { + + @media (min-width: 40rem) { .container { max-width: none; } } - @media (width >= 1280px) { + + @media (min-width: 1280px) { .container { max-width: 1280px; } } - @media (width >= 1536px) { + + @media (min-width: 1536px) { .container { max-width: 1536px; } @@ -273,37 +295,44 @@ test('padding applies to custom `container` screens', async () => { .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; } } - @media (width >= 40rem) { + + @media (min-width: 40rem) { .container { max-width: none; } } - @media (width >= 48rem) { + + @media (min-width: 48rem) { .container { max-width: 48rem; padding-inline: 3rem; @@ -352,35 +381,42 @@ test("an empty `screen` config will undo all custom media screens and won't appl .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; } } + .container { padding-inline: 1rem; } - @media (width >= 40rem) { + + @media (min-width: 40rem) { .container { max-width: none; } @@ -433,6 +469,7 @@ test('legacy container component does not interfere with new --container variabl :root, :host { --container-sm: 24rem; } + .max-w-sm { max-width: var(--container-sm); } @@ -483,104 +520,125 @@ test('combines custom padding and screen overwrites', async () => { .\\!container { width: 100% !important; } - @media (width >= 40rem) { + + @media (min-width: 40rem) { .\\!container { max-width: 40rem !important; } } - @media (width >= 48rem) { + + @media (min-width: 48rem) { .\\!container { max-width: 48rem !important; } } - @media (width >= 64rem) { + + @media (min-width: 64rem) { .\\!container { max-width: 64rem !important; } } - @media (width >= 80rem) { + + @media (min-width: 80rem) { .\\!container { max-width: 80rem !important; } } - @media (width >= 96rem) { + + @media (min-width: 96rem) { .\\!container { max-width: 96rem !important; } } + .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; } } + .\\!container { margin-inline: auto !important; padding-inline: 2rem !important; } - @media (width >= 40rem) { + + @media (min-width: 40rem) { .\\!container { max-width: none !important; } } - @media (width >= 48rem) { + + @media (min-width: 48rem) { .\\!container { max-width: 48rem !important; } } - @media (width >= 1280px) { + + @media (min-width: 1280px) { .\\!container { max-width: 1280px !important; } } - @media (width >= 1536px) { + + @media (min-width: 1536px) { .\\!container { max-width: 1536px !important; padding-inline: 4rem !important; } } + .container { margin-inline: auto; padding-inline: 2rem; } - @media (width >= 40rem) { + + @media (min-width: 40rem) { .container { max-width: none; } } - @media (width >= 48rem) { + + @media (min-width: 48rem) { .container { max-width: 48rem; } } - @media (width >= 1280px) { + + @media (min-width: 1280px) { .container { max-width: 1280px; } } - @media (width >= 1536px) { + + @media (min-width: 1536px) { .container { max-width: 1536px; padding-inline: 4rem; @@ -635,51 +693,61 @@ test('filters out complex breakpoints', async () => { .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; } } + .container { margin-inline: auto; padding-inline: 2rem; } - @media (width >= 40rem) { + + @media (min-width: 40rem) { .container { max-width: none; } } - @media (width >= 20px) { + + @media (min-width: 20px) { .container { max-width: 20px; } } - @media (width >= 100px) { + + @media (min-width: 100px) { .container { max-width: 100px; } } - @media (width >= 300px) { + + @media (min-width: 300px) { .container { max-width: 300px; } diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts index c75c6c7c6c65..c90eae8453f9 100644 --- a/packages/tailwindcss/src/compat/legacy-utilities.test.ts +++ b/packages/tailwindcss/src/compat/legacy-utilities.test.ts @@ -21,30 +21,37 @@ test('bg-gradient-*', async () => { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-gradient-to-bl { --tw-gradient-position: to bottom left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-gradient-to-br { --tw-gradient-position: to bottom right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-gradient-to-l { --tw-gradient-position: to left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-gradient-to-t { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-gradient-to-tl { --tw-gradient-position: to top left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-gradient-to-tr { --tw-gradient-position: to top right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); @@ -83,18 +90,23 @@ test('max-w-screen', async () => { --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; } + .max-w-screen-2xl { max-width: var(--breakpoint-2xl); } + .max-w-screen-lg { max-width: var(--breakpoint-lg); } + .max-w-screen-md { max-width: var(--breakpoint-md); } + .max-w-screen-sm { max-width: var(--breakpoint-sm); } + .max-w-screen-xl { max-width: var(--breakpoint-xl); } @@ -126,6 +138,7 @@ test('box-decoration', async () => { -webkit-box-decoration-break: clone; box-decoration-break: clone; } + .decoration-slice { -webkit-box-decoration-break: slice; box-decoration-break: slice; @@ -150,9 +163,11 @@ test('flex-grow', async () => { .flex-grow { flex-grow: 1; } + .flex-grow-0 { flex-grow: 0; } + .flex-grow-\\[123\\] { flex-grow: 123; } @@ -179,9 +194,11 @@ test('flex-shrink', async () => { .flex-shrink { flex-shrink: 1; } + .flex-shrink-0 { flex-shrink: 0; } + .flex-shrink-\\[123\\] { flex-shrink: 123; } @@ -226,30 +243,38 @@ test('start', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --inset-shadowned: 1940px; } + .-start-4 { inset-inline-start: calc(var(--spacing) * -4); } + .-start-full { inset-inline-start: -100%; } + .start-3\\/4 { - inset-inline-start: calc(3/4 * 100%); + inset-inline-start: 75%; } + .start-4 { inset-inline-start: calc(var(--spacing) * 4); } + .start-\\[4px\\] { inset-inline-start: 4px; } + .start-auto { inset-inline-start: auto; } + .start-full { inset-inline-start: 100%; } + .start-shadowned { inset-inline-start: var(--inset-shadowned); } @@ -307,30 +332,38 @@ test('end', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --inset-shadowned: 1940px; } + .-end-4 { inset-inline-end: calc(var(--spacing) * -4); } + .-end-full { inset-inline-end: -100%; } + .end-3\\/4 { - inset-inline-end: calc(3/4 * 100%); + inset-inline-end: 75%; } + .end-4 { inset-inline-end: calc(var(--spacing) * 4); } + .end-\\[4px\\] { inset-inline-end: 4px; } + .end-auto { inset-inline-end: auto; } + .end-full { inset-inline-end: 100%; } + .end-shadowned { inset-inline-end: var(--inset-shadowned); } diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index b4684913e6a4..ac853982de20 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -63,6 +63,7 @@ describe('theme', async () => { transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); } } + @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); @@ -140,6 +141,7 @@ describe('theme', async () => { .scrollbar-red-500 { scrollbar-color: #ef4444; } + .scrollbar-russet-700 { scrollbar-color: #7a4724; } @@ -186,7 +188,7 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .animate-duration-316 { - animation-duration: 316ms; + animation-duration: .316s; } " `) @@ -232,10 +234,11 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .animate-duration-316 { - animation-duration: 316ms; + animation-duration: .316s; } + .animate-duration-slow { - animation-duration: 800ms; + animation-duration: .8s; } " `) @@ -270,15 +273,14 @@ describe('theme', async () => { ), ).toMatchInlineSnapshot(` " - .fraction { - color: color-mix(in oklab, #ef4444 50%, transparent); - } - .percentage { - color: color-mix(in oklab, #ef4444 50%, transparent); + .fraction, .percentage { + color: oklab(63.6834% .187 .088 / .5); } + .variable { color: #ef4444; } + @supports (color: color-mix(in lab, red, red)) { .variable { color: color-mix(in oklab, #ef4444 var(--opacity), transparent); @@ -339,32 +341,31 @@ describe('theme', async () => { ), ).toMatchInlineSnapshot(` " - .css-fraction { - color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); - } - .css-percentage { + .css-fraction, .css-percentage { color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); } + .css-variable { color: rgba(255 0 0 / ); } + @supports (color: color-mix(in lab, red, red)) { .css-variable { color: color-mix(in oklab, rgba(255 0 0 / ) var(--opacity), transparent); } } - .js-fraction { - color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); - } - .js-percentage { - color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent); + + .js-fraction, .js-percentage { + color: oklab(62.7955% .224 .125 / .5); } + .js-variable { - color: rgb(255 0 0 / 1); + color: red; } + @supports (color: color-mix(in lab, red, red)) { .js-variable { - color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent); + color: color-mix(in oklab, red var(--opacity), transparent); } } " @@ -412,10 +413,11 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .animate-delay-316 { - animation-delay: 316ms; + animation-delay: .316s; } + .animate-delay-slow { - animation-delay: 800ms; + animation-delay: .8s; } " `) @@ -450,7 +452,7 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .animate-duration { - animation-delay: 1500ms; + animation-delay: 1.5s; } " `) @@ -493,16 +495,19 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .animation { - animation: pulse 1s linear infinite; + animation: 1s linear infinite pulse; } + .animation-spin { - animation: spin 1s linear infinite; + animation: 1s linear infinite spin; } + .animation2 { - animation: pulse 1s linear infinite; + animation: 1s linear infinite pulse; } + .animation2-twist { - animation: spin 1s linear infinite; + animation: 1s linear infinite spin; } " `) @@ -543,9 +548,11 @@ describe('theme', async () => { .animation { --animation: pulse 1s linear infinite; } + .animation-bounce { --animation: bounce 1s linear infinite; } + .animation-spin { --animation: spin 1s linear infinite; } @@ -744,126 +751,103 @@ describe('theme', async () => { .my-aspect-2\\/5 { --value: 2/5; } - .my-backdrop-brightness-1 { - --value: 1%; - } - .my-backdrop-contrast-1 { - --value: 1%; - } - .my-backdrop-grayscale-1 { + + .my-backdrop-brightness-1, .my-backdrop-contrast-1, .my-backdrop-grayscale-1 { --value: 1%; } + .my-backdrop-hue-rotate-1 { --value: 1deg; } - .my-backdrop-invert-1 { - --value: 1%; - } - .my-backdrop-opacity-1 { - --value: 1%; - } - .my-backdrop-saturate-1 { - --value: 1%; - } - .my-backdrop-sepia-1 { + + .my-backdrop-invert-1, .my-backdrop-opacity-1, .my-backdrop-saturate-1, .my-backdrop-sepia-1 { --value: 1%; } + .my-border-width-1 { --value: 1px; } + .my-brightness-1 { --value: 1%; } + .my-columns-1 { --value: 1; } + .my-contrast-1 { --value: 1%; } + .my-divide-width-1 { --value: 1px; } - .my-flex-grow-1 { - --value: 1; - } - .my-flex-shrink-1 { + + .my-flex-grow-1, .my-flex-shrink-1 { --value: 1; } - .my-gradient-color-stop-positions-1 { - --value: 1%; - } - .my-grayscale-1 { + + .my-gradient-color-stop-positions-1, .my-grayscale-1 { --value: 1%; } - .my-grid-row-end-1 { - --value: 1; - } - .my-grid-row-start-1 { + + .my-grid-row-end-1, .my-grid-row-start-1 { --value: 1; } - .my-grid-template-columns-1 { - --value: repeat(1, minmax(0, 1fr)); - } - .my-grid-template-rows-1 { + + .my-grid-template-columns-1, .my-grid-template-rows-1 { --value: repeat(1, minmax(0, 1fr)); } + .my-hue-rotate-1 { --value: 1deg; } + .my-invert-1 { --value: 1%; } + .my-line-clamp-1 { --value: 1; } + .my-opacity-1 { --value: 1%; } + .my-order-1 { --value: 1; } - .my-outline-offset-1 { - --value: 1px; - } - .my-outline-width-1 { - --value: 1px; - } - .my-ring-offset-width-1 { - --value: 1px; - } - .my-ring-width-1 { + + .my-outline-offset-1, .my-outline-width-1, .my-ring-offset-width-1, .my-ring-width-1 { --value: 1px; } + .my-rotate-1 { --value: 1deg; } - .my-saturate-1 { - --value: 1%; - } - .my-scale-1 { - --value: 1%; - } - .my-sepia-1 { + + .my-saturate-1, .my-scale-1, .my-sepia-1 { --value: 1%; } + .my-skew-1 { --value: 1deg; } + .my-stroke-width-1 { --value: 1; } - .my-text-decoration-thickness-1 { - --value: 1px; - } - .my-text-underline-offset-1 { + + .my-text-decoration-thickness-1, .my-text-underline-offset-1 { --value: 1px; } - .my-transition-delay-1 { - --value: 1ms; - } - .my-transition-duration-1 { + + .my-transition-delay-1, .my-transition-duration-1 { --value: 1ms; } + .my-z-index-1 { --value: 1; } @@ -1036,9 +1020,9 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .foo-bar { - background-color: red; color: red; --my-prop: bar-valuer; + background-color: red; } " `) @@ -1164,99 +1148,87 @@ describe('theme', async () => { .my-aspect-2\\/5 { --value: 2/5; } + .my-border-width-1 { --value: 1px; } + .my-brightness-1 { --value: 1%; } + .my-columns-1 { --value: 1; } + .my-contrast-1 { --value: 1%; } - .my-flex-grow-1 { - --value: 1; - } - .my-flex-shrink-1 { + + .my-flex-grow-1, .my-flex-shrink-1 { --value: 1; } - .my-gradient-color-stop-positions-1 { - --value: 1%; - } - .my-grayscale-1 { + + .my-gradient-color-stop-positions-1, .my-grayscale-1 { --value: 1%; } - .my-grid-row-end-1 { - --value: 1; - } - .my-grid-row-start-1 { + + .my-grid-row-end-1, .my-grid-row-start-1 { --value: 1; } - .my-grid-template-columns-1 { - --value: repeat(1, minmax(0, 1fr)); - } - .my-grid-template-rows-1 { + + .my-grid-template-columns-1, .my-grid-template-rows-1 { --value: repeat(1, minmax(0, 1fr)); } + .my-hue-rotate-1 { --value: 1deg; } + .my-invert-1 { --value: 1%; } + .my-line-clamp-1 { --value: 1; } + .my-opacity-1 { --value: 1%; } + .my-order-1 { --value: 1; } - .my-outline-offset-1 { - --value: 1px; - } - .my-outline-width-1 { - --value: 1px; - } - .my-ring-offset-width-1 { - --value: 1px; - } - .my-ring-width-1 { + + .my-outline-offset-1, .my-outline-width-1, .my-ring-offset-width-1, .my-ring-width-1 { --value: 1px; } + .my-rotate-1 { --value: 1deg; } - .my-saturate-1 { - --value: 1%; - } - .my-scale-1 { - --value: 1%; - } - .my-sepia-1 { + + .my-saturate-1, .my-scale-1, .my-sepia-1 { --value: 1%; } + .my-skew-1 { --value: 1deg; } + .my-stroke-width-1 { --value: 1; } - .my-text-decoration-thickness-1 { - --value: 1px; - } - .my-text-underline-offset-1 { + + .my-text-decoration-thickness-1, .my-text-underline-offset-1 { --value: 1px; } - .my-transition-delay-1 { - --value: 1ms; - } - .my-transition-duration-1 { + + .my-transition-delay-1, .my-transition-duration-1 { --value: 1ms; } + .my-z-index-1 { --value: 1; } @@ -1304,11 +1276,13 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .my-width-1 { - width: 0.25rem; + width: .25rem; } + .my-width-1\\.5 { - width: 0.375rem; + width: .375rem; } + .my-width-1\\/2 { width: 60%; } @@ -1350,16 +1324,19 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .my-width-1 { - width: 0.25rem; + width: .25rem; } + .my-width-1\\.5 { - width: 0.375rem; + width: .375rem; } + .my-width-1\\/2 { width: 60%; } + .my-width-2\\.5 { - width: 0.625rem; + width: .625rem; } " `) @@ -1404,16 +1381,19 @@ describe('theme', async () => { ).toMatchInlineSnapshot(` " .my-width-1 { - width: 0.25rem; + width: .25rem; } + .my-width-1\\.5 { - width: 0.375rem; + width: .375rem; } + .my-width-1\\/2 { width: 60%; } + .my-width-2\\.5 { - width: 0.625rem; + width: .625rem; } " `) @@ -1529,6 +1509,7 @@ describe('addVariant', () => { .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { display: flex; } + .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } @@ -1562,16 +1543,11 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex:is(:where(.group):hover *) { - display: flex; - } - .group-hocus\\:flex:is(:where(.group):focus *) { + .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) { display: flex; } - .hocus\\:underline:hover { - text-decoration-line: underline; - } - .hocus\\:underline:focus { + + .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } } @@ -1607,16 +1583,11 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex:is(:where(.group):hover *) { - display: flex; - } - .group-hocus\\:flex:is(:where(.group):focus *) { + .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) { display: flex; } - .hocus\\:underline:hover { - text-decoration-line: underline; - } - .hocus\\:underline:focus { + + .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } } @@ -1659,14 +1630,17 @@ describe('addVariant', () => { display: flex; } } + .group-hocus\\:flex:is(:where(.group):focus *) { display: flex; } + @media (hover: hover) { .hocus\\:underline:hover { text-decoration-line: underline; } } + .hocus\\:underline:focus { text-decoration-line: underline; } @@ -1704,10 +1678,11 @@ describe('addVariant', () => { " @layer utilities { @media (max-width: 400px) { - @supports (font:bold) { + @supports (font: bold) { .potato\\:flex:large-potato { display: flex; } + .potato\\:underline:large-potato { text-decoration-line: underline; } @@ -1752,10 +1727,8 @@ describe('addVariant', () => { .hocus\\:underline { --custom-property: @slot; } - .hocus\\:underline:hover { - text-decoration-line: underline; - } - .hocus\\:underline:focus { + + .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } } @@ -1790,16 +1763,7 @@ describe('addVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-optional\\:flex:is(:where(.group):optional *) { - display: flex; - } - .group-optional\\/foo\\:flex:is(:where(.group\\/foo):optional *) { - display: flex; - } - .peer-optional\\:flex:is(:where(.peer):optional ~ *) { - display: flex; - } - .optional\\:flex:optional { + .group-optional\\:flex:is(:where(.group):optional *), .group-optional\\/foo\\:flex:is(:where(.group\\/foo):optional *), .peer-optional\\:flex:is(:where(.peer):optional ~ *), .optional\\:flex:optional { display: flex; } } @@ -1837,6 +1801,7 @@ describe('matchVariant', () => { .potato-baked .potato-\\[baked\\]\\:flex { display: flex; } + .potato-yellow .potato-\\[yellow\\]\\:underline { text-decoration-line: underline; } @@ -1875,6 +1840,7 @@ describe('matchVariant', () => { display: flex; } } + @media (potato: yellow) { .potato-\\[yellow\\]\\:underline { text-decoration-line: underline; @@ -1913,14 +1879,15 @@ describe('matchVariant', () => { " @layer utilities { @media (potato: baked) { - @supports (font:bold) { + @supports (font: bold) { .potato-\\[baked\\]\\:flex:large-potato { display: flex; } } } + @media (potato: yellow) { - @supports (font:bold) { + @supports (font: bold) { .potato-\\[yellow\\]\\:underline:large-potato { text-decoration-line: underline; } @@ -1964,6 +1931,7 @@ describe('matchVariant', () => { .tooltip-bottom\\:underline[data-location="bottom"] { text-decoration-line: underline; } + .tooltip-top\\:flex[data-location="top"] { display: flex; } @@ -2009,16 +1977,7 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .alphabet-d\\:underline[data-order="1"] { - text-decoration-line: underline; - } - .alphabet-a\\:underline[data-order="2"] { - text-decoration-line: underline; - } - .alphabet-c\\:underline[data-order="3"] { - text-decoration-line: underline; - } - .alphabet-b\\:underline[data-order="4"] { + .alphabet-d\\:underline[data-order="1"], .alphabet-a\\:underline[data-order="2"], .alphabet-c\\:underline[data-order="3"], .alphabet-b\\:underline[data-order="4"] { text-decoration-line: underline; } } @@ -2053,13 +2012,7 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .test-\\[a\\,b\\,c\\]\\:underline.a > * { - text-decoration-line: underline; - } - .test-\\[a\\,b\\,c\\]\\:underline.b > * { - text-decoration-line: underline; - } - .test-\\[a\\,b\\,c\\]\\:underline.c > * { + .test-\\[a\\,b\\,c\\]\\:underline.a > *, .test-\\[a\\,b\\,c\\]\\:underline.b > *, .test-\\[a\\,b\\,c\\]\\:underline.c > * { text-decoration-line: underline; } } @@ -2101,11 +2054,13 @@ describe('matchVariant', () => { text-decoration-line: underline; } } + @media (min-width: 600px) { .testmin-\\[600px\\]\\:flex { display: flex; } } + @media (min-width: 700px) { .testmin-\\[700px\\]\\:italic { font-style: italic; @@ -2151,11 +2106,13 @@ describe('matchVariant', () => { font-style: italic; } } + @media (min-width: 600px) { .testmin-example\\:italic { font-style: italic; } } + @media (min-width: 700px) { .testmin-\\[700px\\]\\:italic { font-style: italic; @@ -2213,6 +2170,7 @@ describe('matchVariant', () => { } } } + @media (min-width: 150px) { @media (max-width: 400px) { .testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 { @@ -2220,12 +2178,14 @@ describe('matchVariant', () => { } } } + @media (min-width: 100px) { @media (max-width: 350px) { .testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 { order: 3; } } + @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; @@ -2283,6 +2243,7 @@ describe('matchVariant', () => { text-decoration-line: underline; } } + .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:focus\\:underline:focus { text-decoration-line: underline; } @@ -2339,6 +2300,7 @@ describe('matchVariant', () => { } } } + @media (min-width: 200px) { @media (max-width: 400px) { .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { @@ -2346,6 +2308,7 @@ describe('matchVariant', () => { } } } + @media (min-width: 100px) { @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { @@ -2353,6 +2316,7 @@ describe('matchVariant', () => { } } } + @media (min-width: 200px) { @media (max-width: 300px) { .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { @@ -2410,18 +2374,21 @@ describe('matchVariant', () => { text-decoration-line: underline; } } + @media (min-width: 200px) { .testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline { text-decoration-line: underline; } } } + @media (max-width: 300px) { @media (min-width: 100px) { .testmax-\\[300px\\]\\:testmin-\\[100px\\]\\:underline { text-decoration-line: underline; } } + @media (min-width: 200px) { .testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline { text-decoration-line: underline; @@ -2487,6 +2454,7 @@ describe('matchVariant', () => { } } } + @media (min-width: 200px) { @media (max-width: 400px) { .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { @@ -2494,6 +2462,7 @@ describe('matchVariant', () => { } } } + @media (min-width: 100px) { @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { @@ -2501,6 +2470,7 @@ describe('matchVariant', () => { } } } + @media (min-width: 200px) { @media (max-width: 300px) { .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { @@ -2684,6 +2654,7 @@ describe('matchVariant', () => { text-decoration-line: underline; } } + @container placement (min-width: 250px) { .my-container-\\[250px\\]\\/placement\\:underline { text-decoration-line: underline; @@ -2731,16 +2702,7 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-optional-\\[test\\]\\:flex:is(:where(.group):optional:has(test) :where(.group) *) { - display: flex; - } - .group-optional-\\[test\\]\\/foo\\:flex:is(:where(.group\\/foo):optional:has(test) :where(.group\\/foo) *) { - display: flex; - } - .peer-optional-\\[test\\]\\:flex:is(:where(.peer):optional:has(test) :where(.peer) ~ *) { - display: flex; - } - .optional-\\[test\\]\\:flex:optional:has(test) .optional-\\[test\\]\\:flex { + .group-optional-\\[test\\]\\:flex:is(:where(.group):optional:has(test) :where(.group) *), .group-optional-\\[test\\]\\/foo\\:flex:is(:where(.group\\/foo):optional:has(test) :where(.group\\/foo) *), .peer-optional-\\[test\\]\\:flex:is(:where(.peer):optional:has(test) :where(.peer) ~ *), .optional-\\[test\\]\\:flex:optional:has(test) .optional-\\[test\\]\\:flex { display: flex; } } @@ -2775,10 +2737,7 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - known.foo-known\\:flex { - display: flex; - } - test.foo-\\[test\\]\\:flex { + known.foo-known\\:flex, test.foo-\\[test\\]\\:flex { display: flex; } } @@ -2816,10 +2775,7 @@ describe('matchVariant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .foo-string\\:flex:is(some string) { - display: flex; - } - test.foo-\\[test\\]\\:flex { + .foo-string\\:flex:is(some string), test.foo-\\[test\\]\\:flex { display: flex; } } @@ -2867,7 +2823,8 @@ describe('addUtilities()', () => { text-box-trim: both; text-box-edge: cap alphabetic; } - @media (width >= 1024px) { + + @media (min-width: 1024px) { .lg\\:text-trim { text-box-trim: both; text-box-edge: cap alphabetic; @@ -2950,11 +2907,7 @@ describe('addUtilities()', () => { ), ).toMatchInlineSnapshot(` " - .text-trim { - text-box-trim: both; - text-box-edge: cap alphabetic; - } - .text-trim-2 { + .text-trim, .text-trim-2 { text-box-trim: both; text-box-edge: cap alphabetic; } @@ -2991,7 +2944,7 @@ describe('addUtilities()', () => { ).toMatchInlineSnapshot(` " .outlined { - outline: 1px solid ButtonText; + outline: 1px solid buttontext; outline: 1px auto -webkit-focus-ring-color; } " @@ -3075,15 +3028,18 @@ describe('addUtilities()', () => { .foo { display: flex; } + @media (prefers-color-scheme: dark) { .foo { text-decoration-line: underline; } } - @media (width >= 1024px) { + + @media (min-width: 1024px) { .lg\\:foo { display: flex; } + @media (prefers-color-scheme: dark) { .lg\\:foo { text-decoration-line: underline; @@ -3163,7 +3119,8 @@ describe('addUtilities()', () => { appearance: none; background-color: #fff; } - @media (width >= 1024px) { + + @media (min-width: 1024px) { .lg\\:form-textarea { appearance: none; background-color: #fff; @@ -3203,13 +3160,11 @@ describe('addUtilities()', () => { ), ).toMatchInlineSnapshot(` " - .form-input { - background-color: red; - } - .form-input::placeholder { + .form-input, .form-input::placeholder { background-color: red; } - @media (width >= 1024px) { + + @media (min-width: 1024px) { .lg\\:form-textarea:hover:focus { background-color: red; } @@ -3249,19 +3204,7 @@ describe('addUtilities()', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .j.j { - color: red; - } - .a .b:hover .c { - color: red; - } - .d > * { - color: red; - } - .e .bar:not(.f):has(.g) { - color: red; - } - .h ~ .i { + .j.j, .a .b:hover .c, .d > *, .e .bar:not(.f):has(.g), .h ~ .i { color: red; } } @@ -3332,16 +3275,15 @@ describe('addUtilities()', () => { .foo :where(.foo > :first-child) { color: red; } - @media (width >= 768px) { - .md\\:foo :where(.md\\:foo > :first-child) { - color: red; - } - :is(.not-hover\\:md\\:foo:not(*:hover)) :where(.not-hover\\:md\\:foo > :first-child) { + + @media (min-width: 768px) { + .md\\:foo :where(.md\\:foo > :first-child), .not-hover\\:md\\:foo:not(:hover) :where(.not-hover\\:md\\:foo > :first-child) { color: red; } } - @media not (hover: hover) { - @media (width >= 768px) { + + @media not all and (hover: hover) { + @media (min-width: 768px) { .not-hover\\:md\\:foo :where(.not-hover\\:md\\:foo > :first-child) { color: red; } @@ -3436,16 +3378,20 @@ describe('matchUtilities()', () => { .border-block { border-block-width: 1px; } + .border-block-2 { border-block-width: 2px; } + .border-block-\\[35px\\] { border-block-width: 35px; } + .border-block-\\[var\\(--foo\\)\\] { border-block-width: var(--foo); } - @media (width >= 1024px) { + + @media (min-width: 1024px) { .lg\\:border-block-2 { border-block-width: 2px; } @@ -3506,6 +3452,7 @@ describe('matchUtilities()', () => { .\\@w-1 { width: 1px; } + @media (hover: hover) { .hover\\:\\@w-1:hover { width: 1px; @@ -3595,14 +3542,17 @@ describe('matchUtilities()', () => { --my-modifier: none; border-block-width: 1px; } + .border-block-2 { --my-modifier: none; border-block-width: 2px; } + .border-block-2\\/foo { --my-modifier: foo; border-block-width: 2px; } + .border-block\\/foo { --my-modifier: foo; border-block-width: 1px; @@ -3655,14 +3605,17 @@ describe('matchUtilities()', () => { --my-modifier: none; border-block-width: 1px; } + .border-block-2 { --my-modifier: none; border-block-width: 2px; } + .border-block-2\\/foo { --my-modifier: foo; border-block-width: 2px; } + .border-block\\/foo { --my-modifier: foo; border-block-width: 1px; @@ -3731,11 +3684,13 @@ describe('matchUtilities()', () => { .scrollbar-\\[2px\\] { scrollbar-width: 2px; } + .scrollbar-\\[\\#08c\\] { scrollbar-color: #08c; } + .scrollbar-\\[\\#08c\\]\\/50 { - scrollbar-color: color-mix(in oklab, #08c 50%, transparent); + scrollbar-color: oklab(59.9824% -.067 -.124 / .5); } " `) @@ -3854,48 +3809,48 @@ describe('matchUtilities()', () => { ), ).toMatchInlineSnapshot(` " - .scrollbar-2 { - scrollbar-width: 2px; - } - .scrollbar-\\[2px\\] { + .scrollbar-2, .scrollbar-\\[2px\\] { scrollbar-width: 2px; } + .scrollbar-\\[length\\:var\\(--my-width\\)\\] { scrollbar-width: var(--my-width); } + .scrollbar-\\[\\#fff\\] { scrollbar-color: #fff; } + .scrollbar-\\[\\#fff\\]\\/50 { - scrollbar-color: color-mix(in oklab, #fff 50%, transparent); - } - .scrollbar-\\[color\\:var\\(--my-color\\)\\] { - scrollbar-color: var(--my-color); + scrollbar-color: oklab(100% 0 5.96046e-8 / .5); } - .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 { + + .scrollbar-\\[color\\:var\\(--my-color\\)\\], .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 { scrollbar-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 { scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .scrollbar-\\[var\\(--my-color\\)\\] { - scrollbar-color: var(--my-color); - } - .scrollbar-\\[var\\(--my-color\\)\\]\\/50 { + + .scrollbar-\\[var\\(--my-color\\)\\], .scrollbar-\\[var\\(--my-color\\)\\]\\/50 { scrollbar-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .scrollbar-\\[var\\(--my-color\\)\\]\\/50 { scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .scrollbar-black { scrollbar-color: black; } + .scrollbar-black\\/50 { - scrollbar-color: color-mix(in oklab, black 50%, transparent); + scrollbar-color: oklab(0% none none / .5); } " `) @@ -3967,26 +3922,29 @@ describe('matchUtilities()', () => { .scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] { scrollbar-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] { scrollbar-color: color-mix(in oklab, var(--my-color) 25%, transparent); } } + .scrollbar-black { scrollbar-color: black; } + .scrollbar-black\\/33 { - scrollbar-color: color-mix(in oklab, black 33%, transparent); + scrollbar-color: oklab(0% none none / .33); } + .scrollbar-black\\/\\[50\\%\\] { - scrollbar-color: color-mix(in oklab, black 50%, transparent); - } - .scrollbar-current { - scrollbar-color: currentcolor; + scrollbar-color: oklab(0% none none / .5); } - .scrollbar-current\\/45 { + + .scrollbar-current, .scrollbar-current\\/45 { scrollbar-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .scrollbar-current\\/45 { scrollbar-color: color-mix(in oklab, currentcolor 45%, transparent); @@ -4036,6 +3994,7 @@ describe('matchUtilities()', () => { --modifier: none; scrollbar-width: 12px; } + .scrollbar-\\[12px\\]\\/foo { --modifier: foo; scrollbar-width: 12px; @@ -4080,15 +4039,18 @@ describe('matchUtilities()', () => { --foo: 12px; display: flex; } + .foo-bar { --foo: bar; display: flex; } - @media (width >= 1024px) { + + @media (min-width: 1024px) { .lg\\:foo-\\[12px\\] { --foo: 12px; display: flex; } + .lg\\:foo-bar { --foo: bar; display: flex; @@ -4164,16 +4126,15 @@ describe('matchUtilities()', () => { .foo-red :where(.foo-red > :first-child) { color: red; } - @media (width >= 768px) { - .md\\:foo-red :where(.md\\:foo-red > :first-child) { - color: red; - } - :is(.not-hover\\:md\\:foo-red:not(*:hover)) :where(.not-hover\\:md\\:foo-red > :first-child) { + + @media (min-width: 768px) { + .md\\:foo-red :where(.md\\:foo-red > :first-child), .not-hover\\:md\\:foo-red:not(:hover) :where(.not-hover\\:md\\:foo-red > :first-child) { color: red; } } - @media not (hover: hover) { - @media (width >= 768px) { + + @media not all and (hover: hover) { + @media (min-width: 768px) { .not-hover\\:md\\:foo-red :where(.not-hover\\:md\\:foo-red > :first-child) { color: red; } @@ -4228,21 +4189,25 @@ describe('addComponents()', () => { ).toMatchInlineSnapshot(` " .btn { - padding: .5rem 1rem; border-radius: .25rem; + padding: .5rem 1rem; font-weight: 600; } + .btn-blue { - background-color: #3490dc; color: #fff; + background-color: #3490dc; } + .btn-blue:hover { background-color: #2779bd; } + .btn-red { - background-color: #e3342f; color: #fff; + background-color: #e3342f; } + .btn-red:hover { background-color: #cc1f1a; } @@ -4280,6 +4245,7 @@ describe('matchComponents()', () => { .prose { --container-size: normal; } + @media (hover: hover) { .hover\\:prose-lg:hover { --container-size: lg; diff --git a/packages/tailwindcss/src/compat/screens-config.test.ts b/packages/tailwindcss/src/compat/screens-config.test.ts index 993ef4a4afa7..d81cd8de6519 100644 --- a/packages/tailwindcss/src/compat/screens-config.test.ts +++ b/packages/tailwindcss/src/compat/screens-config.test.ts @@ -51,31 +51,37 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => { .max-w-screen-sm { max-width: 44rem; } - @media (width >= 44rem) { + + @media (min-width: 44rem) { .sm\\:flex { display: flex; } - @media (width < 50rem) { + + @media not all and (min-width: 50rem) { .min-sm\\:max-md\\:underline { text-decoration-line: underline; } } } - @media (width >= 50rem) { + + @media (min-width: 50rem) { .md\\:flex { display: flex; } - @media (width < 64rem) { + + @media not all and (min-width: 64rem) { .min-md\\:max-lg\\:underline { text-decoration-line: underline; } } } - @media (width >= 64rem) { + + @media (min-width: 64rem) { .lg\\:flex { display: flex; } } + @media print { .print\\:items-end { align-items: flex-end; @@ -134,44 +140,48 @@ test('JS config `screens` extend CSS `--breakpoint-*`', async () => { ), ).toMatchInlineSnapshot(` " - @media (width >= 30rem) { - .min-xs\\:flex { - display: flex; - } - .xs\\:flex { + @media (min-width: 30rem) { + .min-xs\\:flex, .xs\\:flex { display: flex; } - @media (width < 50rem) { + + @media not all and (min-width: 50rem) { .min-xs\\:max-md\\:underline { text-decoration-line: underline; } } } - @media (width >= 40rem) { + + @media (min-width: 40rem) { .sm\\:flex { display: flex; } - @media (width < 50rem) { + + @media not all and (min-width: 50rem) { .min-sm\\:max-md\\:underline { text-decoration-line: underline; } } } - @media (width >= 50rem) { + + @media (min-width: 50rem) { .md\\:flex { display: flex; } - @media (width < 60rem) { + + @media not all and (min-width: 60rem) { .min-md\\:max-lg\\:underline { text-decoration-line: underline; } } } - @media (width >= 60rem) { + + @media (min-width: 60rem) { .lg\\:flex { display: flex; } } + @media print { .print\\:items-end { align-items: flex-end; @@ -217,31 +227,36 @@ test('JS config `screens` only setup, even if those match the default-theme expo ), ).toMatchInlineSnapshot(` " - @media (width >= 40rem) { + @media (min-width: 40rem) { .sm\\:flex { display: flex; } - @media (width < 48rem) { + + @media not all and (min-width: 48rem) { .min-sm\\:max-md\\:underline { text-decoration-line: underline; } } } - @media (width >= 48rem) { + + @media (min-width: 48rem) { .md\\:flex { display: flex; } - @media (width < 64rem) { + + @media not all and (min-width: 64rem) { .min-md\\:max-lg\\:underline { text-decoration-line: underline; } } } - @media (width >= 64rem) { + + @media (min-width: 64rem) { .lg\\:flex { display: flex; } } + @media print { .print\\:items-end { align-items: flex-end; @@ -299,43 +314,36 @@ test('JS config `screens` overwrite CSS `--breakpoint-*`', async () => { ), ).toMatchInlineSnapshot(` " - @media (width >= 40rem) { - .mini\\:flex { - display: flex; - } - .sm\\:flex { + @media (min-width: 40rem) { + .mini\\:flex, .sm\\:flex { display: flex; } - @media (width < 48rem) { - .min-mini\\:max-midi\\:underline { - text-decoration-line: underline; - } - .min-sm\\:max-md\\:underline { + + @media not all and (min-width: 48rem) { + .min-mini\\:max-midi\\:underline, .min-sm\\:max-md\\:underline { text-decoration-line: underline; } } } - @media (width >= 48rem) { - .md\\:flex { - display: flex; - } - .midi\\:flex { + + @media (min-width: 48rem) { + .md\\:flex, .midi\\:flex { display: flex; } - @media (width < 64rem) { - .min-md\\:max-lg\\:underline { - text-decoration-line: underline; - } - .min-midi\\:max-maxi\\:underline { + + @media not all and (min-width: 64rem) { + .min-md\\:max-lg\\:underline, .min-midi\\:max-maxi\\:underline { text-decoration-line: underline; } } } - @media (width >= 64rem) { + + @media (min-width: 64rem) { .maxi\\:flex { display: flex; } } + @media print { .print\\:items-end { align-items: flex-end; @@ -404,31 +412,36 @@ test('JS config with `theme: { extends }` should not include the `default-config ), ).toMatchInlineSnapshot(` " - @media (width >= 40rem) { + @media (min-width: 40rem) { .mini\\:flex { display: flex; } - @media (width < 48rem) { + + @media not all and (min-width: 48rem) { .min-mini\\:max-midi\\:underline { text-decoration-line: underline; } } } - @media (width >= 48rem) { + + @media (min-width: 48rem) { .midi\\:flex { display: flex; } - @media (width < 64rem) { + + @media not all and (min-width: 64rem) { .min-midi\\:max-maxi\\:underline { text-decoration-line: underline; } } } - @media (width >= 64rem) { + + @media (min-width: 64rem) { .maxi\\:flex { display: flex; } } + @media print { .print\\:items-end { align-items: flex-end; @@ -511,34 +524,36 @@ describe('complex screen configs', () => { ), ).toMatchInlineSnapshot(` " - @media (width >= 868px) { - .lg\\:flex { - display: flex; - } - .min-lg\\:flex { + @media (min-width: 868px) { + .lg\\:flex, .min-lg\\:flex { display: flex; } } - @media (639px >= width) { + + @media (max-width: 639px) { .sm\\:flex { display: flex; } } - @media (767px >= width >= 668px), (width >= 868px) { + + @media (max-width: 767px) and (min-width: 668px), (min-width: 868px) { .md\\:flex { display: flex; } } - @media (1279px >= width >= 1024px) { + + @media (max-width: 1279px) and (min-width: 1024px) { .xl\\:flex { display: flex; } } + @media (min-height: 800px) { .tall\\:flex { display: flex; } } + @media print { .print\\:items-end { align-items: flex-end; @@ -588,27 +603,24 @@ describe('complex screen configs', () => { ), ).toMatchInlineSnapshot(` " - @media (width >= 40rem) { - .min-sm\\:flex { - display: flex; - } - .sm\\:flex { + @media (min-width: 40rem) { + .min-sm\\:flex, .sm\\:flex { display: flex; } } - @media (width >= 48rem) { - .md\\:flex { - display: flex; - } - .min-md\\:flex { + + @media (min-width: 48rem) { + .md\\:flex, .min-md\\:flex { display: flex; } } + @media screen and (orientation: portrait) { .portrait\\:flex { display: flex; } } + @media print { .print\\:items-end { align-items: flex-end; diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 575f86665fae..7096c6bbc75b 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -17,7 +17,7 @@ describe('--alpha(…)', () => { ).toMatchInlineSnapshot(` " .foo { - margin: color-mix(in oklab, red 50%, transparent); + margin: oklab(62.7955% .224 .125 / .5); } " `) @@ -75,8 +75,9 @@ describe('--spacing(…)', () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .foo { margin: calc(var(--spacing) * 4); } @@ -98,7 +99,7 @@ describe('--spacing(…)', () => { ).toMatchInlineSnapshot(` " .foo { - margin: calc(0.25rem * 4); + margin: 1rem; } " `) @@ -159,8 +160,9 @@ describe('--theme(…)', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: #f00; + --color-red-500: red; } + .red { color: var(--color-red-500); } @@ -181,7 +183,7 @@ describe('--theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -200,11 +202,13 @@ describe('--theme(…)', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: #f00; + --color-red-500: red; } + .red { - color: color-mix(in srgb, #f00 50%, transparent); + color: #ff000080; } + @supports (color: color-mix(in lab, red, red)) { .red { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); @@ -227,7 +231,7 @@ describe('--theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: color-mix(in oklab, #f00 5000%, transparent); + color: oklab(62.7955% .224863 .125846); } " `) @@ -331,15 +335,17 @@ describe('--theme(…)', () => { ).toMatchInlineSnapshot(` " :root, :host { - --tw-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; + --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; --tw-default-font-family: var(--tw-font-sans); } + @layer base { html { font-family: var(--tw-default-font-family, sans-serif); } } + .tw\\:font-sans { font-family: var(--tw-font-sans); } @@ -368,13 +374,13 @@ describe('--theme(…)', () => { `), ).toMatchInlineSnapshot(` " - @custom-media --md (width >= 48rem); - @media (--md) { + @media (min-width: 48rem) { .blue { - color: blue; + color: #00f; } } - @media (width >= 64rem) { + + @media (min-width: 64rem) { .red { color: red; } @@ -444,6 +450,7 @@ describe('--theme(…)', () => { font-family: var(--default-font-family, system-ui); } } + @layer theme { :root, :host { --font-sans: sans-serif; @@ -471,7 +478,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -490,7 +497,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -509,7 +516,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -528,7 +535,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -547,7 +554,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -566,7 +573,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -585,7 +592,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: color-mix(in oklab, #f00 75%, transparent); + color: oklab(62.7955% .224 .125 / .75); } " `) @@ -604,7 +611,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: color-mix(in oklab, #f00 75%, transparent); + color: oklab(62.7955% .224 .125 / .75); } " `) @@ -623,7 +630,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: color-mix(in oklab, #f00 75%, transparent); + color: oklab(62.7955% .224 .125 / .75); } " `) @@ -642,11 +649,12 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } + @supports (color: color-mix(in lab, red, red)) { .red { - color: color-mix(in oklab, #f00 var(--opacity), transparent); + color: color-mix(in oklab, red var(--opacity), transparent); } } " @@ -667,11 +675,12 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } + @supports (color: color-mix(in lab, red, red)) { .red { - color: color-mix(in oklab, #f00 var(--opacity,50%), transparent); + color: color-mix(in oklab, red var(--opacity, 50%), transparent); } } " @@ -710,7 +719,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .space-on-the-left { - margin-left: 0.625rem; + margin-left: .625rem; } " `) @@ -729,7 +738,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .space-on-the-left { - margin-left: calc(100vh - 0.625rem); + margin-left: calc(100vh - .625rem); } " `) @@ -748,7 +757,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .radius { - border-radius: 0.5rem; + border-radius: .5rem; } " `) @@ -811,7 +820,7 @@ 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"; + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; } " `) @@ -831,7 +840,7 @@ 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"; + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; } " `) @@ -861,7 +870,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -880,7 +889,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: color-mix(in oklab, #f00 25%, transparent); + color: oklab(62.7955% .224 .125 / .25); } " `) @@ -940,7 +949,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -960,7 +969,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: color-mix(in oklab, color-mix(in oklab, #f00 50%, transparent) 50%, transparent); + color: oklab(62.7955% .224 .125 / .25); } " `) @@ -981,7 +990,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -1000,7 +1009,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: color-mix(in oklab, #f00 50%, transparent); + color: oklab(62.7955% .224 .125 / .5); } " `) @@ -1019,7 +1028,7 @@ describe('theme(…)', () => { ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -1096,9 +1105,9 @@ describe('theme(…)', () => { ), ).toMatchInlineSnapshot(` " - @media (width >= 40rem) { + @media (min-width: 40rem) { .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] { - --color: #f00; + --color: red; } } " @@ -1155,7 +1164,7 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` " - @media (min-width:48rem) and (max-width: 64rem) { + @media (min-width: 48rem) and (max-width: 64rem) { .red { color: red; } @@ -1179,7 +1188,7 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` " - @media (width >= 48rem) and (width<64rem) { + @media (min-width: 48rem) and (not (min-width: 64rem)) { .red { color: red; } @@ -1204,8 +1213,7 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` " - @custom-media --my-media (min-width: 48rem); - @media (--my-media) { + @media (min-width: 48rem) { .red { color: red; } @@ -1228,7 +1236,7 @@ describe('theme(…)', () => { `), ).toMatchInlineSnapshot(` " - @container (width > 48rem) { + @container not (max-width: 48rem) { .red { color: red; } @@ -1306,18 +1314,18 @@ describe('in plugins', () => { ), ).toMatchInlineSnapshot(` " - @layer base, utilities; - @layer utilities { - .my-utility { - color: oklch(62% 0.25 30); - } - } @layer base { .my-base-rule { - color: oklch(62% 0.25 30); - outline-color: color-mix(in oklab, oklch(79% 0.17 70) 15%, transparent); - background-color: oklch(45% 0.31 264); - border-color: color-mix(in oklab, oklch(87% 0.07 7) 10%, transparent); + color: oklch(62% .25 30); + background-color: oklch(45% .31 264); + border-color: oklab(87% .069 .008 / .1); + outline-color: oklab(79% .058 .159 / .15); + } + } + + @layer utilities { + .my-utility { + color: oklch(62% .25 30); } } " @@ -1376,16 +1384,16 @@ describe('in JS config files', () => { ), ).toMatchInlineSnapshot(` " - @layer base, utilities; - @layer utilities { - .my-utility { - color: red; - } - } @layer base { .my-base-rule { - background: red; color: orange; + background: red; + } + } + + @layer utilities { + .my-utility { + color: red; } } " @@ -1419,7 +1427,7 @@ test('replaces CSS theme() function with values inside imported stylesheets', as ).toMatchInlineSnapshot(` " .red { - color: #f00; + color: red; } " `) @@ -1439,7 +1447,7 @@ test('resolves paths ending with a 1', async () => { ).toMatchInlineSnapshot(` " .foo { - margin: 0.25rem; + margin: .25rem; } " `) diff --git a/packages/tailwindcss/src/important.test.ts b/packages/tailwindcss/src/important.test.ts index 88baf62d7da6..677b1548141f 100644 --- a/packages/tailwindcss/src/important.test.ts +++ b/packages/tailwindcss/src/important.test.ts @@ -19,6 +19,7 @@ test('Utilities can be wrapped in a selector', async () => { #app .underline { text-decoration-line: underline; } + @media (hover: hover) { :is(#app .hover\\:line-through):hover { text-decoration-line: line-through; @@ -49,6 +50,7 @@ test('Utilities can be marked with important', async () => { .underline { text-decoration-line: underline !important; } + @media (hover: hover) { .hover\\:line-through:hover { text-decoration-line: line-through !important; @@ -77,6 +79,7 @@ test('Utilities can be wrapped with a selector and marked as important', async ( #app .underline { text-decoration-line: underline !important; } + @media (hover: hover) { :is(#app .hover\\:line-through):hover { text-decoration-line: line-through !important; @@ -99,27 +102,30 @@ test('variables in utilities should not be marked as important', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-ease: initial; + } + } + } + :root, :host { - --ease-out: cubic-bezier(0, 0, 0.2, 1); + --ease-out: cubic-bezier(0, 0, .2, 1); } + .z-10\\! { z-index: 10 !important; } + .ease-out\\! { --tw-ease: var(--ease-out) !important; transition-timing-function: var(--ease-out) !important; } + @property --tw-ease { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-ease: initial; - } - } + inherits: false } " `) diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 0a5df42681f5..6684f01f8e2a 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -30,20 +30,24 @@ describe('compiling CSS', () => { :root, :host { --color-black: #000; } + @layer utilities { .flex { display: flex; } + @media (hover: hover) { .hover\\:underline:hover { text-decoration-line: underline; } } - @media (width >= 768px) { + + @media (min-width: 768px) { .md\\:grid { display: grid; } } + @media (prefers-color-scheme: dark) { .dark\\:bg-black { background-color: var(--color-black); @@ -94,6 +98,7 @@ describe('compiling CSS', () => { .flex { display: flex; } + .grid { display: grid; } @@ -161,14 +166,17 @@ describe('compiling CSS', () => { --spacing-1_5: 1.5rem; --spacing-2_5: 2.5rem; } + .ml-\\[theme\\(--spacing-1_5\\,theme\\(--spacing-2_5\\,_1rem\\)\\)\\)\\] { margin-left: 1.5rem; } + .ml-\\[var\\(--spacing-1_5\\,_var\\(--spacing-2_5\\,_1rem\\)\\)\\] { margin-left: var(--spacing-1_5, var(--spacing-2_5, 1rem)); } + .bg-\\[no-repeat_url\\(\\.\\/my_file\\.jpg\\)\\] { - background-color: no-repeat url(./my_file.jpg); + background-color: no-repeat url("./my_file.jpg"); } " `) @@ -198,18 +206,19 @@ describe('compiling CSS', () => { --spacing-3\\.5: 3.5px; --spacing-foo\\/bar: 3rem; } + .m-1\\.5 { margin: var(--spacing-1\\.5); } - .m-2\\.5 { - margin: var(--spacing-2_5); - } - .m-2_5 { + + .m-2\\.5, .m-2_5 { margin: var(--spacing-2_5); } + .m-3\\.5 { margin: var(--spacing-3\\.5); } + .m-foo\\/bar { margin: var(--spacing-foo\\/bar); } @@ -221,6 +230,8 @@ describe('compiling CSS', () => { expect(await run(['[text-size-adjust:none]'])).toMatchInlineSnapshot(` " .\\[text-size-adjust\\:none\\] { + -webkit-text-size-adjust: none; + -moz-text-size-adjust: none; text-size-adjust: none; } " @@ -243,7 +254,7 @@ describe('arbitrary properties', () => { expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(` " .\\[color\\:red\\]\\/50 { - color: color-mix(in oklab, red 50%, transparent); + color: oklab(62.7955% .224 .125 / .5); } " `) @@ -259,6 +270,7 @@ describe('arbitrary properties', () => { .\\[color\\:var\\(--my-color\\)\\]\\/50 { color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .\\[color\\:var\\(--my-color\\)\\]\\/50 { color: color-mix(in oklab, var(--my-color) 50%, transparent); @@ -324,8 +336,9 @@ describe('@apply', () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .foo { padding: calc(var(--spacing) * 2); } @@ -361,7 +374,7 @@ describe('@apply', () => { ).toMatchInlineSnapshot(` " .foo { - padding: calc(var(--spacing, 0.25rem) * 2); + padding: calc(var(--spacing, .25rem) * 2); } " `) @@ -398,7 +411,16 @@ describe('@apply', () => { `), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + :root, :host { --color-red-200: #fecaca; --color-red-500: #ef4444; @@ -407,6 +429,7 @@ describe('@apply', () => { --color-green-500: #22c55e; --animate-spin: spin 1s linear infinite; } + .foo { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); @@ -414,53 +437,52 @@ describe('@apply', () => { background-color: var(--color-red-500); text-decoration-line: underline; } + @media (hover: hover) { .foo:hover { background-color: var(--color-blue-500); } } - @media (width >= 768px) { + + @media (min-width: 768px) { .foo { background-color: var(--color-green-500); } } + .foo:hover:focus { background-color: var(--color-red-200); } - @media (width >= 768px) { + + @media (min-width: 768px) { .foo:hover:focus { background-color: var(--color-green-200); } } + @property --tw-translate-x { 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; } + @keyframes spin { to { transform: rotate(360deg); } } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } " `) }) @@ -510,29 +532,24 @@ describe('@apply', () => { `), ).toMatchInlineSnapshot(` " - @layer properties; - .foo { - --tw-content: "a"; - --tw-content: "b"; - content: var(--tw-content); + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-content: ""; + } + } } - .bar { - --tw-content: "a"; + + .foo, .bar { --tw-content: "b"; content: var(--tw-content); } + @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-content: ""; - } - } - } " `) }) @@ -552,29 +569,32 @@ describe('@apply', () => { `), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-leading: initial; + } + } + } + .c1 { --tw-leading: 1; line-height: 1; } + .c2 { --tw-leading: 1 !important; line-height: 1 !important; } + .c3 { --tw-leading: 1; line-height: 1; } + @property --tw-leading { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-leading: initial; - } - } + inherits: false } " `) @@ -654,10 +674,11 @@ describe('@apply', () => { ).toMatchInlineSnapshot(` " .foo:before { - content: 'bar'; + content: "bar"; } + .foo:after { - content: 'baz'; + content: "baz"; } " `) @@ -695,21 +716,14 @@ describe('@apply', () => { ), ).toMatchInlineSnapshot(` " - .a:focus { + .a:focus, .b:focus, .c { display: flex !important; } - .b:focus { - display: flex !important; - } - .c { - display: flex !important; - } - .flex { - display: flex; - } - .my-flex { + + .flex, .my-flex { display: flex; } + @layer base { body:focus { display: flex !important; @@ -744,9 +758,11 @@ describe('@apply', () => { .custom-utility { display: flex; } + .ignore-me { text-decoration-line: underline; } + .ignore-me div { display: flex; } @@ -794,30 +810,39 @@ describe('@apply', () => { --color-red-500: red; --color-indigo-500: indigo; } + .test { background-color: var(--color-green-500); } + .test:hover { background-color: var(--color-red-500); } + .test:disabled { background-color: var(--color-indigo-500); } + .test2 { background-color: var(--color-green-500); } + .test2:hover { background-color: var(--color-red-500); } + .test2:disabled { background-color: var(--color-indigo-500); } + .foo { background-color: var(--color-green-500); } + .foo:hover { background-color: var(--color-red-500); } + .foo:disabled { background-color: var(--color-indigo-500); } @@ -851,12 +876,10 @@ describe('@apply', () => { ), ).toMatchInlineSnapshot(` " - .flex { - display: flex !important; - } - .flex-explicitly-important { + .flex, .flex-explicitly-important { display: flex !important; } + .flex-not-important { display: flex; } @@ -905,13 +928,18 @@ describe('@apply', () => { " .foo { text-decoration-line: underline; - @apply --my-mixin-1; - @apply --my-mixin-1(); - @apply --my-mixin-1 --my-mixin-2; - @apply --my-mixin-1() --my-mixin-2(); - @apply --my-mixin-3 { - color: red; - } + } + + @apply --my-mixin-1; + + @apply --my-mixin-1(); + + @apply --my-mixin-1 --my-mixin-2; + + @apply --my-mixin-1() --my-mixin-2(); + + @apply --my-mixin-3 { + color: red; } " `) @@ -968,7 +996,7 @@ describe('arbitrary variants', () => { it('should generate arbitrary at-rule variants', async () => { expect(await run(['[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(` " - @media (width>=123px) { + @media (min-width: 123px) { .\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex { display: flex; } @@ -987,7 +1015,7 @@ describe('variant stacking', () => { expect(await run(['focus:hover:flex'])).toMatchInlineSnapshot(` " @media (hover: hover) { - :is(.focus\\:hover\\:flex:focus):hover { + .focus\\:hover\\:flex:focus:hover { display: flex; } } @@ -1010,7 +1038,7 @@ describe('variant stacking', () => { it('should stack multiple arbitrary variants', async () => { expect(await run(['[&_p]:[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(` " - @media (width>=123px) { + @media (min-width: 123px) { .\\[\\&_p\\]\\:\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex p { display: flex; } @@ -1022,30 +1050,33 @@ describe('variant stacking', () => { it('pseudo element variants are re-ordered', async () => { expect(await run(['before:hover:flex', 'hover:before:flex'])).toMatchInlineSnapshot(` " - @layer properties; - .before\\:hover\\:flex::before { + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-content: ""; + } + } + } + + .before\\:hover\\:flex:before { content: var(--tw-content); } + @media (hover: hover) { - :is(.before\\:hover\\:flex::before):hover { + :is():hover { display: flex; } - :is(.hover\\:before\\:flex:hover)::before { + + .hover\\:before\\:flex:hover:before { content: var(--tw-content); display: flex; } } + @property --tw-content { syntax: "*"; - initial-value: ""; inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-content: ""; - } - } + initial-value: ""; } " `) @@ -1095,9 +1126,11 @@ describe('important', () => { :root, :host { --animate-spin: spin 1s linear infinite; } + .animate-spin\\! { animation: var(--animate-spin) !important; } + @keyframes spin { to { transform: rotate(360deg); @@ -1133,20 +1166,25 @@ describe('sorting', () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing-1: 0.25rem; + --spacing-1: .25rem; } + .pointer-events-none { pointer-events: none; } + .flex { display: flex; } + .p-1 { padding: var(--spacing-1); } + .px-1 { padding-inline: var(--spacing-1); } + .pl-1 { padding-left: var(--spacing-1); } @@ -1158,13 +1196,15 @@ describe('sorting', () => { expect(await run(['text-clip', 'truncate', 'overflow-scroll'])).toMatchInlineSnapshot(` " .truncate { - overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + overflow: hidden; } + .overflow-scroll { overflow: scroll; } + .text-clip { text-overflow: clip; } @@ -1192,35 +1232,39 @@ describe('sorting', () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-space-x-reverse: 0; + } + } + } + :root, :host { --spacing-0: 0px; - --spacing-2: 0.5rem; + --spacing-2: .5rem; --spacing-4: 1rem; } + .mx-0 { margin-inline: var(--spacing-0); } + .gap-4 { gap: var(--spacing-4); } + :where(.space-x-2 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(var(--spacing-2) * var(--tw-space-x-reverse)); margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse))); } + @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-space-x-reverse: 0; - } - } - } " `) }) @@ -1265,39 +1309,51 @@ describe('sorting', () => { --spacing-2: 2px; --spacing-3: 3px; } + .mx-3 { margin-inline: var(--spacing-3); } + .ms-1 { margin-inline-start: var(--spacing-1); } + .me-2 { margin-inline-end: var(--spacing-2); } + .scroll-mx-3 { scroll-margin-inline: var(--spacing-3); } + .scroll-ms-1 { scroll-margin-inline-start: var(--spacing-1); } + .scroll-me-2 { scroll-margin-inline-end: var(--spacing-2); } + .scroll-px-3 { scroll-padding-inline: var(--spacing-3); } + .scroll-ps-1 { scroll-padding-inline-start: var(--spacing-1); } + .scroll-pe-2 { scroll-padding-inline-end: var(--spacing-2); } + .px-3 { padding-inline: var(--spacing-3); } + .ps-1 { padding-inline-start: var(--spacing-1); } + .pe-2 { padding-inline-end: var(--spacing-2); } @@ -1317,14 +1373,17 @@ describe('sorting', () => { .pointer-events-none { pointer-events: none; } + .flex { display: flex; } + @media (hover: hover) { .hover\\:flex:hover { display: flex; } } + .focus\\:pointer-events-none:focus { pointer-events: none; } @@ -1359,19 +1418,23 @@ describe('sorting', () => { .flex { display: flex; } + @media (hover: hover) { .hover\\:flex:hover { display: flex; } } + .focus\\:flex:focus { display: flex; } + @media (hover: hover) { - :is(.hover\\:focus\\:flex:hover):focus { + .hover\\:focus\\:flex:hover:focus { display: flex; } } + .disabled\\:flex:disabled { display: flex; } @@ -1410,45 +1473,41 @@ describe('sorting', () => { display: flex; } } + .group-focus\\:flex:is(:where(.group):focus *) { display: flex; } + @media (hover: hover) { .peer-hover\\:flex:is(:where(.peer):hover ~ *) { display: flex; } + @media (hover: hover) { - :is(.group-hover\\:peer-hover\\:flex:is(:where(.group):hover *)):is(:where(.peer):hover ~ *) { - display: flex; - } - :is(.peer-hover\\:group-hover\\:flex:is(:where(.peer):hover ~ *)):is(:where(.group):hover *) { + .group-hover\\:peer-hover\\:flex:is(:where(.group):hover *):is(:where(.peer):hover ~ *), .peer-hover\\:group-hover\\:flex:is(:where(.peer):hover ~ *):is(:where(.group):hover *) { display: flex; } } - :is(.group-focus\\:peer-hover\\:flex:is(:where(.group):focus *)):is(:where(.peer):hover ~ *) { - display: flex; - } - :is(.peer-hover\\:group-focus\\:flex:is(:where(.peer):hover ~ *)):is(:where(.group):focus *) { + + .group-focus\\:peer-hover\\:flex:is(:where(.group):focus *):is(:where(.peer):hover ~ *), .peer-hover\\:group-focus\\:flex:is(:where(.peer):hover ~ *):is(:where(.group):focus *) { display: flex; } } + .peer-focus\\:flex:is(:where(.peer):focus ~ *) { display: flex; } + @media (hover: hover) { - :is(.group-hover\\:peer-focus\\:flex:is(:where(.group):hover *)):is(:where(.peer):focus ~ *) { + .group-hover\\:peer-focus\\:flex:is(:where(.group):hover *):is(:where(.peer):focus ~ *), .peer-focus\\:group-hover\\:flex:is(:where(.peer):focus ~ *):is(:where(.group):hover *) { display: flex; } - :is(.peer-focus\\:group-hover\\:flex:is(:where(.peer):focus ~ *)):is(:where(.group):hover *) { - display: flex; - } - } - :is(.group-focus\\:peer-focus\\:flex:is(:where(.group):focus *)):is(:where(.peer):focus ~ *) { - display: flex; } - :is(.peer-focus\\:group-focus\\:flex:is(:where(.peer):focus ~ *)):is(:where(.group):focus *) { + + .group-focus\\:peer-focus\\:flex:is(:where(.group):focus *):is(:where(.peer):focus ~ *), .peer-focus\\:group-focus\\:flex:is(:where(.peer):focus ~ *):is(:where(.group):focus *) { display: flex; } + @media (hover: hover) { .hover\\:flex:hover { display: flex; @@ -1479,14 +1538,16 @@ describe('sorting', () => { ).toMatchInlineSnapshot(` " :root, :host { - --text-sm: 0.875rem; - --text-sm--line-height: calc(1.25 / 0.875); + --text-sm: .875rem; + --text-sm--line-height: calc(1.25 / .875); } + .fancy-text { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); font-weight: var(--font-weight-bold); } + .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); @@ -1511,8 +1572,9 @@ describe('Parsing theme values from CSS', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: #f00; + --color-red-500: red; } + .accent-red-500 { accent-color: var(--color-red-500); } @@ -1537,6 +1599,7 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-red-500: #f10; } + .accent-red-500 { accent-color: var(--color-red-500); } @@ -1561,12 +1624,14 @@ describe('Parsing theme values from CSS', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: #f00; + --color-red-500: red; --color-blue-500: #00f; } + .accent-blue-500 { accent-color: var(--color-blue-500); } + .accent-red-500 { accent-color: var(--color-red-500); } @@ -1593,9 +1658,11 @@ describe('Parsing theme values from CSS', () => { --width-1\\/2: 75%; --width-75\\%: 50%; } + .w-1\\/2 { width: var(--width-1\\/2); } + .w-75\\% { width: var(--width-75\\%); } @@ -1637,9 +1704,11 @@ describe('Parsing theme values from CSS', () => { --color-red: red; --text-lg: 20px; } + .text-lg { font-size: var(--text-lg); } + .accent-red { accent-color: var(--color-red); } @@ -1673,14 +1742,13 @@ describe('Parsing theme values from CSS', () => { " :root, :host { --animate-very-long-animation-name: very-long-animation-name - var( - --very-long-animation-name-configuration, - 2.5s ease-in-out 0s infinite normal none running - ); + var(--very-long-animation-name-configuration, 2.5s ease-in-out 0s infinite normal none running); } + .animate-very-long-animation-name { animation: var(--animate-very-long-animation-name); } + @keyframes very-long-animation-name { to { opacity: 1; @@ -1727,9 +1795,11 @@ describe('Parsing theme values from CSS', () => { --text-sm: 13px; --color-green: #0f0; } + .text-sm { font-size: var(--text-sm); } + .accent-green { accent-color: var(--color-green); } @@ -1774,9 +1844,11 @@ describe('Parsing theme values from CSS', () => { --text-sm: 13px; --color-green: #0f0; } + .text-sm { font-size: var(--text-sm); } + .accent-green { accent-color: var(--color-green); } @@ -1809,6 +1881,7 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-green: #0f0; } + .accent-green { accent-color: var(--color-green); } @@ -1835,28 +1908,31 @@ describe('Parsing theme values from CSS', () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-font-weight: initial; + } + } + } + :root, :host { --font-weight-bold: bold; --font-body: Inter; } + .font-body { font-family: var(--font-body); } + .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } + @property --tw-font-weight { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-font-weight: initial; - } - } + inherits: false } " `) @@ -1881,102 +1957,118 @@ describe('Parsing theme values from CSS', () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + :root, :host { --inset-md: 50px; } + .inset-md { inset: var(--inset-md); } + .inset-shadow-sm { - --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05)); + --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, #0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-ring-inset { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0px; + initial-value: 0; } + @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } + @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } " `) }) @@ -2018,21 +2110,29 @@ describe('Parsing theme values from CSS', () => { --text-decoration-color-salad: yellow; --text-lg: 20px; } + .indent-potato { text-indent: var(--text-indent-potato); } + .text-lg { font-size: var(--text-lg); } + .text-potato { color: var(--text-color-potato); } + .decoration-salad { + -webkit-text-decoration-color: var(--text-decoration-color-salad); + -webkit-text-decoration-color: var(--text-decoration-color-salad); text-decoration-color: var(--text-decoration-color-salad); } + .decoration-potato { text-decoration-thickness: var(--text-decoration-thickness-potato); } + .underline-offset-potato { text-underline-offset: var(--text-underline-offset-potato); } @@ -2072,9 +2172,11 @@ describe('Parsing theme values from CSS', () => { :root, :host { --animate-foobar: foobar 1s infinite; } + .animate-foobar { animation: var(--animate-foobar); } + @keyframes foobar { to { opacity: 0; @@ -2114,9 +2216,11 @@ describe('Parsing theme values from CSS', () => { :root, :host { --animate-foo: used 1s infinite; } + .animate-foo { animation: var(--animate-foo); } + @keyframes used { to { opacity: 1; @@ -2156,9 +2260,11 @@ describe('Parsing theme values from CSS', () => { :root, :host { --tw-animate-foo: used 1s infinite; } + .tw\\:animate-foo { animation: var(--tw-animate-foo); } + @keyframes used { to { opacity: 1; @@ -2184,6 +2290,7 @@ describe('Parsing theme values from CSS', () => { :root, :host { --tw-color-tomato: #e10c04; } + .red { color: var(--tw-color-tomato); } @@ -2216,9 +2323,11 @@ describe('Parsing theme values from CSS', () => { :root, :host { --animate-foo: used 1s infinite; } + .animate-foo { animation: var(--animate-foo); } + @keyframes used { to { --other: var(--angle); @@ -2257,8 +2366,9 @@ describe('Parsing theme values from CSS', () => { ).toMatchInlineSnapshot(` " .animate-foo { - animation: used 1s infinite; + animation: 1s infinite used; } + @keyframes used { to { opacity: 1; @@ -2299,14 +2409,17 @@ describe('Parsing theme values from CSS', () => { --animate-foo: used 1s infinite; --animate-bar: unused-but-kept 1s infinite; } + .animate-foo { animation: var(--animate-foo); } + @keyframes used { to { opacity: 1; } } + @keyframes unused-but-kept { to { opacity: 0; @@ -2342,8 +2455,9 @@ describe('Parsing theme values from CSS', () => { ).toMatchInlineSnapshot(` " .foo { - animation: used 1s infinite; + animation: 1s infinite used; } + @keyframes used { to { opacity: 1; @@ -2378,17 +2492,20 @@ describe('Parsing theme values from CSS', () => { ).toMatchInlineSnapshot(` " :root, :host { - --animate-test: 500ms both fade-in, 1000ms linear 500ms spin infinite; + --animate-test: .5s both fade-in, 1s linear .5s spin infinite; } + .animate-test { animation: var(--animate-test); } + @keyframes fade-in { from { - opacity: 0%; + opacity: 0; } + to { - opacity: 100%; + opacity: 1; } } " @@ -2425,9 +2542,11 @@ describe('Parsing theme values from CSS', () => { opacity: 0; } } + .foo { - animation: used 1s infinite; + animation: 1s infinite used; } + @keyframes used { to { opacity: 1; @@ -2456,9 +2575,11 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-tomato: #e10c04; } + .bg-potato { background-color: var(--color-potato, #ac855b); } + .bg-tomato { background-color: var(--color-tomato); } @@ -2492,12 +2613,14 @@ describe('Parsing theme values from CSS', () => { .animate-foo { animation: var(--animate-foo, foo 1s infinite); } + @keyframes foo { 0%, 100% { color: red; } + 50% { - color: blue; + color: #00f; } } " @@ -2535,18 +2658,22 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-pink: pink; } + .animate-foo { animation: var(--animate-foo, foo 1s infinite); } + .bg-pink { background-color: var(--color-pink); } + @keyframes foo { 0%, 100% { color: red; } + 50% { - color: blue; + color: #00f; } } " @@ -2595,6 +2722,7 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-potato: #c794aa; } + .bg-potato { background-color: var(--color-potato); } @@ -2626,12 +2754,15 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-tomato: #e10c04; } + .bg-avocado { background-color: var(--color-avocado, #c0cc6d); } + .bg-potato { background-color: var(--color-potato, #ac855b); } + .bg-tomato { background-color: var(--color-tomato); } @@ -2671,6 +2802,7 @@ describe('Parsing theme values from CSS', () => { --color-potato: #ac855b; --color-primary: var(--primary); } + .bg-tomato { background-color: var(--color-tomato); } @@ -2718,9 +2850,11 @@ describe('Parsing theme values from CSS', () => { .bg-potato { background-color: #ac855b; } + .bg-primary { background-color: var(--primary); } + .bg-tomato { background-color: #e10c04; } @@ -2783,6 +2917,7 @@ describe('Parsing theme values from CSS', () => { --color-potato: #ac855b; --color-primary: var(--primary); } + .bg-tomato { background-color: var(--color-tomato); } @@ -2837,9 +2972,11 @@ describe('Parsing theme values from CSS', () => { .bg-potato { background-color: #ac855b; } + .bg-primary { background-color: var(--primary); } + .bg-tomato { background-color: #e10c04; } @@ -2866,9 +3003,11 @@ describe('Parsing theme values from CSS', () => { .bg-potato { background-color: #ac855b; } + .bg-primary { background-color: var(--primary); } + .bg-tomato { background-color: #e10c04; } @@ -2897,9 +3036,11 @@ describe('Parsing theme values from CSS', () => { .bg-potato { background-color: #ac855b; } + .bg-primary { background-color: var(--primary); } + .bg-tomato { background-color: #e10c04; } @@ -2927,6 +3068,7 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-potato: #ac855b; } + .bg-potato { background-color: var(--color-potato); } @@ -3023,9 +3165,11 @@ describe('Parsing theme values from CSS', () => { --color-potato: #ac855b; --color-tomato: tomato; } + .bg-potato { background-color: var(--color-potato); } + .bg-tomato { background-color: var(--color-tomato); } @@ -3071,9 +3215,11 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-orange: orange; } + .text-orange { color: var(--color-orange); } + .text-red { color: tomato; } @@ -3119,9 +3265,11 @@ describe('Parsing theme values from CSS', () => { :root, :host { --color-orange: orange; } + .text-orange { color: var(--color-orange); } + .text-red { color: tomato; } @@ -3167,9 +3315,11 @@ describe('Parsing theme values from CSS', () => { --var-three: var(--var-four); --var-two: var(--var-three); } + .get-var-b { color: var(--var-b); } + .get-var-two { color: var(--var-two); } @@ -3479,6 +3629,7 @@ describe('plugins', () => { .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { display: flex; } + .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } @@ -3510,16 +3661,11 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex:is(:where(.group):hover *) { - display: flex; - } - .group-hocus\\:flex:is(:where(.group):focus *) { + .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) { display: flex; } - .hocus\\:underline:hover { - text-decoration-line: underline; - } - .hocus\\:underline:focus { + + .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } } @@ -3553,16 +3699,11 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:flex:is(:where(.group):hover *) { - display: flex; - } - .group-hocus\\:flex:is(:where(.group):focus *) { + .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) { display: flex; } - .hocus\\:underline:hover { - text-decoration-line: underline; - } - .hocus\\:underline:focus { + + .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } } @@ -3603,14 +3744,17 @@ describe('plugins', () => { display: flex; } } + .group-hocus\\:flex:is(:where(.group):focus *) { display: flex; } + @media (hover: hover) { .hocus\\:underline:hover { text-decoration-line: underline; } } + .hocus\\:underline:focus { text-decoration-line: underline; } @@ -3651,10 +3795,8 @@ describe('plugins', () => { .hocus\\:underline { --custom-property: @slot; } - .hocus\\:underline:hover { - text-decoration-line: underline; - } - .hocus\\:underline:focus { + + .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } } @@ -3687,12 +3829,10 @@ describe('plugins', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { - display: flex; - } - .dark\\:flex:is([data-theme=dark] *) { + .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *), .dark\\:flex:is([data-theme="dark"] *) { display: flex; } + @starting-style { .starting\\:flex { display: flex; @@ -3784,48 +3924,59 @@ describe('@source', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-50: oklch(0.971 0.013 17.38); - --color-red-100: oklch(0.936 0.032 17.717); - --color-red-200: oklch(0.885 0.062 18.334); - --color-red-300: oklch(0.808 0.114 19.571); - --color-red-400: oklch(0.704 0.191 22.216); - --color-red-500: oklch(0.637 0.237 25.331); - --color-red-600: oklch(0.577 0.245 27.325); - --color-red-700: oklch(0.505 0.213 27.518); - --color-red-800: oklch(0.444 0.177 26.899); - --color-red-900: oklch(0.396 0.141 25.723); - --color-red-950: oklch(0.258 0.092 26.042); + --color-red-50: oklch(97.1% .013 17.38); + --color-red-100: oklch(93.6% .032 17.717); + --color-red-200: oklch(88.5% .062 18.334); + --color-red-300: oklch(80.8% .114 19.571); + --color-red-400: oklch(70.4% .191 22.216); + --color-red-500: oklch(63.7% .237 25.331); + --color-red-600: oklch(57.7% .245 27.325); + --color-red-700: oklch(50.5% .213 27.518); + --color-red-800: oklch(44.4% .177 26.899); + --color-red-900: oklch(39.6% .141 25.723); + --color-red-950: oklch(25.8% .092 26.042); } + .bg-red-50 { background-color: var(--color-red-50); } + .bg-red-100 { background-color: var(--color-red-100); } + .bg-red-200 { background-color: var(--color-red-200); } + .bg-red-300 { background-color: var(--color-red-300); } + .bg-red-400 { background-color: var(--color-red-400); } + .bg-red-500 { background-color: var(--color-red-500); } + .bg-red-600 { background-color: var(--color-red-600); } + .bg-red-700 { background-color: var(--color-red-700); } + .bg-red-800 { background-color: var(--color-red-800); } + .bg-red-900 { background-color: var(--color-red-900); } + .bg-red-950 { background-color: var(--color-red-950); } @@ -3846,15 +3997,18 @@ describe('@source', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-100: oklch(0.936 0.032 17.717); - --color-red-200: oklch(0.885 0.062 18.334); + --color-red-100: oklch(93.6% .032 17.717); + --color-red-200: oklch(88.5% .062 18.334); } + .block { display: block; } + .bg-red-100 { background-color: var(--color-red-100); } + .bg-red-200 { background-color: var(--color-red-200); } @@ -4073,6 +4227,7 @@ describe('@custom-variant', () => { .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { display: flex; } + .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } @@ -4126,12 +4281,14 @@ describe('@custom-variant', () => { :is(.cant-hover\\:focus\\:underline:not(:hover), .cant-hover\\:focus\\:underline:not(:active)):focus { text-decoration-line: underline; } - @media not (any-hover: hover) { + + @media not all and (any-hover: hover) { .cant-hover\\:focus\\:underline:focus { text-decoration-line: underline; } } - @media not (pointer: fine) { + + @media not all and (pointer: fine) { .cant-hover\\:focus\\:underline:focus { text-decoration-line: underline; } @@ -4162,10 +4319,7 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-selected\\:underline:is(:where(.group)[data-selected] *) { - text-decoration-line: underline; - } - .selected\\:underline[data-selected] { + .group-selected\\:underline:is(:where(.group)[data-selected] *), .selected\\:underline[data-selected] { text-decoration-line: underline; } } @@ -4191,12 +4345,9 @@ describe('@custom-variant', () => { `, ), ).toMatchInlineSnapshot(` - " - @layer utilities { - .group-hocus\\:underline:is(:is(:where(.group):hover, :where(.group):focus) *) { - text-decoration-line: underline; - } - .hocus\\:underline:hover, .hocus\\:underline:focus { + " + @layer utilities { + .group-hocus\\:underline:is(:is(:where(.group):hover, :where(.group):focus) *), .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } } @@ -4227,16 +4378,7 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .group-hocus\\:underline:is(:where(.group):hover *) { - text-decoration-line: underline; - } - .group-hocus\\:underline:is(:where(.group):focus *) { - text-decoration-line: underline; - } - .hocus\\:underline:hover { - text-decoration-line: underline; - } - .hocus\\:underline:focus { + .group-hocus\\:underline:is(:where(.group):hover *), .group-hocus\\:underline:is(:where(.group):focus *), .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } } @@ -4269,7 +4411,8 @@ describe('@custom-variant', () => { .custom-before\\:underline { --has-before: 1; } - .custom-before\\:underline::before { + + .custom-before\\:underline:before { text-decoration-line: underline; } } @@ -4305,7 +4448,8 @@ describe('@custom-variant', () => { .custom-before\\:underline { --has-before: 1; } - :is(.custom-before\\:underline::before):hover, :is(.custom-before\\:underline::before):focus { + + :is():hover, :is():focus { text-decoration-line: underline; } } @@ -4343,14 +4487,17 @@ describe('@custom-variant', () => { text-decoration-line: underline; } } + .group-hocus\\:underline:is(:where(.group):focus *) { text-decoration-line: underline; } + @media (hover: hover) { .hocus\\:underline:hover { text-decoration-line: underline; } } + .hocus\\:underline:focus { text-decoration-line: underline; } @@ -4381,10 +4528,7 @@ describe('@custom-variant', () => { " @layer utilities { @media (hover: hover) { - .group-hocus\\:underline:is(:where(.group):hover *) { - text-decoration-line: underline; - } - .hocus\\:underline:hover { + .group-hocus\\:underline:is(:where(.group):hover *), .hocus\\:underline:hover { text-decoration-line: underline; } } @@ -4450,6 +4594,7 @@ describe('@custom-variant', () => { text-decoration-line: underline; } } + @media (pointer: fine) { .desktop\\:underline { text-decoration-line: underline; @@ -4491,6 +4636,7 @@ describe('@custom-variant', () => { text-decoration-line: underline; } } + @media print { .custom-variant\\:underline { display: none; @@ -4529,6 +4675,7 @@ describe('@custom-variant', () => { text-decoration-line: underline; } } + .custom-dark\\:underline:is(.dark *) { text-decoration-line: underline; } @@ -4554,12 +4701,10 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { - display: flex; - } - .dark\\:flex:is([data-theme='dark'] *) { + .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *), .dark\\:flex:is([data-theme="dark"] *) { display: flex; } + @starting-style { .starting\\:flex { display: flex; @@ -4590,6 +4735,7 @@ describe('@custom-variant', () => { display: flex; } } + @media foo { .foo\\:flex { display: flex; @@ -4619,7 +4765,7 @@ describe('@custom-variant', () => { ).toMatchInlineSnapshot(` " @media (hover: hover) { - :is(.hocus\\:flex:hover):focus { + .hocus\\:flex:hover:focus { display: flex; } } @@ -4647,7 +4793,7 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - :is(.hocus\\:flex:hover):focus { + .hocus\\:flex:hover:focus { display: flex; } " @@ -4674,7 +4820,7 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - :is(.hocus\\:flex:hover):focus { + .hocus\\:flex:hover:focus { display: flex; } " @@ -4759,16 +4905,7 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .a\\:flex { - display: flex; - } - .b\\:flex { - display: flex; - } - .a\\:b\\:flex { - display: flex; - } - .b\\:a\\:flex { + .a\\:flex, .b\\:flex, .a\\:b\\:flex, .b\\:a\\:flex { display: flex; } " @@ -4801,16 +4938,7 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - .a\\:flex .a { - display: flex; - } - :is(:is(.b\\:flex .b) .a) .a-inside-b { - display: flex; - } - :is(:is(:is(.a\\:b\\:flex .a) .b) .a) .a-inside-b { - display: flex; - } - :is(:is(:is(.b\\:a\\:flex .b) .a) .a-inside-b) .a { + .a\\:flex .a, :is(:is(.b\\:flex .b) .a) .a-inside-b, :is(:is(:is(.a\\:b\\:flex .a) .b) .a) .a-inside-b, :is(:is(:is(.b\\:a\\:flex .b) .a) .a-inside-b) .a { display: flex; } " @@ -4846,10 +4974,7 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - :is(.hocus\\:flex:hover):focus { - display: flex; - } - :is(.hocus\\:flex[data-hover]):focus { + .hocus\\:flex:hover:focus, .hocus\\:flex[data-hover]:focus { display: flex; } " @@ -4893,7 +5018,7 @@ describe('@custom-variant', () => { ), ).toMatchInlineSnapshot(` " - [data-broken-circle] :is(.baz\\:flex:active) { + [data-broken-circle] .baz\\:flex:active { display: flex; } " @@ -4958,10 +5083,7 @@ describe('@utility', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .push-1\\/2 { - right: 50%; - } - .push-50\\% { + .push-1\\/2, .push-50\\% { right: 50%; } } @@ -5010,8 +5132,8 @@ describe('@utility', () => { ` " .ui\\/button { + background: #00f; display: inline-flex; - background: blue; } " `, @@ -5058,17 +5180,17 @@ test('addBase', async () => { ), ).toMatchInlineSnapshot(` " - @layer base, utilities; - @layer utilities { - .underline { - text-decoration-line: underline; - } - } @layer base { body { font-feature-settings: "tnum"; } } + + @layer utilities { + .underline { + text-decoration-line: underline; + } + } " `) }) @@ -5101,27 +5223,29 @@ test('JS APIs support @variant', async () => { ), ).toMatchInlineSnapshot(` " - @layer base, utilities; + @layer base { + @media (prefers-color-scheme: dark) { + body { + color: red; + } + } + } + @layer utilities { .underline { text-decoration-line: underline; } + @media (prefers-color-scheme: dark) { .bar-one { --bar: 1; } + .foo { --foo: foo; } } } - @layer base { - @media (prefers-color-scheme: dark) { - body { - color: red; - } - } - } " `) }) @@ -5194,7 +5318,7 @@ describe('`@reference "…" imports`', () => { ), ).toMatchInlineSnapshot(` " - @media (width >= 768px) { + @media (min-width: 768px) { .bar:hover, .bar:focus { color: red; } @@ -5315,6 +5439,7 @@ describe('`@reference "…" imports`', () => { .bar { animation: var(--animate-spin, spin 1s linear infinite); } + @keyframes spin { to { transform: rotate(360deg); @@ -5390,10 +5515,12 @@ describe('`@reference "…" imports`', () => { animation: var(--animate-wiggle, wiggle 1s ease-in-out infinite); color: var(--color-red, red); } + @keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } + 50% { transform: rotate(3deg); } @@ -5435,7 +5562,7 @@ describe('`@reference "…" imports`', () => { ), ).toMatchInlineSnapshot(` " - @media (width >= 768px) { + @media (min-width: 768px) { .bar:hover, .bar:focus { color: red; } @@ -5468,7 +5595,7 @@ describe('`@reference "…" imports`', () => { `), ).toMatchInlineSnapshot(` " - @media (width >= 48rem) { + @media (min-width: 48rem) { .bar:hover, .bar:focus { color: red; } @@ -5516,10 +5643,7 @@ describe('@variant', () => { ), ).toMatchInlineSnapshot(` " - .hocus\\:underline:hover { - text-decoration-line: underline; - } - .hocus\\:underline:focus { + .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } " @@ -5572,39 +5696,42 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: black; + background: #000; } + @media (prefers-color-scheme: dark) { .btn { - background: white; + background: #fff; } } + @media (hover: hover) { @media (orientation: landscape) { - :is(:scope:hover) .btn2 { + :scope:hover .btn2 { color: red; } } - :is(:scope:hover) .foo { + + :scope:hover .foo { color: red; } + @media (orientation: landscape) { - :is(:scope:hover) .bar { - color: blue; + :scope:hover .bar { + color: #00f; } } + @media (orientation: portrait) { - :is(:scope:hover) .baz { + :scope:hover .baz { color: green; } } } + @media something { @media (orientation: landscape) { @page { - :scope { - color: red; - } } } } @@ -5628,10 +5755,11 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: black; + background: #000; } + .btn:hover, .btn:focus { - background: white; + background: #fff; } " `) @@ -5657,12 +5785,14 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: black; + background: #000; } - :is(.btn:disabled):focus { - background: white; + + .btn:disabled:focus { + background: #fff; } - :is(.disabled\\:focus\\:underline:disabled):focus { + + .disabled\\:focus\\:underline:disabled:focus { text-decoration-line: underline; } " @@ -5685,13 +5815,15 @@ describe('@variant', () => { expect(await compileCss(input)).toMatchInlineSnapshot(` " .btn { - background: black; + background: #000; } + @media (hover: hover) { .btn:hover { background: red; } } + .btn:focus { background: red; } @@ -5739,13 +5871,15 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: black; + background: #000; } + @media (hover: hover) { .btn:hover { background: red; } } + .btn:focus { background: red; } @@ -5769,12 +5903,10 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: black; - } - .btn:is(:hover, :focus) { - background: red; + background: #000; } - .btn:disabled { + + .btn:is(:hover, :focus), .btn:disabled { background: red; } " @@ -5800,27 +5932,25 @@ describe('@variant', () => { expect(await compileCss(input)).toMatchInlineSnapshot(` " .btn { - background: black; + background: #000; } + @media (hover: hover) { .btn:hover { background: red; } - :is(.btn:hover):active { - background: blue; - } - :is(.btn:hover):disabled { - background: blue; + + .btn:hover:active, .btn:hover:disabled { + background: #00f; } } + .btn:focus { background: red; } - :is(.btn:focus):active { - background: blue; - } - :is(.btn:focus):disabled { - background: blue; + + .btn:focus:active, .btn:focus:disabled { + background: #00f; } " `) @@ -5910,10 +6040,11 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: black; + background: #000; } + @media (hover: hover) { - :is(.btn:hover):focus { + .btn:hover:focus { background: red; } } @@ -5936,13 +6067,15 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: black; + background: #000; } + @media (hover: hover) { - :is(.btn:hover):focus { + .btn:hover:focus { background: red; } } + .btn:disabled { background: red; } @@ -5965,13 +6098,15 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: black; + background: #000; } - :is(.btn:is(:hover, :focus)):disabled { + + .btn:is(:hover, :focus):disabled { background: red; } + @media (hover: hover) { - :is(.btn[aria-disabled="true"]):hover { + .btn[aria-disabled="true"]:hover { background: red; } } @@ -5999,25 +6134,23 @@ describe('@variant', () => { expect(await compileCss(input)).toMatchInlineSnapshot(` " .btn { - background: black; + background: #000; } + .btn[data-a] { background: red; } - :is(.btn[data-a])[data-d] { - background: blue; - } - :is(:is(.btn[data-a])[data-e])[data-f] { - background: blue; + + .btn[data-a][data-d], .btn[data-a][data-e][data-f] { + background: #00f; } - :is(.btn[data-b])[data-c] { + + .btn[data-b][data-c] { background: red; } - :is(:is(.btn[data-b])[data-c])[data-d] { - background: blue; - } - :is(:is(:is(.btn[data-b])[data-c])[data-e])[data-f] { - background: blue; + + .btn[data-b][data-c][data-d], .btn[data-b][data-c][data-e][data-f] { + background: #00f; } " `) @@ -6082,11 +6215,12 @@ describe('@variant', () => { ).toMatchInlineSnapshot(` " .btn { - background: black; + background: #000; } - @container (width >= 768px) { + + @container (min-width: 768px) { .btn.foo { - background: white; + background: #fff; } } " @@ -6109,11 +6243,13 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-500: oklch(63.7% .237 25.331); } + .text-red-500\\/50 { - color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent); + color: #fb2c3680; } + @supports (color: color-mix(in lab, red, red)) { .text-red-500\\/50 { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); @@ -6139,11 +6275,13 @@ describe('`color-mix(…)` polyfill', () => { " :root, :host { --color-red: var(--color-red-500); - --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-500: oklch(63.7% .237 25.331); } + .text-red\\/50 { - color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent); + color: #fb2c3680; } + @supports (color: color-mix(in lab, red, red)) { .text-red\\/50 { color: color-mix(in oklab, var(--color-red) 50%, transparent); @@ -6168,12 +6306,14 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% 0.237 25.331); - --color-orange-500: oklch(70.5% 0.213 47.604); + --color-red-500: oklch(63.7% .237 25.331); + --color-orange-500: oklch(70.5% .213 47.604); } + .mixed { - color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, oklch(70.5% 0.213 47.604)); + color: #fc4d1b; } + @supports (color: color-mix(in lab, red, red)) { .mixed { color: color-mix(in lch, var(--color-red-500) 50%, var(--color-orange-500)); @@ -6201,14 +6341,16 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-500: oklch(63.7% .237 25.331); } + .stacked { - color: color-mix( in lch, color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent) 50%, transparent ); + color: lch(55.5764% 89.7903 33.1932 / .25098); } + @supports (color: color-mix(in lab, red, red)) { .stacked { - color: color-mix( in lch, color-mix(in lch, var(--color-red-500) 50%, transparent) 50%, transparent ); + color: color-mix(in lch, color-mix(in lch, var(--color-red-500) 50%, transparent) 50%, transparent); } } " @@ -6235,15 +6377,17 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% 0.237 25.331); - --color-orange-500: oklch(70.5% 0.213 47.604); + --color-red-500: oklch(63.7% .237 25.331); + --color-orange-500: oklch(70.5% .213 47.604); } + .gradient { - background: linear-gradient( 90deg, color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent) 0%, color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent) 0%, 100% ); + background: linear-gradient(90deg, #fb2c3680 0%, #fe6e0080 0%, 100%); } + @supports (color: color-mix(in lab, red, red)) { .gradient { - background: linear-gradient( 90deg, color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%, color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%, 100% ); + background: linear-gradient(90deg, color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%, color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%, 100%); } } " @@ -6267,11 +6411,13 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-500: oklch(63.7% .237 25.331); } + .text-red-500\\/50 { - color: color-mix(in srgb,oklch(63.7% 0.237 25.331)50%,transparent); + color: #fb2c3680; } + @supports (color: color-mix(in lab, red, red)) { .text-red-500\\/50 { color: color-mix(in oklab,var(--color-red-500)50%,transparent); @@ -6295,27 +6441,33 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " :root, :host { - --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-500: oklch(63.7% .237 25.331); } + .text-\\(--my-color\\)\\/\\(--my-opacity\\) { color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .text-\\(--my-color\\)\\/\\(--my-opacity\\) { color: color-mix(in oklab, var(--my-color) var(--my-opacity), transparent); } } + .text-\\(--my-color\\)\\/50 { color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .text-\\(--my-color\\)\\/50 { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .text-red-500\\/\\(--my-opacity\\) { - color: oklch(63.7% 0.237 25.331); + color: oklch(63.7% .237 25.331); } + @supports (color: color-mix(in lab, red, red)) { .text-red-500\\/\\(--my-opacity\\) { color: color-mix(in oklab, var(--color-red-500) var(--my-opacity), transparent); @@ -6329,8 +6481,9 @@ describe('`color-mix(…)` polyfill', () => { expect(await run(['text-current/50'])).toMatchInlineSnapshot(` " .text-current\\/50 { - color: currentcolor; + color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .text-current\\/50 { color: color-mix(in oklab, currentcolor 50%, transparent); @@ -6356,11 +6509,13 @@ describe('`color-mix(…)` polyfill', () => { .text-red\\/50 { color: var(--color-red); } + @supports (color: color-mix(in lab, red, red)) { .text-red\\/50 { color: color-mix(in oklab, var(--color-red) 50%, transparent); } } + :root, :host { --color-red: var(--my-red); } @@ -6386,9 +6541,10 @@ describe('`color-mix(…)` polyfill', () => { .stacked { color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .stacked { - color: color-mix( in oklab, color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent) var(--my-outer-opacity), transparent ); + color: color-mix(in oklab, color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent) var(--my-outer-opacity), transparent); } } " @@ -6409,7 +6565,7 @@ describe('`color-mix(…)` polyfill', () => { ).toMatchInlineSnapshot(` " .text-red-500\\/50 { - color: color-mix(in oklab, oklch(63.7% 0.237 25.331) 50%, transparent); + color: oklab(63.7% .214 .101 / .5); } " `) @@ -6431,11 +6587,13 @@ describe('`color-mix(…)` polyfill', () => { " :root, :host { --my-half: 50%; - --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-500: oklch(63.7% .237 25.331); } + .text-red-500\\/\\(--my-half\\) { - color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent); + color: #fb2c3680; } + @supports (color: color-mix(in lab, red, red)) { .text-red-500\\/\\(--my-half\\) { color: color-mix(in oklab, var(--color-red-500) var(--my-half), transparent); @@ -6462,115 +6620,134 @@ describe('`color-mix(…)` polyfill', () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + @layer theme { :root, :host { --color-red-500: red; --opacity-disabled: 50%; } } + .text-red-500 { color: var(--color-red-500); } + .opacity-disabled { opacity: var(--opacity-disabled); } + .shadow-xl { - --tw-shadow: 0 6px 18px 4px var(--tw-shadow-color, color-mix(in srgb, red 25%, transparent)); + --tw-shadow: 0 6px 18px 4px var(--tw-shadow-color, #ff000040); } + @supports (color: color-mix(in lab, red, red)) { .shadow-xl { --tw-shadow: 0 6px 18px 4px var(--tw-shadow-color, color-mix(in oklab, var(--color-red-500) 25%, transparent)); } } + .shadow-xl { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-ring-inset { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0px; + initial-value: 0; } + @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } + @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } " `) }) @@ -6627,37 +6804,41 @@ describe('`@property` polyfill', async () => { `), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + :root, :host { + --inherit-no-value: initial; + --inherit-value: red; + } + + *, :before, :after, ::backdrop { + --no-inherit-no-value: initial; + --no-inherit-value: red; + } + } + } + @property --no-inherit-no-value { - syntax: '*'; - inherits: false; + syntax: "*"; + inherits: false } + @property --no-inherit-value { - syntax: '*'; + syntax: "*"; inherits: false; initial-value: red; } + @property --inherit-no-value { - syntax: '*'; - inherits: true; + syntax: "*"; + inherits: true } + @property --inherit-value { - syntax: '*'; + syntax: "*"; inherits: true; initial-value: red; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - :root, :host { - --inherit-no-value: initial; - --inherit-value: red; - } - *, ::before, ::after, ::backdrop { - --no-inherit-no-value: initial; - --no-inherit-value: red; - } - } - } " `) }) @@ -6694,20 +6875,23 @@ describe('`@property` polyfill', async () => { ).toMatchInlineSnapshot(` " @property --no-inherit-no-value { - syntax: '*'; - inherits: false; + syntax: "*"; + inherits: false } + @property --no-inherit-value { - syntax: '*'; + syntax: "*"; inherits: false; initial-value: red; } + @property --inherit-no-value { - syntax: '*'; - inherits: true; + syntax: "*"; + inherits: true } + @property --inherit-value { - syntax: '*'; + syntax: "*"; inherits: true; initial-value: red; } diff --git a/packages/tailwindcss/src/prefix.test.ts b/packages/tailwindcss/src/prefix.test.ts index 00d6bc27b830..799cb22fe27b 100644 --- a/packages/tailwindcss/src/prefix.test.ts +++ b/packages/tailwindcss/src/prefix.test.ts @@ -32,16 +32,16 @@ test('utilities must be prefixed', async () => { .tw\\:custom { color: red; } + .tw\\:underline { text-decoration-line: underline; } + @media (hover: hover) { - .tw\\:group-hover\\:flex:is(:where(.tw\\:group):hover *) { - display: flex; - } - .tw\\:peer-hover\\:flex:is(:where(.tw\\:peer):hover ~ *) { + .tw\\:group-hover\\:flex:is(:where(.tw\\:group):hover *), .tw\\:peer-hover\\:flex:is(:where(.tw\\:peer):hover ~ *) { display: flex; } + .tw\\:hover\\:line-through:hover { text-decoration-line: line-through; } @@ -103,8 +103,9 @@ test('CSS variables output by the theme are prefixed', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --tw-color-red: #f00; + --tw-color-red: red; } + .tw\\:text-red { color: var(--tw-color-red); } @@ -128,11 +129,8 @@ test('CSS theme functions do not use the prefix', async () => { ), ).toMatchInlineSnapshot(` " - .tw\\:\\[color\\:theme\\(--color-red\\)\\] { - color: #f00; - } - .tw\\:text-\\[theme\\(--color-red\\)\\] { - color: #f00; + .tw\\:\\[color\\:theme\\(--color-red\\)\\], .tw\\:text-\\[theme\\(--color-red\\)\\] { + color: red; } " `) @@ -190,7 +188,7 @@ test('JS theme functions do not use the prefix', async () => { ).toMatchInlineSnapshot(` " .tw\\:my-custom { - color: #f00; + color: red; } " `) @@ -232,12 +230,15 @@ test('a prefix can be configured via @import theme(…)', async () => { .tw\\:bg-potato { background-color: var(--tw-color-potato, #7a4724); } + .tw\\:custom { color: red; } + .tw\\:underline { text-decoration-line: underline; } + @media (hover: hover) { .tw\\:hover\\:line-through:hover { text-decoration-line: line-through; @@ -285,15 +286,19 @@ test('a prefix can be configured via @import prefix(…)', async () => { :root, :host { --tw-color-potato: #7a4724; } + .tw\\:bg-potato { background-color: var(--tw-color-potato); } + .tw\\:custom { color: red; } + .tw\\:underline { text-decoration-line: underline; } + @media (hover: hover) { .tw\\:hover\\:line-through:hover { text-decoration-line: line-through; diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index 8d75b28fa5a8..7667ca66fa2c 100644 --- a/packages/tailwindcss/src/test-utils/run.ts +++ b/packages/tailwindcss/src/test-utils/run.ts @@ -1,4 +1,5 @@ import { compile } from '..' +import { optimize } from '../../../@tailwindcss-node/src/optimize' const css = String.raw @@ -10,7 +11,7 @@ export async function run( options: Parameters[1] = {}, ) { let { build } = await compile(input, options) - return pretty(build(candidates)) + return pretty(optimize(build(candidates)).code) } export async function compileCss(css: string, options: Parameters[1] = {}) { diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 80097430b576..d83b12827041 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -9,15 +9,15 @@ test('sr-only', async () => { expect(await run(['sr-only'])).toMatchInlineSnapshot(` " .sr-only { - position: absolute; + clip-path: inset(50%); + white-space: nowrap; + border-width: 0; width: 1px; height: 1px; - padding: 0; margin: -1px; + padding: 0; + position: absolute; overflow: hidden; - clip-path: inset(50%); - white-space: nowrap; - border-width: 0; } " `) @@ -28,14 +28,14 @@ test('not-sr-only', async () => { expect(await run(['not-sr-only'])).toMatchInlineSnapshot(` " .not-sr-only { - position: static; + clip-path: none; + white-space: normal; width: auto; height: auto; - padding: 0; margin: 0; + padding: 0; + position: static; overflow: visible; - clip-path: none; - white-space: normal; } " `) @@ -48,6 +48,7 @@ test('pointer-events', async () => { .pointer-events-auto { pointer-events: auto; } + .pointer-events-none { pointer-events: none; } @@ -69,9 +70,11 @@ test('visibility', async () => { .collapse { visibility: collapse; } + .invisible { visibility: hidden; } + .visible { visibility: visible; } @@ -95,15 +98,19 @@ test('position', async () => { .absolute { position: absolute; } + .fixed { position: fixed; } + .relative { position: relative; } + .static { position: static; } + .sticky { position: sticky; } @@ -150,124 +157,147 @@ test('inset', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + :root, :host { --spacing-4: 1rem; --inset-shadowned: 1940px; } + .-inset-4 { inset: calc(var(--spacing-4) * -1); } + .-inset-full { inset: -100%; } + .inset-3\\/4 { - inset: calc(3 / 4 * 100%); + inset: 75%; } + .inset-4 { inset: var(--spacing-4); } + .inset-\\[4px\\] { inset: 4px; } + .inset-auto { inset: auto; } + .inset-full { inset: 100%; } + .inset-shadowned { inset: var(--inset-shadowned); } + .inset-shadow-sm { - --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05)); + --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, #0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-ring-inset { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0px; + initial-value: 0; } + @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } + @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } " `) expect( @@ -315,27 +345,35 @@ test('inset-x', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } + .-inset-x-4 { inset-inline: calc(var(--spacing-4) * -1); } + .-inset-x-full { inset-inline: -100%; } + .inset-x-3\\/4 { - inset-inline: calc(3 / 4 * 100%); + inset-inline: 75%; } + .inset-x-4 { inset-inline: var(--spacing-4); } + .inset-x-\\[4px\\] { inset-inline: 4px; } + .inset-x-auto { inset-inline: auto; } + .inset-x-full { inset-inline: 100%; } + .inset-x-shadowned { inset-inline: var(--inset-shadowned); } @@ -396,27 +434,35 @@ test('inset-y', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } + .-inset-y-4 { inset-block: calc(var(--spacing-4) * -1); } + .-inset-y-full { inset-block: -100%; } + .inset-y-3\\/4 { - inset-block: calc(3 / 4 * 100%); + inset-block: 75%; } + .inset-y-4 { inset-block: var(--spacing-4); } + .inset-y-\\[4px\\] { inset-block: 4px; } + .inset-y-auto { inset-block: auto; } + .inset-y-full { inset-block: 100%; } + .inset-y-shadowned { inset-block: var(--inset-shadowned); } @@ -477,27 +523,35 @@ test('inset-s', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } + .-inset-s-4 { inset-inline-start: calc(var(--spacing-4) * -1); } + .-inset-s-full { inset-inline-start: -100%; } + .inset-s-3\\/4 { - inset-inline-start: calc(3 / 4 * 100%); + inset-inline-start: 75%; } + .inset-s-4 { inset-inline-start: var(--spacing-4); } + .inset-s-\\[4px\\] { inset-inline-start: 4px; } + .inset-s-auto { inset-inline-start: auto; } + .inset-s-full { inset-inline-start: 100%; } + .inset-s-shadowned { inset-inline-start: var(--inset-shadowned); } @@ -558,27 +612,35 @@ test('inset-e', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } + .-inset-e-4 { inset-inline-end: calc(var(--spacing-4) * -1); } + .-inset-e-full { inset-inline-end: -100%; } + .inset-e-3\\/4 { - inset-inline-end: calc(3 / 4 * 100%); + inset-inline-end: 75%; } + .inset-e-4 { inset-inline-end: var(--spacing-4); } + .inset-e-\\[4px\\] { inset-inline-end: 4px; } + .inset-e-auto { inset-inline-end: auto; } + .inset-e-full { inset-inline-end: 100%; } + .inset-e-shadowned { inset-inline-end: var(--inset-shadowned); } @@ -639,27 +701,35 @@ test('inset-bs', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } + .-inset-bs-4 { inset-block-start: calc(var(--spacing-4) * -1); } + .-inset-bs-full { inset-block-start: -100%; } + .inset-bs-3\\/4 { - inset-block-start: calc(3 / 4 * 100%); + inset-block-start: 75%; } + .inset-bs-4 { inset-block-start: var(--spacing-4); } + .inset-bs-\\[4px\\] { inset-block-start: 4px; } + .inset-bs-auto { inset-block-start: auto; } + .inset-bs-full { inset-block-start: 100%; } + .inset-bs-shadowned { inset-block-start: var(--inset-shadowned); } @@ -720,27 +790,35 @@ test('inset-be', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } + .-inset-be-4 { inset-block-end: calc(var(--spacing-4) * -1); } + .-inset-be-full { inset-block-end: -100%; } + .inset-be-3\\/4 { - inset-block-end: calc(3 / 4 * 100%); + inset-block-end: 75%; } + .inset-be-4 { inset-block-end: var(--spacing-4); } + .inset-be-\\[4px\\] { inset-block-end: 4px; } + .inset-be-auto { inset-block-end: auto; } + .inset-be-full { inset-block-end: 100%; } + .inset-be-shadowned { inset-block-end: var(--inset-shadowned); } @@ -801,27 +879,35 @@ test('top', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } + .-top-4 { top: calc(var(--spacing-4) * -1); } + .-top-full { top: -100%; } + .top-3\\/4 { - top: calc(3 / 4 * 100%); + top: 75%; } + .top-4 { top: var(--spacing-4); } + .top-\\[4px\\] { top: 4px; } + .top-auto { top: auto; } + .top-full { top: 100%; } + .top-shadowned { top: var(--inset-shadowned); } @@ -882,27 +968,35 @@ test('right', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } + .-right-4 { right: calc(var(--spacing-4) * -1); } + .-right-full { right: -100%; } + .right-3\\/4 { - right: calc(3 / 4 * 100%); + right: 75%; } + .right-4 { right: var(--spacing-4); } + .right-\\[4px\\] { right: 4px; } + .right-auto { right: auto; } + .right-full { right: 100%; } + .right-shadowned { right: var(--inset-shadowned); } @@ -963,27 +1057,35 @@ test('bottom', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } + .-bottom-4 { bottom: calc(var(--spacing-4) * -1); } + .-bottom-full { bottom: -100%; } + .bottom-3\\/4 { - bottom: calc(3 / 4 * 100%); + bottom: 75%; } + .bottom-4 { bottom: var(--spacing-4); } + .bottom-\\[4px\\] { bottom: 4px; } + .bottom-auto { bottom: auto; } + .bottom-full { bottom: 100%; } + .bottom-shadowned { bottom: var(--inset-shadowned); } @@ -1047,30 +1149,39 @@ test('left', async () => { --spacing-4: 1rem; --inset-shadowned: 1940px; } + .-left-4 { left: calc(var(--spacing-4) * -1); } + .-left-\\[\\(var\\(--my-var1\\)\\+var\\(--my-var2\\)\\)\\] { left: calc((var(--my-var1) + var(--my-var2)) * -1); } + .-left-full { left: -100%; } + .left-3\\/4 { - left: calc(3 / 4 * 100%); + left: 75%; } + .left-4 { left: var(--spacing-4); } + .left-\\[4px\\] { left: 4px; } + .left-auto { left: auto; } + .left-full { left: 100%; } + .left-shadowned { left: var(--inset-shadowned); } @@ -1110,6 +1221,7 @@ test('isolation', async () => { .isolate { isolation: isolate; } + .isolation-auto { isolation: auto; } @@ -1127,15 +1239,19 @@ test('z-index', async () => { .-z-10 { z-index: calc(10 * -1); } + .-z-\\[var\\(--value\\)\\] { z-index: calc(var(--value) * -1); } + .z-10 { z-index: 10; } + .z-\\[123\\] { z-index: 123; } + .z-auto { z-index: auto; } @@ -1171,6 +1287,7 @@ test('z-index', async () => { :root, :host { --z-index-auto: 42; } + .z-auto { z-index: var(--z-index-auto); } @@ -1194,21 +1311,27 @@ test('order', async () => { .-order-4 { order: calc(4 * -1); } + .-order-\\[var\\(--value\\)\\] { order: calc(var(--value) * -1); } + .order-4 { order: 4; } + .order-\\[123\\] { order: 123; } + .order-first { order: -9999; } + .order-last { order: 9999; } + .order-none { order: 0; } @@ -1248,6 +1371,7 @@ test('order', async () => { :root, :host { --order-first: 1; } + .order-first { order: var(--order-first); } @@ -1269,6 +1393,7 @@ test('order', async () => { :root, :host { --order-last: -1; } + .order-last { order: var(--order-last); } @@ -1293,24 +1418,31 @@ test('col', async () => { .-col-12 { grid-column: calc(12 * -1); } + .col-11 { grid-column: 11; } + .col-\\[span_123\\/span_123\\] { - grid-column: span 123/span 123; + grid-column: span 123 / span 123; } + .col-auto { grid-column: auto; } + .col-span-4 { grid-column: span 4 / span 4; } + .col-span-17 { grid-column: span 17 / span 17; } + .col-span-\\[var\\(--my-variable\\)\\] { grid-column: span var(--my-variable) / span var(--my-variable); } + .col-span-full { grid-column: 1 / -1; } @@ -1347,6 +1479,7 @@ test('col', async () => { :root, :host { --grid-column-auto: 5; } + .col-auto { grid-column: var(--grid-column-auto); } @@ -1377,21 +1510,27 @@ test('col-start', async () => { :root, :host { --grid-column-start-custom: 1 column-start; } + .-col-start-4 { grid-column-start: calc(4 * -1); } + .col-start-4 { grid-column-start: 4; } + .col-start-99 { grid-column-start: 99; } + .col-start-\\[123\\] { grid-column-start: 123; } + .col-start-auto { grid-column-start: auto; } + .col-start-custom { grid-column-start: var(--grid-column-start-custom); } @@ -1425,6 +1564,7 @@ test('col-start', async () => { :root, :host { --grid-column-start-auto: 7; } + .col-start-auto { grid-column-start: var(--grid-column-start-auto); } @@ -1448,21 +1588,27 @@ test('col-end', async () => { :root, :host { --grid-column-end-custom: 1 column-end; } + .-col-end-4 { grid-column-end: calc(4 * -1); } + .col-end-4 { grid-column-end: 4; } + .col-end-99 { grid-column-end: 99; } + .col-end-\\[123\\] { grid-column-end: 123; } + .col-end-auto { grid-column-end: auto; } + .col-end-custom { grid-column-end: var(--grid-column-end-custom); } @@ -1496,6 +1642,7 @@ test('col-end', async () => { :root, :host { --grid-column-end-auto: 3; } + .col-end-auto { grid-column-end: var(--grid-column-end-auto); } @@ -1520,24 +1667,31 @@ test('row', async () => { .-row-12 { grid-row: calc(12 * -1); } + .row-11 { grid-row: 11; } + .row-\\[span_123\\/span_123\\] { - grid-row: span 123/span 123; + grid-row: span 123 / span 123; } + .row-auto { grid-row: auto; } + .row-span-4 { grid-row: span 4 / span 4; } + .row-span-17 { grid-row: span 17 / span 17; } + .row-span-\\[var\\(--my-variable\\)\\] { grid-row: span var(--my-variable) / span var(--my-variable); } + .row-span-full { grid-row: 1 / -1; } @@ -1581,6 +1735,7 @@ test('row', async () => { :root, :host { --grid-row-auto: 9; } + .row-auto { grid-row: var(--grid-row-auto); } @@ -1611,21 +1766,27 @@ test('row-start', async () => { :root, :host { --grid-row-start-custom: 1 row-start; } + .-row-start-4 { grid-row-start: calc(4 * -1); } + .row-start-4 { grid-row-start: 4; } + .row-start-99 { grid-row-start: 99; } + .row-start-\\[123\\] { grid-row-start: 123; } + .row-start-auto { grid-row-start: auto; } + .row-start-custom { grid-row-start: var(--grid-row-start-custom); } @@ -1659,6 +1820,7 @@ test('row-start', async () => { :root, :host { --grid-row-start-auto: 11; } + .row-start-auto { grid-row-start: var(--grid-row-start-auto); } @@ -1682,21 +1844,27 @@ test('row-end', async () => { :root, :host { --grid-row-end-custom: 1 row-end; } + .-row-end-4 { grid-row-end: calc(4 * -1); } + .row-end-4 { grid-row-end: 4; } + .row-end-99 { grid-row-end: 99; } + .row-end-\\[123\\] { grid-row-end: 123; } + .row-end-auto { grid-row-end: auto; } + .row-end-custom { grid-row-end: var(--grid-row-end-custom); } @@ -1730,6 +1898,7 @@ test('row-end', async () => { :root, :host { --grid-row-end-auto: 13; } + .row-end-auto { grid-row-end: var(--grid-row-end-auto); } @@ -1744,15 +1913,19 @@ test('float', async () => { .float-end { float: inline-end; } + .float-left { float: left; } + .float-none { float: none; } + .float-right { float: right; } + .float-start { float: inline-start; } @@ -1790,18 +1963,23 @@ test('clear', async () => { .clear-both { clear: both; } + .clear-end { clear: inline-end; } + .clear-left { clear: left; } + .clear-none { clear: none; } + .clear-right { clear: right; } + .clear-start { clear: inline-start; } @@ -1842,18 +2020,23 @@ test('margin', async () => { :root, :host { --spacing-4: 1rem; } + .-m-4 { margin: calc(var(--spacing-4) * -1); } + .-m-\\[var\\(--value\\)\\] { margin: calc(var(--value) * -1); } + .m-4 { margin: var(--spacing-4); } + .m-\\[4px\\] { margin: 4px; } + .m-auto { margin: auto; } @@ -1891,39 +2074,50 @@ test('mx', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .-mx-4 { margin-inline: calc(var(--spacing) * -4); } + .-mx-\\[4px\\] { - margin-inline: calc(4px * -1); + margin-inline: -4px; } + .-mx-\\[var\\(--my-var\\)\\] { margin-inline: calc(var(--my-var) * -1); } + .-mx-big { margin-inline: calc(var(--spacing-big) * -1); } + .mx-1 { margin-inline: calc(var(--spacing) * 1); } + .mx-4 { margin-inline: calc(var(--spacing) * 4); } + .mx-99 { margin-inline: calc(var(--spacing) * 99); } + .mx-\\[4px\\] { margin-inline: 4px; } + .mx-\\[var\\(--my-var\\)\\] { margin-inline: var(--my-var); } + .mx-auto { margin-inline: auto; } + .mx-big { margin-inline: var(--spacing-big); } @@ -1968,39 +2162,50 @@ test('my', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .-my-2\\.5 { margin-block: calc(var(--spacing) * -2.5); } + .-my-4 { margin-block: calc(var(--spacing) * -4); } + .-my-\\[4px\\] { - margin-block: calc(4px * -1); + margin-block: -4px; } + .-my-\\[var\\(--my-var\\)\\] { margin-block: calc(var(--my-var) * -1); } + .-my-big { margin-block: calc(var(--spacing-big) * -1); } + .my-1 { margin-block: calc(var(--spacing) * 1); } + .my-2\\.5 { margin-block: calc(var(--spacing) * 2.5); } + .my-99 { margin-block: calc(var(--spacing) * 99); } + .my-\\[4px\\] { margin-block: 4px; } + .my-\\[var\\(--my-var\\)\\] { margin-block: var(--my-var); } + .my-big { margin-block: var(--spacing-big); } @@ -2045,39 +2250,50 @@ test('mt', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .-mt-2\\.5 { margin-top: calc(var(--spacing) * -2.5); } + .-mt-4 { margin-top: calc(var(--spacing) * -4); } + .-mt-\\[4px\\] { - margin-top: calc(4px * -1); + margin-top: -4px; } + .-mt-\\[var\\(--my-var\\)\\] { margin-top: calc(var(--my-var) * -1); } + .-mt-big { margin-top: calc(var(--spacing-big) * -1); } + .mt-1 { margin-top: calc(var(--spacing) * 1); } + .mt-2\\.5 { margin-top: calc(var(--spacing) * 2.5); } + .mt-99 { margin-top: calc(var(--spacing) * 99); } + .mt-\\[4px\\] { margin-top: 4px; } + .mt-\\[var\\(--my-var\\)\\] { margin-top: var(--my-var); } + .mt-big { margin-top: var(--spacing-big); } @@ -2122,39 +2338,50 @@ test('ms', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .-ms-2\\.5 { margin-inline-start: calc(var(--spacing) * -2.5); } + .-ms-4 { margin-inline-start: calc(var(--spacing) * -4); } + .-ms-\\[4px\\] { - margin-inline-start: calc(4px * -1); + margin-inline-start: -4px; } + .-ms-\\[var\\(--my-var\\)\\] { margin-inline-start: calc(var(--my-var) * -1); } + .-ms-big { margin-inline-start: calc(var(--spacing-big) * -1); } + .ms-1 { margin-inline-start: calc(var(--spacing) * 1); } + .ms-2\\.5 { margin-inline-start: calc(var(--spacing) * 2.5); } + .ms-99 { margin-inline-start: calc(var(--spacing) * 99); } + .ms-\\[4px\\] { margin-inline-start: 4px; } + .ms-\\[var\\(--my-var\\)\\] { margin-inline-start: var(--my-var); } + .ms-big { margin-inline-start: var(--spacing-big); } @@ -2199,39 +2426,50 @@ test('me', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .-me-2\\.5 { margin-inline-end: calc(var(--spacing) * -2.5); } + .-me-4 { margin-inline-end: calc(var(--spacing) * -4); } + .-me-\\[4px\\] { - margin-inline-end: calc(4px * -1); + margin-inline-end: -4px; } + .-me-\\[var\\(--my-var\\)\\] { margin-inline-end: calc(var(--my-var) * -1); } + .-me-big { margin-inline-end: calc(var(--spacing-big) * -1); } + .me-1 { margin-inline-end: calc(var(--spacing) * 1); } + .me-2\\.5 { margin-inline-end: calc(var(--spacing) * 2.5); } + .me-99 { margin-inline-end: calc(var(--spacing) * 99); } + .me-\\[4px\\] { margin-inline-end: 4px; } + .me-\\[var\\(--my-var\\)\\] { margin-inline-end: var(--my-var); } + .me-big { margin-inline-end: var(--spacing-big); } @@ -2276,39 +2514,50 @@ test('mbs', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .-mbs-2\\.5 { margin-block-start: calc(var(--spacing) * -2.5); } + .-mbs-4 { margin-block-start: calc(var(--spacing) * -4); } + .-mbs-\\[4px\\] { - margin-block-start: calc(4px * -1); + margin-block-start: -4px; } + .-mbs-\\[var\\(--my-var\\)\\] { margin-block-start: calc(var(--my-var) * -1); } + .-mbs-big { margin-block-start: calc(var(--spacing-big) * -1); } + .mbs-1 { margin-block-start: calc(var(--spacing) * 1); } + .mbs-2\\.5 { margin-block-start: calc(var(--spacing) * 2.5); } + .mbs-99 { margin-block-start: calc(var(--spacing) * 99); } + .mbs-\\[4px\\] { margin-block-start: 4px; } + .mbs-\\[var\\(--my-var\\)\\] { margin-block-start: var(--my-var); } + .mbs-big { margin-block-start: var(--spacing-big); } @@ -2353,39 +2602,50 @@ test('mbe', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .-mbe-2\\.5 { margin-block-end: calc(var(--spacing) * -2.5); } + .-mbe-4 { margin-block-end: calc(var(--spacing) * -4); } + .-mbe-\\[4px\\] { - margin-block-end: calc(4px * -1); + margin-block-end: -4px; } + .-mbe-\\[var\\(--my-var\\)\\] { margin-block-end: calc(var(--my-var) * -1); } + .-mbe-big { margin-block-end: calc(var(--spacing-big) * -1); } + .mbe-1 { margin-block-end: calc(var(--spacing) * 1); } + .mbe-2\\.5 { margin-block-end: calc(var(--spacing) * 2.5); } + .mbe-99 { margin-block-end: calc(var(--spacing) * 99); } + .mbe-\\[4px\\] { margin-block-end: 4px; } + .mbe-\\[var\\(--my-var\\)\\] { margin-block-end: var(--my-var); } + .mbe-big { margin-block-end: var(--spacing-big); } @@ -2430,39 +2690,50 @@ test('mr', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .-mr-2\\.5 { margin-right: calc(var(--spacing) * -2.5); } + .-mr-4 { margin-right: calc(var(--spacing) * -4); } + .-mr-\\[4px\\] { - margin-right: calc(4px * -1); + margin-right: -4px; } + .-mr-\\[var\\(--my-var\\)\\] { margin-right: calc(var(--my-var) * -1); } + .-mr-big { margin-right: calc(var(--spacing-big) * -1); } + .mr-1 { margin-right: calc(var(--spacing) * 1); } + .mr-2\\.5 { margin-right: calc(var(--spacing) * 2.5); } + .mr-99 { margin-right: calc(var(--spacing) * 99); } + .mr-\\[4px\\] { margin-right: 4px; } + .mr-\\[var\\(--my-var\\)\\] { margin-right: var(--my-var); } + .mr-big { margin-right: var(--spacing-big); } @@ -2507,39 +2778,50 @@ test('mb', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .-mb-2\\.5 { margin-bottom: calc(var(--spacing) * -2.5); } + .-mb-4 { margin-bottom: calc(var(--spacing) * -4); } + .-mb-\\[4px\\] { - margin-bottom: calc(4px * -1); + margin-bottom: -4px; } + .-mb-\\[var\\(--my-var\\)\\] { margin-bottom: calc(var(--my-var) * -1); } + .-mb-big { margin-bottom: calc(var(--spacing-big) * -1); } + .mb-1 { margin-bottom: calc(var(--spacing) * 1); } + .mb-2\\.5 { margin-bottom: calc(var(--spacing) * 2.5); } + .mb-99 { margin-bottom: calc(var(--spacing) * 99); } + .mb-\\[4px\\] { margin-bottom: 4px; } + .mb-\\[var\\(--my-var\\)\\] { margin-bottom: var(--my-var); } + .mb-big { margin-bottom: var(--spacing-big); } @@ -2584,39 +2866,50 @@ test('ml', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .-ml-2\\.5 { margin-left: calc(var(--spacing) * -2.5); } + .-ml-4 { margin-left: calc(var(--spacing) * -4); } + .-ml-\\[4px\\] { - margin-left: calc(4px * -1); + margin-left: -4px; } + .-ml-\\[var\\(--my-var\\)\\] { margin-left: calc(var(--my-var) * -1); } + .-ml-big { margin-left: calc(var(--spacing-big) * -1); } + .ml-1 { margin-left: calc(var(--spacing) * 1); } + .ml-2\\.5 { margin-left: calc(var(--spacing) * 2.5); } + .ml-99 { margin-left: calc(var(--spacing) * 99); } + .ml-\\[4px\\] { margin-left: 4px; } + .ml-\\[var\\(--my-var\\)\\] { margin-left: var(--my-var); } + .ml-big { margin-left: var(--spacing-big); } @@ -2650,30 +2943,39 @@ test('margin sort order', async () => { :root, :host { --spacing-4: 1rem; } + .m-4 { margin: var(--spacing-4); } + .mx-4 { margin-inline: var(--spacing-4); } + .my-4 { margin-block: var(--spacing-4); } + .ms-4 { margin-inline-start: var(--spacing-4); } + .me-4 { margin-inline-end: var(--spacing-4); } + .mt-4 { margin-top: var(--spacing-4); } + .mr-4 { margin-right: var(--spacing-4); } + .mb-4 { margin-bottom: var(--spacing-4); } + .ml-4 { margin-left: var(--spacing-4); } @@ -2701,6 +3003,7 @@ test('box-sizing', async () => { .box-border { box-sizing: border-box; } + .box-content { box-sizing: content-box; } @@ -2716,28 +3019,31 @@ test('line-clamp', async () => { .toMatchInlineSnapshot(` " .line-clamp-4 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; } + .line-clamp-99 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; -webkit-line-clamp: 99; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; } + .line-clamp-\\[123\\] { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; -webkit-line-clamp: 123; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; } + .line-clamp-none { - overflow: visible; - display: block; - -webkit-box-orient: horizontal; -webkit-line-clamp: unset; + -webkit-box-orient: horizontal; + display: block; + overflow: visible; } " `) @@ -2772,11 +3078,12 @@ test('line-clamp', async () => { :root, :host { --line-clamp-none: 0; } + .line-clamp-none { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-clamp-none); + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; } " `) @@ -2812,63 +3119,83 @@ test('display', async () => { .block { display: block; } + .contents { display: contents; } + .flex { display: flex; } + .flow-root { display: flow-root; } + .grid { display: grid; } + .hidden { display: none; } + .inline { display: inline; } + .inline-block { display: inline-block; } + .inline-flex { display: inline-flex; } + .inline-grid { display: inline-grid; } + .inline-table { display: inline-table; } + .list-item { display: list-item; } + .table { display: table; } + .table-caption { display: table-caption; } + .table-cell { display: table-cell; } + .table-column { display: table-column; } + .table-column-group { display: table-column-group; } + .table-footer-group { display: table-footer-group; } + .table-header-group { display: table-header-group; } + .table-row { display: table-row; } + .table-row-group { display: table-row-group; } @@ -2928,6 +3255,7 @@ test('field-sizing', async () => { .field-sizing-content { field-sizing: content; } + .field-sizing-fixed { field-sizing: fixed; } @@ -2954,15 +3282,19 @@ test('aspect-ratio', async () => { :root, :host { --aspect-video: 16 / 9; } + .aspect-4\\/3 { - aspect-ratio: 4/3; + aspect-ratio: 4 / 3; } + .aspect-8\\.5\\/11 { - aspect-ratio: 8.5/11; + aspect-ratio: 8.5 / 11; } + .aspect-\\[10\\/9\\] { - aspect-ratio: 10/9; + aspect-ratio: 10 / 9; } + .aspect-video { aspect-ratio: var(--aspect-video); } @@ -3011,34 +3343,42 @@ test('size', async () => { :root, :host { --spacing-4: 1rem; } + .size-1\\/2 { - width: calc(1 / 2 * 100%); - height: calc(1 / 2 * 100%); + width: 50%; + height: 50%; } + .size-4 { width: var(--spacing-4); height: var(--spacing-4); } + .size-\\[4px\\] { width: 4px; height: 4px; } + .size-auto { width: auto; height: auto; } + .size-fit { width: fit-content; height: fit-content; } + .size-full { width: 100%; height: 100%; } + .size-max { width: max-content; height: max-content; } + .size-min { width: min-content; height: min-content; @@ -3099,42 +3439,55 @@ test('width', async () => { --spacing-4: 1rem; --width-xl: 36rem; } + .w-1\\/2 { - width: calc(1 / 2 * 100%); + width: 50%; } + .w-4 { width: var(--spacing-4); } + .w-\\[4px\\] { width: 4px; } + .w-auto { width: auto; } + .w-dvw { width: 100dvw; } + .w-fit { width: fit-content; } + .w-full { width: 100%; } + .w-lvw { width: 100lvw; } + .w-max { width: max-content; } + .w-min { width: min-content; } + .w-screen { width: 100vw; } + .w-svw { width: 100svw; } + .w-xl { width: var(--width-xl); } @@ -3194,27 +3547,35 @@ test('min-width', async () => { --spacing-4: 1rem; --container-xl: 36rem; } + .min-w-4 { min-width: var(--spacing-4); } + .min-w-\\[4px\\] { min-width: 4px; } + .min-w-auto { min-width: auto; } + .min-w-fit { min-width: fit-content; } + .min-w-full { min-width: 100%; } + .min-w-max { min-width: max-content; } + .min-w-min { min-width: min-content; } + .min-w-xl { min-width: var(--container-xl); } @@ -3255,24 +3616,31 @@ test('max-width', async () => { --spacing-4: 1rem; --container-xl: 36rem; } + .max-w-4 { max-width: var(--spacing-4); } + .max-w-\\[4px\\] { max-width: 4px; } + .max-w-fit { max-width: fit-content; } + .max-w-full { max-width: 100%; } + .max-w-max { max-width: max-content; } + .max-w-none { max-width: none; } + .max-w-xl { max-width: var(--container-xl); } @@ -3326,42 +3694,55 @@ test('height', async () => { :root, :host { --spacing-4: 1rem; } + .h-1\\/2 { - height: calc(1 / 2 * 100%); + height: 50%; } + .h-4 { height: var(--spacing-4); } + .h-\\[4px\\] { height: 4px; } + .h-auto { height: auto; } + .h-dvh { height: 100dvh; } + .h-fit { height: fit-content; } + .h-full { height: 100%; } + .h-lh { height: 1lh; } + .h-lvh { height: 100lvh; } + .h-max { height: max-content; } + .h-min { height: min-content; } + .h-screen { height: 100vh; } + .h-svh { height: 100svh; } @@ -3423,39 +3804,51 @@ test('min-height', async () => { :root, :host { --spacing-4: 1rem; } + .min-h-4 { min-height: var(--spacing-4); } + .min-h-\\[4px\\] { min-height: 4px; } + .min-h-auto { min-height: auto; } + .min-h-dvh { min-height: 100dvh; } + .min-h-fit { min-height: fit-content; } + .min-h-full { min-height: 100%; } + .min-h-lh { min-height: 1lh; } + .min-h-lvh { min-height: 100lvh; } + .min-h-max { min-height: max-content; } + .min-h-min { min-height: min-content; } + .min-h-screen { min-height: 100vh; } + .min-h-svh { min-height: 100svh; } @@ -3511,39 +3904,51 @@ test('max-height', async () => { :root, :host { --spacing-4: 1rem; } + .max-h-4 { max-height: var(--spacing-4); } + .max-h-\\[4px\\] { max-height: 4px; } + .max-h-dvh { max-height: 100dvh; } + .max-h-fit { max-height: fit-content; } + .max-h-full { max-height: 100%; } + .max-h-lh { max-height: 1lh; } + .max-h-lvh { max-height: 100lvh; } + .max-h-max { max-height: max-content; } + .max-h-min { max-height: min-content; } + .max-h-none { max-height: none; } + .max-h-screen { max-height: 100vh; } + .max-h-svh { max-height: 100svh; } @@ -3603,42 +4008,55 @@ test('inline-size', async () => { --spacing-4: 1rem; --container-xl: 36rem; } + .inline-1\\/2 { - inline-size: calc(1 / 2 * 100%); + inline-size: 50%; } + .inline-4 { inline-size: var(--spacing-4); } + .inline-\\[4px\\] { inline-size: 4px; } + .inline-auto { inline-size: auto; } + .inline-dvw { inline-size: 100dvw; } + .inline-fit { inline-size: fit-content; } + .inline-full { inline-size: 100%; } + .inline-lvw { inline-size: 100lvw; } + .inline-max { inline-size: max-content; } + .inline-min { inline-size: min-content; } + .inline-screen { inline-size: 100vw; } + .inline-svw { inline-size: 100svw; } + .inline-xl { inline-size: var(--container-xl); } @@ -3697,27 +4115,35 @@ test('min-inline-size', async () => { --spacing-4: 1rem; --container-xl: 36rem; } + .min-inline-4 { min-inline-size: var(--spacing-4); } + .min-inline-\\[4px\\] { min-inline-size: 4px; } + .min-inline-auto { min-inline-size: auto; } + .min-inline-fit { min-inline-size: fit-content; } + .min-inline-full { min-inline-size: 100%; } + .min-inline-max { min-inline-size: max-content; } + .min-inline-min { min-inline-size: min-content; } + .min-inline-xl { min-inline-size: var(--container-xl); } @@ -3766,24 +4192,31 @@ test('max-inline-size', async () => { --spacing-4: 1rem; --container-xl: 36rem; } + .max-inline-4 { max-inline-size: var(--spacing-4); } + .max-inline-\\[4px\\] { max-inline-size: 4px; } + .max-inline-fit { max-inline-size: fit-content; } + .max-inline-full { max-inline-size: 100%; } + .max-inline-max { max-inline-size: max-content; } + .max-inline-none { max-inline-size: none; } + .max-inline-xl { max-inline-size: var(--container-xl); } @@ -3837,42 +4270,55 @@ test('block-size', async () => { :root, :host { --spacing-4: 1rem; } + .block-1\\/2 { - block-size: calc(1 / 2 * 100%); + block-size: 50%; } + .block-4 { block-size: var(--spacing-4); } + .block-\\[4px\\] { block-size: 4px; } + .block-auto { block-size: auto; } + .block-dvh { block-size: 100dvh; } + .block-fit { block-size: fit-content; } + .block-full { block-size: 100%; } + .block-lh { block-size: 1lh; } + .block-lvh { block-size: 100lvh; } + .block-max { block-size: max-content; } + .block-min { block-size: min-content; } + .block-screen { block-size: 100vh; } + .block-svh { block-size: 100svh; } @@ -3933,39 +4379,51 @@ test('min-block-size', async () => { :root, :host { --spacing-4: 1rem; } + .min-block-4 { min-block-size: var(--spacing-4); } + .min-block-\\[4px\\] { min-block-size: 4px; } + .min-block-auto { min-block-size: auto; } + .min-block-dvh { min-block-size: 100dvh; } + .min-block-fit { min-block-size: fit-content; } + .min-block-full { min-block-size: 100%; } + .min-block-lh { min-block-size: 1lh; } + .min-block-lvh { min-block-size: 100lvh; } + .min-block-max { min-block-size: max-content; } + .min-block-min { min-block-size: min-content; } + .min-block-screen { min-block-size: 100vh; } + .min-block-svh { min-block-size: 100svh; } @@ -4021,39 +4479,51 @@ test('max-block-size', async () => { :root, :host { --spacing-4: 1rem; } + .max-block-4 { max-block-size: var(--spacing-4); } + .max-block-\\[4px\\] { max-block-size: 4px; } + .max-block-dvh { max-block-size: 100dvh; } + .max-block-fit { max-block-size: fit-content; } + .max-block-full { max-block-size: 100%; } + .max-block-lh { max-block-size: 1lh; } + .max-block-lvh { max-block-size: 100lvh; } + .max-block-max { max-block-size: max-content; } + .max-block-min { max-block-size: min-content; } + .max-block-none { max-block-size: none; } + .max-block-screen { max-block-size: 100vh; } + .max-block-svh { max-block-size: 100svh; } @@ -4102,37 +4572,45 @@ describe('container', () => { :root, :host { --breakpoint-sm: 40rem; } + .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; } } + .w-1\\/2 { - width: calc(1 / 2 * 100%); + width: 50%; } + .max-w-\\[var\\(--breakpoint-sm\\)\\] { max-width: var(--breakpoint-sm); } @@ -4162,37 +4640,44 @@ describe('container', () => { .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; } @@ -4230,46 +4715,56 @@ describe('container', () => { :root, :host { --breakpoint-sm: 40rem; } + .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; } } + .container { margin-inline: auto; padding-inline: 1rem; } - @media (width >= 40rem) { + + @media (min-width: 40rem) { .container { padding-inline: 2rem; } } + .w-1\\/2 { - width: calc(1 / 2 * 100%); + width: 50%; } + .max-w-\\[var\\(--breakpoint-sm\\)\\] { max-width: var(--breakpoint-sm); } @@ -4294,21 +4789,27 @@ test('flex', async () => { .flex-1 { flex: 1; } + .flex-1\\/2 { - flex: calc(1/2 * 100%); + flex: 50%; } + .flex-99 { flex: 99; } + .flex-\\[123\\] { flex: 123; } + .flex-auto { flex: auto; } + .flex-initial { flex: 0 auto; } + .flex-none { flex: none; } @@ -4343,9 +4844,11 @@ test('flex-shrink', async () => { .shrink { flex-shrink: 1; } + .shrink-0 { flex-shrink: 0; } + .shrink-\\[123\\] { flex-shrink: 123; } @@ -4372,9 +4875,11 @@ test('flex-grow', async () => { .grow { flex-grow: 1; } + .grow-0 { flex-grow: 0; } + .grow-\\[123\\] { flex-grow: 123; } @@ -4411,18 +4916,23 @@ test('flex-basis', async () => { :root, :host { --container-xl: 36rem; } + .basis-11\\/12 { - flex-basis: calc(11 / 12 * 100%); + flex-basis: 91.6667%; } + .basis-\\[123px\\] { flex-basis: 123px; } + .basis-auto { flex-basis: auto; } + .basis-full { flex-basis: 100%; } + .basis-xl { flex-basis: var(--container-xl); } @@ -4452,6 +4962,7 @@ test('table-layout', async () => { .table-auto { table-layout: auto; } + .table-fixed { table-layout: fixed; } @@ -4468,6 +4979,7 @@ test('caption-side', async () => { .caption-bottom { caption-side: bottom; } + .caption-top { caption-side: top; } @@ -4484,6 +4996,7 @@ test('border-collapse', async () => { .border-collapse { border-collapse: collapse; } + .border-separate { border-collapse: separate; } @@ -4512,38 +5025,42 @@ test('border-spacing', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + } + } + } + :root, :host { - --spacing-1: 0.25rem; + --spacing-1: .25rem; } + .border-spacing-1 { --tw-border-spacing-x: var(--spacing-1); --tw-border-spacing-y: var(--spacing-1); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } + .border-spacing-\\[123px\\] { --tw-border-spacing-x: 123px; --tw-border-spacing-y: 123px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } + @property --tw-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } + @property --tw-border-spacing-y { syntax: ""; inherits: false; initial-value: 0; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - } - } - } " `) expect( @@ -4570,36 +5087,40 @@ test('border-spacing-x', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + } + } + } + :root, :host { - --spacing-1: 0.25rem; + --spacing-1: .25rem; } + .border-spacing-x-1 { --tw-border-spacing-x: var(--spacing-1); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } + .border-spacing-x-\\[123px\\] { --tw-border-spacing-x: 123px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } + @property --tw-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } + @property --tw-border-spacing-y { syntax: ""; inherits: false; initial-value: 0; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - } - } - } " `) expect( @@ -4626,36 +5147,40 @@ test('border-spacing-y', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + } + } + } + :root, :host { - --spacing-1: 0.25rem; + --spacing-1: .25rem; } + .border-spacing-y-1 { --tw-border-spacing-y: var(--spacing-1); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } + .border-spacing-y-\\[123px\\] { --tw-border-spacing-y: 123px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } + @property --tw-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } + @property --tw-border-spacing-y { syntax: ""; inherits: false; initial-value: 0; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - } - } - } " `) expect( @@ -4689,33 +5214,43 @@ test('origin', async () => { .origin-\\[50px_100px\\] { transform-origin: 50px 100px; } + .origin-\\[var\\(--value\\)\\] { transform-origin: var(--value); } + .origin-bottom { transform-origin: bottom; } + .origin-bottom-left { transform-origin: 0 100%; } + .origin-bottom-right { transform-origin: 100% 100%; } + .origin-center { transform-origin: center; } + .origin-left { transform-origin: 0; } + .origin-right { transform-origin: 100%; } + .origin-top { transform-origin: top; } + .origin-top-left { transform-origin: 0 0; } + .origin-top-right { transform-origin: 100% 0; } @@ -4754,6 +5289,7 @@ test('origin', async () => { :root, :host { --transform-origin-top: 10px 20px; } + .origin-top { transform-origin: var(--transform-origin-top); } @@ -4781,33 +5317,43 @@ test('perspective-origin', async () => { .perspective-origin-\\[50px_100px\\] { perspective-origin: 50px 100px; } + .perspective-origin-\\[var\\(--value\\)\\] { perspective-origin: var(--value); } + .perspective-origin-bottom { perspective-origin: bottom; } + .perspective-origin-bottom-left { perspective-origin: 0 100%; } + .perspective-origin-bottom-right { perspective-origin: 100% 100%; } + .perspective-origin-center { perspective-origin: center; } + .perspective-origin-left { perspective-origin: 0; } + .perspective-origin-right { perspective-origin: 100%; } + .perspective-origin-top { perspective-origin: top; } + .perspective-origin-top-left { perspective-origin: 0 0; } + .perspective-origin-top-right { perspective-origin: 100% 0; } @@ -4846,6 +5392,7 @@ test('perspective-origin', async () => { :root, :host { --perspective-origin-top: 10px 20px; } + .perspective-origin-top { perspective-origin: var(--perspective-origin-top); perspective: var(--perspective-origin-top); @@ -4865,56 +5412,63 @@ test('translate', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + .-translate-\\[var\\(--value\\)\\] { --tw-translate-x: calc(var(--value) * -1); --tw-translate-y: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } + .-translate-full { --tw-translate-x: -100%; --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-1\\/2 { --tw-translate-x: calc(1 / 2 * 100%); --tw-translate-y: calc(1 / 2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-\\[123px\\] { --tw-translate-x: 123px; --tw-translate-y: 123px; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-full { --tw-translate-x: 100%; --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } + @property --tw-translate-x { 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; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } " `) expect( @@ -4943,47 +5497,53 @@ test('translate-x', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + .-translate-x-\\[var\\(--value\\)\\] { --tw-translate-x: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } + .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-x-full { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-x-px { --tw-translate-x: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); } + @property --tw-translate-x { 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; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } " `) expect( @@ -5012,47 +5572,53 @@ test('translate-x', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + .-translate-x-\\[var\\(--value\\)\\] { --tw-translate-x: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } + .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-x-full { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-x-px { --tw-translate-x: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); } + @property --tw-translate-x { 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; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } " `) expect( @@ -5079,47 +5645,53 @@ test('translate-y', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + .-translate-y-\\[var\\(--value\\)\\] { --tw-translate-y: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } + .-translate-y-full { --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-y-full { --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-y-px { --tw-translate-y: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); } + @property --tw-translate-x { 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; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } " `) expect( @@ -5148,47 +5720,53 @@ test('translate-y', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + .-translate-y-\\[var\\(--value\\)\\] { --tw-translate-y: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } + .-translate-y-full { --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-y-full { --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-y-px { --tw-translate-y: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); } + @property --tw-translate-x { 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; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } " `) expect( @@ -5209,43 +5787,48 @@ test('translate-z', async () => { expect(await run(['-translate-z-px', 'translate-z-px', '-translate-z-[var(--value)]'])) .toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + .-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); } + @property --tw-translate-x { 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; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } " `) expect( @@ -5267,34 +5850,37 @@ test('translate-z', async () => { test('translate-3d', async () => { expect(await run(['translate-3d'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + } + } + } + .translate-3d { 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-y { syntax: "*"; inherits: false; initial-value: 0; } + @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - } - } - } " `) expect(await run(['-translate-3d', 'translate-3d/foo'])).toEqual('') @@ -5316,21 +5902,27 @@ test('rotate', async () => { .-rotate-\\(--var\\) { rotate: calc(var(--var) * -1); } + .-rotate-45 { - rotate: calc(45deg * -1); + rotate: -45deg; } + .-rotate-\\[123deg\\] { - rotate: calc(123deg * -1); + rotate: -123deg; } + .rotate-\\(--var\\) { rotate: var(--var); } + .rotate-45 { rotate: 45deg; } + .rotate-\\[0\\.3_0\\.7_1_45deg\\] { - rotate: 0.3 0.7 1 45deg; + rotate: .3 .7 1 45deg; } + .rotate-\\[123deg\\] { rotate: 123deg; } @@ -5361,57 +5953,66 @@ test('rotate-x', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } + } + .-rotate-x-\\(--var\\) { --tw-rotate-x: rotateX(calc(var(--var) * -1)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .-rotate-x-45 { --tw-rotate-x: rotateX(calc(45deg * -1)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .rotate-x-\\(--var\\) { --tw-rotate-x: rotateX(var(--var)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .rotate-x-45 { --tw-rotate-x: rotateX(45deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .rotate-x-\\[123deg\\] { --tw-rotate-x: rotateX(123deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + @property --tw-rotate-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-y { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-z { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-y { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } + inherits: false } " `) @@ -5440,61 +6041,71 @@ test('rotate-y', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } + } + .-rotate-y-\\(--var\\) { --tw-rotate-y: rotateY(calc(var(--var) * -1)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .-rotate-y-45 { --tw-rotate-y: rotateY(calc(45deg * -1)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .-rotate-y-\\[123deg\\] { --tw-rotate-y: rotateY(calc(123deg * -1)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .rotate-y-\\(--var\\) { --tw-rotate-y: rotateY(var(--var)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .rotate-y-45 { --tw-rotate-y: rotateY(45deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .rotate-y-\\[123deg\\] { --tw-rotate-y: rotateY(123deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + @property --tw-rotate-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-y { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-z { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-y { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } + inherits: false } " `) @@ -5523,61 +6134,71 @@ test('rotate-z', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } + } + .-rotate-z-\\(--var\\) { --tw-rotate-z: rotateZ(calc(var(--var) * -1)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .-rotate-z-45 { --tw-rotate-z: rotateZ(calc(45deg * -1)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .-rotate-z-\\[123deg\\] { --tw-rotate-z: rotateZ(calc(123deg * -1)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .rotate-z-\\(--var\\) { --tw-rotate-z: rotateZ(var(--var)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .rotate-z-45 { --tw-rotate-z: rotateZ(45deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .rotate-z-\\[123deg\\] { --tw-rotate-z: rotateZ(123deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + @property --tw-rotate-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-y { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-z { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-y { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } + inherits: false } " `) @@ -5597,52 +6218,59 @@ test('rotate-z', async () => { test('skew', async () => { expect(await run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } + } + .-skew-6 { --tw-skew-x: skewX(calc(6deg * -1)); --tw-skew-y: skewY(calc(6deg * -1)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .skew-6 { --tw-skew-x: skewX(6deg); --tw-skew-y: skewY(6deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .skew-\\[123deg\\] { --tw-skew-x: skewX(123deg); --tw-skew-y: skewY(123deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + @property --tw-rotate-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-y { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-z { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-y { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } + inherits: false } " `) @@ -5661,49 +6289,56 @@ test('skew', async () => { test('skew-x', async () => { expect(await run(['skew-x-6', '-skew-x-6', 'skew-x-[123deg]'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } + } + .-skew-x-6 { --tw-skew-x: skewX(calc(6deg * -1)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .skew-x-6 { --tw-skew-x: skewX(6deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .skew-x-\\[123deg\\] { --tw-skew-x: skewX(123deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + @property --tw-rotate-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-y { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-z { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-y { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } + inherits: false } " `) @@ -5722,49 +6357,56 @@ test('skew-x', async () => { test('skew-y', async () => { expect(await run(['skew-y-6', '-skew-y-6', 'skew-y-[123deg]'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } + } + .-skew-y-6 { --tw-skew-y: skewY(calc(6deg * -1)); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .skew-y-6 { --tw-skew-y: skewY(6deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .skew-y-\\[123deg\\] { --tw-skew-y: skewY(123deg); - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + @property --tw-rotate-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-y { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-z { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-y { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } + inherits: false } " `) @@ -5784,49 +6426,55 @@ test('scale', async () => { expect(await run(['scale-50', '-scale-50', 'scale-[2]', 'scale-[2_1.5_3]'])) .toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } + .-scale-50 { --tw-scale-x: calc(50% * -1); --tw-scale-y: calc(50% * -1); --tw-scale-z: calc(50% * -1); scale: var(--tw-scale-x) var(--tw-scale-y); } + .scale-50 { --tw-scale-x: 50%; --tw-scale-y: 50%; --tw-scale-z: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } + .scale-\\[2\\] { scale: 2; } + .scale-\\[2_1\\.5_3\\] { scale: 2 1.5 3; } + @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - } - } - } " `) expect( @@ -5846,34 +6494,37 @@ test('scale', async () => { test('scale-3d', async () => { expect(await run(['scale-3d'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } + .scale-3d { scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } + @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - } - } - } " `) expect(await run(['-scale-3d', 'scale-3d/foo'])).toEqual('') @@ -5882,82 +6533,91 @@ test('scale-3d', async () => { test('scale-x', async () => { expect(await run(['scale-x-50', '-scale-x-50', 'scale-x-[2]'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } + .-scale-x-50 { --tw-scale-x: calc(50% * -1); scale: var(--tw-scale-x) var(--tw-scale-y); } + .scale-x-50 { --tw-scale-x: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } + .scale-x-\\[2\\] { --tw-scale-x: 2; scale: var(--tw-scale-x) var(--tw-scale-y); } + @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } + " + `) + expect(await run(['scale-200', 'scale-x-400'])).toMatchInlineSnapshot(` + " @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; } } } - " - `) - expect(await run(['scale-200', 'scale-x-400'])).toMatchInlineSnapshot(` - " - @layer properties; + .scale-200 { --tw-scale-x: 200%; --tw-scale-y: 200%; --tw-scale-z: 200%; scale: var(--tw-scale-x) var(--tw-scale-y); } + .scale-x-400 { --tw-scale-x: 400%; scale: var(--tw-scale-x) var(--tw-scale-y); } + @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - } - } - } " `) expect( @@ -5978,43 +6638,48 @@ test('scale-x', async () => { test('scale-y', async () => { expect(await run(['scale-y-50', '-scale-y-50', 'scale-y-[2]'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } + .-scale-y-50 { --tw-scale-y: calc(50% * -1); scale: var(--tw-scale-x) var(--tw-scale-y); } + .scale-y-50 { --tw-scale-y: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } + .scale-y-\\[2\\] { --tw-scale-y: 2; scale: var(--tw-scale-x) var(--tw-scale-y); } + @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - } - } - } " `) expect( @@ -6033,43 +6698,48 @@ test('scale-y', async () => { test('scale-z', async () => { expect(await run(['scale-z-50', '-scale-z-50', 'scale-z-[123deg]'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + } + } + } + .-scale-z-50 { --tw-scale-z: calc(50% * -1); scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } + .scale-z-50 { --tw-scale-z: 50%; scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } + .scale-z-\\[123deg\\] { --tw-scale-z: 123deg; scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); } + @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } + @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - } - } - } " `) expect( @@ -6095,52 +6765,61 @@ test('transform', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + } + } + } + .transform { - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .transform-\\[scaleZ\\(2\\)_rotateY\\(45deg\\)\\] { transform: scaleZ(2) rotateY(45deg); } + .transform-cpu { - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .transform-gpu { - transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } + .transform-none { transform: none; } + @property --tw-rotate-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-y { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-rotate-z { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-skew-y { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - } - } + inherits: false } " `) @@ -6161,27 +6840,35 @@ test('transform', async () => { .backface-hidden { backface-visibility: hidden; } + .backface-visible { backface-visibility: visible; } + .transform-3d { transform-style: preserve-3d; } + .transform-border { transform-box: border-box; } + .transform-content { transform-box: content-box; } + .transform-fill { transform-box: fill-box; } + .transform-flat { transform-style: flat; } + .transform-stroke { transform-box: stroke-box; } + .transform-view { transform-box: view-box; } @@ -6217,9 +6904,11 @@ test('zoom', async () => { .zoom-50 { zoom: 50%; } + .zoom-100 { zoom: 100%; } + .zoom-\\[var\\(--zoom\\)\\] { zoom: var(--zoom); } @@ -6248,15 +6937,19 @@ test('perspective', async () => { --perspective-dramatic: 100px; --perspective-normal: 500px; } + .perspective-\\[456px\\] { perspective: 456px; } + .perspective-dramatic { perspective: var(--perspective-dramatic); } + .perspective-none { perspective: none; } + .perspective-normal { perspective: var(--perspective-normal); } @@ -6290,6 +6983,7 @@ test('perspective', async () => { :root, :host { --perspective-none: 400px; } + .perspective-none { perspective: var(--perspective-none); } @@ -6350,119 +7044,157 @@ test('cursor', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --cursor-custom: url(/my-cursor.png); + --cursor-custom: url("/my-cursor.png"); } + .cursor-\\[var\\(--value\\)\\] { cursor: var(--value); } + .cursor-alias { cursor: alias; } + .cursor-all-scroll { cursor: all-scroll; } + .cursor-auto { cursor: auto; } + .cursor-cell { cursor: cell; } + .cursor-col-resize { cursor: col-resize; } + .cursor-context-menu { cursor: context-menu; } + .cursor-copy { cursor: copy; } + .cursor-crosshair { cursor: crosshair; } + .cursor-custom { cursor: var(--cursor-custom); } + .cursor-default { cursor: default; } + .cursor-e-resize { cursor: e-resize; } + .cursor-ew-resize { cursor: ew-resize; } + .cursor-grab { cursor: grab; } + .cursor-grabbing { cursor: grabbing; } + .cursor-help { cursor: help; } + .cursor-move { cursor: move; } + .cursor-n-resize { cursor: n-resize; } + .cursor-ne-resize { cursor: ne-resize; } + .cursor-nesw-resize { cursor: nesw-resize; } + .cursor-no-drop { cursor: no-drop; } + .cursor-none { cursor: none; } + .cursor-not-allowed { cursor: not-allowed; } + .cursor-ns-resize { cursor: ns-resize; } + .cursor-nw-resize { cursor: nw-resize; } + .cursor-nwse-resize { cursor: nwse-resize; } + .cursor-pointer { cursor: pointer; } + .cursor-progress { cursor: progress; } + .cursor-row-resize { cursor: row-resize; } + .cursor-s-resize { cursor: s-resize; } + .cursor-se-resize { cursor: se-resize; } + .cursor-sw-resize { cursor: sw-resize; } + .cursor-text { cursor: text; } + .cursor-vertical-text { cursor: vertical-text; } + .cursor-w-resize { cursor: w-resize; } + .cursor-wait { cursor: wait; } + .cursor-zoom-in { cursor: zoom-in; } + .cursor-zoom-out { cursor: zoom-out; } @@ -6557,9 +7289,11 @@ test('touch-action', async () => { .touch-auto { touch-action: auto; } + .touch-manipulation { touch-action: manipulation; } + .touch-none { touch-action: none; } @@ -6589,51 +7323,59 @@ test('touch-pan', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-pan-x: initial; + --tw-pan-y: initial; + --tw-pinch-zoom: initial; + } + } + } + .touch-pan-left { --tw-pan-x: pan-left; - touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } + .touch-pan-right { --tw-pan-x: pan-right; - touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } + .touch-pan-x { --tw-pan-x: pan-x; - touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } + .touch-pan-down { --tw-pan-y: pan-down; - touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } + .touch-pan-up { --tw-pan-y: pan-up; - touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } + .touch-pan-y { --tw-pan-y: pan-y; - touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } + @property --tw-pan-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-pan-y { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-pinch-zoom { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-pan-x: initial; - --tw-pan-y: initial; - --tw-pinch-zoom: initial; - } - } + inherits: false } " `) @@ -6658,31 +7400,34 @@ test('touch-pan', async () => { test('touch-pinch-zoom', async () => { expect(await run(['touch-pinch-zoom'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-pan-x: initial; + --tw-pan-y: initial; + --tw-pinch-zoom: initial; + } + } + } + .touch-pinch-zoom { --tw-pinch-zoom: pinch-zoom; - touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } + @property --tw-pan-x { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-pan-y { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-pinch-zoom { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-pan-x: initial; - --tw-pan-y: initial; - --tw-pinch-zoom: initial; - } - } + inherits: false } " `) @@ -6697,14 +7442,17 @@ test('select', async () => { -webkit-user-select: all; user-select: all; } + .select-auto { -webkit-user-select: auto; user-select: auto; } + .select-none { -webkit-user-select: none; user-select: none; } + .select-text { -webkit-user-select: text; user-select: text; @@ -6731,12 +7479,15 @@ test('resize', async () => { .resize { resize: both; } + .resize-none { resize: none; } + .resize-x { resize: horizontal; } + .resize-y { resize: vertical; } @@ -6759,31 +7510,35 @@ test('resize', async () => { test('scroll-snap-type', async () => { expect(await run(['snap-none', 'snap-x', 'snap-y', 'snap-both'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-scroll-snap-strictness: proximity; + } + } + } + .snap-both { scroll-snap-type: both var(--tw-scroll-snap-strictness); } + .snap-none { scroll-snap-type: none; } + .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } + .snap-y { scroll-snap-type: y var(--tw-scroll-snap-strictness); } + @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-scroll-snap-strictness: proximity; - } - } - } " `) expect( @@ -6803,25 +7558,27 @@ test('scroll-snap-type', async () => { test('--tw-scroll-snap-strictness', async () => { expect(await run(['snap-mandatory', 'snap-proximity'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-scroll-snap-strictness: proximity; + } + } + } + .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } + .snap-proximity { --tw-scroll-snap-strictness: proximity; } + @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-scroll-snap-strictness: proximity; - } - } - } " `) expect( @@ -6836,12 +7593,15 @@ test('scroll-snap-align', async () => { .snap-align-none { scroll-snap-align: none; } + .snap-center { scroll-snap-align: center; } + .snap-end { scroll-snap-align: end; } + .snap-start { scroll-snap-align: start; } @@ -6867,6 +7627,7 @@ test('scroll-snap-stop', async () => { .snap-always { scroll-snap-stop: always; } + .snap-normal { scroll-snap-stop: normal; } @@ -6893,15 +7654,19 @@ test('scroll-m', async () => { :root, :host { --spacing-4: 1rem; } + .-scroll-m-4 { scroll-margin: calc(var(--spacing-4) * -1); } + .-scroll-m-\\[var\\(--value\\)\\] { scroll-margin: calc(var(--value) * -1); } + .scroll-m-4 { scroll-margin: var(--spacing-4); } + .scroll-m-\\[4px\\] { scroll-margin: 4px; } @@ -6934,15 +7699,19 @@ test('scroll-mx', async () => { :root, :host { --spacing-4: 1rem; } + .-scroll-mx-4 { scroll-margin-inline: calc(var(--spacing-4) * -1); } + .-scroll-mx-\\[var\\(--value\\)\\] { scroll-margin-inline: calc(var(--value) * -1); } + .scroll-mx-4 { scroll-margin-inline: var(--spacing-4); } + .scroll-mx-\\[4px\\] { scroll-margin-inline: 4px; } @@ -6975,15 +7744,19 @@ test('scroll-my', async () => { :root, :host { --spacing-4: 1rem; } + .-scroll-my-4 { scroll-margin-block: calc(var(--spacing-4) * -1); } + .-scroll-my-\\[var\\(--value\\)\\] { scroll-margin-block: calc(var(--value) * -1); } + .scroll-my-4 { scroll-margin-block: var(--spacing-4); } + .scroll-my-\\[4px\\] { scroll-margin-block: 4px; } @@ -7016,15 +7789,19 @@ test('scroll-ms', async () => { :root, :host { --spacing-4: 1rem; } + .-scroll-ms-4 { scroll-margin-inline-start: calc(var(--spacing-4) * -1); } + .-scroll-ms-\\[var\\(--value\\)\\] { scroll-margin-inline-start: calc(var(--value) * -1); } + .scroll-ms-4 { scroll-margin-inline-start: var(--spacing-4); } + .scroll-ms-\\[4px\\] { scroll-margin-inline-start: 4px; } @@ -7057,15 +7834,19 @@ test('scroll-me', async () => { :root, :host { --spacing-4: 1rem; } + .-scroll-me-4 { scroll-margin-inline-end: calc(var(--spacing-4) * -1); } + .-scroll-me-\\[var\\(--value\\)\\] { scroll-margin-inline-end: calc(var(--value) * -1); } + .scroll-me-4 { scroll-margin-inline-end: var(--spacing-4); } + .scroll-me-\\[4px\\] { scroll-margin-inline-end: 4px; } @@ -7098,15 +7879,19 @@ test('scroll-mbs', async () => { :root, :host { --spacing-4: 1rem; } + .-scroll-mbs-4 { scroll-margin-block-start: calc(var(--spacing-4) * -1); } + .-scroll-mbs-\\[var\\(--value\\)\\] { scroll-margin-block-start: calc(var(--value) * -1); } + .scroll-mbs-4 { scroll-margin-block-start: var(--spacing-4); } + .scroll-mbs-\\[4px\\] { scroll-margin-block-start: 4px; } @@ -7139,15 +7924,19 @@ test('scroll-mbe', async () => { :root, :host { --spacing-4: 1rem; } + .-scroll-mbe-4 { scroll-margin-block-end: calc(var(--spacing-4) * -1); } + .-scroll-mbe-\\[var\\(--value\\)\\] { scroll-margin-block-end: calc(var(--value) * -1); } + .scroll-mbe-4 { scroll-margin-block-end: var(--spacing-4); } + .scroll-mbe-\\[4px\\] { scroll-margin-block-end: 4px; } @@ -7180,15 +7969,19 @@ test('scroll-mt', async () => { :root, :host { --spacing-4: 1rem; } + .-scroll-mt-4 { scroll-margin-top: calc(var(--spacing-4) * -1); } + .-scroll-mt-\\[var\\(--value\\)\\] { scroll-margin-top: calc(var(--value) * -1); } + .scroll-mt-4 { scroll-margin-top: var(--spacing-4); } + .scroll-mt-\\[4px\\] { scroll-margin-top: 4px; } @@ -7221,15 +8014,19 @@ test('scroll-mr', async () => { :root, :host { --spacing-4: 1rem; } + .-scroll-mr-4 { scroll-margin-right: calc(var(--spacing-4) * -1); } + .-scroll-mr-\\[var\\(--value\\)\\] { scroll-margin-right: calc(var(--value) * -1); } + .scroll-mr-4 { scroll-margin-right: var(--spacing-4); } + .scroll-mr-\\[4px\\] { scroll-margin-right: 4px; } @@ -7262,15 +8059,19 @@ test('scroll-mb', async () => { :root, :host { --spacing-4: 1rem; } + .-scroll-mb-4 { scroll-margin-bottom: calc(var(--spacing-4) * -1); } + .-scroll-mb-\\[var\\(--value\\)\\] { scroll-margin-bottom: calc(var(--value) * -1); } + .scroll-mb-4 { scroll-margin-bottom: var(--spacing-4); } + .scroll-mb-\\[4px\\] { scroll-margin-bottom: 4px; } @@ -7303,15 +8104,19 @@ test('scroll-ml', async () => { :root, :host { --spacing-4: 1rem; } + .-scroll-ml-4 { scroll-margin-left: calc(var(--spacing-4) * -1); } + .-scroll-ml-\\[var\\(--value\\)\\] { scroll-margin-left: calc(var(--value) * -1); } + .scroll-ml-4 { scroll-margin-left: var(--spacing-4); } + .scroll-ml-\\[4px\\] { scroll-margin-left: 4px; } @@ -7344,9 +8149,11 @@ test('scroll-p', async () => { :root, :host { --spacing-4: 1rem; } + .scroll-p-4 { scroll-padding: var(--spacing-4); } + .scroll-p-\\[4px\\] { scroll-padding: 4px; } @@ -7379,9 +8186,11 @@ test('scroll-px', async () => { :root, :host { --spacing-4: 1rem; } + .scroll-px-4 { scroll-padding-inline: var(--spacing-4); } + .scroll-px-\\[4px\\] { scroll-padding-inline: 4px; } @@ -7414,9 +8223,11 @@ test('scroll-py', async () => { :root, :host { --spacing-4: 1rem; } + .scroll-py-4 { scroll-padding-block: var(--spacing-4); } + .scroll-py-\\[4px\\] { scroll-padding-block: 4px; } @@ -7449,9 +8260,11 @@ test('scroll-ps', async () => { :root, :host { --spacing-4: 1rem; } + .scroll-ps-4 { scroll-padding-inline-start: var(--spacing-4); } + .scroll-ps-\\[4px\\] { scroll-padding-inline-start: 4px; } @@ -7484,9 +8297,11 @@ test('scroll-pe', async () => { :root, :host { --spacing-4: 1rem; } + .scroll-pe-4 { scroll-padding-inline-end: var(--spacing-4); } + .scroll-pe-\\[4px\\] { scroll-padding-inline-end: 4px; } @@ -7519,9 +8334,11 @@ test('scroll-pbs', async () => { :root, :host { --spacing-4: 1rem; } + .scroll-pbs-4 { scroll-padding-block-start: var(--spacing-4); } + .scroll-pbs-\\[4px\\] { scroll-padding-block-start: 4px; } @@ -7554,9 +8371,11 @@ test('scroll-pbe', async () => { :root, :host { --spacing-4: 1rem; } + .scroll-pbe-4 { scroll-padding-block-end: var(--spacing-4); } + .scroll-pbe-\\[4px\\] { scroll-padding-block-end: 4px; } @@ -7589,9 +8408,11 @@ test('scroll-pt', async () => { :root, :host { --spacing-4: 1rem; } + .scroll-pt-4 { scroll-padding-top: var(--spacing-4); } + .scroll-pt-\\[4px\\] { scroll-padding-top: 4px; } @@ -7624,9 +8445,11 @@ test('scroll-pr', async () => { :root, :host { --spacing-4: 1rem; } + .scroll-pr-4 { scroll-padding-right: var(--spacing-4); } + .scroll-pr-\\[4px\\] { scroll-padding-right: 4px; } @@ -7659,9 +8482,11 @@ test('scroll-pb', async () => { :root, :host { --spacing-4: 1rem; } + .scroll-pb-4 { scroll-padding-bottom: var(--spacing-4); } + .scroll-pb-\\[4px\\] { scroll-padding-bottom: 4px; } @@ -7694,9 +8519,11 @@ test('scroll-pl', async () => { :root, :host { --spacing-4: 1rem; } + .scroll-pl-4 { scroll-padding-left: var(--spacing-4); } + .scroll-pl-\\[4px\\] { scroll-padding-left: 4px; } @@ -7719,6 +8546,7 @@ test('list-style-position', async () => { .list-inside { list-style-position: inside; } + .list-outside { list-style-position: outside; } @@ -7736,12 +8564,15 @@ test('list', async () => { .list-\\[var\\(--value\\)\\] { list-style-type: var(--value); } + .list-decimal { list-style-type: decimal; } + .list-disc { list-style-type: disc; } + .list-none { list-style-type: none; } @@ -7775,6 +8606,7 @@ test('list', async () => { :root, :host { --list-style-type-none: disc; } + .list-none { list-style-type: var(--list-style-type-none); } @@ -7788,6 +8620,7 @@ test('list-image', async () => { .list-image-\\[var\\(--value\\)\\] { list-style-image: var(--value); } + .list-image-none { list-style-image: none; } @@ -7816,8 +8649,9 @@ test('list-image', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --list-style-image-none: url(../foo.png); + --list-style-image-none: url("../foo.png"); } + .list-image-none { list-style-image: var(--list-style-image-none); } @@ -7831,6 +8665,7 @@ test('appearance', async () => { .appearance-auto { appearance: auto; } + .appearance-none { appearance: none; } @@ -7862,20 +8697,25 @@ test('color-scheme', async () => { .scheme-dark { color-scheme: dark; } + .scheme-light { color-scheme: light; } + .scheme-light-dark { color-scheme: light dark; } + .scheme-normal { color-scheme: normal; } + .scheme-only-dark { - color-scheme: only dark; + color-scheme: dark only; } + .scheme-only-light { - color-scheme: only light; + color-scheme: light only; } " `) @@ -7917,24 +8757,31 @@ test('columns', async () => { --container-3xs: 16rem; --container-7xl: 80rem; } + .columns-3xs { columns: var(--container-3xs); } + .columns-4 { columns: 4; } + .columns-7xl { columns: var(--container-7xl); } + .columns-99 { columns: 99; } + .columns-\\[123\\] { columns: 123; } + .columns-\\[var\\(--value\\)\\] { columns: var(--value); } + .columns-auto { columns: auto; } @@ -7973,6 +8820,7 @@ test('columns', async () => { :root, :host { --columns-auto: 3; } + .columns-auto { columns: var(--columns-auto); } @@ -7997,24 +8845,31 @@ test('break-before', async () => { .break-before-all { break-before: all; } + .break-before-auto { break-before: auto; } + .break-before-avoid { break-before: avoid; } + .break-before-avoid-page { break-before: avoid-page; } + .break-before-column { break-before: column; } + .break-before-left { break-before: left; } + .break-before-page { break-before: page; } + .break-before-right { break-before: right; } @@ -8056,12 +8911,15 @@ test('break-inside', async () => { .break-inside-auto { break-inside: auto; } + .break-inside-avoid { break-inside: avoid; } + .break-inside-avoid-column { break-inside: avoid-column; } + .break-inside-avoid-page { break-inside: avoid-page; } @@ -8099,24 +8957,31 @@ test('break-after', async () => { .break-after-all { break-after: all; } + .break-after-auto { break-after: auto; } + .break-after-avoid { break-after: avoid; } + .break-after-avoid-page { break-after: avoid-page; } + .break-after-column { break-after: column; } + .break-after-left { break-after: left; } + .break-after-page { break-after: page; } + .break-after-right { break-after: right; } @@ -8159,15 +9024,19 @@ test('auto-cols', async () => { .auto-cols-\\[2fr\\] { grid-auto-columns: 2fr; } + .auto-cols-auto { grid-auto-columns: auto; } + .auto-cols-fr { grid-auto-columns: minmax(0, 1fr); } + .auto-cols-max { grid-auto-columns: max-content; } + .auto-cols-min { grid-auto-columns: min-content; } @@ -8201,6 +9070,7 @@ test('auto-cols', async () => { :root, :host { --grid-auto-columns-auto: 2fr; } + .auto-cols-auto { grid-auto-columns: var(--grid-auto-columns-auto); } @@ -8222,15 +9092,19 @@ test('grid-flow', async () => { .grid-flow-col { grid-auto-flow: column; } + .grid-flow-col-dense { grid-auto-flow: column dense; } + .grid-flow-dense { grid-auto-flow: dense; } + .grid-flow-row { grid-auto-flow: row; } + .grid-flow-row-dense { grid-auto-flow: row dense; } @@ -8267,15 +9141,19 @@ test('auto-rows', async () => { .auto-rows-\\[2fr\\] { grid-auto-rows: 2fr; } + .auto-rows-auto { grid-auto-rows: auto; } + .auto-rows-fr { grid-auto-rows: minmax(0, 1fr); } + .auto-rows-max { grid-auto-rows: max-content; } + .auto-rows-min { grid-auto-rows: min-content; } @@ -8309,6 +9187,7 @@ test('auto-rows', async () => { :root, :host { --grid-auto-rows-auto: 2fr; } + .auto-rows-auto { grid-auto-rows: var(--grid-auto-rows-auto); } @@ -8330,15 +9209,19 @@ test('grid-cols', async () => { .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } + .grid-cols-99 { grid-template-columns: repeat(99, minmax(0, 1fr)); } + .grid-cols-\\[123\\] { - grid-template-columns: 123; + grid-template-columns: 123px; } + .grid-cols-none { grid-template-columns: none; } + .grid-cols-subgrid { grid-template-columns: subgrid; } @@ -8377,6 +9260,7 @@ test('grid-cols', async () => { :root, :host { --grid-template-columns-none: 200px 1fr; } + .grid-cols-none { grid-template-columns: var(--grid-template-columns-none); } @@ -8398,15 +9282,19 @@ test('grid-rows', async () => { .grid-rows-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } + .grid-rows-99 { grid-template-rows: repeat(99, minmax(0, 1fr)); } + .grid-rows-\\[123\\] { - grid-template-rows: 123; + grid-template-rows: 123px; } + .grid-rows-none { grid-template-rows: none; } + .grid-rows-subgrid { grid-template-rows: subgrid; } @@ -8445,6 +9333,7 @@ test('grid-rows', async () => { :root, :host { --grid-template-rows-none: 200px 1fr; } + .grid-rows-none { grid-template-rows: var(--grid-template-rows-none); } @@ -8459,12 +9348,15 @@ test('flex-direction', async () => { .flex-col { flex-direction: column; } + .flex-col-reverse { flex-direction: column-reverse; } + .flex-row { flex-direction: row; } + .flex-row-reverse { flex-direction: row-reverse; } @@ -8490,9 +9382,11 @@ test('flex-wrap', async () => { .flex-nowrap { flex-wrap: nowrap; } + .flex-wrap { flex-wrap: wrap; } + .flex-wrap-reverse { flex-wrap: wrap-reverse; } @@ -8529,30 +9423,39 @@ test('place-content', async () => { .place-content-around { place-content: space-around; } + .place-content-baseline { - place-content: baseline; + place-content: baseline start; } + .place-content-between { place-content: space-between; } + .place-content-center { place-content: center; } + .place-content-center-safe { place-content: safe center; } + .place-content-end { place-content: end; } + .place-content-end-safe { place-content: safe end; } + .place-content-evenly { place-content: space-evenly; } + .place-content-start { place-content: start; } + .place-content-stretch { place-content: stretch; } @@ -8597,23 +9500,29 @@ test('place-items', async () => { .place-items-baseline { place-items: baseline; } + .place-items-center { place-items: center; } + .place-items-center-safe { place-items: safe center; } + .place-items-end { place-items: end; } + .place-items-end-safe { place-items: safe end; } + .place-items-start { place-items: start; } + .place-items-stretch { - place-items: stretch; + place-items: stretch stretch; } " `) @@ -8654,33 +9563,43 @@ test('align-content', async () => { .content-around { align-content: space-around; } + .content-baseline { align-content: baseline; } + .content-between { align-content: space-between; } + .content-center { align-content: center; } + .content-center-safe { align-content: safe center; } + .content-end { align-content: flex-end; } + .content-end-safe { align-content: safe flex-end; } + .content-evenly { align-content: space-evenly; } + .content-normal { align-content: normal; } + .content-start { align-content: flex-start; } + .content-stretch { align-content: stretch; } @@ -8728,24 +9647,31 @@ test('items', async () => { .items-baseline { align-items: baseline; } + .items-baseline-last { align-items: last baseline; } + .items-center { align-items: center; } + .items-center-safe { align-items: safe center; } + .items-end { align-items: flex-end; } + .items-end-safe { align-items: safe flex-end; } + .items-start { align-items: flex-start; } + .items-stretch { align-items: stretch; } @@ -8789,30 +9715,39 @@ test('justify', async () => { .justify-around { justify-content: space-around; } + .justify-between { justify-content: space-between; } + .justify-center { justify-content: center; } + .justify-center-safe { justify-content: safe center; } + .justify-end { justify-content: flex-end; } + .justify-end-safe { justify-content: safe flex-end; } + .justify-evenly { justify-content: space-evenly; } + .justify-normal { justify-content: normal; } + .justify-start { justify-content: flex-start; } + .justify-stretch { justify-content: stretch; } @@ -8856,18 +9791,23 @@ test('justify-items', async () => { .justify-items-center { justify-items: center; } + .justify-items-center-safe { justify-items: safe center; } + .justify-items-end { justify-items: end; } + .justify-items-end-safe { justify-items: safe end; } + .justify-items-start { justify-items: start; } + .justify-items-stretch { justify-items: stretch; } @@ -8904,9 +9844,11 @@ test('gap', async () => { :root, :host { --spacing-4: 1rem; } + .gap-4 { gap: var(--spacing-4); } + .gap-\\[4px\\] { gap: 4px; } @@ -8931,9 +9873,11 @@ test('gap-x', async () => { :root, :host { --spacing-4: 1rem; } + .gap-x-4 { column-gap: var(--spacing-4); } + .gap-x-\\[4px\\] { column-gap: 4px; } @@ -8960,9 +9904,11 @@ test('gap-y', async () => { :root, :host { --spacing-4: 1rem; } + .gap-y-4 { row-gap: var(--spacing-4); } + .gap-y-\\[4px\\] { row-gap: 4px; } @@ -8986,37 +9932,41 @@ test('space-x', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-space-x-reverse: 0; + } + } + } + :root, :host { --spacing-4: 1rem; } + :where(.-space-x-4 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-x-reverse))); } + :where(.space-x-4 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(var(--spacing-4) * var(--tw-space-x-reverse)); margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse))); } + :where(.space-x-\\[4px\\] > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(4px * var(--tw-space-x-reverse)); margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse))); } + @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-space-x-reverse: 0; - } - } - } " `) expect(await run(['space-x', 'space-x-4/foo', 'space-x-[4px]/foo', '-space-x-4/foo'])).toEqual('') @@ -9035,37 +9985,41 @@ test('space-y', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-space-y-reverse: 0; + } + } + } + :root, :host { --spacing-4: 1rem; } + :where(.-space-y-4 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-y-reverse))); } + :where(.space-y-4 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse))); } + :where(.space-y-\\[4px\\] > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(4px * var(--tw-space-y-reverse)); margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse))); } + @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-space-y-reverse: 0; - } - } - } " `) expect(await run(['space-y', 'space-y-4/foo', 'space-y-[4px]/foo', '-space-y-4/foo'])).toEqual('') @@ -9074,22 +10028,23 @@ test('space-y', async () => { test('space-x-reverse', async () => { expect(await run(['space-x-reverse'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-space-x-reverse: 0; + } + } + } + :where(.space-x-reverse > :not(:last-child)) { --tw-space-x-reverse: 1; } + @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-space-x-reverse: 0; - } - } - } " `) expect(await run(['-space-x-reverse', 'space-x-reverse/foo'])).toEqual('') @@ -9098,22 +10053,23 @@ test('space-x-reverse', async () => { test('space-y-reverse', async () => { expect(await run(['space-y-reverse'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-space-y-reverse: 0; + } + } + } + :where(.space-y-reverse > :not(:last-child)) { --tw-space-y-reverse: 1; } + @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-space-y-reverse: 0; - } - } - } " `) expect(await run(['-space-y-reverse', 'space-y-reverse/foo'])).toEqual('') @@ -9123,49 +10079,54 @@ test('divide-x', async () => { expect(await run(['divide-x', 'divide-x-4', 'divide-x-123', 'divide-x-[4px]'])) .toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-divide-x-reverse: 0; + --tw-border-style: solid; + } + } + } + :where(.divide-x > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } + :where(.divide-x-4 > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } + :where(.divide-x-123 > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(123px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse))); } + :where(.divide-x-\\[4px\\] > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } + @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-divide-x-reverse: 0; - --tw-border-style: solid; - } - } - } " `) expect( @@ -9196,31 +10157,33 @@ test('divide-x with custom default border width', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-divide-x-reverse: 0; + --tw-border-style: solid; + } + } + } + :where(.divide-x > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(2px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); } + @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-divide-x-reverse: 0; - --tw-border-style: solid; - } - } - } " `) expect(await run(['divide-x/foo'])).toEqual('') @@ -9230,7 +10193,15 @@ test('divide-y', async () => { expect(await run(['divide-y', 'divide-y-4', 'divide-y-123', 'divide-y-[4px]'])) .toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-divide-y-reverse: 0; + --tw-border-style: solid; + } + } + } + :where(.divide-y > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); @@ -9238,6 +10209,7 @@ test('divide-y', async () => { border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } + :where(.divide-y-4 > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); @@ -9245,6 +10217,7 @@ test('divide-y', async () => { border-top-width: calc(4px * var(--tw-divide-y-reverse)); border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); } + :where(.divide-y-123 > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); @@ -9252,6 +10225,7 @@ test('divide-y', async () => { border-top-width: calc(123px * var(--tw-divide-y-reverse)); border-bottom-width: calc(123px * calc(1 - var(--tw-divide-y-reverse))); } + :where(.divide-y-\\[4px\\] > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); @@ -9259,24 +10233,18 @@ test('divide-y', async () => { border-top-width: calc(4px * var(--tw-divide-y-reverse)); border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); } + @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-divide-y-reverse: 0; - --tw-border-style: solid; - } - } - } " `) expect( @@ -9307,7 +10275,15 @@ test('divide-y with custom default border width', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-divide-y-reverse: 0; + --tw-border-style: solid; + } + } + } + :where(.divide-y > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); @@ -9315,24 +10291,18 @@ test('divide-y with custom default border width', async () => { border-top-width: calc(2px * var(--tw-divide-y-reverse)); border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); } + @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-divide-y-reverse: 0; - --tw-border-style: solid; - } - } - } " `) expect(await run(['divide-y/foo'])).toEqual('') @@ -9341,22 +10311,23 @@ test('divide-y with custom default border width', async () => { test('divide-x-reverse', async () => { expect(await run(['divide-x-reverse'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-divide-x-reverse: 0; + } + } + } + :where(.divide-x-reverse > :not(:last-child)) { --tw-divide-x-reverse: 1; } + @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-divide-x-reverse: 0; - } - } - } " `) expect(await run(['-divide-x-reverse', 'divide-x-reverse/foo'])).toEqual('') @@ -9365,21 +10336,22 @@ test('divide-x-reverse', async () => { test('divide-y-reverse', async () => { expect(await run(['divide-y-reverse'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-divide-y-reverse: 0; + } + } + } + :where(.divide-y-reverse > :not(:last-child)) { --tw-divide-y-reverse: 1; } + @property --tw-divide-y-reverse { syntax: "*"; inherits: false; - initial-value: 0; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-divide-y-reverse: 0; - } - } + initial-value: 0; } " `) @@ -9395,18 +10367,22 @@ test('divide-style', async () => { --tw-border-style: dashed; border-style: dashed; } + :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-none > :not(:last-child)) { --tw-border-style: none; border-style: none; } + :where(.divide-solid > :not(:last-child)) { --tw-border-style: solid; border-style: solid; @@ -9467,104 +10443,119 @@ test('accent', async () => { --color-red-500: #ef4444; --accent-color-blue-500: #3b82f6; } + .accent-\\[\\#0088cc\\] { - accent-color: #0088cc; - } - .accent-\\[\\#0088cc\\]\\/50 { - accent-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - accent-color: color-mix(in oklab, #0088cc 50%, transparent); + accent-color: #08c; } - .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { - accent-color: color-mix(in oklab, #0088cc 50%, transparent); + + .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { + accent-color: oklab(59.9824% -.067 -.124 / .5); } + .accent-blue-500 { accent-color: var(--accent-color-blue-500); } - .accent-current { - accent-color: currentcolor; - } - .accent-current\\/50 { - accent-color: currentcolor; + + .accent-current, .accent-current\\/50 { + accent-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .accent-current\\/50 { accent-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .accent-current\\/\\[0\\.5\\] { - accent-color: currentcolor; + accent-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .accent-current\\/\\[0\\.5\\] { accent-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .accent-current\\/\\[50\\%\\] { - accent-color: currentcolor; + accent-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .accent-current\\/\\[50\\%\\] { accent-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .accent-inherit { accent-color: inherit; } + .accent-red-500 { accent-color: var(--color-red-500); } + .accent-red-500\\/2\\.5 { - accent-color: color-mix(in srgb, #ef4444 2.5%, transparent); + accent-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .accent-red-500\\/2\\.5 { accent-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .accent-red-500\\/2\\.25 { - accent-color: color-mix(in srgb, #ef4444 2.25%, transparent); + accent-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .accent-red-500\\/2\\.25 { accent-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .accent-red-500\\/2\\.75 { - accent-color: color-mix(in srgb, #ef4444 2.75%, transparent); + accent-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .accent-red-500\\/2\\.75 { accent-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .accent-red-500\\/50 { - accent-color: color-mix(in srgb, #ef4444 50%, transparent); + accent-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .accent-red-500\\/50 { accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .accent-red-500\\/\\[0\\.5\\] { - accent-color: color-mix(in srgb, #ef4444 50%, transparent); + accent-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .accent-red-500\\/\\[0\\.5\\] { accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .accent-red-500\\/\\[50\\%\\] { - accent-color: color-mix(in srgb, #ef4444 50%, transparent); + accent-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .accent-red-500\\/\\[50\\%\\] { accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .accent-transparent { - accent-color: transparent; + accent-color: #0000; } " `) @@ -9642,104 +10633,119 @@ test('caret', async () => { --color-red-500: #ef4444; --caret-color-blue-500: #3b82f6; } + .caret-\\[\\#0088cc\\] { - caret-color: #0088cc; - } - .caret-\\[\\#0088cc\\]\\/50 { - caret-color: color-mix(in oklab, #0088cc 50%, transparent); + caret-color: #08c; } - .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - caret-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { - caret-color: color-mix(in oklab, #0088cc 50%, transparent); + + .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { + caret-color: oklab(59.9824% -.067 -.124 / .5); } + .caret-blue-500 { caret-color: var(--caret-color-blue-500); } - .caret-current { - caret-color: currentcolor; - } - .caret-current\\/50 { - caret-color: currentcolor; + + .caret-current, .caret-current\\/50 { + caret-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .caret-current\\/50 { caret-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .caret-current\\/\\[0\\.5\\] { - caret-color: currentcolor; + caret-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .caret-current\\/\\[0\\.5\\] { caret-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .caret-current\\/\\[50\\%\\] { - caret-color: currentcolor; + caret-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .caret-current\\/\\[50\\%\\] { caret-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .caret-inherit { caret-color: inherit; } + .caret-red-500 { caret-color: var(--color-red-500); } + .caret-red-500\\/2\\.5 { - caret-color: color-mix(in srgb, #ef4444 2.5%, transparent); + caret-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .caret-red-500\\/2\\.5 { caret-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .caret-red-500\\/2\\.25 { - caret-color: color-mix(in srgb, #ef4444 2.25%, transparent); + caret-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .caret-red-500\\/2\\.25 { caret-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .caret-red-500\\/2\\.75 { - caret-color: color-mix(in srgb, #ef4444 2.75%, transparent); + caret-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .caret-red-500\\/2\\.75 { caret-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .caret-red-500\\/50 { - caret-color: color-mix(in srgb, #ef4444 50%, transparent); + caret-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .caret-red-500\\/50 { caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .caret-red-500\\/\\[0\\.5\\] { - caret-color: color-mix(in srgb, #ef4444 50%, transparent); + caret-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .caret-red-500\\/\\[0\\.5\\] { caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .caret-red-500\\/\\[50\\%\\] { - caret-color: color-mix(in srgb, #ef4444 50%, transparent); + caret-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .caret-red-500\\/\\[50\\%\\] { caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .caret-transparent { - caret-color: transparent; + caret-color: #0000; } " `) @@ -9815,104 +10821,119 @@ test('divide-color', async () => { --color-red-500: #ef4444; --border-color-best-blue: #6495ed; } + :where(.divide-\\[\\#0088cc\\] > :not(:last-child)) { - border-color: #0088cc; + border-color: #08c; } - :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)) { - border-color: color-mix(in oklab, #0088cc 50%, transparent); - } - :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)) { - border-color: color-mix(in oklab, #0088cc 50%, transparent); - } - :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) { - border-color: color-mix(in oklab, #0088cc 50%, transparent); + + :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% -.067 -.124 / .5); } + :where(.divide-best-blue > :not(:last-child)) { border-color: var(--border-color-best-blue); } - :where(.divide-current > :not(:last-child)) { - border-color: currentcolor; - } - :where(.divide-current\\/50 > :not(:last-child)) { - border-color: currentcolor; + + :where(.divide-current > :not(:last-child)), :where(.divide-current\\/50 > :not(:last-child)) { + border-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { :where(.divide-current\\/50 > :not(:last-child)) { border-color: color-mix(in oklab, currentcolor 50%, transparent); } } + :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) { - border-color: currentcolor; + border-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) { border-color: color-mix(in oklab, currentcolor 50%, transparent); } } + :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { - border-color: currentcolor; + border-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) { border-color: color-mix(in oklab, currentcolor 50%, transparent); } } + :where(.divide-inherit > :not(:last-child)) { border-color: inherit; } + :where(.divide-red-500 > :not(:last-child)) { border-color: var(--color-red-500); } + :where(.divide-red-500\\/2\\.5 > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 2.5%, transparent); + border-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { :where(.divide-red-500\\/2\\.5 > :not(:last-child)) { border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + :where(.divide-red-500\\/2\\.25 > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 2.25%, transparent); + border-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { :where(.divide-red-500\\/2\\.25 > :not(:last-child)) { border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + :where(.divide-red-500\\/2\\.75 > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 2.75%, transparent); + border-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { :where(.divide-red-500\\/2\\.75 > :not(:last-child)) { border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + :where(.divide-red-500\\/50 > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 50%, transparent); + border-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { :where(.divide-red-500\\/50 > :not(:last-child)) { border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 50%, transparent); + border-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) { border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) { - border-color: color-mix(in srgb, #ef4444 50%, transparent); + border-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { :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)) { - border-color: transparent; + border-color: #0000; } " `) @@ -9967,23 +10988,29 @@ test('place-self', async () => { .place-self-auto { place-self: auto; } + .place-self-center { place-self: center; } + .place-self-center-safe { place-self: safe center; } + .place-self-end { place-self: end; } + .place-self-end-safe { place-self: safe end; } + .place-self-start { place-self: start; } + .place-self-stretch { - place-self: stretch; + place-self: stretch stretch; } " `) @@ -10022,27 +11049,35 @@ test('self', async () => { .self-auto { align-self: auto; } + .self-baseline { align-self: baseline; } + .self-baseline-last { align-self: last baseline; } + .self-center { align-self: center; } + .self-center-safe { align-self: safe center; } + .self-end { align-self: flex-end; } + .self-end-safe { align-self: safe flex-end; } + .self-start { align-self: flex-start; } + .self-stretch { align-self: stretch; } @@ -10084,21 +11119,27 @@ test('justify-self', async () => { .justify-self-auto { justify-self: auto; } + .justify-self-center { justify-self: center; } + .justify-self-center-safe { justify-self: safe center; } + .justify-self-end { justify-self: flex-end; } + .justify-self-end-safe { justify-self: safe flex-end; } + .justify-self-start { justify-self: flex-start; } + .justify-self-stretch { justify-self: stretch; } @@ -10137,15 +11178,19 @@ test('overflow', async () => { .overflow-auto { overflow: auto; } + .overflow-clip { overflow: clip; } + .overflow-hidden { overflow: hidden; } + .overflow-scroll { overflow: scroll; } + .overflow-visible { overflow: visible; } @@ -10182,15 +11227,19 @@ test('overflow-x', async () => { .overflow-x-auto { overflow-x: auto; } + .overflow-x-clip { overflow-x: clip; } + .overflow-x-hidden { overflow-x: hidden; } + .overflow-x-scroll { overflow-x: scroll; } + .overflow-x-visible { overflow-x: visible; } @@ -10227,15 +11276,19 @@ test('overflow-y', async () => { .overflow-y-auto { overflow-y: auto; } + .overflow-y-clip { overflow-y: clip; } + .overflow-y-hidden { overflow-y: hidden; } + .overflow-y-scroll { overflow-y: scroll; } + .overflow-y-visible { overflow-y: visible; } @@ -10265,9 +11318,11 @@ test('overscroll', async () => { .overscroll-auto { overscroll-behavior: auto; } + .overscroll-contain { overscroll-behavior: contain; } + .overscroll-none { overscroll-behavior: none; } @@ -10293,9 +11348,11 @@ test('overscroll-x', async () => { .overscroll-x-auto { overscroll-behavior-x: auto; } + .overscroll-x-contain { overscroll-behavior-x: contain; } + .overscroll-x-none { overscroll-behavior-x: none; } @@ -10321,9 +11378,11 @@ test('overscroll-y', async () => { .overscroll-y-auto { overscroll-behavior-y: auto; } + .overscroll-y-contain { overscroll-behavior-y: contain; } + .overscroll-y-none { overscroll-behavior-y: none; } @@ -10348,6 +11407,7 @@ test('scroll-behavior', async () => { .scroll-auto { scroll-behavior: auto; } + .scroll-smooth { scroll-behavior: smooth; } @@ -10364,9 +11424,11 @@ test('scrollbar-width', async () => { .scrollbar-auto { scrollbar-width: auto; } + .scrollbar-none { scrollbar-width: none; } + .scrollbar-thin { scrollbar-width: thin; } @@ -10392,9 +11454,11 @@ test('scrollbar-gutter', async () => { .scrollbar-gutter-auto { scrollbar-gutter: auto; } + .scrollbar-gutter-both { scrollbar-gutter: stable both-edges; } + .scrollbar-gutter-stable { scrollbar-gutter: stable; } @@ -10435,74 +11499,88 @@ test('scrollbar-thumb', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-scrollbar-thumb: #0000; + --tw-scrollbar-track: #0000; + } + } + } + :root, :host { --color-red-500: #ef4444; } + .scrollbar-thumb-\\[\\#0088cc\\] { - --tw-scrollbar-thumb: #0088cc; + --tw-scrollbar-thumb: #08c; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-thumb-\\[\\#0088cc\\]\\/50 { - --tw-scrollbar-thumb: color-mix(in oklab, #0088cc 50%, transparent); + --tw-scrollbar-thumb: oklab(59.9824% -.067 -.124 / .5); scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-thumb-current { --tw-scrollbar-thumb: currentcolor; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-thumb-inherit { --tw-scrollbar-thumb: inherit; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-thumb-red-500 { --tw-scrollbar-thumb: var(--color-red-500); scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-thumb-red-500\\/50 { - --tw-scrollbar-thumb: color-mix(in srgb, #ef4444 50%, transparent); + --tw-scrollbar-thumb: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .scrollbar-thumb-red-500\\/50 { --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .scrollbar-thumb-red-500\\/50 { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-thumb-red-500\\/\\[0\\.5\\] { - --tw-scrollbar-thumb: color-mix(in srgb, #ef4444 50%, transparent); + --tw-scrollbar-thumb: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .scrollbar-thumb-red-500\\/\\[0\\.5\\] { --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .scrollbar-thumb-red-500\\/\\[0\\.5\\] { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-thumb-transparent { --tw-scrollbar-thumb: transparent; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + @property --tw-scrollbar-thumb { syntax: ""; inherits: false; initial-value: #0000; } + @property --tw-scrollbar-track { syntax: ""; inherits: false; initial-value: #0000; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-scrollbar-thumb: #0000; - --tw-scrollbar-track: #0000; - } - } - } " `) expect( @@ -10538,74 +11616,88 @@ test('scrollbar-track', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-scrollbar-thumb: #0000; + --tw-scrollbar-track: #0000; + } + } + } + :root, :host { --color-red-500: #ef4444; } + .scrollbar-track-\\[\\#0088cc\\] { - --tw-scrollbar-track: #0088cc; + --tw-scrollbar-track: #08c; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-track-\\[\\#0088cc\\]\\/50 { - --tw-scrollbar-track: color-mix(in oklab, #0088cc 50%, transparent); + --tw-scrollbar-track: oklab(59.9824% -.067 -.124 / .5); scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-track-current { --tw-scrollbar-track: currentcolor; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-track-inherit { --tw-scrollbar-track: inherit; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-track-red-500 { --tw-scrollbar-track: var(--color-red-500); scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-track-red-500\\/50 { - --tw-scrollbar-track: color-mix(in srgb, #ef4444 50%, transparent); + --tw-scrollbar-track: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .scrollbar-track-red-500\\/50 { --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .scrollbar-track-red-500\\/50 { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-track-red-500\\/\\[0\\.5\\] { - --tw-scrollbar-track: color-mix(in srgb, #ef4444 50%, transparent); + --tw-scrollbar-track: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .scrollbar-track-red-500\\/\\[0\\.5\\] { --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .scrollbar-track-red-500\\/\\[0\\.5\\] { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + .scrollbar-track-transparent { --tw-scrollbar-track: transparent; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } + @property --tw-scrollbar-thumb { syntax: ""; inherits: false; initial-value: #0000; } + @property --tw-scrollbar-track { syntax: ""; inherits: false; initial-value: #0000; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-scrollbar-thumb: #0000; - --tw-scrollbar-track: #0000; - } - } - } " `) expect( @@ -10623,9 +11715,9 @@ test('truncate', async () => { expect(await run(['truncate'])).toMatchInlineSnapshot(` " .truncate { - overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + overflow: hidden; } " `) @@ -10638,6 +11730,7 @@ test('text-overflow', async () => { .text-clip { text-overflow: clip; } + .text-ellipsis { text-overflow: ellipsis; } @@ -10655,10 +11748,12 @@ test('hyphens', async () => { -webkit-hyphens: auto; hyphens: auto; } + .hyphens-manual { -webkit-hyphens: manual; hyphens: manual; } + .hyphens-none { -webkit-hyphens: none; hyphens: none; @@ -10693,18 +11788,23 @@ test('whitespace', async () => { .whitespace-break-spaces { white-space: break-spaces; } + .whitespace-normal { white-space: normal; } + .whitespace-nowrap { white-space: nowrap; } + .whitespace-pre { white-space: pre; } + .whitespace-pre-line { white-space: pre-line; } + .whitespace-pre-wrap { white-space: pre-wrap; } @@ -10735,12 +11835,15 @@ test('tab', async () => { .tab-2 { tab-size: 2; } + .tab-8 { tab-size: 8; } + .tab-\\[3\\] { tab-size: 3; } + .tab-\\[12px\\] { tab-size: 12px; } @@ -10766,12 +11869,15 @@ test('text-wrap', async () => { .text-balance { text-wrap: balance; } + .text-nowrap { text-wrap: nowrap; } + .text-pretty { text-wrap: pretty; } + .text-wrap { text-wrap: wrap; } @@ -10799,12 +11905,15 @@ test('word-break', async () => { overflow-wrap: normal; word-break: normal; } + .break-words { overflow-wrap: break-word; } + .break-all { word-break: break-all; } + .break-keep { word-break: keep-all; } @@ -10830,9 +11939,11 @@ test('overflow-wrap', async () => { .wrap-anywhere { overflow-wrap: anywhere; } + .wrap-break-word { overflow-wrap: break-word; } + .wrap-normal { overflow-wrap: normal; } @@ -10865,21 +11976,26 @@ test('rounded', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded { border-radius: var(--radius); } + .rounded-\\[4px\\] { border-radius: 4px; } + .rounded-full { - border-radius: calc(infinity * 1px); + border-radius: 3.40282e38px; } + .rounded-none { border-radius: 0; } + .rounded-sm { border-radius: var(--radius-sm); } @@ -10900,6 +12016,7 @@ test('rounded', async () => { :root, :host { --radius-full: 99999px; } + .rounded-full { border-radius: var(--radius-full); } @@ -10940,25 +12057,30 @@ test('rounded-s', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-s { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); } + .rounded-s-\\[4px\\] { border-start-start-radius: 4px; border-end-start-radius: 4px; } + .rounded-s-full { border-start-start-radius: var(--radius-full); border-end-start-radius: var(--radius-full); } + .rounded-s-none { border-start-start-radius: var(--radius-none); border-end-start-radius: var(--radius-none); } + .rounded-s-sm { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); @@ -11000,25 +12122,30 @@ test('rounded-e', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-e { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); } + .rounded-e-\\[4px\\] { border-start-end-radius: 4px; border-end-end-radius: 4px; } + .rounded-e-full { border-start-end-radius: var(--radius-full); border-end-end-radius: var(--radius-full); } + .rounded-e-none { border-start-end-radius: var(--radius-none); border-end-end-radius: var(--radius-none); } + .rounded-e-sm { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); @@ -11060,25 +12187,30 @@ test('rounded-t', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-t { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } + .rounded-t-\\[4px\\] { border-top-left-radius: 4px; border-top-right-radius: 4px; } + .rounded-t-full { border-top-left-radius: var(--radius-full); border-top-right-radius: var(--radius-full); } + .rounded-t-none { border-top-left-radius: var(--radius-none); border-top-right-radius: var(--radius-none); } + .rounded-t-sm { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); @@ -11120,25 +12252,30 @@ test('rounded-r', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-r { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); } + .rounded-r-\\[4px\\] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .rounded-r-full { border-top-right-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); } + .rounded-r-none { border-top-right-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); } + .rounded-r-sm { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); @@ -11180,25 +12317,30 @@ test('rounded-b', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-b { border-bottom-right-radius: var(--radius); border-bottom-left-radius: var(--radius); } + .rounded-b-\\[4px\\] { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .rounded-b-full { border-bottom-right-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); } + .rounded-b-none { border-bottom-right-radius: var(--radius-none); border-bottom-left-radius: var(--radius-none); } + .rounded-b-sm { border-bottom-right-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); @@ -11240,25 +12382,30 @@ test('rounded-l', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-l { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); } + .rounded-l-\\[4px\\] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .rounded-l-full { border-top-left-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); } + .rounded-l-none { border-top-left-radius: var(--radius-none); border-bottom-left-radius: var(--radius-none); } + .rounded-l-sm { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); @@ -11300,21 +12447,26 @@ test('rounded-ss', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-ss { border-start-start-radius: var(--radius); } + .rounded-ss-\\[4px\\] { border-start-start-radius: 4px; } + .rounded-ss-full { border-start-start-radius: var(--radius-full); } + .rounded-ss-none { border-start-start-radius: var(--radius-none); } + .rounded-ss-sm { border-start-start-radius: var(--radius-sm); } @@ -11355,21 +12507,26 @@ test('rounded-se', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-se { border-start-end-radius: var(--radius); } + .rounded-se-\\[4px\\] { border-start-end-radius: 4px; } + .rounded-se-full { border-start-end-radius: var(--radius-full); } + .rounded-se-none { border-start-end-radius: var(--radius-none); } + .rounded-se-sm { border-start-end-radius: var(--radius-sm); } @@ -11410,21 +12567,26 @@ test('rounded-ee', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-ee { border-end-end-radius: var(--radius); } + .rounded-ee-\\[4px\\] { border-end-end-radius: 4px; } + .rounded-ee-full { border-end-end-radius: var(--radius-full); } + .rounded-ee-none { border-end-end-radius: var(--radius-none); } + .rounded-ee-sm { border-end-end-radius: var(--radius-sm); } @@ -11465,21 +12627,26 @@ test('rounded-es', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-es { border-end-start-radius: var(--radius); } + .rounded-es-\\[4px\\] { border-end-start-radius: 4px; } + .rounded-es-full { border-end-start-radius: var(--radius-full); } + .rounded-es-none { border-end-start-radius: var(--radius-none); } + .rounded-es-sm { border-end-start-radius: var(--radius-sm); } @@ -11520,21 +12687,26 @@ test('rounded-tl', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-tl { border-top-left-radius: var(--radius); } + .rounded-tl-\\[4px\\] { border-top-left-radius: 4px; } + .rounded-tl-full { border-top-left-radius: var(--radius-full); } + .rounded-tl-none { border-top-left-radius: var(--radius-none); } + .rounded-tl-sm { border-top-left-radius: var(--radius-sm); } @@ -11575,21 +12747,26 @@ test('rounded-tr', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-tr { border-top-right-radius: var(--radius); } + .rounded-tr-\\[4px\\] { border-top-right-radius: 4px; } + .rounded-tr-full { border-top-right-radius: var(--radius-full); } + .rounded-tr-none { border-top-right-radius: var(--radius-none); } + .rounded-tr-sm { border-top-right-radius: var(--radius-sm); } @@ -11630,21 +12807,26 @@ test('rounded-br', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-br { border-bottom-right-radius: var(--radius); } + .rounded-br-\\[4px\\] { border-bottom-right-radius: 4px; } + .rounded-br-full { border-bottom-right-radius: var(--radius-full); } + .rounded-br-none { border-bottom-right-radius: var(--radius-none); } + .rounded-br-sm { border-bottom-right-radius: var(--radius-sm); } @@ -11685,21 +12867,26 @@ test('rounded-bl', async () => { :root, :host { --radius-none: 0px; --radius-full: 9999px; - --radius-sm: 0.125rem; - --radius: 0.25rem; + --radius-sm: .125rem; + --radius: .25rem; } + .rounded-bl { border-bottom-left-radius: var(--radius); } + .rounded-bl-\\[4px\\] { border-bottom-left-radius: 4px; } + .rounded-bl-full { border-bottom-left-radius: var(--radius-full); } + .rounded-bl-none { border-bottom-left-radius: var(--radius-none); } + .rounded-bl-sm { border-bottom-left-radius: var(--radius-sm); } @@ -11737,22 +12924,27 @@ test('border-style', async () => { --tw-border-style: dashed; border-style: dashed; } + .border-dotted { --tw-border-style: dotted; border-style: dotted; } + .border-double { --tw-border-style: double; border-style: double; } + .border-hidden { --tw-border-style: hidden; border-style: hidden; } + .border-none { --tw-border-style: none; border-style: none; } + .border-solid { --tw-border-style: solid; border-style: solid; @@ -11885,23 +13077,24 @@ test('border with custom default border width', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-border-style: solid; + } + } + } + .border { border-style: var(--tw-border-style); border-width: 2px; } + @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-border-style: solid; - } - } - } " `) expect(await run(['-border', 'border/foo'])).toEqual('') @@ -12065,660 +13258,815 @@ test('bg', async () => { --color-red-500: #ef4444; --background-color-blue-500: #3b82f6; } + .bg-\\[\\#0088cc\\] { - background-color: #0088cc; - } - .bg-\\[\\#0088cc\\]\\/50 { - background-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - background-color: color-mix(in oklab, #0088cc 50%, transparent); + background-color: #08c; } - .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { - background-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .bg-\\[color\\:var\\(--some-var\\)\\] { - background-color: var(--some-var); + + .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { + background-color: oklab(59.9824% -.067 -.124 / .5); } - .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 { + + .bg-\\[color\\:var\\(--some-var\\)\\], .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 { background-color: var(--some-var); } + @supports (color: color-mix(in lab, red, red)) { .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } + .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] { background-color: var(--some-var); } + @supports (color: color-mix(in lab, red, red)) { .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } + .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] { background-color: var(--some-var); } + @supports (color: color-mix(in lab, red, red)) { .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } - .bg-\\[var\\(--some-var\\)\\] { - background-color: var(--some-var); - } - .bg-\\[var\\(--some-var\\)\\]\\/50 { + + .bg-\\[var\\(--some-var\\)\\], .bg-\\[var\\(--some-var\\)\\]\\/50 { background-color: var(--some-var); } + @supports (color: color-mix(in lab, red, red)) { .bg-\\[var\\(--some-var\\)\\]\\/50 { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } + .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] { background-color: var(--some-var); } + @supports (color: color-mix(in lab, red, red)) { .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } + .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] { background-color: var(--some-var); } + @supports (color: color-mix(in lab, red, red)) { .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } } + .bg-blue-500 { background-color: var(--background-color-blue-500); } - .bg-current { - background-color: currentcolor; - } - .bg-current\\/50 { - background-color: currentcolor; + + .bg-current, .bg-current\\/50 { + background-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .bg-current\\/50 { background-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .bg-current\\/\\[0\\.5\\] { - background-color: currentcolor; + background-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .bg-current\\/\\[0\\.5\\] { background-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .bg-current\\/\\[50\\%\\] { - background-color: currentcolor; + background-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .bg-current\\/\\[50\\%\\] { background-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .bg-current\\/\\[var\\(--bg-opacity\\)\\] { - background-color: currentcolor; + background-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .bg-current\\/\\[var\\(--bg-opacity\\)\\] { background-color: color-mix(in oklab, currentcolor var(--bg-opacity), transparent); } } + .bg-inherit { background-color: inherit; } + .bg-red-500 { background-color: var(--color-red-500); } + .bg-red-500\\/2\\.5 { - background-color: color-mix(in srgb, #ef4444 2.5%, transparent); + background-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .bg-red-500\\/2\\.5 { background-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .bg-red-500\\/2\\.25 { - background-color: color-mix(in srgb, #ef4444 2.25%, transparent); + background-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .bg-red-500\\/2\\.25 { background-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .bg-red-500\\/2\\.75 { - background-color: color-mix(in srgb, #ef4444 2.75%, transparent); + background-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .bg-red-500\\/2\\.75 { background-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .bg-red-500\\/50 { - background-color: color-mix(in srgb, #ef4444 50%, transparent); + background-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .bg-red-500\\/50 { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .bg-red-500\\/100 { background-color: var(--color-red-500); } + .bg-red-500\\/\\[0\\.5\\] { - background-color: color-mix(in srgb, #ef4444 50%, transparent); + background-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .bg-red-500\\/\\[0\\.5\\] { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .bg-red-500\\/\\[50\\%\\] { - background-color: color-mix(in srgb, #ef4444 50%, transparent); + background-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .bg-red-500\\/\\[50\\%\\] { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .bg-red-500\\/\\[100\\%\\] { background-color: var(--color-red-500); } + .bg-transparent { - background-color: transparent; + background-color: #0000; } + .-bg-linear-45 { --tw-gradient-position: calc(45deg * -1); } + @supports (background-image: linear-gradient(in lab, red, red)) { .-bg-linear-45 { --tw-gradient-position: calc(45deg * -1) in oklab; } } + .-bg-linear-45 { background-image: linear-gradient(var(--tw-gradient-stops)); } + .-bg-linear-45\\/oklab { --tw-gradient-position: calc(45deg * -1); } + @supports (background-image: linear-gradient(in lab, red, red)) { .-bg-linear-45\\/oklab { --tw-gradient-position: calc(45deg * -1) in oklab; } } + .-bg-linear-45\\/oklab { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-45 { --tw-gradient-position: 45deg; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-45 { --tw-gradient-position: 45deg in oklab; } } + .bg-linear-45 { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-45\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: 45deg; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-45\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: 45deg in hsl longer hue; } } + .bg-linear-45\\/\\[in_hsl_longer_hue\\] { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-45\\/oklab { --tw-gradient-position: 45deg; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-45\\/oklab { --tw-gradient-position: 45deg in oklab; } } + .bg-linear-45\\/oklab { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-45\\/shorter { --tw-gradient-position: 45deg; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-45\\/shorter { --tw-gradient-position: 45deg in oklch shorter hue; } } + .bg-linear-45\\/shorter { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-b { --tw-gradient-position: to bottom; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-b { --tw-gradient-position: to bottom in oklab; } } + .bg-linear-to-b { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-bl { --tw-gradient-position: to bottom left; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-bl { --tw-gradient-position: to bottom left in oklab; } } + .bg-linear-to-bl { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-br { --tw-gradient-position: to bottom right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-br { --tw-gradient-position: to bottom right in oklab; } } + .bg-linear-to-br { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-l { --tw-gradient-position: to left; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-l { --tw-gradient-position: to left in oklab; } } + .bg-linear-to-l { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-r { --tw-gradient-position: to right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-r { --tw-gradient-position: to right in oklab; } } + .bg-linear-to-r { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: to right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: to right in hsl longer hue; } } + .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-r\\/\\[longer\\] { --tw-gradient-position: to right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-r\\/\\[longer\\] { --tw-gradient-position: to right longer; } } + .bg-linear-to-r\\/\\[longer\\] { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-r\\/decreasing { --tw-gradient-position: to right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-r\\/decreasing { --tw-gradient-position: to right in oklch decreasing hue; } } + .bg-linear-to-r\\/decreasing { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-r\\/hsl { --tw-gradient-position: to right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-r\\/hsl { --tw-gradient-position: to right in hsl; } } + .bg-linear-to-r\\/hsl { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-r\\/increasing { --tw-gradient-position: to right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-r\\/increasing { --tw-gradient-position: to right in oklch increasing hue; } } + .bg-linear-to-r\\/increasing { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-r\\/longer { --tw-gradient-position: to right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-r\\/longer { --tw-gradient-position: to right in oklch longer hue; } } + .bg-linear-to-r\\/longer { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-r\\/oklab { --tw-gradient-position: to right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-r\\/oklab { --tw-gradient-position: to right in oklab; } } + .bg-linear-to-r\\/oklab { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-r\\/oklch { --tw-gradient-position: to right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-r\\/oklch { --tw-gradient-position: to right in oklch; } } + .bg-linear-to-r\\/oklch { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-r\\/shorter { --tw-gradient-position: to right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-r\\/shorter { --tw-gradient-position: to right in oklch shorter hue; } } + .bg-linear-to-r\\/shorter { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-r\\/srgb { --tw-gradient-position: to right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-r\\/srgb { --tw-gradient-position: to right in srgb; } } + .bg-linear-to-r\\/srgb { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-t { --tw-gradient-position: to top; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-t { --tw-gradient-position: to top in oklab; } } + .bg-linear-to-t { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-tl { --tw-gradient-position: to top left; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-tl { --tw-gradient-position: to top left in oklab; } } + .bg-linear-to-tl { background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-linear-to-tr { --tw-gradient-position: to top right; } + @supports (background-image: linear-gradient(in lab, red, red)) { .bg-linear-to-tr { --tw-gradient-position: to top right in oklab; } } + .bg-linear-to-tr { background-image: linear-gradient(var(--tw-gradient-stops)); } + .-bg-conic-45\\/oklab { --tw-gradient-position: from calc(45deg * -1) in oklab; background-image: conic-gradient(var(--tw-gradient-stops)); } + .-bg-linear-\\[1\\.3rad\\] { - --tw-gradient-position: calc(1.3rad * -1); - background-image: linear-gradient(var(--tw-gradient-stops,calc(1.3rad * -1))); + --tw-gradient-position: calc(74.4845deg * -1); + background-image: linear-gradient(var(--tw-gradient-stops, calc(74.4845deg * -1))); } + .-bg-linear-\\[125deg\\] { --tw-gradient-position: calc(125deg * -1); - background-image: linear-gradient(var(--tw-gradient-stops,calc(125deg * -1))); + background-image: linear-gradient(var(--tw-gradient-stops, calc(125deg * -1))); } + .bg-conic-45\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: from 45deg in hsl longer hue; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-conic-45\\/oklab { --tw-gradient-position: from 45deg in oklab; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-conic-45\\/shorter { --tw-gradient-position: from 45deg in oklch shorter hue; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-conic\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: in hsl longer hue; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-conic\\/decreasing { --tw-gradient-position: in oklch decreasing hue; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-conic\\/hsl { --tw-gradient-position: in hsl; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-conic\\/increasing { --tw-gradient-position: in oklch increasing hue; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-conic\\/longer { --tw-gradient-position: in oklch longer hue; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-conic\\/oklab { --tw-gradient-position: in oklab; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-conic\\/oklch { --tw-gradient-position: in oklch; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-conic\\/shorter { --tw-gradient-position: in oklch shorter hue; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-conic\\/srgb { --tw-gradient-position: in srgb; background-image: conic-gradient(var(--tw-gradient-stops)); } + .bg-linear-\\[1\\.3rad\\] { - --tw-gradient-position: 1.3rad; - background-image: linear-gradient(var(--tw-gradient-stops,1.3rad)); + --tw-gradient-position: 74.4845deg; + background-image: linear-gradient(var(--tw-gradient-stops, 74.4845deg)); } + .bg-linear-\\[125deg\\] { --tw-gradient-position: 125deg; - background-image: linear-gradient(var(--tw-gradient-stops,125deg)); + background-image: linear-gradient(var(--tw-gradient-stops, 125deg)); } + .bg-linear-\\[to_bottom\\] { --tw-gradient-position: to bottom; - background-image: linear-gradient(var(--tw-gradient-stops,to bottom)); + background-image: linear-gradient(var(--tw-gradient-stops, to bottom)); } + .bg-radial-\\[circle_at_center\\] { --tw-gradient-position: circle at center; - background-image: radial-gradient(var(--tw-gradient-stops,circle at center)); + background-image: radial-gradient(var(--tw-gradient-stops, circle at center)); } + .bg-radial\\/\\[in_hsl_longer_hue\\] { --tw-gradient-position: in hsl longer hue; background-image: radial-gradient(var(--tw-gradient-stops)); } + .bg-radial\\/decreasing { --tw-gradient-position: in oklch decreasing hue; background-image: radial-gradient(var(--tw-gradient-stops)); } + .bg-radial\\/hsl { --tw-gradient-position: in hsl; background-image: radial-gradient(var(--tw-gradient-stops)); } + .bg-radial\\/increasing { --tw-gradient-position: in oklch increasing hue; background-image: radial-gradient(var(--tw-gradient-stops)); } + .bg-radial\\/longer { --tw-gradient-position: in oklch longer hue; background-image: radial-gradient(var(--tw-gradient-stops)); } + .bg-radial\\/oklab { --tw-gradient-position: in oklab; background-image: radial-gradient(var(--tw-gradient-stops)); } + .bg-radial\\/oklch { --tw-gradient-position: in oklch; background-image: radial-gradient(var(--tw-gradient-stops)); } + .bg-radial\\/shorter { --tw-gradient-position: in oklch shorter hue; background-image: radial-gradient(var(--tw-gradient-stops)); } + .bg-radial\\/srgb { --tw-gradient-position: in srgb; background-image: radial-gradient(var(--tw-gradient-stops)); } + .bg-\\[image\\:var\\(--my-gradient\\)\\] { background-image: var(--my-gradient); } + .bg-\\[linear-gradient\\(to_bottom\\,red\\,blue\\)\\] { - background-image: linear-gradient(to bottom,red,blue); + background-image: linear-gradient(red, #00f); } + .bg-\\[url\\(\\/image\\.png\\)\\] { - background-image: url(/image.png); + background-image: url("/image.png"); } + .bg-\\[url\\:var\\(--my-url\\)\\] { background-image: var(--my-url); } + .bg-none { background-image: none; } + .bg-\\[contain\\] { background-size: contain; } + .bg-\\[cover\\] { background-size: cover; } - .bg-\\[length\\:120px_120px\\] { - background-size: 120px 120px; - } - .bg-\\[size\\:120px_120px\\] { + + .bg-\\[length\\:120px_120px\\], .bg-\\[size\\:120px_120px\\] { background-size: 120px 120px; } + .bg-auto { background-size: auto; } + .bg-contain { background-size: contain; } + .bg-cover { background-size: cover; } + .bg-fixed { background-attachment: fixed; } + .bg-local { background-attachment: local; } + .bg-scroll { background-attachment: scroll; } + .bg-\\[50\\%\\] { background-position: 50%; } + .bg-\\[120px\\] { background-position: 120px; } - .bg-\\[120px_120px\\] { - background-position: 120px 120px; - } - .bg-\\[position\\:120px_120px\\] { + + .bg-\\[120px_120px\\], .bg-\\[position\\:120px_120px\\] { background-position: 120px 120px; } + .bg-bottom { background-position: bottom; } + .bg-bottom-left { - background-position: left bottom; + background-position: 0 100%; } + .bg-bottom-right { - background-position: right bottom; + background-position: 100% 100%; } + .bg-center { background-position: center; } + .bg-left { - background-position: left; + background-position: 0; } + .bg-left-bottom { - background-position: left bottom; + background-position: 0 100%; } + .bg-left-top { - background-position: left top; + background-position: 0 0; } + .bg-right { - background-position: right; + background-position: 100%; } + .bg-right-bottom { - background-position: right bottom; + background-position: 100% 100%; } + .bg-right-top { - background-position: right top; + background-position: 100% 0; } + .bg-top { background-position: top; } + .bg-top-left { - background-position: left top; + background-position: 0 0; } + .bg-top-right { - background-position: right top; + background-position: 100% 0; } + .bg-no-repeat { background-repeat: no-repeat; } + .bg-repeat { background-repeat: repeat; } + .bg-repeat-round { background-repeat: round; } + .bg-repeat-space { background-repeat: space; } + .bg-repeat-x { background-repeat: repeat-x; } + .bg-repeat-y { background-repeat: repeat-y; } @@ -12833,27 +14181,32 @@ test('bg', async () => { ).toMatchInlineSnapshot(` " .bg-current\\/custom { - background-color: currentcolor; + background-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .bg-current\\/custom { background-color: color-mix(in oklab, currentcolor var(--opacity-custom, var(--custom-opacity)), transparent); } } + .bg-current\\/half { - background-color: currentcolor; + background-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .bg-current\\/half { - background-color: color-mix(in oklab, currentcolor var(--opacity-half, 0.5), transparent); + background-color: color-mix(in oklab, currentcolor var(--opacity-half, .5), transparent); } } + .\\[color\\:red\\]\\/half { - color: color-mix(in srgb, red 0.5, transparent); + color: color-mix(in srgb, red .5, transparent); } + @supports (color: color-mix(in lab, red, red)) { .\\[color\\:red\\]\\/half { - color: color-mix(in oklab, red var(--opacity-half, 0.5), transparent); + color: color-mix(in oklab, red var(--opacity-half, .5), transparent); } } " @@ -12876,9 +14229,11 @@ test('bg-position', async () => { .bg-position-\\[120px\\] { background-position: 120px; } + .bg-position-\\[120px_120px\\] { background-position: 120px 120px; } + .bg-position-\\[var\\(--some-var\\)\\] { background-position: var(--some-var); } @@ -12915,9 +14270,11 @@ test('bg-size', async () => { .bg-size-\\[120px\\] { background-size: 120px; } + .bg-size-\\[120px_120px\\] { background-size: 120px 120px; } + .bg-size-\\[var\\(--some-var\\)\\] { background-size: var(--some-var); } @@ -12984,260 +14341,308 @@ test('from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; - :root, :host { - --color-red-500: #ef4444; - } - .from-\\[\\#0088cc\\] { - --tw-gradient-from: #0088cc; - --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)); + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + } + } } - .from-\\[\\#0088cc\\]\\/50 { - --tw-gradient-from: color-mix(in oklab, #0088cc 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)); + + :root, :host { + --color-red-500: #ef4444; } - .from-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-from: color-mix(in oklab, #0088cc 50%, transparent); + + .from-\\[\\#0088cc\\] { + --tw-gradient-from: #08c; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in oklab, #0088cc 50%, transparent); + + .from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-from: oklab(59.9824% -.067 -.124 / .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)); } + .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)); } + .from-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-from: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .from-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .from-\\[color\\:var\\(--my-color\\)\\]\\/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)); } + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-from: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-from: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } + .from-\\[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)); } + .from-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-from: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .from-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .from-\\[var\\(--my-color\\)\\]\\/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)); } + .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-from: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .from-\\[var\\(--my-color\\)\\]\\/\\[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)); } + .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-from: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .from-\\[var\\(--my-color\\)\\]\\/\\[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)); } + .from-current { --tw-gradient-from: currentcolor; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .from-current\\/50 { --tw-gradient-from: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .from-current\\/50 { --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent); } } + .from-current\\/50 { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .from-current\\/\\[0\\.5\\] { --tw-gradient-from: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .from-current\\/\\[0\\.5\\] { --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)); } + .from-current\\/\\[50\\%\\] { --tw-gradient-from: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .from-current\\/\\[50\\%\\] { --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent); } } + .from-current\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .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)); } + .from-red-500 { --tw-gradient-from: var(--color-red-500); --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 { - --tw-gradient-from: color-mix(in srgb, #ef4444 50%, transparent); + --tw-gradient-from: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .from-red-500\\/50 { --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .from-red-500\\/50 { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .from-red-500\\/\\[0\\.5\\] { - --tw-gradient-from: color-mix(in srgb, #ef4444 50%, transparent); + --tw-gradient-from: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .from-red-500\\/\\[0\\.5\\] { --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)); } + .from-red-500\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in srgb, #ef4444 50%, transparent); + --tw-gradient-from: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .from-red-500\\/\\[50\\%\\] { --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .from-red-500\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .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)); } + .from-0\\% { --tw-gradient-from-position: 0%; } + .from-5\\% { --tw-gradient-from-position: 5%; } + .from-100\\% { --tw-gradient-from-position: 100%; } + .from-\\[50\\%\\] { --tw-gradient-from-position: 50%; } + .from-\\[50px\\] { --tw-gradient-from-position: 50px; } - .from-\\[length\\:var\\(--my-position\\)\\] { - --tw-gradient-from-position: var(--my-position); - } - .from-\\[percentage\\:var\\(--my-position\\)\\] { + + .from-\\[length\\:var\\(--my-position\\)\\], .from-\\[percentage\\:var\\(--my-position\\)\\] { --tw-gradient-from-position: var(--my-position); } + @property --tw-gradient-position { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } + @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } + @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } + @property --tw-gradient-stops { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-gradient-via-stops { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } + @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } + @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-gradient-position: initial; - --tw-gradient-from: #0000; - --tw-gradient-via: #0000; - --tw-gradient-to: #0000; - --tw-gradient-stops: initial; - --tw-gradient-via-stops: initial; - --tw-gradient-from-position: 0%; - --tw-gradient-via-position: 50%; - --tw-gradient-to-position: 100%; - } - } - } " `) expect( @@ -13321,282 +14726,328 @@ test('via', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + } + } + } + :root, :host { --color-red-500: #ef4444; } + .via-\\[\\#0088cc\\] { - --tw-gradient-via: #0088cc; - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-via-stops); - } - .via-\\[\\#0088cc\\]\\/50 { - --tw-gradient-via: color-mix(in oklab, #0088cc 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); - } - .via-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-via: color-mix(in oklab, #0088cc 50%, transparent); + --tw-gradient-via: #08c; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in oklab, #0088cc 50%, transparent); + + .via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-via: oklab(59.9824% -.067 -.124 / .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); } + .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); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-via: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .via-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .via-\\[color\\:var\\(--my-color\\)\\]\\/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); } + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-via: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[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); } + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-via: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[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); } + .via-\\[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); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-via: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .via-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .via-\\[var\\(--my-color\\)\\]\\/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); } + .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-via: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .via-\\[var\\(--my-color\\)\\]\\/\\[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); } + .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-via: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .via-\\[var\\(--my-color\\)\\]\\/\\[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); } + .via-current { --tw-gradient-via: currentcolor; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-current\\/50 { --tw-gradient-via: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .via-current\\/50 { --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent); } } + .via-current\\/50 { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-current\\/\\[0\\.5\\] { --tw-gradient-via: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .via-current\\/\\[0\\.5\\] { --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); } + .via-current\\/\\[50\\%\\] { --tw-gradient-via: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .via-current\\/\\[50\\%\\] { --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent); } } + .via-current\\/\\[50\\%\\] { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .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); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-red-500 { --tw-gradient-via: var(--color-red-500); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-red-500\\/50 { - --tw-gradient-via: color-mix(in srgb, #ef4444 50%, transparent); + --tw-gradient-via: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .via-red-500\\/50 { --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .via-red-500\\/50 { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-red-500\\/\\[0\\.5\\] { - --tw-gradient-via: color-mix(in srgb, #ef4444 50%, transparent); + --tw-gradient-via: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .via-red-500\\/\\[0\\.5\\] { --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); } + .via-red-500\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in srgb, #ef4444 50%, transparent); + --tw-gradient-via: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .via-red-500\\/\\[50\\%\\] { --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .via-red-500\\/\\[50\\%\\] { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .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); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-0\\% { --tw-gradient-via-position: 0%; } + .via-5\\% { --tw-gradient-via-position: 5%; } + .via-100\\% { --tw-gradient-via-position: 100%; } + .via-\\[50\\%\\] { --tw-gradient-via-position: 50%; } + .via-\\[50px\\] { --tw-gradient-via-position: 50px; } - .via-\\[length\\:var\\(--my-position\\)\\] { - --tw-gradient-via-position: var(--my-position); - } - .via-\\[percentage\\:var\\(--my-position\\)\\] { + + .via-\\[length\\:var\\(--my-position\\)\\], .via-\\[percentage\\:var\\(--my-position\\)\\] { --tw-gradient-via-position: var(--my-position); } + @property --tw-gradient-position { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } + @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } + @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } + @property --tw-gradient-stops { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-gradient-via-stops { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } + @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } + @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-gradient-position: initial; - --tw-gradient-from: #0000; - --tw-gradient-via: #0000; - --tw-gradient-to: #0000; - --tw-gradient-stops: initial; - --tw-gradient-via-stops: initial; - --tw-gradient-from-position: 0%; - --tw-gradient-via-position: 50%; - --tw-gradient-to-position: 100%; - } - } - } " `) expect( @@ -13678,260 +15129,308 @@ test('to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + } + } + } + :root, :host { --color-red-500: #ef4444; } + .to-\\[\\#0088cc\\] { - --tw-gradient-to: #0088cc; + --tw-gradient-to: #08c; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[\\#0088cc\\]\\/50 { - --tw-gradient-to: color-mix(in oklab, #0088cc 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)); - } - .to-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-gradient-to: color-mix(in oklab, #0088cc 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)); - } - .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in oklab, #0088cc 50%, transparent); + + .to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-to: oklab(59.9824% -.067 -.124 / .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)); } + .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)); } + .to-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-to: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .to-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .to-\\[color\\:var\\(--my-color\\)\\]\\/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)); } + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-to: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-to: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[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)); } + .to-\\[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)); } + .to-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-to: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .to-\\[var\\(--my-color\\)\\]\\/50 { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .to-\\[var\\(--my-color\\)\\]\\/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)); } + .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-to: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .to-\\[var\\(--my-color\\)\\]\\/\\[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)); } + .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-to: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .to-\\[var\\(--my-color\\)\\]\\/\\[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)); } + .to-current { --tw-gradient-to: currentcolor; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .to-current\\/50 { --tw-gradient-to: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .to-current\\/50 { --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent); } } + .to-current\\/50 { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .to-current\\/\\[0\\.5\\] { --tw-gradient-to: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .to-current\\/\\[0\\.5\\] { --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)); } + .to-current\\/\\[50\\%\\] { --tw-gradient-to: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .to-current\\/\\[50\\%\\] { --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent); } } + .to-current\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .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)); } + .to-red-500 { --tw-gradient-to: var(--color-red-500); --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 { - --tw-gradient-to: color-mix(in srgb, #ef4444 50%, transparent); + --tw-gradient-to: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .to-red-500\\/50 { --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .to-red-500\\/50 { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .to-red-500\\/\\[0\\.5\\] { - --tw-gradient-to: color-mix(in srgb, #ef4444 50%, transparent); + --tw-gradient-to: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .to-red-500\\/\\[0\\.5\\] { --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)); } + .to-red-500\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in srgb, #ef4444 50%, transparent); + --tw-gradient-to: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .to-red-500\\/\\[50\\%\\] { --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .to-red-500\\/\\[50\\%\\] { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .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)); } + .to-0\\% { --tw-gradient-to-position: 0%; } + .to-5\\% { --tw-gradient-to-position: 5%; } + .to-100\\% { --tw-gradient-to-position: 100%; } + .to-\\[50\\%\\] { --tw-gradient-to-position: 50%; } + .to-\\[50px\\] { --tw-gradient-to-position: 50px; } - .to-\\[length\\:var\\(--my-position\\)\\] { - --tw-gradient-to-position: var(--my-position); - } - .to-\\[percentage\\:var\\(--my-position\\)\\] { + + .to-\\[length\\:var\\(--my-position\\)\\], .to-\\[percentage\\:var\\(--my-position\\)\\] { --tw-gradient-to-position: var(--my-position); } + @property --tw-gradient-position { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } + @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } + @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } + @property --tw-gradient-stops { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-gradient-via-stops { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } + @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } + @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-gradient-position: initial; - --tw-gradient-from: #0000; - --tw-gradient-via: #0000; - --tw-gradient-to: #0000; - --tw-gradient-stops: initial; - --tw-gradient-via-stops: initial; - --tw-gradient-from-position: 0%; - --tw-gradient-via-position: 50%; - --tw-gradient-to-position: 100%; - } - } - } " `) expect( @@ -14037,126 +15536,199 @@ test('mask', async () => { ).toMatchInlineSnapshot(` " .mask-\\[image\\:var\\(--some-var\\)\\] { + -webkit-mask-image: var(--some-var); + -webkit-mask-image: var(--some-var); mask-image: var(--some-var); } + .mask-\\[linear-gradient\\(\\#ffff\\,\\#0000\\)\\] { - mask-image: linear-gradient(#ffff,#0000); + -webkit-mask-image: linear-gradient(#fff, #0000); + mask-image: linear-gradient(#fff, #0000); } + .mask-\\[url\\(http\\:\\/\\/example\\.com\\)\\] { - mask-image: url(http://example.com); - } - .mask-\\[url\\:var\\(--some-var\\)\\] { - mask-image: var(--some-var); + -webkit-mask-image: url("http://example.com"); + mask-image: url("http://example.com"); } - .mask-\\[var\\(--some-var\\)\\] { + + .mask-\\[url\\:var\\(--some-var\\)\\], .mask-\\[var\\(--some-var\\)\\] { + -webkit-mask-image: var(--some-var); + -webkit-mask-image: var(--some-var); mask-image: var(--some-var); } + .mask-none { + -webkit-mask-image: none; mask-image: none; } + .mask-add { + -webkit-mask-composite: source-over; + -webkit-mask-composite: source-over; mask-composite: add; } + .mask-exclude { + -webkit-mask-composite: xor; + -webkit-mask-composite: xor; mask-composite: exclude; } + .mask-intersect { + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; } + .mask-subtract { + -webkit-mask-composite: source-out; + -webkit-mask-composite: source-out; mask-composite: subtract; } + .mask-alpha { + -webkit-mask-source-type: alpha; + -webkit-mask-source-type: alpha; mask-mode: alpha; } + .mask-luminance { + -webkit-mask-source-type: luminance; + -webkit-mask-source-type: luminance; mask-mode: luminance; } + .mask-match { + -webkit-mask-source-type: auto; + -webkit-mask-source-type: auto; mask-mode: match-source; } + .mask-type-alpha { mask-type: alpha; } + .mask-type-luminance { mask-type: luminance; } + .mask-\\[contain\\] { + -webkit-mask-size: contain; mask-size: contain; } + .mask-\\[cover\\] { + -webkit-mask-size: cover; mask-size: cover; } - .mask-\\[length\\:120px_120px\\] { - mask-size: 120px 120px; - } - .mask-\\[size\\:120px_120px\\] { + + .mask-\\[length\\:120px_120px\\], .mask-\\[size\\:120px_120px\\] { + -webkit-mask-size: 120px 120px; mask-size: 120px 120px; } + .mask-auto { + -webkit-mask-size: auto; mask-size: auto; } + .mask-contain { + -webkit-mask-size: contain; mask-size: contain; } + .mask-cover { + -webkit-mask-size: cover; mask-size: cover; } + .mask-\\[50\\%\\] { + -webkit-mask-position: 50%; mask-position: 50%; } + .mask-\\[120px\\] { + -webkit-mask-position: 120px; mask-position: 120px; } - .mask-\\[120px_120px\\] { - mask-position: 120px 120px; - } - .mask-\\[position\\:120px_120px\\] { + + .mask-\\[120px_120px\\], .mask-\\[position\\:120px_120px\\] { + -webkit-mask-position: 120px 120px; mask-position: 120px 120px; } + .mask-bottom { + -webkit-mask-position: bottom; mask-position: bottom; } + .mask-bottom-left { - mask-position: left bottom; + -webkit-mask-position: 0 100%; + mask-position: 0 100%; } + .mask-bottom-right { - mask-position: right bottom; + -webkit-mask-position: 100% 100%; + mask-position: 100% 100%; } + .mask-center { + -webkit-mask-position: center; mask-position: center; } + .mask-left { - mask-position: left; + -webkit-mask-position: 0; + mask-position: 0; } + .mask-right { - mask-position: right; + -webkit-mask-position: 100%; + mask-position: 100%; } + .mask-top { + -webkit-mask-position: top; mask-position: top; } + .mask-top-left { - mask-position: left top; + -webkit-mask-position: 0 0; + mask-position: 0 0; } + .mask-top-right { - mask-position: right top; + -webkit-mask-position: 100% 0; + mask-position: 100% 0; } + .mask-no-repeat { + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } + .mask-repeat { + -webkit-mask-repeat: repeat; mask-repeat: repeat; } + .mask-repeat-round { + -webkit-mask-repeat: round; mask-repeat: round; } + .mask-repeat-space { + -webkit-mask-repeat: space; mask-repeat: space; } + .mask-repeat-x { + -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; } + .mask-repeat-y { + -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; } " @@ -14262,11 +15834,12 @@ test('mask', async () => { ).toMatchInlineSnapshot(` " .\\[color\\:red\\]\\/half { - color: color-mix(in srgb, red 0.5, transparent); + color: color-mix(in srgb, red .5, transparent); } + @supports (color: color-mix(in lab, red, red)) { .\\[color\\:red\\]\\/half { - color: color-mix(in oklab, red var(--opacity-half, 0.5), transparent); + color: color-mix(in oklab, red var(--opacity-half, .5), transparent); } } " @@ -14287,12 +15860,18 @@ test('mask-position', async () => { ).toMatchInlineSnapshot(` " .mask-position-\\[120px\\] { + -webkit-mask-position: 120px; mask-position: 120px; } + .mask-position-\\[120px_120px\\] { + -webkit-mask-position: 120px 120px; mask-position: 120px 120px; } + .mask-position-\\[var\\(--some-var\\)\\] { + -webkit-mask-position: var(--some-var); + -webkit-mask-position: var(--some-var); mask-position: var(--some-var); } " @@ -14326,12 +15905,18 @@ test('mask-size', async () => { ).toMatchInlineSnapshot(` " .mask-size-\\[120px\\] { + -webkit-mask-size: 120px; mask-size: 120px; } + .mask-size-\\[120px_120px\\] { + -webkit-mask-size: 120px 120px; mask-size: 120px 120px; } + .mask-size-\\[var\\(--some-var\\)\\] { + -webkit-mask-size: var(--some-var); + -webkit-mask-size: var(--some-var); mask-size: var(--some-var); } " @@ -14377,152 +15962,201 @@ test('mask-t-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-top-from-position: 0%; + --tw-mask-top-to-position: 100%; + --tw-mask-top-from-color: black; + --tw-mask-top-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-t-from-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-color: var(--my-var); - } - .mask-t-from-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); - --tw-mask-top-from-position: var(--my-var); } - .mask-t-from-\\(length\\:--my-var\\) { + + .mask-t-from-\\(--my-var\\), .mask-t-from-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-from-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-from-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-from-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-from-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-from-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-from-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-from-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-top-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-top-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-top-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-top-from-position: 0%; - --tw-mask-top-to-position: 100%; - --tw-mask-top-from-color: black; - --tw-mask-top-to-color: transparent; - } - } - } " `) expect( @@ -14588,152 +16222,201 @@ test('mask-t-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-top-from-position: 0%; + --tw-mask-top-to-position: 100%; + --tw-mask-top-from-color: black; + --tw-mask-top-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-t-to-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-color: var(--my-var); - } - .mask-t-to-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); - --tw-mask-top-to-position: var(--my-var); } - .mask-t-to-\\(length\\:--my-var\\) { + + .mask-t-to-\\(--my-var\\), .mask-t-to-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-to-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-to-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-to-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-to-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-to-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-to-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-t-to-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-top-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-top-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-top-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-top-from-position: 0%; - --tw-mask-top-to-position: 100%; - --tw-mask-top-from-color: black; - --tw-mask-top-to-color: transparent; - } - } - } " `) expect( @@ -14800,152 +16483,201 @@ test('mask-r-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-right-from-position: 0%; + --tw-mask-right-to-position: 100%; + --tw-mask-right-from-color: black; + --tw-mask-right-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-r-from-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-color: var(--my-var); - } - .mask-r-from-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); - --tw-mask-right-from-position: var(--my-var); } - .mask-r-from-\\(length\\:--my-var\\) { + + .mask-r-from-\\(--my-var\\), .mask-r-from-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-from-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-from-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-from-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-from-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-from-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-from-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-from-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-right-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-right-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-right-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-right-from-position: 0%; - --tw-mask-right-to-position: 100%; - --tw-mask-right-from-color: black; - --tw-mask-right-to-color: transparent; - } - } - } " `) expect( @@ -15012,152 +16744,201 @@ test('mask-r-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-right-from-position: 0%; + --tw-mask-right-to-position: 100%; + --tw-mask-right-from-color: black; + --tw-mask-right-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-r-to-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-color: var(--my-var); - } - .mask-r-to-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); - --tw-mask-right-to-position: var(--my-var); } - .mask-r-to-\\(length\\:--my-var\\) { + + .mask-r-to-\\(--my-var\\), .mask-r-to-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-to-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-to-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-to-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-to-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-to-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-to-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-r-to-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-right-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-right-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-right-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-right-from-position: 0%; - --tw-mask-right-to-position: 100%; - --tw-mask-right-from-color: black; - --tw-mask-right-to-color: transparent; - } - } - } " `) expect( @@ -15224,152 +17005,201 @@ test('mask-b-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-bottom-from-position: 0%; + --tw-mask-bottom-to-position: 100%; + --tw-mask-bottom-from-color: black; + --tw-mask-bottom-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-b-from-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-color: var(--my-var); - } - .mask-b-from-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); - --tw-mask-bottom-from-position: var(--my-var); } - .mask-b-from-\\(length\\:--my-var\\) { + + .mask-b-from-\\(--my-var\\), .mask-b-from-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-from-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-from-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-from-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-from-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-from-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-from-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-from-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-bottom-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-bottom-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-bottom-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-bottom-from-position: 0%; - --tw-mask-bottom-to-position: 100%; - --tw-mask-bottom-from-color: black; - --tw-mask-bottom-to-color: transparent; - } - } - } " `) expect( @@ -15436,151 +17266,200 @@ test('mask-b-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-bottom-from-position: 0%; + --tw-mask-bottom-to-position: 100%; + --tw-mask-bottom-from-color: black; + --tw-mask-bottom-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-b-to-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-color: var(--my-var); - } - .mask-b-to-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); - --tw-mask-bottom-to-position: var(--my-var); } - .mask-b-to-\\(length\\:--my-var\\) { + + .mask-b-to-\\(--my-var\\), .mask-b-to-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-to-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-to-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-to-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-to-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-to-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-to-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-b-to-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-bottom-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-bottom-from-color { syntax: "*"; inherits: false; initial-value: black; } - @property --tw-mask-bottom-to-color { - syntax: "*"; - inherits: false; - initial-value: transparent; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-bottom-from-position: 0%; - --tw-mask-bottom-to-position: 100%; - --tw-mask-bottom-from-color: black; - --tw-mask-bottom-to-color: transparent; - } - } + + @property --tw-mask-bottom-to-color { + syntax: "*"; + inherits: false; + initial-value: transparent; } " `) @@ -15648,152 +17527,201 @@ test('mask-l-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-left-from-position: 0%; + --tw-mask-left-to-position: 100%; + --tw-mask-left-from-color: black; + --tw-mask-left-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-l-from-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-color: var(--my-var); - } - .mask-l-from-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); - --tw-mask-left-from-position: var(--my-var); } - .mask-l-from-\\(length\\:--my-var\\) { + + .mask-l-from-\\(--my-var\\), .mask-l-from-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-from-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-from-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-from-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-from-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-from-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-from-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-from-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-left-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-left-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-left-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-left-from-position: 0%; - --tw-mask-left-to-position: 100%; - --tw-mask-left-from-color: black; - --tw-mask-left-to-color: transparent; - } - } - } " `) expect( @@ -15860,152 +17788,201 @@ test('mask-l-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-left-from-position: 0%; + --tw-mask-left-to-position: 100%; + --tw-mask-left-from-color: black; + --tw-mask-left-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-l-to-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-color: var(--my-var); - } - .mask-l-to-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); - --tw-mask-left-to-position: var(--my-var); } - .mask-l-to-\\(length\\:--my-var\\) { + + .mask-l-to-\\(--my-var\\), .mask-l-to-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-to-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-to-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-to-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-to-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-to-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-to-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-l-to-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-left-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-left-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-left-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-left-from-position: 0%; - --tw-mask-left-to-position: 100%; - --tw-mask-left-from-color: black; - --tw-mask-left-to-color: transparent; - } - } - } " `) expect( @@ -16072,196 +18049,247 @@ test('mask-x-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-right-from-position: 0%; + --tw-mask-right-to-position: 100%; + --tw-mask-right-from-color: black; + --tw-mask-right-to-color: transparent; + --tw-mask-left-from-position: 0%; + --tw-mask-left-to-position: 100%; + --tw-mask-left-from-color: black; + --tw-mask-left-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-x-from-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-color: var(--my-var); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-color: var(--my-var); - } - .mask-x-from-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); - --tw-mask-right-from-position: var(--my-var); - --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); - --tw-mask-left-from-position: var(--my-var); } - .mask-x-from-\\(length\\:--my-var\\) { + + .mask-x-from-\\(--my-var\\), .mask-x-from-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: var(--my-var); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-from-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 0); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-from-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-from-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 1.5); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-from-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: calc(var(--spacing) * 2); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-from-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 2%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-from-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-from-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-from-position: 0px; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-from-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-right-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-right-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-right-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @property --tw-mask-left-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-left-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-left-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-left-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-right-from-position: 0%; - --tw-mask-right-to-position: 100%; - --tw-mask-right-from-color: black; - --tw-mask-right-to-color: transparent; - --tw-mask-left-from-position: 0%; - --tw-mask-left-to-position: 100%; - --tw-mask-left-from-color: black; - --tw-mask-left-to-color: transparent; - } - } - } " `) expect( @@ -16328,196 +18356,247 @@ test('mask-x-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-right-from-position: 0%; + --tw-mask-right-to-position: 100%; + --tw-mask-right-from-color: black; + --tw-mask-right-to-color: transparent; + --tw-mask-left-from-position: 0%; + --tw-mask-left-to-position: 100%; + --tw-mask-left-from-color: black; + --tw-mask-left-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-x-to-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-color: var(--my-var); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-color: var(--my-var); - } - .mask-x-to-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); - --tw-mask-right-to-position: var(--my-var); - --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); - --tw-mask-left-to-position: var(--my-var); } - .mask-x-to-\\(length\\:--my-var\\) { + + .mask-x-to-\\(--my-var\\), .mask-x-to-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: var(--my-var); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-to-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 0); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-to-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-to-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 1.5); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-to-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: calc(var(--spacing) * 2); --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-to-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 2%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-to-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0%; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-x-to-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); --tw-mask-right-to-position: 0px; --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); --tw-mask-left-to-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-right-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-right-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-right-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @property --tw-mask-left-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-left-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-left-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-left-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-right-from-position: 0%; - --tw-mask-right-to-position: 100%; - --tw-mask-right-from-color: black; - --tw-mask-right-to-color: transparent; - --tw-mask-left-from-position: 0%; - --tw-mask-left-to-position: 100%; - --tw-mask-left-from-color: black; - --tw-mask-left-to-color: transparent; - } - } - } " `) expect( @@ -16584,196 +18663,247 @@ test('mask-y-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-top-from-position: 0%; + --tw-mask-top-to-position: 100%; + --tw-mask-top-from-color: black; + --tw-mask-top-to-color: transparent; + --tw-mask-bottom-from-position: 0%; + --tw-mask-bottom-to-position: 100%; + --tw-mask-bottom-from-color: black; + --tw-mask-bottom-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-y-from-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-color: var(--my-var); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-color: var(--my-var); - } - .mask-y-from-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); - --tw-mask-top-from-position: var(--my-var); - --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); - --tw-mask-bottom-from-position: var(--my-var); } - .mask-y-from-\\(length\\:--my-var\\) { + + .mask-y-from-\\(--my-var\\), .mask-y-from-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: var(--my-var); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-from-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 0); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-from-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-from-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 1.5); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-from-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: calc(var(--spacing) * 2); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-from-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 2%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-from-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-from-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-from-position: 0px; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-from-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-top-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-top-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-top-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @property --tw-mask-bottom-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-bottom-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-bottom-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-bottom-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-top-from-position: 0%; - --tw-mask-top-to-position: 100%; - --tw-mask-top-from-color: black; - --tw-mask-top-to-color: transparent; - --tw-mask-bottom-from-position: 0%; - --tw-mask-bottom-to-position: 100%; - --tw-mask-bottom-from-color: black; - --tw-mask-bottom-to-color: transparent; - } - } - } " `) expect( @@ -16840,196 +18970,247 @@ test('mask-y-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-left: linear-gradient(#fff, #fff); + --tw-mask-right: linear-gradient(#fff, #fff); + --tw-mask-bottom: linear-gradient(#fff, #fff); + --tw-mask-top: linear-gradient(#fff, #fff); + --tw-mask-top-from-position: 0%; + --tw-mask-top-to-position: 100%; + --tw-mask-top-from-color: black; + --tw-mask-top-to-color: transparent; + --tw-mask-bottom-from-position: 0%; + --tw-mask-bottom-to-position: 100%; + --tw-mask-bottom-from-color: black; + --tw-mask-bottom-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-y-to-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-color: var(--my-var); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-color: var(--my-var); - } - .mask-y-to-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); - --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); - --tw-mask-top-to-position: var(--my-var); - --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); - --tw-mask-bottom-to-position: var(--my-var); } - .mask-y-to-\\(length\\:--my-var\\) { + + .mask-y-to-\\(--my-var\\), .mask-y-to-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: var(--my-var); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-to-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 0); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-to-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-to-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 1.5); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-to-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: calc(var(--spacing) * 2); --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-to-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 2%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-to-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0%; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-y-to-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position)); --tw-mask-top-to-position: 0px; --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position)); --tw-mask-bottom-to-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-left { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-right { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-bottom { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-top-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-top-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-top-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-top-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @property --tw-mask-bottom-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-bottom-to-position { syntax: "*"; inherits: false; initial-value: 100%; } - @property --tw-mask-bottom-from-color { - syntax: "*"; - inherits: false; - initial-value: black; - } - @property --tw-mask-bottom-to-color { - syntax: "*"; - inherits: false; - initial-value: transparent; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-left: linear-gradient(#fff, #fff); - --tw-mask-right: linear-gradient(#fff, #fff); - --tw-mask-bottom: linear-gradient(#fff, #fff); - --tw-mask-top: linear-gradient(#fff, #fff); - --tw-mask-top-from-position: 0%; - --tw-mask-top-to-position: 100%; - --tw-mask-top-from-color: black; - --tw-mask-top-to-color: transparent; - --tw-mask-bottom-from-position: 0%; - --tw-mask-bottom-to-position: 100%; - --tw-mask-bottom-from-color: black; - --tw-mask-bottom-to-color: transparent; - } - } - } + + @property --tw-mask-bottom-from-color { + syntax: "*"; + inherits: false; + initial-value: black; + } + + @property --tw-mask-bottom-to-color { + syntax: "*"; + inherits: false; + initial-value: transparent; + } " `) expect( @@ -17073,79 +19254,101 @@ test('mask-linear', async () => { expect(await run(['mask-linear-45', 'mask-linear-[3rad]', '-mask-linear-45'])) .toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-linear-position: 0deg; + --tw-mask-linear-from-position: 0%; + --tw-mask-linear-to-position: 100%; + --tw-mask-linear-from-color: black; + --tw-mask-linear-to-color: transparent; + } + } + } + .-mask-linear-45 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position))); --tw-mask-linear-position: calc(1deg * -45); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-45 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position))); --tw-mask-linear-position: calc(1deg * 45); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-\\[3rad\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position))); - --tw-mask-linear-position: 3rad; + --tw-mask-linear-position: 171.887deg; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-linear-position { syntax: "*"; inherits: false; initial-value: 0deg; } + @property --tw-mask-linear-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-linear-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-linear-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-linear-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-linear-position: 0deg; - --tw-mask-linear-from-position: 0%; - --tw-mask-linear-to-position: 100%; - --tw-mask-linear-from-color: black; - --tw-mask-linear-to-color: transparent; - } - } - } " `) expect( @@ -17194,134 +19397,180 @@ test('mask-linear-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-linear-position: 0deg; + --tw-mask-linear-from-position: 0%; + --tw-mask-linear-to-position: 100%; + --tw-mask-linear-from-color: black; + --tw-mask-linear-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-linear-from-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-color: var(--my-var); - } - .mask-linear-from-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); - --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); - --tw-mask-linear-from-position: var(--my-var); } - .mask-linear-from-\\(length\\:--my-var\\) { + + .mask-linear-from-\\(--my-var\\), .mask-linear-from-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-from-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-from-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-from-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-from-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-from-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-from-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-from-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-from-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-linear-position { syntax: "*"; inherits: false; initial-value: 0deg; } + @property --tw-mask-linear-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-linear-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-linear-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-linear-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-linear-position: 0deg; - --tw-mask-linear-from-position: 0%; - --tw-mask-linear-to-position: 100%; - --tw-mask-linear-from-color: black; - --tw-mask-linear-to-color: transparent; - } - } - } " `) expect( @@ -17388,134 +19637,180 @@ test('mask-linear-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-linear-position: 0deg; + --tw-mask-linear-from-position: 0%; + --tw-mask-linear-to-position: 100%; + --tw-mask-linear-from-color: black; + --tw-mask-linear-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-linear-to-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-color: var(--my-var); - } - .mask-linear-to-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); - --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); - --tw-mask-linear-to-position: var(--my-var); } - .mask-linear-to-\\(length\\:--my-var\\) { + + .mask-linear-to-\\(--my-var\\), .mask-linear-to-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-to-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-to-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-to-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-to-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-to-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-to-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-linear-to-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position); --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops)); --tw-mask-linear-to-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-linear-position { syntax: "*"; inherits: false; initial-value: 0deg; } + @property --tw-mask-linear-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-linear-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-linear-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-linear-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-linear-position: 0deg; - --tw-mask-linear-from-position: 0%; - --tw-mask-linear-to-position: 100%; - --tw-mask-linear-from-color: black; - --tw-mask-linear-to-color: transparent; - } - } - } " `) expect( @@ -17568,97 +19863,117 @@ test('mask-radial', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-radial-from-position: 0%; + --tw-mask-radial-to-position: 100%; + --tw-mask-radial-from-color: black; + --tw-mask-radial-to-color: transparent; + --tw-mask-radial-shape: ellipse; + --tw-mask-radial-size: farthest-corner; + --tw-mask-radial-position: center; + } + } + } + .mask-radial-\\[25\\%_25\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops, var(--tw-mask-radial-size))); --tw-mask-radial-size: 25% 25%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-circle { --tw-mask-radial-shape: circle; } + .mask-ellipse { --tw-mask-radial-shape: ellipse; } + .mask-radial-closest-corner { --tw-mask-radial-size: closest-corner; } + .mask-radial-closest-side { --tw-mask-radial-size: closest-side; } + .mask-radial-farthest-corner { --tw-mask-radial-size: farthest-corner; } + .mask-radial-farthest-side { --tw-mask-radial-size: farthest-side; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-radial-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-radial-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-radial-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @property --tw-mask-radial-shape { syntax: "*"; inherits: false; initial-value: ellipse; } + @property --tw-mask-radial-size { syntax: "*"; inherits: false; initial-value: farthest-corner; } + @property --tw-mask-radial-position { syntax: "*"; inherits: false; initial-value: center; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-radial-from-position: 0%; - --tw-mask-radial-to-position: 100%; - --tw-mask-radial-from-color: black; - --tw-mask-radial-to-color: transparent; - --tw-mask-radial-shape: ellipse; - --tw-mask-radial-size: farthest-corner; - --tw-mask-radial-position: center; - } - } - } " `) expect( @@ -17707,27 +20022,35 @@ test('mask-radial-at', async () => { .mask-radial-at-\\[25\\%\\] { --tw-mask-radial-position: 25%; } + .mask-radial-at-bottom { --tw-mask-radial-position: bottom; } + .mask-radial-at-bottom-left { --tw-mask-radial-position: bottom left; } + .mask-radial-at-bottom-right { --tw-mask-radial-position: bottom right; } + .mask-radial-at-left { --tw-mask-radial-position: left; } + .mask-radial-at-right { --tw-mask-radial-position: right; } + .mask-radial-at-top { --tw-mask-radial-position: top; } + .mask-radial-at-top-left { --tw-mask-radial-position: top left; } + .mask-radial-at-top-right { --tw-mask-radial-position: top right; } @@ -17793,154 +20116,202 @@ test('mask-radial-from', async () => { 'mask-radial-from-[0px]', 'mask-radial-from-[0%]', - 'mask-radial-from-(--my-var)', - 'mask-radial-from-(color:--my-var)', - 'mask-radial-from-(length:--my-var)', - ], - input, - ), - ).toMatchInlineSnapshot(` - " - @layer properties; + 'mask-radial-from-(--my-var)', + 'mask-radial-from-(color:--my-var)', + 'mask-radial-from-(length:--my-var)', + ], + input, + ), + ).toMatchInlineSnapshot(` + " + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-radial-from-position: 0%; + --tw-mask-radial-to-position: 100%; + --tw-mask-radial-from-color: black; + --tw-mask-radial-to-color: transparent; + --tw-mask-radial-shape: ellipse; + --tw-mask-radial-size: farthest-corner; + --tw-mask-radial-position: center; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-radial-from-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-color: var(--my-var); - } - .mask-radial-from-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); - --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); - --tw-mask-radial-from-position: var(--my-var); } - .mask-radial-from-\\(length\\:--my-var\\) { + + .mask-radial-from-\\(--my-var\\), .mask-radial-from-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-from-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-from-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-from-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-from-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-from-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-from-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-from-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-from-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-radial-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-radial-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-radial-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @property --tw-mask-radial-shape { syntax: "*"; inherits: false; initial-value: ellipse; } + @property --tw-mask-radial-size { syntax: "*"; inherits: false; initial-value: farthest-corner; } + @property --tw-mask-radial-position { syntax: "*"; inherits: false; initial-value: center; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-radial-from-position: 0%; - --tw-mask-radial-to-position: 100%; - --tw-mask-radial-from-color: black; - --tw-mask-radial-to-color: transparent; - --tw-mask-radial-shape: ellipse; - --tw-mask-radial-size: farthest-corner; - --tw-mask-radial-position: center; - } - } - } " `) expect( @@ -18007,146 +20378,194 @@ test('mask-radial-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-radial-from-position: 0%; + --tw-mask-radial-to-position: 100%; + --tw-mask-radial-from-color: black; + --tw-mask-radial-to-color: transparent; + --tw-mask-radial-shape: ellipse; + --tw-mask-radial-size: farthest-corner; + --tw-mask-radial-position: center; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-radial-to-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-color: var(--my-var); - } - .mask-radial-to-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); - --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); - --tw-mask-radial-to-position: var(--my-var); } - .mask-radial-to-\\(length\\:--my-var\\) { + + .mask-radial-to-\\(--my-var\\), .mask-radial-to-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-to-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-to-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-to-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-to-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-to-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-to-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-radial-to-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position); --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops)); --tw-mask-radial-to-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-radial-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-radial-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-radial-to-color { syntax: "*"; inherits: false; initial-value: transparent; } + @property --tw-mask-radial-shape { syntax: "*"; inherits: false; initial-value: ellipse; } + @property --tw-mask-radial-size { syntax: "*"; inherits: false; initial-value: farthest-corner; } + @property --tw-mask-radial-position { syntax: "*"; inherits: false; initial-value: center; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-radial-from-position: 0%; - --tw-mask-radial-to-position: 100%; - --tw-mask-radial-from-color: black; - --tw-mask-radial-to-color: transparent; - --tw-mask-radial-shape: ellipse; - --tw-mask-radial-size: farthest-corner; - --tw-mask-radial-position: center; - } - } - } " `) expect( @@ -18190,79 +20609,101 @@ test('mask-conic', async () => { expect(await run(['mask-conic-45', 'mask-conic-[3rad]', '-mask-conic-45'])) .toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-conic-position: 0deg; + --tw-mask-conic-from-position: 0%; + --tw-mask-conic-to-position: 100%; + --tw-mask-conic-from-color: black; + --tw-mask-conic-to-color: transparent; + } + } + } + .-mask-conic-45 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position))); --tw-mask-conic-position: calc(1deg * -45); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-45 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position))); --tw-mask-conic-position: calc(1deg * 45); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-\\[3rad\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position))); - --tw-mask-conic-position: 3rad; + --tw-mask-conic-position: 171.887deg; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic-position { syntax: "*"; inherits: false; initial-value: 0deg; } + @property --tw-mask-conic-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-conic-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-conic-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-conic-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-conic-position: 0deg; - --tw-mask-conic-from-position: 0%; - --tw-mask-conic-to-position: 100%; - --tw-mask-conic-from-color: black; - --tw-mask-conic-to-color: transparent; - } - } - } " `) expect( @@ -18311,134 +20752,180 @@ test('mask-conic-from', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-conic-position: 0deg; + --tw-mask-conic-from-position: 0%; + --tw-mask-conic-to-position: 100%; + --tw-mask-conic-from-color: black; + --tw-mask-conic-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-conic-from-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-color: var(--my-var); - } - .mask-conic-from-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); - --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); - --tw-mask-conic-from-position: var(--my-var); } - .mask-conic-from-\\(length\\:--my-var\\) { + + .mask-conic-from-\\(--my-var\\), .mask-conic-from-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-from-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-from-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-from-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-from-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-from-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-from-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-from-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-from-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic-position { syntax: "*"; inherits: false; initial-value: 0deg; } + @property --tw-mask-conic-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-conic-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-conic-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-conic-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-conic-position: 0deg; - --tw-mask-conic-from-position: 0%; - --tw-mask-conic-to-position: 100%; - --tw-mask-conic-from-color: black; - --tw-mask-conic-to-color: transparent; - } - } - } " `) expect( @@ -18505,134 +20992,180 @@ test('mask-conic-to', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-mask-linear: linear-gradient(#fff, #fff); + --tw-mask-radial: linear-gradient(#fff, #fff); + --tw-mask-conic: linear-gradient(#fff, #fff); + --tw-mask-conic-position: 0deg; + --tw-mask-conic-from-position: 0%; + --tw-mask-conic-to-position: 100%; + --tw-mask-conic-from-color: black; + --tw-mask-conic-to-color: transparent; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; } + .mask-conic-to-\\(color\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-color: var(--my-var); - } - .mask-conic-to-\\(--my-var\\) { - mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; mask-composite: intersect; - --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); - --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); - --tw-mask-conic-to-position: var(--my-var); } - .mask-conic-to-\\(length\\:--my-var\\) { + + .mask-conic-to-\\(--my-var\\), .mask-conic-to-\\(length\\:--my-var\\) { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: var(--my-var); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-to-0 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: calc(var(--spacing) * 0); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-to-0\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-to-1\\.5 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: calc(var(--spacing) * 1.5); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-to-2 { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: calc(var(--spacing) * 2); + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-to-2\\% { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: 2%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-to-\\[0\\%\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: 0%; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + .mask-conic-to-\\[0px\\] { + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); + -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); - mask-composite: intersect; --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position); --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops)); --tw-mask-conic-to-position: 0px; + -webkit-mask-composite: source-in; + -webkit-mask-composite: source-in; + mask-composite: intersect; } + @property --tw-mask-linear { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-radial { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic { syntax: "*"; inherits: false; initial-value: linear-gradient(#fff, #fff); } + @property --tw-mask-conic-position { syntax: "*"; inherits: false; initial-value: 0deg; } + @property --tw-mask-conic-from-position { syntax: "*"; inherits: false; initial-value: 0%; } + @property --tw-mask-conic-to-position { syntax: "*"; inherits: false; initial-value: 100%; } + @property --tw-mask-conic-from-color { syntax: "*"; inherits: false; initial-value: black; } + @property --tw-mask-conic-to-color { syntax: "*"; inherits: false; initial-value: transparent; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-mask-linear: linear-gradient(#fff, #fff); - --tw-mask-radial: linear-gradient(#fff, #fff); - --tw-mask-conic: linear-gradient(#fff, #fff); - --tw-mask-conic-position: 0deg; - --tw-mask-conic-from-position: 0%; - --tw-mask-conic-to-position: 100%; - --tw-mask-conic-from-color: black; - --tw-mask-conic-to-color: transparent; - } - } - } " `) expect( @@ -18679,6 +21212,7 @@ test('box-decoration', async () => { -webkit-box-decoration-break: clone; box-decoration-break: clone; } + .box-decoration-slice { -webkit-box-decoration-break: slice; box-decoration-break: slice; @@ -18704,13 +21238,17 @@ test('bg-clip', async () => { .bg-clip-border { background-clip: border-box; } + .bg-clip-content { background-clip: content-box; } + .bg-clip-padding { background-clip: padding-box; } + .bg-clip-text { + -webkit-background-clip: text; background-clip: text; } " @@ -18737,9 +21275,11 @@ test('bg-origin', async () => { .bg-origin-border { background-origin: border-box; } + .bg-origin-content { background-origin: content-box; } + .bg-origin-padding { background-origin: padding-box; } @@ -18772,24 +21312,37 @@ test('mask-clip', async () => { ).toMatchInlineSnapshot(` " .mask-clip-border { + -webkit-mask-clip: border-box; mask-clip: border-box; } + .mask-clip-content { + -webkit-mask-clip: content-box; mask-clip: content-box; } + .mask-clip-fill { + -webkit-mask-clip: fill-box; mask-clip: fill-box; } + .mask-clip-padding { + -webkit-mask-clip: padding-box; mask-clip: padding-box; } + .mask-clip-stroke { + -webkit-mask-clip: stroke-box; mask-clip: stroke-box; } + .mask-clip-view { + -webkit-mask-clip: view-box; mask-clip: view-box; } + .mask-no-clip { + -webkit-mask-clip: no-clip; mask-clip: no-clip; } " @@ -18828,21 +21381,32 @@ test('mask-origin', async () => { ).toMatchInlineSnapshot(` " .mask-origin-border { + -webkit-mask-origin: border-box; mask-origin: border-box; } + .mask-origin-content { + -webkit-mask-origin: content-box; mask-origin: content-box; } + .mask-origin-fill { + -webkit-mask-origin: fill-box; mask-origin: fill-box; } + .mask-origin-padding { + -webkit-mask-origin: padding-box; mask-origin: padding-box; } + .mask-origin-stroke { + -webkit-mask-origin: stroke-box; mask-origin: stroke-box; } + .mask-origin-view { + -webkit-mask-origin: view-box; mask-origin: view-box; } " @@ -18891,48 +21455,63 @@ test('bg-blend', async () => { .bg-blend-color { background-blend-mode: color; } + .bg-blend-color-burn { background-blend-mode: color-burn; } + .bg-blend-color-dodge { background-blend-mode: color-dodge; } + .bg-blend-darken { background-blend-mode: darken; } + .bg-blend-difference { background-blend-mode: difference; } + .bg-blend-exclusion { background-blend-mode: exclusion; } + .bg-blend-hard-light { background-blend-mode: hard-light; } + .bg-blend-hue { background-blend-mode: hue; } + .bg-blend-lighten { background-blend-mode: lighten; } + .bg-blend-luminosity { background-blend-mode: luminosity; } + .bg-blend-multiply { background-blend-mode: multiply; } + .bg-blend-normal { background-blend-mode: normal; } + .bg-blend-overlay { background-blend-mode: overlay; } + .bg-blend-saturation { background-blend-mode: saturation; } + .bg-blend-screen { background-blend-mode: screen; } + .bg-blend-soft-light { background-blend-mode: soft-light; } @@ -19004,54 +21583,71 @@ test('mix-blend', async () => { .mix-blend-color { mix-blend-mode: color; } + .mix-blend-color-burn { mix-blend-mode: color-burn; } + .mix-blend-color-dodge { mix-blend-mode: color-dodge; } + .mix-blend-darken { mix-blend-mode: darken; } + .mix-blend-difference { mix-blend-mode: difference; } + .mix-blend-exclusion { mix-blend-mode: exclusion; } + .mix-blend-hard-light { mix-blend-mode: hard-light; } + .mix-blend-hue { mix-blend-mode: hue; } + .mix-blend-lighten { mix-blend-mode: lighten; } + .mix-blend-luminosity { mix-blend-mode: luminosity; } + .mix-blend-multiply { mix-blend-mode: multiply; } + .mix-blend-normal { mix-blend-mode: normal; } + .mix-blend-overlay { mix-blend-mode: overlay; } + .mix-blend-plus-darker { mix-blend-mode: plus-darker; } + .mix-blend-plus-lighter { mix-blend-mode: plus-lighter; } + .mix-blend-saturation { mix-blend-mode: saturation; } + .mix-blend-screen { mix-blend-mode: screen; } + .mix-blend-soft-light { mix-blend-mode: soft-light; } @@ -19136,104 +21732,119 @@ test('fill', async () => { --color-red-500: #ef4444; --fill-blue-500: #3b82f6; } + .fill-\\[\\#0088cc\\] { - fill: #0088cc; - } - .fill-\\[\\#0088cc\\]\\/50 { - fill: color-mix(in oklab, #0088cc 50%, transparent); + fill: #08c; } - .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - fill: color-mix(in oklab, #0088cc 50%, transparent); - } - .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { - fill: color-mix(in oklab, #0088cc 50%, transparent); + + .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { + fill: oklab(59.9824% -.067 -.124 / .5); } + .fill-blue-500 { fill: var(--fill-blue-500); } - .fill-current { - fill: currentcolor; - } - .fill-current\\/50 { - fill: currentcolor; + + .fill-current, .fill-current\\/50 { + fill: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .fill-current\\/50 { fill: color-mix(in oklab, currentcolor 50%, transparent); } } + .fill-current\\/\\[0\\.5\\] { - fill: currentcolor; + fill: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .fill-current\\/\\[0\\.5\\] { fill: color-mix(in oklab, currentcolor 50%, transparent); } } + .fill-current\\/\\[50\\%\\] { - fill: currentcolor; + fill: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .fill-current\\/\\[50\\%\\] { fill: color-mix(in oklab, currentcolor 50%, transparent); } } + .fill-inherit { fill: inherit; } + .fill-red-500 { fill: var(--color-red-500); } + .fill-red-500\\/2\\.5 { - fill: color-mix(in srgb, #ef4444 2.5%, transparent); + fill: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .fill-red-500\\/2\\.5 { fill: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .fill-red-500\\/2\\.25 { - fill: color-mix(in srgb, #ef4444 2.25%, transparent); + fill: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .fill-red-500\\/2\\.25 { fill: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .fill-red-500\\/2\\.75 { - fill: color-mix(in srgb, #ef4444 2.75%, transparent); + fill: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .fill-red-500\\/2\\.75 { fill: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .fill-red-500\\/50 { - fill: color-mix(in srgb, #ef4444 50%, transparent); + fill: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .fill-red-500\\/50 { fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .fill-red-500\\/\\[0\\.5\\] { - fill: color-mix(in srgb, #ef4444 50%, transparent); + fill: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .fill-red-500\\/\\[0\\.5\\] { fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .fill-red-500\\/\\[50\\%\\] { - fill: color-mix(in srgb, #ef4444 50%, transparent); + fill: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .fill-red-500\\/\\[50\\%\\] { fill: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .fill-transparent { - fill: transparent; + fill: #0000; } " `) @@ -19317,187 +21928,210 @@ test('stroke', async () => { --color-red-500: #ef4444; --stroke-blue-500: #3b82f6; } + .stroke-\\[\\#0088cc\\] { - stroke: #0088cc; + stroke: #08c; } - .stroke-\\[\\#0088cc\\]\\/50 { - stroke: color-mix(in oklab, #0088cc 50%, transparent); - } - .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - stroke: color-mix(in oklab, #0088cc 50%, transparent); - } - .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { - stroke: color-mix(in oklab, #0088cc 50%, transparent); - } - .stroke-\\[color\\:var\\(--my-color\\)\\] { - stroke: var(--my-color); + + .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { + stroke: oklab(59.9824% -.067 -.124 / .5); } - .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 { + + .stroke-\\[color\\:var\\(--my-color\\)\\], .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 { stroke: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { stroke: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { stroke: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .stroke-\\[var\\(--my-color\\)\\] { - stroke: var(--my-color); - } - .stroke-\\[var\\(--my-color\\)\\]\\/50 { + + .stroke-\\[var\\(--my-color\\)\\], .stroke-\\[var\\(--my-color\\)\\]\\/50 { stroke: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .stroke-\\[var\\(--my-color\\)\\]\\/50 { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { stroke: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { stroke: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .stroke-blue-500 { stroke: var(--stroke-blue-500); } - .stroke-current { - stroke: currentcolor; - } - .stroke-current\\/50 { - stroke: currentcolor; + + .stroke-current, .stroke-current\\/50 { + stroke: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .stroke-current\\/50 { stroke: color-mix(in oklab, currentcolor 50%, transparent); } } + .stroke-current\\/\\[0\\.5\\] { - stroke: currentcolor; + stroke: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .stroke-current\\/\\[0\\.5\\] { stroke: color-mix(in oklab, currentcolor 50%, transparent); } } + .stroke-current\\/\\[50\\%\\] { - stroke: currentcolor; + stroke: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .stroke-current\\/\\[50\\%\\] { stroke: color-mix(in oklab, currentcolor 50%, transparent); } } + .stroke-inherit { stroke: inherit; } + .stroke-none { stroke: none; } + .stroke-red-500 { stroke: var(--color-red-500); } + .stroke-red-500\\/2\\.5 { - stroke: color-mix(in srgb, #ef4444 2.5%, transparent); + stroke: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .stroke-red-500\\/2\\.5 { stroke: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .stroke-red-500\\/2\\.25 { - stroke: color-mix(in srgb, #ef4444 2.25%, transparent); + stroke: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .stroke-red-500\\/2\\.25 { stroke: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .stroke-red-500\\/2\\.75 { - stroke: color-mix(in srgb, #ef4444 2.75%, transparent); + stroke: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .stroke-red-500\\/2\\.75 { stroke: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .stroke-red-500\\/50 { - stroke: color-mix(in srgb, #ef4444 50%, transparent); + stroke: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .stroke-red-500\\/50 { stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .stroke-red-500\\/\\[0\\.5\\] { - stroke: color-mix(in srgb, #ef4444 50%, transparent); + stroke: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .stroke-red-500\\/\\[0\\.5\\] { stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .stroke-red-500\\/\\[50\\%\\] { - stroke: color-mix(in srgb, #ef4444 50%, transparent); + stroke: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .stroke-red-500\\/\\[50\\%\\] { stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .stroke-transparent { - stroke: transparent; + stroke: #0000; } + .stroke-0 { stroke-width: 0; } + .stroke-1 { - stroke-width: 1; + stroke-width: 1px; } + .stroke-2 { - stroke-width: 2; + stroke-width: 2px; } + .stroke-\\[1\\.5\\] { - stroke-width: 1.5; + stroke-width: 1.5px; } + .stroke-\\[12px\\] { stroke-width: 12px; } + .stroke-\\[50\\%\\] { stroke-width: 50%; } - .stroke-\\[length\\:var\\(--my-width\\)\\] { - stroke-width: var(--my-width); - } - .stroke-\\[number\\:var\\(--my-width\\)\\] { - stroke-width: var(--my-width); - } - .stroke-\\[percentage\\:var\\(--my-width\\)\\] { + + .stroke-\\[length\\:var\\(--my-width\\)\\], .stroke-\\[number\\:var\\(--my-width\\)\\], .stroke-\\[percentage\\:var\\(--my-width\\)\\] { stroke-width: var(--my-width); } " @@ -19563,57 +22197,75 @@ test('object', async () => { .object-contain { object-fit: contain; } + .object-cover { object-fit: cover; } + .object-fill { object-fit: fill; } + .object-none { object-fit: none; } + .object-scale-down { object-fit: scale-down; } + .object-\\[var\\(--value\\)\\] { object-position: var(--value); } + .object-bottom { object-position: bottom; } + .object-bottom-left { object-position: left bottom; } + .object-bottom-right { object-position: right bottom; } + .object-center { object-position: center; } + .object-left { object-position: left; } + .object-left-bottom { object-position: left bottom; } + .object-left-top { object-position: left top; } + .object-right { object-position: right; } + .object-right-bottom { object-position: right bottom; } + .object-right-top { object-position: right top; } + .object-top { object-position: top; } + .object-top-left { object-position: left top; } + .object-top-right { object-position: right top; } @@ -19666,6 +22318,7 @@ test('object', async () => { :root, :host { --object-position-center: top left; } + .object-center { object-position: var(--object-position-center); } @@ -19688,21 +22341,26 @@ test('p', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .p-1 { padding: calc(var(--spacing) * 1); } + .p-4 { padding: calc(var(--spacing) * 4); } + .p-99 { padding: calc(var(--spacing) * 99); } + .p-\\[4px\\] { padding: 4px; } + .p-big { padding: var(--spacing-big); } @@ -19726,21 +22384,26 @@ test('px', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .px-1 { padding-inline: calc(var(--spacing) * 1); } + .px-2\\.5 { padding-inline: calc(var(--spacing) * 2.5); } + .px-99 { padding-inline: calc(var(--spacing) * 99); } + .px-\\[4px\\] { padding-inline: 4px; } + .px-big { padding-inline: var(--spacing-big); } @@ -19764,21 +22427,26 @@ test('py', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .py-1 { padding-block: calc(var(--spacing) * 1); } + .py-4 { padding-block: calc(var(--spacing) * 4); } + .py-99 { padding-block: calc(var(--spacing) * 99); } + .py-\\[4px\\] { padding-block: 4px; } + .py-big { padding-block: var(--spacing-big); } @@ -19802,21 +22470,26 @@ test('pt', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .pt-1 { padding-top: calc(var(--spacing) * 1); } + .pt-4 { padding-top: calc(var(--spacing) * 4); } + .pt-99 { padding-top: calc(var(--spacing) * 99); } + .pt-\\[4px\\] { padding-top: 4px; } + .pt-big { padding-top: var(--spacing-big); } @@ -19840,21 +22513,26 @@ test('ps', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .ps-1 { padding-inline-start: calc(var(--spacing) * 1); } + .ps-4 { padding-inline-start: calc(var(--spacing) * 4); } + .ps-99 { padding-inline-start: calc(var(--spacing) * 99); } + .ps-\\[4px\\] { padding-inline-start: 4px; } + .ps-big { padding-inline-start: var(--spacing-big); } @@ -19878,21 +22556,26 @@ test('pe', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .pe-1 { padding-inline-end: calc(var(--spacing) * 1); } + .pe-4 { padding-inline-end: calc(var(--spacing) * 4); } + .pe-99 { padding-inline-end: calc(var(--spacing) * 99); } + .pe-\\[4px\\] { padding-inline-end: 4px; } + .pe-big { padding-inline-end: var(--spacing-big); } @@ -19916,21 +22599,26 @@ test('pbs', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .pbs-1 { padding-block-start: calc(var(--spacing) * 1); } + .pbs-4 { padding-block-start: calc(var(--spacing) * 4); } + .pbs-99 { padding-block-start: calc(var(--spacing) * 99); } + .pbs-\\[4px\\] { padding-block-start: 4px; } + .pbs-big { padding-block-start: var(--spacing-big); } @@ -19954,21 +22642,26 @@ test('pbe', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .pbe-1 { padding-block-end: calc(var(--spacing) * 1); } + .pbe-4 { padding-block-end: calc(var(--spacing) * 4); } + .pbe-99 { padding-block-end: calc(var(--spacing) * 99); } + .pbe-\\[4px\\] { padding-block-end: 4px; } + .pbe-big { padding-block-end: var(--spacing-big); } @@ -19992,21 +22685,26 @@ test('pr', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .pr-1 { padding-right: calc(var(--spacing) * 1); } + .pr-4 { padding-right: calc(var(--spacing) * 4); } + .pr-99 { padding-right: calc(var(--spacing) * 99); } + .pr-\\[4px\\] { padding-right: 4px; } + .pr-big { padding-right: var(--spacing-big); } @@ -20030,21 +22728,26 @@ test('pb', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .pb-1 { padding-bottom: calc(var(--spacing) * 1); } + .pb-4 { padding-bottom: calc(var(--spacing) * 4); } + .pb-99 { padding-bottom: calc(var(--spacing) * 99); } + .pb-\\[4px\\] { padding-bottom: 4px; } + .pb-big { padding-bottom: var(--spacing-big); } @@ -20068,21 +22771,26 @@ test('pl', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --spacing-big: 100rem; } + .pl-1 { padding-left: calc(var(--spacing) * 1); } + .pl-4 { padding-left: calc(var(--spacing) * 4); } + .pl-99 { padding-left: calc(var(--spacing) * 99); } + .pl-\\[4px\\] { padding-left: 4px; } + .pl-big { padding-left: var(--spacing-big); } @@ -20099,18 +22807,23 @@ test('text-align', async () => { .text-center { text-align: center; } + .text-end { text-align: end; } + .text-justify { text-align: justify; } + .text-left { text-align: left; } + .text-right { text-align: right; } + .text-start { text-align: start; } @@ -20138,8 +22851,9 @@ test('indent', async () => { expect(await run(['indent-[4px]', '-indent-[4px]'])).toMatchInlineSnapshot(` " .-indent-\\[4px\\] { - text-indent: calc(4px * -1); + text-indent: -4px; } + .indent-\\[4px\\] { text-indent: 4px; } @@ -20167,27 +22881,35 @@ test('align', async () => { .align-\\[var\\(--value\\)\\] { vertical-align: var(--value); } + .align-baseline { vertical-align: baseline; } + .align-bottom { vertical-align: bottom; } + .align-middle { vertical-align: middle; } + .align-sub { vertical-align: sub; } + .align-super { vertical-align: super; } + .align-text-bottom { vertical-align: text-bottom; } + .align-text-top { vertical-align: text-top; } + .align-top { vertical-align: top; } @@ -20249,53 +22971,59 @@ test('font', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-font-weight: initial; + } + } + } + :root, :host { - --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; --font-weight-bold: 650; } + .font-\\[\\"arial_rounded\\"\\] { - font-family: "arial rounded"; + font-family: arial rounded; } - .font-\\[family-name\\:var\\(--my-family\\)\\] { - font-family: var(--my-family); - } - .font-\\[generic-name\\:var\\(--my-family\\)\\] { + + .font-\\[family-name\\:var\\(--my-family\\)\\], .font-\\[generic-name\\:var\\(--my-family\\)\\] { font-family: var(--my-family); } + .font-\\[ui-sans-serif\\] { font-family: ui-sans-serif; } + .font-sans { font-family: var(--font-sans); } + .font-\\[100\\] { --tw-font-weight: 100; font-weight: 100; } + .font-\\[number\\:var\\(--my-weight\\)\\] { --tw-font-weight: var(--my-weight); font-weight: var(--my-weight); } + .font-\\[var\\(--my-family\\)\\] { --tw-font-weight: var(--my-family); font-weight: var(--my-family); } + .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } + @property --tw-font-weight { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-font-weight: initial; - } - } + inherits: false } " `) @@ -20346,12 +23074,15 @@ test('font-features', async () => { .font-features-\\(--my-features\\) { font-feature-settings: var(--my-features); } + .font-features-\\[\\"c2sc\\"\\,\\"smcp\\"\\] { font-feature-settings: "c2sc","smcp"; } + .font-features-\\[\\"smcp\\"\\] { font-feature-settings: "smcp"; } + .font-features-\\[var\\(--my-features\\)\\] { font-feature-settings: var(--my-features); } @@ -20373,12 +23104,15 @@ test('text-transform', async () => { .capitalize { text-transform: capitalize; } + .lowercase { text-transform: lowercase; } + .normal-case { text-transform: none; } + .uppercase { text-transform: uppercase; } @@ -20404,6 +23138,7 @@ test('font-style', async () => { .italic { font-style: italic; } + .not-italic { font-style: normal; } @@ -20419,9 +23154,11 @@ test('font-stretch', async () => { .font-stretch-50\\% { font-stretch: 50%; } + .font-stretch-200\\% { font-stretch: 200%; } + .font-stretch-ultra-expanded { font-stretch: ultra-expanded; } @@ -20449,12 +23186,15 @@ test('text-decoration-line', async () => { .line-through { text-decoration-line: line-through; } + .no-underline { text-decoration-line: none; } + .overline { text-decoration-line: overline; } + .underline { text-decoration-line: underline; } @@ -20508,101 +23248,115 @@ test('placeholder', async () => { :root, :host { --color-red-500: #ef4444; } + .placeholder-\\[\\#0088cc\\]::placeholder { - color: #0088cc; - } - .placeholder-\\[\\#0088cc\\]\\/50::placeholder { - color: color-mix(in oklab, #0088cc 50%, transparent); - } - .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder { - color: color-mix(in oklab, #0088cc 50%, transparent); - } - .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { - color: color-mix(in oklab, #0088cc 50%, transparent); + color: #08c; } - .placeholder-current::placeholder { - color: currentcolor; + + .placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { + color: oklab(59.9824% -.067 -.124 / .5); } - .placeholder-current\\/50::placeholder { - color: currentcolor; + + .placeholder-current::placeholder, .placeholder-current\\/50::placeholder { + color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .placeholder-current\\/50::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } + .placeholder-current\\/\\[0\\.5\\]::placeholder { - color: currentcolor; + color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .placeholder-current\\/\\[0\\.5\\]::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } + .placeholder-current\\/\\[50\\%\\]::placeholder { - color: currentcolor; + color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .placeholder-current\\/\\[50\\%\\]::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } + .placeholder-inherit::placeholder { color: inherit; } + .placeholder-red-500::placeholder { color: var(--color-red-500); } + .placeholder-red-500\\/2\\.5::placeholder { - color: color-mix(in srgb, #ef4444 2.5%, transparent); + color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .placeholder-red-500\\/2\\.5::placeholder { color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .placeholder-red-500\\/2\\.25::placeholder { - color: color-mix(in srgb, #ef4444 2.25%, transparent); + color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .placeholder-red-500\\/2\\.25::placeholder { color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .placeholder-red-500\\/2\\.75::placeholder { - color: color-mix(in srgb, #ef4444 2.75%, transparent); + color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .placeholder-red-500\\/2\\.75::placeholder { color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .placeholder-red-500\\/50::placeholder { - color: color-mix(in srgb, #ef4444 50%, transparent); + color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .placeholder-red-500\\/50::placeholder { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .placeholder-red-500\\/\\[0\\.5\\]::placeholder { - color: color-mix(in srgb, #ef4444 50%, transparent); + color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .placeholder-red-500\\/\\[0\\.5\\]::placeholder { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .placeholder-red-500\\/\\[50\\%\\]::placeholder { - color: color-mix(in srgb, #ef4444 50%, transparent); + color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .placeholder-red-500\\/\\[50\\%\\]::placeholder { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .placeholder-transparent::placeholder { - color: transparent; + color: #0000; } " `) @@ -20690,180 +23444,249 @@ test('decoration', async () => { --color-red-500: #ef4444; --text-decoration-color-blue-500: #3b82f6; } + .decoration-\\[\\#0088cc\\] { - text-decoration-color: #0088cc; - } - .decoration-\\[\\#0088cc\\]\\/50 { - text-decoration-color: color-mix(in oklab, #0088cc 50%, transparent); + text-decoration-color: #08c; } - .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - text-decoration-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { - text-decoration-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .decoration-\\[color\\:var\\(--my-color\\)\\] { - text-decoration-color: var(--my-color); + + .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { + text-decoration-color: oklab(59.9824% -.067 -.124 / .5); } - .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 { + + .decoration-\\[color\\:var\\(--my-color\\)\\], .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 { + -webkit-text-decoration-color: var(--my-color); + -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + -webkit-text-decoration-color: var(--my-color); + -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + -webkit-text-decoration-color: var(--my-color); + -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .decoration-\\[var\\(--my-color\\)\\] { - text-decoration-color: var(--my-color); - } - .decoration-\\[var\\(--my-color\\)\\]\\/50 { + + .decoration-\\[var\\(--my-color\\)\\], .decoration-\\[var\\(--my-color\\)\\]\\/50 { + -webkit-text-decoration-color: var(--my-color); + -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .decoration-\\[var\\(--my-color\\)\\]\\/50 { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + -webkit-text-decoration-color: var(--my-color); + -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + -webkit-text-decoration-color: var(--my-color); + -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .decoration-blue-500 { + -webkit-text-decoration-color: var(--text-decoration-color-blue-500); + -webkit-text-decoration-color: var(--text-decoration-color-blue-500); text-decoration-color: var(--text-decoration-color-blue-500); } - .decoration-current { - text-decoration-color: currentcolor; - } - .decoration-current\\/50 { - text-decoration-color: currentcolor; + + .decoration-current, .decoration-current\\/50 { + text-decoration-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .decoration-current\\/50 { + -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .decoration-current\\/\\[0\\.5\\] { - text-decoration-color: currentcolor; + text-decoration-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .decoration-current\\/\\[0\\.5\\] { + -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .decoration-current\\/\\[50\\%\\] { - text-decoration-color: currentcolor; + text-decoration-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .decoration-current\\/\\[50\\%\\] { + -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .decoration-inherit { + -webkit-text-decoration-color: inherit; + -webkit-text-decoration-color: inherit; text-decoration-color: inherit; } + .decoration-red-500 { + -webkit-text-decoration-color: var(--color-red-500); + -webkit-text-decoration-color: var(--color-red-500); text-decoration-color: var(--color-red-500); } + .decoration-red-500\\/50 { - text-decoration-color: color-mix(in srgb, #ef4444 50%, transparent); + text-decoration-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .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\\/\\[0\\.5\\] { - text-decoration-color: color-mix(in srgb, #ef4444 50%, transparent); + text-decoration-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .decoration-red-500\\/\\[0\\.5\\] { + -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\\%\\] { - text-decoration-color: color-mix(in srgb, #ef4444 50%, transparent); + text-decoration-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .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 { - text-decoration-color: transparent; + text-decoration-color: #0000; } + .decoration-dashed { text-decoration-style: dashed; } + .decoration-dotted { text-decoration-style: dotted; } + .decoration-double { text-decoration-style: double; } + .decoration-solid { text-decoration-style: solid; } + .decoration-wavy { text-decoration-style: wavy; } + .decoration-0 { - text-decoration-thickness: 0px; + text-decoration-thickness: 0; } + .decoration-1 { text-decoration-thickness: 1px; } + .decoration-2 { text-decoration-thickness: 2px; } + .decoration-4 { text-decoration-thickness: 4px; } + .decoration-123 { text-decoration-thickness: 123px; } + .decoration-\\[12px\\] { text-decoration-thickness: 12px; } + .decoration-\\[50\\%\\] { - text-decoration-thickness: 50%; - } - .decoration-\\[length\\:var\\(--my-thickness\\)\\] { - text-decoration-thickness: var(--my-thickness); + text-decoration-thickness: .5em; } - .decoration-\\[percentage\\:var\\(--my-thickness\\)\\] { + + .decoration-\\[length\\:var\\(--my-thickness\\)\\], .decoration-\\[percentage\\:var\\(--my-thickness\\)\\] { text-decoration-thickness: var(--my-thickness); } + .decoration-auto { text-decoration-thickness: auto; } + .decoration-from-font { text-decoration-thickness: from-font; } @@ -20940,12 +23763,15 @@ test('animate', async () => { :root, :host { --animate-spin: spin 1s linear infinite; } + .animate-\\[bounce_1s_infinite\\] { - animation: bounce 1s infinite; + animation: 1s infinite bounce; } + .animate-none { animation: none; } + .animate-spin { animation: var(--animate-spin); } @@ -20980,6 +23806,7 @@ test('animate', async () => { :root, :host { --animate-none: bounce 1s infinite; } + .animate-none { animation: var(--animate-none); } @@ -21046,252 +23873,306 @@ test('filter', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + } + } + } + :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --blur-xl: 24px; --color-red-500: #ef4444; - --drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05); - --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); + --drop-shadow: 0 1px 1px #0000000d; + --drop-shadow-xl: 0 9px 7px #0000001a; --drop-shadow-calc: 0 0 calc(1 * var(--spacing)) black; } + .blur-\\[4px\\] { --tw-blur: blur(4px); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .blur-none { --tw-blur: ; - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .blur-xl { --tw-blur: blur(var(--blur-xl)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .brightness-50 { --tw-brightness: brightness(50%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .brightness-\\[1\\.23\\] { --tw-brightness: brightness(1.23); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .contrast-50 { --tw-contrast: contrast(50%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .contrast-\\[1\\.23\\] { --tw-contrast: contrast(1.23); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .drop-shadow\\/25 { --tw-drop-shadow-alpha: 25%; - --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(from rgb(0 0 0 / 0.05) l a b / 25%))); + --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .25))); --tw-drop-shadow: drop-shadow(var(--drop-shadow)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .drop-shadow { - --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.05))); + --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d)); --tw-drop-shadow: drop-shadow(var(--drop-shadow)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .drop-shadow-\\[0_0_red\\] { --tw-drop-shadow-size: drop-shadow(0 0 var(--tw-drop-shadow-color, red)); --tw-drop-shadow: var(--tw-drop-shadow-size); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .drop-shadow-calc { --tw-drop-shadow-size: drop-shadow(0 0 calc(1 * var(--spacing)) var(--tw-drop-shadow-color, black)); --tw-drop-shadow: drop-shadow(var(--drop-shadow-calc)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .drop-shadow-multi { - --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.05))) drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))); - --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) drop-shadow( 0 9px 7px rgb(0 0 0 / 0.1)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d)) drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a)); + --tw-drop-shadow: drop-shadow(0 1px 1px #0000000d) drop-shadow(0 9px 7px #0000001a); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .drop-shadow-xl { - --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))); + --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a)); --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .drop-shadow-none { --tw-drop-shadow: ; - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .drop-shadow-inherit { --tw-drop-shadow-color: inherit; --tw-drop-shadow: var(--tw-drop-shadow-size); } + .drop-shadow-red-500 { --tw-drop-shadow-color: #ef4444; } + @supports (color: color-mix(in lab, red, red)) { .drop-shadow-red-500 { --tw-drop-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-drop-shadow-alpha), transparent); } } + .drop-shadow-red-500 { --tw-drop-shadow: var(--tw-drop-shadow-size); } + .drop-shadow-red-500\\/50 { - --tw-drop-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-drop-shadow-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .drop-shadow-red-500\\/50 { --tw-drop-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-drop-shadow-alpha), transparent); } } + .drop-shadow-red-500\\/50 { --tw-drop-shadow: var(--tw-drop-shadow-size); } + .grayscale { --tw-grayscale: grayscale(100%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .grayscale-0 { --tw-grayscale: grayscale(0%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .grayscale-\\[var\\(--value\\)\\] { --tw-grayscale: grayscale(var(--value)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .-hue-rotate-15 { --tw-hue-rotate: hue-rotate(calc(15deg * -1)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .-hue-rotate-\\[45deg\\] { --tw-hue-rotate: hue-rotate(calc(45deg * -1)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .hue-rotate-15 { --tw-hue-rotate: hue-rotate(15deg); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .hue-rotate-\\[45deg\\] { --tw-hue-rotate: hue-rotate(45deg); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .invert { --tw-invert: invert(100%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .invert-0 { --tw-invert: invert(0%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .invert-\\[var\\(--value\\)\\] { --tw-invert: invert(var(--value)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .saturate-0 { --tw-saturate: saturate(0%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .saturate-\\[1\\.75\\] { --tw-saturate: saturate(1.75); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .saturate-\\[var\\(--value\\)\\] { --tw-saturate: saturate(var(--value)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .sepia { --tw-sepia: sepia(100%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .sepia-0 { --tw-sepia: sepia(0%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .sepia-\\[50\\%\\] { --tw-sepia: sepia(50%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .sepia-\\[var\\(--value\\)\\] { --tw-sepia: sepia(var(--value)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .filter { - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .filter-\\[var\\(--value\\)\\] { filter: var(--value); } + .filter-none { filter: none; } + @property --tw-blur { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-brightness { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-contrast { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-grayscale { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-hue-rotate { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-invert { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-opacity { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-saturate { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-sepia { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-drop-shadow { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-drop-shadow-color { syntax: "*"; - inherits: false; - } - @property --tw-drop-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; - } - @property --tw-drop-shadow-size { - syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-drop-shadow: initial; - --tw-drop-shadow-color: initial; - --tw-drop-shadow-alpha: 100%; - --tw-drop-shadow-size: initial; - } - } + inherits: false + } + + @property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; + } + + @property --tw-drop-shadow-size { + syntax: "*"; + inherits: false } " `) @@ -21386,85 +24267,99 @@ test('filter', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + } + } + } + :root, :host { --blur-none: 2px; } + .blur-none { --tw-blur: blur(var(--blur-none)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + @property --tw-blur { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-brightness { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-contrast { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-grayscale { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-hue-rotate { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-invert { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-opacity { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-saturate { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-sepia { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-drop-shadow { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-drop-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-drop-shadow-size { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-drop-shadow: initial; - --tw-drop-shadow-color: initial; - --tw-drop-shadow-alpha: 100%; - --tw-drop-shadow-size: initial; - } - } + inherits: false } " `) @@ -21517,222 +24412,264 @@ test('backdrop-filter', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-backdrop-blur: initial; + --tw-backdrop-brightness: initial; + --tw-backdrop-contrast: initial; + --tw-backdrop-grayscale: initial; + --tw-backdrop-hue-rotate: initial; + --tw-backdrop-invert: initial; + --tw-backdrop-opacity: initial; + --tw-backdrop-saturate: initial; + --tw-backdrop-sepia: initial; + } + } + } + :root, :host { --blur-xl: 24px; } + .backdrop-blur-\\[4px\\] { --tw-backdrop-blur: blur(4px); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-blur-none { --tw-backdrop-blur: ; - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-blur-xl { --tw-backdrop-blur: blur(var(--blur-xl)); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-brightness-50 { --tw-backdrop-brightness: brightness(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-brightness-\\[1\\.23\\] { --tw-backdrop-brightness: brightness(1.23); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-contrast-50 { --tw-backdrop-contrast: contrast(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-contrast-\\[1\\.23\\] { --tw-backdrop-contrast: contrast(1.23); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-grayscale { --tw-backdrop-grayscale: grayscale(100%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-grayscale-0 { --tw-backdrop-grayscale: grayscale(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-grayscale-\\[var\\(--value\\)\\] { --tw-backdrop-grayscale: grayscale(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .-backdrop-hue-rotate-15 { --tw-backdrop-hue-rotate: hue-rotate(calc(15deg * -1)); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .-backdrop-hue-rotate-\\[45deg\\] { --tw-backdrop-hue-rotate: hue-rotate(calc(45deg * -1)); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-hue-rotate-15 { --tw-backdrop-hue-rotate: hue-rotate(15deg); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-hue-rotate-\\[45deg\\] { --tw-backdrop-hue-rotate: hue-rotate(45deg); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-invert { --tw-backdrop-invert: invert(100%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-invert-0 { --tw-backdrop-invert: invert(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-invert-\\[var\\(--value\\)\\] { --tw-backdrop-invert: invert(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-opacity-1\\.25 { --tw-backdrop-opacity: opacity(1.25%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-opacity-2\\.5 { --tw-backdrop-opacity: opacity(2.5%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-opacity-3\\.75 { --tw-backdrop-opacity: opacity(3.75%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-opacity-50 { --tw-backdrop-opacity: opacity(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-opacity-71 { --tw-backdrop-opacity: opacity(71%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-opacity-\\[0\\.5\\] { - --tw-backdrop-opacity: opacity(0.5); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + --tw-backdrop-opacity: opacity(.5); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-saturate-0 { --tw-backdrop-saturate: saturate(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-saturate-\\[1\\.75\\] { --tw-backdrop-saturate: saturate(1.75); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-saturate-\\[var\\(--value\\)\\] { --tw-backdrop-saturate: saturate(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-sepia { --tw-backdrop-sepia: sepia(100%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-sepia-0 { --tw-backdrop-sepia: sepia(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-sepia-\\[50\\%\\] { --tw-backdrop-sepia: sepia(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-sepia-\\[var\\(--value\\)\\] { --tw-backdrop-sepia: sepia(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + .backdrop-filter-\\[var\\(--value\\)\\] { -webkit-backdrop-filter: var(--value); backdrop-filter: var(--value); } + .backdrop-filter-none { -webkit-backdrop-filter: none; backdrop-filter: none; } + @property --tw-backdrop-blur { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-brightness { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-contrast { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-grayscale { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-hue-rotate { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-invert { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-opacity { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-saturate { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-sepia { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-backdrop-blur: initial; - --tw-backdrop-brightness: initial; - --tw-backdrop-contrast: initial; - --tw-backdrop-grayscale: initial; - --tw-backdrop-hue-rotate: initial; - --tw-backdrop-invert: initial; - --tw-backdrop-opacity: initial; - --tw-backdrop-saturate: initial; - --tw-backdrop-sepia: initial; - } - } + inherits: false } " `) @@ -21821,65 +24758,75 @@ test('backdrop-filter', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-backdrop-blur: initial; + --tw-backdrop-brightness: initial; + --tw-backdrop-contrast: initial; + --tw-backdrop-grayscale: initial; + --tw-backdrop-hue-rotate: initial; + --tw-backdrop-invert: initial; + --tw-backdrop-opacity: initial; + --tw-backdrop-saturate: initial; + --tw-backdrop-sepia: initial; + } + } + } + :root, :host { --backdrop-blur-none: 2px; } + .backdrop-blur-none { --tw-backdrop-blur: blur(var(--backdrop-blur-none)); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } + @property --tw-backdrop-blur { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-brightness { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-contrast { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-grayscale { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-hue-rotate { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-invert { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-opacity { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-saturate { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-backdrop-sepia { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-backdrop-blur: initial; - --tw-backdrop-brightness: initial; - --tw-backdrop-contrast: initial; - --tw-backdrop-grayscale: initial; - --tw-backdrop-hue-rotate: initial; - --tw-backdrop-invert: initial; - --tw-backdrop-opacity: initial; - --tw-backdrop-saturate: initial; - --tw-backdrop-sepia: initial; - } - } + inherits: false } " `) @@ -21914,44 +24861,52 @@ test('transition', async () => { " :root, :host { --default-transition-timing-function: ease; - --default-transition-duration: 100ms; + --default-transition-duration: .1s; --transition-property-opacity: opacity; } + .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-\\[var\\(--value\\)\\] { transition-property: var(--value); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-opacity { transition-property: var(--transition-property-opacity); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-shadow { transition-property: box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-none { transition-property: none; } @@ -21974,17 +24929,19 @@ test('transition', async () => { .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, ease); - transition-duration: var(--tw-duration, 100ms); + transition-duration: var(--tw-duration, .1s); } + .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, ease); - transition-duration: var(--tw-duration, 100ms); + transition-duration: var(--tw-duration, .1s); } + .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, ease); - transition-duration: var(--tw-duration, 100ms); + transition-duration: var(--tw-duration, .1s); } " `) @@ -22032,6 +24989,7 @@ test('transition', async () => { :root, :host { --transition-property-colors: transform; } + .transition-colors { transition-property: var(--transition-property-colors); transition-timing-function: var(--tw-ease, ease); @@ -22047,6 +25005,7 @@ test('transition-behavior', async () => { .transition-discrete { transition-behavior: allow-discrete; } + .transition-normal { transition-behavior: normal; } @@ -22060,13 +25019,15 @@ test('delay', async () => { expect(await run(['delay-123', 'delay-200', 'delay-[300ms]'])).toMatchInlineSnapshot(` " .delay-123 { - transition-delay: 123ms; + transition-delay: .123s; } + .delay-200 { - transition-delay: 200ms; + transition-delay: .2s; } + .delay-\\[300ms\\] { - transition-delay: 300ms; + transition-delay: .3s; } " `) @@ -22087,29 +25048,32 @@ test('delay', async () => { test('duration', async () => { expect(await run(['duration-123', 'duration-200', 'duration-[300ms]'])).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-duration: initial; + } + } + } + .duration-123 { - --tw-duration: 123ms; - transition-duration: 123ms; + --tw-duration: .123s; + transition-duration: .123s; } + .duration-200 { - --tw-duration: 200ms; - transition-duration: 200ms; + --tw-duration: .2s; + transition-duration: .2s; } + .duration-\\[300ms\\] { - --tw-duration: 300ms; - transition-duration: 300ms; + --tw-duration: .3s; + transition-duration: .3s; } + @property --tw-duration { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-duration: initial; - } - } + inherits: false } " `) @@ -22140,33 +25104,37 @@ test('ease', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-ease: initial; + } + } + } + :root, :host { - --ease-in: cubic-bezier(0.4, 0, 1, 1); - --ease-out: cubic-bezier(0, 0, 0.2, 1); + --ease-in: cubic-bezier(.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, .2, 1); } + .ease-\\[var\\(--value\\)\\] { --tw-ease: var(--value); transition-timing-function: var(--value); } + .ease-in { --tw-ease: var(--ease-in); transition-timing-function: var(--ease-in); } + .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } + @property --tw-ease { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-ease: initial; - } - } + inherits: false } " `) @@ -22193,24 +25161,26 @@ test('ease', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-ease: initial; + } + } + } + :root, :host { --ease-linear: steps(4); } + .ease-linear { --tw-ease: var(--ease-linear); transition-timing-function: var(--ease-linear); } + @property --tw-ease { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-ease: initial; - } - } + inherits: false } " `) @@ -22230,15 +25200,19 @@ test('will-change', async () => { .will-change-\\[var\\(--value\\)\\] { will-change: var(--value); } + .will-change-auto { will-change: auto; } + .will-change-contents { will-change: contents; } + .will-change-scroll { will-change: scroll-position; } + .will-change-transform { will-change: transform; } @@ -22276,64 +25250,76 @@ test('contain', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-contain-size: initial; + --tw-contain-layout: initial; + --tw-contain-paint: initial; + --tw-contain-style: initial; + } + } + } + .contain-inline-size { --tw-contain-size: inline-size; - contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); + contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); } + .contain-layout { --tw-contain-layout: layout; - contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); + contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); } + .contain-paint { --tw-contain-paint: paint; - contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); + contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); } + .contain-size { --tw-contain-size: size; - contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); + contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); } + .contain-style { --tw-contain-style: style; - contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); + contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); } + .contain-\\[unset\\] { contain: unset; } + .contain-content { contain: content; } + .contain-none { contain: none; } + .contain-strict { contain: strict; } + @property --tw-contain-size { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-contain-layout { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-contain-paint { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-contain-style { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-contain-size: initial; - --tw-contain-layout: initial; - --tw-contain-paint: initial; - --tw-contain-style: initial; - } - } + inherits: false } " `) @@ -22365,30 +25351,33 @@ test('content', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-content: ""; + } + } + } + :root, :host { - --content-slash: '/'; + --content-slash: "/"; } + .content-\\[\\"hello_world\\"\\] { --tw-content: "hello world"; content: var(--tw-content); } + .content-slash { --tw-content: var(--content-slash); content: var(--tw-content); } + @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-content: ""; - } - } - } " `) expect(await run(['content', '-content-["hello_world"]', 'content-["hello_world"]/foo'])).toEqual( @@ -22403,6 +25392,7 @@ test('forced-color-adjust', async () => { .forced-color-adjust-auto { forced-color-adjust: auto; } + .forced-color-adjust-none { forced-color-adjust: none; } @@ -22435,33 +25425,37 @@ test('leading', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-leading: initial; + } + } + } + :root, :host { --leading-tight: 1.25; --leading-6: 1.5rem; } + .leading-6 { --tw-leading: var(--leading-6); line-height: var(--leading-6); } + .leading-\\[var\\(--value\\)\\] { --tw-leading: var(--value); line-height: var(--value); } + .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } + @property --tw-leading { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-leading: initial; - } - } + inherits: false } " `) @@ -22489,24 +25483,26 @@ test('leading', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-leading: initial; + } + } + } + :root, :host { --leading-none: 2; } + .leading-none { --tw-leading: var(--leading-none); line-height: var(--leading-none); } + @property --tw-leading { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-leading: initial; - } - } + inherits: false } " `) @@ -22526,37 +25522,42 @@ test('tracking', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-tracking: initial; + } + } + } + :root, :host { --tracking-normal: 0em; - --tracking-wide: 0.025em; + --tracking-wide: .025em; } + .-tracking-\\[var\\(--value\\)\\] { --tw-tracking: calc(var(--value) * -1); letter-spacing: calc(var(--value) * -1); } + .tracking-\\[var\\(--value\\)\\] { --tw-tracking: var(--value); letter-spacing: var(--value); } + .tracking-normal { --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); } + .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } + @property --tw-tracking { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-tracking: initial; - } - } + inherits: false } " `) @@ -22578,6 +25579,7 @@ test('font-smoothing', async () => { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + .subpixel-antialiased { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; @@ -22609,72 +25611,85 @@ test('font-variant-numeric', async () => { ]), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-ordinal: initial; + --tw-slashed-zero: initial; + --tw-numeric-figure: initial; + --tw-numeric-spacing: initial; + --tw-numeric-fraction: initial; + } + } + } + .diagonal-fractions { --tw-numeric-fraction: diagonal-fractions; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } + .lining-nums { --tw-numeric-figure: lining-nums; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } + .oldstyle-nums { --tw-numeric-figure: oldstyle-nums; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } + .ordinal { --tw-ordinal: ordinal; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } + .proportional-nums { --tw-numeric-spacing: proportional-nums; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } + .slashed-zero { --tw-slashed-zero: slashed-zero; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } + .stacked-fractions { --tw-numeric-fraction: stacked-fractions; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } + .tabular-nums { --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } + .normal-nums { font-variant-numeric: normal; } + @property --tw-ordinal { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-slashed-zero { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-numeric-figure { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-numeric-spacing { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-numeric-fraction { syntax: "*"; - inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-ordinal: initial; - --tw-slashed-zero: initial; - --tw-numeric-figure: initial; - --tw-numeric-spacing: initial; - --tw-numeric-fraction: initial; - } - } + inherits: false } " `) @@ -22764,226 +25779,251 @@ test('outline', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-outline-style: solid; + } + } + } + :root, :host { --color-red-500: #ef4444; --outline-color-blue-500: #3b82f6; } + .outline-hidden { --tw-outline-style: none; outline-style: none; } + @media (forced-colors: active) { .outline-hidden { - outline: 2px solid transparent; outline-offset: 2px; + outline: 2px solid #0000; } } + .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } + .outline-0 { outline-style: var(--tw-outline-style); - outline-width: 0px; + outline-width: 0; } + .outline-\\[1\\.5\\] { outline-style: var(--tw-outline-style); - outline-width: 1.5; + outline-width: 1.5px; } + .outline-\\[12px\\] { outline-style: var(--tw-outline-style); outline-width: 12px; } + .outline-\\[50\\%\\] { outline-style: var(--tw-outline-style); outline-width: 50%; } - .outline-\\[length\\:var\\(--my-width\\)\\] { - outline-style: var(--tw-outline-style); - outline-width: var(--my-width); - } - .outline-\\[number\\:var\\(--my-width\\)\\] { - outline-style: var(--tw-outline-style); - outline-width: var(--my-width); - } - .outline-\\[percentage\\:var\\(--my-width\\)\\] { + + .outline-\\[length\\:var\\(--my-width\\)\\], .outline-\\[number\\:var\\(--my-width\\)\\], .outline-\\[percentage\\:var\\(--my-width\\)\\] { outline-style: var(--tw-outline-style); outline-width: var(--my-width); } + .outline-\\[\\#0088cc\\] { - outline-color: #0088cc; + outline-color: #08c; } - .outline-\\[\\#0088cc\\]\\/50 { - outline-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - outline-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { - outline-color: color-mix(in oklab, #0088cc 50%, transparent); + + .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { + outline-color: oklab(59.9824% -.067 -.124 / .5); } + .outline-\\[black\\] { - outline-color: black; + outline-color: #000; } + .outline-\\[black\\]\\/50 { - outline-color: color-mix(in oklab, black 50%, transparent); + outline-color: oklab(0% none none / .5); } + .outline-\\[black\\]\\/\\[0\\.5\\] { - outline-color: color-mix(in oklab, black 50%, transparent); + outline-color: oklab(0% none none / .5); } + .outline-\\[black\\]\\/\\[50\\%\\] { - outline-color: color-mix(in oklab, black 50%, transparent); - } - .outline-\\[color\\:var\\(--value\\)\\] { - outline-color: var(--value); + outline-color: oklab(0% none none / .5); } - .outline-\\[color\\:var\\(--value\\)\\]\\/50 { + + .outline-\\[color\\:var\\(--value\\)\\], .outline-\\[color\\:var\\(--value\\)\\]\\/50 { outline-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .outline-\\[color\\:var\\(--value\\)\\]\\/50 { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } + .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { outline-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } + .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { outline-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } - .outline-\\[var\\(--value\\)\\] { - outline-color: var(--value); - } - .outline-\\[var\\(--value\\)\\]\\/50 { + + .outline-\\[var\\(--value\\)\\], .outline-\\[var\\(--value\\)\\]\\/50 { outline-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .outline-\\[var\\(--value\\)\\]\\/50 { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } + .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] { outline-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } + .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] { outline-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } } + .outline-blue-500 { outline-color: var(--outline-color-blue-500); } - .outline-current { - outline-color: currentcolor; - } - .outline-current\\/50 { - outline-color: currentcolor; + + .outline-current, .outline-current\\/50 { + outline-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .outline-current\\/50 { outline-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .outline-current\\/\\[0\\.5\\] { - outline-color: currentcolor; + outline-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .outline-current\\/\\[0\\.5\\] { outline-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .outline-current\\/\\[50\\%\\] { - outline-color: currentcolor; + outline-color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .outline-current\\/\\[50\\%\\] { outline-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .outline-inherit { outline-color: inherit; } + .outline-red-500 { outline-color: var(--color-red-500); } + .outline-red-500\\/50 { - outline-color: color-mix(in srgb, #ef4444 50%, transparent); + outline-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .outline-red-500\\/50 { outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .outline-red-500\\/\\[0\\.5\\] { - outline-color: color-mix(in srgb, #ef4444 50%, transparent); + outline-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .outline-red-500\\/\\[0\\.5\\] { outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .outline-red-500\\/\\[50\\%\\] { - outline-color: color-mix(in srgb, #ef4444 50%, transparent); + outline-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .outline-red-500\\/\\[50\\%\\] { outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .outline-transparent { - outline-color: transparent; + outline-color: #0000; } + .outline-dashed { --tw-outline-style: dashed; outline-style: dashed; } + .outline-dotted { --tw-outline-style: dotted; outline-style: dotted; } + .outline-double { --tw-outline-style: double; outline-style: double; } + .outline-none { --tw-outline-style: none; outline-style: none; } + .outline-solid { --tw-outline-style: solid; outline-style: solid; } + @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-outline-style: solid; - } - } - } " `) expect( @@ -22998,23 +26038,24 @@ test('outline', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-outline-style: solid; + } + } + } + .outline { outline-style: var(--tw-outline-style); outline-width: 2px; } + @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-outline-style: solid; - } - } - } " `) expect( @@ -23071,12 +26112,15 @@ test('outline-offset', async () => { .-outline-offset-4 { outline-offset: calc(4px * -1); } + .-outline-offset-\\[var\\(--value\\)\\] { outline-offset: calc(var(--value) * -1); } + .outline-offset-4 { outline-offset: 4px; } + .outline-offset-\\[var\\(--value\\)\\] { outline-offset: var(--value); } @@ -23107,17 +26151,21 @@ test('opacity', async () => { ).toMatchInlineSnapshot(` " .opacity-2\\.5 { - opacity: 2.5%; + opacity: .025; } + .opacity-3\\.25 { - opacity: 3.25%; + opacity: .0325; } + .opacity-4\\.75 { - opacity: 4.75%; + opacity: .0475; } + .opacity-15 { - opacity: 15%; + opacity: .15; } + .opacity-\\[var\\(--value\\)\\] { opacity: var(--value); } @@ -23160,21 +26208,27 @@ test('underline-offset', async () => { .-underline-offset-4 { text-underline-offset: calc(4px * -1); } + .-underline-offset-123 { text-underline-offset: calc(123px * -1); } + .-underline-offset-\\[var\\(--value\\)\\] { text-underline-offset: calc(var(--value) * -1); } + .underline-offset-4 { text-underline-offset: 4px; } + .underline-offset-123 { text-underline-offset: 123px; } + .underline-offset-\\[var\\(--value\\)\\] { text-underline-offset: var(--value); } + .underline-offset-auto { text-underline-offset: auto; } @@ -23211,6 +26265,7 @@ test('underline-offset', async () => { :root, :host { --text-underline-offset-auto: 4px; } + .underline-offset-auto { text-underline-offset: var(--text-underline-offset-auto); } @@ -23289,239 +26344,273 @@ test('text', async () => { ).toMatchInlineSnapshot(` " :root, :host { - --spacing: 0.25rem; + --spacing: .25rem; --color-red-500: #ef4444; --text-color-blue-500: #3b82f6; - --text-sm: 0.875rem; + --text-sm: .875rem; --text-sm--line-height: 1.25rem; --leading-snug: 1.375; } + .text-\\[10px\\]\\/none { font-size: 10px; line-height: 1; } + .text-\\[12px\\]\\/6 { font-size: 12px; line-height: calc(var(--spacing) * 6); } + .text-\\[50\\%\\]\\/6 { font-size: 50%; line-height: calc(var(--spacing) * 6); } + .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 { font-size: clamp(1rem, var(--size), 3rem); line-height: calc(var(--spacing) * 9); } + .text-\\[larger\\]\\/6 { font-size: larger; line-height: calc(var(--spacing) * 6); } + .text-\\[xx-large\\]\\/6 { font-size: xx-large; line-height: calc(var(--spacing) * 6); } + .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } + .text-sm\\/6 { font-size: var(--text-sm); line-height: calc(var(--spacing) * 6); } + .text-sm\\/\\[4px\\] { font-size: var(--text-sm); line-height: 4px; } + .text-sm\\/none { font-size: var(--text-sm); line-height: 1; } + .text-sm\\/snug { font-size: var(--text-sm); line-height: var(--leading-snug); } + .text-\\[12px\\] { font-size: 12px; } + .text-\\[50\\%\\] { font-size: 50%; } + .text-\\[absolute-size\\:var\\(--my-size\\)\\] { font-size: var(--my-size); } + .text-\\[clamp\\(1rem\\,2rem\\,3rem\\)\\] { - font-size: clamp(1rem, 2rem, 3rem); + font-size: 2rem; } + .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\] { font-size: clamp(1rem, var(--size), 3rem); } + .text-\\[larger\\] { font-size: larger; } - .text-\\[length\\:var\\(--my-size\\)\\] { - font-size: var(--my-size); - } - .text-\\[percentage\\:var\\(--my-size\\)\\] { - font-size: var(--my-size); - } - .text-\\[relative-size\\:var\\(--my-size\\)\\] { + + .text-\\[length\\:var\\(--my-size\\)\\], .text-\\[percentage\\:var\\(--my-size\\)\\], .text-\\[relative-size\\:var\\(--my-size\\)\\] { font-size: var(--my-size); } + .text-\\[xx-large\\] { font-size: xx-large; } + .text-\\[\\#0088cc\\] { - color: #0088cc; - } - .text-\\[\\#0088cc\\]\\/50 { - color: color-mix(in oklab, #0088cc 50%, transparent); - } - .text-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - color: color-mix(in oklab, #0088cc 50%, transparent); + color: #08c; } - .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { - color: color-mix(in oklab, #0088cc 50%, transparent); - } - .text-\\[color\\:var\\(--my-color\\)\\] { - color: var(--my-color); + + .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { + color: oklab(59.9824% -.067 -.124 / .5); } - .text-\\[color\\:var\\(--my-color\\)\\]\\/50 { + + .text-\\[color\\:var\\(--my-color\\)\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/50 { color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .text-\\[color\\:var\\(--my-color\\)\\]\\/50 { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .text-\\[var\\(--my-color\\)\\] { - color: var(--my-color); - } - .text-\\[var\\(--my-color\\)\\]\\/50 { + + .text-\\[var\\(--my-color\\)\\], .text-\\[var\\(--my-color\\)\\]\\/50 { color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .text-\\[var\\(--my-color\\)\\]\\/50 { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .text-blue-500 { color: var(--text-color-blue-500); } - .text-current { - color: currentcolor; - } - .text-current\\/50 { - color: currentcolor; + + .text-current, .text-current\\/50 { + color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .text-current\\/50 { color: color-mix(in oklab, currentcolor 50%, transparent); } } + .text-current\\/\\[0\\.5\\] { - color: currentcolor; + color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .text-current\\/\\[0\\.5\\] { color: color-mix(in oklab, currentcolor 50%, transparent); } } + .text-current\\/\\[50\\%\\] { - color: currentcolor; + color: currentColor; } + @supports (color: color-mix(in lab, red, red)) { .text-current\\/\\[50\\%\\] { color: color-mix(in oklab, currentcolor 50%, transparent); } } + .text-inherit { color: inherit; } + .text-red-500 { color: var(--color-red-500); } + .text-red-500\\/2\\.5 { - color: color-mix(in srgb, #ef4444 2.5%, transparent); + color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .text-red-500\\/2\\.5 { color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .text-red-500\\/2\\.25 { - color: color-mix(in srgb, #ef4444 2.25%, transparent); + color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .text-red-500\\/2\\.25 { color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .text-red-500\\/2\\.75 { - color: color-mix(in srgb, #ef4444 2.75%, transparent); + color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .text-red-500\\/2\\.75 { color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .text-red-500\\/50 { - color: color-mix(in srgb, #ef4444 50%, transparent); + color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .text-red-500\\/50 { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .text-red-500\\/\\[0\\.5\\] { - color: color-mix(in srgb, #ef4444 50%, transparent); + color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .text-red-500\\/\\[0\\.5\\] { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .text-red-500\\/\\[50\\%\\] { - color: color-mix(in srgb, #ef4444 50%, transparent); + color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .text-red-500\\/\\[50\\%\\] { color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .text-transparent { - color: transparent; + color: #0000; } " `) @@ -23615,240 +26704,293 @@ test('text-shadow', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-text-shadow-color: initial; + --tw-text-shadow-alpha: 100%; + } + } + } + :root, :host { --color-red-500: #ef4444; } + .text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-text-shadow-alpha: 25%; text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value)); } + @supports (color: lab(from red l a b)) { .text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(from var(--value) l a b / 25%)); } } + .text-shadow-\\[10px_10px\\]\\/25 { --tw-text-shadow-alpha: 25%; text-shadow: 10px 10px var(--tw-text-shadow-color, currentcolor); } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-\\[10px_10px\\]\\/25 { text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); } } + .text-shadow-\\[12px_12px_\\#0088cc\\]\\/25 { --tw-text-shadow-alpha: 25%; - text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(from #0088cc l a b / 25%)); + text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(59.9824% -.067 -.124 / .25)); } + .text-shadow-sm\\/25 { --tw-text-shadow-alpha: 25%; - text-shadow: 0px 1px 2px var(--tw-text-shadow-color, oklab(from rgb(0 0 0 / 0.06) l a b / 25%)), 0px 2px 2px var(--tw-text-shadow-color, oklab(from rgb(0 0 0 / 0.06) l a b / 25%)); + text-shadow: 0px 1px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .25)), 0px 2px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .25)); } + .text-shadow-2xs { - text-shadow: 0px 1px 0px var(--tw-text-shadow-color, rgb(0 0 0 / 0.1)); + text-shadow: 0px 1px 0px var(--tw-text-shadow-color, #0000001a); } + .text-shadow-\\[\\#0088cc\\] { - --tw-text-shadow-color: #0088cc; + --tw-text-shadow-color: #08c; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-\\[\\#0088cc\\] { - --tw-text-shadow-color: color-mix(in oklab, #0088cc var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: color-mix(in oklab, #08c var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-\\[\\#0088cc\\]\\/50 { - --tw-text-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + --tw-text-shadow-color: #0088cc80; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-\\[\\#0088cc\\]\\/50 { - --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-text-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + --tw-text-shadow-color: #0088cc80; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-text-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + --tw-text-shadow-color: #0088cc80; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-text-shadow-alpha), transparent); + --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-\\[10px_10px\\] { text-shadow: 10px 10px var(--tw-text-shadow-color, currentcolor); } + .text-shadow-\\[12px_12px_\\#0088cc\\] { - text-shadow: 12px 12px var(--tw-text-shadow-color, #0088cc); + text-shadow: 12px 12px var(--tw-text-shadow-color, #08c); } + .text-shadow-\\[12px_12px_var\\(--value\\)\\] { text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value)); } + .text-shadow-\\[color\\:var\\(--value\\)\\] { --tw-text-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-\\[color\\:var\\(--value\\)\\] { --tw-text-shadow-color: color-mix(in oklab, var(--value) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-text-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-text-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-text-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } - .text-shadow-\\[shadow\\:var\\(--value\\)\\] { - text-shadow: var(--value); - } - .text-shadow-\\[var\\(--value\\)\\] { + + .text-shadow-\\[shadow\\:var\\(--value\\)\\], .text-shadow-\\[var\\(--value\\)\\] { text-shadow: var(--value); } + .text-shadow-current { --tw-text-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-current { --tw-text-shadow-color: color-mix(in oklab, currentcolor var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-current\\/50 { --tw-text-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-current\\/50 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-current\\/\\[0\\.5\\] { --tw-text-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-current\\/\\[0\\.5\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-current\\/\\[50\\%\\] { --tw-text-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-current\\/\\[50\\%\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-inherit { --tw-text-shadow-color: inherit; } + .text-shadow-none { text-shadow: none; } + .text-shadow-red-500 { --tw-text-shadow-color: #ef4444; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-red-500 { --tw-text-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-red-500\\/2\\.5 { - --tw-text-shadow-color: color-mix(in srgb, #ef4444 2.5%, transparent); + --tw-text-shadow-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-red-500\\/2\\.5 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-red-500\\/2\\.25 { - --tw-text-shadow-color: color-mix(in srgb, #ef4444 2.25%, transparent); + --tw-text-shadow-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-red-500\\/2\\.25 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-red-500\\/2\\.75 { - --tw-text-shadow-color: color-mix(in srgb, #ef4444 2.75%, transparent); + --tw-text-shadow-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-red-500\\/2\\.75 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-red-500\\/50 { - --tw-text-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-text-shadow-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-red-500\\/50 { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-red-500\\/\\[0\\.5\\] { - --tw-text-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-text-shadow-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-red-500\\/\\[0\\.5\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-red-500\\/\\[50\\%\\] { - --tw-text-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-text-shadow-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-red-500\\/\\[50\\%\\] { --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent); } } + .text-shadow-sm { - text-shadow: 0px 1px 2px var(--tw-text-shadow-color, rgb(0 0 0 / 0.06)), 0px 2px 2px var(--tw-text-shadow-color, rgb(0 0 0 / 0.06)); + text-shadow: 0px 1px 2px var(--tw-text-shadow-color, #0000000f), 0px 2px 2px var(--tw-text-shadow-color, #0000000f); } + .text-shadow-transparent { --tw-text-shadow-color: transparent; } + @supports (color: color-mix(in lab, red, red)) { .text-shadow-transparent { --tw-text-shadow-color: color-mix(in oklab, transparent var(--tw-text-shadow-alpha), transparent); } } + @property --tw-text-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-text-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-text-shadow-color: initial; - --tw-text-shadow-alpha: 100%; - } - } - } " `) expect( @@ -23929,333 +27071,401 @@ test('shadow', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + :root, :host { --color-red-500: #ef4444; --box-shadow-color-blue-500: #3b82f6; } + .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-shadow-alpha: 25%; --tw-shadow: 12px 12px var(--tw-shadow-color, var(--value)); } + @supports (color: lab(from red l a b)) { .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(from var(--value) l a b / 25%)); } } + .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-\\[10px_10px\\]\\/25 { --tw-shadow-alpha: 25%; --tw-shadow: 10px 10px var(--tw-shadow-color, currentcolor); } + @supports (color: color-mix(in lab, red, red)) { .shadow-\\[10px_10px\\]\\/25 { --tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); } } + .shadow-\\[10px_10px\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-\\[12px_12px_\\#0088cc\\]\\/25 { --tw-shadow-alpha: 25%; - --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(from #0088cc l a b / 25%)); + --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(59.9824% -.067 -.124 / .25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-sm\\/25 { --tw-shadow-alpha: 25%; - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 25%)), 0 1px 2px -1px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 25%)); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(0% 0 0 / .25)), 0 1px 2px -1px var(--tw-shadow-color, oklab(0% 0 0 / .25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-\\[10px_10px\\] { --tw-shadow: 10px 10px var(--tw-shadow-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-\\[12px_12px_\\#0088cc\\] { - --tw-shadow: 12px 12px var(--tw-shadow-color, #0088cc); + --tw-shadow: 12px 12px var(--tw-shadow-color, #08c); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-\\[12px_12px_var\\(--value\\)\\] { --tw-shadow: 12px 12px var(--tw-shadow-color, var(--value)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-\\[shadow\\:var\\(--value\\)\\] { - --tw-shadow: var(--value); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .shadow-\\[var\\(--value\\)\\] { + + .shadow-\\[shadow\\:var\\(--value\\)\\], .shadow-\\[var\\(--value\\)\\] { --tw-shadow: var(--value); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-sm { - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-xl { - --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-\\[\\#0088cc\\] { - --tw-shadow-color: #0088cc; + --tw-shadow-color: #08c; } + @supports (color: color-mix(in lab, red, red)) { .shadow-\\[\\#0088cc\\] { - --tw-shadow-color: color-mix(in oklab, #0088cc var(--tw-shadow-alpha), transparent); + --tw-shadow-color: color-mix(in oklab, #08c var(--tw-shadow-alpha), transparent); } } + .shadow-\\[\\#0088cc\\]\\/50 { - --tw-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + --tw-shadow-color: #0088cc80; } + @supports (color: color-mix(in lab, red, red)) { .shadow-\\[\\#0088cc\\]\\/50 { - --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-shadow-alpha), transparent); + --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent); } } + .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + --tw-shadow-color: #0088cc80; } + @supports (color: color-mix(in lab, red, red)) { .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-shadow-alpha), transparent); + --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent); } } + .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + --tw-shadow-color: #0088cc80; } + @supports (color: color-mix(in lab, red, red)) { .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-shadow-alpha), transparent); + --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent); } } + .shadow-\\[color\\:var\\(--value\\)\\] { --tw-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .shadow-\\[color\\:var\\(--value\\)\\] { --tw-shadow-color: color-mix(in oklab, var(--value) var(--tw-shadow-alpha), transparent); } } + .shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-blue-500 { --tw-shadow-color: #3b82f6; } + @supports (color: color-mix(in lab, red, red)) { .shadow-blue-500 { --tw-shadow-color: color-mix(in oklab, var(--box-shadow-color-blue-500) var(--tw-shadow-alpha), transparent); } } + .shadow-current { --tw-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .shadow-current { --tw-shadow-color: color-mix(in oklab, currentcolor var(--tw-shadow-alpha), transparent); } } + .shadow-current\\/50 { --tw-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .shadow-current\\/50 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-current\\/\\[0\\.5\\] { --tw-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .shadow-current\\/\\[0\\.5\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-current\\/\\[50\\%\\] { --tw-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .shadow-current\\/\\[50\\%\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-inherit { --tw-shadow-color: inherit; } + .shadow-red-500 { --tw-shadow-color: #ef4444; } + @supports (color: color-mix(in lab, red, red)) { .shadow-red-500 { --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent); } } + .shadow-red-500\\/2\\.5 { - --tw-shadow-color: color-mix(in srgb, #ef4444 2.5%, transparent); + --tw-shadow-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .shadow-red-500\\/2\\.5 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-red-500\\/2\\.25 { - --tw-shadow-color: color-mix(in srgb, #ef4444 2.25%, transparent); + --tw-shadow-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .shadow-red-500\\/2\\.25 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-red-500\\/2\\.75 { - --tw-shadow-color: color-mix(in srgb, #ef4444 2.75%, transparent); + --tw-shadow-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .shadow-red-500\\/2\\.75 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-red-500\\/50 { - --tw-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-shadow-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .shadow-red-500\\/50 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-red-500\\/\\[0\\.5\\] { - --tw-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-shadow-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .shadow-red-500\\/\\[0\\.5\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-red-500\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-shadow-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .shadow-red-500\\/\\[50\\%\\] { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent); } } + .shadow-transparent { --tw-shadow-color: transparent; } + @supports (color: color-mix(in lab, red, red)) { .shadow-transparent { --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent); } } + @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-ring-inset { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0px; + initial-value: 0; } + @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } + @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } " `) expect( @@ -24336,340 +27546,410 @@ test('inset-shadow', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + :root, :host { --color-red-500: #ef4444; } + .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 { --tw-inset-shadow-alpha: 25%; - --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #0088cc), inset 12px 12px var(--tw-inset-shadow-color, var(--value,#0088cc)); + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c), inset 12px 12px var(--tw-inset-shadow-color, var(--value, #08c)); } + @supports (color: lab(from red l a b)) { .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 { - --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from #0088cc l a b / 25%)), inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value,#0088cc) l a b / 25%)); + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(59.9824% -.067 -.124 / .25)), inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value, #08c) l a b / 25%)); } } + .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-inset-shadow-alpha: 25%; --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value)); } + @supports (color: lab(from red l a b)) { .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value) l a b / 25%)); } } + .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-\\[10px_10px\\]\\/25 { --tw-inset-shadow-alpha: 25%; --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, currentcolor); } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-\\[10px_10px\\]\\/25 { --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent)); } } + .inset-shadow-\\[10px_10px\\]\\/25 { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-\\[12px_12px_\\#0088cc\\]\\/25 { --tw-inset-shadow-alpha: 25%; - --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from #0088cc l a b / 25%)); + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(59.9824% -.067 -.124 / .25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-sm\\/25 { --tw-inset-shadow-alpha: 25%; - --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, oklab(from rgb(0 0 0 / 0.05) l a b / 25%)); + --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, oklab(0% 0 0 / .25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow { - --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05)); + --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, #0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-\\[10px_10px\\] { --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\] { - --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #0088cc), inset 12px 12px var(--tw-inset-shadow-color, var(--value,#0088cc)); + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c), inset 12px 12px var(--tw-inset-shadow-color, var(--value, #08c)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-\\[12px_12px_\\#0088cc\\] { - --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #0088cc); + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-\\[12px_12px_var\\(--value\\)\\] { --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .inset-shadow-\\[shadow\\:var\\(--value\\)\\] { - --tw-inset-shadow: inset var(--value); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .inset-shadow-\\[var\\(--value\\)\\] { + + .inset-shadow-\\[shadow\\:var\\(--value\\)\\], .inset-shadow-\\[var\\(--value\\)\\] { --tw-inset-shadow: inset var(--value); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-none { --tw-inset-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-sm { - --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05)); + --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, #0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-\\[\\#0088cc\\] { - --tw-inset-shadow-color: #0088cc; + --tw-inset-shadow-color: #08c; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-\\[\\#0088cc\\] { - --tw-inset-shadow-color: color-mix(in oklab, #0088cc var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: color-mix(in oklab, #08c var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-\\[\\#0088cc\\]\\/50 { - --tw-inset-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + --tw-inset-shadow-color: #0088cc80; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-\\[\\#0088cc\\]\\/50 { - --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-inset-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + --tw-inset-shadow-color: #0088cc80; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in srgb, #0088cc 50%, transparent); + --tw-inset-shadow-color: #0088cc80; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, #0088cc 50%, transparent) var(--tw-inset-shadow-alpha), transparent); + --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-\\[color\\:var\\(--value\\)\\] { --tw-inset-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-\\[color\\:var\\(--value\\)\\] { --tw-inset-shadow-color: color-mix(in oklab, var(--value) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-inset-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-inset-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-inset-shadow-color: var(--value); } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-current { --tw-inset-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-current { --tw-inset-shadow-color: color-mix(in oklab, currentcolor var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-current\\/50 { --tw-inset-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-current\\/50 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-current\\/\\[0\\.5\\] { --tw-inset-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-current\\/\\[0\\.5\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-current\\/\\[50\\%\\] { --tw-inset-shadow-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-current\\/\\[50\\%\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-inherit { --tw-inset-shadow-color: inherit; } + .inset-shadow-red-500 { --tw-inset-shadow-color: #ef4444; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-red-500 { --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-red-500\\/2\\.5 { - --tw-inset-shadow-color: color-mix(in srgb, #ef4444 2.5%, transparent); + --tw-inset-shadow-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-red-500\\/2\\.5 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-red-500\\/2\\.25 { - --tw-inset-shadow-color: color-mix(in srgb, #ef4444 2.25%, transparent); + --tw-inset-shadow-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-red-500\\/2\\.25 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-red-500\\/2\\.75 { - --tw-inset-shadow-color: color-mix(in srgb, #ef4444 2.75%, transparent); + --tw-inset-shadow-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-red-500\\/2\\.75 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-red-500\\/50 { - --tw-inset-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-inset-shadow-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-red-500\\/50 { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-red-500\\/\\[0\\.5\\] { - --tw-inset-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-inset-shadow-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-red-500\\/\\[0\\.5\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-red-500\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-inset-shadow-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-red-500\\/\\[50\\%\\] { --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent); } } + .inset-shadow-transparent { --tw-inset-shadow-color: transparent; } + @supports (color: color-mix(in lab, red, red)) { .inset-shadow-transparent { --tw-inset-shadow-color: color-mix(in oklab, transparent var(--tw-inset-shadow-alpha), transparent); } } + @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-ring-inset { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0px; + initial-value: 0; } + @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } + @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } " `) expect( @@ -24747,263 +28027,340 @@ test('ring', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + :root, :host { --color-red-500: #ef4444; --ring-color-blue-500: #3b82f6; } + .ring { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring-0 { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring-1 { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring-2 { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring-4 { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring-\\[12px\\] { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(12px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(12px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring-\\[length\\:var\\(--my-width\\)\\] { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(var(--my-width) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(var(--my-width) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring-\\[\\#0088cc\\] { - --tw-ring-color: #0088cc; - } - .ring-\\[\\#0088cc\\]\\/50 { - --tw-ring-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-ring-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in oklab, #0088cc 50%, transparent); + --tw-ring-color: #08c; } - .ring-\\[color\\:var\\(--my-color\\)\\] { - --tw-ring-color: var(--my-color); + + .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-ring-color: oklab(59.9824% -.067 -.124 / .5); } - .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { + + .ring-\\[color\\:var\\(--my-color\\)\\], .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-\\[var\\(--my-color\\)\\] { - --tw-ring-color: var(--my-color); - } - .ring-\\[var\\(--my-color\\)\\]\\/50 { + + .ring-\\[var\\(--my-color\\)\\], .ring-\\[var\\(--my-color\\)\\]\\/50 { --tw-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-\\[var\\(--my-color\\)\\]\\/50 { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .ring-blue-500 { --tw-ring-color: var(--ring-color-blue-500); } - .ring-current { - --tw-ring-color: currentcolor; - } - .ring-current\\/50 { + + .ring-current, .ring-current\\/50 { --tw-ring-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .ring-current\\/50 { --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .ring-current\\/\\[0\\.5\\] { --tw-ring-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .ring-current\\/\\[0\\.5\\] { --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .ring-current\\/\\[50\\%\\] { --tw-ring-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .ring-current\\/\\[50\\%\\] { --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .ring-inherit { --tw-ring-color: inherit; } + .ring-red-500 { --tw-ring-color: var(--color-red-500); } + .ring-red-500\\/2\\.5 { - --tw-ring-color: color-mix(in srgb, #ef4444 2.5%, transparent); + --tw-ring-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .ring-red-500\\/2\\.5 { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .ring-red-500\\/2\\.25 { - --tw-ring-color: color-mix(in srgb, #ef4444 2.25%, transparent); + --tw-ring-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .ring-red-500\\/2\\.25 { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .ring-red-500\\/2\\.75 { - --tw-ring-color: color-mix(in srgb, #ef4444 2.75%, transparent); + --tw-ring-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .ring-red-500\\/2\\.75 { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .ring-red-500\\/50 { - --tw-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-ring-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .ring-red-500\\/50 { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .ring-red-500\\/\\[0\\.5\\] { - --tw-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-ring-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .ring-red-500\\/\\[0\\.5\\] { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .ring-red-500\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-ring-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .ring-red-500\\/\\[50\\%\\] { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .ring-transparent { --tw-ring-color: transparent; } + .ring-inset { --tw-ring-inset: inset; } + @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-ring-inset { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0px; + initial-value: 0; } + @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } + @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + " + `) + expect( + await run( + ['ring'], + css` + @theme { + --default-ring-width: 2px; + } + @tailwind utilities; + `, + ), + ).toMatchInlineSnapshot(` + " @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; @@ -25021,110 +28378,90 @@ test('ring', async () => { } } } - " - `) - expect( - await run( - ['ring'], - css` - @theme { - --default-ring-width: 2px; - } - @tailwind utilities; - `, - ), - ).toMatchInlineSnapshot(` - " - @layer properties; + .ring { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-ring-inset { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0px; + initial-value: 0; } + @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } + @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } " `) expect( @@ -25214,273 +28551,314 @@ test('inset-ring', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + :root, :host { --color-red-500: #ef4444; } + .inset-ring { --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-ring-0 { --tw-inset-ring-shadow: inset 0 0 0 0px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-ring-1 { --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-ring-2 { --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-ring-4 { --tw-inset-ring-shadow: inset 0 0 0 4px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-ring-\\[12px\\] { --tw-inset-ring-shadow: inset 0 0 0 12px var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-ring-\\[length\\:var\\(--my-width\\)\\] { --tw-inset-ring-shadow: inset 0 0 0 var(--my-width) var(--tw-inset-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-ring-\\[\\#0088cc\\] { - --tw-inset-ring-color: #0088cc; - } - .inset-ring-\\[\\#0088cc\\]\\/50 { - --tw-inset-ring-color: color-mix(in oklab, #0088cc 50%, transparent); + --tw-inset-ring-color: #08c; } - .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-inset-ring-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .inset-ring-\\[color\\:var\\(--my-color\\)\\] { - --tw-inset-ring-color: var(--my-color); + + .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-inset-ring-color: oklab(59.9824% -.067 -.124 / .5); } - .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { + + .inset-ring-\\[color\\:var\\(--my-color\\)\\], .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-inset-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-inset-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-inset-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .inset-ring-\\[var\\(--my-color\\)\\] { - --tw-inset-ring-color: var(--my-color); - } - .inset-ring-\\[var\\(--my-color\\)\\]\\/50 { + + .inset-ring-\\[var\\(--my-color\\)\\], .inset-ring-\\[var\\(--my-color\\)\\]\\/50 { --tw-inset-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-\\[var\\(--my-color\\)\\]\\/50 { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-inset-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-inset-ring-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .inset-ring-current { - --tw-inset-ring-color: currentcolor; - } - .inset-ring-current\\/50 { + + .inset-ring-current, .inset-ring-current\\/50 { --tw-inset-ring-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-current\\/50 { --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .inset-ring-current\\/\\[0\\.5\\] { --tw-inset-ring-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-current\\/\\[0\\.5\\] { --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .inset-ring-current\\/\\[50\\%\\] { --tw-inset-ring-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-current\\/\\[50\\%\\] { --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .inset-ring-inherit { --tw-inset-ring-color: inherit; } + .inset-ring-red-500 { --tw-inset-ring-color: var(--color-red-500); } + .inset-ring-red-500\\/2\\.5 { - --tw-inset-ring-color: color-mix(in srgb, #ef4444 2.5%, transparent); + --tw-inset-ring-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-red-500\\/2\\.5 { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent); } } + .inset-ring-red-500\\/2\\.25 { - --tw-inset-ring-color: color-mix(in srgb, #ef4444 2.25%, transparent); + --tw-inset-ring-color: #ef444406; } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-red-500\\/2\\.25 { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent); } } + .inset-ring-red-500\\/2\\.75 { - --tw-inset-ring-color: color-mix(in srgb, #ef4444 2.75%, transparent); + --tw-inset-ring-color: #ef444407; } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-red-500\\/2\\.75 { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent); } } + .inset-ring-red-500\\/50 { - --tw-inset-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-inset-ring-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-red-500\\/50 { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .inset-ring-red-500\\/\\[0\\.5\\] { - --tw-inset-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-inset-ring-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-red-500\\/\\[0\\.5\\] { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .inset-ring-red-500\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-inset-ring-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .inset-ring-red-500\\/\\[50\\%\\] { --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .inset-ring-transparent { --tw-inset-ring-color: transparent; } + @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-shadow-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } + @property --tw-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-inset-ring-color { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } + @property --tw-ring-inset { syntax: "*"; - inherits: false; + inherits: false } + @property --tw-ring-offset-width { syntax: ""; inherits: false; - initial-value: 0px; + initial-value: 0; } + @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } + @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - } - } - } " `) expect( @@ -25573,156 +28951,177 @@ test('ring-offset', async () => { --color-red-500: #ef4444; --ring-offset-color-blue-500: #3b82f6; } + .ring-offset-0 { --tw-ring-offset-width: 0px; - --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } + .ring-offset-1 { --tw-ring-offset-width: 1px; - --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } + .ring-offset-2 { --tw-ring-offset-width: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } + .ring-offset-4 { --tw-ring-offset-width: 4px; - --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } + .ring-offset-\\[12px\\] { --tw-ring-offset-width: 12px; - --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } + .ring-offset-\\[length\\:var\\(--my-width\\)\\] { --tw-ring-offset-width: var(--my-width); - --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } + .ring-offset-\\[\\#0088cc\\] { - --tw-ring-offset-color: #0088cc; - } - .ring-offset-\\[\\#0088cc\\]\\/50 { - --tw-ring-offset-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\] { - --tw-ring-offset-color: color-mix(in oklab, #0088cc 50%, transparent); + --tw-ring-offset-color: #08c; } - .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in oklab, #0088cc 50%, transparent); - } - .ring-offset-\\[color\\:var\\(--my-color\\)\\] { - --tw-ring-offset-color: var(--my-color); + + .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-ring-offset-color: oklab(59.9824% -.067 -.124 / .5); } - .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 { + + .ring-offset-\\[color\\:var\\(--my-color\\)\\], .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-ring-offset-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-offset-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-offset-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } - .ring-offset-\\[var\\(--my-color\\)\\] { - --tw-ring-offset-color: var(--my-color); - } - .ring-offset-\\[var\\(--my-color\\)\\]\\/50 { + + .ring-offset-\\[var\\(--my-color\\)\\], .ring-offset-\\[var\\(--my-color\\)\\]\\/50 { --tw-ring-offset-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-\\[var\\(--my-color\\)\\]\\/50 { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-offset-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-offset-color: var(--my-color); } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } } + .ring-offset-blue-500 { --tw-ring-offset-color: var(--ring-offset-color-blue-500); } - .ring-offset-current { - --tw-ring-offset-color: currentcolor; - } - .ring-offset-current\\/50 { + + .ring-offset-current, .ring-offset-current\\/50 { --tw-ring-offset-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-current\\/50 { --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .ring-offset-current\\/\\[0\\.5\\] { --tw-ring-offset-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-current\\/\\[0\\.5\\] { --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .ring-offset-current\\/\\[50\\%\\] { --tw-ring-offset-color: currentcolor; } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-current\\/\\[50\\%\\] { --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent); } } + .ring-offset-inherit { --tw-ring-offset-color: inherit; } + .ring-offset-red-500 { --tw-ring-offset-color: var(--color-red-500); } + .ring-offset-red-500\\/50 { - --tw-ring-offset-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-ring-offset-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-red-500\\/50 { --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .ring-offset-red-500\\/\\[0\\.5\\] { - --tw-ring-offset-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-ring-offset-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-red-500\\/\\[0\\.5\\] { --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .ring-offset-red-500\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in srgb, #ef4444 50%, transparent); + --tw-ring-offset-color: #ef444480; } + @supports (color: color-mix(in lab, red, red)) { .ring-offset-red-500\\/\\[50\\%\\] { --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } + .ring-offset-transparent { --tw-ring-offset-color: transparent; } @@ -25778,23 +29177,25 @@ test('@container', async () => { ).toMatchInlineSnapshot(` " .\\@container-normal\\/sidebar { - container-type: normal; - container-name: sidebar; + container: sidebar; } + .\\@container-size\\/sidebar { - container-type: size; - container-name: sidebar; + container: sidebar / size; } + .\\@container\\/sidebar { - container-type: inline-size; - container-name: sidebar; + container: sidebar / inline-size; } + .\\@container { container-type: inline-size; } + .\\@container-normal { container-type: normal; } + .\\@container-size { container-type: size; } @@ -25830,6 +29231,7 @@ describe('spacing utilities', () => { :root, :host { --spacing-4: 1rem; } + .px-4 { padding-inline: var(--spacing-4); } @@ -25854,6 +29256,7 @@ describe('spacing utilities', () => { :root, :host { --spacing-4: 1rem; } + .px-4 { padding-inline: var(--spacing-4); } @@ -25877,12 +29280,15 @@ describe('spacing utilities', () => { :root, :host { --spacing: 4px; } + .px-0\\.25 { - padding-inline: calc(var(--spacing) * 0.25); + padding-inline: calc(var(--spacing) * .25); } + .px-1\\.5 { padding-inline: calc(var(--spacing) * 1.5); } + .px-2\\.75 { padding-inline: calc(var(--spacing) * 2.75); } @@ -25921,15 +29327,19 @@ describe('spacing utilities', () => { :root, :host { --spacing-sm: 8px; } + .w-sm { width: var(--spacing-sm); } + .max-w-sm { max-width: var(--spacing-sm); } + .min-w-sm { min-width: var(--spacing-sm); } + .basis-sm { flex-basis: var(--spacing-sm); } @@ -26007,7 +29417,8 @@ describe('custom utilities', () => { text-box-trim: both; text-box-edge: cap alphabetic; } - @media (width >= 1024px) { + + @media (min-width: 1024px) { .lg\\:text-trim { text-box-trim: both; text-box-edge: cap alphabetic; @@ -26048,6 +29459,7 @@ describe('custom utilities', () => { value: var(--example-foo); } } + :root, :host { --example-foo: 123px; } @@ -26104,7 +29516,6 @@ describe('custom utilities', () => { @layer utilities { .really-round { --custom-prop: hi; - border-radius: 50rem; border-radius: 30rem; } } @@ -26133,10 +29544,7 @@ describe('custom utilities', () => { ).toMatchInlineSnapshot(` " @layer utilities { - .push-1\\/2 { - right: 50%; - } - .push-50\\% { + .push-1\\/2, .push-50\\% { right: 50%; } } @@ -26169,10 +29577,10 @@ describe('custom utilities', () => { " @layer utilities { .text-sm { - font-size: var(--text-sm, 0.8755rem); + font-size: var(--text-sm, .8755rem); line-height: var(--text-sm--line-height, 1.255rem); - text-rendering: optimizeLegibility; - font-size: var(--text-sm, 0.875rem); + text-rendering: optimizelegibility; + font-size: var(--text-sm, .875rem); line-height: var(--tw-leading, var(--text-sm--line-height, 1.25rem)); } } @@ -26204,9 +29612,11 @@ describe('custom utilities', () => { .rounded { border-radius: 50rem; } + .rounded-\\[33px\\] { border-radius: 33px; } + .rounded-xl { border-radius: var(--radius-xl, 16px); } @@ -26235,12 +29645,15 @@ describe('custom utilities', () => { .top-\\[100px\\] { top: 100px; } + .push-left { right: 100%; } + .right-\\[100px\\] { right: 100px; } + .bottom-\\[100px\\] { bottom: 100px; } @@ -26300,19 +29713,22 @@ describe('custom utilities', () => { .bar { z-index: 10; } + .bar .baz { z-index: 20; } + .foo { - display: flex; flex-direction: column; text-decoration-line: underline; + display: flex; } + @media (hover: hover) { .hover\\:foo:hover { - display: flex; flex-direction: column; text-decoration-line: underline; + display: flex; } } " @@ -26340,11 +29756,12 @@ describe('custom utilities', () => { .bar { flex-wrap: wrap; } + @media (prefers-color-scheme: dark) { .bar { - display: flex; flex-direction: column; text-decoration-line: underline; + display: flex; } } " @@ -26459,6 +29876,7 @@ describe('custom utilities', () => { .example-1 { --resolved-value: 1; } + .example-2 { --resolved-value: 2; } @@ -26490,12 +29908,15 @@ describe('custom utilities', () => { .example-1 { --resolved-value: var(--example-1, 1); } + .example-2 { --resolved-value: var(--example-2, 2); } + .example-4 { --resolved-value: var(--example-4, 4); } + .example-a { --resolved-value: var(--example-a, 8); } @@ -26524,9 +29945,11 @@ describe('custom utilities', () => { .border--0 { border-color: var(--color-border-0, #e5e7eb); } + .border--1 { border-color: var(--color-border-1, #d1d5db); } + .border--2 { border-color: var(--color-border-2, #9ca3af); } @@ -26561,12 +29984,15 @@ describe('custom utilities', () => { .example-1 { --resolved-value: var(--example-1, 1); } + .example-2 { --resolved-value: var(--example-2, 2); } + .example-4 { --resolved-value: var(--example-4, 4); } + .example-a { --resolved-value: var(--example-a, 8); } @@ -26597,12 +30023,15 @@ describe('custom utilities', () => { .example-1 { --resolved-value: var(--example-1, 1); } + .example-2 { --resolved-value: var(--example-2, 2); } + .example-4 { --resolved-value: var(--example-4, 4); } + .example-a { --resolved-value: var(--example-a, 8); } @@ -26625,9 +30054,11 @@ describe('custom utilities', () => { .example-1 { --resolved-value: 1; } + .example-76 { --resolved-value: 76; } + .example-971 { --resolved-value: 971; } @@ -26698,14 +30129,17 @@ describe('custom utilities', () => { .toMatchInlineSnapshot(` " .example-0\\.5 { - --value-as-number: 0.5; + --value-as-number: .5; } + .example-1 { --value-as-number: 1; } + .example-2\\/3 { --value-as-ratio: 2 / 3; } + .example-20\\% { --value-as-percentage: 20%; } @@ -26773,12 +30207,15 @@ describe('custom utilities', () => { .example-\\[1\\] { --resolved-value: 1; } + .example-\\[76\\] { --resolved-value: 76; } + .example-\\[971\\] { --resolved-value: 971; } + .example-\\[integer\\:var\\(--my-value\\)\\] { --resolved-value: var(--my-value); } @@ -26824,15 +30261,19 @@ describe('custom utilities', () => { .example-\\(--my-value\\) { --resolved-value: var(--my-value); } + .example-\\[1\\] { --resolved-value: 1; } + .example-\\[76\\] { --resolved-value: 76; } + .example-\\[971\\] { --resolved-value: 971; } + .example-\\[var\\(--my-value\\)\\] { --resolved-value: var(--my-value); } @@ -26865,15 +30306,19 @@ describe('custom utilities', () => { .example-\\(--my-value\\) { --resolved-value: var(--my-value); } + .example-\\[1\\] { --resolved-value: 1; } + .example-\\[76\\] { --resolved-value: 76; } + .example-\\[971\\] { --resolved-value: 971; } + .example-\\[var\\(--my-value\\)\\] { --resolved-value: var(--my-value); } @@ -26906,15 +30351,19 @@ describe('custom utilities', () => { .example-\\(--my-value\\) { --resolved-value: var(--my-value); } + .example-\\[1\\] { --resolved-value: 1; } + .example-\\[76\\] { --resolved-value: 76; } + .example-\\[971\\] { --resolved-value: 971; } + .example-\\[var\\(--my-value\\)\\] { --resolved-value: var(--my-value); } @@ -26942,9 +30391,11 @@ describe('custom utilities', () => { .example-76 { --resolved-value: 76; } + .example-\\[123\\] { --resolved-value: 123; } + .example-a { --resolved-value: var(--example-a, 8); } @@ -26974,9 +30425,11 @@ describe('custom utilities', () => { .example-12 { --resolved-value: calc(12 * 1%); } + .example-\\[20\\%\\] { --resolved-value: 20%; } + .example-full { --resolved-value: var(--example-full, 100%); } @@ -27005,9 +30458,11 @@ describe('custom utilities', () => { .example-37 { --resolved-value: calc(37 * 1%); } + .example-\\[50\\%\\] { --resolved-value: 50%; } + .example-full { --resolved-value: var(--example-full, 100%); } @@ -27050,18 +30505,23 @@ describe('custom utilities', () => { .-example-\\[10px\\] { --resolved-value: calc(10px * -1); } + .-example-\\[20\\%\\] { --resolved-value: calc(20% * -1); } + .-example-full { --resolved-value: calc(var(--example-full, 100%) * -1); } + .example-\\[10px\\] { --resolved-value: 10px; } + .example-\\[20\\%\\] { --resolved-value: 20%; } + .example-full { --resolved-value: var(--example-full, 100%); } @@ -27108,6 +30568,7 @@ describe('custom utilities', () => { :root, :host { --spacing: 4px; } + .example-12 { margin: calc(var(--spacing) * 12); } @@ -27131,7 +30592,7 @@ describe('custom utilities', () => { expect(await run(['example-12'], input)).toMatchInlineSnapshot(` " .example-12 { - margin: calc(4px * 12); + margin: 48px; } " `) @@ -27151,6 +30612,7 @@ describe('custom utilities', () => { .example { --resolved-value: 4; } + .example-123 { --resolved-value: 123; } @@ -27174,6 +30636,7 @@ describe('custom utilities', () => { .example { --resolved-value: calc(4 * 2); } + .example-123 { --resolved-value: calc(123 * 2); } @@ -27199,6 +30662,7 @@ describe('custom utilities', () => { --resolved-value: 4; --resolved-modifier: 25; } + .example { --resolved-value: 4; } @@ -27224,6 +30688,7 @@ describe('custom utilities', () => { --resolved-value: 123; --resolved-modifier: 1; } + .example-123\\/25 { --resolved-value: 123; --resolved-modifier: 25; @@ -27251,14 +30716,17 @@ describe('custom utilities', () => { --resolved-value: 12; --resolved-modifier: 34; } + .example-1 { --resolved-value: 1; --resolved-modifier: 34; } + .example-1\\/1 { --resolved-value: 1; --resolved-modifier: 1; } + .example\\/1 { --resolved-value: 12; --resolved-modifier: 1; @@ -27305,22 +30773,27 @@ describe('custom utilities', () => { --resolved-modifier: 16px; --resolved-modifier-with-calc: calc(16px * 2); } + .example-sm\\/7 { --resolved-value: var(--value-sm, 14px); --resolved-modifier: var(--modifier-7, 28px); --resolved-modifier-with-calc: calc(var(--modifier-7, 28px) * 2); } + .example-sm\\/literal { --resolved-value: var(--value-sm, 14px); --resolved-modifier-literals: literal; } + .example-sm\\/literal-2 { --resolved-value: var(--value-sm, 14px); --resolved-modifier-literals: literal-2; } + .example-\\[12px\\] { --resolved-value: 12px; } + .example-sm { --resolved-value: var(--value-sm, 14px); } @@ -27353,9 +30826,11 @@ describe('custom utilities', () => { .example-1\\/1 { --resolved-value: 1 / 1; } + .example-\\[7\\/9\\] { --resolved-value: 7/9; } + .example-video { --resolved-value: var(--example-video, 16 / 9); } @@ -27383,13 +30858,14 @@ describe('custom utilities', () => { expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(` " .example-xs\\/6 { - font-size: var(--text-xs, 0.75rem); - line-height: var(--text-xs--line-height, calc(1 / 0.75)); + font-size: var(--text-xs, .75rem); + line-height: var(--text-xs--line-height, calc(1 / .75)); line-height: 6; } + .example-xs { - font-size: var(--text-xs, 0.75rem); - line-height: var(--text-xs--line-height, calc(1 / 0.75)); + font-size: var(--text-xs, .75rem); + line-height: var(--text-xs--line-height, calc(1 / .75)); } " `) @@ -27415,13 +30891,14 @@ describe('custom utilities', () => { expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(` " .example-xs\\/6 { - font-size: var(--text-xs, 0.75rem); - line-height: var(--text-xs--line-height, calc(1 / 0.75)); + font-size: var(--text-xs, .75rem); + line-height: var(--text-xs--line-height, calc(1 / .75)); line-height: 6; } + .example-xs { - font-size: var(--text-xs, 0.75rem); - line-height: var(--text-xs--line-height, calc(1 / 0.75)); + font-size: var(--text-xs, .75rem); + line-height: var(--text-xs--line-height, calc(1 / .75)); } " `) @@ -27447,13 +30924,14 @@ describe('custom utilities', () => { expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(` " .example-xs\\/6 { - font-size: var(--text-xs, 0.75rem); - line-height: var(--text-xs--line-height, calc(1 / 0.75)); + font-size: var(--text-xs, .75rem); + line-height: var(--text-xs--line-height, calc(1 / .75)); line-height: 6; } + .example-xs { - font-size: var(--text-xs, 0.75rem); - line-height: var(--text-xs--line-height, calc(1 / 0.75)); + font-size: var(--text-xs, .75rem); + line-height: var(--text-xs--line-height, calc(1 / .75)); } " `) @@ -27479,13 +30957,14 @@ describe('custom utilities', () => { expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(` " .example-xs\\/6 { - font-size: var(--text-xs, 0.75rem); - line-height: var(--text-xs--line-height, calc(1 / 0.75)); + font-size: var(--text-xs, .75rem); + line-height: var(--text-xs--line-height, calc(1 / .75)); line-height: 6; } + .example-xs { - font-size: var(--text-xs, 0.75rem); - line-height: var(--text-xs--line-height, calc(1 / 0.75)); + font-size: var(--text-xs, .75rem); + line-height: var(--text-xs--line-height, calc(1 / .75)); } " `) @@ -27535,8 +31014,9 @@ describe('custom utilities', () => { " :root, :host { --example-foo: red; - --color-red-500: #f00; + --color-red-500: red; } + .example-foo { color: var(--color-red-500); background-color: var(--example-foo); @@ -27571,6 +31051,8 @@ describe('custom utilities', () => { " .mask-r-20\\% { --mask-right: linear-gradient(to left, transparent, black 20%); + -webkit-mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic); + -webkit-mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic); mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic); } " @@ -27596,6 +31078,7 @@ describe('custom utilities', () => { :root, :host { --example-a: 8; } + .example-a { --resolved-value: var(--example-a); } @@ -27690,8 +31173,8 @@ describe('custom utilities', () => { expect(await run(['example-xs'], input)).toMatchInlineSnapshot(` " .example-xs { - font-size: var(--text-xs, 0.75rem); - line-height: calc(1 / 0.75); + font-size: var(--text-xs, .75rem); + line-height: 1.33333; } " `) @@ -27718,8 +31201,8 @@ describe('custom utilities', () => { expect(await run(['example-xs'], input)).toMatchInlineSnapshot(` " .example-xs { - font-size: 0.75rem; - line-height: var(--text-xs--line-height, calc(1 / 0.75)); + font-size: .75rem; + line-height: var(--text-xs--line-height, calc(1 / .75)); } " `) @@ -27747,11 +31230,13 @@ describe('custom utilities', () => { " :root, :host { --color-red-500: #ef4444; - --spacing: 0.25rem; + --spacing: .25rem; } + .foo-123 { font-size: calc(var(--spacing) * 123); } + .foo-red-500 { color: var(--color-red-500); } diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 5b46991db622..715d16f31675 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -30,7 +30,7 @@ test('**', async () => { test('first-letter', async () => { expect(await run(['first-letter:flex'])).toMatchInlineSnapshot(` " - .first-letter\\:flex::first-letter { + .first-letter\\:flex:first-letter { display: flex; } " @@ -41,7 +41,7 @@ test('first-letter', async () => { test('first-line', async () => { expect(await run(['first-line:flex'])).toMatchInlineSnapshot(` " - .first-line\\:flex::first-line { + .first-line\\:flex:first-line { display: flex; } " @@ -52,15 +52,18 @@ test('first-line', async () => { test('marker', async () => { expect(await run(['marker:flex'])).toMatchInlineSnapshot(` " - .marker\\:flex *::marker { + .marker\\:flex ::marker { display: flex; } + .marker\\:flex::marker { display: flex; } - .marker\\:flex *::-webkit-details-marker { + + .marker\\:flex ::-webkit-details-marker { display: flex; } + .marker\\:flex::-webkit-details-marker { display: flex; } @@ -72,9 +75,10 @@ test('marker', async () => { test('selection', async () => { expect(await run(['selection:flex'])).toMatchInlineSnapshot(` " - .selection\\:flex *::selection { + .selection\\:flex ::selection { display: flex; } + .selection\\:flex::selection { display: flex; } @@ -130,22 +134,23 @@ test('details-content', async () => { test('before', async () => { expect(await run(['before:flex'])).toMatchInlineSnapshot(` " - @layer properties; - .before\\:flex::before { + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-content: ""; + } + } + } + + .before\\:flex:before { content: var(--tw-content); display: flex; } + @property --tw-content { syntax: "*"; - initial-value: ""; inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-content: ""; - } - } + initial-value: ""; } " `) @@ -155,22 +160,23 @@ test('before', async () => { test('after', async () => { expect(await run(['after:flex'])).toMatchInlineSnapshot(` " - @layer properties; - .after\\:flex::after { + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-content: ""; + } + } + } + + .after\\:flex:after { content: var(--tw-content); display: flex; } + @property --tw-content { syntax: "*"; - initial-value: ""; inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-content: ""; - } - } + initial-value: ""; } " `) @@ -180,13 +186,7 @@ test('after', async () => { test('first', async () => { expect(await run(['first:flex', 'group-first:flex', 'peer-first:flex'])).toMatchInlineSnapshot(` " - .group-first\\:flex:is(:where(.group):first-child *) { - display: flex; - } - .peer-first\\:flex:is(:where(.peer):first-child ~ *) { - display: flex; - } - .first\\:flex:first-child { + .group-first\\:flex:is(:where(.group):first-child *), .peer-first\\:flex:is(:where(.peer):first-child ~ *), .first\\:flex:first-child { display: flex; } " @@ -197,13 +197,7 @@ test('first', async () => { test('last', async () => { expect(await run(['last:flex', 'group-last:flex', 'peer-last:flex'])).toMatchInlineSnapshot(` " - .group-last\\:flex:is(:where(.group):last-child *) { - display: flex; - } - .peer-last\\:flex:is(:where(.peer):last-child ~ *) { - display: flex; - } - .last\\:flex:last-child { + .group-last\\:flex:is(:where(.group):last-child *), .peer-last\\:flex:is(:where(.peer):last-child ~ *), .last\\:flex:last-child { display: flex; } " @@ -214,13 +208,7 @@ test('last', async () => { test('only', async () => { expect(await run(['only:flex', 'group-only:flex', 'peer-only:flex'])).toMatchInlineSnapshot(` " - .group-only\\:flex:is(:where(.group):only-child *) { - display: flex; - } - .peer-only\\:flex:is(:where(.peer):only-child ~ *) { - display: flex; - } - .only\\:flex:only-child { + .group-only\\:flex:is(:where(.group):only-child *), .peer-only\\:flex:is(:where(.peer):only-child ~ *), .only\\:flex:only-child { display: flex; } " @@ -231,13 +219,7 @@ test('only', async () => { test('odd', async () => { expect(await run(['odd:flex', 'group-odd:flex', 'peer-odd:flex'])).toMatchInlineSnapshot(` " - .group-odd\\:flex:is(:where(.group):nth-child(odd) *) { - display: flex; - } - .peer-odd\\:flex:is(:where(.peer):nth-child(odd) ~ *) { - display: flex; - } - .odd\\:flex:nth-child(odd) { + .group-odd\\:flex:is(:where(.group):nth-child(odd) *), .peer-odd\\:flex:is(:where(.peer):nth-child(odd) ~ *), .odd\\:flex:nth-child(odd) { display: flex; } " @@ -248,13 +230,7 @@ test('odd', async () => { test('even', async () => { expect(await run(['even:flex', 'group-even:flex', 'peer-even:flex'])).toMatchInlineSnapshot(` " - .group-even\\:flex:is(:where(.group):nth-child(even) *) { - display: flex; - } - .peer-even\\:flex:is(:where(.peer):nth-child(even) ~ *) { - display: flex; - } - .even\\:flex:nth-child(even) { + .group-even\\:flex:is(:where(.group):nth-child(2n) *), .peer-even\\:flex:is(:where(.peer):nth-child(2n) ~ *), .even\\:flex:nth-child(2n) { display: flex; } " @@ -266,13 +242,7 @@ test('first-of-type', async () => { expect(await run(['first-of-type:flex', 'group-first-of-type:flex', 'peer-first-of-type:flex'])) .toMatchInlineSnapshot(` " - .group-first-of-type\\:flex:is(:where(.group):first-of-type *) { - display: flex; - } - .peer-first-of-type\\:flex:is(:where(.peer):first-of-type ~ *) { - display: flex; - } - .first-of-type\\:flex:first-of-type { + .group-first-of-type\\:flex:is(:where(.group):first-of-type *), .peer-first-of-type\\:flex:is(:where(.peer):first-of-type ~ *), .first-of-type\\:flex:first-of-type { display: flex; } " @@ -284,13 +254,7 @@ test('last-of-type', async () => { expect(await run(['last-of-type:flex', 'group-last-of-type:flex', 'peer-last-of-type:flex'])) .toMatchInlineSnapshot(` " - .group-last-of-type\\:flex:is(:where(.group):last-of-type *) { - display: flex; - } - .peer-last-of-type\\:flex:is(:where(.peer):last-of-type ~ *) { - display: flex; - } - .last-of-type\\:flex:last-of-type { + .group-last-of-type\\:flex:is(:where(.group):last-of-type *), .peer-last-of-type\\:flex:is(:where(.peer):last-of-type ~ *), .last-of-type\\:flex:last-of-type { display: flex; } " @@ -302,13 +266,7 @@ test('only-of-type', async () => { expect(await run(['only-of-type:flex', 'group-only-of-type:flex', 'peer-only-of-type:flex'])) .toMatchInlineSnapshot(` " - .group-only-of-type\\:flex:is(:where(.group):only-of-type *) { - display: flex; - } - .peer-only-of-type\\:flex:is(:where(.peer):only-of-type ~ *) { - display: flex; - } - .only-of-type\\:flex:only-of-type { + .group-only-of-type\\:flex:is(:where(.group):only-of-type *), .peer-only-of-type\\:flex:is(:where(.peer):only-of-type ~ *), .only-of-type\\:flex:only-of-type { display: flex; } " @@ -320,13 +278,7 @@ test('visited', async () => { expect(await run(['visited:flex', 'group-visited:flex', 'peer-visited:flex'])) .toMatchInlineSnapshot(` " - .group-visited\\:flex:is(:where(.group):visited *) { - display: flex; - } - .peer-visited\\:flex:is(:where(.peer):visited ~ *) { - display: flex; - } - .visited\\:flex:visited { + .group-visited\\:flex:is(:where(.group):visited *), .peer-visited\\:flex:is(:where(.peer):visited ~ *), .visited\\:flex:visited { display: flex; } " @@ -338,13 +290,7 @@ test('target', async () => { expect(await run(['target:flex', 'group-target:flex', 'peer-target:flex'])) .toMatchInlineSnapshot(` " - .group-target\\:flex:is(:where(.group):target *) { - display: flex; - } - .peer-target\\:flex:is(:where(.peer):target ~ *) { - display: flex; - } - .target\\:flex:target { + .group-target\\:flex:is(:where(.group):target *), .peer-target\\:flex:is(:where(.peer):target ~ *), .target\\:flex:target { display: flex; } " @@ -356,16 +302,7 @@ test('open', async () => { expect(await run(['open:flex', 'group-open:flex', 'peer-open:flex', 'not-open:flex'])) .toMatchInlineSnapshot(` " - .not-open\\:flex:not(*:is([open], :popover-open, :open)) { - display: flex; - } - .group-open\\:flex:is(:where(.group):is([open], :popover-open, :open) *) { - display: flex; - } - .peer-open\\:flex:is(:where(.peer):is([open], :popover-open, :open) ~ *) { - display: flex; - } - .open\\:flex:is([open], :popover-open, :open) { + .not-open\\:flex:not(:is([open], :popover-open, :open)), .group-open\\:flex:is(:where(.group):is([open], :popover-open, :open) *), .peer-open\\:flex:is(:where(.peer):is([open], :popover-open, :open) ~ *), .open\\:flex:is([open], :popover-open, :open) { display: flex; } " @@ -377,13 +314,7 @@ test('default', async () => { expect(await run(['default:flex', 'group-default:flex', 'peer-default:flex'])) .toMatchInlineSnapshot(` " - .group-default\\:flex:is(:where(.group):default *) { - display: flex; - } - .peer-default\\:flex:is(:where(.peer):default ~ *) { - display: flex; - } - .default\\:flex:default { + .group-default\\:flex:is(:where(.group):default *), .peer-default\\:flex:is(:where(.peer):default ~ *), .default\\:flex:default { display: flex; } " @@ -395,13 +326,7 @@ test('checked', async () => { expect(await run(['checked:flex', 'group-checked:flex', 'peer-checked:flex'])) .toMatchInlineSnapshot(` " - .group-checked\\:flex:is(:where(.group):checked *) { - display: flex; - } - .peer-checked\\:flex:is(:where(.peer):checked ~ *) { - display: flex; - } - .checked\\:flex:checked { + .group-checked\\:flex:is(:where(.group):checked *), .peer-checked\\:flex:is(:where(.peer):checked ~ *), .checked\\:flex:checked { display: flex; } " @@ -413,13 +338,7 @@ test('indeterminate', async () => { expect(await run(['indeterminate:flex', 'group-indeterminate:flex', 'peer-indeterminate:flex'])) .toMatchInlineSnapshot(` " - .group-indeterminate\\:flex:is(:where(.group):indeterminate *) { - display: flex; - } - .peer-indeterminate\\:flex:is(:where(.peer):indeterminate ~ *) { - display: flex; - } - .indeterminate\\:flex:indeterminate { + .group-indeterminate\\:flex:is(:where(.group):indeterminate *), .peer-indeterminate\\:flex:is(:where(.peer):indeterminate ~ *), .indeterminate\\:flex:indeterminate { display: flex; } " @@ -436,13 +355,7 @@ test('placeholder-shown', async () => { ]), ).toMatchInlineSnapshot(` " - .group-placeholder-shown\\:flex:is(:where(.group):placeholder-shown *) { - display: flex; - } - .peer-placeholder-shown\\:flex:is(:where(.peer):placeholder-shown ~ *) { - display: flex; - } - .placeholder-shown\\:flex:placeholder-shown { + .group-placeholder-shown\\:flex:is(:where(.group):placeholder-shown *), .peer-placeholder-shown\\:flex:is(:where(.peer):placeholder-shown ~ *), .placeholder-shown\\:flex:placeholder-shown { display: flex; } " @@ -454,12 +367,10 @@ test('autofill', async () => { expect(await run(['autofill:flex', 'group-autofill:flex', 'peer-autofill:flex'])) .toMatchInlineSnapshot(` " - .group-autofill\\:flex:is(:where(.group):autofill *) { - display: flex; - } - .peer-autofill\\:flex:is(:where(.peer):autofill ~ *) { + .group-autofill\\:flex:is(:where(.group):autofill *), .peer-autofill\\:flex:is(:where(.peer):autofill ~ *) { display: flex; } + .autofill\\:flex:autofill { display: flex; } @@ -472,13 +383,7 @@ test('optional', async () => { expect(await run(['optional:flex', 'group-optional:flex', 'peer-optional:flex'])) .toMatchInlineSnapshot(` " - .group-optional\\:flex:is(:where(.group):optional *) { - display: flex; - } - .peer-optional\\:flex:is(:where(.peer):optional ~ *) { - display: flex; - } - .optional\\:flex:optional { + .group-optional\\:flex:is(:where(.group):optional *), .peer-optional\\:flex:is(:where(.peer):optional ~ *), .optional\\:flex:optional { display: flex; } " @@ -490,13 +395,7 @@ test('required', async () => { expect(await run(['required:flex', 'group-required:flex', 'peer-required:flex'])) .toMatchInlineSnapshot(` " - .group-required\\:flex:is(:where(.group):required *) { - display: flex; - } - .peer-required\\:flex:is(:where(.peer):required ~ *) { - display: flex; - } - .required\\:flex:required { + .group-required\\:flex:is(:where(.group):required *), .peer-required\\:flex:is(:where(.peer):required ~ *), .required\\:flex:required { display: flex; } " @@ -507,13 +406,7 @@ test('required', async () => { test('valid', async () => { expect(await run(['valid:flex', 'group-valid:flex', 'peer-valid:flex'])).toMatchInlineSnapshot(` " - .group-valid\\:flex:is(:where(.group):valid *) { - display: flex; - } - .peer-valid\\:flex:is(:where(.peer):valid ~ *) { - display: flex; - } - .valid\\:flex:valid { + .group-valid\\:flex:is(:where(.group):valid *), .peer-valid\\:flex:is(:where(.peer):valid ~ *), .valid\\:flex:valid { display: flex; } " @@ -525,13 +418,7 @@ test('invalid', async () => { expect(await run(['invalid:flex', 'group-invalid:flex', 'peer-invalid:flex'])) .toMatchInlineSnapshot(` " - .group-invalid\\:flex:is(:where(.group):invalid *) { - display: flex; - } - .peer-invalid\\:flex:is(:where(.peer):invalid ~ *) { - display: flex; - } - .invalid\\:flex:invalid { + .group-invalid\\:flex:is(:where(.group):invalid *), .peer-invalid\\:flex:is(:where(.peer):invalid ~ *), .invalid\\:flex:invalid { display: flex; } " @@ -543,12 +430,10 @@ test('user-valid', async () => { expect(await run(['user-valid:flex', 'group-user-valid:flex', 'peer-user-valid:flex'])) .toMatchInlineSnapshot(` " - .group-user-valid\\:flex:is(:where(.group):user-valid *) { - display: flex; - } - .peer-user-valid\\:flex:is(:where(.peer):user-valid ~ *) { + .group-user-valid\\:flex:is(:where(.group):user-valid *), .peer-user-valid\\:flex:is(:where(.peer):user-valid ~ *) { display: flex; } + .user-valid\\:flex:user-valid { display: flex; } @@ -561,12 +446,10 @@ test('user-invalid', async () => { expect(await run(['user-invalid:flex', 'group-user-invalid:flex', 'peer-user-invalid:flex'])) .toMatchInlineSnapshot(` " - .group-user-invalid\\:flex:is(:where(.group):user-invalid *) { - display: flex; - } - .peer-user-invalid\\:flex:is(:where(.peer):user-invalid ~ *) { + .group-user-invalid\\:flex:is(:where(.group):user-invalid *), .peer-user-invalid\\:flex:is(:where(.peer):user-invalid ~ *) { display: flex; } + .user-invalid\\:flex:user-invalid { display: flex; } @@ -579,13 +462,7 @@ test('in-range', async () => { expect(await run(['in-range:flex', 'group-in-range:flex', 'peer-in-range:flex'])) .toMatchInlineSnapshot(` " - .group-in-range\\:flex:is(:where(.group):in-range *) { - display: flex; - } - .peer-in-range\\:flex:is(:where(.peer):in-range ~ *) { - display: flex; - } - .in-range\\:flex:in-range { + .group-in-range\\:flex:is(:where(.group):in-range *), .peer-in-range\\:flex:is(:where(.peer):in-range ~ *), .in-range\\:flex:in-range { display: flex; } " @@ -597,13 +474,7 @@ test('out-of-range', async () => { expect(await run(['out-of-range:flex', 'group-out-of-range:flex', 'peer-out-of-range:flex'])) .toMatchInlineSnapshot(` " - .group-out-of-range\\:flex:is(:where(.group):out-of-range *) { - display: flex; - } - .peer-out-of-range\\:flex:is(:where(.peer):out-of-range ~ *) { - display: flex; - } - .out-of-range\\:flex:out-of-range { + .group-out-of-range\\:flex:is(:where(.group):out-of-range *), .peer-out-of-range\\:flex:is(:where(.peer):out-of-range ~ *), .out-of-range\\:flex:out-of-range { display: flex; } " @@ -615,13 +486,7 @@ test('read-only', async () => { expect(await run(['read-only:flex', 'group-read-only:flex', 'peer-read-only:flex'])) .toMatchInlineSnapshot(` " - .group-read-only\\:flex:is(:where(.group):read-only *) { - display: flex; - } - .peer-read-only\\:flex:is(:where(.peer):read-only ~ *) { - display: flex; - } - .read-only\\:flex:read-only { + .group-read-only\\:flex:is(:where(.group):read-only *), .peer-read-only\\:flex:is(:where(.peer):read-only ~ *), .read-only\\:flex:read-only { display: flex; } " @@ -632,13 +497,7 @@ test('read-only', async () => { test('empty', async () => { expect(await run(['empty:flex', 'group-empty:flex', 'peer-empty:flex'])).toMatchInlineSnapshot(` " - .group-empty\\:flex:is(:where(.group):empty *) { - display: flex; - } - .peer-empty\\:flex:is(:where(.peer):empty ~ *) { - display: flex; - } - .empty\\:flex:empty { + .group-empty\\:flex:is(:where(.group):empty *), .peer-empty\\:flex:is(:where(.peer):empty ~ *), .empty\\:flex:empty { display: flex; } " @@ -650,13 +509,7 @@ test('focus-within', async () => { expect(await run(['focus-within:flex', 'group-focus-within:flex', 'peer-focus-within:flex'])) .toMatchInlineSnapshot(` " - .group-focus-within\\:flex:is(:where(.group):focus-within *) { - display: flex; - } - .peer-focus-within\\:flex:is(:where(.peer):focus-within ~ *) { - display: flex; - } - .focus-within\\:flex:focus-within { + .group-focus-within\\:flex:is(:where(.group):focus-within *), .peer-focus-within\\:flex:is(:where(.peer):focus-within ~ *), .focus-within\\:flex:focus-within { display: flex; } " @@ -668,13 +521,7 @@ test('hover', async () => { expect(await run(['hover:flex', 'group-hover:flex', 'peer-hover:flex'])).toMatchInlineSnapshot(` " @media (hover: hover) { - .group-hover\\:flex:is(:where(.group):hover *) { - display: flex; - } - .peer-hover\\:flex:is(:where(.peer):hover ~ *) { - display: flex; - } - .hover\\:flex:hover { + .group-hover\\:flex:is(:where(.group):hover *), .peer-hover\\:flex:is(:where(.peer):hover ~ *), .hover\\:flex:hover { display: flex; } } @@ -686,13 +533,7 @@ test('hover', async () => { test('focus', async () => { expect(await run(['focus:flex', 'group-focus:flex', 'peer-focus:flex'])).toMatchInlineSnapshot(` " - .group-focus\\:flex:is(:where(.group):focus *) { - display: flex; - } - .peer-focus\\:flex:is(:where(.peer):focus ~ *) { - display: flex; - } - .focus\\:flex:focus { + .group-focus\\:flex:is(:where(.group):focus *), .peer-focus\\:flex:is(:where(.peer):focus ~ *), .focus\\:flex:focus { display: flex; } " @@ -708,6 +549,7 @@ test('group-hover group-focus sorting', async () => { display: flex; } } + .group-focus\\:flex:is(:where(.group):focus *) { display: flex; } @@ -720,6 +562,7 @@ test('group-hover group-focus sorting', async () => { display: flex; } } + .group-focus\\:flex:is(:where(.group):focus *) { display: flex; } @@ -731,13 +574,7 @@ test('focus-visible', async () => { expect(await run(['focus-visible:flex', 'group-focus-visible:flex', 'peer-focus-visible:flex'])) .toMatchInlineSnapshot(` " - .group-focus-visible\\:flex:is(:where(.group):focus-visible *) { - display: flex; - } - .peer-focus-visible\\:flex:is(:where(.peer):focus-visible ~ *) { - display: flex; - } - .focus-visible\\:flex:focus-visible { + .group-focus-visible\\:flex:is(:where(.group):focus-visible *), .peer-focus-visible\\:flex:is(:where(.peer):focus-visible ~ *), .focus-visible\\:flex:focus-visible { display: flex; } " @@ -749,13 +586,7 @@ test('active', async () => { expect(await run(['active:flex', 'group-active:flex', 'peer-active:flex'])) .toMatchInlineSnapshot(` " - .group-active\\:flex:is(:where(.group):active *) { - display: flex; - } - .peer-active\\:flex:is(:where(.peer):active ~ *) { - display: flex; - } - .active\\:flex:active { + .group-active\\:flex:is(:where(.group):active *), .peer-active\\:flex:is(:where(.peer):active ~ *), .active\\:flex:active { display: flex; } " @@ -767,13 +598,7 @@ test('enabled', async () => { expect(await run(['enabled:flex', 'group-enabled:flex', 'peer-enabled:flex'])) .toMatchInlineSnapshot(` " - .group-enabled\\:flex:is(:where(.group):enabled *) { - display: flex; - } - .peer-enabled\\:flex:is(:where(.peer):enabled ~ *) { - display: flex; - } - .enabled\\:flex:enabled { + .group-enabled\\:flex:is(:where(.group):enabled *), .peer-enabled\\:flex:is(:where(.peer):enabled ~ *), .enabled\\:flex:enabled { display: flex; } " @@ -785,13 +610,7 @@ test('disabled', async () => { expect(await run(['disabled:flex', 'group-disabled:flex', 'peer-disabled:flex'])) .toMatchInlineSnapshot(` " - .group-disabled\\:flex:is(:where(.group):disabled *) { - display: flex; - } - .peer-disabled\\:flex:is(:where(.peer):disabled ~ *) { - display: flex; - } - .disabled\\:flex:disabled { + .group-disabled\\:flex:is(:where(.group):disabled *), .peer-disabled\\:flex:is(:where(.peer):disabled ~ *), .disabled\\:flex:disabled { display: flex; } " @@ -802,13 +621,7 @@ test('disabled', async () => { test('inert', async () => { expect(await run(['inert:flex', 'group-inert:flex', 'peer-inert:flex'])).toMatchInlineSnapshot(` " - .group-inert\\:flex:is(:where(.group):is([inert], [inert] *) *) { - display: flex; - } - .peer-inert\\:flex:is(:where(.peer):is([inert], [inert] *) ~ *) { - display: flex; - } - .inert\\:flex:is([inert], [inert] *) { + .group-inert\\:flex:is(:where(.group):is([inert], [inert] *) *), .peer-inert\\:flex:is(:where(.peer):is([inert], [inert] *) ~ *), .inert\\:flex:is([inert], [inert] *) { display: flex; } " @@ -827,21 +640,17 @@ test('group-[...]', async () => { ]), ).toMatchInlineSnapshot(` " - .group-\\[\\&_p\\]\\:flex:is(:where(.group) p *) { - display: flex; - } - :is(.group-\\[\\&\\:hover\\]\\:group-\\[\\&_p\\]\\:flex:is(:where(.group):hover *)):is(:where(.group) p *) { + .group-\\[\\&_p\\]\\:flex:is(:where(.group) p *), .group-\\[\\&\\:hover\\]\\:group-\\[\\&_p\\]\\:flex:is(:where(.group):hover *):is(:where(.group) p *) { display: flex; } + @media (hover: hover) { - :is(.group-\\[\\&_p\\]\\:hover\\:flex:is(:where(.group) p *)):hover { - display: flex; - } - :is(.hover\\:group-\\[\\&_p\\]\\:flex:hover):is(:where(.group) p *) { + .group-\\[\\&_p\\]\\:hover\\:flex:is(:where(.group) p *):hover, .hover\\:group-\\[\\&_p\\]\\:flex:hover:is(:where(.group) p *) { display: flex; } + @media (hover: hover) { - :is(:is(.hover\\:group-\\[\\&_p\\]\\:hover\\:flex:hover):is(:where(.group) p *)):hover { + .hover\\:group-\\[\\&_p\\]\\:hover\\:flex:hover:is(:where(.group) p *):hover { display: flex; } } @@ -887,17 +696,17 @@ test('group-*', async () => { display: flex; } } + .group-focus\\:flex:is(:where(.group):focus *) { display: flex; } + @media (hover: hover) { - :is(.group-focus\\:group-hover\\:flex:is(:where(.group):focus *)):is(:where(.group):hover *) { - display: flex; - } - :is(.group-hover\\:group-focus\\:flex:is(:where(.group):hover *)):is(:where(.group):focus *) { + .group-focus\\:group-hover\\:flex:is(:where(.group):focus *):is(:where(.group):hover *), .group-hover\\:group-focus\\:flex:is(:where(.group):hover *):is(:where(.group):focus *) { display: flex; } } + .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) { display: flex; } @@ -933,20 +742,12 @@ test('peer-[...]', async () => { ]), ).toMatchInlineSnapshot(` " - .peer-\\[\\&_p\\]\\:flex:is(:where(.peer) p ~ *) { - display: flex; - } - :is(.peer-\\[\\&\\:hover\\]\\:peer-\\[\\&_p\\]\\:flex:is(:where(.peer):hover ~ *)):is(:where(.peer) p ~ *) { + .peer-\\[\\&_p\\]\\:flex:is(:where(.peer) p ~ *), .peer-\\[\\&\\:hover\\]\\:peer-\\[\\&_p\\]\\:flex:is(:where(.peer):hover ~ *):is(:where(.peer) p ~ *) { display: flex; } + @media (hover: hover) { - :is(.hover\\:peer-\\[\\&_p\\]\\:flex:hover):is(:where(.peer) p ~ *) { - display: flex; - } - :is(.peer-\\[\\&_p\\]\\:hover\\:flex:is(:where(.peer) p ~ *)):hover { - display: flex; - } - :is(:is(.hover\\:peer-\\[\\&_p\\]\\:focus\\:flex:hover):is(:where(.peer) p ~ *)):focus { + .hover\\:peer-\\[\\&_p\\]\\:flex:hover:is(:where(.peer) p ~ *), .peer-\\[\\&_p\\]\\:hover\\:flex:is(:where(.peer) p ~ *):hover, .hover\\:peer-\\[\\&_p\\]\\:focus\\:flex:hover:is(:where(.peer) p ~ *):focus { display: flex; } } @@ -985,17 +786,17 @@ test('peer-*', async () => { display: flex; } } + .peer-focus\\:flex:is(:where(.peer):focus ~ *) { display: flex; } + @media (hover: hover) { - :is(.peer-focus\\:peer-hover\\:flex:is(:where(.peer):focus ~ *)):is(:where(.peer):hover ~ *) { - display: flex; - } - :is(.peer-hover\\:peer-focus\\:flex:is(:where(.peer):hover ~ *)):is(:where(.peer):focus ~ *) { + .peer-focus\\:peer-hover\\:flex:is(:where(.peer):focus ~ *):is(:where(.peer):hover ~ *), .peer-hover\\:peer-focus\\:flex:is(:where(.peer):hover ~ *):is(:where(.peer):focus ~ *) { display: flex; } } + .peer-hocus\\:flex:is(:is(:where(.peer):hover, :where(.peer):focus) ~ *) { display: flex; } @@ -1086,7 +887,7 @@ test('starting', async () => { " @starting-style { .starting\\:opacity-0 { - opacity: 0%; + opacity: 0; } } " @@ -1125,27 +926,31 @@ test('default breakpoints', async () => { ), ).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; } @@ -1183,7 +988,7 @@ test('custom breakpoint', async () => { ), ).toMatchInlineSnapshot(` " - @media (width >= 5000px) { + @media (min-width: 5000px) { .\\31 0xl\\:flex { display: flex; } @@ -1208,17 +1013,19 @@ test('max-*', async () => { ), ).toMatchInlineSnapshot(` " - @media (width < 1024px) { + @media not all and (min-width: 1024px) { .max-lg\\:flex { display: flex; } } - @media (width < 768px) { + + @media not all and (min-width: 768px) { .max-md\\:flex { display: flex; } } - @media (width < 640px) { + + @media not all and (min-width: 640px) { .max-sm\\:flex { display: flex; } @@ -1257,17 +1064,19 @@ test('min-*', async () => { ), ).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; } @@ -1308,27 +1117,30 @@ test('sorting stacked min-* and max-* variants', async () => { ), ).toMatchInlineSnapshot(` " - @media (width >= 280px) { - @media (width < 640px) { + @media (min-width: 280px) { + @media not all and (min-width: 640px) { .min-xs\\:max-sm\\:flex { display: flex; } } } - @media (width >= 640px) { - @media (width < 1280px) { + + @media (min-width: 640px) { + @media not all and (min-width: 1280px) { .min-sm\\:max-xl\\:flex { display: flex; } } - @media (width < 1024px) { + + @media not all and (min-width: 1024px) { .min-sm\\:max-lg\\:flex { display: flex; } } } - @media (width >= 768px) { - @media (width < 1024px) { + + @media (min-width: 768px) { + @media not all and (min-width: 1024px) { .min-md\\:max-lg\\:flex { display: flex; } @@ -1354,21 +1166,24 @@ test('stacked min-* and max-* variants should come after unprefixed variants', a ), ).toMatchInlineSnapshot(` " - @media (width >= 640px) { + @media (min-width: 640px) { .sm\\:flex { display: flex; } - @media (width < 1024px) { + + @media not all and (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 all and (min-width: 1024px) { .min-md\\:max-lg\\:flex { display: flex; } @@ -1409,52 +1224,50 @@ test('min, max and unprefixed breakpoints', async () => { ), ).toMatchInlineSnapshot(` " - @media (width < 1024px) { + @media not all and (min-width: 1024px) { .max-lg\\:flex { display: flex; } } - @media (width < 1000px) { + + @media not all and (min-width: 1000px) { .max-\\[1000px\\]\\:flex { display: flex; } } - @media (width < 768px) { + + @media not all and (min-width: 768px) { .max-md\\:flex { display: flex; } } - @media (width < 640px) { + + @media not all and (min-width: 640px) { .max-sm\\:flex { display: flex; } } - @media (width >= 640px) { - .min-sm\\:flex { - display: flex; - } - .sm\\:flex { + + @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) { - .md\\:flex { - display: flex; - } - .min-md\\:flex { + + @media (min-width: 768px) { + .md\\:flex, .min-md\\:flex { display: flex; } } - @media (width >= 1024px) { - .lg\\:flex { - display: flex; - } - .min-lg\\:flex { + + @media (min-width: 1024px) { + .lg\\:flex, .min-lg\\:flex { display: flex; } } @@ -1488,102 +1301,121 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti ]), ).toMatchInlineSnapshot(` " - @media (width < calc(1000px + 12em)) { + @media not all and (min-width: calc(1000px + 12em)) { .max-\\[calc\\(1000px\\+12em\\)\\]\\:flex { display: flex; } } - @media (width < calc(50vh + 12em)) { + + @media not all and (min-width: calc(50vh + 12em)) { .max-\\[calc\\(50vh\\+12em\\)\\]\\:flex { display: flex; } } - @media (width < 12em) { + + @media not all and (min-width: 12em) { .max-\\[12em\\]\\:flex { display: flex; } } - @media (width < 10em) { + + @media not all and (min-width: 10em) { .max-\\[10em\\]\\:flex { display: flex; } } - @media (width < 12px) { + + @media not all and (min-width: 12px) { .max-\\[12px\\]\\:flex { display: flex; } } - @media (width < 10px) { + + @media not all and (min-width: 10px) { .max-\\[10px\\]\\:flex { display: flex; } } - @media (width < 12rem) { + + @media not all and (min-width: 12rem) { .max-\\[12rem\\]\\:flex { display: flex; } } - @media (width < 10rem) { + + @media not all and (min-width: 10rem) { .max-\\[10rem\\]\\:flex { display: flex; } } - @media (width < 12vh) { + + @media not all and (min-width: 12vh) { .max-\\[12vh\\]\\:flex { display: flex; } } - @media (width < 10vh) { + + @media not all and (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; } @@ -1611,36 +1443,43 @@ test('supports', async () => { display: grid; } } - @supports (display:grid) and font-format(opentype) { + + @supports (display: grid) and font-format(opentype) { .supports-\\[\\(display\\:grid\\)_and_font-format\\(opentype\\)\\]\\:grid { display: grid; } } + @supports (--test: var(--tw)) { .supports-\\[--test\\]\\:flex { display: flex; } } - @supports (display:grid) { + + @supports (display: grid) { .supports-\\[display\\:grid\\]\\:flex { display: flex; } } + @supports font-format(opentype) { .supports-\\[font-format\\(opentype\\)\\]\\:grid { display: grid; } } + @supports font-tech(color-COLRv1) { .supports-\\[font-tech\\(color-COLRv1\\)\\]\\:flex { display: flex; } } + @supports selector(A > B) { .supports-\\[selector\\(A_\\>_B\\)\\]\\:flex { display: flex; } } + @supports var(--test) { .supports-\\[var\\(--test\\)\\]\\:flex { display: flex; @@ -1771,265 +1610,161 @@ test('not', async () => { ), ).toMatchInlineSnapshot(` " - .not-first\\:flex:not(*:first-child) { + .not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target), .not-open\\:flex:not(:is([open], :popover-open, :open)), .not-default\\:flex:not(:default), .not-checked\\:flex:not(:checked), .not-indeterminate\\:flex:not(:indeterminate), .not-placeholder-shown\\:flex:not(:placeholder-shown) { display: flex; } - .not-last\\:flex:not(*:last-child) { - display: flex; - } - .not-only\\:flex:not(*:only-child) { - display: flex; - } - .not-odd\\:flex:not(*:nth-child(odd)) { - display: flex; - } - .not-even\\:flex:not(*:nth-child(even)) { - display: flex; - } - .not-first-of-type\\:flex:not(*:first-of-type) { - display: flex; - } - .not-last-of-type\\:flex:not(*:last-of-type) { - display: flex; - } - .not-only-of-type\\:flex:not(*:only-of-type) { - display: flex; - } - .not-visited\\:flex:not(*:visited) { - display: flex; - } - .not-target\\:flex:not(*:target) { - display: flex; - } - .not-open\\:flex:not(*:is([open], :popover-open, :open)) { - display: flex; - } - .not-default\\:flex:not(*:default) { - display: flex; - } - .not-checked\\:flex:not(*:checked) { - display: flex; - } - .not-indeterminate\\:flex:not(*:indeterminate) { - display: flex; - } - .not-placeholder-shown\\:flex:not(*:placeholder-shown) { - display: flex; - } - .not-autofill\\:flex:not(*:autofill) { - display: flex; - } - .not-optional\\:flex:not(*:optional) { - display: flex; - } - .not-required\\:flex:not(*:required) { - display: flex; - } - .not-valid\\:flex:not(*:valid) { - display: flex; - } - .not-invalid\\:flex:not(*:invalid) { - display: flex; - } - .not-in-range\\:flex:not(*:in-range) { - display: flex; - } - .not-out-of-range\\:flex:not(*:out-of-range) { - display: flex; - } - .not-read-only\\:flex:not(*:read-only) { - display: flex; - } - .not-empty\\:flex:not(*:empty) { - display: flex; - } - .not-focus-within\\:flex:not(*:focus-within) { + + .not-autofill\\:flex:not(:autofill) { display: flex; } - .not-hover\\:flex:not(*:hover) { + + .not-optional\\:flex:not(:optional), .not-required\\:flex:not(:required), .not-valid\\:flex:not(:valid), .not-invalid\\:flex:not(:invalid), .not-in-range\\:flex:not(:in-range), .not-out-of-range\\:flex:not(:out-of-range), .not-read-only\\:flex:not(:read-only), .not-empty\\:flex:not(:empty), .not-focus-within\\:flex:not(:focus-within), .not-hover\\:flex:not(:hover) { display: flex; } - @media not (hover: hover) { + + @media not all and (hover: hover) { .not-hover\\:flex { display: flex; } } - .not-focus\\:flex:not(*:focus) { - display: flex; - } - .not-focus-visible\\:flex:not(*:focus-visible) { - display: flex; - } - .not-active\\:flex:not(*:active) { - display: flex; - } - .not-enabled\\:flex:not(*:enabled) { - display: flex; - } - .not-disabled\\:flex:not(*:disabled) { - display: flex; - } - .not-inert\\:flex:not(*:is([inert], [inert] *)) { - display: flex; - } - .not-has-checked\\:flex:not(*:has(*:checked)) { - display: flex; - } - .not-aria-selected\\:flex:not(*[aria-selected="true"]) { - display: flex; - } - .not-data-foo\\:flex:not(*[data-foo]) { - display: flex; - } - .not-nth-2\\:flex:not(*:nth-child(2)) { + + .not-focus\\:flex:not(:focus), .not-focus-visible\\:flex:not(:focus-visible), .not-active\\:flex:not(:active), .not-enabled\\:flex:not(:enabled), .not-disabled\\:flex:not(:disabled), .not-inert\\:flex:not(:is([inert], [inert] *)), .not-has-checked\\:flex:not(:has(:checked)), .not-aria-selected\\:flex:not([aria-selected="true"]), .not-data-foo\\:flex:not([data-foo]), .not-nth-2\\:flex:not(:nth-child(2)) { display: flex; } + @supports not (grid: var(--tw)) { .not-supports-grid\\:flex { display: flex; } } - @media not (prefers-reduced-motion: no-preference) { + + @media not all and (prefers-reduced-motion: no-preference) { .not-motion-safe\\:flex { display: flex; } } - @media not (prefers-reduced-motion: reduce) { + + @media not all and (prefers-reduced-motion: reduce) { .not-motion-reduce\\:flex { display: flex; } } - @media not (prefers-contrast: more) { + + @media not all and (prefers-contrast: more) { .not-contrast-more\\:flex { display: flex; } } - @media not (prefers-contrast: less) { + + @media not all and (prefers-contrast: less) { .not-contrast-less\\:flex { display: flex; } } - @media not (width < 640px) { + + @media (min-width: 640px) { .not-max-sm\\:flex { display: flex; } } - @media not (width < 130px) { + + @media (min-width: 130px) { .not-max-\\[130px\\]\\:flex { display: flex; } } - @media not (width >= 130px) { + + @media not all and (min-width: 130px) { .not-min-\\[130px\\]\\:flex { display: flex; } } - @media not (width >= 640px) { - .not-min-sm\\:flex { - display: flex; - } - .not-sm\\:flex { + + @media not all and (min-width: 640px) { + .not-min-sm\\:flex, .not-sm\\:flex { display: flex; } } - @media not (orientation: portrait) { + + @media not all and (orientation: portrait) { .not-portrait\\:flex { display: flex; } } - @media not (orientation: landscape) { + + @media not all and (orientation: landscape) { .not-landscape\\:flex { display: flex; } } - .not-ltr\\:flex:not(*:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)) { - display: flex; - } - .not-rtl\\:flex:not(*:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)) { + + .not-ltr\\:flex:not(:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)), .not-rtl\\:flex:not(:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)) { display: flex; } - @media not (prefers-color-scheme: dark) { + + @media not all and (prefers-color-scheme: dark) { .not-dark\\:flex { display: flex; } } + @media not print { .not-print\\:flex { display: flex; } } - @media not (forced-colors: active) { + + @media not all and (forced-colors: active) { .not-forced-colors\\:flex { display: flex; } } - @media not (scripting: none) { + + @media not all and (scripting: none) { .not-noscript\\:flex { display: flex; } } - .not-hocus\\:flex:not(*:hover, *:focus) { - display: flex; - } - .not-device-hocus\\:flex:not(*:hover, *:focus) { + + .not-hocus\\:flex:not(:hover, :focus), .not-device-hocus\\:flex:not(:hover, :focus) { display: flex; } - @media not (hover: hover) { + + @media not all and (hover: hover) { .not-device-hocus\\:flex { display: flex; } } - .not-\\[\\:checked\\]\\:flex:not(*:checked) { + + .not-\\[\\:checked\\]\\:flex:not(:checked) { display: flex; } - @media not (orientation:landscape) { + + @media not all and (orientation: landscape) { .not-\\[\\@media_\\(orientation\\:landscape\\)\\]\\:flex { display: flex; } } - @media (orientation:portrait) { + + @media (orientation: portrait) { .not-\\[\\@media_not_\\(orientation\\:portrait\\)\\]\\:flex { display: flex; } } + @media not print { .not-\\[\\@media_print\\]\\:flex { display: flex; } } - @media not (orientation:portrait) { + + @media not all and (orientation: portrait) { .not-\\[\\@media\\(orientation\\:portrait\\)\\]\\:flex { display: flex; } } - .group-not-checked\\:flex:is(:where(.group):not(*:checked) *) { - display: flex; - } - .group-not-hocus\\:flex:is(:where(.group):not(*:hover, *:focus) *) { - display: flex; - } - .group-not-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(*:hover, *:focus) *) { - display: flex; - } - .group-not-\\[\\:checked\\]\\:flex:is(:where(.group):not(*:checked) *) { - display: flex; - } - .group-not-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(*:checked) *) { - display: flex; - } - .peer-not-checked\\:flex:is(:where(.peer):not(*:checked) ~ *) { - display: flex; - } - .peer-not-hocus\\:flex:is(:where(.peer):not(*:hover, *:focus) ~ *) { - display: flex; - } - .peer-not-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):not(*:hover, *:focus) ~ *) { - display: flex; - } - .peer-not-\\[\\:checked\\]\\:flex:is(:where(.peer):not(*:checked) ~ *) { - display: flex; - } - .peer-not-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):not(*:checked) ~ *) { + + .group-not-checked\\:flex:is(:where(.group):not(:checked) *), .group-not-hocus\\:flex:is(:where(.group):not(:hover, :focus) *), .group-not-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(:hover, :focus) *), .group-not-\\[\\:checked\\]\\:flex:is(:where(.group):not(:checked) *), .group-not-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(:checked) *), .peer-not-checked\\:flex:is(:where(.peer):not(:checked) ~ *), .peer-not-hocus\\:flex:is(:where(.peer):not(:hover, :focus) ~ *), .peer-not-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):not(:hover, :focus) ~ *), .peer-not-\\[\\:checked\\]\\:flex:is(:where(.peer):not(:checked) ~ *), .peer-not-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):not(:checked) ~ *) { display: flex; } " @@ -2077,16 +1812,19 @@ test('not', async () => { display: flex; } } + @container style(--b) { .not-has-b\\:flex { display: flex; } } + @container foo not style(--c) { .not-has-c\\:flex { display: flex; } } + @container bar style(--d) { .not-has-d\\:flex { display: flex; @@ -2197,19 +1935,7 @@ test('in', async () => { ]), ).toMatchInlineSnapshot(` " - .not-in-\\[\\.group\\]\\:flex:not(:where(*.group) *) { - display: flex; - } - .not-in-\\[p\\]\\:flex:not(:where(p:is(*)) *) { - display: flex; - } - :where(*[data-visible]) .in-data-visible\\:flex { - display: flex; - } - :where(*.group) .in-\\[\\.group\\]\\:flex { - display: flex; - } - :where(p:is(*)) .in-\\[p\\]\\:flex { + .not-in-\\[\\.group\\]\\:flex:not(:where(.group) *), .not-in-\\[p\\]\\:flex:not(:where(p:is(*)) *), :where([data-visible]) .in-data-visible\\:flex, :where(.group) .in-\\[\\.group\\]\\:flex, :where(p:is(*)) .in-\\[p\\]\\:flex { display: flex; } " @@ -2267,97 +1993,7 @@ test('has', async () => { ), ).toMatchInlineSnapshot(` " - .group-has-checked\\:flex:is(:where(.group):has(*:checked) *) { - display: flex; - } - .group-has-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(*:checked) *) { - display: flex; - } - .group-has-hocus\\:flex:is(:where(.group):has(*:hover, *:focus) *) { - display: flex; - } - .group-has-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(*:hover, *:focus) *) { - display: flex; - } - .group-has-\\[\\:checked\\]\\:flex:is(:where(.group):has(*:checked) *) { - display: flex; - } - .group-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(*:checked) *) { - display: flex; - } - .group-has-\\[\\&\\>img\\]\\:flex:is(:where(.group):has(* > img) *) { - display: flex; - } - .group-has-\\[\\&\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(* > img) *) { - display: flex; - } - .group-has-\\[\\+img\\]\\:flex:is(:where(.group):has( + img) *) { - display: flex; - } - .group-has-\\[\\>img\\]\\:flex:is(:where(.group):has( > img) *) { - display: flex; - } - .group-has-\\[\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has( > img) *) { - display: flex; - } - .group-has-\\[\\~img\\]\\:flex:is(:where(.group):has( ~ img) *) { - display: flex; - } - .peer-has-checked\\:flex:is(:where(.peer):has(*:checked) ~ *) { - display: flex; - } - .peer-has-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(*:checked) ~ *) { - display: flex; - } - .peer-has-hocus\\:flex:is(:where(.peer):has(*:hover, *:focus) ~ *) { - display: flex; - } - .peer-has-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(*:hover, *:focus) ~ *) { - display: flex; - } - .peer-has-\\[\\:checked\\]\\:flex:is(:where(.peer):has(*:checked) ~ *) { - display: flex; - } - .peer-has-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(*:checked) ~ *) { - display: flex; - } - .peer-has-\\[\\&\\>img\\]\\:flex:is(:where(.peer):has(* > img) ~ *) { - display: flex; - } - .peer-has-\\[\\&\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(* > img) ~ *) { - display: flex; - } - .peer-has-\\[\\+img\\]\\:flex:is(:where(.peer):has( + img) ~ *) { - display: flex; - } - .peer-has-\\[\\>img\\]\\:flex:is(:where(.peer):has( > img) ~ *) { - display: flex; - } - .peer-has-\\[\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has( > img) ~ *) { - display: flex; - } - .peer-has-\\[\\~img\\]\\:flex:is(:where(.peer):has( ~ img) ~ *) { - display: flex; - } - .has-checked\\:flex:has(*:checked) { - display: flex; - } - .has-hocus\\:flex:has(*:hover, *:focus) { - display: flex; - } - .has-\\[\\:checked\\]\\:flex:has(*:checked) { - display: flex; - } - .has-\\[\\&\\>img\\]\\:flex:has(* > img) { - display: flex; - } - .has-\\[\\+img\\]\\:flex:has( + img) { - display: flex; - } - .has-\\[\\>img\\]\\:flex:has( > img) { - display: flex; - } - .has-\\[\\~img\\]\\:flex:has( ~ img) { + .group-has-checked\\:flex:is(:where(.group):has(:checked) *), .group-has-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *), .group-has-hocus\\:flex:is(:where(.group):has(:hover, :focus) *), .group-has-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:hover, :focus) *), .group-has-\\[\\:checked\\]\\:flex:is(:where(.group):has(:checked) *), .group-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *), .group-has-\\[\\&\\>img\\]\\:flex:is(:where(.group):has(* > img) *), .group-has-\\[\\&\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(* > img) *), .group-has-\\[\\+img\\]\\:flex:is(:where(.group):has( + img) *), .group-has-\\[\\>img\\]\\:flex:is(:where(.group):has( > img) *), .group-has-\\[\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has( > img) *), .group-has-\\[\\~img\\]\\:flex:is(:where(.group):has( ~ img) *), .peer-has-checked\\:flex:is(:where(.peer):has(:checked) ~ *), .peer-has-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:checked) ~ *), .peer-has-hocus\\:flex:is(:where(.peer):has(:hover, :focus) ~ *), .peer-has-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:hover, :focus) ~ *), .peer-has-\\[\\:checked\\]\\:flex:is(:where(.peer):has(:checked) ~ *), .peer-has-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:checked) ~ *), .peer-has-\\[\\&\\>img\\]\\:flex:is(:where(.peer):has(* > img) ~ *), .peer-has-\\[\\&\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(* > img) ~ *), .peer-has-\\[\\+img\\]\\:flex:is(:where(.peer):has( + img) ~ *), .peer-has-\\[\\>img\\]\\:flex:is(:where(.peer):has( > img) ~ *), .peer-has-\\[\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has( > img) ~ *), .peer-has-\\[\\~img\\]\\:flex:is(:where(.peer):has( ~ img) ~ *), .has-checked\\:flex:has(:checked), .has-hocus\\:flex:has(:hover, :focus), .has-\\[\\:checked\\]\\:flex:has(:checked), .has-\\[\\&\\>img\\]\\:flex:has(* > img), .has-\\[\\+img\\]\\:flex:has( + img), .has-\\[\\>img\\]\\:flex:has( > img), .has-\\[\\~img\\]\\:flex:has( ~ img) { display: flex; } " @@ -2410,52 +2046,7 @@ test('aria', async () => { ]), ).toMatchInlineSnapshot(` " - .group-aria-checked\\:flex:is(:where(.group)[aria-checked="true"] *) { - display: flex; - } - .group-aria-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-checked="true"] *) { - display: flex; - } - .group-aria-\\[modal\\]\\:flex:is(:where(.group)[aria-modal] *) { - display: flex; - } - .group-aria-\\[modal\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-modal] *) { - display: flex; - } - .group-aria-\\[valuenow\\=1\\]\\:flex:is(:where(.group)[aria-valuenow="1"] *) { - display: flex; - } - .group-aria-\\[valuenow\\=1\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-valuenow="1"] *) { - display: flex; - } - .peer-aria-checked\\:flex:is(:where(.peer)[aria-checked="true"] ~ *) { - display: flex; - } - .peer-aria-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-checked="true"] ~ *) { - display: flex; - } - .peer-aria-\\[modal\\]\\:flex:is(:where(.peer)[aria-modal] ~ *) { - display: flex; - } - .peer-aria-\\[modal\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-modal] ~ *) { - display: flex; - } - .peer-aria-\\[valuenow\\=1\\]\\:flex:is(:where(.peer)[aria-valuenow="1"] ~ *) { - display: flex; - } - .peer-aria-\\[valuenow\\=1\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-valuenow="1"] ~ *) { - display: flex; - } - .aria-checked\\:flex[aria-checked="true"] { - display: flex; - } - .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"] { - display: flex; - } - .aria-\\[valuenow_\\=_\\"1\\"\\]\\:flex[aria-valuenow = "1"] { - display: flex; - } - .aria-\\[valuenow\\=1\\]\\:flex[aria-valuenow="1"] { + .group-aria-checked\\:flex:is(:where(.group)[aria-checked="true"] *), .group-aria-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-checked="true"] *), .group-aria-\\[modal\\]\\:flex:is(:where(.group)[aria-modal] *), .group-aria-\\[modal\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-modal] *), .group-aria-\\[valuenow\\=1\\]\\:flex:is(:where(.group)[aria-valuenow="1"] *), .group-aria-\\[valuenow\\=1\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-valuenow="1"] *), .peer-aria-checked\\:flex:is(:where(.peer)[aria-checked="true"] ~ *), .peer-aria-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-checked="true"] ~ *), .peer-aria-\\[modal\\]\\:flex:is(:where(.peer)[aria-modal] ~ *), .peer-aria-\\[modal\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-modal] ~ *), .peer-aria-\\[valuenow\\=1\\]\\:flex:is(:where(.peer)[aria-valuenow="1"] ~ *), .peer-aria-\\[valuenow\\=1\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-valuenow="1"] ~ *), .aria-checked\\:flex[aria-checked="true"], .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"], .aria-\\[valuenow_\\=_\\"1\\"\\]\\:flex[aria-valuenow="1"], .aria-\\[valuenow\\=1\\]\\:flex[aria-valuenow="1"] { display: flex; } " @@ -2494,73 +2085,7 @@ test('data', async () => { ]), ).toMatchInlineSnapshot(` " - .group-data-\\[disabled\\]\\:flex:is(:where(.group)[data-disabled] *) { - display: flex; - } - .group-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-disabled] *) { - display: flex; - } - .group-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo$='bar' i] *) { - display: flex; - } - .group-data-\\[foo\\$\\=bar_baz_i\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo$="bar baz" i] *) { - display: flex; - } - .group-data-\\[foo\\=1\\]\\:flex:is(:where(.group)[data-foo="1"] *) { - display: flex; - } - .group-data-\\[foo\\=1\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo="1"] *) { - display: flex; - } - .group-data-\\[foo\\=bar\\ baz\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo="bar baz"] *) { - display: flex; - } - .peer-data-\\[disabled\\]\\:flex:is(:where(.peer)[data-disabled] ~ *) { - display: flex; - } - .peer-data-\\[disabled\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-disabled] ~ *) { - display: flex; - } - .peer-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo$='bar' i] ~ *) { - display: flex; - } - .peer-data-\\[foo\\$\\=bar_baz_i\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo$="bar baz" i] ~ *) { - display: flex; - } - .peer-data-\\[foo\\=1\\]\\:flex:is(:where(.peer)[data-foo="1"] ~ *) { - display: flex; - } - .peer-data-\\[foo\\=1\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo="1"] ~ *) { - display: flex; - } - .peer-data-\\[foo\\=bar\\ baz\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo="bar baz"] ~ *) { - display: flex; - } - .data-disabled\\:flex[data-disabled] { - display: flex; - } - .data-\\[foo\\$\\=\\'bar\\'_i\\]\\:flex[data-foo$='bar' i] { - display: flex; - } - .data-\\[foo\\$\\=bar_baz_i\\]\\:flex[data-foo$="bar baz" i] { - display: flex; - } - .data-\\[foo\\=1\\]\\:flex[data-foo="1"] { - display: flex; - } - .data-\\[foo\\=bar_baz\\]\\:flex[data-foo="bar baz"] { - display: flex; - } - .data-\\[potato_\\=_\\"salad\\"\\]\\:flex[data-potato = "salad"] { - display: flex; - } - .data-\\[potato_\\^\\=_\\"salad\\"\\]\\:flex[data-potato ^= "salad"] { - display: flex; - } - .data-\\[potato\\=\\"\\^_\\=\\"\\]\\:flex[data-potato="^ ="] { - display: flex; - } - .data-\\[potato\\=salad\\]\\:flex[data-potato="salad"] { + .group-data-\\[disabled\\]\\:flex:is(:where(.group)[data-disabled] *), .group-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-disabled] *), .group-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo$="bar" i] *), .group-data-\\[foo\\$\\=bar_baz_i\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo$="bar baz" i] *), .group-data-\\[foo\\=1\\]\\:flex:is(:where(.group)[data-foo="1"] *), .group-data-\\[foo\\=1\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo="1"] *), .group-data-\\[foo\\=bar\\ baz\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo="bar baz"] *), .peer-data-\\[disabled\\]\\:flex:is(:where(.peer)[data-disabled] ~ *), .peer-data-\\[disabled\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-disabled] ~ *), .peer-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo$="bar" i] ~ *), .peer-data-\\[foo\\$\\=bar_baz_i\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo$="bar baz" i] ~ *), .peer-data-\\[foo\\=1\\]\\:flex:is(:where(.peer)[data-foo="1"] ~ *), .peer-data-\\[foo\\=1\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo="1"] ~ *), .peer-data-\\[foo\\=bar\\ baz\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo="bar baz"] ~ *), .data-disabled\\:flex[data-disabled], .data-\\[foo\\$\\=\\'bar\\'_i\\]\\:flex[data-foo$="bar" i], .data-\\[foo\\$\\=bar_baz_i\\]\\:flex[data-foo$="bar baz" i], .data-\\[foo\\=1\\]\\:flex[data-foo="1"], .data-\\[foo\\=bar_baz\\]\\:flex[data-foo="bar baz"], .data-\\[potato_\\=_\\"salad\\"\\]\\:flex[data-potato="salad"], .data-\\[potato_\\^\\=_\\"salad\\"\\]\\:flex[data-potato^="salad"], .data-\\[potato\\=\\"\\^_\\=\\"\\]\\:flex[data-potato="^ ="], .data-\\[potato\\=salad\\]\\:flex[data-potato="salad"] { display: flex; } " @@ -2752,34 +2277,7 @@ test('nth', async () => { ]), ).toMatchInlineSnapshot(` " - .nth-3\\:flex:nth-child(3) { - display: flex; - } - .nth-\\[2n\\+1\\]\\:flex:nth-child(2n+1) { - display: flex; - } - .nth-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-child(2n+1 of .foo) { - display: flex; - } - .nth-last-3\\:flex:nth-last-child(3) { - display: flex; - } - .nth-last-\\[2n\\+1\\]\\:flex:nth-last-child(2n+1) { - display: flex; - } - .nth-last-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-last-child(2n+1 of .foo) { - display: flex; - } - .nth-of-type-3\\:flex:nth-of-type(3) { - display: flex; - } - .nth-of-type-\\[2n\\+1\\]\\:flex:nth-of-type(2n+1) { - display: flex; - } - .nth-last-of-type-3\\:flex:nth-last-of-type(3) { - display: flex; - } - .nth-last-of-type-\\[2n\\+1\\]\\:flex:nth-last-of-type(2n+1) { + .nth-3\\:flex:nth-child(3), .nth-\\[2n\\+1\\]\\:flex:nth-child(odd), .nth-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-child(odd of .foo), .nth-last-3\\:flex:nth-last-child(3), .nth-last-\\[2n\\+1\\]\\:flex:nth-last-child(odd), .nth-last-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-last-child(odd of .foo), .nth-of-type-3\\:flex:nth-of-type(3), .nth-of-type-\\[2n\\+1\\]\\:flex:nth-of-type(odd), .nth-last-of-type-3\\:flex:nth-last-of-type(3), .nth-last-of-type-\\[2n\\+1\\]\\:flex:nth-last-of-type(odd) { display: flex; } " @@ -2850,88 +2348,97 @@ test('container queries', async () => { ), ).toMatchInlineSnapshot(` " - @container name (width < 1440px) { + @container name not (min-width: 1440px) { .\\@max-foo-bar\\/name\\:flex { display: flex; } } - @container (width < 1440px) { + + @container not (min-width: 1440px) { .\\@max-foo-bar\\:flex { display: flex; } } - @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) { - .\\@\\[123px\\]\\:flex { - display: flex; - } - .\\@min-\\[123px\\]\\:flex { + + @container (min-width: 123px) { + .\\@\\[123px\\]\\:flex, .\\@min-\\[123px\\]\\:flex { display: flex; } } - @container name (width >= 456px) { - .\\@\\[456px\\]\\/name\\:flex { - display: flex; - } - .\\@min-\\[456px\\]\\/name\\:flex { + + @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; } } - @container name (width >= 1440px) { + + @container name (min-width: 1440px) { .\\@foo-bar\\/name\\:flex { display: flex; } } - @container (width >= 1440px) { + + @container (min-width: 1440px) { .\\@foo-bar\\:flex { display: flex; } } - @container name (width >= 1440px) { + + @container name (min-width: 1440px) { .\\@min-foo-bar\\/name\\:flex { display: flex; } } - @container (width >= 1440px) { + + @container (min-width: 1440px) { .\\@min-foo-bar\\:flex { display: flex; } @@ -3059,288 +2566,189 @@ test('variant order', async () => { ), ).toMatchInlineSnapshot(` " - @layer properties; - @media (hover: hover) { - .group-hover\\:flex:is(:where(.group):hover *) { - display: flex; + @layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-content: ""; + } } - .peer-hover\\:flex:is(:where(.peer):hover ~ *) { + } + + @media (hover: hover) { + .group-hover\\:flex:is(:where(.group):hover *), .peer-hover\\:flex:is(:where(.peer):hover ~ *) { display: flex; } } - .first-letter\\:flex::first-letter { - display: flex; - } - .first-line\\:flex::first-line { + + .first-letter\\:flex:first-letter, .first-line\\:flex:first-line { display: flex; } - .marker\\:flex *::marker { + + .marker\\:flex ::marker { display: flex; } + .marker\\:flex::marker { display: flex; } - .marker\\:flex *::-webkit-details-marker { + + .marker\\:flex ::-webkit-details-marker { display: flex; } + .marker\\:flex::-webkit-details-marker { display: flex; } - .selection\\:flex *::selection { + + .selection\\:flex ::selection { display: flex; } + .selection\\:flex::selection { display: flex; } + .file\\:flex::file-selector-button { display: flex; } - .placeholder\\:flex::placeholder { - display: flex; - } - .backdrop\\:flex::backdrop { + + .placeholder\\:flex::placeholder, .backdrop\\:flex::backdrop { display: flex; } + .details-content\\:flex::details-content { display: flex; } - .before\\:flex::before { - content: var(--tw-content); - display: flex; - } - .after\\:flex::after { + + .before\\:flex:before, .after\\:flex:after { content: var(--tw-content); display: flex; } - .first\\:flex:first-child { - display: flex; - } - .last\\:flex:last-child { - display: flex; - } - .only\\:flex:only-child { - display: flex; - } - .odd\\:flex:nth-child(odd) { - display: flex; - } - .even\\:flex:nth-child(even) { - display: flex; - } - .first-of-type\\:flex:first-of-type { - display: flex; - } - .last-of-type\\:flex:last-of-type { - display: flex; - } - .only-of-type\\:flex:only-of-type { - display: flex; - } - .visited\\:flex:visited { - display: flex; - } - .target\\:flex:target { - display: flex; - } - .open\\:flex:is([open], :popover-open, :open) { - display: flex; - } - .default\\:flex:default { - display: flex; - } - .checked\\:flex:checked { - display: flex; - } - .indeterminate\\:flex:indeterminate { - display: flex; - } - .placeholder-shown\\:flex:placeholder-shown { + + .first\\:flex:first-child, .last\\:flex:last-child, .only\\:flex:only-child, .odd\\:flex:nth-child(odd), .even\\:flex:nth-child(2n), .first-of-type\\:flex:first-of-type, .last-of-type\\:flex:last-of-type, .only-of-type\\:flex:only-of-type, .visited\\:flex:visited, .target\\:flex:target, .open\\:flex:is([open], :popover-open, :open), .default\\:flex:default, .checked\\:flex:checked, .indeterminate\\:flex:indeterminate, .placeholder-shown\\:flex:placeholder-shown { display: flex; } + .autofill\\:flex:autofill { display: flex; } - .optional\\:flex:optional { - display: flex; - } - .required\\:flex:required { - display: flex; - } - .valid\\:flex:valid { - display: flex; - } - .invalid\\:flex:invalid { - display: flex; - } - .in-range\\:flex:in-range { - display: flex; - } - .out-of-range\\:flex:out-of-range { - display: flex; - } - .read-only\\:flex:read-only { - display: flex; - } - .empty\\:flex:empty { - display: flex; - } - .focus-within\\:flex:focus-within { + + .optional\\:flex:optional, .required\\:flex:required, .valid\\:flex:valid, .invalid\\:flex:invalid, .in-range\\:flex:in-range, .out-of-range\\:flex:out-of-range, .read-only\\:flex:read-only, .empty\\:flex:empty, .focus-within\\:flex:focus-within { display: flex; } + @media (hover: hover) { .hover\\:flex:hover { display: flex; } } - .focus\\:flex:focus { - display: flex; - } - .focus-visible\\:flex:focus-visible { - display: flex; - } - .active\\:flex:active { - display: flex; - } - .enabled\\:flex:enabled { - display: flex; - } - .disabled\\:flex:disabled { - display: flex; - } - .has-\\[\\:hover\\]\\:flex:has(*:hover) { - display: flex; - } - .aria-busy\\:flex[aria-busy="true"] { - display: flex; - } - .aria-checked\\:flex[aria-checked="true"] { - display: flex; - } - .aria-disabled\\:flex[aria-disabled="true"] { - display: flex; - } - .aria-expanded\\:flex[aria-expanded="true"] { - display: flex; - } - .aria-hidden\\:flex[aria-hidden="true"] { - display: flex; - } - .aria-pressed\\:flex[aria-pressed="true"] { - display: flex; - } - .aria-readonly\\:flex[aria-readonly="true"] { - display: flex; - } - .aria-required\\:flex[aria-required="true"] { - display: flex; - } - .aria-selected\\:flex[aria-selected="true"] { - display: flex; - } - .aria-\\[custom\\=true\\]\\:flex[aria-custom="true"] { - display: flex; - } - .data-custom\\:flex[data-custom] { - display: flex; - } - .data-\\[custom\\=true\\]\\:flex[data-custom="true"] { + + .focus\\:flex:focus, .focus-visible\\:flex:focus-visible, .active\\:flex:active, .enabled\\:flex:enabled, .disabled\\:flex:disabled, .has-\\[\\:hover\\]\\:flex:has(:hover), .aria-busy\\:flex[aria-busy="true"], .aria-checked\\:flex[aria-checked="true"], .aria-disabled\\:flex[aria-disabled="true"], .aria-expanded\\:flex[aria-expanded="true"], .aria-hidden\\:flex[aria-hidden="true"], .aria-pressed\\:flex[aria-pressed="true"], .aria-readonly\\:flex[aria-readonly="true"], .aria-required\\:flex[aria-required="true"], .aria-selected\\:flex[aria-selected="true"], .aria-\\[custom\\=true\\]\\:flex[aria-custom="true"], .data-custom\\:flex[data-custom], .data-\\[custom\\=true\\]\\:flex[data-custom="true"] { display: flex; } - @supports (display:flex) { + + @supports (display: flex) { .supports-\\[display\\:flex\\]\\:flex { display: flex; } } + @media (prefers-reduced-motion: no-preference) { .motion-safe\\:flex { display: flex; } } + @media (prefers-reduced-motion: reduce) { .motion-reduce\\:flex { display: flex; } } + @media (prefers-contrast: more) { .contrast-more\\:flex { display: flex; } } + @media (prefers-contrast: less) { .contrast-less\\:flex { display: flex; } } - @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; } } + @media (orientation: portrait) { .portrait\\:flex { display: flex; } } + @media (orientation: landscape) { .landscape\\:flex { display: flex; } } - .ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { - display: flex; - } - .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + + .ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *), .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { display: flex; } + @media (prefers-color-scheme: dark) { .dark\\:flex { display: flex; } } + @media print { .print\\:flex { display: flex; } } + @media (forced-colors: active) { .forced-colors\\:flex { display: flex; } } + .\\[\\&_p\\]\\:flex p { display: flex; } + @property --tw-content { syntax: "*"; - initial-value: ""; inherits: false; - } - @layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-content: ""; - } - } + initial-value: ""; } " `) @@ -3370,22 +2778,7 @@ test('variants with the same root are sorted deterministically', async () => { for (let classList of classLists) { expect(await run(classList)).toMatchInlineSnapshot(` " - .data-active\\:flex[data-active] { - display: flex; - } - .data-focus\\:flex[data-focus] { - display: flex; - } - .data-hover\\:flex[data-hover] { - display: flex; - } - .data-\\[bar\\]\\:flex[data-bar] { - display: flex; - } - .data-\\[baz\\]\\:flex[data-baz] { - display: flex; - } - .data-\\[foo\\]\\:flex[data-foo] { + .data-active\\:flex[data-active], .data-focus\\:flex[data-focus], .data-hover\\:flex[data-hover], .data-\\[bar\\]\\:flex[data-bar], .data-\\[baz\\]\\:flex[data-baz], .data-\\[foo\\]\\:flex[data-foo] { display: flex; } " @@ -3434,19 +2827,7 @@ test('matchVariant sorts deterministically', async () => { }), ).toMatchInlineSnapshot(` " - .is-data\\:flex[data-default] { - display: flex; - } - .is-data-foo\\:flex[data-foo] { - display: flex; - } - .is-data-bar\\:flex[data-bar] { - display: flex; - } - .is-data-\\[potato\\]\\:flex[data-potato] { - display: flex; - } - .is-data-\\[sandwich\\]\\:flex[data-sandwich] { + .is-data\\:flex[data-default], .is-data-foo\\:flex[data-foo], .is-data-bar\\:flex[data-bar], .is-data-\\[potato\\]\\:flex[data-potato], .is-data-\\[sandwich\\]\\:flex[data-sandwich] { display: flex; } " @@ -3467,16 +2848,7 @@ test('move modifier of compound variant to sub-variant if its also a compound va ]), ).toMatchInlineSnapshot(` " - .not-group-focus\\/name\\:flex:not(*:is(:where(.group\\/name):focus *)) { - display: flex; - } - .group-peer-focus\\/name\\:flex:is(:where(.group\\/name):is(:where(.peer):focus ~ *) *) { - display: flex; - } - :where(*:is(:where(.group\\/name):focus *)) .in-group-focus\\/name\\:flex { - display: flex; - } - .has-group-focus\\/name\\:flex:has(*:is(:where(.group\\/name):focus *)) { + .not-group-focus\\/name\\:flex:not(:is(:where(.group\\/name):focus *)), .group-peer-focus\\/name\\:flex:is(:where(.group\\/name):is(:where(.peer):focus ~ *) *), :where(:is(:where(.group\\/name):focus *)) .in-group-focus\\/name\\:flex, .has-group-focus\\/name\\:flex:has(:is(:where(.group\\/name):focus *)) { display: flex; } " From a60d440fda06356f58b2894e0ccc6c17b63df24c Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 28 May 2026 18:06:32 +0200 Subject: [PATCH 18/20] fix applyVariant on CSS node without rules If you are using `@variant` in your CSS without any rules, then we could potentially introduce invalid CSS. We start from a rule with a `&` selector, but if we didn't have a selector in the first place then we would introduce a selector which is incorrect. This fix tracks the nodes of the intermediate node if that's the case. --- packages/tailwindcss/src/index.test.ts | 1 + packages/tailwindcss/src/variants.ts | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 6684f01f8e2a..74282c0058ae 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -5732,6 +5732,7 @@ describe('@variant', () => { @media something { @media (orientation: landscape) { @page { + color: red; } } } diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 82242861f90b..d62f13c8fb4d 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -1302,7 +1302,11 @@ export function substituteAtVariant(ast: AstNode[], designSystem: DesignSystem): } } - nodes.push(node) + if (node.selector === '&') { + nodes.push(...node.nodes) + } else { + nodes.push(node) + } } // Update the variant at-rule node, to be the `&` rule node From 9f648d5aa888510dd126ce962194f6b34946ae23 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 28 May 2026 21:03:50 +0200 Subject: [PATCH 19/20] update integration tests --- integrations/cli/index.test.ts | 8 +++++-- integrations/vite/index.test.ts | 42 +++++++++++++++++---------------- 2 files changed, 28 insertions(+), 22 deletions(-) diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts index f56cd765e8d7..52b2dd4c6ad5 100644 --- a/integrations/cli/index.test.ts +++ b/integrations/cli/index.test.ts @@ -2480,7 +2480,9 @@ test( @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } @@ -2523,7 +2525,9 @@ test( @layer utilities { .bg-red-500\\/50 { background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { + } + @supports (color: color-mix(in lab, red, red)) { + .bg-red-500\\/50 { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); } } diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts index 4c936a2a23af..1bb23c1681a8 100644 --- a/integrations/vite/index.test.ts +++ b/integrations/vite/index.test.ts @@ -1137,7 +1137,7 @@ test( -
Hello, world!
+
Hello, world!
`, 'src/index.css': css` @@ -1149,16 +1149,16 @@ test( async ({ exec, expect, fs }) => { await exec('pnpm vite build') - let files = await fs.glob('dist/**/*.css') - expect(files).toHaveLength(1) - let [filename] = files[0] - // Should not be minified when optimize is disabled - let content = await fs.read(filename) - expect(content).toContain('.hover\\:flex {') - expect(content).toContain('&:hover {') - expect(content).toContain('@media (hover: hover) {') - expect(content).toContain('display: flex;') + expect((await fs.dumpFiles('dist/**/*.css')).replace(/-([_a-zA-Z0-9]*?)\.css/g, '-.css')) + .toMatchInlineSnapshot(` + " + --- dist/assets/index-.css --- + .focus\\:text-\\[black\\]:focus { + color: black; + } + " + `) }, ) @@ -1192,7 +1192,7 @@ test( -
Hello, world!
+
Hello, world!
`, 'src/index.css': css` @@ -1204,15 +1204,17 @@ test( async ({ exec, expect, fs }) => { await exec('pnpm vite build') - let files = await fs.glob('dist/**/*.css') - expect(files).toHaveLength(1) - let [filename] = files[0] - - // Should be optimized but not minified - let content = await fs.read(filename) - expect(content).toContain('@media (hover: hover) {') - expect(content).toContain('.hover\\:flex:hover {') - expect(content).toContain('display: flex;') + expect((await fs.dumpFiles('dist/**/*.css')).replace(/-([_a-zA-Z0-9]*?)\.css/g, '-.css')) + .toMatchInlineSnapshot(` + " + --- dist/assets/index-.css --- + @media (hover: hover) { + .hover\\:text-\\[black\\]:hover { + color: #000; + } + } + " + `) }, ) From 9e8258286a5255aa7296f5b36c7015a0e8717b9b Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 29 May 2026 22:27:55 +0200 Subject: [PATCH 20/20] track original src/dst of rules We were incorrectly mapping the source locations of rules to that of the used declaration which was wrong. --- packages/tailwindcss/src/ast.ts | 21 +- .../src/source-maps/source-map.test.ts | 669 ++++++++++-------- 2 files changed, 372 insertions(+), 318 deletions(-) diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index 303e7d5235c6..93584120cd47 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -656,7 +656,11 @@ export function optimizeAst( export function handleNesting(ast: AstNode[]): AstNode[] { // Track `rule` selectors as we go - let selectorStack: string[] = [] + let selectorStack: [ + selector: string, + src: SourceLocation | undefined, + dst: SourceLocation | undefined, + ][] = [] // Track `at-rule` information as we go. Tracking this separately from the // selector stack for rules such that we can hoist this above all the rules. @@ -709,15 +713,15 @@ export function handleNesting(ast: AstNode[]): AstNode[] { }) if (changed) { - selectorStack.push(SelectorParser.toCss(ast)) + selectorStack.push([SelectorParser.toCss(ast), node.src, node.dst]) } else { - selectorStack.push(node.selector) + selectorStack.push([node.selector, node.src, node.dst]) } } // No nesting markers, track as-is else { - selectorStack.push(node.selector) + selectorStack.push([node.selector, node.src, node.dst]) } } @@ -732,7 +736,7 @@ export function handleNesting(ast: AstNode[]): AstNode[] { } // `&` is using `:is(…)` semantics - let parentSelector = `:is(${selectorStack[selectorStack.length - 1]})` + let parentSelector = `:is(${selectorStack[selectorStack.length - 1][0]})` let selector = segment(node.selector, ',') .map((selector) => { // Slow path: we need to replace the `&` with the parent @@ -762,7 +766,7 @@ export function handleNesting(ast: AstNode[]): AstNode[] { } }) .join(', ') - selectorStack.push(selector) + selectorStack.push([selector, node.src, node.dst]) } break } @@ -945,7 +949,8 @@ export function handleNesting(ast: AstNode[]): AstNode[] { // Build up the rule if (selectorStack.length > 0) { - let selector = optimizeSelector(selectorStack[selectorStack.length - 1]) + let [lastSelector, src, dst] = selectorStack[selectorStack.length - 1] + let selector = optimizeSelector(lastSelector) // Optimization: merge adjacent rules with the same selector // @@ -979,7 +984,7 @@ export function handleNesting(ast: AstNode[]): AstNode[] { // Can't push into existing node, create a new node root = rule(selector, nodes) - if (node.src || node.dst) Object.assign(root, { src: node.src, dst: node.dst }) + if (src || dst) Object.assign(root, { src, dst }) } // Wrap in at-rules, if we can push into an existing node then we can diff --git a/packages/tailwindcss/src/source-maps/source-map.test.ts b/packages/tailwindcss/src/source-maps/source-map.test.ts index 8f12d9e205c2..fa8dfd9528f3 100644 --- a/packages/tailwindcss/src/source-maps/source-map.test.ts +++ b/packages/tailwindcss/src/source-maps/source-map.test.ts @@ -115,16 +115,12 @@ test('source maps trace back to @import location', async ({ expect }) => { 2 @layer theme { | 3 @import './theme.css' layer(theme); ^^^^^^^^^^^^^ B @ 2:0-13 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ B @ 3:0-34 | --- theme.css --- - 3 :root, :host { | 2 --font-sans: - ^ C @ 3:2 | ^ C @ 2:2 - 3 :root, :host { | 3 ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI S... - ^ D @ 3:2 | ^ D @ 3:0 - 3 :root, :host { | 4 'Noto Color Emoji'; - ^^^^^^^^^^^^^ E @ 3:2-15 | ^^^^^^^^^^^^^^^^^^^^^^ E @ 4:0-22 - 4 --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'... | - ^ C @ 4:4 | - 4 --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'... | - ^ D @ 4:4 | + 3 :root, :host { | 1 @theme default { + ^^^^^^^^^^^^^ C @ 3:2-15 | ^^^^^^^^^^^^^^^ C @ 1:0-15 + 4 --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'... | 2 --font-sans: + ^ D @ 4:4 | ^ D @ 2:2 + 4 --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'... | 3 ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI S... + ^ E @ 4:4 | ^ E @ 3:0 4 --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'... | 4 'Noto Color Emoji'; ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... F @ 4:4-5:0 | ^ F @ 4:0 5 'Noto Color Emoji'; | 4 'Noto Color Emoji'; @@ -150,373 +146,432 @@ test('source maps trace back to @import location', async ({ expect }) => { 12 @layer base { | 4 @import './preflight.css' layer(base); ^^^^^^^^^^^^ N @ 12:0-12 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ N @ 4:0-37 | --- preflight.css --- - 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 12 box-sizing: border-box; /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ O @ 13:2-59 | ^^^^^^^^^^^^^^^^^^^^^^ O @ 12:2-24 - 14 box-sizing: border-box; | - ^^^^^^^^^^^^^^^^^^^^^^ O @ 14:4-26 | + 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 7 *, + ^ O @ 13:2 | ^ O @ 7:0 + 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 8 ::after, + ^ P @ 13:2 | ^ P @ 8:0 + 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 9 ::before, + ^ Q @ 13:2 | ^ Q @ 9:0 + 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 10 ::backdrop, + ^ R @ 13:2 | ^ R @ 10:0 + 13 *, ::after, ::before, ::backdrop, ::file-selector-button { | 11 ::file-selector-button { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ S @ 13:2-59 | ^^^^^^^^^^^^^^^^^^^^^^^ S @ 11:0-23 + 14 box-sizing: border-box; | 12 box-sizing: border-box; /* 1 */ + ^^^^^^^^^^^^^^^^^^^^^^ T @ 14:4-26 | ^^^^^^^^^^^^^^^^^^^^^^ T @ 12:2-24 15 margin: 0; | 13 margin: 0; /* 2 */ - ^^^^^^^^^ P @ 15:4-13 | ^^^^^^^^^ P @ 13:2-11 + ^^^^^^^^^ U @ 15:4-13 | ^^^^^^^^^ U @ 13:2-11 16 padding: 0; | 14 padding: 0; /* 2 */ - ^^^^^^^^^^ Q @ 16:4-14 | ^^^^^^^^^^ Q @ 14:2-12 + ^^^^^^^^^^ V @ 16:4-14 | ^^^^^^^^^^ V @ 14:2-12 17 border: 0 solid; | 15 border: 0 solid; /* 3 */ - ^^^^^^^^^^^^^^^ R @ 17:4-19 | ^^^^^^^^^^^^^^^ R @ 15:2-17 + ^^^^^^^^^^^^^^^ W @ 17:4-19 | ^^^^^^^^^^^^^^^ W @ 15:2-17 | 16 } 18 } | - 19 html, :host { | 30 line-height: 1.5; /* 1 */ - ^^^^^^^^^^^^ S @ 19:2-14 | ^^^^^^^^^^^^^^^^ S @ 30:2-18 - 20 line-height: 1.5; | - ^^^^^^^^^^^^^^^^ S @ 20:4-20 | + 19 html, :host { | 28 html, + ^ X @ 19:2 | ^ X @ 28:0 + 19 html, :host { | 29 :host { + ^^^^^^^^^^^^ Y @ 19:2-14 | ^^^^^^ Y @ 29:0-6 + 20 line-height: 1.5; | 30 line-height: 1.5; /* 1 */ + ^^^^^^^^^^^^^^^^ Z @ 20:4-20 | ^^^^^^^^^^^^^^^^ Z @ 30:2-18 21 -webkit-text-size-adjust: 100%; | 31 -webkit-text-size-adjust: 100%; /* 2 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ T @ 21:4-34 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ T @ 31:2-32 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AA @ 21:4-34 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AA @ 31:2-32 22 tab-size: 4; | 32 tab-size: 4; /* 3 */ - ^^^^^^^^^^^ U @ 22:4-15 | ^^^^^^^^^^^ U @ 32:2-13 + ^^^^^^^^^^^ AB @ 22:4-15 | ^^^^^^^^^^^ AB @ 32:2-13 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 33 font-family: --theme( - ^ V @ 23:4 | ^ V @ 33:2 + ^ AC @ 23:4 | ^ AC @ 33:2 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 34 --default-font-family, - ^ W @ 23:4 | ^ W @ 34:0 + ^ AD @ 23:4 | ^ AD @ 34:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 35 ui-sans-serif, - ^ X @ 23:4 | ^ X @ 35:0 + ^ AE @ 23:4 | ^ AE @ 35:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 36 system-ui, - ^ Y @ 23:4 | ^ Y @ 36:0 + ^ AF @ 23:4 | ^ AF @ 36:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 37 sans-serif, - ^ Z @ 23:4 | ^ Z @ 37:0 + ^ AG @ 23:4 | ^ AG @ 37:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 38 'Apple Color Emoji', - ^ AA @ 23:4 | ^ AA @ 38:0 + ^ AH @ 23:4 | ^ AH @ 38:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 39 'Segoe UI Emoji', - ^ AB @ 23:4 | ^ AB @ 39:0 + ^ AI @ 23:4 | ^ AI @ 39:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 40 'Segoe UI Symbol', - ^ AC @ 23:4 | ^ AC @ 40:0 + ^ AJ @ 23:4 | ^ AJ @ 40:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 41 'Noto Color Emoji' - ^ AD @ 23:4 | ^ AD @ 41:0 + ^ AK @ 23:4 | ^ AK @ 41:0 23 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Col... | 42 ); /* 4 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... AE @ 23:4-159 | ^^^ AE @ 42:0-3 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... AL @ 23:4-159 | ^^^ AL @ 42:0-3 24 font-feature-settings: var(--default-font-feature-settings, normal); | 43 font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AF @ 24:4-71 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AF @ 43:2-73 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AM @ 24:4-71 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AM @ 43:2-73 25 font-variation-settings: var(--default-font-variation-settings, normal); | 44 font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AG @ 25:4-75 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AG @ 44:2-77 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AN @ 25:4-75 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AN @ 44:2-77 26 -webkit-tap-highlight-color: transparent; | 45 -webkit-tap-highlight-color: transparent; /* 7 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AH @ 26:4-44 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AH @ 45:2-42 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AO @ 26:4-44 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AO @ 45:2-42 | 46 } 27 } | - 28 hr { | 55 height: 0; /* 1 */ - ^^^ AI @ 28:2-5 | ^^^^^^^^^ AI @ 55:2-11 - 29 height: 0; | - ^^^^^^^^^ AI @ 29:4-13 | + 28 hr { | 54 hr { + ^^^ AP @ 28:2-5 | ^^^ AP @ 54:0-3 + 29 height: 0; | 55 height: 0; /* 1 */ + ^^^^^^^^^ AQ @ 29:4-13 | ^^^^^^^^^ AQ @ 55:2-11 30 color: inherit; | 56 color: inherit; /* 2 */ - ^^^^^^^^^^^^^^ AJ @ 30:4-18 | ^^^^^^^^^^^^^^ AJ @ 56:2-16 + ^^^^^^^^^^^^^^ AR @ 30:4-18 | ^^^^^^^^^^^^^^ AR @ 56:2-16 31 border-top-width: 1px; | 57 border-top-width: 1px; /* 3 */ - ^^^^^^^^^^^^^^^^^^^^^ AK @ 31:4-25 | ^^^^^^^^^^^^^^^^^^^^^ AK @ 57:2-23 + ^^^^^^^^^^^^^^^^^^^^^ AS @ 31:4-25 | ^^^^^^^^^^^^^^^^^^^^^ AS @ 57:2-23 | 58 } 32 } | - 33 abbr:where([title]) { | 65 -webkit-text-decoration: underline dotted; - ^^^^^^^^^^^^^^^^^^^^ AL @ 33:2-22 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AL @ 65:2-43 - 34 -webkit-text-decoration: underline dotted; | - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AL @ 34:4-45 | + 33 abbr:where([title]) { | 64 abbr:where([title]) { + ^^^^^^^^^^^^^^^^^^^^ AT @ 33:2-22 | ^^^^^^^^^^^^^^^^^^^^ AT @ 64:0-20 + 34 -webkit-text-decoration: underline dotted; | 65 -webkit-text-decoration: underline dotted; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AU @ 34:4-45 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AU @ 65:2-43 35 text-decoration: underline dotted; | 66 text-decoration: underline dotted; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AM @ 35:4-37 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AM @ 66:2-35 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AV @ 35:4-37 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AV @ 66:2-35 | 67 } 36 } | - 37 h1, h2, h3, h4, h5, h6 { | 79 font-size: inherit; - ^^^^^^^^^^^^^^^^^^^^^^^ AN @ 37:2-25 | ^^^^^^^^^^^^^^^^^^ AN @ 79:2-20 - 38 font-size: inherit; | - ^^^^^^^^^^^^^^^^^^ AN @ 38:4-22 | + 37 h1, h2, h3, h4, h5, h6 { | 73 h1, + ^ AW @ 37:2 | ^ AW @ 73:0 + 37 h1, h2, h3, h4, h5, h6 { | 74 h2, + ^ AX @ 37:2 | ^ AX @ 74:0 + 37 h1, h2, h3, h4, h5, h6 { | 75 h3, + ^ AY @ 37:2 | ^ AY @ 75:0 + 37 h1, h2, h3, h4, h5, h6 { | 76 h4, + ^ AZ @ 37:2 | ^ AZ @ 76:0 + 37 h1, h2, h3, h4, h5, h6 { | 77 h5, + ^ BA @ 37:2 | ^ BA @ 77:0 + 37 h1, h2, h3, h4, h5, h6 { | 78 h6 { + ^^^^^^^^^^^^^^^^^^^^^^^ BB @ 37:2-25 | ^^^ BB @ 78:0-3 + 38 font-size: inherit; | 79 font-size: inherit; + ^^^^^^^^^^^^^^^^^^ BC @ 38:4-22 | ^^^^^^^^^^^^^^^^^^ BC @ 79:2-20 39 font-weight: inherit; | 80 font-weight: inherit; - ^^^^^^^^^^^^^^^^^^^^ AO @ 39:4-24 | ^^^^^^^^^^^^^^^^^^^^ AO @ 80:2-22 + ^^^^^^^^^^^^^^^^^^^^ BD @ 39:4-24 | ^^^^^^^^^^^^^^^^^^^^ BD @ 80:2-22 | 81 } 40 } | - 41 a { | 88 color: inherit; - ^^ AP @ 41:2-4 | ^^^^^^^^^^^^^^ AP @ 88:2-16 - 42 color: inherit; | - ^^^^^^^^^^^^^^ AP @ 42:4-18 | + 41 a { | 87 a { + ^^ BE @ 41:2-4 | ^^ BE @ 87:0-2 + 42 color: inherit; | 88 color: inherit; + ^^^^^^^^^^^^^^ BF @ 42:4-18 | ^^^^^^^^^^^^^^ BF @ 88:2-16 43 -webkit-text-decoration: inherit; | 89 -webkit-text-decoration: inherit; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AQ @ 43:4-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AQ @ 89:2-34 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BG @ 43:4-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BG @ 89:2-34 44 text-decoration: inherit; | 90 text-decoration: inherit; - ^^^^^^^^^^^^^^^^^^^^^^^^ AR @ 44:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ AR @ 90:2-26 + ^^^^^^^^^^^^^^^^^^^^^^^^ BH @ 44:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ BH @ 90:2-26 | 91 } 45 } | - 46 b, strong { | 99 font-weight: bolder; - ^^^^^^^^^^ AS @ 46:2-12 | ^^^^^^^^^^^^^^^^^^^ AS @ 99:2-21 + 46 b, strong { | 97 b, + ^ BI @ 46:2 | ^ BI @ 97:0 + 46 b, strong { | 98 strong { + ^^^^^^^^^^ BJ @ 46:2-12 | ^^^^^^^ BJ @ 98:0-7 + 47 font-weight: bolder; | 99 font-weight: bolder; + ^^^^^^^^^^^^^^^^^^^ BK @ 47:4-23 | ^^^^^^^^^^^^^^^^^^^ BK @ 99:2-21 | 100 } - 47 font-weight: bolder; | - ^^^^^^^^^^^^^^^^^^^ AS @ 47:4-23 | 48 } | - 49 code, kbd, samp, pre { | 113 font-family: --theme( - ^ AT @ 49:2 | ^ AT @ 113:2 - 49 code, kbd, samp, pre { | 114 --default-mono-font-family, - ^ AU @ 49:2 | ^ AU @ 114:0 - 49 code, kbd, samp, pre { | 115 ui-monospace, - ^ AV @ 49:2 | ^ AV @ 115:0 - 49 code, kbd, samp, pre { | 116 SFMono-Regular, - ^ AW @ 49:2 | ^ AW @ 116:0 - 49 code, kbd, samp, pre { | 117 Menlo, - ^ AX @ 49:2 | ^ AX @ 117:0 - 49 code, kbd, samp, pre { | 118 Monaco, - ^ AY @ 49:2 | ^ AY @ 118:0 - 49 code, kbd, samp, pre { | 119 Consolas, - ^ AZ @ 49:2 | ^ AZ @ 119:0 - 49 code, kbd, samp, pre { | 120 'Liberation Mono', - ^ BA @ 49:2 | ^ BA @ 120:0 - 49 code, kbd, samp, pre { | 121 'Courier New', - ^ BB @ 49:2 | ^ BB @ 121:0 - 49 code, kbd, samp, pre { | 122 monospace - ^ BC @ 49:2 | ^ BC @ 122:0 - 49 code, kbd, samp, pre { | 123 ); /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^ BD @ 49:2-23 | ^^^ BD @ 123:0-3 - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | - ^ AT @ 50:4 | - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | - ^ AU @ 50:4 | - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | - ^ AV @ 50:4 | - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | - ^ AW @ 50:4 | - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | - ^ AX @ 50:4 | - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | - ^ AY @ 50:4 | - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | - ^ AZ @ 50:4 | - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | - ^ BA @ 50:4 | - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | - ^ BB @ 50:4 | - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | - ^ BC @ 50:4 | - 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... BD @ 50:4-148 | + 49 code, kbd, samp, pre { | 109 code, + ^ BL @ 49:2 | ^ BL @ 109:0 + 49 code, kbd, samp, pre { | 110 kbd, + ^ BM @ 49:2 | ^ BM @ 110:0 + 49 code, kbd, samp, pre { | 111 samp, + ^ BN @ 49:2 | ^ BN @ 111:0 + 49 code, kbd, samp, pre { | 112 pre { + ^^^^^^^^^^^^^^^^^^^^^ BO @ 49:2-23 | ^^^^ BO @ 112:0-4 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 113 font-family: --theme( + ^ BP @ 50:4 | ^ BP @ 113:2 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 114 --default-mono-font-family, + ^ BQ @ 50:4 | ^ BQ @ 114:0 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 115 ui-monospace, + ^ BR @ 50:4 | ^ BR @ 115:0 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 116 SFMono-Regular, + ^ BS @ 50:4 | ^ BS @ 116:0 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 117 Menlo, + ^ BT @ 50:4 | ^ BT @ 117:0 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 118 Monaco, + ^ BU @ 50:4 | ^ BU @ 118:0 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 119 Consolas, + ^ BV @ 50:4 | ^ BV @ 119:0 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 120 'Liberation Mono', + ^ BW @ 50:4 | ^ BW @ 120:0 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 121 'Courier New', + ^ BX @ 50:4 | ^ BX @ 121:0 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 122 monospace + ^ BY @ 50:4 | ^ BY @ 122:0 + 50 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 123 ); /* 1 */ + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... BZ @ 50:4-148 | ^^^ BZ @ 123:0-3 51 font-feature-settings: var(--default-mono-font-feature-settings, normal); | 124 font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BE @ 51:4-76 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BE @ 124:2-78 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CA @ 51:4-76 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CA @ 124:2-78 52 font-variation-settings: var(--default-mono-font-variation-settings, normal); | 125 font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BF @ 52:4-80 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... BF @ 125:2-82 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CB @ 52:4-80 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CB @ 125:2-82 53 font-size: 1em; | 126 font-size: 1em; /* 4 */ - ^^^^^^^^^^^^^^ BG @ 53:4-18 | ^^^^^^^^^^^^^^ BG @ 126:2-16 + ^^^^^^^^^^^^^^ CC @ 53:4-18 | ^^^^^^^^^^^^^^ CC @ 126:2-16 | 127 } 54 } | - 55 small { | 134 font-size: 80%; - ^^^^^^ BH @ 55:2-8 | ^^^^^^^^^^^^^^ BH @ 134:2-16 + 55 small { | 133 small { + ^^^^^^ CD @ 55:2-8 | ^^^^^^ CD @ 133:0-6 + 56 font-size: 80%; | 134 font-size: 80%; + ^^^^^^^^^^^^^^ CE @ 56:4-18 | ^^^^^^^^^^^^^^ CE @ 134:2-16 | 135 } - 56 font-size: 80%; | - ^^^^^^^^^^^^^^ BH @ 56:4-18 | 57 } | - 58 sub, sup { | 143 font-size: 75%; - ^^^^^^^^^ BI @ 58:2-11 | ^^^^^^^^^^^^^^ BI @ 143:2-16 - 59 font-size: 75%; | - ^^^^^^^^^^^^^^ BI @ 59:4-18 | + 58 sub, sup { | 141 sub, + ^ CF @ 58:2 | ^ CF @ 141:0 + 58 sub, sup { | 142 sup { + ^^^^^^^^^ CG @ 58:2-11 | ^^^^ CG @ 142:0-4 + 59 font-size: 75%; | 143 font-size: 75%; + ^^^^^^^^^^^^^^ CH @ 59:4-18 | ^^^^^^^^^^^^^^ CH @ 143:2-16 60 line-height: 0; | 144 line-height: 0; - ^^^^^^^^^^^^^^ BJ @ 60:4-18 | ^^^^^^^^^^^^^^ BJ @ 144:2-16 + ^^^^^^^^^^^^^^ CI @ 60:4-18 | ^^^^^^^^^^^^^^ CI @ 144:2-16 61 position: relative; | 145 position: relative; - ^^^^^^^^^^^^^^^^^^ BK @ 61:4-22 | ^^^^^^^^^^^^^^^^^^ BK @ 145:2-20 + ^^^^^^^^^^^^^^^^^^ CJ @ 61:4-22 | ^^^^^^^^^^^^^^^^^^ CJ @ 145:2-20 62 vertical-align: baseline; | 146 vertical-align: baseline; - ^^^^^^^^^^^^^^^^^^^^^^^^ BL @ 62:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ BL @ 146:2-26 + ^^^^^^^^^^^^^^^^^^^^^^^^ CK @ 62:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ CK @ 146:2-26 | 147 } 63 } | - | 149 sub { - 64 sub { | 150 bottom: -0.25em; - ^^^^ BM @ 64:2-6 | ^^^^^^^^^^^^^^^ BM @ 150:2-17 + 64 sub { | 149 sub { + ^^^^ CL @ 64:2-6 | ^^^^ CL @ 149:0-4 + 65 bottom: -0.25em; | 150 bottom: -0.25em; + ^^^^^^^^^^^^^^^ CM @ 65:4-19 | ^^^^^^^^^^^^^^^ CM @ 150:2-17 | 151 } - 65 bottom: -0.25em; | - ^^^^^^^^^^^^^^^ BM @ 65:4-19 | 66 } | - | 153 sup { - 67 sup { | 154 top: -0.5em; - ^^^^ BN @ 67:2-6 | ^^^^^^^^^^^ BN @ 154:2-13 + 67 sup { | 153 sup { + ^^^^ CN @ 67:2-6 | ^^^^ CN @ 153:0-4 + 68 top: -0.5em; | 154 top: -0.5em; + ^^^^^^^^^^^ CO @ 68:4-15 | ^^^^^^^^^^^ CO @ 154:2-13 | 155 } - 68 top: -0.5em; | - ^^^^^^^^^^^ BN @ 68:4-15 | 69 } | - 70 table { | 164 text-indent: 0; /* 1 */ - ^^^^^^ BO @ 70:2-8 | ^^^^^^^^^^^^^^ BO @ 164:2-16 - 71 text-indent: 0; | - ^^^^^^^^^^^^^^ BO @ 71:4-18 | + 70 table { | 163 table { + ^^^^^^ CP @ 70:2-8 | ^^^^^^ CP @ 163:0-6 + 71 text-indent: 0; | 164 text-indent: 0; /* 1 */ + ^^^^^^^^^^^^^^ CQ @ 71:4-18 | ^^^^^^^^^^^^^^ CQ @ 164:2-16 72 border-color: inherit; | 165 border-color: inherit; /* 2 */ - ^^^^^^^^^^^^^^^^^^^^^ BP @ 72:4-25 | ^^^^^^^^^^^^^^^^^^^^^ BP @ 165:2-23 + ^^^^^^^^^^^^^^^^^^^^^ CR @ 72:4-25 | ^^^^^^^^^^^^^^^^^^^^^ CR @ 165:2-23 73 border-collapse: collapse; | 166 border-collapse: collapse; /* 3 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^ BQ @ 73:4-29 | ^^^^^^^^^^^^^^^^^^^^^^^^^ BQ @ 166:2-27 + ^^^^^^^^^^^^^^^^^^^^^^^^^ CS @ 73:4-29 | ^^^^^^^^^^^^^^^^^^^^^^^^^ CS @ 166:2-27 | 167 } 74 } | - 75 :-moz-focusring { | 174 outline: auto; - ^^^^^^^^^^^^^^^^ BR @ 75:2-18 | ^^^^^^^^^^^^^ BR @ 174:2-15 + 75 :-moz-focusring { | 173 :-moz-focusring { + ^^^^^^^^^^^^^^^^ CT @ 75:2-18 | ^^^^^^^^^^^^^^^^ CT @ 173:0-16 + 76 outline: auto; | 174 outline: auto; + ^^^^^^^^^^^^^ CU @ 76:4-17 | ^^^^^^^^^^^^^ CU @ 174:2-15 | 175 } - 76 outline: auto; | - ^^^^^^^^^^^^^ BR @ 76:4-17 | 77 } | - 78 progress { | 182 vertical-align: baseline; - ^^^^^^^^^ BS @ 78:2-11 | ^^^^^^^^^^^^^^^^^^^^^^^^ BS @ 182:2-26 + 78 progress { | 181 progress { + ^^^^^^^^^ CV @ 78:2-11 | ^^^^^^^^^ CV @ 181:0-9 + 79 vertical-align: baseline; | 182 vertical-align: baseline; + ^^^^^^^^^^^^^^^^^^^^^^^^ CW @ 79:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ CW @ 182:2-26 | 183 } - 79 vertical-align: baseline; | - ^^^^^^^^^^^^^^^^^^^^^^^^ BS @ 79:4-28 | 80 } | - 81 summary { | 190 display: list-item; - ^^^^^^^^ BT @ 81:2-10 | ^^^^^^^^^^^^^^^^^^ BT @ 190:2-20 + 81 summary { | 189 summary { + ^^^^^^^^ CX @ 81:2-10 | ^^^^^^^^ CX @ 189:0-8 + 82 display: list-item; | 190 display: list-item; + ^^^^^^^^^^^^^^^^^^ CY @ 82:4-22 | ^^^^^^^^^^^^^^^^^^ CY @ 190:2-20 | 191 } - 82 display: list-item; | - ^^^^^^^^^^^^^^^^^^ BT @ 82:4-22 | 83 } | - 84 ol, ul, menu { | 200 list-style: none; - ^^^^^^^^^^^^^ BU @ 84:2-15 | ^^^^^^^^^^^^^^^^ BU @ 200:2-18 + 84 ol, ul, menu { | 197 ol, + ^ CZ @ 84:2 | ^ CZ @ 197:0 + 84 ol, ul, menu { | 198 ul, + ^ DA @ 84:2 | ^ DA @ 198:0 + 84 ol, ul, menu { | 199 menu { + ^^^^^^^^^^^^^ DB @ 84:2-15 | ^^^^^ DB @ 199:0-5 + 85 list-style: none; | 200 list-style: none; + ^^^^^^^^^^^^^^^^ DC @ 85:4-20 | ^^^^^^^^^^^^^^^^ DC @ 200:2-18 | 201 } - 85 list-style: none; | - ^^^^^^^^^^^^^^^^ BU @ 85:4-20 | 86 } | - 87 img, svg, video, canvas, audio, iframe, embed, object { | 217 display: block; /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BV @ 87:2-56 | ^^^^^^^^^^^^^^ BV @ 217:2-16 - 88 display: block; | - ^^^^^^^^^^^^^^ BV @ 88:4-18 | + 87 img, svg, video, canvas, audio, iframe, embed, object { | 209 img, + ^ DD @ 87:2 | ^ DD @ 209:0 + 87 img, svg, video, canvas, audio, iframe, embed, object { | 210 svg, + ^ DE @ 87:2 | ^ DE @ 210:0 + 87 img, svg, video, canvas, audio, iframe, embed, object { | 211 video, + ^ DF @ 87:2 | ^ DF @ 211:0 + 87 img, svg, video, canvas, audio, iframe, embed, object { | 212 canvas, + ^ DG @ 87:2 | ^ DG @ 212:0 + 87 img, svg, video, canvas, audio, iframe, embed, object { | 213 audio, + ^ DH @ 87:2 | ^ DH @ 213:0 + 87 img, svg, video, canvas, audio, iframe, embed, object { | 214 iframe, + ^ DI @ 87:2 | ^ DI @ 214:0 + 87 img, svg, video, canvas, audio, iframe, embed, object { | 215 embed, + ^ DJ @ 87:2 | ^ DJ @ 215:0 + 87 img, svg, video, canvas, audio, iframe, embed, object { | 216 object { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DK @ 87:2-56 | ^^^^^^^ DK @ 216:0-7 + 88 display: block; | 217 display: block; /* 1 */ + ^^^^^^^^^^^^^^ DL @ 88:4-18 | ^^^^^^^^^^^^^^ DL @ 217:2-16 89 vertical-align: middle; | 218 vertical-align: middle; /* 2 */ - ^^^^^^^^^^^^^^^^^^^^^^ BW @ 89:4-26 | ^^^^^^^^^^^^^^^^^^^^^^ BW @ 218:2-24 + ^^^^^^^^^^^^^^^^^^^^^^ DM @ 89:4-26 | ^^^^^^^^^^^^^^^^^^^^^^ DM @ 218:2-24 | 219 } 90 } | - 91 img, video { | 227 max-width: 100%; - ^^^^^^^^^^^ BX @ 91:2-13 | ^^^^^^^^^^^^^^^ BX @ 227:2-17 - 92 max-width: 100%; | - ^^^^^^^^^^^^^^^ BX @ 92:4-19 | + 91 img, video { | 225 img, + ^ DN @ 91:2 | ^ DN @ 225:0 + 91 img, video { | 226 video { + ^^^^^^^^^^^ DO @ 91:2-13 | ^^^^^^ DO @ 226:0-6 + 92 max-width: 100%; | 227 max-width: 100%; + ^^^^^^^^^^^^^^^ DP @ 92:4-19 | ^^^^^^^^^^^^^^^ DP @ 227:2-17 93 height: auto; | 228 height: auto; - ^^^^^^^^^^^^ BY @ 93:4-16 | ^^^^^^^^^^^^ BY @ 228:2-14 + ^^^^^^^^^^^^ DQ @ 93:4-16 | ^^^^^^^^^^^^ DQ @ 228:2-14 | 229 } 94 } | - 95 button, input, select, optgroup, textarea, ::file-selector-button { | 244 font: inherit; /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BZ @ 95:2-68 | ^^^^^^^^^^^^^ BZ @ 244:2-15 - 96 font: inherit; | - ^^^^^^^^^^^^^ BZ @ 96:4-17 | + 95 button, input, select, optgroup, textarea, ::file-selector-button { | 238 button, + ^ DR @ 95:2 | ^ DR @ 238:0 + 95 button, input, select, optgroup, textarea, ::file-selector-button { | 239 input, + ^ DS @ 95:2 | ^ DS @ 239:0 + 95 button, input, select, optgroup, textarea, ::file-selector-button { | 240 select, + ^ DT @ 95:2 | ^ DT @ 240:0 + 95 button, input, select, optgroup, textarea, ::file-selector-button { | 241 optgroup, + ^ DU @ 95:2 | ^ DU @ 241:0 + 95 button, input, select, optgroup, textarea, ::file-selector-button { | 242 textarea, + ^ DV @ 95:2 | ^ DV @ 242:0 + 95 button, input, select, optgroup, textarea, ::file-selector-button { | 243 ::file-selector-button { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DW @ 95:2-68 | ^^^^^^^^^^^^^^^^^^^^^^^ DW @ 243:0-23 + 96 font: inherit; | 244 font: inherit; /* 1 */ + ^^^^^^^^^^^^^ DX @ 96:4-17 | ^^^^^^^^^^^^^ DX @ 244:2-15 97 font-feature-settings: inherit; | 245 font-feature-settings: inherit; /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CA @ 97:4-34 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CA @ 245:2-32 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DY @ 97:4-34 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DY @ 245:2-32 98 font-variation-settings: inherit; | 246 font-variation-settings: inherit; /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CB @ 98:4-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CB @ 246:2-34 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DZ @ 98:4-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DZ @ 246:2-34 99 letter-spacing: inherit; | 247 letter-spacing: inherit; /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^^ CC @ 99:4-27 | ^^^^^^^^^^^^^^^^^^^^^^^ CC @ 247:2-25 + ^^^^^^^^^^^^^^^^^^^^^^^ EA @ 99:4-27 | ^^^^^^^^^^^^^^^^^^^^^^^ EA @ 247:2-25 100 color: inherit; | 248 color: inherit; /* 1 */ - ^^^^^^^^^^^^^^ CD @ 100:4-18 | ^^^^^^^^^^^^^^ CD @ 248:2-16 + ^^^^^^^^^^^^^^ EB @ 100:4-18 | ^^^^^^^^^^^^^^ EB @ 248:2-16 101 border-radius: 0; | 249 border-radius: 0; /* 2 */ - ^^^^^^^^^^^^^^^^ CE @ 101:4-20 | ^^^^^^^^^^^^^^^^ CE @ 249:2-18 + ^^^^^^^^^^^^^^^^ EC @ 101:4-20 | ^^^^^^^^^^^^^^^^ EC @ 249:2-18 102 background-color: transparent; | 250 background-color: transparent; /* 3 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CF @ 102:4-33 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CF @ 250:2-31 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ED @ 102:4-33 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ED @ 250:2-31 103 opacity: 1; | 251 opacity: 1; /* 4 */ - ^^^^^^^^^^ CG @ 103:4-14 | ^^^^^^^^^^ CG @ 251:2-12 + ^^^^^^^^^^ EE @ 103:4-14 | ^^^^^^^^^^ EE @ 251:2-12 | 252 } 104 } | - 105 :where(select:is([multiple], [size])) optgroup { | 259 font-weight: bolder; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CH @ 105:2-49 | ^^^^^^^^^^^^^^^^^^^ CH @ 259:2-21 + 105 :where(select:is([multiple], [size])) optgroup { | 258 :where(select:is([multiple], [size])) optgroup { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EF @ 105:2-49 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EF @ 258:0-47 + 106 font-weight: bolder; | 259 font-weight: bolder; + ^^^^^^^^^^^^^^^^^^^ EG @ 106:4-23 | ^^^^^^^^^^^^^^^^^^^ EG @ 259:2-21 | 260 } - 106 font-weight: bolder; | - ^^^^^^^^^^^^^^^^^^^ CH @ 106:4-23 | 107 } | - 108 :where(select:is([multiple], [size])) optgroup option { | 267 padding-inline-start: 20px; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CI @ 108:2-56 | ^^^^^^^^^^^^^^^^^^^^^^^^^^ CI @ 267:2-28 + 108 :where(select:is([multiple], [size])) optgroup option { | 266 :where(select:is([multiple], [size])) optgroup option { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EH @ 108:2-56 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EH @ 266:0-54 + 109 padding-inline-start: 20px; | 267 padding-inline-start: 20px; + ^^^^^^^^^^^^^^^^^^^^^^^^^^ EI @ 109:4-30 | ^^^^^^^^^^^^^^^^^^^^^^^^^^ EI @ 267:2-28 | 268 } - 109 padding-inline-start: 20px; | - ^^^^^^^^^^^^^^^^^^^^^^^^^^ CI @ 109:4-30 | 110 } | - 111 ::file-selector-button { | 275 margin-inline-end: 4px; - ^^^^^^^^^^^^^^^^^^^^^^^ CJ @ 111:2-25 | ^^^^^^^^^^^^^^^^^^^^^^ CJ @ 275:2-24 + 111 ::file-selector-button { | 274 ::file-selector-button { + ^^^^^^^^^^^^^^^^^^^^^^^ EJ @ 111:2-25 | ^^^^^^^^^^^^^^^^^^^^^^^ EJ @ 274:0-23 + 112 margin-inline-end: 4px; | 275 margin-inline-end: 4px; + ^^^^^^^^^^^^^^^^^^^^^^ EK @ 112:4-26 | ^^^^^^^^^^^^^^^^^^^^^^ EK @ 275:2-24 | 276 } - 112 margin-inline-end: 4px; | - ^^^^^^^^^^^^^^^^^^^^^^ CJ @ 112:4-26 | 113 } | - 114 ::placeholder { | 283 opacity: 1; - ^^^^^^^^^^^^^^ CK @ 114:2-16 | ^^^^^^^^^^ CK @ 283:2-12 + 114 ::placeholder { | 282 ::placeholder { + ^^^^^^^^^^^^^^ EL @ 114:2-16 | ^^^^^^^^^^^^^^ EL @ 282:0-14 + 115 opacity: 1; | 283 opacity: 1; + ^^^^^^^^^^ EM @ 115:4-14 | ^^^^^^^^^^ EM @ 283:2-12 | 284 } - 115 opacity: 1; | - ^^^^^^^^^^ CK @ 115:4-14 | 116 } | 117 @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { | 291 @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or - ^ CL @ 117:2 | ^ CL @ 291:0 + ^ EN @ 117:2 | ^ EN @ 291:0 117 @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { | 292 (contain-intrinsic-size: 1px) /* Safari 17+ */ { - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CM @ 117:2-92 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CM @ 292:0-49 - | 293 ::placeholder { - 118 ::placeholder { | 294 color: color-mix(in oklab, currentcolor 50%, transparent); - ^^^^^^^^^^^^^^ CN @ 118:4-18 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CN @ 294:4-61 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... EO @ 117:2-92 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EO @ 292:0-49 + 118 ::placeholder { | 293 ::placeholder { + ^^^^^^^^^^^^^^ EP @ 118:4-18 | ^^^^^^^^^^^^^^ EP @ 293:2-16 + 119 color: currentcolor; | 294 color: color-mix(in oklab, currentcolor 50%, transparent); + ^^^^^^^^^^^^^^^^^^^ EQ @ 119:6-25 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EQ @ 294:4-61 | 295 } | 296 } - 119 color: currentcolor; | - ^^^^^^^^^^^^^^^^^^^ CN @ 119:6-25 | 120 } | 121 @supports (color: color-mix(in lab, red, red)) { | - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CN @ 121:4-51 | + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EQ @ 121:4-51 | 122 ::placeholder { | - ^^^^^^^^^^^^^^ CN @ 122:6-20 | + ^^^^^^^^^^^^^^ EP @ 122:6-20 | 123 color: color-mix(in oklab, currentcolor 50%, transparent); | - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CN @ 123:8-65 | + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EQ @ 123:8-65 | 124 } | 125 } | 126 } | - 127 textarea { | 303 resize: vertical; - ^^^^^^^^^ CO @ 127:2-11 | ^^^^^^^^^^^^^^^^ CO @ 303:2-18 + 127 textarea { | 302 textarea { + ^^^^^^^^^ ER @ 127:2-11 | ^^^^^^^^^ ER @ 302:0-9 + 128 resize: vertical; | 303 resize: vertical; + ^^^^^^^^^^^^^^^^ ES @ 128:4-20 | ^^^^^^^^^^^^^^^^ ES @ 303:2-18 | 304 } - 128 resize: vertical; | - ^^^^^^^^^^^^^^^^ CO @ 128:4-20 | 129 } | - 130 ::-webkit-search-decoration { | 311 -webkit-appearance: none; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CP @ 130:2-30 | ^^^^^^^^^^^^^^^^^^^^^^^^ CP @ 311:2-26 + 130 ::-webkit-search-decoration { | 310 ::-webkit-search-decoration { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ET @ 130:2-30 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ET @ 310:0-28 + 131 -webkit-appearance: none; | 311 -webkit-appearance: none; + ^^^^^^^^^^^^^^^^^^^^^^^^ EU @ 131:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ EU @ 311:2-26 | 312 } - 131 -webkit-appearance: none; | - ^^^^^^^^^^^^^^^^^^^^^^^^ CP @ 131:4-28 | 132 } | - 133 ::-webkit-date-and-time-value { | 320 min-height: 1lh; /* 1 */ - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CQ @ 133:2-32 | ^^^^^^^^^^^^^^^ CQ @ 320:2-17 - 134 min-height: 1lh; | - ^^^^^^^^^^^^^^^ CQ @ 134:4-19 | + 133 ::-webkit-date-and-time-value { | 319 ::-webkit-date-and-time-value { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EV @ 133:2-32 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EV @ 319:0-30 + 134 min-height: 1lh; | 320 min-height: 1lh; /* 1 */ + ^^^^^^^^^^^^^^^ EW @ 134:4-19 | ^^^^^^^^^^^^^^^ EW @ 320:2-17 135 text-align: inherit; | 321 text-align: inherit; /* 2 */ - ^^^^^^^^^^^^^^^^^^^ CR @ 135:4-23 | ^^^^^^^^^^^^^^^^^^^ CR @ 321:2-21 + ^^^^^^^^^^^^^^^^^^^ EX @ 135:4-23 | ^^^^^^^^^^^^^^^^^^^ EX @ 321:2-21 | 322 } 136 } | - 137 ::-webkit-datetime-edit { | 329 display: inline-flex; - ^^^^^^^^^^^^^^^^^^^^^^^^ CS @ 137:2-26 | ^^^^^^^^^^^^^^^^^^^^ CS @ 329:2-22 + 137 ::-webkit-datetime-edit { | 328 ::-webkit-datetime-edit { + ^^^^^^^^^^^^^^^^^^^^^^^^ EY @ 137:2-26 | ^^^^^^^^^^^^^^^^^^^^^^^^ EY @ 328:0-24 + 138 display: inline-flex; | 329 display: inline-flex; + ^^^^^^^^^^^^^^^^^^^^ EZ @ 138:4-24 | ^^^^^^^^^^^^^^^^^^^^ EZ @ 329:2-22 | 330 } - 138 display: inline-flex; | - ^^^^^^^^^^^^^^^^^^^^ CS @ 138:4-24 | 139 } | - 140 ::-webkit-datetime-edit-fields-wrapper { | 337 padding: 0; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CT @ 140:2-41 | ^^^^^^^^^^ CT @ 337:2-12 + 140 ::-webkit-datetime-edit-fields-wrapper { | 336 ::-webkit-datetime-edit-fields-wrapper { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FA @ 140:2-41 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FA @ 336:0-39 + 141 padding: 0; | 337 padding: 0; + ^^^^^^^^^^ FB @ 141:4-14 | ^^^^^^^^^^ FB @ 337:2-12 | 338 } - 141 padding: 0; | - ^^^^^^^^^^ CT @ 141:4-14 | 142 } | - 143 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 349 padding-block: 0; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CU @ 143:2-329 | ^^^^^^^^^^^^^^^^ CU @ 349:2-18 + 143 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 340 ::-webkit-datetime-edit, + ^ FC @ 143:2 | ^ FC @ 340:0 + 143 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 341 ::-webkit-datetime-edit-year-field, + ^ FD @ 143:2 | ^ FD @ 341:0 + 143 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 342 ::-webkit-datetime-edit-month-field, + ^ FE @ 143:2 | ^ FE @ 342:0 + 143 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 343 ::-webkit-datetime-edit-day-field, + ^ FF @ 143:2 | ^ FF @ 343:0 + 143 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 344 ::-webkit-datetime-edit-hour-field, + ^ FG @ 143:2 | ^ FG @ 344:0 + 143 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 345 ::-webkit-datetime-edit-minute-field, + ^ FH @ 143:2 | ^ FH @ 345:0 + 143 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 346 ::-webkit-datetime-edit-second-field, + ^ FI @ 143:2 | ^ FI @ 346:0 + 143 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 347 ::-webkit-datetime-edit-millisecond-field, + ^ FJ @ 143:2 | ^ FJ @ 347:0 + 143 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 348 ::-webkit-datetime-edit-meridiem-field { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... FK @ 143:2-329 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FK @ 348:0-39 + 144 padding-block: 0; | 349 padding-block: 0; + ^^^^^^^^^^^^^^^^ FL @ 144:4-20 | ^^^^^^^^^^^^^^^^ FL @ 349:2-18 | 350 } - 144 padding-block: 0; | - ^^^^^^^^^^^^^^^^ CU @ 144:4-20 | 145 } | - 146 ::-webkit-calendar-picker-indicator { | 357 line-height: 1; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CV @ 146:2-38 | ^^^^^^^^^^^^^^ CV @ 357:2-16 + 146 ::-webkit-calendar-picker-indicator { | 356 ::-webkit-calendar-picker-indicator { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FM @ 146:2-38 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FM @ 356:0-36 + 147 line-height: 1; | 357 line-height: 1; + ^^^^^^^^^^^^^^ FN @ 147:4-18 | ^^^^^^^^^^^^^^ FN @ 357:2-16 | 358 } - 147 line-height: 1; | - ^^^^^^^^^^^^^^ CV @ 147:4-18 | 148 } | - 149 :-moz-ui-invalid { | 365 box-shadow: none; - ^^^^^^^^^^^^^^^^^ CW @ 149:2-19 | ^^^^^^^^^^^^^^^^ CW @ 365:2-18 + 149 :-moz-ui-invalid { | 364 :-moz-ui-invalid { + ^^^^^^^^^^^^^^^^^ FO @ 149:2-19 | ^^^^^^^^^^^^^^^^^ FO @ 364:0-17 + 150 box-shadow: none; | 365 box-shadow: none; + ^^^^^^^^^^^^^^^^ FP @ 150:4-20 | ^^^^^^^^^^^^^^^^ FP @ 365:2-18 | 366 } - 150 box-shadow: none; | - ^^^^^^^^^^^^^^^^ CW @ 150:4-20 | 151 } | - 152 button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 375 appearance: button; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CX @ 152:2-96 | ^^^^^^^^^^^^^^^^^^ CX @ 375:2-20 + 152 button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 372 button, + ^ FQ @ 152:2 | ^ FQ @ 372:0 + 152 button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 373 input:where([type='button'], [type='reset'], [type='submit']), + ^ FR @ 152:2 | ^ FR @ 373:0 + 152 button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 374 ::file-selector-button { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... FS @ 152:2-96 | ^^^^^^^^^^^^^^^^^^^^^^^ FS @ 374:0-23 + 153 appearance: button; | 375 appearance: button; + ^^^^^^^^^^^^^^^^^^ FT @ 153:4-22 | ^^^^^^^^^^^^^^^^^^ FT @ 375:2-20 | 376 } - 153 appearance: button; | - ^^^^^^^^^^^^^^^^^^ CX @ 153:4-22 | 154 } | - 155 ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { | 384 height: auto; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CY @ 155:2-59 | ^^^^^^^^^^^^ CY @ 384:2-14 + 155 ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { | 382 ::-webkit-inner-spin-button, + ^ FU @ 155:2 | ^ FU @ 382:0 + 155 ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { | 383 ::-webkit-outer-spin-button { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FV @ 155:2-59 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FV @ 383:0-28 + 156 height: auto; | 384 height: auto; + ^^^^^^^^^^^^ FW @ 156:4-16 | ^^^^^^^^^^^^ FW @ 384:2-14 | 385 } - 156 height: auto; | - ^^^^^^^^^^^^ CY @ 156:4-16 | 157 } | - 158 [hidden]:where(:not([hidden='until-found'])) { | 392 display: none !important; - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CZ @ 158:2-47 | ^^^^^^^^^^^^^^^^^^^^^^^^ CZ @ 392:2-26 + 158 [hidden]:where(:not([hidden='until-found'])) { | 391 [hidden]:where(:not([hidden='until-found'])) { + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FX @ 158:2-47 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FX @ 391:0-45 + 159 display: none !important; | 392 display: none !important; + ^^^^^^^^^^^^^^^^^^^^^^^^ FY @ 159:4-28 | ^^^^^^^^^^^^^^^^^^^^^^^^ FY @ 392:2-26 | 393 } - 159 display: none !important; | - ^^^^^^^^^^^^^^^^^^^^^^^^ CZ @ 159:4-28 | 160 } | 161 } | | --- index.css --- 162 @layer utilities; | 5 @import './utilities.css' layer(utilities); - ^^^^^^^^^^^^^^^^ DA @ 162:0-16 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DA @ 5:0-42 + ^^^^^^^^^^^^^^^^ FZ @ 162:0-16 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FZ @ 5:0-42 | --- input.css --- - 163 .foo { | 4 @apply underline; - ^^^^^ DB @ 163:0-5 | ^^^^^^^^^ DB @ 4:9-18 + 163 .foo { | 3 .foo { + ^^^^^ GA @ 163:0-5 | ^^^^^ GA @ 3:0-5 + 164 text-decoration-line: underline; | 4 @apply underline; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GB @ 164:2-33 | ^^^^^^^^^ GB @ 4:9-18 | 5 } - 164 text-decoration-line: underline; | - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DB @ 164:2-33 | 165 } | 166 | " @@ -563,12 +618,12 @@ test('source maps are generated for utilities', async ({ expect }) => { 2 display: flex; | ^^^^^^^^^^^^^ A @ 2:2-15 | 3 } | + 4 .custom { | + ^^^^^^^^ A @ 4:0-8 | | --- input.css --- - 4 .custom { | 4 color: orange; - ^^^^^^^^ B @ 4:0-8 | ^^^^^^^^^^^^^ B @ 4:2-15 + 5 color: orange; | 4 color: orange; + ^^^^^^^^^^^^^ B @ 5:2-15 | ^^^^^^^^^^^^^ B @ 4:2-15 | 5 } - 5 color: orange; | - ^^^^^^^^^^^^^ B @ 5:2-15 | 6 } | 7 .custom-js { | ^^^^^^^^^^^ A @ 7:0-11 | @@ -637,29 +692,29 @@ test('@apply generates source maps', async ({ expect }) => { " output.css | input.css | - 1 .foo { | 2 color: blue; - ^^^^^ A @ 1:0-5 | ^^^^^^^^^^^ A @ 2:2-13 - 2 color: blue; | - ^^^^^^^^^^^ A @ 2:2-13 | + 1 .foo { | 1 .foo { + ^^^^^ A @ 1:0-5 | ^^^^^ A @ 1:0-5 + 2 color: blue; | 2 color: blue; + ^^^^^^^^^^^ B @ 2:2-13 | ^^^^^^^^^^^ B @ 2:2-13 3 color: #000; | 3 @apply text-[#000] hover:text-[#f00]; - ^^^^^^^^^^^ B @ 3:2-13 | ^^^^^^^^^^^ B @ 3:9-20 + ^^^^^^^^^^^ C @ 3:2-13 | ^^^^^^^^^^^ C @ 3:9-20 4 } | 5 @media (hover: hover) { | 3 @apply text-[#000] hover:text-[#f00]; - ^^^^^^^^^^^^^^^^^^^^^^ C @ 5:0-22 | ^^^^^^^^^^^^^^^^^ C @ 3:21-38 + ^^^^^^^^^^^^^^^^^^^^^^ D @ 5:0-22 | ^^^^^^^^^^^^^^^^^ D @ 3:21-38 6 .foo:hover { | - ^^^^^^^^^^^ C @ 6:2-13 | + ^^^^^^^^^^^ D @ 6:2-13 | 7 color: #f00; | - ^^^^^^^^^^^ C @ 7:4-15 | + ^^^^^^^^^^^ D @ 7:4-15 | 8 } | 9 } | - 10 .foo { | 4 @apply underline; - ^^^^^ D @ 10:0-5 | ^^^^^^^^^ D @ 4:9-18 - 11 text-decoration-line: underline; | - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ D @ 11:2-33 | + 10 .foo { | + ^^^^^ A @ 10:0-5 | + 11 text-decoration-line: underline; | 4 @apply underline; + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ E @ 11:2-33 | ^^^^^^^^^ E @ 4:9-18 12 @apply --my-mixin-1 --my-mixin-2(); | 5 @apply --my-mixin-1 --my-mixin-2(); - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ E @ 12:2-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ E @ 5:2-36 + ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ F @ 12:2-36 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ F @ 5:2-36 13 color: red; | 6 color: red; - ^^^^^^^^^^ F @ 13:2-12 | ^^^^^^^^^^ F @ 6:2-12 + ^^^^^^^^^^ G @ 13:2-12 | ^^^^^^^^^^ G @ 6:2-12 | 7 } 14 } | 15 | @@ -688,49 +743,43 @@ test('@variant generates source maps', async ({ expect }) => { expect(annotations).toMatchInlineSnapshot(` " - output.css | input.css - | - 1 .foo { | 2 color: red; - ^^^^^ A @ 1:0-5 | ^^^^^^^^^^ A @ 2:2-12 - 2 color: red; | - ^^^^^^^^^^ A @ 2:2-12 | - 3 } | - | 4 @variant data-a, data-b:data-c { - 4 .foo[data-a] { | 5 color: green; - ^^^^^^^^^^^^^ B @ 4:0-13 | ^^^^^^^^^^^^ B @ 5:4-16 - 5 color: green; | - ^^^^^^^^^^^^ B @ 5:2-14 | - 6 } | - | 7 @variant data-d, data-e:data-f { - 7 :is(.foo[data-a])[data-d] { | 8 color: blue; - ^^^^^^^^^^^^^^^^^^^^^^^^^^ C @ 7:0-26 | ^^^^^^^^^^^ C @ 8:6-17 - | 9 } - | 10 } - | 11 } - 8 color: blue; | - ^^^^^^^^^^^ C @ 8:2-13 | - 9 } | - 10 :is(:is(.foo[data-a])[data-e])[data-f] { | - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ C @ 10:0-39 | - 11 color: blue; | - ^^^^^^^^^^^ C @ 11:2-13 | - 12 } | - 13 :is(.foo[data-b])[data-c] { | - ^^^^^^^^^^^^^^^^^^^^^^^^^^ B @ 13:0-26 | - 14 color: green; | - ^^^^^^^^^^^^ B @ 14:2-14 | - 15 } | - 16 :is(:is(.foo[data-b])[data-c])[data-d] { | - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ C @ 16:0-39 | - 17 color: blue; | - ^^^^^^^^^^^ C @ 17:2-13 | - 18 } | - 19 :is(:is(:is(.foo[data-b])[data-c])[data-e])[data-f] { | - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ C @ 19:0-52 | - 20 color: blue; | - ^^^^^^^^^^^ C @ 20:2-13 | - 21 } | - 22 | + output.css | input.css + | + 1 .foo { | 1 .foo { + ^^^^^ A @ 1:0-5 | ^^^^^ A @ 1:0-5 + 2 color: red; | 2 color: red; + ^^^^^^^^^^ B @ 2:2-12 | ^^^^^^^^^^ B @ 2:2-12 + 3 } | + 4 .foo[data-a] { | + | 4 @variant data-a, data-b:data-c { + 5 color: green; | 5 color: green; + ^^^^^^^^^^^^ C @ 5:2-14 | ^^^^^^^^^^^^ C @ 5:4-16 + 6 } | + 7 :is(.foo[data-a])[data-... | + | 7 @variant data-d, data-e:data-f { + 8 color: blue; | 8 color: blue; + ^^^^^^^^^^^ D @ 8:2-13 | ^^^^^^^^^^^ D @ 8:6-17 + | 9 } + | 10 } + | 11 } + 9 } | + 10 :is(:is(.foo[data-a])[d... | + 11 color: blue; | + ^^^^^^^^^^^ D @ 11:2-13 | + 12 } | + 13 :is(.foo[data-b])[data-... | + 14 color: green; | + ^^^^^^^^^^^^ C @ 14:2-14 | + 15 } | + 16 :is(:is(.foo[data-b])[d... | + 17 color: blue; | + ^^^^^^^^^^^ D @ 17:2-13 | + 18 } | + 19 :is(:is(:is(.foo[data-b... | + 20 color: blue; | + ^^^^^^^^^^^ D @ 20:2-13 | + 21 } | + 22 | " `) })