From 8eac8498737cbee3196e0c898f1f2a06e93fe88c Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 8 Mar 2024 22:55:47 +0100 Subject: [PATCH 01/18] ensure we don't crash on deleted files --- oxide/crates/core/src/lib.rs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/oxide/crates/core/src/lib.rs b/oxide/crates/core/src/lib.rs index 87327f39a164..6f04adae0a0c 100644 --- a/oxide/crates/core/src/lib.rs +++ b/oxide/crates/core/src/lib.rs @@ -433,9 +433,9 @@ fn read_all_files_sync(changed_content: Vec) -> Vec> { changed_content .into_iter() - .map(|c| match (c.file, c.content) { - (Some(file), None) => std::fs::read(file).unwrap(), - (None, Some(content)) => content.into_bytes(), + .filter_map(|c| match (c.file, c.content) { + (Some(file), None) => std::fs::read(file).ok(), + (None, Some(content)) => Some(content.into_bytes()), _ => Default::default(), }) .collect() From 98cd3bfde533921e27044ae4688589541e49b070 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 8 Mar 2024 23:36:10 +0100 Subject: [PATCH 02/18] change return type of `compile` to include a `rebuild()` function This will allow us in the future to perform incremental rebuilds after the initial rebuild. This is purely the API change so that we can prepare all the call sites to use this new API. --- .../src/commands/build/index.ts | 4 ++-- packages/@tailwindcss-postcss/src/index.ts | 4 ++-- packages/@tailwindcss-vite/src/index.ts | 2 +- packages/tailwindcss/src/index.ts | 17 +++++++++++++++-- packages/tailwindcss/src/test-utils/run.ts | 4 ++-- packages/tailwindcss/tests/ui.spec.ts | 2 +- 6 files changed, 23 insertions(+), 10 deletions(-) diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index f3627ff9144e..2ca1c1bd3b75 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -100,7 +100,7 @@ export async function handle(args: Result>) { ) // Compile the input - let result = compile(input, candidates) + let result = compile(input, candidates).css // Optimize the output if (args['--minify'] || args['--optimize']) { @@ -193,7 +193,7 @@ export async function handle(args: Result>) { } // Compile the input - let result = compile(input, candidates) + let result = compile(input, candidates).css // Optimize the output if (args['--minify'] || args['--optimize']) { diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 73621836de53..aea4840f28be 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -53,7 +53,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { // No `@tailwind` means we don't have to look for candidates if (!hasTailwind) { - replaceCss(compile(root.toString(), [])) + replaceCss(compile(root.toString(), []).css) return } @@ -83,7 +83,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { }) } - replaceCss(compile(root.toString(), candidates)) + replaceCss(compile(root.toString(), candidates).css) }, ], } diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 6842aa7de037..a6dfc0779156 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -63,7 +63,7 @@ export default function tailwindcss(): Plugin[] { } function generateCss(css: string) { - return compile(css, Array.from(candidates)) + return compile(css, Array.from(candidates)).css } function generateOptimizedCss(css: string) { diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index d066a5a1f335..2b1c8e9ff09e 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -6,7 +6,13 @@ import * as CSS from './css-parser' import { buildDesignSystem } from './design-system' import { Theme } from './theme' -export function compile(css: string, rawCandidates: string[]) { +export function compile( + css: string, + rawCandidates: string[], +): { + rebuild(candidates: string[]): string + css: string +} { let ast = CSS.parse(css) if (process.env.NODE_ENV !== 'test') { @@ -162,7 +168,14 @@ export function compile(css: string, rawCandidates: string[]) { }) } - return toCss(ast) + let compiledCss = toCss(ast) + + return { + rebuild(newRawCandidates: string[]) { + return compiledCss + }, + css: compiledCss, + } } export function optimizeCss( diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index 8df6feab2559..5ba052633f51 100644 --- a/packages/tailwindcss/src/test-utils/run.ts +++ b/packages/tailwindcss/src/test-utils/run.ts @@ -1,9 +1,9 @@ import { compile, optimizeCss } from '..' export function compileCss(css: string, candidates: string[] = []) { - return optimizeCss(compile(css, candidates)).trim() + return optimizeCss(compile(css, candidates).css).trim() } export function run(candidates: string[]) { - return optimizeCss(compile('@tailwind utilities;', candidates)).trim() + return optimizeCss(compile('@tailwind utilities;', candidates).css).trim() } diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts index 7a7f357b0fd1..3577a44e21dc 100644 --- a/packages/tailwindcss/tests/ui.spec.ts +++ b/packages/tailwindcss/tests/ui.spec.ts @@ -269,7 +269,7 @@ async function render(page: Page, content: string) { } `, scanFiles([{ content, extension: 'html' }], IO.Sequential | Parsing.Sequential), - ), + ).css, ), }) From 2820e70d04d74617db2cb007136bd6fcf8bf001c Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 8 Mar 2024 23:47:32 +0100 Subject: [PATCH 03/18] set `@tailwind utilities` nodes Instead of replacing the node that represents the `@tailwind utilities` with the generated AST nodes from the rawCandidates, we will set the nodes of the `@tailwind utilities` rule to the AST nodes instead. This way we dont' have to remove and replace the `@tailwind utilities` rule with `n` new nodes. This will later allow us to track the `@tailwindcss utilities` rule itself and update its `nodes` for incremental rebuilds. This also requires a small change to the printer where we now need to print the children of the `@tailwind utilities` rule. Note: we keep the same `depth` as-if the `@tailwindcss utilities` rule was not there. Otherwise additional indentation would be present. --- packages/tailwindcss/src/ast.ts | 7 +++++++ packages/tailwindcss/src/index.test.ts | 4 +--- packages/tailwindcss/src/index.ts | 6 ++++-- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index d316c541196e..dae7cf0e8893 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -105,6 +105,13 @@ export function toCss(ast: AstNode[]) { return css } + if (node.selector === '@tailwind utilities') { + for (let child of node.nodes) { + css += stringify(child, depth) + } + return css + } + // Print at-rules without nodes with a `;` instead of an empty block. // // E.g.: diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index cf7025102e5b..1488b4817747 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -93,9 +93,7 @@ describe('compiling CSS', () => { .grid { display: grid; - } - - @tailwind utilities;" + }" `) }) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 2b1c8e9ff09e..c05dea05e083 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -105,9 +105,11 @@ export function compile( // Find `@tailwind utilities` and replace it with the actual generated utility // class CSS. - walk(ast, (node, { replaceWith }) => { + walk(ast, (node) => { if (node.kind === 'rule' && node.selector === '@tailwind utilities') { - replaceWith(compileCandidates(rawCandidates, designSystem).astNodes) + // Set the `@tailwind utilities` nodes, to the actual generated CSS + node.nodes = compileCandidates(rawCandidates, designSystem).astNodes + // Stop walking after finding `@tailwind utilities` to avoid walking all // of the generated CSS. This means `@tailwind utilities` can only appear // once per file but that's the intended usage at this point in time. From a4c79211ffda17717a801a6607ddad2cae1067d3 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 9 Mar 2024 00:01:25 +0100 Subject: [PATCH 04/18] move sorting to the `ast.sort()` call This will allow us to keep sorting AST nodes in a single spot. --- .../src/__snapshots__/utilities.test.ts.snap | 472 ++--- packages/tailwindcss/src/compile.ts | 7 +- packages/tailwindcss/src/utilities.test.ts | 1596 ++++++++--------- packages/tailwindcss/src/variants.test.ts | 88 +- 4 files changed, 1081 insertions(+), 1082 deletions(-) diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 6e9d6e44a57a..92964aa6e348 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -13,26 +13,6 @@ exports[`border-* 1`] = ` border-width: 1px; } -.border-0 { - border-style: var(--tw-border-style); - border-width: 0; -} - -.border-123 { - border-style: var(--tw-border-style); - border-width: 123px; -} - -.border-2 { - border-style: var(--tw-border-style); - border-width: 2px; -} - -.border-4 { - border-style: var(--tw-border-style); - border-width: 4px; -} - .border-\\[12px\\] { border-style: var(--tw-border-style); border-width: 12px; @@ -58,12 +38,24 @@ exports[`border-* 1`] = ` border-width: thin; } -.border-\\[\\#0088cc\\] { - border-color: #08c; +.border-0 { + border-style: var(--tw-border-style); + border-width: 0; } -.border-\\[\\#0088cc\\]\\/50 { - border-color: #0088cc80; +.border-123 { + border-style: var(--tw-border-style); + border-width: 123px; +} + +.border-2 { + border-style: var(--tw-border-style); + border-width: 2px; +} + +.border-4 { + border-style: var(--tw-border-style); + border-width: 4px; } .border-\\[--my-color\\] { @@ -74,6 +66,14 @@ exports[`border-* 1`] = ` border-color: color-mix(in srgb, var(--my-color) 50%, transparent); } +.border-\\[\\#0088cc\\] { + border-color: #08c; +} + +.border-\\[\\#0088cc\\]\\/50 { + border-color: #0088cc80; +} + .border-\\[color\\:--my-color\\] { border-color: var(--my-color); } @@ -122,26 +122,6 @@ exports[`border-b-* 1`] = ` border-bottom-width: 1px; } -.border-b-0 { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 0; -} - -.border-b-123 { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 123px; -} - -.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-\\[12px\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: 12px; @@ -167,12 +147,24 @@ exports[`border-b-* 1`] = ` border-bottom-width: thin; } -.border-b-\\[\\#0088cc\\] { - border-bottom-color: #08c; +.border-b-0 { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 0; } -.border-b-\\[\\#0088cc\\]\\/50 { - border-bottom-color: #0088cc80; +.border-b-123 { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 123px; +} + +.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-\\[--my-color\\] { @@ -183,6 +175,14 @@ exports[`border-b-* 1`] = ` border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent); } +.border-b-\\[\\#0088cc\\] { + border-bottom-color: #08c; +} + +.border-b-\\[\\#0088cc\\]\\/50 { + border-bottom-color: #0088cc80; +} + .border-b-\\[color\\:--my-color\\] { border-bottom-color: var(--my-color); } @@ -231,26 +231,6 @@ exports[`border-e-* 1`] = ` border-inline-end-width: 1px; } -.border-e-0 { - border-inline-end-style: var(--tw-border-style); - border-inline-end-width: 0; -} - -.border-e-123 { - border-inline-end-style: var(--tw-border-style); - border-inline-end-width: 123px; -} - -.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-\\[12px\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 12px; @@ -276,12 +256,24 @@ exports[`border-e-* 1`] = ` border-inline-end-width: thin; } -.border-e-\\[\\#0088cc\\] { - border-inline-end-color: #08c; +.border-e-0 { + border-inline-end-style: var(--tw-border-style); + border-inline-end-width: 0; } -.border-e-\\[\\#0088cc\\]\\/50 { - border-inline-end-color: #0088cc80; +.border-e-123 { + border-inline-end-style: var(--tw-border-style); + border-inline-end-width: 123px; +} + +.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-\\[--my-color\\] { @@ -292,6 +284,14 @@ exports[`border-e-* 1`] = ` border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent); } +.border-e-\\[\\#0088cc\\] { + border-inline-end-color: #08c; +} + +.border-e-\\[\\#0088cc\\]\\/50 { + border-inline-end-color: #0088cc80; +} + .border-e-\\[color\\:--my-color\\] { border-inline-end-color: var(--my-color); } @@ -340,26 +340,6 @@ exports[`border-l-* 1`] = ` border-left-width: 1px; } -.border-l-0 { - border-left-style: var(--tw-border-style); - border-left-width: 0; -} - -.border-l-123 { - border-left-style: var(--tw-border-style); - border-left-width: 123px; -} - -.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-\\[12px\\] { border-left-style: var(--tw-border-style); border-left-width: 12px; @@ -385,12 +365,24 @@ exports[`border-l-* 1`] = ` border-left-width: thin; } -.border-l-\\[\\#0088cc\\] { - border-left-color: #08c; +.border-l-0 { + border-left-style: var(--tw-border-style); + border-left-width: 0; } -.border-l-\\[\\#0088cc\\]\\/50 { - border-left-color: #0088cc80; +.border-l-123 { + border-left-style: var(--tw-border-style); + border-left-width: 123px; +} + +.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-\\[--my-color\\] { @@ -401,6 +393,14 @@ exports[`border-l-* 1`] = ` border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent); } +.border-l-\\[\\#0088cc\\] { + border-left-color: #08c; +} + +.border-l-\\[\\#0088cc\\]\\/50 { + border-left-color: #0088cc80; +} + .border-l-\\[color\\:--my-color\\] { border-left-color: var(--my-color); } @@ -449,26 +449,6 @@ exports[`border-r-* 1`] = ` border-right-width: 1px; } -.border-r-0 { - border-right-style: var(--tw-border-style); - border-right-width: 0; -} - -.border-r-123 { - border-right-style: var(--tw-border-style); - border-right-width: 123px; -} - -.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-\\[12px\\] { border-right-style: var(--tw-border-style); border-right-width: 12px; @@ -494,12 +474,24 @@ exports[`border-r-* 1`] = ` border-right-width: thin; } -.border-r-\\[\\#0088cc\\] { - border-right-color: #08c; +.border-r-0 { + border-right-style: var(--tw-border-style); + border-right-width: 0; } -.border-r-\\[\\#0088cc\\]\\/50 { - border-right-color: #0088cc80; +.border-r-123 { + border-right-style: var(--tw-border-style); + border-right-width: 123px; +} + +.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-\\[--my-color\\] { @@ -510,6 +502,14 @@ exports[`border-r-* 1`] = ` border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent); } +.border-r-\\[\\#0088cc\\] { + border-right-color: #08c; +} + +.border-r-\\[\\#0088cc\\]\\/50 { + border-right-color: #0088cc80; +} + .border-r-\\[color\\:--my-color\\] { border-right-color: var(--my-color); } @@ -558,26 +558,6 @@ exports[`border-s-* 1`] = ` border-inline-start-width: 1px; } -.border-s-0 { - border-inline-start-style: var(--tw-border-style); - border-inline-start-width: 0; -} - -.border-s-123 { - border-inline-start-style: var(--tw-border-style); - border-inline-start-width: 123px; -} - -.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-\\[12px\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 12px; @@ -603,12 +583,24 @@ exports[`border-s-* 1`] = ` border-inline-start-width: thin; } -.border-s-\\[\\#0088cc\\] { - border-inline-start-color: #08c; +.border-s-0 { + border-inline-start-style: var(--tw-border-style); + border-inline-start-width: 0; } -.border-s-\\[\\#0088cc\\]\\/50 { - border-inline-start-color: #0088cc80; +.border-s-123 { + border-inline-start-style: var(--tw-border-style); + border-inline-start-width: 123px; +} + +.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-\\[--my-color\\] { @@ -619,6 +611,14 @@ exports[`border-s-* 1`] = ` border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent); } +.border-s-\\[\\#0088cc\\] { + border-inline-start-color: #08c; +} + +.border-s-\\[\\#0088cc\\]\\/50 { + border-inline-start-color: #0088cc80; +} + .border-s-\\[color\\:--my-color\\] { border-inline-start-color: var(--my-color); } @@ -667,26 +667,6 @@ exports[`border-t-* 1`] = ` border-top-width: 1px; } -.border-t-0 { - border-top-style: var(--tw-border-style); - border-top-width: 0; -} - -.border-t-123 { - border-top-style: var(--tw-border-style); - border-top-width: 123px; -} - -.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-\\[12px\\] { border-top-style: var(--tw-border-style); border-top-width: 12px; @@ -712,12 +692,24 @@ exports[`border-t-* 1`] = ` border-top-width: thin; } -.border-t-\\[\\#0088cc\\] { - border-top-color: #08c; +.border-t-0 { + border-top-style: var(--tw-border-style); + border-top-width: 0; } -.border-t-\\[\\#0088cc\\]\\/50 { - border-top-color: #0088cc80; +.border-t-123 { + border-top-style: var(--tw-border-style); + border-top-width: 123px; +} + +.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-\\[--my-color\\] { @@ -728,6 +720,14 @@ exports[`border-t-* 1`] = ` border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent); } +.border-t-\\[\\#0088cc\\] { + border-top-color: #08c; +} + +.border-t-\\[\\#0088cc\\]\\/50 { + border-top-color: #0088cc80; +} + .border-t-\\[color\\:--my-color\\] { border-top-color: var(--my-color); } @@ -778,34 +778,6 @@ exports[`border-x-* 1`] = ` border-right-width: 1px; } -.border-x-0 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 0; - border-right-width: 0; -} - -.border-x-123 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 123px; - border-right-width: 123px; -} - -.border-x-2 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 2px; - border-right-width: 2px; -} - -.border-x-4 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 4px; - border-right-width: 4px; -} - .border-x-\\[12px\\] { border-left-style: var(--tw-border-style); border-right-style: var(--tw-border-style); @@ -841,14 +813,32 @@ exports[`border-x-* 1`] = ` border-right-width: thin; } -.border-x-\\[\\#0088cc\\] { - border-left-color: #08c; - border-right-color: #08c; +.border-x-0 { + border-left-style: var(--tw-border-style); + border-right-style: var(--tw-border-style); + border-left-width: 0; + border-right-width: 0; } -.border-x-\\[\\#0088cc\\]\\/50 { - border-left-color: #0088cc80; - border-right-color: #0088cc80; +.border-x-123 { + border-left-style: var(--tw-border-style); + border-right-style: var(--tw-border-style); + border-left-width: 123px; + border-right-width: 123px; +} + +.border-x-2 { + border-left-style: var(--tw-border-style); + border-right-style: var(--tw-border-style); + border-left-width: 2px; + border-right-width: 2px; +} + +.border-x-4 { + border-left-style: var(--tw-border-style); + border-right-style: var(--tw-border-style); + border-left-width: 4px; + border-right-width: 4px; } .border-x-\\[--my-color\\] { @@ -861,6 +851,16 @@ exports[`border-x-* 1`] = ` border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent); } +.border-x-\\[\\#0088cc\\] { + border-left-color: #08c; + border-right-color: #08c; +} + +.border-x-\\[\\#0088cc\\]\\/50 { + border-left-color: #0088cc80; + border-right-color: #0088cc80; +} + .border-x-\\[color\\:--my-color\\] { border-left-color: var(--my-color); border-right-color: var(--my-color); @@ -918,34 +918,6 @@ exports[`border-y-* 1`] = ` border-bottom-width: 1px; } -.border-y-0 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 0; - border-bottom-width: 0; -} - -.border-y-123 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 123px; - border-bottom-width: 123px; -} - -.border-y-2 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 2px; - border-bottom-width: 2px; -} - -.border-y-4 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 4px; - border-bottom-width: 4px; -} - .border-y-\\[12px\\] { border-top-style: var(--tw-border-style); border-bottom-style: var(--tw-border-style); @@ -981,14 +953,32 @@ exports[`border-y-* 1`] = ` border-bottom-width: thin; } -.border-y-\\[\\#0088cc\\] { - border-top-color: #08c; - border-bottom-color: #08c; +.border-y-0 { + border-top-style: var(--tw-border-style); + border-bottom-style: var(--tw-border-style); + border-top-width: 0; + border-bottom-width: 0; } -.border-y-\\[\\#0088cc\\]\\/50 { - border-top-color: #0088cc80; - border-bottom-color: #0088cc80; +.border-y-123 { + border-top-style: var(--tw-border-style); + border-bottom-style: var(--tw-border-style); + border-top-width: 123px; + border-bottom-width: 123px; +} + +.border-y-2 { + border-top-style: var(--tw-border-style); + border-bottom-style: var(--tw-border-style); + border-top-width: 2px; + border-bottom-width: 2px; +} + +.border-y-4 { + border-top-style: var(--tw-border-style); + border-bottom-style: var(--tw-border-style); + border-top-width: 4px; + border-bottom-width: 4px; } .border-y-\\[--my-color\\] { @@ -1001,6 +991,16 @@ exports[`border-y-* 1`] = ` border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent); } +.border-y-\\[\\#0088cc\\] { + border-top-color: #08c; + border-bottom-color: #08c; +} + +.border-y-\\[\\#0088cc\\]\\/50 { + border-top-color: #0088cc80; + border-bottom-color: #0088cc80; +} + .border-y-\\[color\\:--my-color\\] { border-top-color: var(--my-color); border-bottom-color: var(--my-color); diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts index b91c19acab11..b84e91c10a6c 100644 --- a/packages/tailwindcss/src/compile.ts +++ b/packages/tailwindcss/src/compile.ts @@ -11,9 +11,6 @@ export function compileCandidates( designSystem: DesignSystem, { throwOnInvalidCandidate = false } = {}, ) { - // Ensure the candidates are sorted alphabetically - rawCandidates.sort() - let nodeSorting = new Map< AstNode, { properties: number[]; variants: bigint; candidate: string } @@ -153,7 +150,9 @@ export function compileCandidates( // Sort by lowest property index first (aSorting.properties[offset] ?? Infinity) - (zSorting.properties[offset] ?? Infinity) || // Sort by most properties first, then by least properties - zSorting.properties.length - aSorting.properties.length + zSorting.properties.length - aSorting.properties.length || + // Sort alphabetically + aSorting.candidate.localeCompare(zSorting.candidate) ) }) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 0873766a4bf6..0bcda0ea9015 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -125,6 +125,10 @@ test('inset', () => { inset: -100%; } + .inset-\\[4px\\] { + inset: 4px; + } + .inset-3\\/4 { inset: 75%; } @@ -133,10 +137,6 @@ test('inset', () => { inset: 1rem; } - .inset-\\[4px\\] { - inset: 4px; - } - .inset-auto { inset: auto; } @@ -182,6 +182,11 @@ test('inset-x', () => { right: -100%; } + .inset-x-\\[4px\\] { + left: 4px; + right: 4px; + } + .inset-x-3\\/4 { left: 75%; right: 75%; @@ -192,11 +197,6 @@ test('inset-x', () => { right: 1rem; } - .inset-x-\\[4px\\] { - left: 4px; - right: 4px; - } - .inset-x-auto { left: auto; right: auto; @@ -244,6 +244,11 @@ test('inset-y', () => { bottom: -100%; } + .inset-y-\\[4px\\] { + top: 4px; + bottom: 4px; + } + .inset-y-3\\/4 { top: 75%; bottom: 75%; @@ -254,11 +259,6 @@ test('inset-y', () => { bottom: 1rem; } - .inset-y-\\[4px\\] { - top: 4px; - bottom: 4px; - } - .inset-y-auto { top: auto; bottom: auto; @@ -304,6 +304,10 @@ test('start', () => { inset-inline-start: -100%; } + .start-\\[4px\\] { + inset-inline-start: 4px; + } + .start-3\\/4 { inset-inline-start: 75%; } @@ -312,10 +316,6 @@ test('start', () => { inset-inline-start: 1rem; } - .start-\\[4px\\] { - inset-inline-start: 4px; - } - .start-auto { inset-inline-start: auto; } @@ -351,6 +351,10 @@ test('end', () => { inset-inline-end: -100%; } + .end-\\[4px\\] { + inset-inline-end: 4px; + } + .end-3\\/4 { inset-inline-end: 75%; } @@ -359,10 +363,6 @@ test('end', () => { inset-inline-end: 1rem; } - .end-\\[4px\\] { - inset-inline-end: 4px; - } - .end-auto { inset-inline-end: auto; } @@ -399,6 +399,10 @@ test('top', () => { top: -100%; } + .top-\\[4px\\] { + top: 4px; + } + .top-3\\/4 { top: 75%; } @@ -407,10 +411,6 @@ test('top', () => { top: 1rem; } - .top-\\[4px\\] { - top: 4px; - } - .top-auto { top: auto; } @@ -454,6 +454,10 @@ test('right', () => { right: -100%; } + .right-\\[4px\\] { + right: 4px; + } + .right-3\\/4 { right: 75%; } @@ -462,10 +466,6 @@ test('right', () => { right: 1rem; } - .right-\\[4px\\] { - right: 4px; - } - .right-auto { right: auto; } @@ -509,6 +509,10 @@ test('bottom', () => { bottom: -100%; } + .bottom-\\[4px\\] { + bottom: 4px; + } + .bottom-3\\/4 { bottom: 75%; } @@ -517,10 +521,6 @@ test('bottom', () => { bottom: 1rem; } - .bottom-\\[4px\\] { - bottom: 4px; - } - .bottom-auto { bottom: auto; } @@ -556,6 +556,10 @@ test('left', () => { left: -100%; } + .left-\\[4px\\] { + left: 4px; + } + .left-3\\/4 { left: 75%; } @@ -564,10 +568,6 @@ test('left', () => { left: 1rem; } - .left-\\[4px\\] { - left: 4px; - } - .left-auto { left: auto; } @@ -594,22 +594,22 @@ test('isolation', () => { test('z-index', () => { expect(run(['z-auto', 'z-10', '-z-10', 'z-[123]', '-z-[--value]'])).toMatchInlineSnapshot(` - ".-z-10 { - z-index: calc(10 * -1); - } - - .-z-\\[--value\\] { + ".-z-\\[--value\\] { z-index: calc(var(--value) * -1); } - .z-10 { - z-index: 10; + .-z-10 { + z-index: calc(10 * -1); } .z-\\[123\\] { z-index: 123; } + .z-10 { + z-index: 10; + } + .z-auto { z-index: auto; }" @@ -629,22 +629,22 @@ test('order', () => { 'order-none', ]), ).toMatchInlineSnapshot(` - ".-order-4 { - order: calc(4 * -1); - } - - .-order-\\[--value\\] { + ".-order-\\[--value\\] { order: calc(var(--value) * -1); } - .order-4 { - order: 4; + .-order-4 { + order: calc(4 * -1); } .order-\\[123\\] { order: 123; } + .order-4 { + order: 4; + } + .order-first { order: calc(-infinity); } @@ -679,6 +679,10 @@ test('col', () => { grid-column: auto; } + .col-span-\\[--my-variable\\] { + grid-column: span var(--my-variable) / span var(--my-variable); + } + .col-span-17 { grid-column: span 17 / span 17; } @@ -687,10 +691,6 @@ test('col', () => { grid-column: span 4 / span 4; } - .col-span-\\[--my-variable\\] { - grid-column: span var(--my-variable) / span var(--my-variable); - } - .col-span-full { grid-column: 1 / -1; }" @@ -701,7 +701,11 @@ test('col', () => { test('col-start', () => { expect(run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]'])) .toMatchInlineSnapshot(` - ".col-start-4 { + ".col-start-\\[123\\] { + grid-column-start: 123; + } + + .col-start-4 { grid-column-start: 4; } @@ -709,10 +713,6 @@ test('col-start', () => { grid-column-start: 99; } - .col-start-\\[123\\] { - grid-column-start: 123; - } - .col-start-auto { grid-column-start: auto; }" @@ -722,7 +722,11 @@ test('col-start', () => { test('col-end', () => { expect(run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]'])).toMatchInlineSnapshot(` - ".col-end-4 { + ".col-end-\\[123\\] { + grid-column-end: 123; + } + + .col-end-4 { grid-column-end: 4; } @@ -730,10 +734,6 @@ test('col-end', () => { grid-column-end: 99; } - .col-end-\\[123\\] { - grid-column-end: 123; - } - .col-end-auto { grid-column-end: auto; }" @@ -760,6 +760,10 @@ test('row', () => { grid-row: auto; } + .row-span-\\[--my-variable\\] { + grid-row: span var(--my-variable) / span var(--my-variable); + } + .row-span-17 { grid-row: span 17 / span 17; } @@ -768,10 +772,6 @@ test('row', () => { grid-row: span 4 / span 4; } - .row-span-\\[--my-variable\\] { - grid-row: span var(--my-variable) / span var(--my-variable); - } - .row-span-full { grid-row: 1 / -1; }" @@ -782,7 +782,11 @@ test('row', () => { test('row-start', () => { expect(run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]'])) .toMatchInlineSnapshot(` - ".row-start-4 { + ".row-start-\\[123\\] { + grid-row-start: 123; + } + + .row-start-4 { grid-row-start: 4; } @@ -790,10 +794,6 @@ test('row-start', () => { grid-row-start: 99; } - .row-start-\\[123\\] { - grid-row-start: 123; - } - .row-start-auto { grid-row-start: auto; }" @@ -803,7 +803,11 @@ test('row-start', () => { test('row-end', () => { expect(run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]'])).toMatchInlineSnapshot(` - ".row-end-4 { + ".row-end-\\[123\\] { + grid-row-end: 123; + } + + .row-end-4 { grid-row-end: 4; } @@ -811,10 +815,6 @@ test('row-end', () => { grid-row-end: 99; } - .row-end-\\[123\\] { - grid-row-end: 123; - } - .row-end-auto { grid-row-end: auto; }" @@ -906,22 +906,22 @@ test('margin', () => { --spacing-4: 1rem; } - .-m-4 { - margin: -1rem; - } - .-m-\\[--value\\] { margin: calc(var(--value) * -1); } - .m-4 { - margin: 1rem; + .-m-4 { + margin: -1rem; } .m-\\[4px\\] { margin: 4px; } + .m-4 { + margin: 1rem; + } + .m-auto { margin: auto; }" @@ -945,19 +945,14 @@ test('margin-x', () => { --spacing-4: 1rem; } - .-mx-4 { - margin-left: -1rem; - margin-right: -1rem; - } - .-mx-\\[--value\\] { margin-left: calc(var(--value) * -1); margin-right: calc(var(--value) * -1); } - .mx-4 { - margin-left: 1rem; - margin-right: 1rem; + .-mx-4 { + margin-left: -1rem; + margin-right: -1rem; } .mx-\\[4px\\] { @@ -965,6 +960,11 @@ test('margin-x', () => { margin-right: 4px; } + .mx-4 { + margin-left: 1rem; + margin-right: 1rem; + } + .mx-auto { margin-left: auto; margin-right: auto; @@ -989,19 +989,14 @@ test('margin-y', () => { --spacing-4: 1rem; } - .-my-4 { - margin-top: -1rem; - margin-bottom: -1rem; - } - .-my-\\[--value\\] { margin-top: calc(var(--value) * -1); margin-bottom: calc(var(--value) * -1); } - .my-4 { - margin-top: 1rem; - margin-bottom: 1rem; + .-my-4 { + margin-top: -1rem; + margin-bottom: -1rem; } .my-\\[4px\\] { @@ -1009,6 +1004,11 @@ test('margin-y', () => { margin-bottom: 4px; } + .my-4 { + margin-top: 1rem; + margin-bottom: 1rem; + } + .my-auto { margin-top: auto; margin-bottom: auto; @@ -1033,22 +1033,22 @@ test('margin-top', () => { --spacing-4: 1rem; } - .-mt-4 { - margin-top: -1rem; - } - .-mt-\\[--value\\] { margin-top: calc(var(--value) * -1); } - .mt-4 { - margin-top: 1rem; + .-mt-4 { + margin-top: -1rem; } .mt-\\[4px\\] { margin-top: 4px; } + .mt-4 { + margin-top: 1rem; + } + .mt-auto { margin-top: auto; }" @@ -1072,22 +1072,22 @@ test('margin-inline-start', () => { --spacing-4: 1rem; } - .-ms-4 { - margin-inline-start: -1rem; - } - .-ms-\\[--value\\] { margin-inline-start: calc(var(--value) * -1); } - .ms-4 { - margin-inline-start: 1rem; + .-ms-4 { + margin-inline-start: -1rem; } .ms-\\[4px\\] { margin-inline-start: 4px; } + .ms-4 { + margin-inline-start: 1rem; + } + .ms-auto { margin-inline-start: auto; }" @@ -1111,22 +1111,22 @@ test('margin-inline-end', () => { --spacing-4: 1rem; } - .-me-4 { - margin-inline-end: -1rem; - } - .-me-\\[--value\\] { margin-inline-end: calc(var(--value) * -1); } - .me-4 { - margin-inline-end: 1rem; + .-me-4 { + margin-inline-end: -1rem; } .me-\\[4px\\] { margin-inline-end: 4px; } + .me-4 { + margin-inline-end: 1rem; + } + .me-auto { margin-inline-end: auto; }" @@ -1150,22 +1150,22 @@ test('margin-right', () => { --spacing-4: 1rem; } - .-mr-4 { - margin-right: -1rem; - } - .-mr-\\[--value\\] { margin-right: calc(var(--value) * -1); } - .mr-4 { - margin-right: 1rem; + .-mr-4 { + margin-right: -1rem; } .mr-\\[4px\\] { margin-right: 4px; } + .mr-4 { + margin-right: 1rem; + } + .mr-auto { margin-right: auto; }" @@ -1189,22 +1189,22 @@ test('margin-bottom', () => { --spacing-4: 1rem; } - .-mb-4 { - margin-bottom: -1rem; - } - .-mb-\\[--value\\] { margin-bottom: calc(var(--value) * -1); } - .mb-4 { - margin-bottom: 1rem; + .-mb-4 { + margin-bottom: -1rem; } .mb-\\[4px\\] { margin-bottom: 4px; } + .mb-4 { + margin-bottom: 1rem; + } + .mb-auto { margin-bottom: auto; }" @@ -1228,22 +1228,22 @@ test('margin-left', () => { --spacing-4: 1rem; } - .-ml-4 { - margin-left: -1rem; - } - .-ml-\\[--value\\] { margin-left: calc(var(--value) * -1); } - .ml-4 { - margin-left: 1rem; + .-ml-4 { + margin-left: -1rem; } .ml-\\[4px\\] { margin-left: 4px; } + .ml-4 { + margin-left: 1rem; + } + .ml-auto { margin-left: auto; }" @@ -1324,23 +1324,23 @@ test('box-sizing', () => { test('line-clamp', () => { expect(run(['line-clamp-4', 'line-clamp-99', 'line-clamp-[123]', 'line-clamp-none'])) .toMatchInlineSnapshot(` - ".line-clamp-4 { + ".line-clamp-\\[123\\] { overlow: hidden; - -webkit-line-clamp: 4; + -webkit-line-clamp: 123; -webkit-box-orient: vertical; display: -webkit-box; } - .line-clamp-99 { + .line-clamp-4 { overlow: hidden; - -webkit-line-clamp: 99; + -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; } - .line-clamp-\\[123\\] { + .line-clamp-99 { overlow: hidden; - -webkit-line-clamp: 123; + -webkit-line-clamp: 99; -webkit-box-orient: vertical; display: -webkit-box; } @@ -1494,12 +1494,12 @@ test('display', () => { test('aspect-ratio', () => { expect(run(['aspect-video', 'aspect-[10/9]', 'aspect-4/3'])).toMatchInlineSnapshot(` - ".aspect-4\\/3 { - aspect-ratio: 4 / 3; + ".aspect-\\[10\\/9\\] { + aspect-ratio: 10 / 9; } - .aspect-\\[10\\/9\\] { - aspect-ratio: 10 / 9; + .aspect-4\\/3 { + aspect-ratio: 4 / 3; } .aspect-video { @@ -1534,6 +1534,11 @@ test('size', () => { --spacing-4: 1rem; } + .size-\\[4px\\] { + width: 4px; + height: 4px; + } + .size-1\\/2 { width: 50%; height: 50%; @@ -1544,11 +1549,6 @@ test('size', () => { height: 1rem; } - .size-\\[4px\\] { - width: 4px; - height: 4px; - } - .size-auto { width: auto; height: auto; @@ -1609,6 +1609,10 @@ test('width', () => { --width-xl: 36rem; } + .w-\\[4px\\] { + width: 4px; + } + .w-1\\/2 { width: 50%; } @@ -1617,10 +1621,6 @@ test('width', () => { width: 1rem; } - .w-\\[4px\\] { - width: 4px; - } - .w-auto { width: auto; } @@ -1691,14 +1691,14 @@ test('min-width', () => { --width-xl: 36rem; } - .min-w-4 { - min-width: 1rem; - } - .min-w-\\[4px\\] { min-width: 4px; } + .min-w-4 { + min-width: 1rem; + } + .min-w-auto { min-width: auto; } @@ -1753,14 +1753,14 @@ test('max-width', () => { --width-xl: 36rem; } - .max-w-4 { - max-width: 1rem; - } - .max-w-\\[4px\\] { max-width: 4px; } + .max-w-4 { + max-width: 1rem; + } + .max-w-fit { max-width: fit-content; } @@ -1813,6 +1813,10 @@ test('height', () => { --spacing-4: 1rem; } + .h-\\[4px\\] { + height: 4px; + } + .h-1\\/2 { height: 50%; } @@ -1821,10 +1825,6 @@ test('height', () => { height: 1rem; } - .h-\\[4px\\] { - height: 4px; - } - .h-auto { height: auto; } @@ -1892,14 +1892,14 @@ test('min-height', () => { --spacing-4: 1rem; } - .min-h-4 { - min-height: 1rem; - } - .min-h-\\[4px\\] { min-height: 4px; } + .min-h-4 { + min-height: 1rem; + } + .min-h-auto { min-height: auto; } @@ -1967,14 +1967,14 @@ test('max-height', () => { --spacing-4: 1rem; } - .max-h-4 { - max-height: 1rem; - } - .max-h-\\[4px\\] { max-height: 4px; } + .max-h-4 { + max-height: 1rem; + } + .max-h-dvh { max-height: 100dvh; } @@ -2018,7 +2018,11 @@ test('flex', () => { expect( run(['flex-1', 'flex-99', 'flex-1/2', 'flex-auto', 'flex-initial', 'flex-none', 'flex-[123]']), ).toMatchInlineSnapshot(` - ".flex-1 { + ".flex-\\[123\\] { + flex: 123; + } + + .flex-1 { flex: 1; } @@ -2030,10 +2034,6 @@ test('flex', () => { flex: 99; } - .flex-\\[123\\] { - flex: 123; - } - .flex-auto { flex: auto; } @@ -2055,12 +2055,12 @@ test('flex-shrink', () => { flex-shrink: 1; } - .shrink-0 { - flex-shrink: 0; - } - .shrink-\\[123\\] { flex-shrink: 123; + } + + .shrink-0 { + flex-shrink: 0; }" `) expect(run(['-shrink', '-shrink-0', '-shrink-[123]'])).toEqual('') @@ -2072,12 +2072,12 @@ test('flex-grow', () => { flex-grow: 1; } - .grow-0 { - flex-grow: 0; - } - .grow-\\[123\\] { flex-grow: 123; + } + + .grow-0 { + flex-grow: 0; }" `) expect(run(['-grow', '-grow-0', '-grow-[123]'])).toEqual('') @@ -2099,14 +2099,14 @@ test('flex-basis', () => { --width-xl: 36rem; } - .basis-11\\/12 { - flex-basis: 91.6667%; - } - .basis-\\[123px\\] { flex-basis: 123px; } + .basis-11\\/12 { + flex-basis: 91.6667%; + } + .basis-auto { flex-basis: auto; } @@ -2171,16 +2171,10 @@ test('border-spacing', () => { @tailwind utilities; `, ['border-spacing-1', 'border-spacing-[123px]'], - ), - ).toMatchInlineSnapshot(` - ":root { - --spacing-1: .25rem; - } - - .border-spacing-1 { - --tw-border-spacing-x: .25rem; - --tw-border-spacing-y: .25rem; - border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + ), + ).toMatchInlineSnapshot(` + ":root { + --spacing-1: .25rem; } .border-spacing-\\[123px\\] { @@ -2189,6 +2183,12 @@ test('border-spacing', () => { border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } + .border-spacing-1 { + --tw-border-spacing-x: .25rem; + --tw-border-spacing-y: .25rem; + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + @property --tw-border-spacing-x { syntax: ""; inherits: false; @@ -2220,13 +2220,13 @@ test('border-spacing-x', () => { --spacing-1: .25rem; } - .border-spacing-x-1 { - --tw-border-spacing-x: .25rem; + .border-spacing-x-\\[123px\\] { + --tw-border-spacing-x: 123px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } - .border-spacing-x-\\[123px\\] { - --tw-border-spacing-x: 123px; + .border-spacing-x-1 { + --tw-border-spacing-x: .25rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -2261,13 +2261,13 @@ test('border-spacing-y', () => { --spacing-1: .25rem; } - .border-spacing-y-1 { - --tw-border-spacing-y: .25rem; + .border-spacing-y-\\[123px\\] { + --tw-border-spacing-y: 123px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } - .border-spacing-y-\\[123px\\] { - --tw-border-spacing-y: 123px; + .border-spacing-y-1 { + --tw-border-spacing-y: .25rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -2371,18 +2371,18 @@ test('translate', () => { 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-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-full { --tw-translate-x: 100%; --tw-translate-y: 100%; @@ -2476,12 +2476,12 @@ test('rotate', () => { rotate: -45deg; } - .rotate-45 { - rotate: 45deg; - } - .rotate-\\[123deg\\] { rotate: 123deg; + } + + .rotate-45 { + rotate: 45deg; }" `) expect(run(['rotate'])).toEqual('') @@ -2495,18 +2495,18 @@ test('skew', () => { transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } - .skew-6 { - --tw-skew-x: 6deg; - --tw-skew-y: 6deg; - transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); - } - .skew-\\[123deg\\] { --tw-skew-x: 123deg; --tw-skew-y: 123deg; transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } + .skew-6 { + --tw-skew-x: 6deg; + --tw-skew-y: 6deg; + transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); + } + @property --tw-skew-x { syntax: ""; inherits: false; @@ -2529,13 +2529,13 @@ test('skew-x', () => { transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } - .skew-x-6 { - --tw-skew-x: 6deg; + .skew-x-\\[123deg\\] { + --tw-skew-x: 123deg; transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } - .skew-x-\\[123deg\\] { - --tw-skew-x: 123deg; + .skew-x-6 { + --tw-skew-x: 6deg; transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } @@ -2561,13 +2561,13 @@ test('skew-y', () => { transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } - .skew-y-6 { - --tw-skew-y: 6deg; + .skew-y-\\[123deg\\] { + --tw-skew-y: 123deg; transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } - .skew-y-\\[123deg\\] { - --tw-skew-y: 123deg; + .skew-y-6 { + --tw-skew-y: 6deg; transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } @@ -2594,18 +2594,18 @@ test('scale', () => { scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-50 { - --tw-scale-x: 50%; - --tw-scale-y: 50%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - .scale-\\[123deg\\] { --tw-scale-x: 123deg; --tw-scale-y: 123deg; scale: var(--tw-scale-x) var(--tw-scale-y); } + .scale-50 { + --tw-scale-x: 50%; + --tw-scale-y: 50%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + @property --tw-scale-x { syntax: " | "; inherits: false; @@ -2628,13 +2628,13 @@ test('scale-x', () => { scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-x-50 { - --tw-scale-x: 50%; + .scale-x-\\[123deg\\] { + --tw-scale-x: 123deg; scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-x-\\[123deg\\] { - --tw-scale-x: 123deg; + .scale-x-50 { + --tw-scale-x: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } @@ -2660,13 +2660,13 @@ test('scale-y', () => { scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-y-50 { - --tw-scale-y: 50%; + .scale-y-\\[123deg\\] { + --tw-scale-y: 123deg; scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-y-\\[123deg\\] { - --tw-scale-y: 123deg; + .scale-y-50 { + --tw-scale-y: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } @@ -3223,20 +3223,20 @@ test('scroll-m', () => { --spacing-4: 1rem; } - .-scroll-m-4 { - scroll-margin: -1rem; - } - .-scroll-m-\\[--value\\] { scroll-margin: calc(var(--value) * -1); } - .scroll-m-4 { - scroll-margin: 1rem; + .-scroll-m-4 { + scroll-margin: -1rem; } .scroll-m-\\[4px\\] { scroll-margin: 4px; + } + + .scroll-m-4 { + scroll-margin: 1rem; }" `) expect(run(['scroll-m'])).toEqual('') @@ -3258,24 +3258,24 @@ test('scroll-mx', () => { --spacing-4: 1rem; } - .-scroll-mx-4 { - scroll-margin-left: -1rem; - scroll-margin-right: -1rem; - } - .-scroll-mx-\\[--value\\] { scroll-margin-left: calc(var(--value) * -1); scroll-margin-right: calc(var(--value) * -1); } - .scroll-mx-4 { - scroll-margin-left: 1rem; - scroll-margin-right: 1rem; + .-scroll-mx-4 { + scroll-margin-left: -1rem; + scroll-margin-right: -1rem; } .scroll-mx-\\[4px\\] { scroll-margin-left: 4px; scroll-margin-right: 4px; + } + + .scroll-mx-4 { + scroll-margin-left: 1rem; + scroll-margin-right: 1rem; }" `) expect(run(['scroll-mx'])).toEqual('') @@ -3297,24 +3297,24 @@ test('scroll-my', () => { --spacing-4: 1rem; } - .-scroll-my-4 { - scroll-margin-top: -1rem; - scroll-margin-bottom: -1rem; - } - .-scroll-my-\\[--value\\] { scroll-margin-top: calc(var(--value) * -1); scroll-margin-bottom: calc(var(--value) * -1); } - .scroll-my-4 { - scroll-margin-top: 1rem; - scroll-margin-bottom: 1rem; + .-scroll-my-4 { + scroll-margin-top: -1rem; + scroll-margin-bottom: -1rem; } .scroll-my-\\[4px\\] { scroll-margin-top: 4px; scroll-margin-bottom: 4px; + } + + .scroll-my-4 { + scroll-margin-top: 1rem; + scroll-margin-bottom: 1rem; }" `) expect(run(['scroll-my'])).toEqual('') @@ -3336,20 +3336,20 @@ test('scroll-ms', () => { --spacing-4: 1rem; } - .-scroll-ms-4 { - scroll-margin-inline-start: -1rem; - } - .-scroll-ms-\\[--value\\] { scroll-margin-inline-start: calc(var(--value) * -1); } - .scroll-ms-4 { - scroll-margin-inline-start: 1rem; + .-scroll-ms-4 { + scroll-margin-inline-start: -1rem; } .scroll-ms-\\[4px\\] { scroll-margin-inline-start: 4px; + } + + .scroll-ms-4 { + scroll-margin-inline-start: 1rem; }" `) expect(run(['scroll-ms'])).toEqual('') @@ -3371,20 +3371,20 @@ test('scroll-me', () => { --spacing-4: 1rem; } - .-scroll-me-4 { - scroll-margin-inline-end: -1rem; - } - .-scroll-me-\\[--value\\] { scroll-margin-inline-end: calc(var(--value) * -1); } - .scroll-me-4 { - scroll-margin-inline-end: 1rem; + .-scroll-me-4 { + scroll-margin-inline-end: -1rem; } .scroll-me-\\[4px\\] { scroll-margin-inline-end: 4px; + } + + .scroll-me-4 { + scroll-margin-inline-end: 1rem; }" `) expect(run(['scroll-me'])).toEqual('') @@ -3406,20 +3406,20 @@ test('scroll-mt', () => { --spacing-4: 1rem; } - .-scroll-mt-4 { - scroll-margin-top: -1rem; - } - .-scroll-mt-\\[--value\\] { scroll-margin-top: calc(var(--value) * -1); } - .scroll-mt-4 { - scroll-margin-top: 1rem; + .-scroll-mt-4 { + scroll-margin-top: -1rem; } .scroll-mt-\\[4px\\] { scroll-margin-top: 4px; + } + + .scroll-mt-4 { + scroll-margin-top: 1rem; }" `) expect(run(['scroll-mt'])).toEqual('') @@ -3441,20 +3441,20 @@ test('scroll-mr', () => { --spacing-4: 1rem; } - .-scroll-mr-4 { - scroll-margin-right: -1rem; - } - .-scroll-mr-\\[--value\\] { scroll-margin-right: calc(var(--value) * -1); } - .scroll-mr-4 { - scroll-margin-right: 1rem; + .-scroll-mr-4 { + scroll-margin-right: -1rem; } .scroll-mr-\\[4px\\] { scroll-margin-right: 4px; + } + + .scroll-mr-4 { + scroll-margin-right: 1rem; }" `) expect(run(['scroll-mr'])).toEqual('') @@ -3476,20 +3476,20 @@ test('scroll-mb', () => { --spacing-4: 1rem; } - .-scroll-mb-4 { - scroll-margin-bottom: -1rem; - } - .-scroll-mb-\\[--value\\] { scroll-margin-bottom: calc(var(--value) * -1); } - .scroll-mb-4 { - scroll-margin-bottom: 1rem; + .-scroll-mb-4 { + scroll-margin-bottom: -1rem; } .scroll-mb-\\[4px\\] { scroll-margin-bottom: 4px; + } + + .scroll-mb-4 { + scroll-margin-bottom: 1rem; }" `) expect(run(['scroll-mb'])).toEqual('') @@ -3511,20 +3511,20 @@ test('scroll-ml', () => { --spacing-4: 1rem; } - .-scroll-ml-4 { - scroll-margin-left: -1rem; - } - .-scroll-ml-\\[--value\\] { scroll-margin-left: calc(var(--value) * -1); } - .scroll-ml-4 { - scroll-margin-left: 1rem; + .-scroll-ml-4 { + scroll-margin-left: -1rem; } .scroll-ml-\\[4px\\] { scroll-margin-left: 4px; + } + + .scroll-ml-4 { + scroll-margin-left: 1rem; }" `) expect(run(['scroll-ml'])).toEqual('') @@ -3546,20 +3546,20 @@ test('scroll-p', () => { --spacing-4: 1rem; } - .-scroll-p-4 { - scroll-padding: -1rem; - } - .-scroll-p-\\[--value\\] { scroll-padding: calc(var(--value) * -1); } - .scroll-p-4 { - scroll-padding: 1rem; + .-scroll-p-4 { + scroll-padding: -1rem; } .scroll-p-\\[4px\\] { scroll-padding: 4px; + } + + .scroll-p-4 { + scroll-padding: 1rem; }" `) expect(run(['scroll-p'])).toEqual('') @@ -3581,24 +3581,24 @@ test('scroll-px', () => { --spacing-4: 1rem; } - .-scroll-px-4 { - scroll-padding-left: -1rem; - scroll-padding-right: -1rem; - } - .-scroll-px-\\[--value\\] { scroll-padding-left: calc(var(--value) * -1); scroll-padding-right: calc(var(--value) * -1); } - .scroll-px-4 { - scroll-padding-left: 1rem; - scroll-padding-right: 1rem; + .-scroll-px-4 { + scroll-padding-left: -1rem; + scroll-padding-right: -1rem; } .scroll-px-\\[4px\\] { scroll-padding-left: 4px; scroll-padding-right: 4px; + } + + .scroll-px-4 { + scroll-padding-left: 1rem; + scroll-padding-right: 1rem; }" `) expect(run(['scroll-px'])).toEqual('') @@ -3620,24 +3620,24 @@ test('scroll-py', () => { --spacing-4: 1rem; } - .-scroll-py-4 { - scroll-padding-top: -1rem; - scroll-padding-bottom: -1rem; - } - .-scroll-py-\\[--value\\] { scroll-padding-top: calc(var(--value) * -1); scroll-padding-bottom: calc(var(--value) * -1); } - .scroll-py-4 { - scroll-padding-top: 1rem; - scroll-padding-bottom: 1rem; + .-scroll-py-4 { + scroll-padding-top: -1rem; + scroll-padding-bottom: -1rem; } .scroll-py-\\[4px\\] { scroll-padding-top: 4px; scroll-padding-bottom: 4px; + } + + .scroll-py-4 { + scroll-padding-top: 1rem; + scroll-padding-bottom: 1rem; }" `) expect(run(['scroll-py'])).toEqual('') @@ -3659,20 +3659,20 @@ test('scroll-ps', () => { --spacing-4: 1rem; } - .-scroll-ps-4 { - scroll-padding-inline-start: -1rem; - } - .-scroll-ps-\\[--value\\] { scroll-padding-inline-start: calc(var(--value) * -1); } - .scroll-ps-4 { - scroll-padding-inline-start: 1rem; + .-scroll-ps-4 { + scroll-padding-inline-start: -1rem; } .scroll-ps-\\[4px\\] { scroll-padding-inline-start: 4px; + } + + .scroll-ps-4 { + scroll-padding-inline-start: 1rem; }" `) expect(run(['scroll-ps'])).toEqual('') @@ -3694,20 +3694,20 @@ test('scroll-pe', () => { --spacing-4: 1rem; } - .-scroll-pe-4 { - scroll-padding-inline-end: -1rem; - } - .-scroll-pe-\\[--value\\] { scroll-padding-inline-end: calc(var(--value) * -1); } - .scroll-pe-4 { - scroll-padding-inline-end: 1rem; + .-scroll-pe-4 { + scroll-padding-inline-end: -1rem; } .scroll-pe-\\[4px\\] { scroll-padding-inline-end: 4px; + } + + .scroll-pe-4 { + scroll-padding-inline-end: 1rem; }" `) expect(run(['scroll-pe'])).toEqual('') @@ -3729,20 +3729,20 @@ test('scroll-pt', () => { --spacing-4: 1rem; } - .-scroll-pt-4 { - scroll-padding-top: -1rem; - } - .-scroll-pt-\\[--value\\] { scroll-padding-top: calc(var(--value) * -1); } - .scroll-pt-4 { - scroll-padding-top: 1rem; + .-scroll-pt-4 { + scroll-padding-top: -1rem; } .scroll-pt-\\[4px\\] { scroll-padding-top: 4px; + } + + .scroll-pt-4 { + scroll-padding-top: 1rem; }" `) expect(run(['scroll-pt'])).toEqual('') @@ -3764,20 +3764,20 @@ test('scroll-pr', () => { --spacing-4: 1rem; } - .-scroll-pr-4 { - scroll-padding-right: -1rem; - } - .-scroll-pr-\\[--value\\] { scroll-padding-right: calc(var(--value) * -1); } - .scroll-pr-4 { - scroll-padding-right: 1rem; + .-scroll-pr-4 { + scroll-padding-right: -1rem; } .scroll-pr-\\[4px\\] { scroll-padding-right: 4px; + } + + .scroll-pr-4 { + scroll-padding-right: 1rem; }" `) expect(run(['scroll-pr'])).toEqual('') @@ -3799,20 +3799,20 @@ test('scroll-pb', () => { --spacing-4: 1rem; } - .-scroll-pb-4 { - scroll-padding-bottom: -1rem; - } - .-scroll-pb-\\[--value\\] { scroll-padding-bottom: calc(var(--value) * -1); } - .scroll-pb-4 { - scroll-padding-bottom: 1rem; + .-scroll-pb-4 { + scroll-padding-bottom: -1rem; } .scroll-pb-\\[4px\\] { scroll-padding-bottom: 4px; + } + + .scroll-pb-4 { + scroll-padding-bottom: 1rem; }" `) expect(run(['scroll-pb'])).toEqual('') @@ -3834,20 +3834,20 @@ test('scroll-pl', () => { --spacing-4: 1rem; } - .-scroll-pl-4 { - scroll-padding-left: -1rem; - } - .-scroll-pl-\\[--value\\] { scroll-padding-left: calc(var(--value) * -1); } - .scroll-pl-4 { - scroll-padding-left: 1rem; + .-scroll-pl-4 { + scroll-padding-left: -1rem; } .scroll-pl-\\[4px\\] { scroll-padding-left: 4px; + } + + .scroll-pl-4 { + scroll-padding-left: 1rem; }" `) expect(run(['scroll-pl'])).toEqual('') @@ -3939,6 +3939,14 @@ test('columns', () => { --width-7xl: 80rem; } + .columns-\\[--value\\] { + columns: var(--value); + } + + .columns-\\[123\\] { + columns: 123; + } + .columns-3xs { columns: 16rem; } @@ -3955,14 +3963,6 @@ test('columns', () => { columns: 99; } - .columns-\\[--value\\] { - columns: var(--value); - } - - .columns-\\[123\\] { - columns: 123; - } - .columns-auto { columns: auto; }" @@ -4226,7 +4226,11 @@ test('grid-cols', () => { expect( run(['grid-cols-none', 'grid-cols-subgrid', 'grid-cols-12', 'grid-cols-99', 'grid-cols-[123]']), ).toMatchInlineSnapshot(` - ".grid-cols-12 { + ".grid-cols-\\[123\\] { + grid-template-columns: 123px; + } + + .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } @@ -4234,10 +4238,6 @@ test('grid-cols', () => { grid-template-columns: repeat(99, minmax(0, 1fr)); } - .grid-cols-\\[123\\] { - grid-template-columns: 123px; - } - .grid-cols-none { grid-template-columns: none; } @@ -4261,7 +4261,11 @@ test('grid-rows', () => { expect( run(['grid-rows-none', 'grid-rows-subgrid', 'grid-rows-12', 'grid-rows-99', 'grid-rows-[123]']), ).toMatchInlineSnapshot(` - ".grid-rows-12 { + ".grid-rows-\\[123\\] { + grid-template-rows: 123px; + } + + .grid-rows-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } @@ -4269,10 +4273,6 @@ test('grid-rows', () => { grid-template-rows: repeat(99, minmax(0, 1fr)); } - .grid-rows-\\[123\\] { - grid-template-rows: 123px; - } - .grid-rows-none { grid-template-rows: none; } @@ -4646,12 +4646,12 @@ test('gap', () => { --spacing-4: 1rem; } - .gap-4 { - gap: 1rem; - } - .gap-\\[4px\\] { gap: 4px; + } + + .gap-4 { + gap: 1rem; }" `) expect(run(['gap', '-gap-4', '-gap-[4px]'])).toEqual('') @@ -4673,12 +4673,12 @@ test('gap-x', () => { --spacing-4: 1rem; } - .gap-x-4 { - column-gap: 1rem; - } - .gap-x-\\[4px\\] { column-gap: 4px; + } + + .gap-x-4 { + column-gap: 1rem; }" `) expect(run(['gap-x', '-gap-x-4', '-gap-x-[4px]'])).toEqual('') @@ -4700,12 +4700,12 @@ test('gap-y', () => { --spacing-4: 1rem; } - .gap-y-4 { - row-gap: 1rem; - } - .gap-y-\\[4px\\] { row-gap: 4px; + } + + .gap-y-4 { + row-gap: 1rem; }" `) expect(run(['gap-y', '-gap-y-4', '-gap-y-[4px]'])).toEqual('') @@ -4732,16 +4732,16 @@ test('space-x', () => { margin-inline-end: calc(calc(1rem * -1) * var(--tw-space-x-reverse)); } - :where(.space-x-4 > :not([hidden]) ~ :not([hidden])) { - margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse))); - margin-inline-end: calc(1rem * var(--tw-space-x-reverse)); - } - :where(.space-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { margin-inline-start: calc(4px * calc(1 - var(--tw-space-x-reverse))); margin-inline-end: calc(4px * var(--tw-space-x-reverse)); } + :where(.space-x-4 > :not([hidden]) ~ :not([hidden])) { + margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + margin-inline-end: calc(1rem * var(--tw-space-x-reverse)); + } + @property --tw-space-x-reverse { syntax: ""; inherits: false; @@ -4772,16 +4772,16 @@ test('space-y', () => { margin-top: calc(calc(1rem * -1) * calc(1 - var(--tw-space-y-reverse))); } - :where(.space-y-4 > :not([hidden]) ~ :not([hidden])) { - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - } - :where(.space-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { margin-bottom: calc(4px * var(--tw-space-y-reverse)); margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse))); } + :where(.space-y-4 > :not([hidden]) ~ :not([hidden])) { + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + } + @property --tw-space-y-reverse { syntax: ""; inherits: false; @@ -4836,6 +4836,12 @@ test('divide-x', () => { border-inline-start-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } + :where(.divide-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { + border-inline-style: var(--tw-border-style); + border-inline-end-width: calc(4px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); + } + :where(.divide-x-123 > :not([hidden]) ~ :not([hidden])) { border-inline-style: var(--tw-border-style); border-inline-end-width: calc(123px * var(--tw-divide-x-reverse)); @@ -4848,12 +4854,6 @@ test('divide-x', () => { border-inline-start-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } - :where(.divide-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { - border-inline-style: var(--tw-border-style); - border-inline-end-width: calc(4px * var(--tw-divide-x-reverse)); - border-inline-start-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); - } - @property --tw-divide-x-reverse { syntax: ""; inherits: false; @@ -4921,21 +4921,21 @@ test('divide-y', () => { border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } - :where(.divide-y-123 > :not([hidden]) ~ :not([hidden])) { + :where(.divide-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { border-top-style: var(--tw-border-style); border-bottom-style: var(--tw-border-style); - border-bottom-width: calc(123px * var(--tw-divide-y-reverse)); - border-top-width: calc(123px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(4px * var(--tw-divide-y-reverse)); + border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); } - :where(.divide-y-4 > :not([hidden]) ~ :not([hidden])) { + :where(.divide-y-123 > :not([hidden]) ~ :not([hidden])) { border-top-style: var(--tw-border-style); border-bottom-style: var(--tw-border-style); - border-bottom-width: calc(4px * var(--tw-divide-y-reverse)); - border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(123px * var(--tw-divide-y-reverse)); + border-top-width: calc(123px * calc(1 - var(--tw-divide-y-reverse))); } - :where(.divide-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-y-4 > :not([hidden]) ~ :not([hidden])) { border-top-style: var(--tw-border-style); border-bottom-style: var(--tw-border-style); border-bottom-width: calc(4px * var(--tw-divide-y-reverse)); @@ -5098,7 +5098,7 @@ test('accent', () => { accent-color: #08c; } - .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { + .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\], .accent-\\[\\#0088cc\\]\\/50 { accent-color: #0088cc80; } @@ -5106,7 +5106,7 @@ test('accent', () => { accent-color: currentColor; } - .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] { + .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\], .accent-current\\/50 { accent-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -5114,7 +5114,7 @@ test('accent', () => { accent-color: #ef4444; } - .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] { + .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\], .accent-red-500\\/50 { accent-color: #ef444480; } @@ -5176,7 +5176,7 @@ test('caret', () => { caret-color: #08c; } - .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { + .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\], .caret-\\[\\#0088cc\\]\\/50 { caret-color: #0088cc80; } @@ -5184,7 +5184,7 @@ test('caret', () => { caret-color: currentColor; } - .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] { + .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\], .caret-current\\/50 { caret-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -5192,7 +5192,7 @@ test('caret', () => { caret-color: #ef4444; } - .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] { + .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\], .caret-red-500\\/50 { caret-color: #ef444480; } @@ -5254,15 +5254,15 @@ test('divide-color', () => { border-color: #08c; } - :where(.divide-\\[\\#0088cc\\]\\/50 > :not([hidden]) ~ :not([hidden])) { + :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { border-color: #0088cc80; } - :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { border-color: #0088cc80; } - :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-\\[\\#0088cc\\]\\/50 > :not([hidden]) ~ :not([hidden])) { border-color: #0088cc80; } @@ -5270,15 +5270,15 @@ test('divide-color', () => { border-color: currentColor; } - :where(.divide-current\\/50 > :not([hidden]) ~ :not([hidden])) { + :where(.divide-current\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { border-color: color-mix(in srgb, currentColor 50%, transparent); } - :where(.divide-current\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-current\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { border-color: color-mix(in srgb, currentColor 50%, transparent); } - :where(.divide-current\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-current\\/50 > :not([hidden]) ~ :not([hidden])) { border-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -5286,15 +5286,15 @@ test('divide-color', () => { border-color: #ef4444; } - :where(.divide-red-500\\/50 > :not([hidden]) ~ :not([hidden])) { + :where(.divide-red-500\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { border-color: #ef444480; } - :where(.divide-red-500\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-red-500\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { border-color: #ef444480; } - :where(.divide-red-500\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-red-500\\/50 > :not([hidden]) ~ :not([hidden])) { border-color: #ef444480; } @@ -6801,27 +6801,27 @@ test('bg', () => { --color-red-500: #ef4444; } - .bg-\\[\\#0088cc\\] { - background-color: #08c; + .bg-\\[--some-var\\] { + background-color: var(--some-var); } - .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { - background-color: #0088cc80; + .bg-\\[--some-var\\]\\/\\[0\\.5\\], .bg-\\[--some-var\\]\\/\\[50\\%\\], .bg-\\[--some-var\\]\\/50 { + background-color: color-mix(in srgb, var(--some-var) 50%, transparent); } - .bg-\\[--some-var\\] { - background-color: var(--some-var); + .bg-\\[\\#0088cc\\] { + background-color: #08c; } - .bg-\\[--some-var\\]\\/50, .bg-\\[--some-var\\]\\/\\[0\\.5\\], .bg-\\[--some-var\\]\\/\\[50\\%\\] { - background-color: color-mix(in srgb, var(--some-var) 50%, transparent); + .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\], .bg-\\[\\#0088cc\\]\\/50 { + background-color: #0088cc80; } .bg-\\[color\\:--some-var\\] { background-color: var(--some-var); } - .bg-\\[color\\:--some-var\\]\\/50, .bg-\\[color\\:--some-var\\]\\/\\[0\\.5\\], .bg-\\[color\\:--some-var\\]\\/\\[50\\%\\] { + .bg-\\[color\\:--some-var\\]\\/\\[0\\.5\\], .bg-\\[color\\:--some-var\\]\\/\\[50\\%\\], .bg-\\[color\\:--some-var\\]\\/50 { background-color: color-mix(in srgb, var(--some-var) 50%, transparent); } @@ -6829,7 +6829,7 @@ test('bg', () => { background-color: currentColor; } - .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] { + .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\], .bg-current\\/50 { background-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -6841,7 +6841,7 @@ test('bg', () => { background-color: #ef4444; } - .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] { + .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\], .bg-red-500\\/50 { background-color: #ef444480; } @@ -6857,14 +6857,14 @@ test('bg', () => { background-image: linear-gradient(red, #00f); } - .bg-\\[url\\(\\/image\\.png\\)\\] { - background-image: url("/image.png"); - } - .bg-\\[url\\:--my-url\\] { background-image: var(--my-url); } + .bg-\\[url\\(\\/image\\.png\\)\\] { + background-image: url("/image.png"); + } + .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops, )); } @@ -6937,14 +6937,14 @@ test('bg', () => { background-attachment: scroll; } - .bg-\\[120px\\] { - background-position: 120px; - } - .bg-\\[120px_120px\\] { background-position: 120px 120px; } + .bg-\\[120px\\] { + background-position: 120px; + } + .bg-\\[50\\%\\] { background-position: 50%; } @@ -7137,23 +7137,23 @@ test('from', () => { --color-red-500: #ef4444; } - .from-\\[\\#0088cc\\] { - --tw-gradient-from: #08c; + .from-\\[--my-color\\] { + --tw-gradient-from: var(--my-color); --tw-gradient-stops: var(--tw-gradient-via-stops, 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: #0088cc80; + .from-\\[--my-color\\]\\/\\[0\\.5\\], .from-\\[--my-color\\]\\/\\[50\\%\\], .from-\\[--my-color\\]\\/50 { + --tw-gradient-from: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[--my-color\\] { - --tw-gradient-from: var(--my-color); + .from-\\[\\#0088cc\\] { + --tw-gradient-from: #08c; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[--my-color\\]\\/50, .from-\\[--my-color\\]\\/\\[0\\.5\\], .from-\\[--my-color\\]\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in srgb, var(--my-color) 50%, transparent); + .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\], .from-\\[\\#0088cc\\]\\/50 { + --tw-gradient-from: #0088cc80; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7162,7 +7162,7 @@ test('from', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[color\\:--my-color\\]\\/50, .from-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .from-\\[color\\:--my-color\\]\\/\\[50\\%\\] { + .from-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .from-\\[color\\:--my-color\\]\\/\\[50\\%\\], .from-\\[color\\:--my-color\\]\\/50 { --tw-gradient-from: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7172,7 +7172,7 @@ test('from', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] { + .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\], .from-current\\/50 { --tw-gradient-from: color-mix(in srgb, currentColor 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7182,7 +7182,7 @@ test('from', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] { + .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\], .from-red-500\\/50 { --tw-gradient-from: #ef444480; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7192,18 +7192,6 @@ test('from', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, 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-100\\% { - --tw-gradient-from-position: 100%; - } - - .from-5\\% { - --tw-gradient-from-position: 5%; - } - .from-\\[50\\%\\] { --tw-gradient-from-position: 50%; } @@ -7216,6 +7204,18 @@ test('from', () => { --tw-gradient-from-position: var(--my-position); } + .from-0\\% { + --tw-gradient-from-position: 0%; + } + + .from-100\\% { + --tw-gradient-from-position: 100%; + } + + .from-5\\% { + --tw-gradient-from-position: 5%; + } + @property --tw-gradient-from { syntax: ""; inherits: false; @@ -7338,26 +7338,26 @@ test('via', () => { --color-red-500: #ef4444; } - .via-\\[\\#0088cc\\] { - --tw-gradient-via: #08c; + .via-\\[--my-color\\] { + --tw-gradient-via: var(--my-color); --tw-gradient-via-stops: 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: #0088cc80; + .via-\\[--my-color\\]\\/\\[0\\.5\\], .via-\\[--my-color\\]\\/\\[50\\%\\], .via-\\[--my-color\\]\\/50 { + --tw-gradient-via: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-via-stops: 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-\\[--my-color\\] { - --tw-gradient-via: var(--my-color); + .via-\\[\\#0088cc\\] { + --tw-gradient-via: #08c; --tw-gradient-via-stops: 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-\\[--my-color\\]\\/50, .via-\\[--my-color\\]\\/\\[0\\.5\\], .via-\\[--my-color\\]\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in srgb, var(--my-color) 50%, transparent); + .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\], .via-\\[\\#0088cc\\]\\/50 { + --tw-gradient-via: #0088cc80; --tw-gradient-via-stops: 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); } @@ -7368,7 +7368,7 @@ test('via', () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[color\\:--my-color\\]\\/50, .via-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .via-\\[color\\:--my-color\\]\\/\\[50\\%\\] { + .via-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .via-\\[color\\:--my-color\\]\\/\\[50\\%\\], .via-\\[color\\:--my-color\\]\\/50 { --tw-gradient-via: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-via-stops: 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); @@ -7380,7 +7380,7 @@ test('via', () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] { + .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\], .via-current\\/50 { --tw-gradient-via: color-mix(in srgb, currentColor 50%, transparent); --tw-gradient-via-stops: 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); @@ -7392,7 +7392,7 @@ test('via', () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] { + .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\], .via-red-500\\/50 { --tw-gradient-via: #ef444480; --tw-gradient-via-stops: 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); @@ -7404,18 +7404,6 @@ test('via', () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-0\\% { - --tw-gradient-via-position: 0%; - } - - .via-100\\% { - --tw-gradient-via-position: 100%; - } - - .via-5\\% { - --tw-gradient-via-position: 5%; - } - .via-\\[50\\%\\] { --tw-gradient-via-position: 50%; } @@ -7428,6 +7416,18 @@ test('via', () => { --tw-gradient-via-position: var(--my-position); } + .via-0\\% { + --tw-gradient-via-position: 0%; + } + + .via-100\\% { + --tw-gradient-via-position: 100%; + } + + .via-5\\% { + --tw-gradient-via-position: 5%; + } + @property --tw-gradient-from { syntax: ""; inherits: false; @@ -7548,23 +7548,23 @@ test('to', () => { --color-red-500: #ef4444; } - .to-\\[\\#0088cc\\] { - --tw-gradient-to: #08c; + .to-\\[--my-color\\] { + --tw-gradient-to: var(--my-color); --tw-gradient-stops: var(--tw-gradient-via-stops, 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: #0088cc80; + .to-\\[--my-color\\]\\/\\[0\\.5\\], .to-\\[--my-color\\]\\/\\[50\\%\\], .to-\\[--my-color\\]\\/50 { + --tw-gradient-to: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[--my-color\\] { - --tw-gradient-to: var(--my-color); + .to-\\[\\#0088cc\\] { + --tw-gradient-to: #08c; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[--my-color\\]\\/50, .to-\\[--my-color\\]\\/\\[0\\.5\\], .to-\\[--my-color\\]\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in srgb, var(--my-color) 50%, transparent); + .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\], .to-\\[\\#0088cc\\]\\/50 { + --tw-gradient-to: #0088cc80; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7573,7 +7573,7 @@ test('to', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[color\\:--my-color\\]\\/50, .to-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .to-\\[color\\:--my-color\\]\\/\\[50\\%\\] { + .to-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .to-\\[color\\:--my-color\\]\\/\\[50\\%\\], .to-\\[color\\:--my-color\\]\\/50 { --tw-gradient-to: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7583,7 +7583,7 @@ test('to', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] { + .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\], .to-current\\/50 { --tw-gradient-to: color-mix(in srgb, currentColor 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7593,7 +7593,7 @@ test('to', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] { + .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\], .to-red-500\\/50 { --tw-gradient-to: #ef444480; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7603,18 +7603,6 @@ test('to', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, 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-100\\% { - --tw-gradient-to-position: 100%; - } - - .to-5\\% { - --tw-gradient-to-position: 5%; - } - .to-\\[50\\%\\] { --tw-gradient-to-position: 50%; } @@ -7627,6 +7615,18 @@ test('to', () => { --tw-gradient-to-position: var(--my-position); } + .to-0\\% { + --tw-gradient-to-position: 0%; + } + + .to-100\\% { + --tw-gradient-to-position: 100%; + } + + .to-5\\% { + --tw-gradient-to-position: 5%; + } + @property --tw-gradient-from { syntax: ""; inherits: false; @@ -8021,7 +8021,7 @@ test('fill', () => { fill: #08c; } - .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { + .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\], .fill-\\[\\#0088cc\\]\\/50 { fill: #0088cc80; } @@ -8029,7 +8029,7 @@ test('fill', () => { fill: currentColor; } - .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] { + .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\], .fill-current\\/50 { fill: color-mix(in srgb, currentColor 50%, transparent); } @@ -8037,7 +8037,7 @@ test('fill', () => { fill: #ef4444; } - .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] { + .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\], .fill-red-500\\/50 { fill: #ef444480; } @@ -8116,27 +8116,27 @@ test('stroke', () => { --color-red-500: #ef4444; } - .stroke-\\[\\#0088cc\\] { - stroke: #08c; + .stroke-\\[--my-color\\] { + stroke: var(--my-color); } - .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { - stroke: #0088cc80; + .stroke-\\[--my-color\\]\\/\\[0\\.5\\], .stroke-\\[--my-color\\]\\/\\[50\\%\\], .stroke-\\[--my-color\\]\\/50 { + stroke: color-mix(in srgb, var(--my-color) 50%, transparent); } - .stroke-\\[--my-color\\] { - stroke: var(--my-color); + .stroke-\\[\\#0088cc\\] { + stroke: #08c; } - .stroke-\\[--my-color\\]\\/50, .stroke-\\[--my-color\\]\\/\\[0\\.5\\], .stroke-\\[--my-color\\]\\/\\[50\\%\\] { - stroke: color-mix(in srgb, var(--my-color) 50%, transparent); + .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\], .stroke-\\[\\#0088cc\\]\\/50 { + stroke: #0088cc80; } .stroke-\\[color\\:--my-color\\] { stroke: var(--my-color); } - .stroke-\\[color\\:--my-color\\]\\/50, .stroke-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .stroke-\\[color\\:--my-color\\]\\/\\[50\\%\\] { + .stroke-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .stroke-\\[color\\:--my-color\\]\\/\\[50\\%\\], .stroke-\\[color\\:--my-color\\]\\/50 { stroke: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -8144,7 +8144,7 @@ test('stroke', () => { stroke: currentColor; } - .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] { + .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\], .stroke-current\\/50 { stroke: color-mix(in srgb, currentColor 50%, transparent); } @@ -8156,7 +8156,7 @@ test('stroke', () => { stroke: #ef4444; } - .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] { + .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\], .stroke-red-500\\/50 { stroke: #ef444480; } @@ -8164,18 +8164,6 @@ test('stroke', () => { stroke: #0000; } - .stroke-0 { - stroke-width: 0; - } - - .stroke-1 { - stroke-width: 1px; - } - - .stroke-2 { - stroke-width: 2px; - } - .stroke-\\[1\\.5\\] { stroke-width: 1.5px; } @@ -8190,6 +8178,18 @@ test('stroke', () => { .stroke-\\[length\\:--my-width\\], .stroke-\\[number\\:--my-width\\], .stroke-\\[percentage\\:--my-width\\] { stroke-width: var(--my-width); + } + + .stroke-0 { + stroke-width: 0; + } + + .stroke-1 { + stroke-width: 1px; + } + + .stroke-2 { + stroke-width: 2px; }" `) expect( @@ -8332,12 +8332,12 @@ test('p', () => { --spacing-4: 1rem; } - .p-4 { - padding: 1rem; - } - .p-\\[4px\\] { padding: 4px; + } + + .p-4 { + padding: 1rem; }" `) expect(run(['p', '-p-4', '-p-[4px]'])).toEqual('') @@ -8359,14 +8359,14 @@ test('px', () => { --spacing-4: 1rem; } - .px-4 { - padding-left: 1rem; - padding-right: 1rem; - } - .px-\\[4px\\] { padding-left: 4px; padding-right: 4px; + } + + .px-4 { + padding-left: 1rem; + padding-right: 1rem; }" `) expect(run(['px', '-px-4', '-px-[4px]'])).toEqual('') @@ -8388,14 +8388,14 @@ test('py', () => { --spacing-4: 1rem; } - .py-4 { - padding-top: 1rem; - padding-bottom: 1rem; - } - .py-\\[4px\\] { padding-top: 4px; padding-bottom: 4px; + } + + .py-4 { + padding-top: 1rem; + padding-bottom: 1rem; }" `) expect(run(['py', '-py-4', '-py-[4px]'])).toEqual('') @@ -8417,12 +8417,12 @@ test('pt', () => { --spacing-4: 1rem; } - .pt-4 { - padding-top: 1rem; - } - .pt-\\[4px\\] { padding-top: 4px; + } + + .pt-4 { + padding-top: 1rem; }" `) expect(run(['pt', '-pt-4', '-pt-[4px]'])).toEqual('') @@ -8444,12 +8444,12 @@ test('ps', () => { --spacing-4: 1rem; } - .ps-4 { - padding-inline-start: 1rem; - } - .ps-\\[4px\\] { padding-inline-start: 4px; + } + + .ps-4 { + padding-inline-start: 1rem; }" `) expect(run(['ps', '-ps-4', '-ps-[4px]'])).toEqual('') @@ -8471,12 +8471,12 @@ test('pe', () => { --spacing-4: 1rem; } - .pe-4 { - padding-inline-end: 1rem; - } - .pe-\\[4px\\] { padding-inline-end: 4px; + } + + .pe-4 { + padding-inline-end: 1rem; }" `) expect(run(['pe', '-pe-4', '-pe-[4px]'])).toEqual('') @@ -8498,12 +8498,12 @@ test('pr', () => { --spacing-4: 1rem; } - .pr-4 { - padding-right: 1rem; - } - .pr-\\[4px\\] { padding-right: 4px; + } + + .pr-4 { + padding-right: 1rem; }" `) expect(run(['pr', '-pr-4', '-pr-[4px]'])).toEqual('') @@ -8525,12 +8525,12 @@ test('pb', () => { --spacing-4: 1rem; } - .pb-4 { - padding-bottom: 1rem; - } - .pb-\\[4px\\] { padding-bottom: 4px; + } + + .pb-4 { + padding-bottom: 1rem; }" `) expect(run(['pb', '-pb-4', '-pb-[4px]'])).toEqual('') @@ -8552,12 +8552,12 @@ test('pl', () => { --spacing-4: 1rem; } - .pl-4 { - padding-left: 1rem; - } - .pl-\\[4px\\] { padding-left: 4px; + } + + .pl-4 { + padding-left: 1rem; }" `) expect(run(['pl', '-pl-4', '-pl-[4px]'])).toEqual('') @@ -8865,15 +8865,15 @@ test('placeholder', () => { color: #08c; } - .placeholder-\\[\\#0088cc\\]\\/50::placeholder { + .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder { color: #0088cc80; } - .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder { + .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { color: #0088cc80; } - .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { + .placeholder-\\[\\#0088cc\\]\\/50::placeholder { color: #0088cc80; } @@ -8881,15 +8881,15 @@ test('placeholder', () => { color: currentColor; } - .placeholder-current\\/50::placeholder { + .placeholder-current\\/\\[0\\.5\\]::placeholder { color: color-mix(in srgb, currentColor 50%, transparent); } - .placeholder-current\\/\\[0\\.5\\]::placeholder { + .placeholder-current\\/\\[50\\%\\]::placeholder { color: color-mix(in srgb, currentColor 50%, transparent); } - .placeholder-current\\/\\[50\\%\\]::placeholder { + .placeholder-current\\/50::placeholder { color: color-mix(in srgb, currentColor 50%, transparent); } @@ -8897,15 +8897,15 @@ test('placeholder', () => { color: #ef4444; } - .placeholder-red-500\\/50::placeholder { + .placeholder-red-500\\/\\[0\\.5\\]::placeholder { color: #ef444480; } - .placeholder-red-500\\/\\[0\\.5\\]::placeholder { + .placeholder-red-500\\/\\[50\\%\\]::placeholder { color: #ef444480; } - .placeholder-red-500\\/\\[50\\%\\]::placeholder { + .placeholder-red-500\\/50::placeholder { color: #ef444480; } @@ -8992,30 +8992,30 @@ test('decoration', () => { --color-red-500: #ef4444; } - .decoration-\\[\\#0088cc\\] { - text-decoration-color: #08c; - } - - .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { - text-decoration-color: #0088cc80; - } - .decoration-\\[--my-color\\] { -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } - .decoration-\\[--my-color\\]\\/50, .decoration-\\[--my-color\\]\\/\\[0\\.5\\], .decoration-\\[--my-color\\]\\/\\[50\\%\\] { + .decoration-\\[--my-color\\]\\/\\[0\\.5\\], .decoration-\\[--my-color\\]\\/\\[50\\%\\], .decoration-\\[--my-color\\]\\/50 { -webkit-text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent); text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent); } + .decoration-\\[\\#0088cc\\] { + text-decoration-color: #08c; + } + + .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\], .decoration-\\[\\#0088cc\\]\\/50 { + text-decoration-color: #0088cc80; + } + .decoration-\\[color\\:--my-color\\] { -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } - .decoration-\\[color\\:--my-color\\]\\/50, .decoration-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .decoration-\\[color\\:--my-color\\]\\/\\[50\\%\\] { + .decoration-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .decoration-\\[color\\:--my-color\\]\\/\\[50\\%\\], .decoration-\\[color\\:--my-color\\]\\/50 { -webkit-text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent); text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -9024,7 +9024,7 @@ test('decoration', () => { text-decoration-color: currentColor; } - .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] { + .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\], .decoration-current\\/50 { -webkit-text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -9033,7 +9033,7 @@ test('decoration', () => { text-decoration-color: #ef4444; } - .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] { + .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\], .decoration-red-500\\/50 { text-decoration-color: #ef444480; } @@ -9061,6 +9061,18 @@ test('decoration', () => { text-decoration-style: wavy; } + .decoration-\\[12px\\] { + text-decoration-thickness: 12px; + } + + .decoration-\\[50\\%\\] { + text-decoration-thickness: calc(1em / 2); + } + + .decoration-\\[length\\:--my-thickness\\], .decoration-\\[percentage\\:--my-thickness\\] { + text-decoration-thickness: var(--my-thickness); + } + .decoration-0 { text-decoration-thickness: 0; } @@ -9081,18 +9093,6 @@ test('decoration', () => { text-decoration-thickness: 4px; } - .decoration-\\[12px\\] { - text-decoration-thickness: 12px; - } - - .decoration-\\[50\\%\\] { - text-decoration-thickness: calc(1em / 2); - } - - .decoration-\\[length\\:--my-thickness\\], .decoration-\\[percentage\\:--my-thickness\\] { - text-decoration-thickness: var(--my-thickness); - } - .decoration-auto { text-decoration-thickness: auto; } @@ -9234,13 +9234,13 @@ test('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, ); } - .brightness-50 { - --tw-brightness: brightness(50%); + .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, ); } - .brightness-\\[1\\.23\\] { - --tw-brightness: brightness(1.23); + .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, ); } @@ -9255,12 +9255,7 @@ test('filter', () => { } .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, ); - } - - .grayscale-0 { - --tw-grayscale: grayscale(0%); + --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, ); } @@ -9269,8 +9264,8 @@ test('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, ); } - .hue-rotate-15 { - --tw-hue-rotate: hue-rotate(15deg); + .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, ); } @@ -9279,13 +9274,13 @@ test('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, ); } - .invert { - --tw-invert: invert(100%); + .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, ); } - .invert-0 { - --tw-invert: invert(0%); + .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, ); } @@ -9294,8 +9289,8 @@ test('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, ); } - .saturate-0 { - --tw-saturate: saturate(0%); + .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, ); } @@ -9309,13 +9304,13 @@ test('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, ); } - .sepia { - --tw-sepia: sepia(100%); + .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, ); } - .sepia-0 { - --tw-sepia: sepia(0%); + .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, ); } @@ -9329,8 +9324,8 @@ test('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, ); } - .contrast-50 { - --tw-contrast: contrast(50%); + .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, ); } @@ -9339,6 +9334,11 @@ test('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, ); } + .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 { 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, ); } @@ -9484,26 +9484,20 @@ test('backdrop-filter', () => { 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, ); - } - .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, ); } - .backdrop-grayscale { - --tw-backdrop-grayscale: grayscale(100%); + .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, ); } - .backdrop-grayscale-0 { - --tw-backdrop-grayscale: grayscale(0%); + .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, ); } @@ -9514,8 +9508,8 @@ test('backdrop-filter', () => { 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); + .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, ); } @@ -9526,14 +9520,14 @@ test('backdrop-filter', () => { 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%); + .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, ); } - .backdrop-invert-0 { - --tw-backdrop-invert: invert(0%); + .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, ); } @@ -9544,26 +9538,26 @@ test('backdrop-filter', () => { 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%); + .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, ); } - .backdrop-opacity-71 { - --tw-backdrop-opacity: opacity(71%); + .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, ); } - .backdrop-opacity-\\[0\\.5\\] { - --tw-backdrop-opacity: opacity(.5); + .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, ); } - .backdrop-saturate-0 { - --tw-backdrop-saturate: saturate(0%); + .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, ); } @@ -9580,14 +9574,14 @@ test('backdrop-filter', () => { 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%); + .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, ); } - .backdrop-sepia-0 { - --tw-backdrop-sepia: sepia(0%); + .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, ); } @@ -9604,8 +9598,8 @@ test('backdrop-filter', () => { 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%); + .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, ); } @@ -9616,6 +9610,12 @@ test('backdrop-filter', () => { 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, ); + } + .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, ); @@ -9795,16 +9795,16 @@ test('transition', () => { test('delay', () => { expect(run(['delay-123', 'delay-200', 'delay-[300ms]'])).toMatchInlineSnapshot(` - ".delay-123 { + ".delay-\\[300ms\\] { + transition-delay: .3s; + } + + .delay-123 { transition-delay: .123s; } .delay-200 { transition-delay: .2s; - } - - .delay-\\[300ms\\] { - transition-delay: .3s; }" `) expect(run(['delay', '-delay-200', '-delay-[300ms]'])).toEqual('') @@ -9812,16 +9812,16 @@ test('delay', () => { test('duration', () => { expect(run(['duration-123', 'duration-200', 'duration-[300ms]'])).toMatchInlineSnapshot(` - ".duration-123 { + ".duration-\\[300ms\\] { + transition-duration: .3s; + } + + .duration-123 { transition-duration: .123s; } .duration-200 { transition-duration: .2s; - } - - .duration-\\[300ms\\] { - transition-duration: .3s; }" `) expect(run(['duration', '-duration-200', '-duration-[300ms]'])).toEqual('') @@ -10034,14 +10034,14 @@ test('leading', () => { --line-height-6: 1.5rem; } - .leading-6 { - line-height: 1.5rem; - } - .leading-\\[--value\\] { line-height: var(--value); } + .leading-6 { + line-height: 1.5rem; + } + .leading-none { line-height: 1; }" @@ -10270,11 +10270,6 @@ test('outline', () => { outline-width: 1px; } - .outline-0 { - outline-style: var(--tw-outline-style); - outline-width: 0; - } - .outline-\\[1\\.5\\] { outline-style: var(--tw-outline-style); outline-width: 1.5px; @@ -10295,27 +10290,32 @@ test('outline', () => { outline-width: var(--my-width); } - .outline-\\[\\#0088cc\\] { - outline-color: #08c; - } - - .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { - outline-color: #0088cc80; + .outline-0 { + outline-style: var(--tw-outline-style); + outline-width: 0; } .outline-\\[--value\\] { outline-color: var(--value); } - .outline-\\[--value\\]\\/50, .outline-\\[--value\\]\\/\\[0\\.5\\], .outline-\\[--value\\]\\/\\[50\\%\\] { + .outline-\\[--value\\]\\/\\[0\\.5\\], .outline-\\[--value\\]\\/\\[50\\%\\], .outline-\\[--value\\]\\/50 { outline-color: color-mix(in srgb, var(--value) 50%, transparent); } + .outline-\\[\\#0088cc\\] { + outline-color: #08c; + } + + .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\], .outline-\\[\\#0088cc\\]\\/50 { + outline-color: #0088cc80; + } + .outline-\\[black\\] { outline-color: #000; } - .outline-\\[black\\]\\/50, .outline-\\[black\\]\\/\\[0\\.5\\], .outline-\\[black\\]\\/\\[50\\%\\] { + .outline-\\[black\\]\\/\\[0\\.5\\], .outline-\\[black\\]\\/\\[50\\%\\], .outline-\\[black\\]\\/50 { outline-color: #00000080; } @@ -10323,7 +10323,7 @@ test('outline', () => { outline-color: var(--value); } - .outline-\\[color\\:--value\\]\\/50, .outline-\\[color\\:--value\\]\\/\\[0\\.5\\], .outline-\\[color\\:--value\\]\\/\\[50\\%\\] { + .outline-\\[color\\:--value\\]\\/\\[0\\.5\\], .outline-\\[color\\:--value\\]\\/\\[50\\%\\], .outline-\\[color\\:--value\\]\\/50 { outline-color: color-mix(in srgb, var(--value) 50%, transparent); } @@ -10331,7 +10331,7 @@ test('outline', () => { outline-color: currentColor; } - .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] { + .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\], .outline-current\\/50 { outline-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -10339,7 +10339,7 @@ test('outline', () => { outline-color: #ef4444; } - .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] { + .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\], .outline-red-500\\/50 { outline-color: #ef444480; } @@ -10414,20 +10414,20 @@ test('outline-offset', () => { '-outline-offset-[--value]', ]), ).toMatchInlineSnapshot(` - ".-outline-offset-4 { - outline-offset: calc(4px * -1); - } - - .-outline-offset-\\[--value\\] { + ".-outline-offset-\\[--value\\] { outline-offset: calc(var(--value) * -1); } - .outline-offset-4 { - outline-offset: 4px; + .-outline-offset-4 { + outline-offset: calc(4px * -1); } .outline-offset-\\[--value\\] { outline-offset: var(--value); + } + + .outline-offset-4 { + outline-offset: 4px; }" `) expect(run(['outline-offset'])).toEqual('') @@ -10435,12 +10435,12 @@ test('outline-offset', () => { test('opacity', () => { expect(run(['opacity-15', 'opacity-[--value]'])).toMatchInlineSnapshot(` - ".opacity-15 { - opacity: .15; + ".opacity-\\[--value\\] { + opacity: var(--value); } - .opacity-\\[--value\\] { - opacity: var(--value); + .opacity-15 { + opacity: .15; }" `) expect(run(['opacity', '-opacity-15', '-opacity-[--value]'])).toEqual('') @@ -10465,7 +10465,11 @@ test('underline-offset', () => { ], ), ).toMatchInlineSnapshot(` - ".-underline-offset-123 { + ".-underline-offset-\\[--value\\] { + text-underline-offset: calc(var(--value) * -1); + } + + .-underline-offset-123 { text-underline-offset: calc(123px * -1); } @@ -10473,8 +10477,8 @@ test('underline-offset', () => { text-underline-offset: calc(4px * -1); } - .-underline-offset-\\[--value\\] { - text-underline-offset: calc(var(--value) * -1); + .underline-offset-\\[--value\\] { + text-underline-offset: var(--value); } .underline-offset-123 { @@ -10485,10 +10489,6 @@ test('underline-offset', () => { text-underline-offset: 4px; } - .underline-offset-\\[--value\\] { - text-underline-offset: var(--value); - } - .underline-offset-auto { text-underline-offset: auto; }" @@ -10594,14 +10594,14 @@ test('text', () => { line-height: 1.5rem; } - .text-sm\\/6 { + .text-sm\\/\\[4px\\] { font-size: .875rem; - line-height: 1.5rem; + line-height: 4px; } - .text-sm\\/\\[4px\\] { + .text-sm\\/6 { font-size: .875rem; - line-height: 4px; + line-height: 1.5rem; } .text-\\[12px\\] { @@ -10636,27 +10636,27 @@ test('text', () => { font-size: xx-large; } - .text-\\[\\#0088cc\\] { - color: #08c; + .text-\\[--my-color\\] { + color: var(--my-color); } - .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { - color: #0088cc80; + .text-\\[--my-color\\]\\/\\[0\\.5\\], .text-\\[--my-color\\]\\/\\[50\\%\\], .text-\\[--my-color\\]\\/50 { + color: color-mix(in srgb, var(--my-color) 50%, transparent); } - .text-\\[--my-color\\] { - color: var(--my-color); + .text-\\[\\#0088cc\\] { + color: #08c; } - .text-\\[--my-color\\]\\/50, .text-\\[--my-color\\]\\/\\[0\\.5\\], .text-\\[--my-color\\]\\/\\[50\\%\\] { - color: color-mix(in srgb, var(--my-color) 50%, transparent); + .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\], .text-\\[\\#0088cc\\]\\/50 { + color: #0088cc80; } .text-\\[color\\:--my-color\\] { color: var(--my-color); } - .text-\\[color\\:--my-color\\]\\/50, .text-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .text-\\[color\\:--my-color\\]\\/\\[50\\%\\] { + .text-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .text-\\[color\\:--my-color\\]\\/\\[50\\%\\], .text-\\[color\\:--my-color\\]\\/50 { color: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -10664,7 +10664,7 @@ test('text', () => { color: currentColor; } - .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] { + .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\], .text-current\\/50 { color: color-mix(in srgb, currentColor 50%, transparent); } @@ -10672,7 +10672,7 @@ test('text', () => { color: #ef4444; } - .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] { + .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\], .text-red-500\\/50 { color: #ef444480; } @@ -10801,7 +10801,7 @@ test('shadow', () => { --tw-shadow: var(--tw-shadow-colored); } - .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\], .shadow-\\[\\#0088cc\\]\\/50 { --tw-shadow-color: #0088cc80; --tw-shadow: var(--tw-shadow-colored); } @@ -10811,7 +10811,7 @@ test('shadow', () => { --tw-shadow: var(--tw-shadow-colored); } - .shadow-\\[color\\:--value\\]\\/50, .shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .shadow-\\[color\\:--value\\]\\/\\[50\\%\\] { + .shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .shadow-\\[color\\:--value\\]\\/\\[50\\%\\], .shadow-\\[color\\:--value\\]\\/50 { --tw-shadow-color: color-mix(in srgb, var(--value) 50%, transparent); --tw-shadow: var(--tw-shadow-colored); } @@ -10821,7 +10821,7 @@ test('shadow', () => { --tw-shadow: var(--tw-shadow-colored); } - .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] { + .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\], .shadow-current\\/50 { --tw-shadow-color: color-mix(in srgb, currentColor 50%, transparent); --tw-shadow: var(--tw-shadow-colored); } @@ -10831,7 +10831,7 @@ test('shadow', () => { --tw-shadow: var(--tw-shadow-colored); } - .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] { + .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\], .shadow-red-500\\/50 { --tw-shadow-color: #ef444480; --tw-shadow: var(--tw-shadow-colored); } @@ -11027,7 +11027,7 @@ test('inset-shadow', () => { --tw-inset-shadow: var(--tw-inset-shadow-colored); } - .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { + .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\], .inset-shadow-\\[\\#0088cc\\]\\/50 { --tw-inset-shadow-color: #0088cc80; --tw-inset-shadow: var(--tw-inset-shadow-colored); } @@ -11037,7 +11037,7 @@ test('inset-shadow', () => { --tw-inset-shadow: var(--tw-inset-shadow-colored); } - .inset-shadow-\\[color\\:--value\\]\\/50, .inset-shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:--value\\]\\/\\[50\\%\\] { + .inset-shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:--value\\]\\/\\[50\\%\\], .inset-shadow-\\[color\\:--value\\]\\/50 { --tw-inset-shadow-color: color-mix(in srgb, var(--value) 50%, transparent); --tw-inset-shadow: var(--tw-inset-shadow-colored); } @@ -11047,7 +11047,7 @@ test('inset-shadow', () => { --tw-inset-shadow: var(--tw-inset-shadow-colored); } - .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] { + .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\], .inset-shadow-current\\/50 { --tw-inset-shadow-color: color-mix(in srgb, currentColor 50%, transparent); --tw-inset-shadow: var(--tw-inset-shadow-colored); } @@ -11057,7 +11057,7 @@ test('inset-shadow', () => { --tw-inset-shadow: var(--tw-inset-shadow-colored); } - .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] { + .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\], .inset-shadow-red-500\\/50 { --tw-inset-shadow-color: #ef444480; --tw-inset-shadow: var(--tw-inset-shadow-colored); } @@ -11212,6 +11212,16 @@ test('ring', () => { 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); + 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\\:--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); + 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); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -11232,37 +11242,27 @@ test('ring', () => { 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); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + .ring-\\[--my-color\\] { + --tw-ring-color: var(--my-color); } - .ring-\\[length\\:--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); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + .ring-\\[--my-color\\]\\/\\[0\\.5\\], .ring-\\[--my-color\\]\\/\\[50\\%\\], .ring-\\[--my-color\\]\\/50 { + --tw-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); } .ring-\\[\\#0088cc\\] { --tw-ring-color: #08c; } - .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\], .ring-\\[\\#0088cc\\]\\/50 { --tw-ring-color: #0088cc80; } - .ring-\\[--my-color\\] { - --tw-ring-color: var(--my-color); - } - - .ring-\\[--my-color\\]\\/50, .ring-\\[--my-color\\]\\/\\[0\\.5\\], .ring-\\[--my-color\\]\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); - } - .ring-\\[color\\:--my-color\\] { --tw-ring-color: var(--my-color); } - .ring-\\[color\\:--my-color\\]\\/50, .ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-\\[color\\:--my-color\\]\\/\\[50\\%\\] { + .ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-\\[color\\:--my-color\\]\\/\\[50\\%\\], .ring-\\[color\\:--my-color\\]\\/50 { --tw-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -11270,7 +11270,7 @@ test('ring', () => { --tw-ring-color: currentColor; } - .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] { + .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\], .ring-current\\/50 { --tw-ring-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -11278,7 +11278,7 @@ test('ring', () => { --tw-ring-color: #ef4444; } - .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] { + .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\], .ring-red-500\\/50 { --tw-ring-color: #ef444480; } @@ -11440,6 +11440,16 @@ test('inset-ring', () => { 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\\:--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-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); @@ -11460,37 +11470,27 @@ test('inset-ring', () => { 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-\\[--my-color\\] { + --tw-inset-ring-color: var(--my-color); } - .inset-ring-\\[length\\:--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-\\[--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[--my-color\\]\\/\\[50\\%\\], .inset-ring-\\[--my-color\\]\\/50 { + --tw-inset-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); } .inset-ring-\\[\\#0088cc\\] { --tw-inset-ring-color: #08c; } - .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { + .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\], .inset-ring-\\[\\#0088cc\\]\\/50 { --tw-inset-ring-color: #0088cc80; } - .inset-ring-\\[--my-color\\] { - --tw-inset-ring-color: var(--my-color); - } - - .inset-ring-\\[--my-color\\]\\/50, .inset-ring-\\[--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[--my-color\\]\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); - } - .inset-ring-\\[color\\:--my-color\\] { --tw-inset-ring-color: var(--my-color); } - .inset-ring-\\[color\\:--my-color\\]\\/50, .inset-ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[color\\:--my-color\\]\\/\\[50\\%\\] { + .inset-ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[color\\:--my-color\\]\\/\\[50\\%\\], .inset-ring-\\[color\\:--my-color\\]\\/50 { --tw-inset-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -11498,7 +11498,7 @@ test('inset-ring', () => { --tw-inset-ring-color: currentColor; } - .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] { + .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\], .inset-ring-current\\/50 { --tw-inset-ring-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -11506,7 +11506,7 @@ test('inset-ring', () => { --tw-inset-ring-color: #ef4444; } - .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] { + .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\], .inset-ring-red-500\\/50 { --tw-inset-ring-color: #ef444480; } @@ -11659,6 +11659,16 @@ test('ring-offset', () => { --color-red-500: #ef4444; } + .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); + } + + .ring-offset-\\[length\\:--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); + } + .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); @@ -11679,37 +11689,27 @@ test('ring-offset', () => { --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); + .ring-offset-\\[--my-color\\] { + --tw-ring-offset-color: var(--my-color); } - .ring-offset-\\[length\\:--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); + .ring-offset-\\[--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[--my-color\\]\\/\\[50\\%\\], .ring-offset-\\[--my-color\\]\\/50 { + --tw-ring-offset-color: color-mix(in srgb, var(--my-color) 50%, transparent); } .ring-offset-\\[\\#0088cc\\] { --tw-ring-offset-color: #08c; } - .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { + .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\], .ring-offset-\\[\\#0088cc\\]\\/50 { --tw-ring-offset-color: #0088cc80; } - .ring-offset-\\[--my-color\\] { - --tw-ring-offset-color: var(--my-color); - } - - .ring-offset-\\[--my-color\\]\\/50, .ring-offset-\\[--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[--my-color\\]\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in srgb, var(--my-color) 50%, transparent); - } - .ring-offset-\\[color\\:--my-color\\] { --tw-ring-offset-color: var(--my-color); } - .ring-offset-\\[color\\:--my-color\\]\\/50, .ring-offset-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[color\\:--my-color\\]\\/\\[50\\%\\] { + .ring-offset-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[color\\:--my-color\\]\\/\\[50\\%\\], .ring-offset-\\[color\\:--my-color\\]\\/50 { --tw-ring-offset-color: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -11717,7 +11717,7 @@ test('ring-offset', () => { --tw-ring-offset-color: currentColor; } - .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] { + .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\], .ring-offset-current\\/50 { --tw-ring-offset-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -11725,7 +11725,7 @@ test('ring-offset', () => { --tw-ring-offset-color: #ef4444; } - .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] { + .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\], .ring-offset-red-500\\/50 { --tw-ring-offset-color: #ef444480; } diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 675fa69316f2..1ab74ffaddba 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -1116,13 +1116,13 @@ test('min, max and unprefixed breakpoints', () => { } @media (width >= 1024px) { - .lg\\:flex { + .min-lg\\:flex { display: flex; } } @media (width >= 1024px) { - .min-lg\\:flex { + .lg\\:flex { display: flex; } }" @@ -1280,7 +1280,13 @@ test('supports', () => { expect( run(['supports-gap:grid', 'supports-[display:grid]:flex', 'supports-[selector(A_>_B)]:flex']), ).toMatchInlineSnapshot(` - "@supports (display: grid) { + "@supports (gap: var(--tw)) { + .supports-gap\\:grid { + display: grid; + } + } + + @supports (display: grid) { .supports-\\[display\\:grid\\]\\:flex { display: flex; } @@ -1290,12 +1296,6 @@ test('supports', () => { .supports-\\[selector\\(A_\\>_B\\)\\]\\:flex { display: flex; } - } - - @supports (gap: var(--tw)) { - .supports-gap\\:grid { - display: grid; - } }" `) }) @@ -1322,11 +1322,11 @@ test('not', () => { display: flex; } - .group-not-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(:checked) *) { + .group-not-\\[\\:checked\\]\\:flex:is(:where(.group):not(:checked) *) { display: flex; } - .group-not-\\[\\:checked\\]\\:flex:is(:where(.group):not(:checked) *) { + .group-not-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(:checked) *) { display: flex; } @@ -1334,11 +1334,11 @@ test('not', () => { display: flex; } - .peer-not-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name):not(:checked) ~ *) { + .peer-not-\\[\\:checked\\]\\:flex:is(:where(.peer):not(:checked) ~ *) { display: flex; } - .peer-not-\\[\\:checked\\]\\:flex:is(:where(.peer):not(:checked) ~ *) { + .peer-not-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name):not(:checked) ~ *) { display: flex; }" `) @@ -1362,11 +1362,11 @@ test('has', () => { display: flex; } - .group-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *) { + .group-has-\\[\\:checked\\]\\:flex:is(:where(.group):has(:checked) *) { display: flex; } - .group-has-\\[\\:checked\\]\\:flex:is(:where(.group):has(:checked) *) { + .group-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *) { display: flex; } @@ -1374,11 +1374,11 @@ test('has', () => { display: flex; } - .peer-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name):has(:checked) ~ *) { + .peer-has-\\[\\:checked\\]\\:flex:is(:where(.peer):has(:checked) ~ *) { display: flex; } - .peer-has-\\[\\:checked\\]\\:flex:is(:where(.peer):has(:checked) ~ *) { + .peer-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name):has(:checked) ~ *) { display: flex; } @@ -1405,43 +1405,43 @@ test('aria', () => { 'peer-aria-checked/parent-name:flex', ]), ).toMatchInlineSnapshot(` - ".group-aria-\\[modal\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-modal] *) { + ".group-aria-\\[modal\\]\\:flex:is(:where(.group)[aria-modal] *) { display: flex; } - .group-aria-\\[modal\\]\\:flex:is(:where(.group)[aria-modal] *) { + .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"] *) { + .group-aria-\\[modal\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-modal] *) { display: flex; } - .group-aria-checked\\:flex:is(:where(.group)[aria-checked="true"] *) { + .group-aria-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-checked="true"] *) { display: flex; } - .peer-aria-\\[modal\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name)[aria-modal] ~ *) { + .peer-aria-\\[modal\\]\\:flex:is(:where(.peer)[aria-modal] ~ *) { display: flex; } - .peer-aria-\\[modal\\]\\:flex:is(:where(.peer)[aria-modal] ~ *) { + .peer-aria-checked\\:flex:is(:where(.peer)[aria-checked="true"] ~ *) { display: flex; } - .peer-aria-checked\\/parent-name\\:flex:is(:where(.peer\\/parent-name)[aria-checked="true"] ~ *) { + .peer-aria-\\[modal\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name)[aria-modal] ~ *) { display: flex; } - .peer-aria-checked\\:flex:is(:where(.peer)[aria-checked="true"] ~ *) { + .peer-aria-checked\\/parent-name\\:flex:is(:where(.peer\\/parent-name)[aria-checked="true"] ~ *) { display: flex; } - .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"] { + .aria-checked\\:flex[aria-checked="true"] { display: flex; } - .aria-checked\\:flex[aria-checked="true"] { + .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"] { display: flex; }" `) @@ -1460,27 +1460,27 @@ test('data', () => { 'peer-data-[disabled]/parent-name:flex', ]), ).toMatchInlineSnapshot(` - ".group-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-disabled] *) { + ".group-data-\\[disabled\\]\\:flex:is(:where(.group)[data-disabled] *) { display: flex; } - .group-data-\\[disabled\\]\\:flex:is(:where(.group)[data-disabled] *) { + .group-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-disabled] *) { display: flex; } - .peer-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name)[data-disabled] ~ *) { + .peer-data-\\[disabled\\]\\:flex:is(:where(.peer)[data-disabled] ~ *) { display: flex; } - .peer-data-\\[disabled\\]\\:flex:is(:where(.peer)[data-disabled] ~ *) { + .peer-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name)[data-disabled] ~ *) { display: flex; } - .data-\\[potato\\=salad\\]\\:flex[data-potato="salad"] { + .data-disabled\\:flex[data-disabled] { display: flex; } - .data-disabled\\:flex[data-disabled] { + .data-\\[potato\\=salad\\]\\:flex[data-potato="salad"] { display: flex; }" `) @@ -1567,14 +1567,14 @@ test('container queries', () => { --width-lg: 1024px; } - @container name (width < 1024px) { - .\\@max-lg\\/name\\:flex { + @container (width < 1024px) { + .\\@max-lg\\:flex { display: flex; } } - @container (width < 1024px) { - .\\@max-lg\\:flex { + @container name (width < 1024px) { + .\\@max-lg\\/name\\:flex { display: flex; } } @@ -1615,12 +1615,6 @@ test('container queries', () => { } } - @container name (width >= 1024px) { - .\\@lg\\/name\\:flex { - display: flex; - } - } - @container (width >= 1024px) { .\\@lg\\:flex { display: flex; @@ -1628,7 +1622,7 @@ test('container queries', () => { } @container name (width >= 1024px) { - .\\@min-lg\\/name\\:flex { + .\\@lg\\/name\\:flex { display: flex; } } @@ -1637,6 +1631,12 @@ test('container queries', () => { .\\@min-lg\\:flex { display: flex; } + } + + @container name (width >= 1024px) { + .\\@min-lg\\/name\\:flex { + display: flex; + } }" `) }) From 0af2fdcba4ce47c73005b72b818058c17f70ac7b Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 9 Mar 2024 00:08:59 +0100 Subject: [PATCH 05/18] move parser functions to the `DesignSystem` This allows us to put all the parsers in the `DesignSystem`, this allows us to scope the parsers to the current design system (the current theme, current utility values and variants). The implementation of these parsers are also using a `DefaultMap` implementation. This allows us to make use of caching and only parse a candidate, parse a variant or compile AST nodes for a given raw candidate once if we've already done this work in the past. Again, this is scoped to the `DesignSystem` itself. This means that if the corresponding theme changes, then we will create a new `DesignSystem` entirely and the caches will be garbage collected. This is important because a candidate like `bg-primary` can be invalid in `DesignSystem` A, but can be valid in `DesignSystem` B and vice versa. --- packages/tailwindcss/src/candidate.bench.ts | 9 +- packages/tailwindcss/src/candidate.test.ts | 13 +- packages/tailwindcss/src/candidate.ts | 42 ++---- packages/tailwindcss/src/compile.ts | 144 ++++++++++---------- packages/tailwindcss/src/design-system.ts | 42 +++++- packages/tailwindcss/src/intellisense.ts | 9 +- 6 files changed, 134 insertions(+), 125 deletions(-) diff --git a/packages/tailwindcss/src/candidate.bench.ts b/packages/tailwindcss/src/candidate.bench.ts index f10e95d09cb2..f46dec7ec647 100644 --- a/packages/tailwindcss/src/candidate.bench.ts +++ b/packages/tailwindcss/src/candidate.bench.ts @@ -1,9 +1,8 @@ import { scanDir } from '@tailwindcss/oxide' import { bench } from 'vitest' -import { parseCandidate, parseVariant } from './candidate' +import { parseCandidate } from './candidate' import { buildDesignSystem } from './design-system' import { Theme } from './theme' -import { DefaultMap } from './utils/default-map' // FOLDER=path/to/folder vitest bench const root = process.env.FOLDER || process.cwd() @@ -15,10 +14,6 @@ const designSystem = buildDesignSystem(new Theme()) bench('parseCandidate', () => { for (let candidate of result.candidates) { - parseCandidate( - candidate, - designSystem.utilities, - new DefaultMap((variant, map) => parseVariant(variant, designSystem.variants, map)), - ) + parseCandidate(candidate, designSystem) } }) diff --git a/packages/tailwindcss/src/candidate.test.ts b/packages/tailwindcss/src/candidate.test.ts index 672e8cbb4551..17d1371b6e7c 100644 --- a/packages/tailwindcss/src/candidate.test.ts +++ b/packages/tailwindcss/src/candidate.test.ts @@ -1,7 +1,7 @@ import { expect, it } from 'vitest' -import { parseCandidate, parseVariant } from './candidate' +import { buildDesignSystem } from './design-system' +import { Theme } from './theme' import { Utilities } from './utilities' -import { DefaultMap } from './utils/default-map' import { Variants } from './variants' function run( @@ -11,11 +11,12 @@ function run( utilities ??= new Utilities() variants ??= new Variants() - let parsedVariants = new DefaultMap((variant, map) => { - return parseVariant(variant, variants!, map) - }) + let designSystem = buildDesignSystem(new Theme()) - return parseCandidate(candidate, utilities, parsedVariants) + designSystem.utilities = utilities + designSystem.variants = variants + + return designSystem.parseCandidate(candidate) } it('should skip unknown utilities', () => { diff --git a/packages/tailwindcss/src/candidate.ts b/packages/tailwindcss/src/candidate.ts index e3f6b92f2827..03420e4d8bbc 100644 --- a/packages/tailwindcss/src/candidate.ts +++ b/packages/tailwindcss/src/candidate.ts @@ -1,3 +1,4 @@ +import type { DesignSystem } from './design-system' import { decodeArbitraryValue } from './utils/decode-arbitrary-value' import { segment } from './utils/segment' @@ -206,14 +207,7 @@ export type Candidate = important: boolean } -export function parseCandidate( - input: string, - utilities: { - has: (value: string) => boolean - kind: (root: string) => Omit - }, - parsedVariants: { get: (value: string) => Variant | null }, -): Candidate | null { +export function parseCandidate(input: string, designSystem: DesignSystem): Candidate | null { // hover:focus:underline // ^^^^^ ^^^^^^ -> Variants // ^^^^^^^^^ -> Base @@ -228,7 +222,7 @@ export function parseCandidate( let parsedCandidateVariants: Variant[] = [] for (let variant of rawVariants) { - let parsedVariant = parsedVariants.get(variant) + let parsedVariant = designSystem.parseVariant(variant) if (parsedVariant === null) return null // Variants are applied left-to-right meaning that any representing pseudo- @@ -320,7 +314,7 @@ export function parseCandidate( base = base.slice(1) } - let [root, value] = findRoot(base, utilities) + let [root, value] = findRoot(base, designSystem.utilities) let modifierSegment: string | null = null @@ -335,13 +329,13 @@ export function parseCandidate( modifierSegment = rootModifierSegment // Try to find the root and value, without the modifier present - ;[root, value] = findRoot(rootWithoutModifier, utilities) + ;[root, value] = findRoot(rootWithoutModifier, designSystem.utilities) } // If there's no root, the candidate isn't a valid class and can be discarded. if (root === null) return null - let kind = utilities.kind(root) + let kind = designSystem.utilities.kind(root) if (kind === 'static') { if (value !== null) return null @@ -475,15 +469,7 @@ function parseModifier(modifier: string): CandidateModifier { } } -export function parseVariant( - variant: string, - variants: { - has: (value: string) => boolean - kind: (root: string) => Omit - compounds: (root: string) => boolean - }, - parsedVariants: { get: (value: string) => Variant | null }, -): Variant | null { +export function parseVariant(variant: string, designSystem: DesignSystem): Variant | null { // Arbitrary variants if (variant[0] === '[' && variant[variant.length - 1] === ']') { /** @@ -535,20 +521,20 @@ export function parseVariant( // - `group-hover/foo/bar` if (additionalModifier) return null - let [root, value] = findRoot(variantWithoutModifier, variants) + let [root, value] = findRoot(variantWithoutModifier, designSystem.variants) // Variant is invalid, therefore the candidate is invalid and we can skip // continue parsing it. if (root === null) return null - switch (variants.kind(root)) { + switch (designSystem.variants.kind(root)) { case 'static': { if (value !== null) return null return { kind: 'static', root, - compounds: variants.compounds(root), + compounds: designSystem.variants.compounds(root), } } @@ -564,7 +550,7 @@ export function parseVariant( kind: 'arbitrary', value: decodeArbitraryValue(value.slice(1, -1)), }, - compounds: variants.compounds(root), + compounds: designSystem.variants.compounds(root), } } @@ -573,14 +559,14 @@ export function parseVariant( root, modifier: modifier === null ? null : parseModifier(modifier), value: { kind: 'named', value }, - compounds: variants.compounds(root), + compounds: designSystem.variants.compounds(root), } } case 'compound': { if (value === null) return null - let subVariant = parsedVariants.get(value) + let subVariant = designSystem.parseVariant(value) if (subVariant === null) return null if (subVariant.compounds === false) return null @@ -589,7 +575,7 @@ export function parseVariant( root, modifier: modifier === null ? null : { kind: 'named', value: modifier }, variant: subVariant, - compounds: variants.compounds(root), + compounds: designSystem.variants.compounds(root), } } } diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts index b84e91c10a6c..5eca99674cae 100644 --- a/packages/tailwindcss/src/compile.ts +++ b/packages/tailwindcss/src/compile.ts @@ -1,8 +1,7 @@ import { rule, type AstNode, type Rule } from './ast' -import { parseCandidate, parseVariant, type Candidate, type Variant } from './candidate' +import { type Candidate, type Variant } from './candidate' import { type DesignSystem } from './design-system' import GLOBAL_PROPERTY_ORDER from './property-order' -import { DefaultMap } from './utils/default-map' import { escape } from './utils/escape' import type { Variants } from './variants' @@ -16,19 +15,11 @@ export function compileCandidates( { properties: number[]; variants: bigint; candidate: string } >() let astNodes: AstNode[] = [] - - // A lazy map implementation that will return the variant if it exists. If it - // doesn't exist yet, the raw string variant will be parsed and added to the - // map. - let parsedVariants: DefaultMap = new DefaultMap((variant, map) => { - return parseVariant(variant, designSystem.variants, map) - }) - let candidates = new Map() // Parse candidates and variants for (let rawCandidate of rawCandidates) { - let candidate = parseCandidate(rawCandidate, designSystem.utilities, parsedVariants) + let candidate = designSystem.parseCandidate(rawCandidate) if (candidate === null) { if (throwOnInvalidCandidate) { throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`) @@ -39,79 +30,27 @@ export function compileCandidates( } // Sort the variants - let variants = Array.from(parsedVariants.values()).sort((a, z) => { + let variants = designSystem.getUsedVariants().sort((a, z) => { return designSystem.variants.compare(a, z) }) // Create the AST next: for (let [candidate, rawCandidate] of candidates) { - let nodes: AstNode[] = [] - - // Handle arbitrary properties - if (candidate.kind === 'arbitrary') { - let compileFn = designSystem.utilities.getArbitrary() - - // Build the node - let compiledNodes = compileFn(candidate) - if (compiledNodes === undefined) { - if (throwOnInvalidCandidate) { - throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`) - } - continue next - } - - nodes = compiledNodes - } - - // Handle named utilities - else if (candidate.kind === 'static' || candidate.kind === 'functional') { - // Safety: At this point it is safe to use TypeScript's non-null assertion - // operator because if the `candidate.root` didn't exist, `parseCandidate` - // would have returned `null` and we would have returned early resulting - // in not hitting this code path. - let { compileFn } = designSystem.utilities.get(candidate.root)! - - // Build the node - let compiledNodes = compileFn(candidate) - if (compiledNodes === undefined) { - if (throwOnInvalidCandidate) { - throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`) - } - continue next + let astNode = designSystem.compileAstNodes(rawCandidate) + if (astNode === null) { + if (throwOnInvalidCandidate) { + throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`) } - - nodes = compiledNodes - } - - let propertySort = getPropertySort(nodes) - - if (candidate.important) { - applyImportant(nodes) + continue next } - let node: Rule = { - kind: 'rule', - selector: `.${escape(rawCandidate)}`, - nodes, - } + let { node, propertySort } = astNode + // Track the variant order which is a number with each bit representing a + // variant. This allows us to sort the rules based on the order of + // variants used. let variantOrder = 0n for (let variant of candidate.variants) { - let result = applyVariant(node, variant, designSystem.variants) - - // When the variant results in `null`, it means that the variant cannot be - // applied to the rule. Discard the candidate and continue to the next - // one. - if (result === null) { - if (throwOnInvalidCandidate) { - throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`) - } - continue next - } - - // Track the variant order which is a number with each bit representing a - // variant. This allows us to sort the rules based on the order of - // variants used. variantOrder |= 1n << BigInt(variants.indexOf(variant)) } @@ -162,6 +101,65 @@ export function compileCandidates( } } +export function compileAstNodes(rawCandidate: string, designSystem: DesignSystem) { + let candidate = designSystem.parseCandidate(rawCandidate) + if (candidate === null) return null + + let nodes: AstNode[] = [] + + // Handle arbitrary properties + if (candidate.kind === 'arbitrary') { + let compileFn = designSystem.utilities.getArbitrary() + + // Build the node + let compiledNodes = compileFn(candidate) + if (compiledNodes === undefined) return null + + nodes = compiledNodes + } + + // Handle named utilities + else if (candidate.kind === 'static' || candidate.kind === 'functional') { + // Safety: At this point it is safe to use TypeScript's non-null assertion + // operator because if the `candidate.root` didn't exist, `parseCandidate` + // would have returned `null` and we would have returned early resulting + // in not hitting this code path. + let { compileFn } = designSystem.utilities.get(candidate.root)! + + // Build the node + let compiledNodes = compileFn(candidate) + if (compiledNodes === undefined) return null + + nodes = compiledNodes + } + + let propertySort = getPropertySort(nodes) + + if (candidate.important) { + applyImportant(nodes) + } + + let node: Rule = { + kind: 'rule', + selector: `.${escape(rawCandidate)}`, + nodes, + } + + for (let variant of candidate.variants) { + let result = applyVariant(node, variant, designSystem.variants) + + // When the variant results in `null`, it means that the variant cannot be + // applied to the rule. Discard the candidate and continue to the next + // one. + if (result === null) return null + } + + return { + node, + propertySort, + } +} + export function applyVariant(node: Rule, variant: Variant, variants: Variants): null | void { if (variant.kind === 'arbitrary') { node.nodes = [rule(variant.selector, node.nodes)] diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts index 190c5e7e244c..e5cb04135a50 100644 --- a/packages/tailwindcss/src/design-system.ts +++ b/packages/tailwindcss/src/design-system.ts @@ -1,9 +1,11 @@ import { toCss } from './ast' -import { compileCandidates } from './compile' +import { parseCandidate, parseVariant } from './candidate' +import { compileAstNodes, compileCandidates } from './compile' import { getClassList, getVariants, type ClassEntry, type VariantEntry } from './intellisense' import { getClassOrder } from './sort' import type { Theme } from './theme' import { Utilities, createUtilities } from './utilities' +import { DefaultMap } from './utils/default-map' import { Variants, createVariants } from './variants' export type DesignSystem = { @@ -15,13 +17,27 @@ export type DesignSystem = { getClassOrder(classes: string[]): [string, bigint | null][] getClassList(): ClassEntry[] getVariants(): VariantEntry[] + + parseCandidate(candidate: string): ReturnType + parseVariant(variant: string): ReturnType + compileAstNodes(candidate: string): ReturnType + + getUsedVariants(): ReturnType[] + getAstNodeSize(): number } export function buildDesignSystem(theme: Theme): DesignSystem { - return { + let utilities = createUtilities(theme) + let variants = createVariants(theme) + + let parsedVariants = new DefaultMap((variant) => parseVariant(variant, designSystem)) + let parsedCandidates = new DefaultMap((candidate) => parseCandidate(candidate, designSystem)) + let compiledAstNodes = new DefaultMap((candidate) => compileAstNodes(candidate, designSystem)) + + let designSystem: DesignSystem = { theme, - utilities: createUtilities(theme), - variants: createVariants(theme), + utilities, + variants, candidatesToCss(classes: string[]) { let result: (string | null)[] = [] @@ -47,5 +63,23 @@ export function buildDesignSystem(theme: Theme): DesignSystem { getVariants() { return getVariants(this) }, + + parseCandidate(candidate: string) { + return parsedCandidates.get(candidate) + }, + parseVariant(variant: string) { + return parsedVariants.get(variant) + }, + compileAstNodes(candidate: string) { + return compiledAstNodes.get(candidate) + }, + getUsedVariants() { + return Array.from(parsedVariants.values()) + }, + getAstNodeSize() { + return compiledAstNodes.size + }, } + + return designSystem } diff --git a/packages/tailwindcss/src/intellisense.ts b/packages/tailwindcss/src/intellisense.ts index 8b67641c6d42..4b1d814fb917 100644 --- a/packages/tailwindcss/src/intellisense.ts +++ b/packages/tailwindcss/src/intellisense.ts @@ -1,8 +1,6 @@ import { decl, rule } from './ast' -import { parseVariant, type Variant } from './candidate' import { applyVariant } from './compile' import type { DesignSystem } from './design-system' -import { DefaultMap } from './utils/default-map' interface ClassMetadata { modifiers: string[] @@ -40,7 +38,7 @@ export function getClassList(design: DesignSystem): ClassEntry[] { } } - list.sort((a, b) => a[0].localeCompare(b[0])) + list.sort((a, b) => (a[0] === b[0] ? 0 : a[0] < b[0] ? -1 : 1)) return list } @@ -60,9 +58,6 @@ export interface VariantEntry { export function getVariants(design: DesignSystem) { let list: VariantEntry[] = [] - let parsedVariants = new DefaultMap((variant, map) => - parseVariant(variant, design.variants, map), - ) for (let [root, variant] of design.variants.entries()) { if (variant.kind === 'arbitrary') continue @@ -74,7 +69,7 @@ export function getVariants(design: DesignSystem) { if (value) name += `-${value}` if (modifier) name += `/${modifier}` - let variant = parsedVariants.get(name) + let variant = design.parseVariant(name) if (!variant) return [] From 9b4995e0c8fc4067104203da306d3cc61392f8a5 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 9 Mar 2024 00:14:31 +0100 Subject: [PATCH 06/18] ensure we sort variants alphabetically by root For incremental rebuilds we don't know all the used variants upfront, which means that we can't sort them upfront either (what we used to do). This code now allows us to sort the variants deterministically when sorting the variants themselves instead of relying on the fact that they used to be sorted before. The sort itself could change slightly compared to the previous implementation (especially when you used stacked variants in your candidates), but it will still be deterministic. --- packages/tailwindcss/src/variants.test.ts | 4 ++-- packages/tailwindcss/src/variants.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 1ab74ffaddba..3df052b5adfb 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -1116,13 +1116,13 @@ test('min, max and unprefixed breakpoints', () => { } @media (width >= 1024px) { - .min-lg\\:flex { + .lg\\:flex { display: flex; } } @media (width >= 1024px) { - .lg\\:flex { + .min-lg\\:flex { display: flex; } }" diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 3e5138c628a6..62e6b1cfe9ed 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -114,7 +114,7 @@ export class Variants { let compareFn = this.compareFns.get(aOrder) if (compareFn === undefined) return 0 - return compareFn(a, z) + return compareFn(a, z) || a.root.localeCompare(z.root) } keys() { From 66834b9440823c35693808d38d36acf49542ef58 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 9 Mar 2024 00:18:28 +0100 Subject: [PATCH 07/18] replace `localeCompare` comparisons Use cheaper comparisons than `localeCompare` when comparing 2 strings. We currently don't care if it is 100% correctly sorted, but we just want consistent sorting. This is currently faster compared to `localeCompare`. Another benefit is that `localeCompare` could result in non-deterministic results if the CSS was generated on 2 separate computers where the `locale` is different. We could solve that by adding a dedicated locale, but it would still be slower compared to this. --- .../src/__snapshots__/utilities.test.ts.snap | 472 ++--- packages/tailwindcss/src/compile.ts | 2 +- packages/tailwindcss/src/utilities.test.ts | 1586 ++++++++--------- packages/tailwindcss/src/variants.ts | 8 +- 4 files changed, 1034 insertions(+), 1034 deletions(-) diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 92964aa6e348..6e9d6e44a57a 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -13,6 +13,26 @@ exports[`border-* 1`] = ` border-width: 1px; } +.border-0 { + border-style: var(--tw-border-style); + border-width: 0; +} + +.border-123 { + border-style: var(--tw-border-style); + border-width: 123px; +} + +.border-2 { + border-style: var(--tw-border-style); + border-width: 2px; +} + +.border-4 { + border-style: var(--tw-border-style); + border-width: 4px; +} + .border-\\[12px\\] { border-style: var(--tw-border-style); border-width: 12px; @@ -38,24 +58,12 @@ exports[`border-* 1`] = ` border-width: thin; } -.border-0 { - border-style: var(--tw-border-style); - border-width: 0; -} - -.border-123 { - border-style: var(--tw-border-style); - border-width: 123px; -} - -.border-2 { - border-style: var(--tw-border-style); - border-width: 2px; +.border-\\[\\#0088cc\\] { + border-color: #08c; } -.border-4 { - border-style: var(--tw-border-style); - border-width: 4px; +.border-\\[\\#0088cc\\]\\/50 { + border-color: #0088cc80; } .border-\\[--my-color\\] { @@ -66,14 +74,6 @@ exports[`border-* 1`] = ` border-color: color-mix(in srgb, var(--my-color) 50%, transparent); } -.border-\\[\\#0088cc\\] { - border-color: #08c; -} - -.border-\\[\\#0088cc\\]\\/50 { - border-color: #0088cc80; -} - .border-\\[color\\:--my-color\\] { border-color: var(--my-color); } @@ -122,6 +122,26 @@ exports[`border-b-* 1`] = ` border-bottom-width: 1px; } +.border-b-0 { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 0; +} + +.border-b-123 { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 123px; +} + +.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-\\[12px\\] { border-bottom-style: var(--tw-border-style); border-bottom-width: 12px; @@ -147,24 +167,12 @@ exports[`border-b-* 1`] = ` border-bottom-width: thin; } -.border-b-0 { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 0; -} - -.border-b-123 { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 123px; -} - -.border-b-2 { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 2px; +.border-b-\\[\\#0088cc\\] { + border-bottom-color: #08c; } -.border-b-4 { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 4px; +.border-b-\\[\\#0088cc\\]\\/50 { + border-bottom-color: #0088cc80; } .border-b-\\[--my-color\\] { @@ -175,14 +183,6 @@ exports[`border-b-* 1`] = ` border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent); } -.border-b-\\[\\#0088cc\\] { - border-bottom-color: #08c; -} - -.border-b-\\[\\#0088cc\\]\\/50 { - border-bottom-color: #0088cc80; -} - .border-b-\\[color\\:--my-color\\] { border-bottom-color: var(--my-color); } @@ -231,6 +231,26 @@ exports[`border-e-* 1`] = ` border-inline-end-width: 1px; } +.border-e-0 { + border-inline-end-style: var(--tw-border-style); + border-inline-end-width: 0; +} + +.border-e-123 { + border-inline-end-style: var(--tw-border-style); + border-inline-end-width: 123px; +} + +.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-\\[12px\\] { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 12px; @@ -256,24 +276,12 @@ exports[`border-e-* 1`] = ` border-inline-end-width: thin; } -.border-e-0 { - border-inline-end-style: var(--tw-border-style); - border-inline-end-width: 0; -} - -.border-e-123 { - border-inline-end-style: var(--tw-border-style); - border-inline-end-width: 123px; -} - -.border-e-2 { - border-inline-end-style: var(--tw-border-style); - border-inline-end-width: 2px; +.border-e-\\[\\#0088cc\\] { + border-inline-end-color: #08c; } -.border-e-4 { - border-inline-end-style: var(--tw-border-style); - border-inline-end-width: 4px; +.border-e-\\[\\#0088cc\\]\\/50 { + border-inline-end-color: #0088cc80; } .border-e-\\[--my-color\\] { @@ -284,14 +292,6 @@ exports[`border-e-* 1`] = ` border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent); } -.border-e-\\[\\#0088cc\\] { - border-inline-end-color: #08c; -} - -.border-e-\\[\\#0088cc\\]\\/50 { - border-inline-end-color: #0088cc80; -} - .border-e-\\[color\\:--my-color\\] { border-inline-end-color: var(--my-color); } @@ -340,6 +340,26 @@ exports[`border-l-* 1`] = ` border-left-width: 1px; } +.border-l-0 { + border-left-style: var(--tw-border-style); + border-left-width: 0; +} + +.border-l-123 { + border-left-style: var(--tw-border-style); + border-left-width: 123px; +} + +.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-\\[12px\\] { border-left-style: var(--tw-border-style); border-left-width: 12px; @@ -365,24 +385,12 @@ exports[`border-l-* 1`] = ` border-left-width: thin; } -.border-l-0 { - border-left-style: var(--tw-border-style); - border-left-width: 0; -} - -.border-l-123 { - border-left-style: var(--tw-border-style); - border-left-width: 123px; -} - -.border-l-2 { - border-left-style: var(--tw-border-style); - border-left-width: 2px; +.border-l-\\[\\#0088cc\\] { + border-left-color: #08c; } -.border-l-4 { - border-left-style: var(--tw-border-style); - border-left-width: 4px; +.border-l-\\[\\#0088cc\\]\\/50 { + border-left-color: #0088cc80; } .border-l-\\[--my-color\\] { @@ -393,14 +401,6 @@ exports[`border-l-* 1`] = ` border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent); } -.border-l-\\[\\#0088cc\\] { - border-left-color: #08c; -} - -.border-l-\\[\\#0088cc\\]\\/50 { - border-left-color: #0088cc80; -} - .border-l-\\[color\\:--my-color\\] { border-left-color: var(--my-color); } @@ -449,6 +449,26 @@ exports[`border-r-* 1`] = ` border-right-width: 1px; } +.border-r-0 { + border-right-style: var(--tw-border-style); + border-right-width: 0; +} + +.border-r-123 { + border-right-style: var(--tw-border-style); + border-right-width: 123px; +} + +.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-\\[12px\\] { border-right-style: var(--tw-border-style); border-right-width: 12px; @@ -474,24 +494,12 @@ exports[`border-r-* 1`] = ` border-right-width: thin; } -.border-r-0 { - border-right-style: var(--tw-border-style); - border-right-width: 0; -} - -.border-r-123 { - border-right-style: var(--tw-border-style); - border-right-width: 123px; -} - -.border-r-2 { - border-right-style: var(--tw-border-style); - border-right-width: 2px; +.border-r-\\[\\#0088cc\\] { + border-right-color: #08c; } -.border-r-4 { - border-right-style: var(--tw-border-style); - border-right-width: 4px; +.border-r-\\[\\#0088cc\\]\\/50 { + border-right-color: #0088cc80; } .border-r-\\[--my-color\\] { @@ -502,14 +510,6 @@ exports[`border-r-* 1`] = ` border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent); } -.border-r-\\[\\#0088cc\\] { - border-right-color: #08c; -} - -.border-r-\\[\\#0088cc\\]\\/50 { - border-right-color: #0088cc80; -} - .border-r-\\[color\\:--my-color\\] { border-right-color: var(--my-color); } @@ -558,6 +558,26 @@ exports[`border-s-* 1`] = ` border-inline-start-width: 1px; } +.border-s-0 { + border-inline-start-style: var(--tw-border-style); + border-inline-start-width: 0; +} + +.border-s-123 { + border-inline-start-style: var(--tw-border-style); + border-inline-start-width: 123px; +} + +.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-\\[12px\\] { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 12px; @@ -583,24 +603,12 @@ exports[`border-s-* 1`] = ` border-inline-start-width: thin; } -.border-s-0 { - border-inline-start-style: var(--tw-border-style); - border-inline-start-width: 0; -} - -.border-s-123 { - border-inline-start-style: var(--tw-border-style); - border-inline-start-width: 123px; -} - -.border-s-2 { - border-inline-start-style: var(--tw-border-style); - border-inline-start-width: 2px; +.border-s-\\[\\#0088cc\\] { + border-inline-start-color: #08c; } -.border-s-4 { - border-inline-start-style: var(--tw-border-style); - border-inline-start-width: 4px; +.border-s-\\[\\#0088cc\\]\\/50 { + border-inline-start-color: #0088cc80; } .border-s-\\[--my-color\\] { @@ -611,14 +619,6 @@ exports[`border-s-* 1`] = ` border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent); } -.border-s-\\[\\#0088cc\\] { - border-inline-start-color: #08c; -} - -.border-s-\\[\\#0088cc\\]\\/50 { - border-inline-start-color: #0088cc80; -} - .border-s-\\[color\\:--my-color\\] { border-inline-start-color: var(--my-color); } @@ -667,6 +667,26 @@ exports[`border-t-* 1`] = ` border-top-width: 1px; } +.border-t-0 { + border-top-style: var(--tw-border-style); + border-top-width: 0; +} + +.border-t-123 { + border-top-style: var(--tw-border-style); + border-top-width: 123px; +} + +.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-\\[12px\\] { border-top-style: var(--tw-border-style); border-top-width: 12px; @@ -692,24 +712,12 @@ exports[`border-t-* 1`] = ` border-top-width: thin; } -.border-t-0 { - border-top-style: var(--tw-border-style); - border-top-width: 0; -} - -.border-t-123 { - border-top-style: var(--tw-border-style); - border-top-width: 123px; -} - -.border-t-2 { - border-top-style: var(--tw-border-style); - border-top-width: 2px; +.border-t-\\[\\#0088cc\\] { + border-top-color: #08c; } -.border-t-4 { - border-top-style: var(--tw-border-style); - border-top-width: 4px; +.border-t-\\[\\#0088cc\\]\\/50 { + border-top-color: #0088cc80; } .border-t-\\[--my-color\\] { @@ -720,14 +728,6 @@ exports[`border-t-* 1`] = ` border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent); } -.border-t-\\[\\#0088cc\\] { - border-top-color: #08c; -} - -.border-t-\\[\\#0088cc\\]\\/50 { - border-top-color: #0088cc80; -} - .border-t-\\[color\\:--my-color\\] { border-top-color: var(--my-color); } @@ -778,6 +778,34 @@ exports[`border-x-* 1`] = ` border-right-width: 1px; } +.border-x-0 { + border-left-style: var(--tw-border-style); + border-right-style: var(--tw-border-style); + border-left-width: 0; + border-right-width: 0; +} + +.border-x-123 { + border-left-style: var(--tw-border-style); + border-right-style: var(--tw-border-style); + border-left-width: 123px; + border-right-width: 123px; +} + +.border-x-2 { + border-left-style: var(--tw-border-style); + border-right-style: var(--tw-border-style); + border-left-width: 2px; + border-right-width: 2px; +} + +.border-x-4 { + border-left-style: var(--tw-border-style); + border-right-style: var(--tw-border-style); + border-left-width: 4px; + border-right-width: 4px; +} + .border-x-\\[12px\\] { border-left-style: var(--tw-border-style); border-right-style: var(--tw-border-style); @@ -813,32 +841,14 @@ exports[`border-x-* 1`] = ` border-right-width: thin; } -.border-x-0 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 0; - border-right-width: 0; -} - -.border-x-123 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 123px; - border-right-width: 123px; -} - -.border-x-2 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 2px; - border-right-width: 2px; +.border-x-\\[\\#0088cc\\] { + border-left-color: #08c; + border-right-color: #08c; } -.border-x-4 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 4px; - border-right-width: 4px; +.border-x-\\[\\#0088cc\\]\\/50 { + border-left-color: #0088cc80; + border-right-color: #0088cc80; } .border-x-\\[--my-color\\] { @@ -851,16 +861,6 @@ exports[`border-x-* 1`] = ` border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent); } -.border-x-\\[\\#0088cc\\] { - border-left-color: #08c; - border-right-color: #08c; -} - -.border-x-\\[\\#0088cc\\]\\/50 { - border-left-color: #0088cc80; - border-right-color: #0088cc80; -} - .border-x-\\[color\\:--my-color\\] { border-left-color: var(--my-color); border-right-color: var(--my-color); @@ -918,6 +918,34 @@ exports[`border-y-* 1`] = ` border-bottom-width: 1px; } +.border-y-0 { + border-top-style: var(--tw-border-style); + border-bottom-style: var(--tw-border-style); + border-top-width: 0; + border-bottom-width: 0; +} + +.border-y-123 { + border-top-style: var(--tw-border-style); + border-bottom-style: var(--tw-border-style); + border-top-width: 123px; + border-bottom-width: 123px; +} + +.border-y-2 { + border-top-style: var(--tw-border-style); + border-bottom-style: var(--tw-border-style); + border-top-width: 2px; + border-bottom-width: 2px; +} + +.border-y-4 { + border-top-style: var(--tw-border-style); + border-bottom-style: var(--tw-border-style); + border-top-width: 4px; + border-bottom-width: 4px; +} + .border-y-\\[12px\\] { border-top-style: var(--tw-border-style); border-bottom-style: var(--tw-border-style); @@ -953,32 +981,14 @@ exports[`border-y-* 1`] = ` border-bottom-width: thin; } -.border-y-0 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 0; - border-bottom-width: 0; -} - -.border-y-123 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 123px; - border-bottom-width: 123px; -} - -.border-y-2 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 2px; - border-bottom-width: 2px; +.border-y-\\[\\#0088cc\\] { + border-top-color: #08c; + border-bottom-color: #08c; } -.border-y-4 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 4px; - border-bottom-width: 4px; +.border-y-\\[\\#0088cc\\]\\/50 { + border-top-color: #0088cc80; + border-bottom-color: #0088cc80; } .border-y-\\[--my-color\\] { @@ -991,16 +1001,6 @@ exports[`border-y-* 1`] = ` border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent); } -.border-y-\\[\\#0088cc\\] { - border-top-color: #08c; - border-bottom-color: #08c; -} - -.border-y-\\[\\#0088cc\\]\\/50 { - border-top-color: #0088cc80; - border-bottom-color: #0088cc80; -} - .border-y-\\[color\\:--my-color\\] { border-top-color: var(--my-color); border-bottom-color: var(--my-color); diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts index 5eca99674cae..c65dbcbb5a11 100644 --- a/packages/tailwindcss/src/compile.ts +++ b/packages/tailwindcss/src/compile.ts @@ -91,7 +91,7 @@ export function compileCandidates( // Sort by most properties first, then by least properties zSorting.properties.length - aSorting.properties.length || // Sort alphabetically - aSorting.candidate.localeCompare(zSorting.candidate) + (aSorting.candidate < zSorting.candidate ? -1 : 1) ) }) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 0bcda0ea9015..0873766a4bf6 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -125,10 +125,6 @@ test('inset', () => { inset: -100%; } - .inset-\\[4px\\] { - inset: 4px; - } - .inset-3\\/4 { inset: 75%; } @@ -137,6 +133,10 @@ test('inset', () => { inset: 1rem; } + .inset-\\[4px\\] { + inset: 4px; + } + .inset-auto { inset: auto; } @@ -182,11 +182,6 @@ test('inset-x', () => { right: -100%; } - .inset-x-\\[4px\\] { - left: 4px; - right: 4px; - } - .inset-x-3\\/4 { left: 75%; right: 75%; @@ -197,6 +192,11 @@ test('inset-x', () => { right: 1rem; } + .inset-x-\\[4px\\] { + left: 4px; + right: 4px; + } + .inset-x-auto { left: auto; right: auto; @@ -244,11 +244,6 @@ test('inset-y', () => { bottom: -100%; } - .inset-y-\\[4px\\] { - top: 4px; - bottom: 4px; - } - .inset-y-3\\/4 { top: 75%; bottom: 75%; @@ -259,6 +254,11 @@ test('inset-y', () => { bottom: 1rem; } + .inset-y-\\[4px\\] { + top: 4px; + bottom: 4px; + } + .inset-y-auto { top: auto; bottom: auto; @@ -304,10 +304,6 @@ test('start', () => { inset-inline-start: -100%; } - .start-\\[4px\\] { - inset-inline-start: 4px; - } - .start-3\\/4 { inset-inline-start: 75%; } @@ -316,6 +312,10 @@ test('start', () => { inset-inline-start: 1rem; } + .start-\\[4px\\] { + inset-inline-start: 4px; + } + .start-auto { inset-inline-start: auto; } @@ -351,10 +351,6 @@ test('end', () => { inset-inline-end: -100%; } - .end-\\[4px\\] { - inset-inline-end: 4px; - } - .end-3\\/4 { inset-inline-end: 75%; } @@ -363,6 +359,10 @@ test('end', () => { inset-inline-end: 1rem; } + .end-\\[4px\\] { + inset-inline-end: 4px; + } + .end-auto { inset-inline-end: auto; } @@ -399,10 +399,6 @@ test('top', () => { top: -100%; } - .top-\\[4px\\] { - top: 4px; - } - .top-3\\/4 { top: 75%; } @@ -411,6 +407,10 @@ test('top', () => { top: 1rem; } + .top-\\[4px\\] { + top: 4px; + } + .top-auto { top: auto; } @@ -454,10 +454,6 @@ test('right', () => { right: -100%; } - .right-\\[4px\\] { - right: 4px; - } - .right-3\\/4 { right: 75%; } @@ -466,6 +462,10 @@ test('right', () => { right: 1rem; } + .right-\\[4px\\] { + right: 4px; + } + .right-auto { right: auto; } @@ -509,10 +509,6 @@ test('bottom', () => { bottom: -100%; } - .bottom-\\[4px\\] { - bottom: 4px; - } - .bottom-3\\/4 { bottom: 75%; } @@ -521,6 +517,10 @@ test('bottom', () => { bottom: 1rem; } + .bottom-\\[4px\\] { + bottom: 4px; + } + .bottom-auto { bottom: auto; } @@ -556,10 +556,6 @@ test('left', () => { left: -100%; } - .left-\\[4px\\] { - left: 4px; - } - .left-3\\/4 { left: 75%; } @@ -568,6 +564,10 @@ test('left', () => { left: 1rem; } + .left-\\[4px\\] { + left: 4px; + } + .left-auto { left: auto; } @@ -594,22 +594,22 @@ test('isolation', () => { test('z-index', () => { expect(run(['z-auto', 'z-10', '-z-10', 'z-[123]', '-z-[--value]'])).toMatchInlineSnapshot(` - ".-z-\\[--value\\] { - z-index: calc(var(--value) * -1); - } - - .-z-10 { + ".-z-10 { z-index: calc(10 * -1); } - .z-\\[123\\] { - z-index: 123; + .-z-\\[--value\\] { + z-index: calc(var(--value) * -1); } .z-10 { z-index: 10; } + .z-\\[123\\] { + z-index: 123; + } + .z-auto { z-index: auto; }" @@ -629,22 +629,22 @@ test('order', () => { 'order-none', ]), ).toMatchInlineSnapshot(` - ".-order-\\[--value\\] { - order: calc(var(--value) * -1); - } - - .-order-4 { + ".-order-4 { order: calc(4 * -1); } - .order-\\[123\\] { - order: 123; + .-order-\\[--value\\] { + order: calc(var(--value) * -1); } .order-4 { order: 4; } + .order-\\[123\\] { + order: 123; + } + .order-first { order: calc(-infinity); } @@ -679,10 +679,6 @@ test('col', () => { grid-column: auto; } - .col-span-\\[--my-variable\\] { - grid-column: span var(--my-variable) / span var(--my-variable); - } - .col-span-17 { grid-column: span 17 / span 17; } @@ -691,6 +687,10 @@ test('col', () => { grid-column: span 4 / span 4; } + .col-span-\\[--my-variable\\] { + grid-column: span var(--my-variable) / span var(--my-variable); + } + .col-span-full { grid-column: 1 / -1; }" @@ -701,11 +701,7 @@ test('col', () => { test('col-start', () => { expect(run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]'])) .toMatchInlineSnapshot(` - ".col-start-\\[123\\] { - grid-column-start: 123; - } - - .col-start-4 { + ".col-start-4 { grid-column-start: 4; } @@ -713,6 +709,10 @@ test('col-start', () => { grid-column-start: 99; } + .col-start-\\[123\\] { + grid-column-start: 123; + } + .col-start-auto { grid-column-start: auto; }" @@ -722,11 +722,7 @@ test('col-start', () => { test('col-end', () => { expect(run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]'])).toMatchInlineSnapshot(` - ".col-end-\\[123\\] { - grid-column-end: 123; - } - - .col-end-4 { + ".col-end-4 { grid-column-end: 4; } @@ -734,6 +730,10 @@ test('col-end', () => { grid-column-end: 99; } + .col-end-\\[123\\] { + grid-column-end: 123; + } + .col-end-auto { grid-column-end: auto; }" @@ -760,10 +760,6 @@ test('row', () => { grid-row: auto; } - .row-span-\\[--my-variable\\] { - grid-row: span var(--my-variable) / span var(--my-variable); - } - .row-span-17 { grid-row: span 17 / span 17; } @@ -772,6 +768,10 @@ test('row', () => { grid-row: span 4 / span 4; } + .row-span-\\[--my-variable\\] { + grid-row: span var(--my-variable) / span var(--my-variable); + } + .row-span-full { grid-row: 1 / -1; }" @@ -782,11 +782,7 @@ test('row', () => { test('row-start', () => { expect(run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]'])) .toMatchInlineSnapshot(` - ".row-start-\\[123\\] { - grid-row-start: 123; - } - - .row-start-4 { + ".row-start-4 { grid-row-start: 4; } @@ -794,6 +790,10 @@ test('row-start', () => { grid-row-start: 99; } + .row-start-\\[123\\] { + grid-row-start: 123; + } + .row-start-auto { grid-row-start: auto; }" @@ -803,11 +803,7 @@ test('row-start', () => { test('row-end', () => { expect(run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]'])).toMatchInlineSnapshot(` - ".row-end-\\[123\\] { - grid-row-end: 123; - } - - .row-end-4 { + ".row-end-4 { grid-row-end: 4; } @@ -815,6 +811,10 @@ test('row-end', () => { grid-row-end: 99; } + .row-end-\\[123\\] { + grid-row-end: 123; + } + .row-end-auto { grid-row-end: auto; }" @@ -906,22 +906,22 @@ test('margin', () => { --spacing-4: 1rem; } - .-m-\\[--value\\] { - margin: calc(var(--value) * -1); - } - .-m-4 { margin: -1rem; } - .m-\\[4px\\] { - margin: 4px; + .-m-\\[--value\\] { + margin: calc(var(--value) * -1); } .m-4 { margin: 1rem; } + .m-\\[4px\\] { + margin: 4px; + } + .m-auto { margin: auto; }" @@ -945,19 +945,14 @@ test('margin-x', () => { --spacing-4: 1rem; } - .-mx-\\[--value\\] { - margin-left: calc(var(--value) * -1); - margin-right: calc(var(--value) * -1); - } - .-mx-4 { margin-left: -1rem; margin-right: -1rem; } - .mx-\\[4px\\] { - margin-left: 4px; - margin-right: 4px; + .-mx-\\[--value\\] { + margin-left: calc(var(--value) * -1); + margin-right: calc(var(--value) * -1); } .mx-4 { @@ -965,6 +960,11 @@ test('margin-x', () => { margin-right: 1rem; } + .mx-\\[4px\\] { + margin-left: 4px; + margin-right: 4px; + } + .mx-auto { margin-left: auto; margin-right: auto; @@ -989,19 +989,14 @@ test('margin-y', () => { --spacing-4: 1rem; } - .-my-\\[--value\\] { - margin-top: calc(var(--value) * -1); - margin-bottom: calc(var(--value) * -1); - } - .-my-4 { margin-top: -1rem; margin-bottom: -1rem; } - .my-\\[4px\\] { - margin-top: 4px; - margin-bottom: 4px; + .-my-\\[--value\\] { + margin-top: calc(var(--value) * -1); + margin-bottom: calc(var(--value) * -1); } .my-4 { @@ -1009,6 +1004,11 @@ test('margin-y', () => { margin-bottom: 1rem; } + .my-\\[4px\\] { + margin-top: 4px; + margin-bottom: 4px; + } + .my-auto { margin-top: auto; margin-bottom: auto; @@ -1033,22 +1033,22 @@ test('margin-top', () => { --spacing-4: 1rem; } - .-mt-\\[--value\\] { - margin-top: calc(var(--value) * -1); - } - .-mt-4 { margin-top: -1rem; } - .mt-\\[4px\\] { - margin-top: 4px; + .-mt-\\[--value\\] { + margin-top: calc(var(--value) * -1); } .mt-4 { margin-top: 1rem; } + .mt-\\[4px\\] { + margin-top: 4px; + } + .mt-auto { margin-top: auto; }" @@ -1072,22 +1072,22 @@ test('margin-inline-start', () => { --spacing-4: 1rem; } - .-ms-\\[--value\\] { - margin-inline-start: calc(var(--value) * -1); - } - .-ms-4 { margin-inline-start: -1rem; } - .ms-\\[4px\\] { - margin-inline-start: 4px; + .-ms-\\[--value\\] { + margin-inline-start: calc(var(--value) * -1); } .ms-4 { margin-inline-start: 1rem; } + .ms-\\[4px\\] { + margin-inline-start: 4px; + } + .ms-auto { margin-inline-start: auto; }" @@ -1111,22 +1111,22 @@ test('margin-inline-end', () => { --spacing-4: 1rem; } - .-me-\\[--value\\] { - margin-inline-end: calc(var(--value) * -1); - } - .-me-4 { margin-inline-end: -1rem; } - .me-\\[4px\\] { - margin-inline-end: 4px; + .-me-\\[--value\\] { + margin-inline-end: calc(var(--value) * -1); } .me-4 { margin-inline-end: 1rem; } + .me-\\[4px\\] { + margin-inline-end: 4px; + } + .me-auto { margin-inline-end: auto; }" @@ -1150,22 +1150,22 @@ test('margin-right', () => { --spacing-4: 1rem; } - .-mr-\\[--value\\] { - margin-right: calc(var(--value) * -1); - } - .-mr-4 { margin-right: -1rem; } - .mr-\\[4px\\] { - margin-right: 4px; + .-mr-\\[--value\\] { + margin-right: calc(var(--value) * -1); } .mr-4 { margin-right: 1rem; } + .mr-\\[4px\\] { + margin-right: 4px; + } + .mr-auto { margin-right: auto; }" @@ -1189,22 +1189,22 @@ test('margin-bottom', () => { --spacing-4: 1rem; } - .-mb-\\[--value\\] { - margin-bottom: calc(var(--value) * -1); - } - .-mb-4 { margin-bottom: -1rem; } - .mb-\\[4px\\] { - margin-bottom: 4px; + .-mb-\\[--value\\] { + margin-bottom: calc(var(--value) * -1); } .mb-4 { margin-bottom: 1rem; } + .mb-\\[4px\\] { + margin-bottom: 4px; + } + .mb-auto { margin-bottom: auto; }" @@ -1228,22 +1228,22 @@ test('margin-left', () => { --spacing-4: 1rem; } - .-ml-\\[--value\\] { - margin-left: calc(var(--value) * -1); - } - .-ml-4 { margin-left: -1rem; } - .ml-\\[4px\\] { - margin-left: 4px; + .-ml-\\[--value\\] { + margin-left: calc(var(--value) * -1); } .ml-4 { margin-left: 1rem; } + .ml-\\[4px\\] { + margin-left: 4px; + } + .ml-auto { margin-left: auto; }" @@ -1324,23 +1324,23 @@ test('box-sizing', () => { test('line-clamp', () => { expect(run(['line-clamp-4', 'line-clamp-99', 'line-clamp-[123]', 'line-clamp-none'])) .toMatchInlineSnapshot(` - ".line-clamp-\\[123\\] { + ".line-clamp-4 { overlow: hidden; - -webkit-line-clamp: 123; + -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; } - .line-clamp-4 { + .line-clamp-99 { overlow: hidden; - -webkit-line-clamp: 4; + -webkit-line-clamp: 99; -webkit-box-orient: vertical; display: -webkit-box; } - .line-clamp-99 { + .line-clamp-\\[123\\] { overlow: hidden; - -webkit-line-clamp: 99; + -webkit-line-clamp: 123; -webkit-box-orient: vertical; display: -webkit-box; } @@ -1494,12 +1494,12 @@ test('display', () => { test('aspect-ratio', () => { expect(run(['aspect-video', 'aspect-[10/9]', 'aspect-4/3'])).toMatchInlineSnapshot(` - ".aspect-\\[10\\/9\\] { - aspect-ratio: 10 / 9; + ".aspect-4\\/3 { + aspect-ratio: 4 / 3; } - .aspect-4\\/3 { - aspect-ratio: 4 / 3; + .aspect-\\[10\\/9\\] { + aspect-ratio: 10 / 9; } .aspect-video { @@ -1534,11 +1534,6 @@ test('size', () => { --spacing-4: 1rem; } - .size-\\[4px\\] { - width: 4px; - height: 4px; - } - .size-1\\/2 { width: 50%; height: 50%; @@ -1549,6 +1544,11 @@ test('size', () => { height: 1rem; } + .size-\\[4px\\] { + width: 4px; + height: 4px; + } + .size-auto { width: auto; height: auto; @@ -1609,10 +1609,6 @@ test('width', () => { --width-xl: 36rem; } - .w-\\[4px\\] { - width: 4px; - } - .w-1\\/2 { width: 50%; } @@ -1621,6 +1617,10 @@ test('width', () => { width: 1rem; } + .w-\\[4px\\] { + width: 4px; + } + .w-auto { width: auto; } @@ -1691,14 +1691,14 @@ test('min-width', () => { --width-xl: 36rem; } - .min-w-\\[4px\\] { - min-width: 4px; - } - .min-w-4 { min-width: 1rem; } + .min-w-\\[4px\\] { + min-width: 4px; + } + .min-w-auto { min-width: auto; } @@ -1753,14 +1753,14 @@ test('max-width', () => { --width-xl: 36rem; } - .max-w-\\[4px\\] { - max-width: 4px; - } - .max-w-4 { max-width: 1rem; } + .max-w-\\[4px\\] { + max-width: 4px; + } + .max-w-fit { max-width: fit-content; } @@ -1813,10 +1813,6 @@ test('height', () => { --spacing-4: 1rem; } - .h-\\[4px\\] { - height: 4px; - } - .h-1\\/2 { height: 50%; } @@ -1825,6 +1821,10 @@ test('height', () => { height: 1rem; } + .h-\\[4px\\] { + height: 4px; + } + .h-auto { height: auto; } @@ -1892,14 +1892,14 @@ test('min-height', () => { --spacing-4: 1rem; } - .min-h-\\[4px\\] { - min-height: 4px; - } - .min-h-4 { min-height: 1rem; } + .min-h-\\[4px\\] { + min-height: 4px; + } + .min-h-auto { min-height: auto; } @@ -1967,14 +1967,14 @@ test('max-height', () => { --spacing-4: 1rem; } - .max-h-\\[4px\\] { - max-height: 4px; - } - .max-h-4 { max-height: 1rem; } + .max-h-\\[4px\\] { + max-height: 4px; + } + .max-h-dvh { max-height: 100dvh; } @@ -2018,11 +2018,7 @@ test('flex', () => { expect( run(['flex-1', 'flex-99', 'flex-1/2', 'flex-auto', 'flex-initial', 'flex-none', 'flex-[123]']), ).toMatchInlineSnapshot(` - ".flex-\\[123\\] { - flex: 123; - } - - .flex-1 { + ".flex-1 { flex: 1; } @@ -2034,6 +2030,10 @@ test('flex', () => { flex: 99; } + .flex-\\[123\\] { + flex: 123; + } + .flex-auto { flex: auto; } @@ -2055,12 +2055,12 @@ test('flex-shrink', () => { flex-shrink: 1; } - .shrink-\\[123\\] { - flex-shrink: 123; - } - .shrink-0 { flex-shrink: 0; + } + + .shrink-\\[123\\] { + flex-shrink: 123; }" `) expect(run(['-shrink', '-shrink-0', '-shrink-[123]'])).toEqual('') @@ -2072,12 +2072,12 @@ test('flex-grow', () => { flex-grow: 1; } - .grow-\\[123\\] { - flex-grow: 123; - } - .grow-0 { flex-grow: 0; + } + + .grow-\\[123\\] { + flex-grow: 123; }" `) expect(run(['-grow', '-grow-0', '-grow-[123]'])).toEqual('') @@ -2099,14 +2099,14 @@ test('flex-basis', () => { --width-xl: 36rem; } - .basis-\\[123px\\] { - flex-basis: 123px; - } - .basis-11\\/12 { flex-basis: 91.6667%; } + .basis-\\[123px\\] { + flex-basis: 123px; + } + .basis-auto { flex-basis: auto; } @@ -2177,18 +2177,18 @@ test('border-spacing', () => { --spacing-1: .25rem; } - .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); - } - .border-spacing-1 { --tw-border-spacing-x: .25rem; --tw-border-spacing-y: .25rem; 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; @@ -2220,13 +2220,13 @@ test('border-spacing-x', () => { --spacing-1: .25rem; } - .border-spacing-x-\\[123px\\] { - --tw-border-spacing-x: 123px; + .border-spacing-x-1 { + --tw-border-spacing-x: .25rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } - .border-spacing-x-1 { - --tw-border-spacing-x: .25rem; + .border-spacing-x-\\[123px\\] { + --tw-border-spacing-x: 123px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -2261,13 +2261,13 @@ test('border-spacing-y', () => { --spacing-1: .25rem; } - .border-spacing-y-\\[123px\\] { - --tw-border-spacing-y: 123px; + .border-spacing-y-1 { + --tw-border-spacing-y: .25rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } - .border-spacing-y-1 { - --tw-border-spacing-y: .25rem; + .border-spacing-y-\\[123px\\] { + --tw-border-spacing-y: 123px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -2371,18 +2371,18 @@ test('translate', () => { 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-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%; @@ -2476,12 +2476,12 @@ test('rotate', () => { rotate: -45deg; } - .rotate-\\[123deg\\] { - rotate: 123deg; - } - .rotate-45 { rotate: 45deg; + } + + .rotate-\\[123deg\\] { + rotate: 123deg; }" `) expect(run(['rotate'])).toEqual('') @@ -2495,18 +2495,18 @@ test('skew', () => { transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } - .skew-\\[123deg\\] { - --tw-skew-x: 123deg; - --tw-skew-y: 123deg; - transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); - } - .skew-6 { --tw-skew-x: 6deg; --tw-skew-y: 6deg; transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } + .skew-\\[123deg\\] { + --tw-skew-x: 123deg; + --tw-skew-y: 123deg; + transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); + } + @property --tw-skew-x { syntax: ""; inherits: false; @@ -2529,13 +2529,13 @@ test('skew-x', () => { transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } - .skew-x-\\[123deg\\] { - --tw-skew-x: 123deg; + .skew-x-6 { + --tw-skew-x: 6deg; transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } - .skew-x-6 { - --tw-skew-x: 6deg; + .skew-x-\\[123deg\\] { + --tw-skew-x: 123deg; transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } @@ -2561,13 +2561,13 @@ test('skew-y', () => { transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } - .skew-y-\\[123deg\\] { - --tw-skew-y: 123deg; + .skew-y-6 { + --tw-skew-y: 6deg; transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } - .skew-y-6 { - --tw-skew-y: 6deg; + .skew-y-\\[123deg\\] { + --tw-skew-y: 123deg; transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)); } @@ -2594,18 +2594,18 @@ test('scale', () => { scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-\\[123deg\\] { - --tw-scale-x: 123deg; - --tw-scale-y: 123deg; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - .scale-50 { --tw-scale-x: 50%; --tw-scale-y: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } + .scale-\\[123deg\\] { + --tw-scale-x: 123deg; + --tw-scale-y: 123deg; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + @property --tw-scale-x { syntax: " | "; inherits: false; @@ -2628,13 +2628,13 @@ test('scale-x', () => { scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-x-\\[123deg\\] { - --tw-scale-x: 123deg; + .scale-x-50 { + --tw-scale-x: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-x-50 { - --tw-scale-x: 50%; + .scale-x-\\[123deg\\] { + --tw-scale-x: 123deg; scale: var(--tw-scale-x) var(--tw-scale-y); } @@ -2660,13 +2660,13 @@ test('scale-y', () => { scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-y-\\[123deg\\] { - --tw-scale-y: 123deg; + .scale-y-50 { + --tw-scale-y: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } - .scale-y-50 { - --tw-scale-y: 50%; + .scale-y-\\[123deg\\] { + --tw-scale-y: 123deg; scale: var(--tw-scale-x) var(--tw-scale-y); } @@ -3223,20 +3223,20 @@ test('scroll-m', () => { --spacing-4: 1rem; } - .-scroll-m-\\[--value\\] { - scroll-margin: calc(var(--value) * -1); - } - .-scroll-m-4 { scroll-margin: -1rem; } - .scroll-m-\\[4px\\] { - scroll-margin: 4px; + .-scroll-m-\\[--value\\] { + scroll-margin: calc(var(--value) * -1); } .scroll-m-4 { scroll-margin: 1rem; + } + + .scroll-m-\\[4px\\] { + scroll-margin: 4px; }" `) expect(run(['scroll-m'])).toEqual('') @@ -3258,24 +3258,24 @@ test('scroll-mx', () => { --spacing-4: 1rem; } - .-scroll-mx-\\[--value\\] { - scroll-margin-left: calc(var(--value) * -1); - scroll-margin-right: calc(var(--value) * -1); - } - .-scroll-mx-4 { scroll-margin-left: -1rem; scroll-margin-right: -1rem; } - .scroll-mx-\\[4px\\] { - scroll-margin-left: 4px; - scroll-margin-right: 4px; + .-scroll-mx-\\[--value\\] { + scroll-margin-left: calc(var(--value) * -1); + scroll-margin-right: calc(var(--value) * -1); } .scroll-mx-4 { scroll-margin-left: 1rem; scroll-margin-right: 1rem; + } + + .scroll-mx-\\[4px\\] { + scroll-margin-left: 4px; + scroll-margin-right: 4px; }" `) expect(run(['scroll-mx'])).toEqual('') @@ -3297,24 +3297,24 @@ test('scroll-my', () => { --spacing-4: 1rem; } - .-scroll-my-\\[--value\\] { - scroll-margin-top: calc(var(--value) * -1); - scroll-margin-bottom: calc(var(--value) * -1); - } - .-scroll-my-4 { scroll-margin-top: -1rem; scroll-margin-bottom: -1rem; } - .scroll-my-\\[4px\\] { - scroll-margin-top: 4px; - scroll-margin-bottom: 4px; + .-scroll-my-\\[--value\\] { + scroll-margin-top: calc(var(--value) * -1); + scroll-margin-bottom: calc(var(--value) * -1); } .scroll-my-4 { scroll-margin-top: 1rem; scroll-margin-bottom: 1rem; + } + + .scroll-my-\\[4px\\] { + scroll-margin-top: 4px; + scroll-margin-bottom: 4px; }" `) expect(run(['scroll-my'])).toEqual('') @@ -3336,20 +3336,20 @@ test('scroll-ms', () => { --spacing-4: 1rem; } - .-scroll-ms-\\[--value\\] { - scroll-margin-inline-start: calc(var(--value) * -1); - } - .-scroll-ms-4 { scroll-margin-inline-start: -1rem; } - .scroll-ms-\\[4px\\] { - scroll-margin-inline-start: 4px; + .-scroll-ms-\\[--value\\] { + scroll-margin-inline-start: calc(var(--value) * -1); } .scroll-ms-4 { scroll-margin-inline-start: 1rem; + } + + .scroll-ms-\\[4px\\] { + scroll-margin-inline-start: 4px; }" `) expect(run(['scroll-ms'])).toEqual('') @@ -3371,20 +3371,20 @@ test('scroll-me', () => { --spacing-4: 1rem; } - .-scroll-me-\\[--value\\] { - scroll-margin-inline-end: calc(var(--value) * -1); - } - .-scroll-me-4 { scroll-margin-inline-end: -1rem; } - .scroll-me-\\[4px\\] { - scroll-margin-inline-end: 4px; + .-scroll-me-\\[--value\\] { + scroll-margin-inline-end: calc(var(--value) * -1); } .scroll-me-4 { scroll-margin-inline-end: 1rem; + } + + .scroll-me-\\[4px\\] { + scroll-margin-inline-end: 4px; }" `) expect(run(['scroll-me'])).toEqual('') @@ -3406,20 +3406,20 @@ test('scroll-mt', () => { --spacing-4: 1rem; } - .-scroll-mt-\\[--value\\] { - scroll-margin-top: calc(var(--value) * -1); - } - .-scroll-mt-4 { scroll-margin-top: -1rem; } - .scroll-mt-\\[4px\\] { - scroll-margin-top: 4px; + .-scroll-mt-\\[--value\\] { + scroll-margin-top: calc(var(--value) * -1); } .scroll-mt-4 { scroll-margin-top: 1rem; + } + + .scroll-mt-\\[4px\\] { + scroll-margin-top: 4px; }" `) expect(run(['scroll-mt'])).toEqual('') @@ -3441,20 +3441,20 @@ test('scroll-mr', () => { --spacing-4: 1rem; } - .-scroll-mr-\\[--value\\] { - scroll-margin-right: calc(var(--value) * -1); - } - .-scroll-mr-4 { scroll-margin-right: -1rem; } - .scroll-mr-\\[4px\\] { - scroll-margin-right: 4px; + .-scroll-mr-\\[--value\\] { + scroll-margin-right: calc(var(--value) * -1); } .scroll-mr-4 { scroll-margin-right: 1rem; + } + + .scroll-mr-\\[4px\\] { + scroll-margin-right: 4px; }" `) expect(run(['scroll-mr'])).toEqual('') @@ -3476,20 +3476,20 @@ test('scroll-mb', () => { --spacing-4: 1rem; } - .-scroll-mb-\\[--value\\] { - scroll-margin-bottom: calc(var(--value) * -1); - } - .-scroll-mb-4 { scroll-margin-bottom: -1rem; } - .scroll-mb-\\[4px\\] { - scroll-margin-bottom: 4px; + .-scroll-mb-\\[--value\\] { + scroll-margin-bottom: calc(var(--value) * -1); } .scroll-mb-4 { scroll-margin-bottom: 1rem; + } + + .scroll-mb-\\[4px\\] { + scroll-margin-bottom: 4px; }" `) expect(run(['scroll-mb'])).toEqual('') @@ -3511,20 +3511,20 @@ test('scroll-ml', () => { --spacing-4: 1rem; } - .-scroll-ml-\\[--value\\] { - scroll-margin-left: calc(var(--value) * -1); - } - .-scroll-ml-4 { scroll-margin-left: -1rem; } - .scroll-ml-\\[4px\\] { - scroll-margin-left: 4px; + .-scroll-ml-\\[--value\\] { + scroll-margin-left: calc(var(--value) * -1); } .scroll-ml-4 { scroll-margin-left: 1rem; + } + + .scroll-ml-\\[4px\\] { + scroll-margin-left: 4px; }" `) expect(run(['scroll-ml'])).toEqual('') @@ -3546,20 +3546,20 @@ test('scroll-p', () => { --spacing-4: 1rem; } - .-scroll-p-\\[--value\\] { - scroll-padding: calc(var(--value) * -1); - } - .-scroll-p-4 { scroll-padding: -1rem; } - .scroll-p-\\[4px\\] { - scroll-padding: 4px; + .-scroll-p-\\[--value\\] { + scroll-padding: calc(var(--value) * -1); } .scroll-p-4 { scroll-padding: 1rem; + } + + .scroll-p-\\[4px\\] { + scroll-padding: 4px; }" `) expect(run(['scroll-p'])).toEqual('') @@ -3581,24 +3581,24 @@ test('scroll-px', () => { --spacing-4: 1rem; } - .-scroll-px-\\[--value\\] { - scroll-padding-left: calc(var(--value) * -1); - scroll-padding-right: calc(var(--value) * -1); - } - .-scroll-px-4 { scroll-padding-left: -1rem; scroll-padding-right: -1rem; } - .scroll-px-\\[4px\\] { - scroll-padding-left: 4px; - scroll-padding-right: 4px; + .-scroll-px-\\[--value\\] { + scroll-padding-left: calc(var(--value) * -1); + scroll-padding-right: calc(var(--value) * -1); } .scroll-px-4 { scroll-padding-left: 1rem; scroll-padding-right: 1rem; + } + + .scroll-px-\\[4px\\] { + scroll-padding-left: 4px; + scroll-padding-right: 4px; }" `) expect(run(['scroll-px'])).toEqual('') @@ -3620,24 +3620,24 @@ test('scroll-py', () => { --spacing-4: 1rem; } - .-scroll-py-\\[--value\\] { - scroll-padding-top: calc(var(--value) * -1); - scroll-padding-bottom: calc(var(--value) * -1); - } - .-scroll-py-4 { scroll-padding-top: -1rem; scroll-padding-bottom: -1rem; } - .scroll-py-\\[4px\\] { - scroll-padding-top: 4px; - scroll-padding-bottom: 4px; + .-scroll-py-\\[--value\\] { + scroll-padding-top: calc(var(--value) * -1); + scroll-padding-bottom: calc(var(--value) * -1); } .scroll-py-4 { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem; + } + + .scroll-py-\\[4px\\] { + scroll-padding-top: 4px; + scroll-padding-bottom: 4px; }" `) expect(run(['scroll-py'])).toEqual('') @@ -3659,20 +3659,20 @@ test('scroll-ps', () => { --spacing-4: 1rem; } - .-scroll-ps-\\[--value\\] { - scroll-padding-inline-start: calc(var(--value) * -1); - } - .-scroll-ps-4 { scroll-padding-inline-start: -1rem; } - .scroll-ps-\\[4px\\] { - scroll-padding-inline-start: 4px; + .-scroll-ps-\\[--value\\] { + scroll-padding-inline-start: calc(var(--value) * -1); } .scroll-ps-4 { scroll-padding-inline-start: 1rem; + } + + .scroll-ps-\\[4px\\] { + scroll-padding-inline-start: 4px; }" `) expect(run(['scroll-ps'])).toEqual('') @@ -3694,20 +3694,20 @@ test('scroll-pe', () => { --spacing-4: 1rem; } - .-scroll-pe-\\[--value\\] { - scroll-padding-inline-end: calc(var(--value) * -1); - } - .-scroll-pe-4 { scroll-padding-inline-end: -1rem; } - .scroll-pe-\\[4px\\] { - scroll-padding-inline-end: 4px; + .-scroll-pe-\\[--value\\] { + scroll-padding-inline-end: calc(var(--value) * -1); } .scroll-pe-4 { scroll-padding-inline-end: 1rem; + } + + .scroll-pe-\\[4px\\] { + scroll-padding-inline-end: 4px; }" `) expect(run(['scroll-pe'])).toEqual('') @@ -3729,20 +3729,20 @@ test('scroll-pt', () => { --spacing-4: 1rem; } - .-scroll-pt-\\[--value\\] { - scroll-padding-top: calc(var(--value) * -1); - } - .-scroll-pt-4 { scroll-padding-top: -1rem; } - .scroll-pt-\\[4px\\] { - scroll-padding-top: 4px; + .-scroll-pt-\\[--value\\] { + scroll-padding-top: calc(var(--value) * -1); } .scroll-pt-4 { scroll-padding-top: 1rem; + } + + .scroll-pt-\\[4px\\] { + scroll-padding-top: 4px; }" `) expect(run(['scroll-pt'])).toEqual('') @@ -3764,20 +3764,20 @@ test('scroll-pr', () => { --spacing-4: 1rem; } - .-scroll-pr-\\[--value\\] { - scroll-padding-right: calc(var(--value) * -1); - } - .-scroll-pr-4 { scroll-padding-right: -1rem; } - .scroll-pr-\\[4px\\] { - scroll-padding-right: 4px; + .-scroll-pr-\\[--value\\] { + scroll-padding-right: calc(var(--value) * -1); } .scroll-pr-4 { scroll-padding-right: 1rem; + } + + .scroll-pr-\\[4px\\] { + scroll-padding-right: 4px; }" `) expect(run(['scroll-pr'])).toEqual('') @@ -3799,20 +3799,20 @@ test('scroll-pb', () => { --spacing-4: 1rem; } - .-scroll-pb-\\[--value\\] { - scroll-padding-bottom: calc(var(--value) * -1); - } - .-scroll-pb-4 { scroll-padding-bottom: -1rem; } - .scroll-pb-\\[4px\\] { - scroll-padding-bottom: 4px; + .-scroll-pb-\\[--value\\] { + scroll-padding-bottom: calc(var(--value) * -1); } .scroll-pb-4 { scroll-padding-bottom: 1rem; + } + + .scroll-pb-\\[4px\\] { + scroll-padding-bottom: 4px; }" `) expect(run(['scroll-pb'])).toEqual('') @@ -3834,20 +3834,20 @@ test('scroll-pl', () => { --spacing-4: 1rem; } - .-scroll-pl-\\[--value\\] { - scroll-padding-left: calc(var(--value) * -1); - } - .-scroll-pl-4 { scroll-padding-left: -1rem; } - .scroll-pl-\\[4px\\] { - scroll-padding-left: 4px; + .-scroll-pl-\\[--value\\] { + scroll-padding-left: calc(var(--value) * -1); } .scroll-pl-4 { scroll-padding-left: 1rem; + } + + .scroll-pl-\\[4px\\] { + scroll-padding-left: 4px; }" `) expect(run(['scroll-pl'])).toEqual('') @@ -3939,14 +3939,6 @@ test('columns', () => { --width-7xl: 80rem; } - .columns-\\[--value\\] { - columns: var(--value); - } - - .columns-\\[123\\] { - columns: 123; - } - .columns-3xs { columns: 16rem; } @@ -3963,6 +3955,14 @@ test('columns', () => { columns: 99; } + .columns-\\[--value\\] { + columns: var(--value); + } + + .columns-\\[123\\] { + columns: 123; + } + .columns-auto { columns: auto; }" @@ -4226,11 +4226,7 @@ test('grid-cols', () => { expect( run(['grid-cols-none', 'grid-cols-subgrid', 'grid-cols-12', 'grid-cols-99', 'grid-cols-[123]']), ).toMatchInlineSnapshot(` - ".grid-cols-\\[123\\] { - grid-template-columns: 123px; - } - - .grid-cols-12 { + ".grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } @@ -4238,6 +4234,10 @@ test('grid-cols', () => { grid-template-columns: repeat(99, minmax(0, 1fr)); } + .grid-cols-\\[123\\] { + grid-template-columns: 123px; + } + .grid-cols-none { grid-template-columns: none; } @@ -4261,11 +4261,7 @@ test('grid-rows', () => { expect( run(['grid-rows-none', 'grid-rows-subgrid', 'grid-rows-12', 'grid-rows-99', 'grid-rows-[123]']), ).toMatchInlineSnapshot(` - ".grid-rows-\\[123\\] { - grid-template-rows: 123px; - } - - .grid-rows-12 { + ".grid-rows-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } @@ -4273,6 +4269,10 @@ test('grid-rows', () => { grid-template-rows: repeat(99, minmax(0, 1fr)); } + .grid-rows-\\[123\\] { + grid-template-rows: 123px; + } + .grid-rows-none { grid-template-rows: none; } @@ -4646,12 +4646,12 @@ test('gap', () => { --spacing-4: 1rem; } - .gap-\\[4px\\] { - gap: 4px; - } - .gap-4 { gap: 1rem; + } + + .gap-\\[4px\\] { + gap: 4px; }" `) expect(run(['gap', '-gap-4', '-gap-[4px]'])).toEqual('') @@ -4673,12 +4673,12 @@ test('gap-x', () => { --spacing-4: 1rem; } - .gap-x-\\[4px\\] { - column-gap: 4px; - } - .gap-x-4 { column-gap: 1rem; + } + + .gap-x-\\[4px\\] { + column-gap: 4px; }" `) expect(run(['gap-x', '-gap-x-4', '-gap-x-[4px]'])).toEqual('') @@ -4700,12 +4700,12 @@ test('gap-y', () => { --spacing-4: 1rem; } - .gap-y-\\[4px\\] { - row-gap: 4px; - } - .gap-y-4 { row-gap: 1rem; + } + + .gap-y-\\[4px\\] { + row-gap: 4px; }" `) expect(run(['gap-y', '-gap-y-4', '-gap-y-[4px]'])).toEqual('') @@ -4732,16 +4732,16 @@ test('space-x', () => { margin-inline-end: calc(calc(1rem * -1) * var(--tw-space-x-reverse)); } - :where(.space-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { - margin-inline-start: calc(4px * calc(1 - var(--tw-space-x-reverse))); - margin-inline-end: calc(4px * var(--tw-space-x-reverse)); - } - :where(.space-x-4 > :not([hidden]) ~ :not([hidden])) { margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse))); margin-inline-end: calc(1rem * var(--tw-space-x-reverse)); } + :where(.space-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { + margin-inline-start: calc(4px * calc(1 - var(--tw-space-x-reverse))); + margin-inline-end: calc(4px * var(--tw-space-x-reverse)); + } + @property --tw-space-x-reverse { syntax: ""; inherits: false; @@ -4772,16 +4772,16 @@ test('space-y', () => { margin-top: calc(calc(1rem * -1) * calc(1 - var(--tw-space-y-reverse))); } - :where(.space-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { - margin-bottom: calc(4px * var(--tw-space-y-reverse)); - margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse))); - } - :where(.space-y-4 > :not([hidden]) ~ :not([hidden])) { margin-bottom: calc(1rem * var(--tw-space-y-reverse)); margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); } + :where(.space-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { + margin-bottom: calc(4px * var(--tw-space-y-reverse)); + margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse))); + } + @property --tw-space-y-reverse { syntax: ""; inherits: false; @@ -4836,12 +4836,6 @@ test('divide-x', () => { border-inline-start-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } - :where(.divide-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { - border-inline-style: var(--tw-border-style); - border-inline-end-width: calc(4px * var(--tw-divide-x-reverse)); - border-inline-start-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); - } - :where(.divide-x-123 > :not([hidden]) ~ :not([hidden])) { border-inline-style: var(--tw-border-style); border-inline-end-width: calc(123px * var(--tw-divide-x-reverse)); @@ -4854,6 +4848,12 @@ test('divide-x', () => { border-inline-start-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } + :where(.divide-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { + border-inline-style: var(--tw-border-style); + border-inline-end-width: calc(4px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); + } + @property --tw-divide-x-reverse { syntax: ""; inherits: false; @@ -4921,13 +4921,6 @@ test('divide-y', () => { border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } - :where(.divide-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-bottom-width: calc(4px * var(--tw-divide-y-reverse)); - border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); - } - :where(.divide-y-123 > :not([hidden]) ~ :not([hidden])) { border-top-style: var(--tw-border-style); border-bottom-style: var(--tw-border-style); @@ -4942,6 +4935,13 @@ test('divide-y', () => { border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); } + :where(.divide-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { + border-top-style: var(--tw-border-style); + border-bottom-style: var(--tw-border-style); + border-bottom-width: calc(4px * var(--tw-divide-y-reverse)); + border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); + } + @property --tw-divide-y-reverse { syntax: ""; inherits: false; @@ -5098,7 +5098,7 @@ test('accent', () => { accent-color: #08c; } - .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\], .accent-\\[\\#0088cc\\]\\/50 { + .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] { accent-color: #0088cc80; } @@ -5106,7 +5106,7 @@ test('accent', () => { accent-color: currentColor; } - .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\], .accent-current\\/50 { + .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] { accent-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -5114,7 +5114,7 @@ test('accent', () => { accent-color: #ef4444; } - .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\], .accent-red-500\\/50 { + .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] { accent-color: #ef444480; } @@ -5176,7 +5176,7 @@ test('caret', () => { caret-color: #08c; } - .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\], .caret-\\[\\#0088cc\\]\\/50 { + .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] { caret-color: #0088cc80; } @@ -5184,7 +5184,7 @@ test('caret', () => { caret-color: currentColor; } - .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\], .caret-current\\/50 { + .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] { caret-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -5192,7 +5192,7 @@ test('caret', () => { caret-color: #ef4444; } - .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\], .caret-red-500\\/50 { + .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] { caret-color: #ef444480; } @@ -5254,15 +5254,15 @@ test('divide-color', () => { border-color: #08c; } - :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-\\[\\#0088cc\\]\\/50 > :not([hidden]) ~ :not([hidden])) { border-color: #0088cc80; } - :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { border-color: #0088cc80; } - :where(.divide-\\[\\#0088cc\\]\\/50 > :not([hidden]) ~ :not([hidden])) { + :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { border-color: #0088cc80; } @@ -5270,15 +5270,15 @@ test('divide-color', () => { border-color: currentColor; } - :where(.divide-current\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-current\\/50 > :not([hidden]) ~ :not([hidden])) { border-color: color-mix(in srgb, currentColor 50%, transparent); } - :where(.divide-current\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-current\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { border-color: color-mix(in srgb, currentColor 50%, transparent); } - :where(.divide-current\\/50 > :not([hidden]) ~ :not([hidden])) { + :where(.divide-current\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { border-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -5286,15 +5286,15 @@ test('divide-color', () => { border-color: #ef4444; } - :where(.divide-red-500\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-red-500\\/50 > :not([hidden]) ~ :not([hidden])) { border-color: #ef444480; } - :where(.divide-red-500\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { + :where(.divide-red-500\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { border-color: #ef444480; } - :where(.divide-red-500\\/50 > :not([hidden]) ~ :not([hidden])) { + :where(.divide-red-500\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { border-color: #ef444480; } @@ -6801,27 +6801,27 @@ test('bg', () => { --color-red-500: #ef4444; } - .bg-\\[--some-var\\] { - background-color: var(--some-var); + .bg-\\[\\#0088cc\\] { + background-color: #08c; } - .bg-\\[--some-var\\]\\/\\[0\\.5\\], .bg-\\[--some-var\\]\\/\\[50\\%\\], .bg-\\[--some-var\\]\\/50 { - background-color: color-mix(in srgb, var(--some-var) 50%, transparent); + .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] { + background-color: #0088cc80; } - .bg-\\[\\#0088cc\\] { - background-color: #08c; + .bg-\\[--some-var\\] { + background-color: var(--some-var); } - .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\], .bg-\\[\\#0088cc\\]\\/50 { - background-color: #0088cc80; + .bg-\\[--some-var\\]\\/50, .bg-\\[--some-var\\]\\/\\[0\\.5\\], .bg-\\[--some-var\\]\\/\\[50\\%\\] { + background-color: color-mix(in srgb, var(--some-var) 50%, transparent); } .bg-\\[color\\:--some-var\\] { background-color: var(--some-var); } - .bg-\\[color\\:--some-var\\]\\/\\[0\\.5\\], .bg-\\[color\\:--some-var\\]\\/\\[50\\%\\], .bg-\\[color\\:--some-var\\]\\/50 { + .bg-\\[color\\:--some-var\\]\\/50, .bg-\\[color\\:--some-var\\]\\/\\[0\\.5\\], .bg-\\[color\\:--some-var\\]\\/\\[50\\%\\] { background-color: color-mix(in srgb, var(--some-var) 50%, transparent); } @@ -6829,7 +6829,7 @@ test('bg', () => { background-color: currentColor; } - .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\], .bg-current\\/50 { + .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] { background-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -6841,7 +6841,7 @@ test('bg', () => { background-color: #ef4444; } - .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\], .bg-red-500\\/50 { + .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] { background-color: #ef444480; } @@ -6857,14 +6857,14 @@ test('bg', () => { background-image: linear-gradient(red, #00f); } - .bg-\\[url\\:--my-url\\] { - background-image: var(--my-url); - } - .bg-\\[url\\(\\/image\\.png\\)\\] { background-image: url("/image.png"); } + .bg-\\[url\\:--my-url\\] { + background-image: var(--my-url); + } + .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops, )); } @@ -6937,14 +6937,14 @@ test('bg', () => { background-attachment: scroll; } - .bg-\\[120px_120px\\] { - background-position: 120px 120px; - } - .bg-\\[120px\\] { background-position: 120px; } + .bg-\\[120px_120px\\] { + background-position: 120px 120px; + } + .bg-\\[50\\%\\] { background-position: 50%; } @@ -7137,23 +7137,23 @@ test('from', () => { --color-red-500: #ef4444; } - .from-\\[--my-color\\] { - --tw-gradient-from: var(--my-color); + .from-\\[\\#0088cc\\] { + --tw-gradient-from: #08c; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[--my-color\\]\\/\\[0\\.5\\], .from-\\[--my-color\\]\\/\\[50\\%\\], .from-\\[--my-color\\]\\/50 { - --tw-gradient-from: color-mix(in srgb, var(--my-color) 50%, transparent); + .from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-from: #0088cc80; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[\\#0088cc\\] { - --tw-gradient-from: #08c; + .from-\\[--my-color\\] { + --tw-gradient-from: var(--my-color); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\], .from-\\[\\#0088cc\\]\\/50 { - --tw-gradient-from: #0088cc80; + .from-\\[--my-color\\]\\/50, .from-\\[--my-color\\]\\/\\[0\\.5\\], .from-\\[--my-color\\]\\/\\[50\\%\\] { + --tw-gradient-from: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7162,7 +7162,7 @@ test('from', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .from-\\[color\\:--my-color\\]\\/\\[50\\%\\], .from-\\[color\\:--my-color\\]\\/50 { + .from-\\[color\\:--my-color\\]\\/50, .from-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .from-\\[color\\:--my-color\\]\\/\\[50\\%\\] { --tw-gradient-from: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7172,7 +7172,7 @@ test('from', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\], .from-current\\/50 { + .from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] { --tw-gradient-from: color-mix(in srgb, currentColor 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7182,7 +7182,7 @@ test('from', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\], .from-red-500\\/50 { + .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] { --tw-gradient-from: #ef444480; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7192,28 +7192,28 @@ test('from', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-\\[50\\%\\] { - --tw-gradient-from-position: 50%; + .from-0\\% { + --tw-gradient-from-position: 0%; } - .from-\\[50px\\] { - --tw-gradient-from-position: 50px; + .from-100\\% { + --tw-gradient-from-position: 100%; } - .from-\\[length\\:--my-position\\], .from-\\[percentage\\:--my-position\\] { - --tw-gradient-from-position: var(--my-position); + .from-5\\% { + --tw-gradient-from-position: 5%; } - .from-0\\% { - --tw-gradient-from-position: 0%; + .from-\\[50\\%\\] { + --tw-gradient-from-position: 50%; } - .from-100\\% { - --tw-gradient-from-position: 100%; + .from-\\[50px\\] { + --tw-gradient-from-position: 50px; } - .from-5\\% { - --tw-gradient-from-position: 5%; + .from-\\[length\\:--my-position\\], .from-\\[percentage\\:--my-position\\] { + --tw-gradient-from-position: var(--my-position); } @property --tw-gradient-from { @@ -7338,26 +7338,26 @@ test('via', () => { --color-red-500: #ef4444; } - .via-\\[--my-color\\] { - --tw-gradient-via: var(--my-color); + .via-\\[\\#0088cc\\] { + --tw-gradient-via: #08c; --tw-gradient-via-stops: 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-\\[--my-color\\]\\/\\[0\\.5\\], .via-\\[--my-color\\]\\/\\[50\\%\\], .via-\\[--my-color\\]\\/50 { - --tw-gradient-via: color-mix(in srgb, var(--my-color) 50%, transparent); + .via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-via: #0088cc80; --tw-gradient-via-stops: 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\\] { - --tw-gradient-via: #08c; + .via-\\[--my-color\\] { + --tw-gradient-via: var(--my-color); --tw-gradient-via-stops: 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\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\], .via-\\[\\#0088cc\\]\\/50 { - --tw-gradient-via: #0088cc80; + .via-\\[--my-color\\]\\/50, .via-\\[--my-color\\]\\/\\[0\\.5\\], .via-\\[--my-color\\]\\/\\[50\\%\\] { + --tw-gradient-via: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-via-stops: 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); } @@ -7368,7 +7368,7 @@ test('via', () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .via-\\[color\\:--my-color\\]\\/\\[50\\%\\], .via-\\[color\\:--my-color\\]\\/50 { + .via-\\[color\\:--my-color\\]\\/50, .via-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .via-\\[color\\:--my-color\\]\\/\\[50\\%\\] { --tw-gradient-via: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-via-stops: 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); @@ -7380,7 +7380,7 @@ test('via', () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\], .via-current\\/50 { + .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] { --tw-gradient-via: color-mix(in srgb, currentColor 50%, transparent); --tw-gradient-via-stops: 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); @@ -7392,7 +7392,7 @@ test('via', () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\], .via-red-500\\/50 { + .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] { --tw-gradient-via: #ef444480; --tw-gradient-via-stops: 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); @@ -7404,18 +7404,6 @@ test('via', () => { --tw-gradient-stops: var(--tw-gradient-via-stops); } - .via-\\[50\\%\\] { - --tw-gradient-via-position: 50%; - } - - .via-\\[50px\\] { - --tw-gradient-via-position: 50px; - } - - .via-\\[length\\:--my-position\\], .via-\\[percentage\\:--my-position\\] { - --tw-gradient-via-position: var(--my-position); - } - .via-0\\% { --tw-gradient-via-position: 0%; } @@ -7428,6 +7416,18 @@ test('via', () => { --tw-gradient-via-position: 5%; } + .via-\\[50\\%\\] { + --tw-gradient-via-position: 50%; + } + + .via-\\[50px\\] { + --tw-gradient-via-position: 50px; + } + + .via-\\[length\\:--my-position\\], .via-\\[percentage\\:--my-position\\] { + --tw-gradient-via-position: var(--my-position); + } + @property --tw-gradient-from { syntax: ""; inherits: false; @@ -7548,23 +7548,23 @@ test('to', () => { --color-red-500: #ef4444; } - .to-\\[--my-color\\] { - --tw-gradient-to: var(--my-color); + .to-\\[\\#0088cc\\] { + --tw-gradient-to: #08c; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[--my-color\\]\\/\\[0\\.5\\], .to-\\[--my-color\\]\\/\\[50\\%\\], .to-\\[--my-color\\]\\/50 { - --tw-gradient-to: color-mix(in srgb, var(--my-color) 50%, transparent); + .to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] { + --tw-gradient-to: #0088cc80; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[\\#0088cc\\] { - --tw-gradient-to: #08c; + .to-\\[--my-color\\] { + --tw-gradient-to: var(--my-color); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\], .to-\\[\\#0088cc\\]\\/50 { - --tw-gradient-to: #0088cc80; + .to-\\[--my-color\\]\\/50, .to-\\[--my-color\\]\\/\\[0\\.5\\], .to-\\[--my-color\\]\\/\\[50\\%\\] { + --tw-gradient-to: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7573,7 +7573,7 @@ test('to', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .to-\\[color\\:--my-color\\]\\/\\[50\\%\\], .to-\\[color\\:--my-color\\]\\/50 { + .to-\\[color\\:--my-color\\]\\/50, .to-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .to-\\[color\\:--my-color\\]\\/\\[50\\%\\] { --tw-gradient-to: color-mix(in srgb, var(--my-color) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7583,7 +7583,7 @@ test('to', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\], .to-current\\/50 { + .to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] { --tw-gradient-to: color-mix(in srgb, currentColor 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7593,7 +7593,7 @@ test('to', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\], .to-red-500\\/50 { + .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] { --tw-gradient-to: #ef444480; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7603,18 +7603,6 @@ test('to', () => { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\\[50\\%\\] { - --tw-gradient-to-position: 50%; - } - - .to-\\[50px\\] { - --tw-gradient-to-position: 50px; - } - - .to-\\[length\\:--my-position\\], .to-\\[percentage\\:--my-position\\] { - --tw-gradient-to-position: var(--my-position); - } - .to-0\\% { --tw-gradient-to-position: 0%; } @@ -7627,6 +7615,18 @@ test('to', () => { --tw-gradient-to-position: 5%; } + .to-\\[50\\%\\] { + --tw-gradient-to-position: 50%; + } + + .to-\\[50px\\] { + --tw-gradient-to-position: 50px; + } + + .to-\\[length\\:--my-position\\], .to-\\[percentage\\:--my-position\\] { + --tw-gradient-to-position: var(--my-position); + } + @property --tw-gradient-from { syntax: ""; inherits: false; @@ -8021,7 +8021,7 @@ test('fill', () => { fill: #08c; } - .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\], .fill-\\[\\#0088cc\\]\\/50 { + .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] { fill: #0088cc80; } @@ -8029,7 +8029,7 @@ test('fill', () => { fill: currentColor; } - .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\], .fill-current\\/50 { + .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] { fill: color-mix(in srgb, currentColor 50%, transparent); } @@ -8037,7 +8037,7 @@ test('fill', () => { fill: #ef4444; } - .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\], .fill-red-500\\/50 { + .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] { fill: #ef444480; } @@ -8116,27 +8116,27 @@ test('stroke', () => { --color-red-500: #ef4444; } - .stroke-\\[--my-color\\] { - stroke: var(--my-color); + .stroke-\\[\\#0088cc\\] { + stroke: #08c; } - .stroke-\\[--my-color\\]\\/\\[0\\.5\\], .stroke-\\[--my-color\\]\\/\\[50\\%\\], .stroke-\\[--my-color\\]\\/50 { - stroke: color-mix(in srgb, var(--my-color) 50%, transparent); + .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] { + stroke: #0088cc80; } - .stroke-\\[\\#0088cc\\] { - stroke: #08c; + .stroke-\\[--my-color\\] { + stroke: var(--my-color); } - .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\], .stroke-\\[\\#0088cc\\]\\/50 { - stroke: #0088cc80; + .stroke-\\[--my-color\\]\\/50, .stroke-\\[--my-color\\]\\/\\[0\\.5\\], .stroke-\\[--my-color\\]\\/\\[50\\%\\] { + stroke: color-mix(in srgb, var(--my-color) 50%, transparent); } .stroke-\\[color\\:--my-color\\] { stroke: var(--my-color); } - .stroke-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .stroke-\\[color\\:--my-color\\]\\/\\[50\\%\\], .stroke-\\[color\\:--my-color\\]\\/50 { + .stroke-\\[color\\:--my-color\\]\\/50, .stroke-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .stroke-\\[color\\:--my-color\\]\\/\\[50\\%\\] { stroke: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -8144,7 +8144,7 @@ test('stroke', () => { stroke: currentColor; } - .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\], .stroke-current\\/50 { + .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] { stroke: color-mix(in srgb, currentColor 50%, transparent); } @@ -8156,7 +8156,7 @@ test('stroke', () => { stroke: #ef4444; } - .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\], .stroke-red-500\\/50 { + .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] { stroke: #ef444480; } @@ -8164,6 +8164,18 @@ test('stroke', () => { stroke: #0000; } + .stroke-0 { + stroke-width: 0; + } + + .stroke-1 { + stroke-width: 1px; + } + + .stroke-2 { + stroke-width: 2px; + } + .stroke-\\[1\\.5\\] { stroke-width: 1.5px; } @@ -8178,18 +8190,6 @@ test('stroke', () => { .stroke-\\[length\\:--my-width\\], .stroke-\\[number\\:--my-width\\], .stroke-\\[percentage\\:--my-width\\] { stroke-width: var(--my-width); - } - - .stroke-0 { - stroke-width: 0; - } - - .stroke-1 { - stroke-width: 1px; - } - - .stroke-2 { - stroke-width: 2px; }" `) expect( @@ -8332,12 +8332,12 @@ test('p', () => { --spacing-4: 1rem; } - .p-\\[4px\\] { - padding: 4px; - } - .p-4 { padding: 1rem; + } + + .p-\\[4px\\] { + padding: 4px; }" `) expect(run(['p', '-p-4', '-p-[4px]'])).toEqual('') @@ -8359,14 +8359,14 @@ test('px', () => { --spacing-4: 1rem; } - .px-\\[4px\\] { - padding-left: 4px; - padding-right: 4px; - } - .px-4 { padding-left: 1rem; padding-right: 1rem; + } + + .px-\\[4px\\] { + padding-left: 4px; + padding-right: 4px; }" `) expect(run(['px', '-px-4', '-px-[4px]'])).toEqual('') @@ -8388,14 +8388,14 @@ test('py', () => { --spacing-4: 1rem; } - .py-\\[4px\\] { - padding-top: 4px; - padding-bottom: 4px; - } - .py-4 { padding-top: 1rem; padding-bottom: 1rem; + } + + .py-\\[4px\\] { + padding-top: 4px; + padding-bottom: 4px; }" `) expect(run(['py', '-py-4', '-py-[4px]'])).toEqual('') @@ -8417,12 +8417,12 @@ test('pt', () => { --spacing-4: 1rem; } - .pt-\\[4px\\] { - padding-top: 4px; - } - .pt-4 { padding-top: 1rem; + } + + .pt-\\[4px\\] { + padding-top: 4px; }" `) expect(run(['pt', '-pt-4', '-pt-[4px]'])).toEqual('') @@ -8444,12 +8444,12 @@ test('ps', () => { --spacing-4: 1rem; } - .ps-\\[4px\\] { - padding-inline-start: 4px; - } - .ps-4 { padding-inline-start: 1rem; + } + + .ps-\\[4px\\] { + padding-inline-start: 4px; }" `) expect(run(['ps', '-ps-4', '-ps-[4px]'])).toEqual('') @@ -8471,12 +8471,12 @@ test('pe', () => { --spacing-4: 1rem; } - .pe-\\[4px\\] { - padding-inline-end: 4px; - } - .pe-4 { padding-inline-end: 1rem; + } + + .pe-\\[4px\\] { + padding-inline-end: 4px; }" `) expect(run(['pe', '-pe-4', '-pe-[4px]'])).toEqual('') @@ -8498,12 +8498,12 @@ test('pr', () => { --spacing-4: 1rem; } - .pr-\\[4px\\] { - padding-right: 4px; - } - .pr-4 { padding-right: 1rem; + } + + .pr-\\[4px\\] { + padding-right: 4px; }" `) expect(run(['pr', '-pr-4', '-pr-[4px]'])).toEqual('') @@ -8525,12 +8525,12 @@ test('pb', () => { --spacing-4: 1rem; } - .pb-\\[4px\\] { - padding-bottom: 4px; - } - .pb-4 { padding-bottom: 1rem; + } + + .pb-\\[4px\\] { + padding-bottom: 4px; }" `) expect(run(['pb', '-pb-4', '-pb-[4px]'])).toEqual('') @@ -8552,12 +8552,12 @@ test('pl', () => { --spacing-4: 1rem; } - .pl-\\[4px\\] { - padding-left: 4px; - } - .pl-4 { padding-left: 1rem; + } + + .pl-\\[4px\\] { + padding-left: 4px; }" `) expect(run(['pl', '-pl-4', '-pl-[4px]'])).toEqual('') @@ -8865,15 +8865,15 @@ test('placeholder', () => { color: #08c; } - .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder { + .placeholder-\\[\\#0088cc\\]\\/50::placeholder { color: #0088cc80; } - .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { + .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder { color: #0088cc80; } - .placeholder-\\[\\#0088cc\\]\\/50::placeholder { + .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder { color: #0088cc80; } @@ -8881,15 +8881,15 @@ test('placeholder', () => { color: currentColor; } - .placeholder-current\\/\\[0\\.5\\]::placeholder { + .placeholder-current\\/50::placeholder { color: color-mix(in srgb, currentColor 50%, transparent); } - .placeholder-current\\/\\[50\\%\\]::placeholder { + .placeholder-current\\/\\[0\\.5\\]::placeholder { color: color-mix(in srgb, currentColor 50%, transparent); } - .placeholder-current\\/50::placeholder { + .placeholder-current\\/\\[50\\%\\]::placeholder { color: color-mix(in srgb, currentColor 50%, transparent); } @@ -8897,15 +8897,15 @@ test('placeholder', () => { color: #ef4444; } - .placeholder-red-500\\/\\[0\\.5\\]::placeholder { + .placeholder-red-500\\/50::placeholder { color: #ef444480; } - .placeholder-red-500\\/\\[50\\%\\]::placeholder { + .placeholder-red-500\\/\\[0\\.5\\]::placeholder { color: #ef444480; } - .placeholder-red-500\\/50::placeholder { + .placeholder-red-500\\/\\[50\\%\\]::placeholder { color: #ef444480; } @@ -8992,30 +8992,30 @@ test('decoration', () => { --color-red-500: #ef4444; } + .decoration-\\[\\#0088cc\\] { + text-decoration-color: #08c; + } + + .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] { + text-decoration-color: #0088cc80; + } + .decoration-\\[--my-color\\] { -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } - .decoration-\\[--my-color\\]\\/\\[0\\.5\\], .decoration-\\[--my-color\\]\\/\\[50\\%\\], .decoration-\\[--my-color\\]\\/50 { + .decoration-\\[--my-color\\]\\/50, .decoration-\\[--my-color\\]\\/\\[0\\.5\\], .decoration-\\[--my-color\\]\\/\\[50\\%\\] { -webkit-text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent); text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent); } - .decoration-\\[\\#0088cc\\] { - text-decoration-color: #08c; - } - - .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\], .decoration-\\[\\#0088cc\\]\\/50 { - text-decoration-color: #0088cc80; - } - .decoration-\\[color\\:--my-color\\] { -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } - .decoration-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .decoration-\\[color\\:--my-color\\]\\/\\[50\\%\\], .decoration-\\[color\\:--my-color\\]\\/50 { + .decoration-\\[color\\:--my-color\\]\\/50, .decoration-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .decoration-\\[color\\:--my-color\\]\\/\\[50\\%\\] { -webkit-text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent); text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -9024,7 +9024,7 @@ test('decoration', () => { text-decoration-color: currentColor; } - .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\], .decoration-current\\/50 { + .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] { -webkit-text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -9033,7 +9033,7 @@ test('decoration', () => { text-decoration-color: #ef4444; } - .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\], .decoration-red-500\\/50 { + .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] { text-decoration-color: #ef444480; } @@ -9061,18 +9061,6 @@ test('decoration', () => { text-decoration-style: wavy; } - .decoration-\\[12px\\] { - text-decoration-thickness: 12px; - } - - .decoration-\\[50\\%\\] { - text-decoration-thickness: calc(1em / 2); - } - - .decoration-\\[length\\:--my-thickness\\], .decoration-\\[percentage\\:--my-thickness\\] { - text-decoration-thickness: var(--my-thickness); - } - .decoration-0 { text-decoration-thickness: 0; } @@ -9093,6 +9081,18 @@ test('decoration', () => { text-decoration-thickness: 4px; } + .decoration-\\[12px\\] { + text-decoration-thickness: 12px; + } + + .decoration-\\[50\\%\\] { + text-decoration-thickness: calc(1em / 2); + } + + .decoration-\\[length\\:--my-thickness\\], .decoration-\\[percentage\\:--my-thickness\\] { + text-decoration-thickness: var(--my-thickness); + } + .decoration-auto { text-decoration-thickness: auto; } @@ -9234,13 +9234,13 @@ test('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, ); } - .brightness-\\[1\\.23\\] { - --tw-brightness: brightness(1.23); + .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, ); } - .brightness-50 { - --tw-brightness: brightness(50%); + .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, ); } @@ -9259,13 +9259,18 @@ test('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, ); } + .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, ); + } + .grayscale-\\[--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, ); } - .grayscale-0 { - --tw-grayscale: grayscale(0%); + .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, ); } @@ -9274,13 +9279,13 @@ test('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, ); } - .hue-rotate-15 { - --tw-hue-rotate: hue-rotate(15deg); + .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, ); } - .invert { - --tw-invert: invert(100%); + .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, ); } @@ -9289,8 +9294,8 @@ test('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, ); } - .invert-0 { - --tw-invert: invert(0%); + .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, ); } @@ -9304,13 +9309,13 @@ test('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, ); } - .saturate-0 { - --tw-saturate: saturate(0%); + .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, ); } - .sepia { - --tw-sepia: sepia(100%); + .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, ); } @@ -9324,8 +9329,8 @@ test('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, ); } - .sepia-0 { - --tw-sepia: sepia(0%); + .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, ); } @@ -9334,11 +9339,6 @@ test('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, ); } - .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 { 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, ); } @@ -9484,26 +9484,20 @@ test('backdrop-filter', () => { 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, ); - } - .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, ); } - .backdrop-grayscale { - --tw-backdrop-grayscale: grayscale(100%); + .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, ); } - .backdrop-grayscale-\\[--value\\] { - --tw-backdrop-grayscale: grayscale(var(--value)); + .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, ); } @@ -9514,8 +9508,8 @@ test('backdrop-filter', () => { 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); + .backdrop-grayscale-\\[--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, ); } @@ -9526,14 +9520,14 @@ test('backdrop-filter', () => { 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%); + .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, ); } - .backdrop-invert-\\[--value\\] { - --tw-backdrop-invert: invert(var(--value)); + .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, ); } @@ -9544,8 +9538,8 @@ test('backdrop-filter', () => { 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); + .backdrop-invert-\\[--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, ); } @@ -9562,6 +9556,18 @@ test('backdrop-filter', () => { 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, ); + } + + .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, ); + } + .backdrop-saturate-\\[--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, ); @@ -9574,14 +9580,14 @@ test('backdrop-filter', () => { 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%); + .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, ); } - .backdrop-sepia { - --tw-backdrop-sepia: sepia(100%); + .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, ); } @@ -9598,8 +9604,8 @@ test('backdrop-filter', () => { 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%); + .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, ); } @@ -9610,12 +9616,6 @@ test('backdrop-filter', () => { 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, ); - } - .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, ); @@ -9795,16 +9795,16 @@ test('transition', () => { test('delay', () => { expect(run(['delay-123', 'delay-200', 'delay-[300ms]'])).toMatchInlineSnapshot(` - ".delay-\\[300ms\\] { - transition-delay: .3s; - } - - .delay-123 { + ".delay-123 { transition-delay: .123s; } .delay-200 { transition-delay: .2s; + } + + .delay-\\[300ms\\] { + transition-delay: .3s; }" `) expect(run(['delay', '-delay-200', '-delay-[300ms]'])).toEqual('') @@ -9812,16 +9812,16 @@ test('delay', () => { test('duration', () => { expect(run(['duration-123', 'duration-200', 'duration-[300ms]'])).toMatchInlineSnapshot(` - ".duration-\\[300ms\\] { - transition-duration: .3s; - } - - .duration-123 { + ".duration-123 { transition-duration: .123s; } .duration-200 { transition-duration: .2s; + } + + .duration-\\[300ms\\] { + transition-duration: .3s; }" `) expect(run(['duration', '-duration-200', '-duration-[300ms]'])).toEqual('') @@ -10034,14 +10034,14 @@ test('leading', () => { --line-height-6: 1.5rem; } - .leading-\\[--value\\] { - line-height: var(--value); - } - .leading-6 { line-height: 1.5rem; } + .leading-\\[--value\\] { + line-height: var(--value); + } + .leading-none { line-height: 1; }" @@ -10270,6 +10270,11 @@ test('outline', () => { outline-width: 1px; } + .outline-0 { + outline-style: var(--tw-outline-style); + outline-width: 0; + } + .outline-\\[1\\.5\\] { outline-style: var(--tw-outline-style); outline-width: 1.5px; @@ -10290,32 +10295,27 @@ test('outline', () => { outline-width: var(--my-width); } - .outline-0 { - outline-style: var(--tw-outline-style); - outline-width: 0; + .outline-\\[\\#0088cc\\] { + outline-color: #08c; + } + + .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] { + outline-color: #0088cc80; } .outline-\\[--value\\] { outline-color: var(--value); } - .outline-\\[--value\\]\\/\\[0\\.5\\], .outline-\\[--value\\]\\/\\[50\\%\\], .outline-\\[--value\\]\\/50 { + .outline-\\[--value\\]\\/50, .outline-\\[--value\\]\\/\\[0\\.5\\], .outline-\\[--value\\]\\/\\[50\\%\\] { outline-color: color-mix(in srgb, var(--value) 50%, transparent); } - .outline-\\[\\#0088cc\\] { - outline-color: #08c; - } - - .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\], .outline-\\[\\#0088cc\\]\\/50 { - outline-color: #0088cc80; - } - .outline-\\[black\\] { outline-color: #000; } - .outline-\\[black\\]\\/\\[0\\.5\\], .outline-\\[black\\]\\/\\[50\\%\\], .outline-\\[black\\]\\/50 { + .outline-\\[black\\]\\/50, .outline-\\[black\\]\\/\\[0\\.5\\], .outline-\\[black\\]\\/\\[50\\%\\] { outline-color: #00000080; } @@ -10323,7 +10323,7 @@ test('outline', () => { outline-color: var(--value); } - .outline-\\[color\\:--value\\]\\/\\[0\\.5\\], .outline-\\[color\\:--value\\]\\/\\[50\\%\\], .outline-\\[color\\:--value\\]\\/50 { + .outline-\\[color\\:--value\\]\\/50, .outline-\\[color\\:--value\\]\\/\\[0\\.5\\], .outline-\\[color\\:--value\\]\\/\\[50\\%\\] { outline-color: color-mix(in srgb, var(--value) 50%, transparent); } @@ -10331,7 +10331,7 @@ test('outline', () => { outline-color: currentColor; } - .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\], .outline-current\\/50 { + .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] { outline-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -10339,7 +10339,7 @@ test('outline', () => { outline-color: #ef4444; } - .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\], .outline-red-500\\/50 { + .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] { outline-color: #ef444480; } @@ -10414,20 +10414,20 @@ test('outline-offset', () => { '-outline-offset-[--value]', ]), ).toMatchInlineSnapshot(` - ".-outline-offset-\\[--value\\] { - outline-offset: calc(var(--value) * -1); - } - - .-outline-offset-4 { + ".-outline-offset-4 { outline-offset: calc(4px * -1); } - .outline-offset-\\[--value\\] { - outline-offset: var(--value); + .-outline-offset-\\[--value\\] { + outline-offset: calc(var(--value) * -1); } .outline-offset-4 { outline-offset: 4px; + } + + .outline-offset-\\[--value\\] { + outline-offset: var(--value); }" `) expect(run(['outline-offset'])).toEqual('') @@ -10435,12 +10435,12 @@ test('outline-offset', () => { test('opacity', () => { expect(run(['opacity-15', 'opacity-[--value]'])).toMatchInlineSnapshot(` - ".opacity-\\[--value\\] { - opacity: var(--value); + ".opacity-15 { + opacity: .15; } - .opacity-15 { - opacity: .15; + .opacity-\\[--value\\] { + opacity: var(--value); }" `) expect(run(['opacity', '-opacity-15', '-opacity-[--value]'])).toEqual('') @@ -10465,11 +10465,7 @@ test('underline-offset', () => { ], ), ).toMatchInlineSnapshot(` - ".-underline-offset-\\[--value\\] { - text-underline-offset: calc(var(--value) * -1); - } - - .-underline-offset-123 { + ".-underline-offset-123 { text-underline-offset: calc(123px * -1); } @@ -10477,8 +10473,8 @@ test('underline-offset', () => { text-underline-offset: calc(4px * -1); } - .underline-offset-\\[--value\\] { - text-underline-offset: var(--value); + .-underline-offset-\\[--value\\] { + text-underline-offset: calc(var(--value) * -1); } .underline-offset-123 { @@ -10489,6 +10485,10 @@ test('underline-offset', () => { text-underline-offset: 4px; } + .underline-offset-\\[--value\\] { + text-underline-offset: var(--value); + } + .underline-offset-auto { text-underline-offset: auto; }" @@ -10594,14 +10594,14 @@ test('text', () => { line-height: 1.5rem; } - .text-sm\\/\\[4px\\] { + .text-sm\\/6 { font-size: .875rem; - line-height: 4px; + line-height: 1.5rem; } - .text-sm\\/6 { + .text-sm\\/\\[4px\\] { font-size: .875rem; - line-height: 1.5rem; + line-height: 4px; } .text-\\[12px\\] { @@ -10636,27 +10636,27 @@ test('text', () => { font-size: xx-large; } - .text-\\[--my-color\\] { - color: var(--my-color); + .text-\\[\\#0088cc\\] { + color: #08c; } - .text-\\[--my-color\\]\\/\\[0\\.5\\], .text-\\[--my-color\\]\\/\\[50\\%\\], .text-\\[--my-color\\]\\/50 { - color: color-mix(in srgb, var(--my-color) 50%, transparent); + .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] { + color: #0088cc80; } - .text-\\[\\#0088cc\\] { - color: #08c; + .text-\\[--my-color\\] { + color: var(--my-color); } - .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\], .text-\\[\\#0088cc\\]\\/50 { - color: #0088cc80; + .text-\\[--my-color\\]\\/50, .text-\\[--my-color\\]\\/\\[0\\.5\\], .text-\\[--my-color\\]\\/\\[50\\%\\] { + color: color-mix(in srgb, var(--my-color) 50%, transparent); } .text-\\[color\\:--my-color\\] { color: var(--my-color); } - .text-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .text-\\[color\\:--my-color\\]\\/\\[50\\%\\], .text-\\[color\\:--my-color\\]\\/50 { + .text-\\[color\\:--my-color\\]\\/50, .text-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .text-\\[color\\:--my-color\\]\\/\\[50\\%\\] { color: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -10664,7 +10664,7 @@ test('text', () => { color: currentColor; } - .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\], .text-current\\/50 { + .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] { color: color-mix(in srgb, currentColor 50%, transparent); } @@ -10672,7 +10672,7 @@ test('text', () => { color: #ef4444; } - .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\], .text-red-500\\/50 { + .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] { color: #ef444480; } @@ -10801,7 +10801,7 @@ test('shadow', () => { --tw-shadow: var(--tw-shadow-colored); } - .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\], .shadow-\\[\\#0088cc\\]\\/50 { + .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-shadow-color: #0088cc80; --tw-shadow: var(--tw-shadow-colored); } @@ -10811,7 +10811,7 @@ test('shadow', () => { --tw-shadow: var(--tw-shadow-colored); } - .shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .shadow-\\[color\\:--value\\]\\/\\[50\\%\\], .shadow-\\[color\\:--value\\]\\/50 { + .shadow-\\[color\\:--value\\]\\/50, .shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .shadow-\\[color\\:--value\\]\\/\\[50\\%\\] { --tw-shadow-color: color-mix(in srgb, var(--value) 50%, transparent); --tw-shadow: var(--tw-shadow-colored); } @@ -10821,7 +10821,7 @@ test('shadow', () => { --tw-shadow: var(--tw-shadow-colored); } - .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\], .shadow-current\\/50 { + .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] { --tw-shadow-color: color-mix(in srgb, currentColor 50%, transparent); --tw-shadow: var(--tw-shadow-colored); } @@ -10831,7 +10831,7 @@ test('shadow', () => { --tw-shadow: var(--tw-shadow-colored); } - .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\], .shadow-red-500\\/50 { + .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] { --tw-shadow-color: #ef444480; --tw-shadow: var(--tw-shadow-colored); } @@ -11027,7 +11027,7 @@ test('inset-shadow', () => { --tw-inset-shadow: var(--tw-inset-shadow-colored); } - .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\], .inset-shadow-\\[\\#0088cc\\]\\/50 { + .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-inset-shadow-color: #0088cc80; --tw-inset-shadow: var(--tw-inset-shadow-colored); } @@ -11037,7 +11037,7 @@ test('inset-shadow', () => { --tw-inset-shadow: var(--tw-inset-shadow-colored); } - .inset-shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:--value\\]\\/\\[50\\%\\], .inset-shadow-\\[color\\:--value\\]\\/50 { + .inset-shadow-\\[color\\:--value\\]\\/50, .inset-shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:--value\\]\\/\\[50\\%\\] { --tw-inset-shadow-color: color-mix(in srgb, var(--value) 50%, transparent); --tw-inset-shadow: var(--tw-inset-shadow-colored); } @@ -11047,7 +11047,7 @@ test('inset-shadow', () => { --tw-inset-shadow: var(--tw-inset-shadow-colored); } - .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\], .inset-shadow-current\\/50 { + .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] { --tw-inset-shadow-color: color-mix(in srgb, currentColor 50%, transparent); --tw-inset-shadow: var(--tw-inset-shadow-colored); } @@ -11057,7 +11057,7 @@ test('inset-shadow', () => { --tw-inset-shadow: var(--tw-inset-shadow-colored); } - .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\], .inset-shadow-red-500\\/50 { + .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] { --tw-inset-shadow-color: #ef444480; --tw-inset-shadow: var(--tw-inset-shadow-colored); } @@ -11212,16 +11212,6 @@ test('ring', () => { 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); - 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\\:--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); - 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); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -11242,27 +11232,37 @@ test('ring', () => { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .ring-\\[--my-color\\] { - --tw-ring-color: var(--my-color); + .ring-\\[12px\\] { + --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-\\[--my-color\\]\\/\\[0\\.5\\], .ring-\\[--my-color\\]\\/\\[50\\%\\], .ring-\\[--my-color\\]\\/50 { - --tw-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); + .ring-\\[length\\:--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); + 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; } - .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\], .ring-\\[\\#0088cc\\]\\/50 { + .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-ring-color: #0088cc80; } + .ring-\\[--my-color\\] { + --tw-ring-color: var(--my-color); + } + + .ring-\\[--my-color\\]\\/50, .ring-\\[--my-color\\]\\/\\[0\\.5\\], .ring-\\[--my-color\\]\\/\\[50\\%\\] { + --tw-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); + } + .ring-\\[color\\:--my-color\\] { --tw-ring-color: var(--my-color); } - .ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-\\[color\\:--my-color\\]\\/\\[50\\%\\], .ring-\\[color\\:--my-color\\]\\/50 { + .ring-\\[color\\:--my-color\\]\\/50, .ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-\\[color\\:--my-color\\]\\/\\[50\\%\\] { --tw-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -11270,7 +11270,7 @@ test('ring', () => { --tw-ring-color: currentColor; } - .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\], .ring-current\\/50 { + .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] { --tw-ring-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -11278,7 +11278,7 @@ test('ring', () => { --tw-ring-color: #ef4444; } - .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\], .ring-red-500\\/50 { + .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] { --tw-ring-color: #ef444480; } @@ -11440,16 +11440,6 @@ test('inset-ring', () => { 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\\:--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-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); @@ -11470,27 +11460,37 @@ test('inset-ring', () => { 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-\\[--my-color\\] { - --tw-inset-ring-color: var(--my-color); + .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-\\[--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[--my-color\\]\\/\\[50\\%\\], .inset-ring-\\[--my-color\\]\\/50 { - --tw-inset-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); + .inset-ring-\\[length\\:--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; } - .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\], .inset-ring-\\[\\#0088cc\\]\\/50 { + .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-inset-ring-color: #0088cc80; } + .inset-ring-\\[--my-color\\] { + --tw-inset-ring-color: var(--my-color); + } + + .inset-ring-\\[--my-color\\]\\/50, .inset-ring-\\[--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[--my-color\\]\\/\\[50\\%\\] { + --tw-inset-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); + } + .inset-ring-\\[color\\:--my-color\\] { --tw-inset-ring-color: var(--my-color); } - .inset-ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[color\\:--my-color\\]\\/\\[50\\%\\], .inset-ring-\\[color\\:--my-color\\]\\/50 { + .inset-ring-\\[color\\:--my-color\\]\\/50, .inset-ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[color\\:--my-color\\]\\/\\[50\\%\\] { --tw-inset-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -11498,7 +11498,7 @@ test('inset-ring', () => { --tw-inset-ring-color: currentColor; } - .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\], .inset-ring-current\\/50 { + .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] { --tw-inset-ring-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -11506,7 +11506,7 @@ test('inset-ring', () => { --tw-inset-ring-color: #ef4444; } - .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\], .inset-ring-red-500\\/50 { + .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] { --tw-inset-ring-color: #ef444480; } @@ -11659,16 +11659,6 @@ test('ring-offset', () => { --color-red-500: #ef4444; } - .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); - } - - .ring-offset-\\[length\\:--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); - } - .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); @@ -11689,27 +11679,37 @@ test('ring-offset', () => { --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } - .ring-offset-\\[--my-color\\] { - --tw-ring-offset-color: var(--my-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); } - .ring-offset-\\[--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[--my-color\\]\\/\\[50\\%\\], .ring-offset-\\[--my-color\\]\\/50 { - --tw-ring-offset-color: color-mix(in srgb, var(--my-color) 50%, transparent); + .ring-offset-\\[length\\:--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); } .ring-offset-\\[\\#0088cc\\] { --tw-ring-offset-color: #08c; } - .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\], .ring-offset-\\[\\#0088cc\\]\\/50 { + .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] { --tw-ring-offset-color: #0088cc80; } + .ring-offset-\\[--my-color\\] { + --tw-ring-offset-color: var(--my-color); + } + + .ring-offset-\\[--my-color\\]\\/50, .ring-offset-\\[--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[--my-color\\]\\/\\[50\\%\\] { + --tw-ring-offset-color: color-mix(in srgb, var(--my-color) 50%, transparent); + } + .ring-offset-\\[color\\:--my-color\\] { --tw-ring-offset-color: var(--my-color); } - .ring-offset-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[color\\:--my-color\\]\\/\\[50\\%\\], .ring-offset-\\[color\\:--my-color\\]\\/50 { + .ring-offset-\\[color\\:--my-color\\]\\/50, .ring-offset-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[color\\:--my-color\\]\\/\\[50\\%\\] { --tw-ring-offset-color: color-mix(in srgb, var(--my-color) 50%, transparent); } @@ -11717,7 +11717,7 @@ test('ring-offset', () => { --tw-ring-offset-color: currentColor; } - .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\], .ring-offset-current\\/50 { + .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] { --tw-ring-offset-color: color-mix(in srgb, currentColor 50%, transparent); } @@ -11725,7 +11725,7 @@ test('ring-offset', () => { --tw-ring-offset-color: #ef4444; } - .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\], .ring-offset-red-500\\/50 { + .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] { --tw-ring-offset-color: #ef444480; } diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 62e6b1cfe9ed..3cc0919ad278 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -94,7 +94,7 @@ export class Variants { if (z === null) return 1 if (a.kind === 'arbitrary' && z.kind === 'arbitrary') { - return a.selector.localeCompare(z.selector) + return a.selector < z.selector ? -1 : 1 } else if (a.kind === 'arbitrary') { return 1 } else if (z.kind === 'arbitrary') { @@ -114,7 +114,7 @@ export class Variants { let compareFn = this.compareFns.get(aOrder) if (compareFn === undefined) return 0 - return compareFn(a, z) || a.root.localeCompare(z.root) + return compareFn(a, z) || (a.root < z.root ? -1 : 1) } keys() { @@ -469,7 +469,7 @@ export function createVariants(theme: Theme): Variants { let order = // Compare by bucket name - aBucket.localeCompare(zBucket) || + (aBucket === zBucket ? 0 : aBucket < zBucket ? -1 : 1) || // If bucket names are the same, compare by value (direction === 'asc' ? parseInt(aValue) - parseInt(zValue) @@ -489,7 +489,7 @@ export function createVariants(theme: Theme): Variants { // In this scenario, we want to alphabetically sort `calc(100%-1rem)` and // `calc(100%-2rem)` to make it deterministic. if (Number.isNaN(order)) { - return aValue.localeCompare(zValue) + return aValue < zValue ? -1 : 1 } return order From f0b4c79e89377e7997c38f40948859b6aa05df3e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 9 Mar 2024 00:23:44 +0100 Subject: [PATCH 08/18] track invalid candidates When an incoming raw candidates doesn't produce any output, then we can mark it as an invalid candidate. This will allow us to reduce the amount of candidates to handle in incremental rebuilds. --- packages/tailwindcss/src/compile.ts | 2 ++ packages/tailwindcss/src/design-system.ts | 11 +++++++++++ 2 files changed, 13 insertions(+) diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts index c65dbcbb5a11..59f7e32a5c43 100644 --- a/packages/tailwindcss/src/compile.ts +++ b/packages/tailwindcss/src/compile.ts @@ -24,6 +24,7 @@ export function compileCandidates( if (throwOnInvalidCandidate) { throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`) } + designSystem.markInvalidCandidate(rawCandidate) continue // Bail, invalid candidate } candidates.set(candidate, rawCandidate) @@ -41,6 +42,7 @@ export function compileCandidates( if (throwOnInvalidCandidate) { throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`) } + designSystem.markInvalidCandidate(rawCandidate) continue next } diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts index e5cb04135a50..22277eda357b 100644 --- a/packages/tailwindcss/src/design-system.ts +++ b/packages/tailwindcss/src/design-system.ts @@ -24,12 +24,16 @@ export type DesignSystem = { getUsedVariants(): ReturnType[] getAstNodeSize(): number + + markInvalidCandidate(candidate: string): void + isInvalidCandidate(candidate: string): boolean } export function buildDesignSystem(theme: Theme): DesignSystem { let utilities = createUtilities(theme) let variants = createVariants(theme) + let invalidRawCandidates = new Set() let parsedVariants = new DefaultMap((variant) => parseVariant(variant, designSystem)) let parsedCandidates = new DefaultMap((candidate) => parseCandidate(candidate, designSystem)) let compiledAstNodes = new DefaultMap((candidate) => compileAstNodes(candidate, designSystem)) @@ -79,6 +83,13 @@ export function buildDesignSystem(theme: Theme): DesignSystem { getAstNodeSize() { return compiledAstNodes.size }, + + markInvalidCandidate(candidate: string) { + invalidRawCandidates.add(candidate) + }, + isInvalidCandidate(candidate: string) { + return invalidRawCandidates.has(candidate) + }, } return designSystem From 79d0a01132b99fea034d22937b16c632e927990d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 9 Mar 2024 00:28:15 +0100 Subject: [PATCH 09/18] add initial incremental rebuild implementation This includes a number of steps: 1. Track the `@tailwind utilities` rule, so that we can adjust its nodes later without re-parsing the full incoming CSS. 2. Add the new incoming raw candidates to the existing set of candidates. 3. Parse the merged set to `compileCandidates` (this can accept any `Iterable`, which means `string[]`, `Set`, ...) 4. Get the new AST nodes, update the `@tailwind utilities` rule's nodes and re-print the AST to CSS. --- packages/tailwindcss/src/compile.ts | 2 +- packages/tailwindcss/src/index.ts | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts index 59f7e32a5c43..d1dc7d0ee53a 100644 --- a/packages/tailwindcss/src/compile.ts +++ b/packages/tailwindcss/src/compile.ts @@ -6,7 +6,7 @@ import { escape } from './utils/escape' import type { Variants } from './variants' export function compileCandidates( - rawCandidates: string[], + rawCandidates: Iterable, designSystem: DesignSystem, { throwOnInvalidCandidate = false } = {}, ) { diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index c05dea05e083..143d8171d63a 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -103,10 +103,14 @@ export function compile( let designSystem = buildDesignSystem(theme) + let tailwindUtilitiesNode: Rule | null = null + // Find `@tailwind utilities` and replace it with the actual generated utility // class CSS. walk(ast, (node) => { if (node.kind === 'rule' && node.selector === '@tailwind utilities') { + tailwindUtilitiesNode = node + // Set the `@tailwind utilities` nodes, to the actual generated CSS node.nodes = compileCandidates(rawCandidates, designSystem).astNodes @@ -170,10 +174,26 @@ export function compile( }) } + // Track all valid candidates, these are the incoming `rawCandidate` that + // resulted in a generated AST Node. All the other `rawCandidates` are invalid + // and should be ignored. + let allValidCandidates = new Set(rawCandidates) let compiledCss = toCss(ast) return { rebuild(newRawCandidates: string[]) { + // Add all new candidates unless we know that they are invalid. + for (let candidate of newRawCandidates) { + allValidCandidates.add(candidate) + } + + if (tailwindUtilitiesNode) { + let newNodes = compileCandidates(allValidCandidates, designSystem).astNodes + + tailwindUtilitiesNode.nodes = newNodes + compiledCss = toCss(ast) + } + return compiledCss }, css: compiledCss, From ad0260e0f02b7511e9d8e83c2a7630460af93c05 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 9 Mar 2024 00:33:12 +0100 Subject: [PATCH 10/18] improvement 1: ignore known invalid candidates This will reduce the amount of candidates to handle. They would eventually be skipped anyway, but now we don't even have to re-parse (and hit a cache) at all. --- packages/tailwindcss/src/index.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 143d8171d63a..4a550c8df8af 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -177,14 +177,21 @@ export function compile( // Track all valid candidates, these are the incoming `rawCandidate` that // resulted in a generated AST Node. All the other `rawCandidates` are invalid // and should be ignored. - let allValidCandidates = new Set(rawCandidates) + let allValidCandidates = new Set() + for (let rawCandidate of rawCandidates) { + if (!designSystem.isInvalidCandidate(rawCandidate)) { + allValidCandidates.add(rawCandidate) + } + } let compiledCss = toCss(ast) return { rebuild(newRawCandidates: string[]) { // Add all new candidates unless we know that they are invalid. for (let candidate of newRawCandidates) { - allValidCandidates.add(candidate) + if (!designSystem.isInvalidCandidate(candidate)) { + allValidCandidates.add(candidate) + } } if (tailwindUtilitiesNode) { From 1814537c3a20959851ece07cfc32f6319106eba8 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 9 Mar 2024 00:34:55 +0100 Subject: [PATCH 11/18] improvement 2: skip work, when generated AST is the same MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Currently incremental rebuilds are additive, which means that we are not keeping track if we should remove CSS again in development. We can exploit this information, because now we can quickly check the amoutn of generated AST nodes. - If they are the same then nothing new is generated — this means that we can re-use the previous compiled CSS. We don't even have to re-print the AST because we already did do that work in the past. - If there are more AST nodes, something new is generated — this means that we should update the `@tailwind utilities` rule and re-print the CSS. We can store the result for future incremental rebuilds. --- packages/tailwindcss/src/index.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 4a550c8df8af..3b8eee129e42 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -195,8 +195,16 @@ export function compile( } if (tailwindUtilitiesNode) { + let previousAstNodeCount = designSystem.getAstNodeSize() let newNodes = compileCandidates(allValidCandidates, designSystem).astNodes + // If no new ast nodes were generated, then we can return the original + // CSS. This currently assumes that we only add new ast nodes and never + // remove any. + if (previousAstNodeCount === designSystem.getAstNodeSize()) { + return compiledCss + } + tailwindUtilitiesNode.nodes = newNodes compiledCss = toCss(ast) } From f066da87adc77f722663cd3fc07d71172e83dbf8 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 9 Mar 2024 00:38:54 +0100 Subject: [PATCH 12/18] improvement 3: skip work if no new candidates are detected - We already know a set of candidates from previous runs. - We also already know a set of candidates that are invalid and don't produce anything. This means that an incremental rebuild could give us a new set of candidates that either already exist or are invalid. If nothing changes, then we can re-use the compiled CSS. This actually happens more often than you think, and the bigger your project is the better this optimization will be. For example: ``` // Imagine file A exists:
``` ``` // Now you add a second file B:
``` You just created a brand new file with a bunch of HTML elements and classes, yet all of the candidates in file B already exist in file A, so nothing changes to the actual generated CSS. Now imagine the other hundreds of files that already contain hundreds of classes. The beauty of this optimization is two-fold: - On small projects, compiling is very fast even without this check. This means it is performant. - On bigger projects, we will be able to re-use existing candidates. This means it stays performant. --- packages/tailwindcss/src/index.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 3b8eee129e42..cb5559a1b2be 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -187,13 +187,23 @@ export function compile( return { rebuild(newRawCandidates: string[]) { + let didChange = false + // Add all new candidates unless we know that they are invalid. + let prevSize = allValidCandidates.size for (let candidate of newRawCandidates) { if (!designSystem.isInvalidCandidate(candidate)) { allValidCandidates.add(candidate) + didChange ||= allValidCandidates.size !== prevSize } } + // If no new candidates were added, we can return the original CSS. This + // currently assumes that we only add new candidates and never remove any. + if (!didChange) { + return compiledCss + } + if (tailwindUtilitiesNode) { let previousAstNodeCount = designSystem.getAstNodeSize() let newNodes = compileCandidates(allValidCandidates, designSystem).astNodes From 233185f9f2e56c0d96292dd176b300427b535de8 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 11 Mar 2024 15:53:21 +0100 Subject: [PATCH 13/18] remove `getAstNodeSize` We can move this up the tree and move it to the `rebuild` function instead. --- packages/tailwindcss/src/design-system.ts | 4 ---- packages/tailwindcss/src/index.ts | 6 ++++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts index 22277eda357b..8a589dacdb27 100644 --- a/packages/tailwindcss/src/design-system.ts +++ b/packages/tailwindcss/src/design-system.ts @@ -23,7 +23,6 @@ export type DesignSystem = { compileAstNodes(candidate: string): ReturnType getUsedVariants(): ReturnType[] - getAstNodeSize(): number markInvalidCandidate(candidate: string): void isInvalidCandidate(candidate: string): boolean @@ -80,9 +79,6 @@ export function buildDesignSystem(theme: Theme): DesignSystem { getUsedVariants() { return Array.from(parsedVariants.values()) }, - getAstNodeSize() { - return compiledAstNodes.size - }, markInvalidCandidate(candidate: string) { invalidRawCandidates.add(candidate) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index cb5559a1b2be..f1c0dcb92cfa 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -184,6 +184,7 @@ export function compile( } } let compiledCss = toCss(ast) + let previousAstNodeCount = 0 return { rebuild(newRawCandidates: string[]) { @@ -205,16 +206,17 @@ export function compile( } if (tailwindUtilitiesNode) { - let previousAstNodeCount = designSystem.getAstNodeSize() let newNodes = compileCandidates(allValidCandidates, designSystem).astNodes // If no new ast nodes were generated, then we can return the original // CSS. This currently assumes that we only add new ast nodes and never // remove any. - if (previousAstNodeCount === designSystem.getAstNodeSize()) { + if (previousAstNodeCount === newNodes.length) { return compiledCss } + previousAstNodeCount = newNodes.length + tailwindUtilitiesNode.nodes = newNodes compiledCss = toCss(ast) } From 6901a99544a639435a0999b57fed189bd1fe951e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 11 Mar 2024 16:02:30 +0100 Subject: [PATCH 14/18] remove invalid candidate tracking from `DesignSystem` This isn't used anywhere but only in the `rebuild` of the compile step. This allows us to remove it entirely from core logic, and move it up the chain where it is needed. --- packages/tailwindcss/src/compile.ts | 9 ++++++--- packages/tailwindcss/src/design-system.ts | 11 ----------- packages/tailwindcss/src/index.ts | 17 +++++++++++++---- 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts index d1dc7d0ee53a..54a27475f599 100644 --- a/packages/tailwindcss/src/compile.ts +++ b/packages/tailwindcss/src/compile.ts @@ -8,7 +8,10 @@ import type { Variants } from './variants' export function compileCandidates( rawCandidates: Iterable, designSystem: DesignSystem, - { throwOnInvalidCandidate = false } = {}, + { + throwOnInvalidCandidate = false, + onInvalidCanidate, + }: { throwOnInvalidCandidate?: boolean; onInvalidCanidate?: (candidate: string) => void } = {}, ) { let nodeSorting = new Map< AstNode, @@ -24,7 +27,7 @@ export function compileCandidates( if (throwOnInvalidCandidate) { throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`) } - designSystem.markInvalidCandidate(rawCandidate) + onInvalidCanidate?.(rawCandidate) continue // Bail, invalid candidate } candidates.set(candidate, rawCandidate) @@ -42,7 +45,7 @@ export function compileCandidates( if (throwOnInvalidCandidate) { throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`) } - designSystem.markInvalidCandidate(rawCandidate) + onInvalidCanidate?.(rawCandidate) continue next } diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts index 8a589dacdb27..d2e2a291da78 100644 --- a/packages/tailwindcss/src/design-system.ts +++ b/packages/tailwindcss/src/design-system.ts @@ -23,16 +23,12 @@ export type DesignSystem = { compileAstNodes(candidate: string): ReturnType getUsedVariants(): ReturnType[] - - markInvalidCandidate(candidate: string): void - isInvalidCandidate(candidate: string): boolean } export function buildDesignSystem(theme: Theme): DesignSystem { let utilities = createUtilities(theme) let variants = createVariants(theme) - let invalidRawCandidates = new Set() let parsedVariants = new DefaultMap((variant) => parseVariant(variant, designSystem)) let parsedCandidates = new DefaultMap((candidate) => parseCandidate(candidate, designSystem)) let compiledAstNodes = new DefaultMap((candidate) => compileAstNodes(candidate, designSystem)) @@ -79,13 +75,6 @@ export function buildDesignSystem(theme: Theme): DesignSystem { getUsedVariants() { return Array.from(parsedVariants.values()) }, - - markInvalidCandidate(candidate: string) { - invalidRawCandidates.add(candidate) - }, - isInvalidCandidate(candidate: string) { - return invalidRawCandidates.has(candidate) - }, } return designSystem diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index f1c0dcb92cfa..81171f9afc3c 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -19,6 +19,12 @@ export function compile( ast.unshift(comment(`! tailwindcss v${version} | MIT License | https://tailwindcss.com `)) } + // Track all invalid candidates + let invalidCandidates = new Set() + function onInvalidCanidate(candidate: string) { + invalidCandidates.add(candidate) + } + // Find all `@theme` declarations let theme = new Theme() let firstThemeRule: Rule | null = null @@ -112,7 +118,7 @@ export function compile( tailwindUtilitiesNode = node // Set the `@tailwind utilities` nodes, to the actual generated CSS - node.nodes = compileCandidates(rawCandidates, designSystem).astNodes + node.nodes = compileCandidates(rawCandidates, designSystem, { onInvalidCanidate }).astNodes // Stop walking after finding `@tailwind utilities` to avoid walking all // of the generated CSS. This means `@tailwind utilities` can only appear @@ -135,6 +141,7 @@ export function compile( // Parse the candidates to an AST that we can replace the `@apply` rule with. let candidateAst = compileCandidates(candidates, designSystem, { throwOnInvalidCandidate: true, + onInvalidCanidate, }).astNodes // Collect the nodes to insert in place of the `@apply` rule. When a @@ -179,7 +186,7 @@ export function compile( // and should be ignored. let allValidCandidates = new Set() for (let rawCandidate of rawCandidates) { - if (!designSystem.isInvalidCandidate(rawCandidate)) { + if (!invalidCandidates.has(rawCandidate)) { allValidCandidates.add(rawCandidate) } } @@ -193,7 +200,7 @@ export function compile( // Add all new candidates unless we know that they are invalid. let prevSize = allValidCandidates.size for (let candidate of newRawCandidates) { - if (!designSystem.isInvalidCandidate(candidate)) { + if (!invalidCandidates.has(candidate)) { allValidCandidates.add(candidate) didChange ||= allValidCandidates.size !== prevSize } @@ -206,7 +213,9 @@ export function compile( } if (tailwindUtilitiesNode) { - let newNodes = compileCandidates(allValidCandidates, designSystem).astNodes + let newNodes = compileCandidates(allValidCandidates, designSystem, { + onInvalidCanidate, + }).astNodes // If no new ast nodes were generated, then we can return the original // CSS. This currently assumes that we only add new ast nodes and never From 532bdbce64863072dbbca1769888e4e7277f8d0f Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 11 Mar 2024 16:05:31 +0100 Subject: [PATCH 15/18] replace `throwOnInvalidCandidate` with `onInvalidCanidate` This was only needed for working with `@apply`, now this logic _only_ exists in the code path where we are handling `@apply`. --- packages/tailwindcss/src/compile.ts | 11 +---------- packages/tailwindcss/src/design-system.ts | 2 +- packages/tailwindcss/src/index.ts | 5 +++-- packages/tailwindcss/src/sort.ts | 4 +--- 4 files changed, 6 insertions(+), 16 deletions(-) diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts index 54a27475f599..fc0cd4c7f03b 100644 --- a/packages/tailwindcss/src/compile.ts +++ b/packages/tailwindcss/src/compile.ts @@ -8,10 +8,7 @@ import type { Variants } from './variants' export function compileCandidates( rawCandidates: Iterable, designSystem: DesignSystem, - { - throwOnInvalidCandidate = false, - onInvalidCanidate, - }: { throwOnInvalidCandidate?: boolean; onInvalidCanidate?: (candidate: string) => void } = {}, + { onInvalidCanidate }: { onInvalidCanidate?: (candidate: string) => void } = {}, ) { let nodeSorting = new Map< AstNode, @@ -24,9 +21,6 @@ export function compileCandidates( for (let rawCandidate of rawCandidates) { let candidate = designSystem.parseCandidate(rawCandidate) if (candidate === null) { - if (throwOnInvalidCandidate) { - throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`) - } onInvalidCanidate?.(rawCandidate) continue // Bail, invalid candidate } @@ -42,9 +36,6 @@ export function compileCandidates( next: for (let [candidate, rawCandidate] of candidates) { let astNode = designSystem.compileAstNodes(rawCandidate) if (astNode === null) { - if (throwOnInvalidCandidate) { - throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`) - } onInvalidCanidate?.(rawCandidate) continue next } diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts index d2e2a291da78..bebd82a33c23 100644 --- a/packages/tailwindcss/src/design-system.ts +++ b/packages/tailwindcss/src/design-system.ts @@ -42,7 +42,7 @@ export function buildDesignSystem(theme: Theme): DesignSystem { let result: (string | null)[] = [] for (let className of classes) { - let { astNodes } = compileCandidates([className], this, { throwOnInvalidCandidate: false }) + let { astNodes } = compileCandidates([className], this) if (astNodes.length === 0) { result.push(null) } else { diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 81171f9afc3c..4cc875b4cb7b 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -140,8 +140,9 @@ export function compile( { // Parse the candidates to an AST that we can replace the `@apply` rule with. let candidateAst = compileCandidates(candidates, designSystem, { - throwOnInvalidCandidate: true, - onInvalidCanidate, + onInvalidCanidate: (candidate) => { + throw new Error(`Cannot apply unknown utility class: ${candidate}`) + }, }).astNodes // Collect the nodes to insert in place of the `@apply` rule. When a diff --git a/packages/tailwindcss/src/sort.ts b/packages/tailwindcss/src/sort.ts index b3434ed094dd..e15c4f02ef51 100644 --- a/packages/tailwindcss/src/sort.ts +++ b/packages/tailwindcss/src/sort.ts @@ -3,9 +3,7 @@ import type { DesignSystem } from './design-system' export function getClassOrder(design: DesignSystem, classes: string[]): [string, bigint | null][] { // Generate a sorted AST - let { astNodes, nodeSorting } = compileCandidates(Array.from(classes), design, { - throwOnInvalidCandidate: false, - }) + let { astNodes, nodeSorting } = compileCandidates(Array.from(classes), design) // Map class names to their order in the AST // `null` indicates a non-Tailwind class From cddaefa200222f7ee690c457415f860ef8b5d617 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 11 Mar 2024 17:48:42 +0100 Subject: [PATCH 16/18] update `compile` API signature --- packages/tailwindcss/src/index.ts | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 4cc875b4cb7b..301b73022b64 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -6,12 +6,8 @@ import * as CSS from './css-parser' import { buildDesignSystem } from './design-system' import { Theme } from './theme' -export function compile( - css: string, - rawCandidates: string[], -): { - rebuild(candidates: string[]): string - css: string +export function compile(css: string): { + build(candidates: string[]): string } { let ast = CSS.parse(css) @@ -117,9 +113,6 @@ export function compile( if (node.kind === 'rule' && node.selector === '@tailwind utilities') { tailwindUtilitiesNode = node - // Set the `@tailwind utilities` nodes, to the actual generated CSS - node.nodes = compileCandidates(rawCandidates, designSystem, { onInvalidCanidate }).astNodes - // Stop walking after finding `@tailwind utilities` to avoid walking all // of the generated CSS. This means `@tailwind utilities` can only appear // once per file but that's the intended usage at this point in time. @@ -186,16 +179,11 @@ export function compile( // resulted in a generated AST Node. All the other `rawCandidates` are invalid // and should be ignored. let allValidCandidates = new Set() - for (let rawCandidate of rawCandidates) { - if (!invalidCandidates.has(rawCandidate)) { - allValidCandidates.add(rawCandidate) - } - } let compiledCss = toCss(ast) let previousAstNodeCount = 0 return { - rebuild(newRawCandidates: string[]) { + build(newRawCandidates: string[]) { let didChange = false // Add all new candidates unless we know that they are invalid. @@ -233,7 +221,6 @@ export function compile( return compiledCss }, - css: compiledCss, } } From 550dc246354cff7e5e91ab86133de3b79748dd1d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 11 Mar 2024 17:48:56 +0100 Subject: [PATCH 17/18] update callsite of `compile()` function --- .../src/commands/build/index.ts | 5 ++-- packages/@tailwindcss-postcss/src/index.ts | 4 +-- packages/@tailwindcss-vite/src/index.ts | 2 +- packages/tailwindcss/src/index.bench.ts | 9 +++---- packages/tailwindcss/src/test-utils/run.ts | 4 +-- packages/tailwindcss/tests/ui.spec.ts | 27 +++++++++---------- 6 files changed, 23 insertions(+), 28 deletions(-) diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index 2ca1c1bd3b75..d9298485184d 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -100,7 +100,8 @@ export async function handle(args: Result>) { ) // Compile the input - let result = compile(input, candidates).css + let { build } = compile(input) + let result = build(candidates) // Optimize the output if (args['--minify'] || args['--optimize']) { @@ -193,7 +194,7 @@ export async function handle(args: Result>) { } // Compile the input - let result = compile(input, candidates).css + result = compile(input).build(candidates) // Optimize the output if (args['--minify'] || args['--optimize']) { diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index aea4840f28be..303ffb92414b 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -53,7 +53,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { // No `@tailwind` means we don't have to look for candidates if (!hasTailwind) { - replaceCss(compile(root.toString(), []).css) + replaceCss(compile(root.toString()).build([])) return } @@ -83,7 +83,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { }) } - replaceCss(compile(root.toString(), candidates).css) + replaceCss(compile(root.toString()).build(candidates)) }, ], } diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index a6dfc0779156..64cfa3036b2d 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -63,7 +63,7 @@ export default function tailwindcss(): Plugin[] { } function generateCss(css: string) { - return compile(css, Array.from(candidates)).css + return compile(css).build(Array.from(candidates)) } function generateOptimizedCss(css: string) { diff --git a/packages/tailwindcss/src/index.bench.ts b/packages/tailwindcss/src/index.bench.ts index 1953aa19525b..6ec69f2f62cb 100644 --- a/packages/tailwindcss/src/index.bench.ts +++ b/packages/tailwindcss/src/index.bench.ts @@ -9,10 +9,7 @@ const css = String.raw bench('compile', async () => { let { candidates } = scanDir({ base: root, globs: true }) - compile( - css` - @tailwind utilities; - `, - candidates, - ) + compile(css` + @tailwind utilities; + `).build(candidates) }) diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index 5ba052633f51..0395604824e3 100644 --- a/packages/tailwindcss/src/test-utils/run.ts +++ b/packages/tailwindcss/src/test-utils/run.ts @@ -1,9 +1,9 @@ import { compile, optimizeCss } from '..' export function compileCss(css: string, candidates: string[] = []) { - return optimizeCss(compile(css, candidates).css).trim() + return optimizeCss(compile(css).build(candidates)).trim() } export function run(candidates: string[]) { - return optimizeCss(compile('@tailwind utilities;', candidates).css).trim() + return optimizeCss(compile('@tailwind utilities;').build(candidates)).trim() } diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts index 3577a44e21dc..f16736f668f3 100644 --- a/packages/tailwindcss/tests/ui.spec.ts +++ b/packages/tailwindcss/tests/ui.spec.ts @@ -255,21 +255,18 @@ async function render(page: Page, content: string) { await page.setContent(content) await page.addStyleTag({ content: optimizeCss( - compile( - css` - @layer theme, base, components, utilities; - @layer theme { - ${defaultTheme} - } - @layer base { - ${preflight} - } - @layer utilities { - @tailwind utilities; - } - `, - scanFiles([{ content, extension: 'html' }], IO.Sequential | Parsing.Sequential), - ).css, + compile(css` + @layer theme, base, components, utilities; + @layer theme { + ${defaultTheme} + } + @layer base { + ${preflight} + } + @layer utilities { + @tailwind utilities; + } + `).build(scanFiles([{ content, extension: 'html' }], IO.Sequential | Parsing.Sequential)), ), }) From edc8523a3cde2d0e7cd90733e1774ee32c0b2746 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 11 Mar 2024 18:13:06 +0100 Subject: [PATCH 18/18] fix typo --- packages/tailwindcss/src/compile.ts | 6 +++--- packages/tailwindcss/src/index.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts index fc0cd4c7f03b..ebbe2a74c52b 100644 --- a/packages/tailwindcss/src/compile.ts +++ b/packages/tailwindcss/src/compile.ts @@ -8,7 +8,7 @@ import type { Variants } from './variants' export function compileCandidates( rawCandidates: Iterable, designSystem: DesignSystem, - { onInvalidCanidate }: { onInvalidCanidate?: (candidate: string) => void } = {}, + { onInvalidCandidate }: { onInvalidCandidate?: (candidate: string) => void } = {}, ) { let nodeSorting = new Map< AstNode, @@ -21,7 +21,7 @@ export function compileCandidates( for (let rawCandidate of rawCandidates) { let candidate = designSystem.parseCandidate(rawCandidate) if (candidate === null) { - onInvalidCanidate?.(rawCandidate) + onInvalidCandidate?.(rawCandidate) continue // Bail, invalid candidate } candidates.set(candidate, rawCandidate) @@ -36,7 +36,7 @@ export function compileCandidates( next: for (let [candidate, rawCandidate] of candidates) { let astNode = designSystem.compileAstNodes(rawCandidate) if (astNode === null) { - onInvalidCanidate?.(rawCandidate) + onInvalidCandidate?.(rawCandidate) continue next } diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 301b73022b64..9678028f0216 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -17,7 +17,7 @@ export function compile(css: string): { // Track all invalid candidates let invalidCandidates = new Set() - function onInvalidCanidate(candidate: string) { + function onInvalidCandidate(candidate: string) { invalidCandidates.add(candidate) } @@ -133,7 +133,7 @@ export function compile(css: string): { { // Parse the candidates to an AST that we can replace the `@apply` rule with. let candidateAst = compileCandidates(candidates, designSystem, { - onInvalidCanidate: (candidate) => { + onInvalidCandidate: (candidate) => { throw new Error(`Cannot apply unknown utility class: ${candidate}`) }, }).astNodes @@ -203,7 +203,7 @@ export function compile(css: string): { if (tailwindUtilitiesNode) { let newNodes = compileCandidates(allValidCandidates, designSystem, { - onInvalidCanidate, + onInvalidCandidate, }).astNodes // If no new ast nodes were generated, then we can return the original