From 7ac138d235bd52bb5502140f8a1215acabe360b8 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 5 Nov 2024 12:36:44 -0500 Subject: [PATCH 1/4] Remove fallbacks from theme `var(...)` calls --- .../src/__snapshots__/index.test.ts.snap | 6 +- .../@tailwindcss-postcss/src/index.test.ts | 2 +- .../src/__snapshots__/index.test.ts.snap | 2 +- .../src/__snapshots__/utilities.test.ts.snap | 36 +- packages/tailwindcss/src/at-import.test.ts | 2 +- .../tailwindcss/src/compat/config.test.ts | 16 +- packages/tailwindcss/src/index.test.ts | 104 +-- packages/tailwindcss/src/prefix.test.ts | 42 +- packages/tailwindcss/src/theme.ts | 2 +- packages/tailwindcss/src/utilities.test.ts | 728 +++++++++--------- 10 files changed, 470 insertions(+), 470 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index ff79528e0854..133b27410310 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -541,12 +541,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` @layer utilities { .text-2xl { - font-size: var(--font-size-2xl, 1.5rem); - line-height: var(--tw-leading, var(--font-size-2xl--line-height, 2rem)); + font-size: var(--font-size-2xl); + line-height: var(--tw-leading, var(--font-size-2xl--line-height)); } .text-black\\/50 { - color: color-mix(in oklch, var(--color-black, #000) 50%, transparent); + color: color-mix(in oklch, var(--color-black) 50%, transparent); } .underline { diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 4c7e15a8634e..3455902718d5 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -100,7 +100,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () = expect(result.css.trim()).toMatchInlineSnapshot(` ".foo { - color: var(--color-red-500, oklch(.637 .237 25.331)); + color: var(--color-red-500); }" `) }) diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index eac45460c0c4..ed7d1d630d0d 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -366,7 +366,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using } .bg-red-500 { - background-color: var(--color-red-500, oklch(.637 .237 25.331)); + background-color: var(--color-red-500); } .shadow-sm { diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 8244538dd88c..f5ed7321b3e5 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -95,11 +95,11 @@ exports[`border-* 1`] = ` } .border-red-500 { - border-color: var(--color-red-500, #ef4444); + border-color: var(--color-red-500); } .border-red-500\\/50 { - border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .border-transparent { @@ -216,11 +216,11 @@ exports[`border-b-* 1`] = ` } .border-b-red-500 { - border-bottom-color: var(--color-red-500, #ef4444); + border-bottom-color: var(--color-red-500); } .border-b-red-500\\/50 { - border-bottom-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-bottom-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .border-b-transparent { @@ -337,11 +337,11 @@ exports[`border-e-* 1`] = ` } .border-e-red-500 { - border-inline-end-color: var(--color-red-500, #ef4444); + border-inline-end-color: var(--color-red-500); } .border-e-red-500\\/50 { - border-inline-end-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-inline-end-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .border-e-transparent { @@ -458,11 +458,11 @@ exports[`border-l-* 1`] = ` } .border-l-red-500 { - border-left-color: var(--color-red-500, #ef4444); + border-left-color: var(--color-red-500); } .border-l-red-500\\/50 { - border-left-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-left-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .border-l-transparent { @@ -579,11 +579,11 @@ exports[`border-r-* 1`] = ` } .border-r-red-500 { - border-right-color: var(--color-red-500, #ef4444); + border-right-color: var(--color-red-500); } .border-r-red-500\\/50 { - border-right-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-right-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .border-r-transparent { @@ -700,11 +700,11 @@ exports[`border-s-* 1`] = ` } .border-s-red-500 { - border-inline-start-color: var(--color-red-500, #ef4444); + border-inline-start-color: var(--color-red-500); } .border-s-red-500\\/50 { - border-inline-start-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-inline-start-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .border-s-transparent { @@ -821,11 +821,11 @@ exports[`border-t-* 1`] = ` } .border-t-red-500 { - border-top-color: var(--color-red-500, #ef4444); + border-top-color: var(--color-red-500); } .border-t-red-500\\/50 { - border-top-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-top-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .border-t-transparent { @@ -942,11 +942,11 @@ exports[`border-x-* 1`] = ` } .border-x-red-500 { - border-inline-color: var(--color-red-500, #ef4444); + border-inline-color: var(--color-red-500); } .border-x-red-500\\/50 { - border-inline-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-inline-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .border-x-transparent { @@ -1063,11 +1063,11 @@ exports[`border-y-* 1`] = ` } .border-y-red-500 { - border-block-color: var(--color-red-500, #ef4444); + border-block-color: var(--color-red-500); } .border-y-red-500\\/50 { - border-block-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-block-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .border-y-transparent { diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts index deedd554fedb..6686dbe49ec2 100644 --- a/packages/tailwindcss/src/at-import.test.ts +++ b/packages/tailwindcss/src/at-import.test.ts @@ -438,7 +438,7 @@ test('supports theme(reference) imports', async () => { ), ).resolves.toMatchInlineSnapshot(` ".text-red-500 { - color: var(--color-red-500, red); + color: var(--color-red-500); } " `) diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index 6f1e5d156a0d..9f94575d4f5a 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -402,7 +402,7 @@ describe('theme overrides order', () => { --color-blue: blue; } .bg-blue { - background-color: var(--color-blue, blue); + background-color: var(--color-blue); } .bg-red { background-color: very-red; @@ -491,19 +491,19 @@ describe('theme overrides order', () => { --color-slate-500: #100500; } .bg-slate-100 { - background-color: var(--color-slate-100, #000100); + background-color: var(--color-slate-100); } .bg-slate-200 { background-color: #200200; } .bg-slate-300 { - background-color: var(--color-slate-300, #000300); + background-color: var(--color-slate-300); } .bg-slate-400 { - background-color: var(--color-slate-400, #100400); + background-color: var(--color-slate-400); } .bg-slate-500 { - background-color: var(--color-slate-500, #100500); + background-color: var(--color-slate-500); } .bg-slate-600 { background-color: #200600; @@ -742,7 +742,7 @@ describe('default font family compatibility', () => { --font-family-sans: Sandwich Sans; } .font-sans { - font-family: var(--font-family-sans, Sandwich Sans); + font-family: var(--font-family-sans); } " `) @@ -1021,7 +1021,7 @@ describe('default font family compatibility', () => { --font-family-mono: Sandwich Mono; } .font-mono { - font-family: var(--font-family-mono, Sandwich Mono); + font-family: var(--font-family-mono); } " `) @@ -1476,7 +1476,7 @@ test('blocklisted candidates are not generated', async () => { } .md\\:bg-white { @media (width >= 48rem) { - background-color: var(--color-white, #fff); + background-color: var(--color-white); } } " diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 9780be2e90df..3a1b22b95623 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -49,7 +49,7 @@ describe('compiling CSS', () => { @media (prefers-color-scheme: dark) { .dark\\:bg-black { - background-color: var(--color-black, #000); + background-color: var(--color-black); } } }" @@ -241,30 +241,30 @@ describe('@apply', () => { .foo { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); - animation: var(--animate-spin, spin 1s linear infinite); - background-color: var(--color-red-500, #ef4444); + animation: var(--animate-spin); + background-color: var(--color-red-500); text-decoration-line: underline; } @media (hover: hover) { .foo:hover { - background-color: var(--color-blue-500, #3b82f6); + background-color: var(--color-blue-500); } } @media (width >= 768px) { .foo { - background-color: var(--color-green-500, #22c55e); + background-color: var(--color-green-500); } } .foo:hover:focus { - background-color: var(--color-red-200, #fecaca); + background-color: var(--color-red-200); } @media (width >= 768px) { .foo:hover:focus { - background-color: var(--color-green-200, #bbf7d0); + background-color: var(--color-green-200); } } @@ -577,7 +577,7 @@ describe('important', () => { } .animate-spin\\! { - animation: var(--animate-spin, spin 1s linear infinite) !important; + animation: var(--animate-spin) !important; } @keyframes spin { @@ -623,15 +623,15 @@ describe('sorting', () => { } .p-1 { - padding: var(--spacing-1, .25rem); + padding: var(--spacing-1); } .px-1 { - padding-inline: var(--spacing-1, .25rem); + padding-inline: var(--spacing-1); } .pl-1 { - padding-left: var(--spacing-1, .25rem); + padding-left: var(--spacing-1); }" `) }) @@ -680,16 +680,16 @@ describe('sorting', () => { } .mx-0 { - margin-inline: var(--spacing-0, 0px); + margin-inline: var(--spacing-0); } .gap-4 { - gap: var(--spacing-4, 1rem); + gap: var(--spacing-4); } :where(.space-x-2 > :not(:last-child)) { - margin-inline-start: calc(var(--spacing-2, .5rem) * var(--tw-space-x-reverse)); - margin-inline-end: calc(var(--spacing-2, .5rem) * calc(1 - var(--tw-space-x-reverse))); + margin-inline-start: calc(var(--spacing-2) * var(--tw-space-x-reverse)); + margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse))); } @supports (-moz-orient: inline) { @@ -749,51 +749,51 @@ describe('sorting', () => { } .mx-3 { - margin-inline: var(--spacing-3, 3px); + margin-inline: var(--spacing-3); } .ms-1 { - margin-inline-start: var(--spacing-1, 1px); + margin-inline-start: var(--spacing-1); } .me-2 { - margin-inline-end: var(--spacing-2, 2px); + margin-inline-end: var(--spacing-2); } .scroll-mx-3 { - scroll-margin-inline: var(--spacing-3, 3px); + scroll-margin-inline: var(--spacing-3); } .scroll-ms-1 { - scroll-margin-inline-start: var(--spacing-1, 1px); + scroll-margin-inline-start: var(--spacing-1); } .scroll-me-2 { - scroll-margin-inline-end: var(--spacing-2, 2px); + scroll-margin-inline-end: var(--spacing-2); } .scroll-px-3 { - scroll-padding-inline: var(--spacing-3, 3px); + scroll-padding-inline: var(--spacing-3); } .scroll-ps-1 { - scroll-padding-inline-start: var(--spacing-1, 1px); + scroll-padding-inline-start: var(--spacing-1); } .scroll-pe-2 { - scroll-padding-inline-end: var(--spacing-2, 2px); + scroll-padding-inline-end: var(--spacing-2); } .px-3 { - padding-inline: var(--spacing-3, 3px); + padding-inline: var(--spacing-3); } .ps-1 { - padding-inline-start: var(--spacing-1, 1px); + padding-inline-start: var(--spacing-1); } .pe-2 { - padding-inline-end: var(--spacing-2, 2px); + padding-inline-end: var(--spacing-2); }" `) }) @@ -996,7 +996,7 @@ describe('Parsing themes values from CSS', () => { } .accent-red-500 { - accent-color: var(--color-red-500, red); + accent-color: var(--color-red-500); }" `) }) @@ -1019,7 +1019,7 @@ describe('Parsing themes values from CSS', () => { } .accent-red-500 { - accent-color: var(--color-red-500, #f10); + accent-color: var(--color-red-500); }" `) }) @@ -1045,11 +1045,11 @@ describe('Parsing themes values from CSS', () => { } .accent-blue-500 { - accent-color: var(--color-blue-500, #00f); + accent-color: var(--color-blue-500); } .accent-red-500 { - accent-color: var(--color-red-500, red); + accent-color: var(--color-red-500); }" `) }) @@ -1074,11 +1074,11 @@ describe('Parsing themes values from CSS', () => { } .w-1\\/2 { - width: var(--width-1\\/2, 75%); + width: var(--width-1\\/2); } .w-75\\% { - width: var(--width-75\\%, 50%); + width: var(--width-75\\%); }" `) }) @@ -1111,11 +1111,11 @@ describe('Parsing themes values from CSS', () => { } .text-lg { - font-size: var(--font-size-lg, 20px); + font-size: var(--font-size-lg); } .accent-red { - accent-color: var(--color-red, red); + accent-color: var(--color-red); } @keyframes foo { @@ -1164,11 +1164,11 @@ describe('Parsing themes values from CSS', () => { } .text-sm { - font-size: var(--font-size-sm, 13px); + font-size: var(--font-size-sm); } .accent-green { - accent-color: var(--color-green, #0f0); + accent-color: var(--color-green); }" `) }) @@ -1199,7 +1199,7 @@ describe('Parsing themes values from CSS', () => { } .accent-green { - accent-color: var(--color-green, #0f0); + accent-color: var(--color-green); }" `) }) @@ -1237,7 +1237,7 @@ describe('Parsing themes values from CSS', () => { } .animate-foobar { - animation: var(--animate-foobar, foobar 1s infinite); + animation: var(--animate-foobar); } @keyframes foobar { @@ -1268,11 +1268,11 @@ describe('Parsing themes values from CSS', () => { } .bg-potato { - background-color: var(--color-potato, #ac855b); + background-color: var(--color-potato); } .bg-tomato { - background-color: var(--color-tomato, #e10c04); + background-color: var(--color-tomato); }" `) }) @@ -1293,7 +1293,7 @@ describe('Parsing themes values from CSS', () => { ), ).toMatchInlineSnapshot(` ".bg-potato { - background-color: var(--color-potato, #c794aa); + background-color: var(--color-potato); }" `) }) @@ -1318,7 +1318,7 @@ describe('Parsing themes values from CSS', () => { } .bg-potato { - background-color: var(--color-potato, #c794aa); + background-color: var(--color-potato); }" `) }) @@ -1348,15 +1348,15 @@ describe('Parsing themes values from CSS', () => { } .bg-avocado { - background-color: var(--color-avocado, #c0cc6d); + background-color: var(--color-avocado); } .bg-potato { - background-color: var(--color-potato, #ac855b); + background-color: var(--color-potato); } .bg-tomato { - background-color: var(--color-tomato, #e10c04); + background-color: var(--color-tomato); }" `) }) @@ -1532,7 +1532,7 @@ describe('Parsing themes values from CSS', () => { } .bg-potato { - background-color: var(--color-potato, #ac855b); + background-color: var(--color-potato); }" `) }) @@ -1574,7 +1574,7 @@ describe('Parsing themes values from CSS', () => { ), ).toMatchInlineSnapshot(` ".bg-potato { - background-color: var(--color-potato, #efb46b); + background-color: var(--color-potato); }" `) }) @@ -1625,11 +1625,11 @@ describe('Parsing themes values from CSS', () => { } .bg-potato { - background-color: var(--color-potato, #ac855b); + background-color: var(--color-potato); } .bg-tomato { - background-color: var(--color-tomato, tomato); + background-color: var(--color-tomato); }" `) }) @@ -1671,7 +1671,7 @@ describe('Parsing themes values from CSS', () => { } .text-orange { - color: var(--color-orange, orange); + color: var(--color-orange); } .text-red { @@ -1717,7 +1717,7 @@ describe('Parsing themes values from CSS', () => { } .text-orange { - color: var(--color-orange, orange); + color: var(--color-orange); } .text-red { diff --git a/packages/tailwindcss/src/prefix.test.ts b/packages/tailwindcss/src/prefix.test.ts index 17cea3eb6d76..aa9e67b5a21c 100644 --- a/packages/tailwindcss/src/prefix.test.ts +++ b/packages/tailwindcss/src/prefix.test.ts @@ -91,7 +91,7 @@ test('CSS variables output by the theme are prefixed', async () => { --tw-breakpoint-sm: 640px; } .tw\\:text-red { - color: var(--tw-color-red, #f00); + color: var(--tw-color-red); } " `) @@ -219,7 +219,7 @@ test('a prefix can be configured via @import theme(…)', async () => { ]), ).toMatchInlineSnapshot(` ".tw\\:bg-potato { - background-color: var(--tw-color-potato, #7a4724); + background-color: var(--tw-color-potato); } .tw\\:custom { color: red; @@ -279,27 +279,27 @@ test('a prefix can be configured via @import prefix(…)', async () => { expect(compiler.build(['tw:underline', 'tw:bg-potato', 'tw:hover:line-through', 'tw:custom'])) .toMatchInlineSnapshot(` - ":root { - --tw-color-potato: #7a4724; - } - .tw\\:bg-potato { - background-color: var(--tw-color-potato, #7a4724); - } - .tw\\:custom { - color: red; - } - .tw\\:underline { - text-decoration-line: underline; - } - .tw\\:hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; + ":root { + --tw-color-potato: #7a4724; + } + .tw\\:bg-potato { + background-color: var(--tw-color-potato); + } + .tw\\:custom { + color: red; + } + .tw\\:underline { + text-decoration-line: underline; + } + .tw\\:hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through; + } } } - } - " - `) + " + `) // Non-prefixed utilities are ignored compiler = await compile(input, { diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts index 523c18dff631..4f21de2dbab5 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/packages/tailwindcss/src/theme.ts @@ -144,7 +144,7 @@ export class Theme { return null } - return `var(${this.#prefixKey(themeKey)}, ${this.values.get(themeKey)?.value})` + return `var(${this.#prefixKey(themeKey)})` } resolve( diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index d603ccc6be4a..1ca45ab6a1c4 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -155,7 +155,7 @@ test('inset', async () => { } .-inset-4 { - inset: calc(var(--spacing-4, 1rem) * -1); + inset: calc(var(--spacing-4) * -1); } .-inset-full { @@ -167,7 +167,7 @@ test('inset', async () => { } .inset-4 { - inset: var(--spacing-4, 1rem); + inset: var(--spacing-4); } .inset-\\[4px\\] { @@ -183,7 +183,7 @@ test('inset', async () => { } .inset-ringo-starr { - inset: var(--inset-ringo-starr, 1940px); + inset: var(--inset-ringo-starr); } .inset-shadow-sm { @@ -323,7 +323,7 @@ test('inset-x', async () => { } .-inset-x-4 { - inset-inline: calc(var(--spacing-4, 1rem) * -1); + inset-inline: calc(var(--spacing-4) * -1); } .-inset-x-full { @@ -335,7 +335,7 @@ test('inset-x', async () => { } .inset-x-4 { - inset-inline: var(--spacing-4, 1rem); + inset-inline: var(--spacing-4); } .inset-x-\\[4px\\] { @@ -351,7 +351,7 @@ test('inset-x', async () => { } .inset-x-ringo-starr { - inset-inline: var(--inset-ringo-starr, 1940px); + inset-inline: var(--inset-ringo-starr); }" `) expect( @@ -412,7 +412,7 @@ test('inset-y', async () => { } .-inset-y-4 { - inset-block: calc(var(--spacing-4, 1rem) * -1); + inset-block: calc(var(--spacing-4) * -1); } .-inset-y-full { @@ -424,7 +424,7 @@ test('inset-y', async () => { } .inset-y-4 { - inset-block: var(--spacing-4, 1rem); + inset-block: var(--spacing-4); } .inset-y-\\[4px\\] { @@ -440,7 +440,7 @@ test('inset-y', async () => { } .inset-y-ringo-starr { - inset-block: var(--inset-ringo-starr, 1940px); + inset-block: var(--inset-ringo-starr); }" `) expect( @@ -501,7 +501,7 @@ test('start', async () => { } .-start-4 { - inset-inline-start: calc(var(--spacing-4, 1rem) * -1); + inset-inline-start: calc(var(--spacing-4) * -1); } .-start-full { @@ -513,7 +513,7 @@ test('start', async () => { } .start-4 { - inset-inline-start: var(--spacing-4, 1rem); + inset-inline-start: var(--spacing-4); } .start-\\[4px\\] { @@ -529,7 +529,7 @@ test('start', async () => { } .start-ringo-starr { - inset-inline-start: var(--inset-ringo-starr, 1940px); + inset-inline-start: var(--inset-ringo-starr); }" `) expect( @@ -590,7 +590,7 @@ test('end', async () => { } .-end-4 { - inset-inline-end: calc(var(--spacing-4, 1rem) * -1); + inset-inline-end: calc(var(--spacing-4) * -1); } .-end-full { @@ -602,7 +602,7 @@ test('end', async () => { } .end-4 { - inset-inline-end: var(--spacing-4, 1rem); + inset-inline-end: var(--spacing-4); } .end-\\[4px\\] { @@ -618,7 +618,7 @@ test('end', async () => { } .end-ringo-starr { - inset-inline-end: var(--inset-ringo-starr, 1940px); + inset-inline-end: var(--inset-ringo-starr); }" `) expect( @@ -680,7 +680,7 @@ test('top', async () => { } .-top-4 { - top: calc(var(--spacing-4, 1rem) * -1); + top: calc(var(--spacing-4) * -1); } .-top-full { @@ -692,7 +692,7 @@ test('top', async () => { } .top-4 { - top: var(--spacing-4, 1rem); + top: var(--spacing-4); } .top-\\[4px\\] { @@ -708,7 +708,7 @@ test('top', async () => { } .top-ringo-starr { - top: var(--inset-ringo-starr, 1940px); + top: var(--inset-ringo-starr); }" `) expect( @@ -769,7 +769,7 @@ test('right', async () => { } .-right-4 { - right: calc(var(--spacing-4, 1rem) * -1); + right: calc(var(--spacing-4) * -1); } .-right-full { @@ -781,7 +781,7 @@ test('right', async () => { } .right-4 { - right: var(--spacing-4, 1rem); + right: var(--spacing-4); } .right-\\[4px\\] { @@ -797,7 +797,7 @@ test('right', async () => { } .right-ringo-starr { - right: var(--inset-ringo-starr, 1940px); + right: var(--inset-ringo-starr); }" `) expect( @@ -858,7 +858,7 @@ test('bottom', async () => { } .-bottom-4 { - bottom: calc(var(--spacing-4, 1rem) * -1); + bottom: calc(var(--spacing-4) * -1); } .-bottom-full { @@ -870,7 +870,7 @@ test('bottom', async () => { } .bottom-4 { - bottom: var(--spacing-4, 1rem); + bottom: var(--spacing-4); } .bottom-\\[4px\\] { @@ -886,7 +886,7 @@ test('bottom', async () => { } .bottom-ringo-starr { - bottom: var(--inset-ringo-starr, 1940px); + bottom: var(--inset-ringo-starr); }" `) expect( @@ -947,7 +947,7 @@ test('left', async () => { } .-left-4 { - left: calc(var(--spacing-4, 1rem) * -1); + left: calc(var(--spacing-4) * -1); } .-left-full { @@ -959,7 +959,7 @@ test('left', async () => { } .left-4 { - left: var(--spacing-4, 1rem); + left: var(--spacing-4); } .left-\\[4px\\] { @@ -975,7 +975,7 @@ test('left', async () => { } .left-ringo-starr { - left: var(--inset-ringo-starr, 1940px); + left: var(--inset-ringo-starr); }" `) expect( @@ -1487,7 +1487,7 @@ test('margin', async () => { } .-m-4 { - margin: calc(var(--spacing-4, 1rem) * -1); + margin: calc(var(--spacing-4) * -1); } .-m-\\[var\\(--value\\)\\] { @@ -1495,7 +1495,7 @@ test('margin', async () => { } .m-4 { - margin: var(--spacing-4, 1rem); + margin: var(--spacing-4); } .m-\\[4px\\] { @@ -1542,7 +1542,7 @@ test('mx', async () => { } .-mx-4 { - margin-inline: calc(var(--spacing, .25rem) * -4); + margin-inline: calc(var(--spacing) * -4); } .-mx-\\[4px\\] { @@ -1554,19 +1554,19 @@ test('mx', async () => { } .-mx-big { - margin-inline: calc(var(--spacing-big, 100rem) * -1); + margin-inline: calc(var(--spacing-big) * -1); } .mx-1 { - margin-inline: calc(var(--spacing, .25rem) * 1); + margin-inline: calc(var(--spacing) * 1); } .mx-4 { - margin-inline: calc(var(--spacing, .25rem) * 4); + margin-inline: calc(var(--spacing) * 4); } .mx-99 { - margin-inline: calc(var(--spacing, .25rem) * 99); + margin-inline: calc(var(--spacing) * 99); } .mx-\\[4px\\] { @@ -1582,7 +1582,7 @@ test('mx', async () => { } .mx-big { - margin-inline: var(--spacing-big, 100rem); + margin-inline: var(--spacing-big); }" `) expect( @@ -1628,11 +1628,11 @@ test('my', async () => { } .-my-2\\.5 { - margin-block: calc(var(--spacing, .25rem) * -2.5); + margin-block: calc(var(--spacing) * -2.5); } .-my-4 { - margin-block: calc(var(--spacing, .25rem) * -4); + margin-block: calc(var(--spacing) * -4); } .-my-\\[4px\\] { @@ -1644,19 +1644,19 @@ test('my', async () => { } .-my-big { - margin-block: calc(var(--spacing-big, 100rem) * -1); + margin-block: calc(var(--spacing-big) * -1); } .my-1 { - margin-block: calc(var(--spacing, .25rem) * 1); + margin-block: calc(var(--spacing) * 1); } .my-2\\.5 { - margin-block: calc(var(--spacing, .25rem) * 2.5); + margin-block: calc(var(--spacing) * 2.5); } .my-99 { - margin-block: calc(var(--spacing, .25rem) * 99); + margin-block: calc(var(--spacing) * 99); } .my-\\[4px\\] { @@ -1668,7 +1668,7 @@ test('my', async () => { } .my-big { - margin-block: var(--spacing-big, 100rem); + margin-block: var(--spacing-big); }" `) expect( @@ -1714,11 +1714,11 @@ test('mt', async () => { } .-mt-2\\.5 { - margin-top: calc(var(--spacing, .25rem) * -2.5); + margin-top: calc(var(--spacing) * -2.5); } .-mt-4 { - margin-top: calc(var(--spacing, .25rem) * -4); + margin-top: calc(var(--spacing) * -4); } .-mt-\\[4px\\] { @@ -1730,19 +1730,19 @@ test('mt', async () => { } .-mt-big { - margin-top: calc(var(--spacing-big, 100rem) * -1); + margin-top: calc(var(--spacing-big) * -1); } .mt-1 { - margin-top: calc(var(--spacing, .25rem) * 1); + margin-top: calc(var(--spacing) * 1); } .mt-2\\.5 { - margin-top: calc(var(--spacing, .25rem) * 2.5); + margin-top: calc(var(--spacing) * 2.5); } .mt-99 { - margin-top: calc(var(--spacing, .25rem) * 99); + margin-top: calc(var(--spacing) * 99); } .mt-\\[4px\\] { @@ -1754,7 +1754,7 @@ test('mt', async () => { } .mt-big { - margin-top: var(--spacing-big, 100rem); + margin-top: var(--spacing-big); }" `) expect( @@ -1800,11 +1800,11 @@ test('ms', async () => { } .-ms-2\\.5 { - margin-inline-start: calc(var(--spacing, .25rem) * -2.5); + margin-inline-start: calc(var(--spacing) * -2.5); } .-ms-4 { - margin-inline-start: calc(var(--spacing, .25rem) * -4); + margin-inline-start: calc(var(--spacing) * -4); } .-ms-\\[4px\\] { @@ -1816,19 +1816,19 @@ test('ms', async () => { } .-ms-big { - margin-inline-start: calc(var(--spacing-big, 100rem) * -1); + margin-inline-start: calc(var(--spacing-big) * -1); } .ms-1 { - margin-inline-start: calc(var(--spacing, .25rem) * 1); + margin-inline-start: calc(var(--spacing) * 1); } .ms-2\\.5 { - margin-inline-start: calc(var(--spacing, .25rem) * 2.5); + margin-inline-start: calc(var(--spacing) * 2.5); } .ms-99 { - margin-inline-start: calc(var(--spacing, .25rem) * 99); + margin-inline-start: calc(var(--spacing) * 99); } .ms-\\[4px\\] { @@ -1840,7 +1840,7 @@ test('ms', async () => { } .ms-big { - margin-inline-start: var(--spacing-big, 100rem); + margin-inline-start: var(--spacing-big); }" `) expect( @@ -1886,11 +1886,11 @@ test('me', async () => { } .-me-2\\.5 { - margin-inline-end: calc(var(--spacing, .25rem) * -2.5); + margin-inline-end: calc(var(--spacing) * -2.5); } .-me-4 { - margin-inline-end: calc(var(--spacing, .25rem) * -4); + margin-inline-end: calc(var(--spacing) * -4); } .-me-\\[4px\\] { @@ -1902,19 +1902,19 @@ test('me', async () => { } .-me-big { - margin-inline-end: calc(var(--spacing-big, 100rem) * -1); + margin-inline-end: calc(var(--spacing-big) * -1); } .me-1 { - margin-inline-end: calc(var(--spacing, .25rem) * 1); + margin-inline-end: calc(var(--spacing) * 1); } .me-2\\.5 { - margin-inline-end: calc(var(--spacing, .25rem) * 2.5); + margin-inline-end: calc(var(--spacing) * 2.5); } .me-99 { - margin-inline-end: calc(var(--spacing, .25rem) * 99); + margin-inline-end: calc(var(--spacing) * 99); } .me-\\[4px\\] { @@ -1926,7 +1926,7 @@ test('me', async () => { } .me-big { - margin-inline-end: var(--spacing-big, 100rem); + margin-inline-end: var(--spacing-big); }" `) expect( @@ -1972,11 +1972,11 @@ test('mr', async () => { } .-mr-2\\.5 { - margin-right: calc(var(--spacing, .25rem) * -2.5); + margin-right: calc(var(--spacing) * -2.5); } .-mr-4 { - margin-right: calc(var(--spacing, .25rem) * -4); + margin-right: calc(var(--spacing) * -4); } .-mr-\\[4px\\] { @@ -1988,19 +1988,19 @@ test('mr', async () => { } .-mr-big { - margin-right: calc(var(--spacing-big, 100rem) * -1); + margin-right: calc(var(--spacing-big) * -1); } .mr-1 { - margin-right: calc(var(--spacing, .25rem) * 1); + margin-right: calc(var(--spacing) * 1); } .mr-2\\.5 { - margin-right: calc(var(--spacing, .25rem) * 2.5); + margin-right: calc(var(--spacing) * 2.5); } .mr-99 { - margin-right: calc(var(--spacing, .25rem) * 99); + margin-right: calc(var(--spacing) * 99); } .mr-\\[4px\\] { @@ -2012,7 +2012,7 @@ test('mr', async () => { } .mr-big { - margin-right: var(--spacing-big, 100rem); + margin-right: var(--spacing-big); }" `) expect( @@ -2058,11 +2058,11 @@ test('mb', async () => { } .-mb-2\\.5 { - margin-bottom: calc(var(--spacing, .25rem) * -2.5); + margin-bottom: calc(var(--spacing) * -2.5); } .-mb-4 { - margin-bottom: calc(var(--spacing, .25rem) * -4); + margin-bottom: calc(var(--spacing) * -4); } .-mb-\\[4px\\] { @@ -2074,19 +2074,19 @@ test('mb', async () => { } .-mb-big { - margin-bottom: calc(var(--spacing-big, 100rem) * -1); + margin-bottom: calc(var(--spacing-big) * -1); } .mb-1 { - margin-bottom: calc(var(--spacing, .25rem) * 1); + margin-bottom: calc(var(--spacing) * 1); } .mb-2\\.5 { - margin-bottom: calc(var(--spacing, .25rem) * 2.5); + margin-bottom: calc(var(--spacing) * 2.5); } .mb-99 { - margin-bottom: calc(var(--spacing, .25rem) * 99); + margin-bottom: calc(var(--spacing) * 99); } .mb-\\[4px\\] { @@ -2098,7 +2098,7 @@ test('mb', async () => { } .mb-big { - margin-bottom: var(--spacing-big, 100rem); + margin-bottom: var(--spacing-big); }" `) expect( @@ -2144,11 +2144,11 @@ test('ml', async () => { } .-ml-2\\.5 { - margin-left: calc(var(--spacing, .25rem) * -2.5); + margin-left: calc(var(--spacing) * -2.5); } .-ml-4 { - margin-left: calc(var(--spacing, .25rem) * -4); + margin-left: calc(var(--spacing) * -4); } .-ml-\\[4px\\] { @@ -2160,19 +2160,19 @@ test('ml', async () => { } .-ml-big { - margin-left: calc(var(--spacing-big, 100rem) * -1); + margin-left: calc(var(--spacing-big) * -1); } .ml-1 { - margin-left: calc(var(--spacing, .25rem) * 1); + margin-left: calc(var(--spacing) * 1); } .ml-2\\.5 { - margin-left: calc(var(--spacing, .25rem) * 2.5); + margin-left: calc(var(--spacing) * 2.5); } .ml-99 { - margin-left: calc(var(--spacing, .25rem) * 99); + margin-left: calc(var(--spacing) * 99); } .ml-\\[4px\\] { @@ -2184,7 +2184,7 @@ test('ml', async () => { } .ml-big { - margin-left: var(--spacing-big, 100rem); + margin-left: var(--spacing-big); }" `) expect( @@ -2216,39 +2216,39 @@ test('margin sort order', async () => { } .m-4 { - margin: var(--spacing-4, 1rem); + margin: var(--spacing-4); } .mx-4 { - margin-inline: var(--spacing-4, 1rem); + margin-inline: var(--spacing-4); } .my-4 { - margin-block: var(--spacing-4, 1rem); + margin-block: var(--spacing-4); } .ms-4 { - margin-inline-start: var(--spacing-4, 1rem); + margin-inline-start: var(--spacing-4); } .me-4 { - margin-inline-end: var(--spacing-4, 1rem); + margin-inline-end: var(--spacing-4); } .mt-4 { - margin-top: var(--spacing-4, 1rem); + margin-top: var(--spacing-4); } .mr-4 { - margin-right: var(--spacing-4, 1rem); + margin-right: var(--spacing-4); } .mb-4 { - margin-bottom: var(--spacing-4, 1rem); + margin-bottom: var(--spacing-4); } .ml-4 { - margin-left: var(--spacing-4, 1rem); + margin-left: var(--spacing-4); }" `) expect( @@ -2565,8 +2565,8 @@ test('size', async () => { } .size-4 { - width: var(--spacing-4, 1rem); - height: var(--spacing-4, 1rem); + width: var(--spacing-4); + height: var(--spacing-4); } .size-\\[4px\\] { @@ -2658,7 +2658,7 @@ test('width', async () => { } .w-4 { - width: var(--spacing-4, 1rem); + width: var(--spacing-4); } .w-\\[4px\\] { @@ -2702,7 +2702,7 @@ test('width', async () => { } .w-xl { - width: var(--width-xl, 36rem); + width: var(--width-xl); }" `) expect( @@ -2760,7 +2760,7 @@ test('min-width', async () => { } .min-w-4 { - min-width: var(--spacing-4, 1rem); + min-width: var(--spacing-4); } .min-w-\\[4px\\] { @@ -2788,7 +2788,7 @@ test('min-width', async () => { } .min-w-xl { - min-width: var(--width-xl, 36rem); + min-width: var(--width-xl); }" `) expect( @@ -2836,7 +2836,7 @@ test('max-width', async () => { } .max-w-4 { - max-width: var(--spacing-4, 1rem); + max-width: var(--spacing-4); } .max-w-\\[4px\\] { @@ -2860,7 +2860,7 @@ test('max-width', async () => { } .max-w-xl { - max-width: var(--width-xl, 36rem); + max-width: var(--width-xl); }" `) expect( @@ -2914,7 +2914,7 @@ test('height', async () => { } .h-4 { - height: var(--spacing-4, 1rem); + height: var(--spacing-4); } .h-\\[4px\\] { @@ -3012,7 +3012,7 @@ test('min-height', async () => { } .min-h-4 { - min-height: var(--spacing-4, 1rem); + min-height: var(--spacing-4); } .min-h-\\[4px\\] { @@ -3104,7 +3104,7 @@ test('max-height', async () => { } .max-h-4 { - max-height: var(--spacing-4, 1rem); + max-height: var(--spacing-4); } .max-h-\\[4px\\] { @@ -3321,7 +3321,7 @@ test('flex-basis', async () => { } .basis-xl { - flex-basis: var(--width-xl, 36rem); + flex-basis: var(--width-xl); }" `) expect( @@ -3409,8 +3409,8 @@ test('border-spacing', async () => { } .border-spacing-1 { - --tw-border-spacing-x: var(--spacing-1, .25rem); - --tw-border-spacing-y: var(--spacing-1, .25rem); + --tw-border-spacing-x: var(--spacing-1); + --tw-border-spacing-y: var(--spacing-1); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -3469,7 +3469,7 @@ test('border-spacing-x', async () => { } .border-spacing-x-1 { - --tw-border-spacing-x: var(--spacing-1, .25rem); + --tw-border-spacing-x: var(--spacing-1); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -3527,7 +3527,7 @@ test('border-spacing-y', async () => { } .border-spacing-y-1 { - --tw-border-spacing-y: var(--spacing-1, .25rem); + --tw-border-spacing-y: var(--spacing-1); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -4928,7 +4928,7 @@ test('perspective', async () => { } .perspective-dramatic { - perspective: var(--perspective-dramatic, 100px); + perspective: var(--perspective-dramatic); } .perspective-none { @@ -4936,7 +4936,7 @@ test('perspective', async () => { } .perspective-normal { - perspective: var(--perspective-normal, 500px); + perspective: var(--perspective-normal); }" `) expect( @@ -5045,7 +5045,7 @@ test('cursor', async () => { } .cursor-custom { - cursor: var(--cursor-custom, url("/my-cursor.png")); + cursor: var(--cursor-custom); } .cursor-default { @@ -5597,7 +5597,7 @@ test('scroll-m', async () => { } .-scroll-m-4 { - scroll-margin: calc(var(--spacing-4, 1rem) * -1); + scroll-margin: calc(var(--spacing-4) * -1); } .-scroll-m-\\[var\\(--value\\)\\] { @@ -5605,7 +5605,7 @@ test('scroll-m', async () => { } .scroll-m-4 { - scroll-margin: var(--spacing-4, 1rem); + scroll-margin: var(--spacing-4); } .scroll-m-\\[4px\\] { @@ -5640,7 +5640,7 @@ test('scroll-mx', async () => { } .-scroll-mx-4 { - scroll-margin-inline: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-inline: calc(var(--spacing-4) * -1); } .-scroll-mx-\\[var\\(--value\\)\\] { @@ -5648,7 +5648,7 @@ test('scroll-mx', async () => { } .scroll-mx-4 { - scroll-margin-inline: var(--spacing-4, 1rem); + scroll-margin-inline: var(--spacing-4); } .scroll-mx-\\[4px\\] { @@ -5683,7 +5683,7 @@ test('scroll-my', async () => { } .-scroll-my-4 { - scroll-margin-block: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-block: calc(var(--spacing-4) * -1); } .-scroll-my-\\[var\\(--value\\)\\] { @@ -5691,7 +5691,7 @@ test('scroll-my', async () => { } .scroll-my-4 { - scroll-margin-block: var(--spacing-4, 1rem); + scroll-margin-block: var(--spacing-4); } .scroll-my-\\[4px\\] { @@ -5726,7 +5726,7 @@ test('scroll-ms', async () => { } .-scroll-ms-4 { - scroll-margin-inline-start: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-inline-start: calc(var(--spacing-4) * -1); } .-scroll-ms-\\[var\\(--value\\)\\] { @@ -5734,7 +5734,7 @@ test('scroll-ms', async () => { } .scroll-ms-4 { - scroll-margin-inline-start: var(--spacing-4, 1rem); + scroll-margin-inline-start: var(--spacing-4); } .scroll-ms-\\[4px\\] { @@ -5769,7 +5769,7 @@ test('scroll-me', async () => { } .-scroll-me-4 { - scroll-margin-inline-end: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-inline-end: calc(var(--spacing-4) * -1); } .-scroll-me-\\[var\\(--value\\)\\] { @@ -5777,7 +5777,7 @@ test('scroll-me', async () => { } .scroll-me-4 { - scroll-margin-inline-end: var(--spacing-4, 1rem); + scroll-margin-inline-end: var(--spacing-4); } .scroll-me-\\[4px\\] { @@ -5812,7 +5812,7 @@ test('scroll-mt', async () => { } .-scroll-mt-4 { - scroll-margin-top: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-top: calc(var(--spacing-4) * -1); } .-scroll-mt-\\[var\\(--value\\)\\] { @@ -5820,7 +5820,7 @@ test('scroll-mt', async () => { } .scroll-mt-4 { - scroll-margin-top: var(--spacing-4, 1rem); + scroll-margin-top: var(--spacing-4); } .scroll-mt-\\[4px\\] { @@ -5855,7 +5855,7 @@ test('scroll-mr', async () => { } .-scroll-mr-4 { - scroll-margin-right: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-right: calc(var(--spacing-4) * -1); } .-scroll-mr-\\[var\\(--value\\)\\] { @@ -5863,7 +5863,7 @@ test('scroll-mr', async () => { } .scroll-mr-4 { - scroll-margin-right: var(--spacing-4, 1rem); + scroll-margin-right: var(--spacing-4); } .scroll-mr-\\[4px\\] { @@ -5898,7 +5898,7 @@ test('scroll-mb', async () => { } .-scroll-mb-4 { - scroll-margin-bottom: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-bottom: calc(var(--spacing-4) * -1); } .-scroll-mb-\\[var\\(--value\\)\\] { @@ -5906,7 +5906,7 @@ test('scroll-mb', async () => { } .scroll-mb-4 { - scroll-margin-bottom: var(--spacing-4, 1rem); + scroll-margin-bottom: var(--spacing-4); } .scroll-mb-\\[4px\\] { @@ -5941,7 +5941,7 @@ test('scroll-ml', async () => { } .-scroll-ml-4 { - scroll-margin-left: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-left: calc(var(--spacing-4) * -1); } .-scroll-ml-\\[var\\(--value\\)\\] { @@ -5949,7 +5949,7 @@ test('scroll-ml', async () => { } .scroll-ml-4 { - scroll-margin-left: var(--spacing-4, 1rem); + scroll-margin-left: var(--spacing-4); } .scroll-ml-\\[4px\\] { @@ -5984,7 +5984,7 @@ test('scroll-p', async () => { } .scroll-p-4 { - scroll-padding: var(--spacing-4, 1rem); + scroll-padding: var(--spacing-4); } .scroll-p-\\[4px\\] { @@ -6019,7 +6019,7 @@ test('scroll-px', async () => { } .scroll-px-4 { - scroll-padding-inline: var(--spacing-4, 1rem); + scroll-padding-inline: var(--spacing-4); } .scroll-px-\\[4px\\] { @@ -6054,7 +6054,7 @@ test('scroll-py', async () => { } .scroll-py-4 { - scroll-padding-block: var(--spacing-4, 1rem); + scroll-padding-block: var(--spacing-4); } .scroll-py-\\[4px\\] { @@ -6089,7 +6089,7 @@ test('scroll-ps', async () => { } .scroll-ps-4 { - scroll-padding-inline-start: var(--spacing-4, 1rem); + scroll-padding-inline-start: var(--spacing-4); } .scroll-ps-\\[4px\\] { @@ -6124,7 +6124,7 @@ test('scroll-pe', async () => { } .scroll-pe-4 { - scroll-padding-inline-end: var(--spacing-4, 1rem); + scroll-padding-inline-end: var(--spacing-4); } .scroll-pe-\\[4px\\] { @@ -6159,7 +6159,7 @@ test('scroll-pt', async () => { } .scroll-pt-4 { - scroll-padding-top: var(--spacing-4, 1rem); + scroll-padding-top: var(--spacing-4); } .scroll-pt-\\[4px\\] { @@ -6194,7 +6194,7 @@ test('scroll-pr', async () => { } .scroll-pr-4 { - scroll-padding-right: var(--spacing-4, 1rem); + scroll-padding-right: var(--spacing-4); } .scroll-pr-\\[4px\\] { @@ -6229,7 +6229,7 @@ test('scroll-pb', async () => { } .scroll-pb-4 { - scroll-padding-bottom: var(--spacing-4, 1rem); + scroll-padding-bottom: var(--spacing-4); } .scroll-pb-\\[4px\\] { @@ -6264,7 +6264,7 @@ test('scroll-pl', async () => { } .scroll-pl-4 { - scroll-padding-left: var(--spacing-4, 1rem); + scroll-padding-left: var(--spacing-4); } .scroll-pl-\\[4px\\] { @@ -6463,7 +6463,7 @@ test('columns', async () => { } .columns-3xs { - columns: var(--width-3xs, 16rem); + columns: var(--width-3xs); } .columns-4 { @@ -6471,7 +6471,7 @@ test('columns', async () => { } .columns-7xl { - columns: var(--width-7xl, 80rem); + columns: var(--width-7xl); } .columns-99 { @@ -7330,7 +7330,7 @@ test('gap', async () => { } .gap-4 { - gap: var(--spacing-4, 1rem); + gap: var(--spacing-4); } .gap-\\[4px\\] { @@ -7357,7 +7357,7 @@ test('gap-x', async () => { } .gap-x-4 { - column-gap: var(--spacing-4, 1rem); + column-gap: var(--spacing-4); } .gap-x-\\[4px\\] { @@ -7386,7 +7386,7 @@ test('gap-y', async () => { } .gap-y-4 { - row-gap: var(--spacing-4, 1rem); + row-gap: var(--spacing-4); } .gap-y-\\[4px\\] { @@ -7415,13 +7415,13 @@ test('space-x', async () => { } :where(.-space-x-4 > :not(:last-child)) { - margin-inline-start: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-x-reverse))); + margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-x-reverse))); } :where(.space-x-4 > :not(:last-child)) { - margin-inline-start: calc(var(--spacing-4, 1rem) * var(--tw-space-x-reverse)); - margin-inline-end: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-x-reverse))); + margin-inline-start: calc(var(--spacing-4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse))); } :where(.space-x-\\[4px\\] > :not(:last-child)) { @@ -7463,13 +7463,13 @@ test('space-y', async () => { } :where(.-space-y-4 > :not(:last-child)) { - margin-block-start: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-y-reverse))); + margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-4 > :not(:last-child)) { - margin-block-start: calc(var(--spacing-4, 1rem) * var(--tw-space-y-reverse)); - margin-block-end: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-y-reverse))); + margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse)); + margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-\\[4px\\] > :not(:last-child)) { @@ -7919,11 +7919,11 @@ test('accent', async () => { } .accent-red-500 { - accent-color: var(--color-red-500, #ef4444); + accent-color: var(--color-red-500); } .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] { - accent-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + accent-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .accent-transparent { @@ -8019,11 +8019,11 @@ test('caret', async () => { } .caret-red-500 { - caret-color: var(--color-red-500, #ef4444); + caret-color: var(--color-red-500); } .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] { - caret-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + caret-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .caret-transparent { @@ -8133,19 +8133,19 @@ test('divide-color', async () => { } :where(.divide-red-500 > :not(:last-child)) { - border-color: var(--color-red-500, #ef4444); + border-color: var(--color-red-500); } :where(.divide-red-500\\/50 > :not(:last-child)) { - border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) { - border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) { - border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } :where(.divide-transparent > :not(:last-child)) { @@ -8774,7 +8774,7 @@ test('rounded', async () => { } .rounded { - border-radius: var(--radius, .25rem); + border-radius: var(--radius); } .rounded-\\[4px\\] { @@ -8790,7 +8790,7 @@ test('rounded', async () => { } .rounded-sm { - border-radius: var(--radius-sm, .125rem); + border-radius: var(--radius-sm); }" `) expect( @@ -8832,8 +8832,8 @@ test('rounded-s', async () => { } .rounded-s { - border-start-start-radius: var(--radius, .25rem); - border-end-start-radius: var(--radius, .25rem); + border-start-start-radius: var(--radius); + border-end-start-radius: var(--radius); } .rounded-s-\\[4px\\] { @@ -8842,18 +8842,18 @@ test('rounded-s', async () => { } .rounded-s-full { - border-start-start-radius: var(--radius-full, 9999px); - border-end-start-radius: var(--radius-full, 9999px); + border-start-start-radius: var(--radius-full); + border-end-start-radius: var(--radius-full); } .rounded-s-none { - border-start-start-radius: var(--radius-none, 0px); - border-end-start-radius: var(--radius-none, 0px); + border-start-start-radius: var(--radius-none); + border-end-start-radius: var(--radius-none); } .rounded-s-sm { - border-start-start-radius: var(--radius-sm, .125rem); - border-end-start-radius: var(--radius-sm, .125rem); + border-start-start-radius: var(--radius-sm); + border-end-start-radius: var(--radius-sm); }" `) expect( @@ -8895,8 +8895,8 @@ test('rounded-e', async () => { } .rounded-e { - border-start-end-radius: var(--radius, .25rem); - border-end-end-radius: var(--radius, .25rem); + border-start-end-radius: var(--radius); + border-end-end-radius: var(--radius); } .rounded-e-\\[4px\\] { @@ -8905,18 +8905,18 @@ test('rounded-e', async () => { } .rounded-e-full { - border-start-end-radius: var(--radius-full, 9999px); - border-end-end-radius: var(--radius-full, 9999px); + border-start-end-radius: var(--radius-full); + border-end-end-radius: var(--radius-full); } .rounded-e-none { - border-start-end-radius: var(--radius-none, 0px); - border-end-end-radius: var(--radius-none, 0px); + border-start-end-radius: var(--radius-none); + border-end-end-radius: var(--radius-none); } .rounded-e-sm { - border-start-end-radius: var(--radius-sm, .125rem); - border-end-end-radius: var(--radius-sm, .125rem); + border-start-end-radius: var(--radius-sm); + border-end-end-radius: var(--radius-sm); }" `) expect( @@ -8958,8 +8958,8 @@ test('rounded-t', async () => { } .rounded-t { - border-top-left-radius: var(--radius, .25rem); - border-top-right-radius: var(--radius, .25rem); + border-top-left-radius: var(--radius); + border-top-right-radius: var(--radius); } .rounded-t-\\[4px\\] { @@ -8970,20 +8970,20 @@ test('rounded-t', async () => { .rounded-t-full { border-top-left-radius: 3.40282e38px; border-top-right-radius: 3.40282e38px; - border-top-left-radius: var(--radius-full, 9999px); - border-top-right-radius: var(--radius-full, 9999px); + border-top-left-radius: var(--radius-full); + border-top-right-radius: var(--radius-full); } .rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; - border-top-left-radius: var(--radius-none, 0px); - border-top-right-radius: var(--radius-none, 0px); + border-top-left-radius: var(--radius-none); + border-top-right-radius: var(--radius-none); } .rounded-t-sm { - border-top-left-radius: var(--radius-sm, .125rem); - border-top-right-radius: var(--radius-sm, .125rem); + border-top-left-radius: var(--radius-sm); + border-top-right-radius: var(--radius-sm); }" `) expect( @@ -9025,8 +9025,8 @@ test('rounded-r', async () => { } .rounded-r { - border-top-right-radius: var(--radius, .25rem); - border-bottom-right-radius: var(--radius, .25rem); + border-top-right-radius: var(--radius); + border-bottom-right-radius: var(--radius); } .rounded-r-\\[4px\\] { @@ -9037,20 +9037,20 @@ test('rounded-r', async () => { .rounded-r-full { border-top-right-radius: 3.40282e38px; border-bottom-right-radius: 3.40282e38px; - border-top-right-radius: var(--radius-full, 9999px); - border-bottom-right-radius: var(--radius-full, 9999px); + border-top-right-radius: var(--radius-full); + border-bottom-right-radius: var(--radius-full); } .rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; - border-top-right-radius: var(--radius-none, 0px); - border-bottom-right-radius: var(--radius-none, 0px); + border-top-right-radius: var(--radius-none); + border-bottom-right-radius: var(--radius-none); } .rounded-r-sm { - border-top-right-radius: var(--radius-sm, .125rem); - border-bottom-right-radius: var(--radius-sm, .125rem); + border-top-right-radius: var(--radius-sm); + border-bottom-right-radius: var(--radius-sm); }" `) expect( @@ -9092,8 +9092,8 @@ test('rounded-b', async () => { } .rounded-b { - border-bottom-right-radius: var(--radius, .25rem); - border-bottom-left-radius: var(--radius, .25rem); + border-bottom-right-radius: var(--radius); + border-bottom-left-radius: var(--radius); } .rounded-b-\\[4px\\] { @@ -9104,20 +9104,20 @@ test('rounded-b', async () => { .rounded-b-full { border-bottom-right-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; - border-bottom-right-radius: var(--radius-full, 9999px); - border-bottom-left-radius: var(--radius-full, 9999px); + border-bottom-right-radius: var(--radius-full); + border-bottom-left-radius: var(--radius-full); } .rounded-b-none { border-bottom-right-radius: 0; border-bottom-left-radius: 0; - border-bottom-right-radius: var(--radius-none, 0px); - border-bottom-left-radius: var(--radius-none, 0px); + border-bottom-right-radius: var(--radius-none); + border-bottom-left-radius: var(--radius-none); } .rounded-b-sm { - border-bottom-right-radius: var(--radius-sm, .125rem); - border-bottom-left-radius: var(--radius-sm, .125rem); + border-bottom-right-radius: var(--radius-sm); + border-bottom-left-radius: var(--radius-sm); }" `) expect( @@ -9159,8 +9159,8 @@ test('rounded-l', async () => { } .rounded-l { - border-top-left-radius: var(--radius, .25rem); - border-bottom-left-radius: var(--radius, .25rem); + border-top-left-radius: var(--radius); + border-bottom-left-radius: var(--radius); } .rounded-l-\\[4px\\] { @@ -9171,20 +9171,20 @@ test('rounded-l', async () => { .rounded-l-full { border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; - border-top-left-radius: var(--radius-full, 9999px); - border-bottom-left-radius: var(--radius-full, 9999px); + border-top-left-radius: var(--radius-full); + border-bottom-left-radius: var(--radius-full); } .rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; - border-top-left-radius: var(--radius-none, 0px); - border-bottom-left-radius: var(--radius-none, 0px); + border-top-left-radius: var(--radius-none); + border-bottom-left-radius: var(--radius-none); } .rounded-l-sm { - border-top-left-radius: var(--radius-sm, .125rem); - border-bottom-left-radius: var(--radius-sm, .125rem); + border-top-left-radius: var(--radius-sm); + border-bottom-left-radius: var(--radius-sm); }" `) expect( @@ -9226,7 +9226,7 @@ test('rounded-ss', async () => { } .rounded-ss { - border-start-start-radius: var(--radius, .25rem); + border-start-start-radius: var(--radius); } .rounded-ss-\\[4px\\] { @@ -9234,15 +9234,15 @@ test('rounded-ss', async () => { } .rounded-ss-full { - border-start-start-radius: var(--radius-full, 9999px); + border-start-start-radius: var(--radius-full); } .rounded-ss-none { - border-start-start-radius: var(--radius-none, 0px); + border-start-start-radius: var(--radius-none); } .rounded-ss-sm { - border-start-start-radius: var(--radius-sm, .125rem); + border-start-start-radius: var(--radius-sm); }" `) expect( @@ -9284,7 +9284,7 @@ test('rounded-se', async () => { } .rounded-se { - border-start-end-radius: var(--radius, .25rem); + border-start-end-radius: var(--radius); } .rounded-se-\\[4px\\] { @@ -9292,15 +9292,15 @@ test('rounded-se', async () => { } .rounded-se-full { - border-start-end-radius: var(--radius-full, 9999px); + border-start-end-radius: var(--radius-full); } .rounded-se-none { - border-start-end-radius: var(--radius-none, 0px); + border-start-end-radius: var(--radius-none); } .rounded-se-sm { - border-start-end-radius: var(--radius-sm, .125rem); + border-start-end-radius: var(--radius-sm); }" `) expect( @@ -9342,7 +9342,7 @@ test('rounded-ee', async () => { } .rounded-ee { - border-end-end-radius: var(--radius, .25rem); + border-end-end-radius: var(--radius); } .rounded-ee-\\[4px\\] { @@ -9350,15 +9350,15 @@ test('rounded-ee', async () => { } .rounded-ee-full { - border-end-end-radius: var(--radius-full, 9999px); + border-end-end-radius: var(--radius-full); } .rounded-ee-none { - border-end-end-radius: var(--radius-none, 0px); + border-end-end-radius: var(--radius-none); } .rounded-ee-sm { - border-end-end-radius: var(--radius-sm, .125rem); + border-end-end-radius: var(--radius-sm); }" `) expect( @@ -9400,7 +9400,7 @@ test('rounded-es', async () => { } .rounded-es { - border-end-start-radius: var(--radius, .25rem); + border-end-start-radius: var(--radius); } .rounded-es-\\[4px\\] { @@ -9408,15 +9408,15 @@ test('rounded-es', async () => { } .rounded-es-full { - border-end-start-radius: var(--radius-full, 9999px); + border-end-start-radius: var(--radius-full); } .rounded-es-none { - border-end-start-radius: var(--radius-none, 0px); + border-end-start-radius: var(--radius-none); } .rounded-es-sm { - border-end-start-radius: var(--radius-sm, .125rem); + border-end-start-radius: var(--radius-sm); }" `) expect( @@ -9458,7 +9458,7 @@ test('rounded-tl', async () => { } .rounded-tl { - border-top-left-radius: var(--radius, .25rem); + border-top-left-radius: var(--radius); } .rounded-tl-\\[4px\\] { @@ -9467,16 +9467,16 @@ test('rounded-tl', async () => { .rounded-tl-full { border-top-left-radius: 3.40282e38px; - border-top-left-radius: var(--radius-full, 9999px); + border-top-left-radius: var(--radius-full); } .rounded-tl-none { border-top-left-radius: 0; - border-top-left-radius: var(--radius-none, 0px); + border-top-left-radius: var(--radius-none); } .rounded-tl-sm { - border-top-left-radius: var(--radius-sm, .125rem); + border-top-left-radius: var(--radius-sm); }" `) expect( @@ -9518,7 +9518,7 @@ test('rounded-tr', async () => { } .rounded-tr { - border-top-right-radius: var(--radius, .25rem); + border-top-right-radius: var(--radius); } .rounded-tr-\\[4px\\] { @@ -9527,16 +9527,16 @@ test('rounded-tr', async () => { .rounded-tr-full { border-top-right-radius: 3.40282e38px; - border-top-right-radius: var(--radius-full, 9999px); + border-top-right-radius: var(--radius-full); } .rounded-tr-none { border-top-right-radius: 0; - border-top-right-radius: var(--radius-none, 0px); + border-top-right-radius: var(--radius-none); } .rounded-tr-sm { - border-top-right-radius: var(--radius-sm, .125rem); + border-top-right-radius: var(--radius-sm); }" `) expect( @@ -9578,7 +9578,7 @@ test('rounded-br', async () => { } .rounded-br { - border-bottom-right-radius: var(--radius, .25rem); + border-bottom-right-radius: var(--radius); } .rounded-br-\\[4px\\] { @@ -9587,16 +9587,16 @@ test('rounded-br', async () => { .rounded-br-full { border-bottom-right-radius: 3.40282e38px; - border-bottom-right-radius: var(--radius-full, 9999px); + border-bottom-right-radius: var(--radius-full); } .rounded-br-none { border-bottom-right-radius: 0; - border-bottom-right-radius: var(--radius-none, 0px); + border-bottom-right-radius: var(--radius-none); } .rounded-br-sm { - border-bottom-right-radius: var(--radius-sm, .125rem); + border-bottom-right-radius: var(--radius-sm); }" `) expect( @@ -9638,7 +9638,7 @@ test('rounded-bl', async () => { } .rounded-bl { - border-bottom-left-radius: var(--radius, .25rem); + border-bottom-left-radius: var(--radius); } .rounded-bl-\\[4px\\] { @@ -9647,16 +9647,16 @@ test('rounded-bl', async () => { .rounded-bl-full { border-bottom-left-radius: 3.40282e38px; - border-bottom-left-radius: var(--radius-full, 9999px); + border-bottom-left-radius: var(--radius-full); } .rounded-bl-none { border-bottom-left-radius: 0; - border-bottom-left-radius: var(--radius-none, 0px); + border-bottom-left-radius: var(--radius-none); } .rounded-bl-sm { - border-bottom-left-radius: var(--radius-sm, .125rem); + border-bottom-left-radius: var(--radius-sm); }" `) expect( @@ -10010,11 +10010,11 @@ test('bg', async () => { } .bg-red-500 { - background-color: var(--color-red-500, #ef4444); + background-color: var(--color-red-500); } .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] { - background-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + background-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .bg-transparent { @@ -10482,12 +10482,12 @@ test('from', async () => { } .from-red-500 { - --tw-gradient-from: var(--color-red-500, #ef4444); + --tw-gradient-from: var(--color-red-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] { - --tw-gradient-from: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + --tw-gradient-from: color-mix(in oklch, var(--color-red-500) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -10726,13 +10726,13 @@ test('via', async () => { } .via-red-500 { - --tw-gradient-via: var(--color-red-500, #ef4444); + --tw-gradient-via: var(--color-red-500); --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] { - --tw-gradient-via: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + --tw-gradient-via: color-mix(in oklch, var(--color-red-500) 50%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } @@ -10962,12 +10962,12 @@ test('to', async () => { } .to-red-500 { - --tw-gradient-to: var(--color-red-500, #ef4444); + --tw-gradient-to: var(--color-red-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] { - --tw-gradient-to: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + --tw-gradient-to: color-mix(in oklch, var(--color-red-500) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -11499,11 +11499,11 @@ test('fill', async () => { } .fill-red-500 { - fill: var(--color-red-500, #ef4444); + fill: var(--color-red-500); } .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] { - fill: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + fill: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .fill-transparent { @@ -11625,11 +11625,11 @@ test('stroke', async () => { } .stroke-red-500 { - stroke: var(--color-red-500, #ef4444); + stroke: var(--color-red-500); } .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] { - stroke: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + stroke: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .stroke-transparent { @@ -11827,15 +11827,15 @@ test('p', async () => { } .p-1 { - padding: calc(var(--spacing, .25rem) * 1); + padding: calc(var(--spacing) * 1); } .p-4 { - padding: calc(var(--spacing, .25rem) * 4); + padding: calc(var(--spacing) * 4); } .p-99 { - padding: calc(var(--spacing, .25rem) * 99); + padding: calc(var(--spacing) * 99); } .p-\\[4px\\] { @@ -11843,7 +11843,7 @@ test('p', async () => { } .p-big { - padding: var(--spacing-big, 100rem); + padding: var(--spacing-big); }" `) expect(await run(['p', '-p-4', '-p-[4px]', 'p-4/foo', 'p-[4px]/foo'])).toEqual('') @@ -11868,15 +11868,15 @@ test('px', async () => { } .px-1 { - padding-inline: calc(var(--spacing, .25rem) * 1); + padding-inline: calc(var(--spacing) * 1); } .px-2\\.5 { - padding-inline: calc(var(--spacing, .25rem) * 2.5); + padding-inline: calc(var(--spacing) * 2.5); } .px-99 { - padding-inline: calc(var(--spacing, .25rem) * 99); + padding-inline: calc(var(--spacing) * 99); } .px-\\[4px\\] { @@ -11884,7 +11884,7 @@ test('px', async () => { } .px-big { - padding-inline: var(--spacing-big, 100rem); + padding-inline: var(--spacing-big); }" `) expect(await run(['px', '-px-4', '-px-[4px]', 'px-4/foo', 'px-[4px]/foo'])).toEqual('') @@ -11909,15 +11909,15 @@ test('py', async () => { } .py-1 { - padding-block: calc(var(--spacing, .25rem) * 1); + padding-block: calc(var(--spacing) * 1); } .py-4 { - padding-block: calc(var(--spacing, .25rem) * 4); + padding-block: calc(var(--spacing) * 4); } .py-99 { - padding-block: calc(var(--spacing, .25rem) * 99); + padding-block: calc(var(--spacing) * 99); } .py-\\[4px\\] { @@ -11925,7 +11925,7 @@ test('py', async () => { } .py-big { - padding-block: var(--spacing-big, 100rem); + padding-block: var(--spacing-big); }" `) expect(await run(['py', '-py-4', '-py-[4px]', 'py-4/foo', 'py-[4px]/foo'])).toEqual('') @@ -11950,15 +11950,15 @@ test('pt', async () => { } .pt-1 { - padding-top: calc(var(--spacing, .25rem) * 1); + padding-top: calc(var(--spacing) * 1); } .pt-4 { - padding-top: calc(var(--spacing, .25rem) * 4); + padding-top: calc(var(--spacing) * 4); } .pt-99 { - padding-top: calc(var(--spacing, .25rem) * 99); + padding-top: calc(var(--spacing) * 99); } .pt-\\[4px\\] { @@ -11966,7 +11966,7 @@ test('pt', async () => { } .pt-big { - padding-top: var(--spacing-big, 100rem); + padding-top: var(--spacing-big); }" `) expect(await run(['pt', '-pt-4', '-pt-[4px]', 'pt-4/foo', 'pt-[4px]/foo'])).toEqual('') @@ -11991,15 +11991,15 @@ test('ps', async () => { } .ps-1 { - padding-inline-start: calc(var(--spacing, .25rem) * 1); + padding-inline-start: calc(var(--spacing) * 1); } .ps-4 { - padding-inline-start: calc(var(--spacing, .25rem) * 4); + padding-inline-start: calc(var(--spacing) * 4); } .ps-99 { - padding-inline-start: calc(var(--spacing, .25rem) * 99); + padding-inline-start: calc(var(--spacing) * 99); } .ps-\\[4px\\] { @@ -12007,7 +12007,7 @@ test('ps', async () => { } .ps-big { - padding-inline-start: var(--spacing-big, 100rem); + padding-inline-start: var(--spacing-big); }" `) expect(await run(['ps', '-ps-4', '-ps-[4px]', 'ps-4/foo', 'ps-[4px]/foo'])).toEqual('') @@ -12032,15 +12032,15 @@ test('pe', async () => { } .pe-1 { - padding-inline-end: calc(var(--spacing, .25rem) * 1); + padding-inline-end: calc(var(--spacing) * 1); } .pe-4 { - padding-inline-end: calc(var(--spacing, .25rem) * 4); + padding-inline-end: calc(var(--spacing) * 4); } .pe-99 { - padding-inline-end: calc(var(--spacing, .25rem) * 99); + padding-inline-end: calc(var(--spacing) * 99); } .pe-\\[4px\\] { @@ -12048,7 +12048,7 @@ test('pe', async () => { } .pe-big { - padding-inline-end: var(--spacing-big, 100rem); + padding-inline-end: var(--spacing-big); }" `) expect(await run(['pe', '-pe-4', '-pe-[4px]', 'pe-4/foo', 'pe-[4px]/foo'])).toEqual('') @@ -12073,15 +12073,15 @@ test('pr', async () => { } .pr-1 { - padding-right: calc(var(--spacing, .25rem) * 1); + padding-right: calc(var(--spacing) * 1); } .pr-4 { - padding-right: calc(var(--spacing, .25rem) * 4); + padding-right: calc(var(--spacing) * 4); } .pr-99 { - padding-right: calc(var(--spacing, .25rem) * 99); + padding-right: calc(var(--spacing) * 99); } .pr-\\[4px\\] { @@ -12089,7 +12089,7 @@ test('pr', async () => { } .pr-big { - padding-right: var(--spacing-big, 100rem); + padding-right: var(--spacing-big); }" `) expect(await run(['pr', '-pr-4', '-pr-[4px]', 'pr-4/foo', 'pr-[4px]/foo'])).toEqual('') @@ -12114,15 +12114,15 @@ test('pb', async () => { } .pb-1 { - padding-bottom: calc(var(--spacing, .25rem) * 1); + padding-bottom: calc(var(--spacing) * 1); } .pb-4 { - padding-bottom: calc(var(--spacing, .25rem) * 4); + padding-bottom: calc(var(--spacing) * 4); } .pb-99 { - padding-bottom: calc(var(--spacing, .25rem) * 99); + padding-bottom: calc(var(--spacing) * 99); } .pb-\\[4px\\] { @@ -12130,7 +12130,7 @@ test('pb', async () => { } .pb-big { - padding-bottom: var(--spacing-big, 100rem); + padding-bottom: var(--spacing-big); }" `) expect(await run(['pb', '-pb-4', '-pb-[4px]', 'pb-4/foo', 'pb-[4px]/foo'])).toEqual('') @@ -12155,15 +12155,15 @@ test('pl', async () => { } .pl-1 { - padding-left: calc(var(--spacing, .25rem) * 1); + padding-left: calc(var(--spacing) * 1); } .pl-4 { - padding-left: calc(var(--spacing, .25rem) * 4); + padding-left: calc(var(--spacing) * 4); } .pl-99 { - padding-left: calc(var(--spacing, .25rem) * 99); + padding-left: calc(var(--spacing) * 99); } .pl-\\[4px\\] { @@ -12171,7 +12171,7 @@ test('pl', async () => { } .pl-big { - padding-left: var(--spacing-big, 100rem); + padding-left: var(--spacing-big); }" `) expect(await run(['pl', '-pl-4', '-pl-[4px]', 'pl-4/foo', 'pl-[4px]/foo'])).toEqual('') @@ -12357,7 +12357,7 @@ test('font', async () => { } .font-sans { - font-family: var(--font-family-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + font-family: var(--font-family-sans); } .font-\\[100\\] { @@ -12591,19 +12591,19 @@ test('placeholder', async () => { } .placeholder-red-500::placeholder { - color: var(--color-red-500, #ef4444); + color: var(--color-red-500); } .placeholder-red-500\\/50::placeholder { - color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .placeholder-red-500\\/\\[0\\.5\\]::placeholder { - color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .placeholder-red-500\\/\\[50\\%\\]::placeholder { - color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .placeholder-transparent::placeholder { @@ -12734,13 +12734,13 @@ test('decoration', async () => { } .decoration-red-500 { - -webkit-text-decoration-color: var(--color-red-500, #ef4444); - text-decoration-color: var(--color-red-500, #ef4444); + -webkit-text-decoration-color: var(--color-red-500); + text-decoration-color: var(--color-red-500); } .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] { - -webkit-text-decoration-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); - text-decoration-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + -webkit-text-decoration-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); + text-decoration-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .decoration-transparent { @@ -12887,7 +12887,7 @@ test('animate', async () => { } .animate-spin { - animation: var(--animate-spin, spin 1s linear infinite); + animation: var(--animate-spin); }" `) expect( @@ -12966,7 +12966,7 @@ test('filter', async () => { } .blur-xl { - --tw-blur: blur(var(--blur-xl, 24px)); + --tw-blur: blur(var(--blur-xl)); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } @@ -12996,7 +12996,7 @@ test('filter', async () => { } .drop-shadow-xl { - --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl, 0 20px 13px #00000008, 0 8px 5px #00000014)); + --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl)); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } @@ -13289,7 +13289,7 @@ test('backdrop-filter', async () => { } .backdrop-blur-xl { - --tw-backdrop-blur: blur(var(--blur-xl, 24px)); + --tw-backdrop-blur: blur(var(--blur-xl)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } @@ -13622,47 +13622,47 @@ test('transition', async () => { .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, ease)); - transition-duration: var(--tw-duration, var(--default-transition-duration, .1s)); + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\\[var\\(--value\\)\\] { transition-property: var(--value); - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, ease)); - transition-duration: var(--tw-duration, var(--default-transition-duration, .1s)); + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, ease)); - transition-duration: var(--tw-duration, var(--default-transition-duration, .1s)); + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, ease)); - transition-duration: var(--tw-duration, var(--default-transition-duration, .1s)); + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, ease)); - transition-duration: var(--tw-duration, var(--default-transition-duration, .1s)); - transition-property: var(--transition-property-opacity, opacity); - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, ease)); - transition-duration: var(--tw-duration, var(--default-transition-duration, .1s)); + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + transition-property: var(--transition-property-opacity); + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-shadow { transition-property: box-shadow; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, ease)); - transition-duration: var(--tw-duration, var(--default-transition-duration, .1s)); + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, ease)); - transition-duration: var(--tw-duration, var(--default-transition-duration, .1s)); + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-none { @@ -13835,13 +13835,13 @@ test('ease', async () => { } .ease-in { - --tw-ease: var(--transition-timing-function-in, cubic-bezier(.4, 0, 1, 1)); - transition-timing-function: var(--transition-timing-function-in, cubic-bezier(.4, 0, 1, 1)); + --tw-ease: var(--transition-timing-function-in); + transition-timing-function: var(--transition-timing-function-in); } .ease-out { - --tw-ease: var(--transition-timing-function-out, cubic-bezier(0, 0, .2, 1)); - transition-timing-function: var(--transition-timing-function-out, cubic-bezier(0, 0, .2, 1)); + --tw-ease: var(--transition-timing-function-out); + transition-timing-function: var(--transition-timing-function-out); } @supports (-moz-orient: inline) { @@ -14086,8 +14086,8 @@ test('leading', async () => { } .leading-6 { - --tw-leading: var(--line-height-6, 1.5rem); - line-height: var(--line-height-6, 1.5rem); + --tw-leading: var(--line-height-6); + line-height: var(--line-height-6); } .leading-\\[var\\(--value\\)\\] { @@ -14096,8 +14096,8 @@ test('leading', async () => { } .leading-none { - --tw-leading: var(--line-height-none, 1); - line-height: var(--line-height-none, 1); + --tw-leading: var(--line-height-none); + line-height: var(--line-height-none); } @supports (-moz-orient: inline) { @@ -14155,13 +14155,13 @@ test('tracking', async () => { } .tracking-normal { - --tw-tracking: var(--letter-spacing-normal, 0em); - letter-spacing: var(--letter-spacing-normal, 0em); + --tw-tracking: var(--letter-spacing-normal); + letter-spacing: var(--letter-spacing-normal); } .tracking-wide { - --tw-tracking: var(--letter-spacing-wide, .025em); - letter-spacing: var(--letter-spacing-wide, .025em); + --tw-tracking: var(--letter-spacing-wide); + letter-spacing: var(--letter-spacing-wide); } @supports (-moz-orient: inline) { @@ -14479,11 +14479,11 @@ test('outline', async () => { } .outline-red-500 { - outline-color: var(--color-red-500, #ef4444); + outline-color: var(--color-red-500); } .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] { - outline-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + outline-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .outline-transparent { @@ -14760,42 +14760,42 @@ test('text', async () => { } .text-sm { - font-size: var(--font-size-sm, .875rem); - line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem)); + font-size: var(--font-size-sm); + line-height: var(--tw-leading, var(--font-size-sm--line-height)); } .text-\\[12px\\]\\/6 { font-size: 12px; - line-height: var(--line-height-6, 1.5rem); + line-height: var(--line-height-6); } .text-\\[50\\%\\]\\/6 { font-size: 50%; - line-height: var(--line-height-6, 1.5rem); + line-height: var(--line-height-6); } .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 { font-size: clamp(1rem, var(--size), 3rem); - line-height: var(--line-height-9, 2.25rem); + line-height: var(--line-height-9); } .text-\\[larger\\]\\/6 { font-size: larger; - line-height: var(--line-height-6, 1.5rem); + line-height: var(--line-height-6); } .text-\\[xx-large\\]\\/6 { font-size: xx-large; - line-height: var(--line-height-6, 1.5rem); + line-height: var(--line-height-6); } .text-sm\\/6 { - font-size: var(--font-size-sm, .875rem); - line-height: var(--line-height-6, 1.5rem); + font-size: var(--font-size-sm); + line-height: var(--line-height-6); } .text-sm\\/\\[4px\\] { - font-size: var(--font-size-sm, .875rem); + font-size: var(--font-size-sm); line-height: 4px; } @@ -14868,11 +14868,11 @@ test('text', async () => { } .text-red-500 { - color: var(--color-red-500, #ef4444); + color: var(--color-red-500); } .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] { - color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .text-transparent { @@ -15014,11 +15014,11 @@ test('shadow', async () => { } .shadow-red-500 { - --tw-shadow-color: var(--color-red-500, #ef4444); + --tw-shadow-color: var(--color-red-500); } .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] { - --tw-shadow-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + --tw-shadow-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .shadow-transparent { @@ -15242,11 +15242,11 @@ test('inset-shadow', async () => { } .inset-shadow-red-500 { - --tw-inset-shadow-color: var(--color-red-500, #ef4444); + --tw-inset-shadow-color: var(--color-red-500); } .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] { - --tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + --tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .inset-shadow-transparent { @@ -15484,11 +15484,11 @@ test('ring', async () => { } .ring-red-500 { - --tw-ring-color: var(--color-red-500, #ef4444); + --tw-ring-color: var(--color-red-500); } .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] { - --tw-ring-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + --tw-ring-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .ring-transparent { @@ -15747,11 +15747,11 @@ test('inset-ring', async () => { } .inset-ring-red-500 { - --tw-inset-ring-color: var(--color-red-500, #ef4444); + --tw-inset-ring-color: var(--color-red-500); } .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] { - --tw-inset-ring-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + --tw-inset-ring-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .inset-ring-transparent { @@ -15998,11 +15998,11 @@ test('ring-offset', async () => { } .ring-offset-red-500 { - --tw-ring-offset-color: var(--color-red-500, #ef4444); + --tw-ring-offset-color: var(--color-red-500); } .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] { - --tw-ring-offset-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + --tw-ring-offset-color: color-mix(in oklch, var(--color-red-500) 50%, transparent); } .ring-offset-transparent { @@ -16110,7 +16110,7 @@ describe('spacing utilities', () => { } .px-4 { - padding-inline: var(--spacing-4, 1rem); + padding-inline: var(--spacing-4); }" `) }) @@ -16131,7 +16131,7 @@ describe('spacing utilities', () => { } .px-4 { - padding-inline: var(--spacing-4, 1rem); + padding-inline: var(--spacing-4); }" `) }) @@ -16151,15 +16151,15 @@ describe('spacing utilities', () => { } .px-0\\.25 { - padding-inline: calc(var(--spacing, 4px) * .25); + padding-inline: calc(var(--spacing) * .25); } .px-1\\.5 { - padding-inline: calc(var(--spacing, 4px) * 1.5); + padding-inline: calc(var(--spacing) * 1.5); } .px-2\\.75 { - padding-inline: calc(var(--spacing, 4px) * 2.75); + padding-inline: calc(var(--spacing) * 2.75); }" `) }) @@ -16274,8 +16274,8 @@ describe('custom utilities', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { .text-sm { - font-size: var(--font-size-sm, .875rem); - line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem)); + font-size: var(--font-size-sm); + line-height: var(--tw-leading, var(--font-size-sm--line-height)); font-size: var(--font-size-sm, .8755rem); line-height: var(--font-size-sm--line-height, 1.255rem); text-rendering: optimizeLegibility; @@ -16311,7 +16311,7 @@ describe('custom utilities', () => { } .rounded-xl { - border-radius: var(--radius-xl, 16px); + border-radius: var(--radius-xl); } }" `) From 82a212b4060271dc1c08800d23dfad57836478c8 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 5 Nov 2024 12:44:16 -0500 Subject: [PATCH 2/4] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d9ad019d773..8a580ffd716c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Remove fixed line-height theme values and derive `leading-*` utilites from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) - Remove `--transition-timing-function-linear` from the default theme in favor of a static `ease-linear` utility ([#14880](https://github.com/tailwindlabs/tailwindcss/pull/14880)) - Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) +- Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881)) ## [4.0.0-alpha.31] - 2024-10-29 From 9507b586b2ed2f98ea5cd35268458b22bf605d4f Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 5 Nov 2024 13:55:06 -0500 Subject: [PATCH 3/4] Update tests --- integrations/cli/index.test.ts | 4 ++-- integrations/postcss/index.test.ts | 4 ++-- integrations/vite/index.test.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts index 6930175be2a4..e5027a295804 100644 --- a/integrations/cli/index.test.ts +++ b/integrations/cli/index.test.ts @@ -167,7 +167,7 @@ describe.each([ candidate`hocus:underline`, css` .text-primary { - color: var(--color-primary, black); + color: var(--color-primary); } `, ]) @@ -207,7 +207,7 @@ describe.each([ await fs.expectFileToContain('project-a/dist/out.css', [ css` .text-primary { - color: var(--color-primary, red); + color: var(--color-primary); } `, ]) diff --git a/integrations/postcss/index.test.ts b/integrations/postcss/index.test.ts index 64739554f282..93b757d4638b 100644 --- a/integrations/postcss/index.test.ts +++ b/integrations/postcss/index.test.ts @@ -404,7 +404,7 @@ test( candidate`hocus:underline`, css` .text-primary { - color: var(--color-primary, black); + color: var(--color-primary); } `, ]) @@ -446,7 +446,7 @@ test( await fs.expectFileToContain('project-a/dist/out.css', [ css` .text-primary { - color: var(--color-primary, red); + color: var(--color-primary); } `, ]) diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts index e1b05fa1e33c..8badec5594d5 100644 --- a/integrations/vite/index.test.ts +++ b/integrations/vite/index.test.ts @@ -334,7 +334,7 @@ for (let transformer of ['postcss', 'lightningcss']) { candidate`flex`, css` .text-primary { - color: var(--color-primary, black); + color: var(--color-primary); } `, ]) @@ -356,7 +356,7 @@ for (let transformer of ['postcss', 'lightningcss']) { expect(styles).toContain(css` .text-primary { - color: var(--color-primary, red); + color: var(--color-primary); } `) }) From 864b5ac63d6adae1f8fffca4e29e47ad6b7f6ce8 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 5 Nov 2024 15:30:57 -0500 Subject: [PATCH 4/4] Update tests --- packages/tailwindcss/src/__snapshots__/index.test.ts.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index ed7d1d630d0d..25eda0958156 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -362,7 +362,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using } .w-4 { - width: calc(var(--spacing, .25rem) * 4); + width: calc(var(--spacing) * 4); } .bg-red-500 {