From 05d6c56e78cf60698a3072f2bf08e3446666f96d Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Sat, 9 Mar 2024 16:43:43 -0500 Subject: [PATCH 1/4] Use variables with fallbacks for utility classes --- .../src/__snapshots__/index.test.ts.snap | 6 +- .../@tailwindcss-postcss/src/index.test.ts | 2 +- .../src/__snapshots__/index.test.ts.snap | 4 +- .../src/__snapshots__/utilities.test.ts.snap | 44 +- packages/tailwindcss/src/index.test.ts | 72 +-- packages/tailwindcss/src/theme.ts | 22 +- packages/tailwindcss/src/utilities.test.ts | 462 +++++++++--------- packages/tailwindcss/src/variants.ts | 4 +- 8 files changed, 317 insertions(+), 299 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 9d469389a437..12ec1af1b66c 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -585,12 +585,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` @layer utilities { .text-2xl { - font-size: 1.5rem; - line-height: 2rem; + font-size: var(--font-size-2xl, 1.5rem); + line-height: var(--font-size-2xl--line-height, 2rem); } .text-black\\/50 { - color: #00000080; + color: color-mix(in srgb, var(--color-black, #000) 50%, transparent); } .underline { diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 41bb8fddbd4e..8896d255c8bd 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -104,7 +104,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () = expect(result.css.trim()).toMatchInlineSnapshot(` ".foo { - color: #ef4444; + color: var(--color-red-500, #ef4444); }" `) }) diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 6a43dfeb0838..7eaf27dd9ef1 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -404,11 +404,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using } .w-4 { - width: 1rem; + width: var(--spacing-4, 1rem); } .bg-red-500 { - background-color: #ef4444; + background-color: var(--color-red-500, #ef4444); } .shadow { diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 45d5d0c32785..feeb8550adfa 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: #ef4444; + border-color: var(--color-red-500, #ef4444); } .border-red-500\\/50 { - border-color: #ef444480; + border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .border-transparent { @@ -208,11 +208,11 @@ exports[`border-b-* 1`] = ` } .border-b-red-500 { - border-bottom-color: #ef4444; + border-bottom-color: var(--color-red-500, #ef4444); } .border-b-red-500\\/50 { - border-bottom-color: #ef444480; + border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .border-b-transparent { @@ -321,11 +321,11 @@ exports[`border-e-* 1`] = ` } .border-e-red-500 { - border-inline-end-color: #ef4444; + border-inline-end-color: var(--color-red-500, #ef4444); } .border-e-red-500\\/50 { - border-inline-end-color: #ef444480; + border-inline-end-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .border-e-transparent { @@ -434,11 +434,11 @@ exports[`border-l-* 1`] = ` } .border-l-red-500 { - border-left-color: #ef4444; + border-left-color: var(--color-red-500, #ef4444); } .border-l-red-500\\/50 { - border-left-color: #ef444480; + border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .border-l-transparent { @@ -547,11 +547,11 @@ exports[`border-r-* 1`] = ` } .border-r-red-500 { - border-right-color: #ef4444; + border-right-color: var(--color-red-500, #ef4444); } .border-r-red-500\\/50 { - border-right-color: #ef444480; + border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .border-r-transparent { @@ -660,11 +660,11 @@ exports[`border-s-* 1`] = ` } .border-s-red-500 { - border-inline-start-color: #ef4444; + border-inline-start-color: var(--color-red-500, #ef4444); } .border-s-red-500\\/50 { - border-inline-start-color: #ef444480; + border-inline-start-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .border-s-transparent { @@ -773,11 +773,11 @@ exports[`border-t-* 1`] = ` } .border-t-red-500 { - border-top-color: #ef4444; + border-top-color: var(--color-red-500, #ef4444); } .border-t-red-500\\/50 { - border-top-color: #ef444480; + border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .border-t-transparent { @@ -915,13 +915,13 @@ exports[`border-x-* 1`] = ` } .border-x-red-500 { - border-left-color: #ef4444; - border-right-color: #ef4444; + border-left-color: var(--color-red-500, #ef4444); + border-right-color: var(--color-red-500, #ef4444); } .border-x-red-500\\/50 { - border-left-color: #ef444480; - border-right-color: #ef444480; + border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); + border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .border-x-transparent { @@ -1060,13 +1060,13 @@ exports[`border-y-* 1`] = ` } .border-y-red-500 { - border-top-color: #ef4444; - border-bottom-color: #ef4444; + border-top-color: var(--color-red-500, #ef4444); + border-bottom-color: var(--color-red-500, #ef4444); } .border-y-red-500\\/50 { - border-top-color: #ef444480; - border-bottom-color: #ef444480; + border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); + border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .border-y-transparent { diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index eee2e4dcaeca..028041ae2430 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -44,7 +44,7 @@ describe('compiling CSS', () => { @media (prefers-color-scheme: dark) { .dark\\:bg-black { - background-color: #000; + background-color: var(--color-black, #000); } } }" @@ -186,28 +186,28 @@ describe('@apply', () => { .foo { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); - background-color: #ef4444; + animation: var(--animate-spin, spin 1s linear infinite); + background-color: var(--color-red-500, #ef4444); text-decoration-line: underline; - animation: 1s linear infinite spin; } .foo:hover { - background-color: #3b82f6; + background-color: var(--color-blue-500, #3b82f6); } @media (width >= 768px) { .foo { - background-color: #22c55e; + background-color: var(--color-green-500, #22c55e); } } .foo:hover:focus { - background-color: #fecaca; + background-color: var(--color-red-200, #fecaca); } @media (width >= 768px) { .foo:hover:focus { - background-color: #bbf7d0; + background-color: var(--color-green-200, #bbf7d0); } } @@ -418,7 +418,7 @@ describe('important', () => { } .animate-spin\\! { - animation: 1s linear infinite spin !important; + animation: var(--animate-spin, spin 1s linear infinite) !important; } @keyframes spin { @@ -464,16 +464,16 @@ describe('sorting', () => { } .p-1 { - padding: .25rem; + padding: var(--spacing-1, .25rem); } .px-1 { - padding-left: .25rem; - padding-right: .25rem; + padding-left: var(--spacing-1, .25rem); + padding-right: var(--spacing-1, .25rem); } .pl-1 { - padding-left: .25rem; + padding-left: var(--spacing-1, .25rem); }" `) }) @@ -522,17 +522,17 @@ describe('sorting', () => { } .mx-0 { - margin-left: 0; - margin-right: 0; + margin-left: var(--spacing-0, 0px); + margin-right: var(--spacing-0, 0px); } .gap-4 { - gap: 1rem; + gap: var(--spacing-4, 1rem); } :where(.space-x-2 > :not([hidden]) ~ :not([hidden])) { - margin-inline-start: calc(.5rem * calc(1 - var(--tw-space-x-reverse))); - margin-inline-end: calc(.5rem * var(--tw-space-x-reverse)); + margin-inline-start: calc(var(--spacing-2, .5rem) * calc(1 - var(--tw-space-x-reverse))); + margin-inline-end: calc(var(--spacing-2, .5rem) * var(--tw-space-x-reverse)); } @property --tw-space-x-reverse { @@ -713,7 +713,7 @@ describe('Parsing themes values from CSS', () => { } .accent-red-500 { - accent-color: red; + accent-color: var(--color-red-500, red); }" `) }) @@ -736,7 +736,7 @@ describe('Parsing themes values from CSS', () => { } .accent-red-500 { - accent-color: #f10; + accent-color: var(--color-red-500, #f10); }" `) }) @@ -762,11 +762,11 @@ describe('Parsing themes values from CSS', () => { } .accent-blue-500 { - accent-color: #00f; + accent-color: var(--color-blue-500, #00f); } .accent-red-500 { - accent-color: red; + accent-color: var(--color-red-500, red); }" `) }) @@ -791,11 +791,11 @@ describe('Parsing themes values from CSS', () => { } .w-1\\/2 { - width: 75%; + width: var(--width-1\\/2, 75%); } .w-75\\% { - width: 50%; + width: var(--width-75\\%, 50%); }" `) }) @@ -828,11 +828,11 @@ describe('Parsing themes values from CSS', () => { } .text-lg { - font-size: 20px; + font-size: var(--font-size-lg, 20px); } .accent-red { - accent-color: red; + accent-color: var(--color-red, red); } @keyframes foo { @@ -871,11 +871,11 @@ describe('Parsing themes values from CSS', () => { } .text-sm { - font-size: 13px; + font-size: var(--font-size-sm, 13px); } .accent-green { - accent-color: #0f0; + accent-color: var(--color-green, #0f0); }" `) }) @@ -906,7 +906,7 @@ describe('Parsing themes values from CSS', () => { } .accent-green { - accent-color: #0f0; + accent-color: var(--color-green, #0f0); }" `) }) @@ -944,7 +944,7 @@ describe('Parsing themes values from CSS', () => { } .animate-foobar { - animation: 1s infinite foobar; + animation: var(--animate-foobar, foobar 1s infinite); } @keyframes foobar { @@ -975,11 +975,11 @@ describe('Parsing themes values from CSS', () => { } .bg-potato { - background-color: #ac855b; + background-color: var(--color-potato, #ac855b); } .bg-tomato { - background-color: #e10c04; + background-color: var(--color-tomato, #e10c04); }" `) }) @@ -1000,7 +1000,7 @@ describe('Parsing themes values from CSS', () => { ), ).toMatchInlineSnapshot(` ".bg-potato { - background-color: #c794aa; + background-color: var(--color-potato, #c794aa); }" `) }) @@ -1025,7 +1025,7 @@ describe('Parsing themes values from CSS', () => { } .bg-potato { - background-color: #c794aa; + background-color: var(--color-potato, #c794aa); }" `) }) @@ -1055,15 +1055,15 @@ describe('Parsing themes values from CSS', () => { } .bg-avocado { - background-color: #c0cc6d; + background-color: var(--color-avocado, #c0cc6d); } .bg-potato { - background-color: #ac855b; + background-color: var(--color-potato, #ac855b); } .bg-tomato { - background-color: #e10c04; + background-color: var(--color-tomato, #e10c04); }" `) }) diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts index 33b04ca0d732..4d441c8eb43c 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/packages/tailwindcss/src/theme.ts @@ -77,11 +77,27 @@ export class Theme { return null } + var(themeKey: string) { + if (!this.values.has(themeKey)) { + return null + } + + return `var(${themeKey}, ${this.values.get(themeKey)?.value})` + } + resolve(candidateValue: string, themeKeys: ThemeKey[]): string | null { let themeKey = this.resolveKey(candidateValue, themeKeys) if (!themeKey) return null + return this.var(themeKey) + } + + resolveBare(candidateValue: string, themeKeys: ThemeKey[]): string | null { + let themeKey = this.resolveKey(candidateValue, themeKeys) + + if (!themeKey) return null + return this.values.get(themeKey)!.value } @@ -96,13 +112,13 @@ export class Theme { let extra = {} as Record for (let name of nestedKeys) { - let nestedValue = this.values.get(`${themeKey}${name}`) + let nestedValue = this.var(`${themeKey}${name}`) if (nestedValue) { - extra[name] = nestedValue.value + extra[name] = nestedValue } } - return [this.values.get(themeKey)!.value, extra] + return [this.var(themeKey)!, extra] } namespace(namespace: string) { diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 5f28b5d78f82..2d1233b0afe8 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -118,7 +118,7 @@ test('inset', () => { } .-inset-4 { - inset: -1rem; + inset: calc(var(--spacing-4, 1rem) * -1); } .-inset-full { @@ -130,7 +130,7 @@ test('inset', () => { } .inset-4 { - inset: 1rem; + inset: var(--spacing-4, 1rem); } .inset-\\[4px\\] { @@ -173,8 +173,8 @@ test('inset-x', () => { } .-inset-x-4 { - left: -1rem; - right: -1rem; + right: calc(var(--spacing-4, 1rem) * -1); + left: calc(var(--spacing-4, 1rem) * -1); } .-inset-x-full { @@ -188,8 +188,8 @@ test('inset-x', () => { } .inset-x-4 { - left: 1rem; - right: 1rem; + right: var(--spacing-4, 1rem); + left: var(--spacing-4, 1rem); } .inset-x-\\[4px\\] { @@ -235,8 +235,8 @@ test('inset-y', () => { } .-inset-y-4 { - top: -1rem; - bottom: -1rem; + top: calc(var(--spacing-4, 1rem) * -1); + bottom: calc(var(--spacing-4, 1rem) * -1); } .-inset-y-full { @@ -250,8 +250,8 @@ test('inset-y', () => { } .inset-y-4 { - top: 1rem; - bottom: 1rem; + top: var(--spacing-4, 1rem); + bottom: var(--spacing-4, 1rem); } .inset-y-\\[4px\\] { @@ -297,7 +297,7 @@ test('start', () => { } .-start-4 { - inset-inline-start: -1rem; + inset-inline-start: calc(var(--spacing-4, 1rem) * -1); } .-start-full { @@ -309,7 +309,7 @@ test('start', () => { } .start-4 { - inset-inline-start: 1rem; + inset-inline-start: var(--spacing-4, 1rem); } .start-\\[4px\\] { @@ -344,7 +344,7 @@ test('end', () => { } .-end-4 { - inset-inline-end: -1rem; + inset-inline-end: calc(var(--spacing-4, 1rem) * -1); } .-end-full { @@ -356,7 +356,7 @@ test('end', () => { } .end-4 { - inset-inline-end: 1rem; + inset-inline-end: var(--spacing-4, 1rem); } .end-\\[4px\\] { @@ -392,7 +392,7 @@ test('top', () => { } .-top-4 { - top: -1rem; + top: calc(var(--spacing-4, 1rem) * -1); } .-top-full { @@ -404,7 +404,7 @@ test('top', () => { } .top-4 { - top: 1rem; + top: var(--spacing-4, 1rem); } .top-\\[4px\\] { @@ -447,7 +447,7 @@ test('right', () => { } .-right-4 { - right: -1rem; + right: calc(var(--spacing-4, 1rem) * -1); } .-right-full { @@ -459,7 +459,7 @@ test('right', () => { } .right-4 { - right: 1rem; + right: var(--spacing-4, 1rem); } .right-\\[4px\\] { @@ -502,7 +502,7 @@ test('bottom', () => { } .-bottom-4 { - bottom: -1rem; + bottom: calc(var(--spacing-4, 1rem) * -1); } .-bottom-full { @@ -514,7 +514,7 @@ test('bottom', () => { } .bottom-4 { - bottom: 1rem; + bottom: var(--spacing-4, 1rem); } .bottom-\\[4px\\] { @@ -549,7 +549,7 @@ test('left', () => { } .-left-4 { - left: -1rem; + left: calc(var(--spacing-4, 1rem) * -1); } .-left-full { @@ -561,7 +561,7 @@ test('left', () => { } .left-4 { - left: 1rem; + left: var(--spacing-4, 1rem); } .left-\\[4px\\] { @@ -909,7 +909,7 @@ test('margin', () => { } .-m-4 { - margin: -1rem; + margin: calc(var(--spacing-4, 1rem) * -1); } .-m-\\[--value\\] { @@ -917,7 +917,7 @@ test('margin', () => { } .m-4 { - margin: 1rem; + margin: var(--spacing-4, 1rem); } .m-\\[4px\\] { @@ -948,8 +948,8 @@ test('margin-x', () => { } .-mx-4 { - margin-left: -1rem; - margin-right: -1rem; + margin-left: calc(var(--spacing-4, 1rem) * -1); + margin-right: calc(var(--spacing-4, 1rem) * -1); } .-mx-\\[--value\\] { @@ -958,8 +958,8 @@ test('margin-x', () => { } .mx-4 { - margin-left: 1rem; - margin-right: 1rem; + margin-left: var(--spacing-4, 1rem); + margin-right: var(--spacing-4, 1rem); } .mx-\\[4px\\] { @@ -992,8 +992,8 @@ test('margin-y', () => { } .-my-4 { - margin-top: -1rem; - margin-bottom: -1rem; + margin-top: calc(var(--spacing-4, 1rem) * -1); + margin-bottom: calc(var(--spacing-4, 1rem) * -1); } .-my-\\[--value\\] { @@ -1002,8 +1002,8 @@ test('margin-y', () => { } .my-4 { - margin-top: 1rem; - margin-bottom: 1rem; + margin-top: var(--spacing-4, 1rem); + margin-bottom: var(--spacing-4, 1rem); } .my-\\[4px\\] { @@ -1036,7 +1036,7 @@ test('margin-top', () => { } .-mt-4 { - margin-top: -1rem; + margin-top: calc(var(--spacing-4, 1rem) * -1); } .-mt-\\[--value\\] { @@ -1044,7 +1044,7 @@ test('margin-top', () => { } .mt-4 { - margin-top: 1rem; + margin-top: var(--spacing-4, 1rem); } .mt-\\[4px\\] { @@ -1075,7 +1075,7 @@ test('margin-inline-start', () => { } .-ms-4 { - margin-inline-start: -1rem; + margin-inline-start: calc(var(--spacing-4, 1rem) * -1); } .-ms-\\[--value\\] { @@ -1083,7 +1083,7 @@ test('margin-inline-start', () => { } .ms-4 { - margin-inline-start: 1rem; + margin-inline-start: var(--spacing-4, 1rem); } .ms-\\[4px\\] { @@ -1114,7 +1114,7 @@ test('margin-inline-end', () => { } .-me-4 { - margin-inline-end: -1rem; + margin-inline-end: calc(var(--spacing-4, 1rem) * -1); } .-me-\\[--value\\] { @@ -1122,7 +1122,7 @@ test('margin-inline-end', () => { } .me-4 { - margin-inline-end: 1rem; + margin-inline-end: var(--spacing-4, 1rem); } .me-\\[4px\\] { @@ -1153,7 +1153,7 @@ test('margin-right', () => { } .-mr-4 { - margin-right: -1rem; + margin-right: calc(var(--spacing-4, 1rem) * -1); } .-mr-\\[--value\\] { @@ -1161,7 +1161,7 @@ test('margin-right', () => { } .mr-4 { - margin-right: 1rem; + margin-right: var(--spacing-4, 1rem); } .mr-\\[4px\\] { @@ -1192,7 +1192,7 @@ test('margin-bottom', () => { } .-mb-4 { - margin-bottom: -1rem; + margin-bottom: calc(var(--spacing-4, 1rem) * -1); } .-mb-\\[--value\\] { @@ -1200,7 +1200,7 @@ test('margin-bottom', () => { } .mb-4 { - margin-bottom: 1rem; + margin-bottom: var(--spacing-4, 1rem); } .mb-\\[4px\\] { @@ -1231,7 +1231,7 @@ test('margin-left', () => { } .-ml-4 { - margin-left: -1rem; + margin-left: calc(var(--spacing-4, 1rem) * -1); } .-ml-\\[--value\\] { @@ -1239,7 +1239,7 @@ test('margin-left', () => { } .ml-4 { - margin-left: 1rem; + margin-left: var(--spacing-4, 1rem); } .ml-\\[4px\\] { @@ -1270,41 +1270,41 @@ test('margin sort order', () => { } .m-4 { - margin: 1rem; + margin: var(--spacing-4, 1rem); } .mx-4 { - margin-left: 1rem; - margin-right: 1rem; + margin-left: var(--spacing-4, 1rem); + margin-right: var(--spacing-4, 1rem); } .my-4 { - margin-top: 1rem; - margin-bottom: 1rem; + margin-top: var(--spacing-4, 1rem); + margin-bottom: var(--spacing-4, 1rem); } .ms-4 { - margin-inline-start: 1rem; + margin-inline-start: var(--spacing-4, 1rem); } .me-4 { - margin-inline-end: 1rem; + margin-inline-end: var(--spacing-4, 1rem); } .mt-4 { - margin-top: 1rem; + margin-top: var(--spacing-4, 1rem); } .mr-4 { - margin-right: 1rem; + margin-right: var(--spacing-4, 1rem); } .mb-4 { - margin-bottom: 1rem; + margin-bottom: var(--spacing-4, 1rem); } .ml-4 { - margin-left: 1rem; + margin-left: var(--spacing-4, 1rem); }" `) expect(run(['m'])).toEqual('') @@ -1553,8 +1553,8 @@ test('size', () => { } .size-4 { - width: 1rem; - height: 1rem; + width: var(--spacing-4, 1rem); + height: var(--spacing-4, 1rem); } .size-\\[4px\\] { @@ -1627,7 +1627,7 @@ test('width', () => { } .w-4 { - width: 1rem; + width: var(--spacing-4, 1rem); } .w-\\[4px\\] { @@ -1671,7 +1671,7 @@ test('width', () => { } .w-xl { - width: 36rem; + width: var(--width-xl, 36rem); }" `) expect(run(['w', '-w-4', '-w-1/2', '-w-[4px]'])).toEqual('') @@ -1705,7 +1705,7 @@ test('min-width', () => { } .min-w-4 { - min-width: 1rem; + min-width: var(--spacing-4, 1rem); } .min-w-\\[4px\\] { @@ -1733,7 +1733,7 @@ test('min-width', () => { } .min-w-xl { - min-width: 36rem; + min-width: var(--width-xl, 36rem); }" `) expect(run(['min-w', '-min-w-4', '-min-w-[4px]'])).toEqual('') @@ -1767,7 +1767,7 @@ test('max-width', () => { } .max-w-4 { - max-width: 1rem; + max-width: var(--spacing-4, 1rem); } .max-w-\\[4px\\] { @@ -1791,7 +1791,7 @@ test('max-width', () => { } .max-w-xl { - max-width: 36rem; + max-width: var(--width-xl, 36rem); }" `) expect(run(['max-w', '-max-w-4', '-max-w-[4px]'])).toEqual('') @@ -1831,7 +1831,7 @@ test('height', () => { } .h-4 { - height: 1rem; + height: var(--spacing-4, 1rem); } .h-\\[4px\\] { @@ -1906,7 +1906,7 @@ test('min-height', () => { } .min-h-4 { - min-height: 1rem; + min-height: var(--spacing-4, 1rem); } .min-h-\\[4px\\] { @@ -1981,7 +1981,7 @@ test('max-height', () => { } .max-h-4 { - max-height: 1rem; + max-height: var(--spacing-4, 1rem); } .max-h-\\[4px\\] { @@ -2131,7 +2131,7 @@ test('flex-basis', () => { } .basis-xl { - flex-basis: 36rem; + flex-basis: var(--width-xl, 36rem); }" `) expect(run(['basis', '-basis-full', '-basis-[123px]'])).toEqual('') @@ -2193,8 +2193,8 @@ test('border-spacing', () => { } .border-spacing-1 { - --tw-border-spacing-x: .25rem; - --tw-border-spacing-y: .25rem; + --tw-border-spacing-x: var(--spacing-1, .25rem); + --tw-border-spacing-y: var(--spacing-1, .25rem); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -2236,7 +2236,7 @@ test('border-spacing-x', () => { } .border-spacing-x-1 { - --tw-border-spacing-x: .25rem; + --tw-border-spacing-x: var(--spacing-1, .25rem); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -2277,7 +2277,7 @@ test('border-spacing-y', () => { } .border-spacing-y-1 { - --tw-border-spacing-y: .25rem; + --tw-border-spacing-y: var(--spacing-1, .25rem); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -3141,7 +3141,7 @@ test('perspective', () => { } .perspective-dramatic { - perspective: 100px; + perspective: var(--perspective-dramatic, 100px); } .perspective-none { @@ -3149,7 +3149,7 @@ test('perspective', () => { } .perspective-normal { - perspective: 500px; + perspective: var(--perspective-normal, 500px); }" `) expect(run(['perspective', '-perspective', 'perspective-potato', 'perspective-123'])).toEqual('') @@ -3247,7 +3247,7 @@ test('cursor', () => { } .cursor-custom { - cursor: url("/my-cursor.png"); + cursor: var(--cursor-custom, url("/my-cursor.png")); } .cursor-default { @@ -3660,7 +3660,7 @@ test('scroll-m', () => { } .-scroll-m-4 { - scroll-margin: -1rem; + scroll-margin: calc(var(--spacing-4, 1rem) * -1); } .-scroll-m-\\[--value\\] { @@ -3668,7 +3668,7 @@ test('scroll-m', () => { } .scroll-m-4 { - scroll-margin: 1rem; + scroll-margin: var(--spacing-4, 1rem); } .scroll-m-\\[4px\\] { @@ -3695,8 +3695,8 @@ test('scroll-mx', () => { } .-scroll-mx-4 { - scroll-margin-left: -1rem; - scroll-margin-right: -1rem; + scroll-margin-left: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-right: calc(var(--spacing-4, 1rem) * -1); } .-scroll-mx-\\[--value\\] { @@ -3705,8 +3705,8 @@ test('scroll-mx', () => { } .scroll-mx-4 { - scroll-margin-left: 1rem; - scroll-margin-right: 1rem; + scroll-margin-left: var(--spacing-4, 1rem); + scroll-margin-right: var(--spacing-4, 1rem); } .scroll-mx-\\[4px\\] { @@ -3734,8 +3734,8 @@ test('scroll-my', () => { } .-scroll-my-4 { - scroll-margin-top: -1rem; - scroll-margin-bottom: -1rem; + scroll-margin-top: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-bottom: calc(var(--spacing-4, 1rem) * -1); } .-scroll-my-\\[--value\\] { @@ -3744,8 +3744,8 @@ test('scroll-my', () => { } .scroll-my-4 { - scroll-margin-top: 1rem; - scroll-margin-bottom: 1rem; + scroll-margin-top: var(--spacing-4, 1rem); + scroll-margin-bottom: var(--spacing-4, 1rem); } .scroll-my-\\[4px\\] { @@ -3773,7 +3773,7 @@ test('scroll-ms', () => { } .-scroll-ms-4 { - scroll-margin-inline-start: -1rem; + scroll-margin-inline-start: calc(var(--spacing-4, 1rem) * -1); } .-scroll-ms-\\[--value\\] { @@ -3781,7 +3781,7 @@ test('scroll-ms', () => { } .scroll-ms-4 { - scroll-margin-inline-start: 1rem; + scroll-margin-inline-start: var(--spacing-4, 1rem); } .scroll-ms-\\[4px\\] { @@ -3808,7 +3808,7 @@ test('scroll-me', () => { } .-scroll-me-4 { - scroll-margin-inline-end: -1rem; + scroll-margin-inline-end: calc(var(--spacing-4, 1rem) * -1); } .-scroll-me-\\[--value\\] { @@ -3816,7 +3816,7 @@ test('scroll-me', () => { } .scroll-me-4 { - scroll-margin-inline-end: 1rem; + scroll-margin-inline-end: var(--spacing-4, 1rem); } .scroll-me-\\[4px\\] { @@ -3843,7 +3843,7 @@ test('scroll-mt', () => { } .-scroll-mt-4 { - scroll-margin-top: -1rem; + scroll-margin-top: calc(var(--spacing-4, 1rem) * -1); } .-scroll-mt-\\[--value\\] { @@ -3851,7 +3851,7 @@ test('scroll-mt', () => { } .scroll-mt-4 { - scroll-margin-top: 1rem; + scroll-margin-top: var(--spacing-4, 1rem); } .scroll-mt-\\[4px\\] { @@ -3878,7 +3878,7 @@ test('scroll-mr', () => { } .-scroll-mr-4 { - scroll-margin-right: -1rem; + scroll-margin-right: calc(var(--spacing-4, 1rem) * -1); } .-scroll-mr-\\[--value\\] { @@ -3886,7 +3886,7 @@ test('scroll-mr', () => { } .scroll-mr-4 { - scroll-margin-right: 1rem; + scroll-margin-right: var(--spacing-4, 1rem); } .scroll-mr-\\[4px\\] { @@ -3913,7 +3913,7 @@ test('scroll-mb', () => { } .-scroll-mb-4 { - scroll-margin-bottom: -1rem; + scroll-margin-bottom: calc(var(--spacing-4, 1rem) * -1); } .-scroll-mb-\\[--value\\] { @@ -3921,7 +3921,7 @@ test('scroll-mb', () => { } .scroll-mb-4 { - scroll-margin-bottom: 1rem; + scroll-margin-bottom: var(--spacing-4, 1rem); } .scroll-mb-\\[4px\\] { @@ -3948,7 +3948,7 @@ test('scroll-ml', () => { } .-scroll-ml-4 { - scroll-margin-left: -1rem; + scroll-margin-left: calc(var(--spacing-4, 1rem) * -1); } .-scroll-ml-\\[--value\\] { @@ -3956,7 +3956,7 @@ test('scroll-ml', () => { } .scroll-ml-4 { - scroll-margin-left: 1rem; + scroll-margin-left: var(--spacing-4, 1rem); } .scroll-ml-\\[4px\\] { @@ -3983,7 +3983,7 @@ test('scroll-p', () => { } .-scroll-p-4 { - scroll-padding: -1rem; + scroll-padding: calc(var(--spacing-4, 1rem) * -1); } .-scroll-p-\\[--value\\] { @@ -3991,7 +3991,7 @@ test('scroll-p', () => { } .scroll-p-4 { - scroll-padding: 1rem; + scroll-padding: var(--spacing-4, 1rem); } .scroll-p-\\[4px\\] { @@ -4018,8 +4018,8 @@ test('scroll-px', () => { } .-scroll-px-4 { - scroll-padding-left: -1rem; - scroll-padding-right: -1rem; + scroll-padding-left: calc(var(--spacing-4, 1rem) * -1); + scroll-padding-right: calc(var(--spacing-4, 1rem) * -1); } .-scroll-px-\\[--value\\] { @@ -4028,8 +4028,8 @@ test('scroll-px', () => { } .scroll-px-4 { - scroll-padding-left: 1rem; - scroll-padding-right: 1rem; + scroll-padding-left: var(--spacing-4, 1rem); + scroll-padding-right: var(--spacing-4, 1rem); } .scroll-px-\\[4px\\] { @@ -4057,8 +4057,8 @@ test('scroll-py', () => { } .-scroll-py-4 { - scroll-padding-top: -1rem; - scroll-padding-bottom: -1rem; + scroll-padding-top: calc(var(--spacing-4, 1rem) * -1); + scroll-padding-bottom: calc(var(--spacing-4, 1rem) * -1); } .-scroll-py-\\[--value\\] { @@ -4067,8 +4067,8 @@ test('scroll-py', () => { } .scroll-py-4 { - scroll-padding-top: 1rem; - scroll-padding-bottom: 1rem; + scroll-padding-top: var(--spacing-4, 1rem); + scroll-padding-bottom: var(--spacing-4, 1rem); } .scroll-py-\\[4px\\] { @@ -4096,7 +4096,7 @@ test('scroll-ps', () => { } .-scroll-ps-4 { - scroll-padding-inline-start: -1rem; + scroll-padding-inline-start: calc(var(--spacing-4, 1rem) * -1); } .-scroll-ps-\\[--value\\] { @@ -4104,7 +4104,7 @@ test('scroll-ps', () => { } .scroll-ps-4 { - scroll-padding-inline-start: 1rem; + scroll-padding-inline-start: var(--spacing-4, 1rem); } .scroll-ps-\\[4px\\] { @@ -4131,7 +4131,7 @@ test('scroll-pe', () => { } .-scroll-pe-4 { - scroll-padding-inline-end: -1rem; + scroll-padding-inline-end: calc(var(--spacing-4, 1rem) * -1); } .-scroll-pe-\\[--value\\] { @@ -4139,7 +4139,7 @@ test('scroll-pe', () => { } .scroll-pe-4 { - scroll-padding-inline-end: 1rem; + scroll-padding-inline-end: var(--spacing-4, 1rem); } .scroll-pe-\\[4px\\] { @@ -4166,7 +4166,7 @@ test('scroll-pt', () => { } .-scroll-pt-4 { - scroll-padding-top: -1rem; + scroll-padding-top: calc(var(--spacing-4, 1rem) * -1); } .-scroll-pt-\\[--value\\] { @@ -4174,7 +4174,7 @@ test('scroll-pt', () => { } .scroll-pt-4 { - scroll-padding-top: 1rem; + scroll-padding-top: var(--spacing-4, 1rem); } .scroll-pt-\\[4px\\] { @@ -4201,7 +4201,7 @@ test('scroll-pr', () => { } .-scroll-pr-4 { - scroll-padding-right: -1rem; + scroll-padding-right: calc(var(--spacing-4, 1rem) * -1); } .-scroll-pr-\\[--value\\] { @@ -4209,7 +4209,7 @@ test('scroll-pr', () => { } .scroll-pr-4 { - scroll-padding-right: 1rem; + scroll-padding-right: var(--spacing-4, 1rem); } .scroll-pr-\\[4px\\] { @@ -4236,7 +4236,7 @@ test('scroll-pb', () => { } .-scroll-pb-4 { - scroll-padding-bottom: -1rem; + scroll-padding-bottom: calc(var(--spacing-4, 1rem) * -1); } .-scroll-pb-\\[--value\\] { @@ -4244,7 +4244,7 @@ test('scroll-pb', () => { } .scroll-pb-4 { - scroll-padding-bottom: 1rem; + scroll-padding-bottom: var(--spacing-4, 1rem); } .scroll-pb-\\[4px\\] { @@ -4271,7 +4271,7 @@ test('scroll-pl', () => { } .-scroll-pl-4 { - scroll-padding-left: -1rem; + scroll-padding-left: calc(var(--spacing-4, 1rem) * -1); } .-scroll-pl-\\[--value\\] { @@ -4279,7 +4279,7 @@ test('scroll-pl', () => { } .scroll-pl-4 { - scroll-padding-left: 1rem; + scroll-padding-left: var(--spacing-4, 1rem); } .scroll-pl-\\[4px\\] { @@ -4376,7 +4376,7 @@ test('columns', () => { } .columns-3xs { - columns: 16rem; + columns: var(--width-3xs, 16rem); } .columns-4 { @@ -4384,7 +4384,7 @@ test('columns', () => { } .columns-7xl { - columns: 80rem; + columns: var(--width-7xl, 80rem); } .columns-99 { @@ -5087,7 +5087,7 @@ test('gap', () => { } .gap-4 { - gap: 1rem; + gap: var(--spacing-4, 1rem); } .gap-\\[4px\\] { @@ -5114,7 +5114,7 @@ test('gap-x', () => { } .gap-x-4 { - column-gap: 1rem; + column-gap: var(--spacing-4, 1rem); } .gap-x-\\[4px\\] { @@ -5141,7 +5141,7 @@ test('gap-y', () => { } .gap-y-4 { - row-gap: 1rem; + row-gap: var(--spacing-4, 1rem); } .gap-y-\\[4px\\] { @@ -5168,13 +5168,13 @@ test('space-x', () => { } :where(.-space-x-4 > :not([hidden]) ~ :not([hidden])) { - margin-inline-start: calc(calc(1rem * -1) * calc(1 - var(--tw-space-x-reverse))); - margin-inline-end: calc(calc(1rem * -1) * var(--tw-space-x-reverse)); + margin-inline-start: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-x-reverse))); + margin-inline-end: calc(calc(var(--spacing-4, 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)); + margin-inline-start: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-x-reverse))); + margin-inline-end: calc(var(--spacing-4, 1rem) * var(--tw-space-x-reverse)); } :where(.space-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { @@ -5208,13 +5208,13 @@ test('space-y', () => { } :where(.-space-y-4 > :not([hidden]) ~ :not([hidden])) { - margin-bottom: calc(calc(1rem * -1) * var(--tw-space-y-reverse)); - margin-top: calc(calc(1rem * -1) * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-y-reverse)); + margin-top: calc(calc(var(--spacing-4, 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))); + margin-bottom: calc(var(--spacing-4, 1rem) * var(--tw-space-y-reverse)); + margin-top: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { @@ -5556,11 +5556,11 @@ test('accent', () => { } .accent-red-500 { - accent-color: #ef4444; + accent-color: var(--color-red-500, #ef4444); } .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] { - accent-color: #ef444480; + accent-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .accent-transparent { @@ -5640,11 +5640,11 @@ test('caret', () => { } .caret-red-500 { - caret-color: #ef4444; + caret-color: var(--color-red-500, #ef4444); } .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] { - caret-color: #ef444480; + caret-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .caret-transparent { @@ -5740,19 +5740,19 @@ test('divide-color', () => { } :where(.divide-red-500 > :not([hidden]) ~ :not([hidden])) { - border-color: #ef4444; + border-color: var(--color-red-500, #ef4444); } :where(.divide-red-500\\/50 > :not([hidden]) ~ :not([hidden])) { - border-color: #ef444480; + border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } :where(.divide-red-500\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { - border-color: #ef444480; + border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } :where(.divide-red-500\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { - border-color: #ef444480; + border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } :where(.divide-transparent > :not([hidden]) ~ :not([hidden])) { @@ -6275,7 +6275,7 @@ test('rounded', () => { } .rounded-sm { - border-radius: .125rem; + border-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6326,8 +6326,8 @@ test('rounded-s', () => { } .rounded-s-sm { - border-start-start-radius: .125rem; - border-end-start-radius: .125rem; + border-start-start-radius: var(--radius-sm, .125rem); + border-end-start-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6378,8 +6378,8 @@ test('rounded-e', () => { } .rounded-e-sm { - border-start-end-radius: .125rem; - border-end-end-radius: .125rem; + border-start-end-radius: var(--radius-sm, .125rem); + border-end-end-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6430,8 +6430,8 @@ test('rounded-t', () => { } .rounded-t-sm { - border-top-left-radius: .125rem; - border-top-right-radius: .125rem; + border-top-left-radius: var(--radius-sm, .125rem); + border-top-right-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6482,8 +6482,8 @@ test('rounded-r', () => { } .rounded-r-sm { - border-top-right-radius: .125rem; - border-bottom-right-radius: .125rem; + border-top-right-radius: var(--radius-sm, .125rem); + border-bottom-right-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6534,8 +6534,8 @@ test('rounded-b', () => { } .rounded-b-sm { - border-bottom-right-radius: .125rem; - border-bottom-left-radius: .125rem; + border-bottom-right-radius: var(--radius-sm, .125rem); + border-bottom-left-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6586,8 +6586,8 @@ test('rounded-l', () => { } .rounded-l-sm { - border-top-left-radius: .125rem; - border-bottom-left-radius: .125rem; + border-top-left-radius: var(--radius-sm, .125rem); + border-bottom-left-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6634,7 +6634,7 @@ test('rounded-ss', () => { } .rounded-ss-sm { - border-start-start-radius: .125rem; + border-start-start-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6687,7 +6687,7 @@ test('rounded-se', () => { } .rounded-se-sm { - border-start-end-radius: .125rem; + border-start-end-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6740,7 +6740,7 @@ test('rounded-ee', () => { } .rounded-ee-sm { - border-end-end-radius: .125rem; + border-end-end-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6793,7 +6793,7 @@ test('rounded-es', () => { } .rounded-es-sm { - border-end-start-radius: .125rem; + border-end-start-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6846,7 +6846,7 @@ test('rounded-tl', () => { } .rounded-tl-sm { - border-top-left-radius: .125rem; + border-top-left-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6899,7 +6899,7 @@ test('rounded-tr', () => { } .rounded-tr-sm { - border-top-right-radius: .125rem; + border-top-right-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6952,7 +6952,7 @@ test('rounded-br', () => { } .rounded-br-sm { - border-bottom-right-radius: .125rem; + border-bottom-right-radius: var(--radius-sm, .125rem); }" `) expect( @@ -7005,7 +7005,7 @@ test('rounded-bl', () => { } .rounded-bl-sm { - border-bottom-left-radius: .125rem; + border-bottom-left-radius: var(--radius-sm, .125rem); }" `) expect( @@ -7297,11 +7297,11 @@ test('bg', () => { } .bg-red-500 { - background-color: #ef4444; + background-color: var(--color-red-500, #ef4444); } .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] { - background-color: #ef444480; + background-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .bg-transparent { @@ -7541,11 +7541,11 @@ test('bg', () => { } .bg-current\\/custom { - background-color: color-mix(in srgb, currentColor var(--custom-opacity), transparent); + background-color: color-mix(in srgb, currentColor var(--opacity-custom, var(--custom-opacity)), transparent); } .bg-current\\/half { - background-color: color-mix(in srgb, currentColor 50%, transparent); + background-color: color-mix(in srgb, currentColor var(--opacity-half, .5), transparent); }" `) }) @@ -7645,12 +7645,12 @@ test('from', () => { } .from-red-500 { - --tw-gradient-from: #ef4444; + --tw-gradient-from: var(--color-red-500, #ef4444); --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\\%\\] { - --tw-gradient-from: #ef444480; + --tw-gradient-from: color-mix(in srgb, var(--color-red-500, #ef4444) 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)); } @@ -7864,13 +7864,13 @@ test('via', () => { } .via-red-500 { - --tw-gradient-via: #ef4444; + --tw-gradient-via: var(--color-red-500, #ef4444); --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-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] { - --tw-gradient-via: #ef444480; + --tw-gradient-via: color-mix(in srgb, var(--color-red-500, #ef4444) 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); } @@ -8077,12 +8077,12 @@ test('to', () => { } .to-red-500 { - --tw-gradient-to: #ef4444; + --tw-gradient-to: var(--color-red-500, #ef4444); --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\\%\\] { - --tw-gradient-to: #ef444480; + --tw-gradient-to: color-mix(in srgb, var(--color-red-500, #ef4444) 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)); } @@ -8532,11 +8532,11 @@ test('fill', () => { } .fill-red-500 { - fill: #ef4444; + fill: var(--color-red-500, #ef4444); } .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] { - fill: #ef444480; + fill: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .fill-transparent { @@ -8658,11 +8658,11 @@ test('stroke', () => { } .stroke-red-500 { - stroke: #ef4444; + stroke: var(--color-red-500, #ef4444); } .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] { - stroke: #ef444480; + stroke: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .stroke-transparent { @@ -8841,7 +8841,7 @@ test('p', () => { } .p-4 { - padding: 1rem; + padding: var(--spacing-4, 1rem); } .p-\\[4px\\] { @@ -8868,8 +8868,8 @@ test('px', () => { } .px-4 { - padding-left: 1rem; - padding-right: 1rem; + padding-left: var(--spacing-4, 1rem); + padding-right: var(--spacing-4, 1rem); } .px-\\[4px\\] { @@ -8897,8 +8897,8 @@ test('py', () => { } .py-4 { - padding-top: 1rem; - padding-bottom: 1rem; + padding-top: var(--spacing-4, 1rem); + padding-bottom: var(--spacing-4, 1rem); } .py-\\[4px\\] { @@ -8926,7 +8926,7 @@ test('pt', () => { } .pt-4 { - padding-top: 1rem; + padding-top: var(--spacing-4, 1rem); } .pt-\\[4px\\] { @@ -8953,7 +8953,7 @@ test('ps', () => { } .ps-4 { - padding-inline-start: 1rem; + padding-inline-start: var(--spacing-4, 1rem); } .ps-\\[4px\\] { @@ -8980,7 +8980,7 @@ test('pe', () => { } .pe-4 { - padding-inline-end: 1rem; + padding-inline-end: var(--spacing-4, 1rem); } .pe-\\[4px\\] { @@ -9007,7 +9007,7 @@ test('pr', () => { } .pr-4 { - padding-right: 1rem; + padding-right: var(--spacing-4, 1rem); } .pr-\\[4px\\] { @@ -9034,7 +9034,7 @@ test('pb', () => { } .pb-4 { - padding-bottom: 1rem; + padding-bottom: var(--spacing-4, 1rem); } .pb-\\[4px\\] { @@ -9061,7 +9061,7 @@ test('pl', () => { } .pl-4 { - padding-left: 1rem; + padding-left: var(--spacing-4, 1rem); } .pl-\\[4px\\] { @@ -9227,7 +9227,7 @@ test('font', () => { } .font-sans { - font-family: 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, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); } .font-\\[--my-family\\] { @@ -9407,19 +9407,19 @@ test('placeholder', () => { } .placeholder-red-500::placeholder { - color: #ef4444; + color: var(--color-red-500, #ef4444); } .placeholder-red-500\\/50::placeholder { - color: #ef444480; + color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .placeholder-red-500\\/\\[0\\.5\\]::placeholder { - color: #ef444480; + color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .placeholder-red-500\\/\\[50\\%\\]::placeholder { - color: #ef444480; + color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .placeholder-transparent::placeholder { @@ -9550,11 +9550,13 @@ test('decoration', () => { } .decoration-red-500 { - text-decoration-color: #ef4444; + -webkit-text-decoration-color: var(--color-red-500, #ef4444); + text-decoration-color: var(--color-red-500, #ef4444); } .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] { - text-decoration-color: #ef444480; + -webkit-text-decoration-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); + text-decoration-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .decoration-transparent { @@ -9683,7 +9685,7 @@ test('animate', () => { } .animate-spin { - animation: 1s linear infinite spin; + animation: var(--animate-spin, spin 1s linear infinite); }" `) expect( @@ -9750,7 +9752,7 @@ test('filter', () => { } .blur-xl { - --tw-blur: blur(24px); + --tw-blur: blur(var(--blur-xl, 24px)); 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, ); } @@ -9780,7 +9782,7 @@ test('filter', () => { } .drop-shadow-xl { - --tw-drop-shadow: drop-shadow(0 20px 13px #00000008) drop-shadow(0 8px 5px #00000014); + --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl, 0 20px 13px #00000008, 0 8px 5px #00000014)); 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, ); } @@ -10006,7 +10008,7 @@ test('backdrop-filter', () => { } .backdrop-blur-xl { - --tw-backdrop-blur: blur(24px); + --tw-backdrop-blur: blur(var(--blur-xl, 24px)); -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, ); } @@ -10405,11 +10407,11 @@ test('ease', () => { } .ease-in { - transition-timing-function: cubic-bezier(.4, 0, 1, 1); + transition-timing-function: var(--transition-timing-function-in, cubic-bezier(.4, 0, 1, 1)); } .ease-out { - transition-timing-function: cubic-bezier(0, 0, .2, 1); + transition-timing-function: var(--transition-timing-function-out, cubic-bezier(0, 0, .2, 1)); }" `) expect(run(['-ease-in', '-ease-out', '-ease-[--value]'])).toEqual('') @@ -10590,7 +10592,7 @@ test('leading', () => { } .leading-6 { - line-height: 1.5rem; + line-height: var(--line-height-6, 1.5rem); } .leading-\\[--value\\] { @@ -10598,7 +10600,7 @@ test('leading', () => { } .leading-none { - line-height: 1; + line-height: var(--line-height-none, 1); }" `) expect(run(['leading', '-leading-none', '-leading-6', '-leading-[--value]'])).toEqual('') @@ -10631,11 +10633,11 @@ test('tracking', () => { } .tracking-normal { - letter-spacing: 0; + letter-spacing: var(--letter-spacing-normal, 0em); } .tracking-wide { - letter-spacing: .025em; + letter-spacing: var(--letter-spacing-wide, .025em); }" `) expect(run(['tracking'])).toEqual('') @@ -10896,11 +10898,11 @@ test('outline', () => { } .outline-red-500 { - outline-color: #ef4444; + outline-color: var(--color-red-500, #ef4444); } .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] { - outline-color: #ef444480; + outline-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .outline-transparent { @@ -11129,42 +11131,42 @@ test('text', () => { } .text-sm { - font-size: .875rem; - line-height: 1.25rem; + font-size: var(--font-size-sm, .875rem); + line-height: var(--font-size-sm--line-height, 1.25rem); } .text-\\[12px\\]\\/6 { font-size: 12px; - line-height: 1.5rem; + line-height: var(--line-height-6, 1.5rem); } .text-\\[50\\%\\]\\/6 { font-size: 50%; - line-height: 1.5rem; + line-height: var(--line-height-6, 1.5rem); } .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 { font-size: clamp(1rem, var(--size), 3rem); - line-height: 2.25rem; + line-height: var(--line-height-9, 2.25rem); } .text-\\[larger\\]\\/6 { font-size: larger; - line-height: 1.5rem; + line-height: var(--line-height-6, 1.5rem); } .text-\\[xx-large\\]\\/6 { font-size: xx-large; - line-height: 1.5rem; + line-height: var(--line-height-6, 1.5rem); } .text-sm\\/6 { - font-size: .875rem; - line-height: 1.5rem; + font-size: var(--font-size-sm, .875rem); + line-height: var(--line-height-6, 1.5rem); } .text-sm\\/\\[4px\\] { - font-size: .875rem; + font-size: var(--font-size-sm, .875rem); line-height: 4px; } @@ -11237,11 +11239,11 @@ test('text', () => { } .text-red-500 { - color: #ef4444; + color: var(--color-red-500, #ef4444); } .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] { - color: #ef444480; + color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .text-transparent { @@ -11361,8 +11363,8 @@ test('shadow', () => { } .shadow-xl { - --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + --tw-shadow: var(--shadow-xl, 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a); + --tw-shadow-colored: var(--shadow-xl, 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } @@ -11402,12 +11404,12 @@ test('shadow', () => { } .shadow-red-500 { - --tw-shadow-color: #ef4444; + --tw-shadow-color: var(--color-red-500, #ef4444); --tw-shadow: var(--tw-shadow-colored); } .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] { - --tw-shadow-color: #ef444480; + --tw-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); --tw-shadow: var(--tw-shadow-colored); } @@ -11594,8 +11596,8 @@ test('inset-shadow', () => { } .inset-shadow-sm { - --tw-inset-shadow: inset 0 1px 1px #0000000d; - --tw-inset-shadow-colored: inset 0 1px 1px var(--tw-inset-shadow-color); + --tw-inset-shadow: var(--inset-shadow-sm, inset 0 1px 1px #0000000d); + --tw-inset-shadow-colored: var(--inset-shadow-sm, inset 0 1px 1px #0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } @@ -11635,12 +11637,12 @@ test('inset-shadow', () => { } .inset-shadow-red-500 { - --tw-inset-shadow-color: #ef4444; + --tw-inset-shadow-color: var(--color-red-500, #ef4444); --tw-inset-shadow: var(--tw-inset-shadow-colored); } .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] { - --tw-inset-shadow-color: #ef444480; + --tw-inset-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); --tw-inset-shadow: var(--tw-inset-shadow-colored); } @@ -11863,11 +11865,11 @@ test('ring', () => { } .ring-red-500 { - --tw-ring-color: #ef4444; + --tw-ring-color: var(--color-red-500, #ef4444); } .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] { - --tw-ring-color: #ef444480; + --tw-ring-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .ring-transparent { @@ -12097,11 +12099,11 @@ test('inset-ring', () => { } .inset-ring-red-500 { - --tw-inset-ring-color: #ef4444; + --tw-inset-ring-color: var(--color-red-500, #ef4444); } .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] { - --tw-inset-ring-color: #ef444480; + --tw-inset-ring-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .inset-ring-transparent { @@ -12322,11 +12324,11 @@ test('ring-offset', () => { } .ring-offset-red-500 { - --tw-ring-offset-color: #ef4444; + --tw-ring-offset-color: var(--color-red-500, #ef4444); } .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] { - --tw-ring-offset-color: #ef444480; + --tw-ring-offset-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .ring-offset-transparent { diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 3cc0919ad278..1677f12e60db 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -512,7 +512,7 @@ export function createVariants(theme: Theme): Variants { if (variant.value.kind === 'arbitrary') { value = variant.value.value } else if (variant.value.kind === 'named') { - value = theme.resolve(variant.value.value, ['--breakpoint']) + value = theme.resolveBare(variant.value.value, ['--breakpoint']) } if (!value) return null @@ -597,7 +597,7 @@ export function createVariants(theme: Theme): Variants { if (variant.value.kind === 'arbitrary') { value = variant.value.value } else if (variant.value.kind === 'named') { - value = theme.resolve(variant.value.value, ['--width']) + value = theme.resolveBare(variant.value.value, ['--width']) } if (!value) return null From 4bc23ca2d2ad6fba4aa4ea6c7b4a00b36393209c Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Sun, 10 Mar 2024 10:24:02 -0400 Subject: [PATCH 2/4] Update playwright test --- packages/tailwindcss/tests/ui.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts index f79cbd3f0554..9db3b880f9a7 100644 --- a/packages/tailwindcss/tests/ui.spec.ts +++ b/packages/tailwindcss/tests/ui.spec.ts @@ -145,7 +145,7 @@ test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) => page, html`
`, ) From dc8ed42dcb1356b5452049ea40a86e62fee902da Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 21 Mar 2024 18:04:19 +0100 Subject: [PATCH 3/4] rename `resolveBare` to `resolveValue` --- packages/tailwindcss/src/theme.ts | 2 +- packages/tailwindcss/src/variants.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts index 4d441c8eb43c..12c9fce8146a 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/packages/tailwindcss/src/theme.ts @@ -93,7 +93,7 @@ export class Theme { return this.var(themeKey) } - resolveBare(candidateValue: string, themeKeys: ThemeKey[]): string | null { + resolveValue(candidateValue: string, themeKeys: ThemeKey[]): string | null { let themeKey = this.resolveKey(candidateValue, themeKeys) if (!themeKey) return null diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 1677f12e60db..38a6ba504bf9 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -512,7 +512,7 @@ export function createVariants(theme: Theme): Variants { if (variant.value.kind === 'arbitrary') { value = variant.value.value } else if (variant.value.kind === 'named') { - value = theme.resolveBare(variant.value.value, ['--breakpoint']) + value = theme.resolveValue(variant.value.value, ['--breakpoint']) } if (!value) return null @@ -597,7 +597,7 @@ export function createVariants(theme: Theme): Variants { if (variant.value.kind === 'arbitrary') { value = variant.value.value } else if (variant.value.kind === 'named') { - value = theme.resolveBare(variant.value.value, ['--width']) + value = theme.resolveValue(variant.value.value, ['--width']) } if (!value) return null From a9e1712a0422009a278a64a436d6411c7965a0e2 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 21 Mar 2024 18:09:47 +0100 Subject: [PATCH 4/4] make private methods really private --- packages/tailwindcss/src/theme.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts index 12c9fce8146a..e6af0ecde625 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/packages/tailwindcss/src/theme.ts @@ -11,7 +11,7 @@ export class Theme { if (key === '--*') { this.values.clear() } else { - this.clearNamespace(key.slice(0, -2)) + this.#clearNamespace(key.slice(0, -2)) } } @@ -57,7 +57,7 @@ export class Theme { return this.values.entries() } - clearNamespace(namespace: string) { + #clearNamespace(namespace: string) { for (let key of this.values.keys()) { if (key.startsWith(namespace)) { this.values.delete(key) @@ -65,7 +65,7 @@ export class Theme { } } - resolveKey(candidateValue: string, themeKeys: ThemeKey[]): string | null { + #resolveKey(candidateValue: string, themeKeys: ThemeKey[]): string | null { for (let key of themeKeys) { let themeKey = escape(`${key}-${candidateValue.replaceAll('.', '_')}`) @@ -77,7 +77,7 @@ export class Theme { return null } - var(themeKey: string) { + #var(themeKey: string) { if (!this.values.has(themeKey)) { return null } @@ -86,15 +86,15 @@ export class Theme { } resolve(candidateValue: string, themeKeys: ThemeKey[]): string | null { - let themeKey = this.resolveKey(candidateValue, themeKeys) + let themeKey = this.#resolveKey(candidateValue, themeKeys) if (!themeKey) return null - return this.var(themeKey) + return this.#var(themeKey) } resolveValue(candidateValue: string, themeKeys: ThemeKey[]): string | null { - let themeKey = this.resolveKey(candidateValue, themeKeys) + let themeKey = this.#resolveKey(candidateValue, themeKeys) if (!themeKey) return null @@ -106,19 +106,19 @@ export class Theme { themeKeys: ThemeKey[], nestedKeys: `--${string}`[] = [], ): [string, Record] | null { - let themeKey = this.resolveKey(candidateValue, themeKeys) + let themeKey = this.#resolveKey(candidateValue, themeKeys) if (!themeKey) return null let extra = {} as Record for (let name of nestedKeys) { - let nestedValue = this.var(`${themeKey}${name}`) + let nestedValue = this.#var(`${themeKey}${name}`) if (nestedValue) { extra[name] = nestedValue } } - return [this.var(themeKey)!, extra] + return [this.#var(themeKey)!, extra] } namespace(namespace: string) {