From dc55240cb1f974a6aed429b331b793a6f7a72492 Mon Sep 17 00:00:00 2001 From: Scott Bedard Date: Fri, 28 Mar 2025 12:39:25 -0500 Subject: [PATCH 1/5] add test coverage for property-specific colors --- .../src/__snapshots__/utilities.test.ts.snap | 45 +++++++++++ packages/tailwindcss/src/utilities.test.ts | 81 +++++++++++++++++++ 2 files changed, 126 insertions(+) diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 5f1c2fea3f54..1367b302bcbe 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -3,6 +3,7 @@ exports[`border-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border { @@ -99,6 +100,10 @@ exports[`border-* 1`] = ` border-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-blue-500 { + border-color: var(--border-color-blue-500); +} + .border-current { border-color: currentColor; } @@ -145,6 +150,7 @@ exports[`border-* 1`] = ` exports[`border-b-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-b { @@ -241,6 +247,10 @@ exports[`border-b-* 1`] = ` border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-b-blue-500 { + border-bottom-color: var(--border-color-blue-500); +} + .border-b-current { border-bottom-color: currentColor; } @@ -287,6 +297,7 @@ exports[`border-b-* 1`] = ` exports[`border-e-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-e { @@ -383,6 +394,10 @@ exports[`border-e-* 1`] = ` border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-e-blue-500 { + border-inline-end-color: var(--border-color-blue-500); +} + .border-e-current { border-inline-end-color: currentColor; } @@ -429,6 +444,7 @@ exports[`border-e-* 1`] = ` exports[`border-l-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-l { @@ -525,6 +541,10 @@ exports[`border-l-* 1`] = ` border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-l-blue-500 { + border-left-color: var(--border-color-blue-500); +} + .border-l-current { border-left-color: currentColor; } @@ -571,6 +591,7 @@ exports[`border-l-* 1`] = ` exports[`border-r-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-r { @@ -667,6 +688,10 @@ exports[`border-r-* 1`] = ` border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-r-blue-500 { + border-right-color: var(--border-color-blue-500); +} + .border-r-current { border-right-color: currentColor; } @@ -713,6 +738,7 @@ exports[`border-r-* 1`] = ` exports[`border-s-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-s { @@ -809,6 +835,10 @@ exports[`border-s-* 1`] = ` border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-s-blue-500 { + border-inline-start-color: var(--border-color-blue-500); +} + .border-s-current { border-inline-start-color: currentColor; } @@ -855,6 +885,7 @@ exports[`border-s-* 1`] = ` exports[`border-t-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-t { @@ -951,6 +982,10 @@ exports[`border-t-* 1`] = ` border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-t-blue-500 { + border-top-color: var(--border-color-blue-500); +} + .border-t-current { border-top-color: currentColor; } @@ -997,6 +1032,7 @@ exports[`border-t-* 1`] = ` exports[`border-x-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-x { @@ -1093,6 +1129,10 @@ exports[`border-x-* 1`] = ` border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-x-blue-500 { + border-inline-color: var(--border-color-blue-500); +} + .border-x-current { border-inline-color: currentColor; } @@ -1139,6 +1179,7 @@ exports[`border-x-* 1`] = ` exports[`border-y-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-y { @@ -1235,6 +1276,10 @@ exports[`border-y-* 1`] = ` border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-y-blue-500 { + border-block-color: var(--border-color-blue-500); +} + .border-y-current { border-block-color: currentColor; } diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index ba4c29ee86e3..aab57c1f95a1 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -8029,6 +8029,7 @@ test('accent', async () => { css` @theme { --color-red-500: #ef4444; + --accent-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -8040,6 +8041,7 @@ test('accent', async () => { 'accent-red-500/2.75', 'accent-red-500/[0.5]', 'accent-red-500/[50%]', + 'accent-blue-500', 'accent-current', 'accent-current/50', 'accent-current/[0.5]', @@ -8055,6 +8057,7 @@ test('accent', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --accent-color-blue-500: #3b82f6; } .accent-\\[\\#0088cc\\] { @@ -8065,6 +8068,10 @@ test('accent', async () => { accent-color: oklab(59.9824% -.06725 -.12414 / .5); } + .accent-blue-500 { + accent-color: var(--accent-color-blue-500); + } + .accent-current { accent-color: currentColor; } @@ -8144,6 +8151,7 @@ test('caret', async () => { css` @theme { --color-red-500: #ef4444; + --caret-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -8155,6 +8163,7 @@ test('caret', async () => { 'caret-red-500/2.75', 'caret-red-500/[0.5]', 'caret-red-500/[50%]', + 'caret-blue-500', 'caret-current', 'caret-current/50', 'caret-current/[0.5]', @@ -8170,6 +8179,7 @@ test('caret', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --caret-color-blue-500: #3b82f6; } .caret-\\[\\#0088cc\\] { @@ -8180,6 +8190,10 @@ test('caret', async () => { caret-color: oklab(59.9824% -.06725 -.12414 / .5); } + .caret-blue-500 { + caret-color: var(--caret-color-blue-500); + } + .caret-current { caret-color: currentColor; } @@ -10010,6 +10024,7 @@ for (let prefix of prefixes) { classes.push(`${prefix}-red-500/2.25`) classes.push(`${prefix}-red-500/2.5`) classes.push(`${prefix}-red-500/2.75`) + classes.push(`${prefix}-blue-500`) classes.push(`${prefix}-[#0088cc]`) classes.push(`${prefix}-[#0088cc]/50`) classes.push(`${prefix}-current`) @@ -10031,6 +10046,7 @@ for (let prefix of prefixes) { --radius-full: 9999px; --radius-sm: 0.125rem; --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -10090,6 +10106,7 @@ test('bg', async () => { css` @theme { --color-red-500: #ef4444; + --background-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -10102,6 +10119,7 @@ test('bg', async () => { 'bg-red-500/2.75', 'bg-red-500/[0.5]', 'bg-red-500/[50%]', + 'bg-blue-500', 'bg-current', 'bg-current/50', 'bg-current/[0.5]', @@ -10235,6 +10253,7 @@ test('bg', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --background-color-blue-500: #3b82f6; } .bg-\\[\\#0088cc\\] { @@ -10261,6 +10280,10 @@ test('bg', async () => { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } + .bg-blue-500 { + background-color: var(--background-color-blue-500); + } + .bg-current { background-color: currentColor; } @@ -17425,6 +17448,7 @@ test('fill', async () => { css` @theme { --color-red-500: #ef4444; + --fill-blue-500: #3b82f6; } @tailwind utilities; `, @@ -17436,6 +17460,7 @@ test('fill', async () => { 'fill-red-500/2.75', 'fill-red-500/[0.5]', 'fill-red-500/[50%]', + 'fill-blue-500', 'fill-current', 'fill-current/50', 'fill-current/[0.5]', @@ -17451,6 +17476,7 @@ test('fill', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --fill-blue-500: #3b82f6; } .fill-\\[\\#0088cc\\] { @@ -17461,6 +17487,10 @@ test('fill', async () => { fill: oklab(59.9824% -.06725 -.12414 / .5); } + .fill-blue-500 { + fill: var(--fill-blue-500); + } + .fill-current { fill: currentColor; } @@ -17525,6 +17555,7 @@ test('stroke', async () => { css` @theme { --color-red-500: #ef4444; + --stroke-blue-500: #3b82f6; } @tailwind utilities; `, @@ -17537,6 +17568,7 @@ test('stroke', async () => { 'stroke-red-500/2.75', 'stroke-red-500/[0.5]', 'stroke-red-500/[50%]', + 'stroke-blue-500', 'stroke-current', 'stroke-current/50', 'stroke-current/[0.5]', @@ -17572,6 +17604,7 @@ test('stroke', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --stroke-blue-500: #3b82f6; } .stroke-\\[\\#0088cc\\] { @@ -17598,6 +17631,10 @@ test('stroke', async () => { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } + .stroke-blue-500 { + stroke: var(--stroke-blue-500); + } + .stroke-current { stroke: currentColor; } @@ -18637,6 +18674,7 @@ test('decoration', async () => { css` @theme { --color-red-500: #ef4444; + --text-decoration-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -18646,6 +18684,7 @@ test('decoration', async () => { 'decoration-red-500/50', 'decoration-red-500/[0.5]', 'decoration-red-500/[50%]', + 'decoration-blue-500', 'decoration-current', 'decoration-current/50', 'decoration-current/[0.5]', @@ -18689,6 +18728,7 @@ test('decoration', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --text-decoration-color-blue-500: #3b82f6; } .decoration-\\[\\#0088cc\\] { @@ -18723,6 +18763,12 @@ test('decoration', async () => { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } + .decoration-blue-500 { + -webkit-text-decoration-color: var(--text-decoration-color-blue-500); + -webkit-text-decoration-color: var(--text-decoration-color-blue-500); + text-decoration-color: var(--text-decoration-color-blue-500); + } + .decoration-current { text-decoration-color: currentColor; } @@ -20289,6 +20335,7 @@ test('outline', async () => { css` @theme { --color-red-500: #ef4444; + --outline-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -20308,6 +20355,7 @@ test('outline', async () => { 'outline-red-500/50', 'outline-red-500/[0.5]', 'outline-red-500/[50%]', + 'outline-blue-500', 'outline-current', 'outline-current/50', 'outline-current/[0.5]', @@ -20344,6 +20392,7 @@ test('outline', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --outline-color-blue-500: #3b82f6; } .outline-hidden { @@ -20428,6 +20477,10 @@ test('outline', async () => { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } + .outline-blue-500 { + outline-color: var(--outline-color-blue-500); + } + .outline-current { outline-color: currentColor; } @@ -20699,6 +20752,7 @@ test('text', async () => { @theme { --spacing: 0.25rem; --color-red-500: #ef4444; + --text-color-blue-500: #3b82f6; --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; --leading-snug: 1.375; @@ -20714,6 +20768,7 @@ test('text', async () => { 'text-red-500/2.75', 'text-red-500/[0.5]', 'text-red-500/[50%]', + 'text-blue-500', 'text-current', 'text-current/50', 'text-current/[0.5]', @@ -20762,6 +20817,7 @@ test('text', async () => { ":root, :host { --spacing: .25rem; --color-red-500: #ef4444; + --text-color-blue-500: #3b82f6; --text-sm: .875rem; --text-sm--line-height: 1.25rem; --leading-snug: 1.375; @@ -20878,6 +20934,10 @@ test('text', async () => { color: color-mix(in oklab, var(--my-color) 50%, transparent); } + .text-blue-500 { + color: var(--text-color-blue-500); + } + .text-current { color: currentColor; } @@ -21136,6 +21196,7 @@ test('shadow', async () => { css` @theme { --color-red-500: #ef4444; + --shadow-blue-500: #3b82f6; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } @@ -21163,6 +21224,7 @@ test('shadow', async () => { 'shadow-red-500/2.75', 'shadow-red-500/[0.5]', 'shadow-red-500/[50%]', + 'shadow-blue-500', 'shadow-current', 'shadow-current/50', 'shadow-current/[0.5]', @@ -21217,6 +21279,11 @@ test('shadow', async () => { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-blue-500 { + --tw-shadow: #3b82f6; + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -21648,6 +21715,7 @@ test('ring', async () => { css` @theme { --color-red-500: #ef4444; + --ring-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -21661,6 +21729,7 @@ test('ring', async () => { 'ring-red-500/2.75', 'ring-red-500/[0.5]', 'ring-red-500/[50%]', + 'ring-blue-500', 'ring-current', 'ring-current/50', 'ring-current/[0.5]', @@ -21693,6 +21762,7 @@ test('ring', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --ring-color-blue-500: #3b82f6; } .ring { @@ -21754,6 +21824,10 @@ test('ring', async () => { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } + .ring-blue-500 { + --tw-ring-color: var(--ring-color-blue-500); + } + .ring-current { --tw-ring-color: currentColor; } @@ -22275,6 +22349,7 @@ test('ring-offset', async () => { css` @theme { --color-red-500: #ef4444; + --ring-offset-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -22285,6 +22360,7 @@ test('ring-offset', async () => { 'ring-offset-red-500/50', 'ring-offset-red-500/[0.5]', 'ring-offset-red-500/[50%]', + 'ring-offset-blue-500', 'ring-offset-current', 'ring-offset-current/50', 'ring-offset-current/[0.5]', @@ -22317,6 +22393,7 @@ test('ring-offset', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --ring-offset-color-blue-500: #3b82f6; } .ring-offset-0 { @@ -22373,6 +22450,10 @@ test('ring-offset', async () => { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } + .ring-offset-blue-500 { + --tw-ring-offset-color: var(--ring-offset-color-blue-500); + } + .ring-offset-current { --tw-ring-offset-color: currentColor; } From 6df3e6c30433680ec52089da16eb66686db3ec3b Mon Sep 17 00:00:00 2001 From: Scott Bedard Date: Fri, 28 Mar 2025 12:30:12 -0500 Subject: [PATCH 2/5] add test coverage for property-specific colors --- .../src/__snapshots__/utilities.test.ts.snap | 45 +++++++++++ packages/tailwindcss/src/utilities.test.ts | 81 +++++++++++++++++++ 2 files changed, 126 insertions(+) diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 5f1c2fea3f54..1367b302bcbe 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -3,6 +3,7 @@ exports[`border-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border { @@ -99,6 +100,10 @@ exports[`border-* 1`] = ` border-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-blue-500 { + border-color: var(--border-color-blue-500); +} + .border-current { border-color: currentColor; } @@ -145,6 +150,7 @@ exports[`border-* 1`] = ` exports[`border-b-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-b { @@ -241,6 +247,10 @@ exports[`border-b-* 1`] = ` border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-b-blue-500 { + border-bottom-color: var(--border-color-blue-500); +} + .border-b-current { border-bottom-color: currentColor; } @@ -287,6 +297,7 @@ exports[`border-b-* 1`] = ` exports[`border-e-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-e { @@ -383,6 +394,10 @@ exports[`border-e-* 1`] = ` border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-e-blue-500 { + border-inline-end-color: var(--border-color-blue-500); +} + .border-e-current { border-inline-end-color: currentColor; } @@ -429,6 +444,7 @@ exports[`border-e-* 1`] = ` exports[`border-l-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-l { @@ -525,6 +541,10 @@ exports[`border-l-* 1`] = ` border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-l-blue-500 { + border-left-color: var(--border-color-blue-500); +} + .border-l-current { border-left-color: currentColor; } @@ -571,6 +591,7 @@ exports[`border-l-* 1`] = ` exports[`border-r-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-r { @@ -667,6 +688,10 @@ exports[`border-r-* 1`] = ` border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-r-blue-500 { + border-right-color: var(--border-color-blue-500); +} + .border-r-current { border-right-color: currentColor; } @@ -713,6 +738,7 @@ exports[`border-r-* 1`] = ` exports[`border-s-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-s { @@ -809,6 +835,10 @@ exports[`border-s-* 1`] = ` border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-s-blue-500 { + border-inline-start-color: var(--border-color-blue-500); +} + .border-s-current { border-inline-start-color: currentColor; } @@ -855,6 +885,7 @@ exports[`border-s-* 1`] = ` exports[`border-t-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-t { @@ -951,6 +982,10 @@ exports[`border-t-* 1`] = ` border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-t-blue-500 { + border-top-color: var(--border-color-blue-500); +} + .border-t-current { border-top-color: currentColor; } @@ -997,6 +1032,7 @@ exports[`border-t-* 1`] = ` exports[`border-x-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-x { @@ -1093,6 +1129,10 @@ exports[`border-x-* 1`] = ` border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-x-blue-500 { + border-inline-color: var(--border-color-blue-500); +} + .border-x-current { border-inline-color: currentColor; } @@ -1139,6 +1179,7 @@ exports[`border-x-* 1`] = ` exports[`border-y-* 1`] = ` ":root, :host { --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } .border-y { @@ -1235,6 +1276,10 @@ exports[`border-y-* 1`] = ` border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent); } +.border-y-blue-500 { + border-block-color: var(--border-color-blue-500); +} + .border-y-current { border-block-color: currentColor; } diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 25dc020d6b07..07e1773a1957 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -8029,6 +8029,7 @@ test('accent', async () => { css` @theme { --color-red-500: #ef4444; + --accent-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -8040,6 +8041,7 @@ test('accent', async () => { 'accent-red-500/2.75', 'accent-red-500/[0.5]', 'accent-red-500/[50%]', + 'accent-blue-500', 'accent-current', 'accent-current/50', 'accent-current/[0.5]', @@ -8055,6 +8057,7 @@ test('accent', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --accent-color-blue-500: #3b82f6; } .accent-\\[\\#0088cc\\] { @@ -8065,6 +8068,10 @@ test('accent', async () => { accent-color: oklab(59.9824% -.06725 -.12414 / .5); } + .accent-blue-500 { + accent-color: var(--accent-color-blue-500); + } + .accent-current { accent-color: currentColor; } @@ -8144,6 +8151,7 @@ test('caret', async () => { css` @theme { --color-red-500: #ef4444; + --caret-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -8155,6 +8163,7 @@ test('caret', async () => { 'caret-red-500/2.75', 'caret-red-500/[0.5]', 'caret-red-500/[50%]', + 'caret-blue-500', 'caret-current', 'caret-current/50', 'caret-current/[0.5]', @@ -8170,6 +8179,7 @@ test('caret', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --caret-color-blue-500: #3b82f6; } .caret-\\[\\#0088cc\\] { @@ -8180,6 +8190,10 @@ test('caret', async () => { caret-color: oklab(59.9824% -.06725 -.12414 / .5); } + .caret-blue-500 { + caret-color: var(--caret-color-blue-500); + } + .caret-current { caret-color: currentColor; } @@ -10010,6 +10024,7 @@ for (let prefix of prefixes) { classes.push(`${prefix}-red-500/2.25`) classes.push(`${prefix}-red-500/2.5`) classes.push(`${prefix}-red-500/2.75`) + classes.push(`${prefix}-blue-500`) classes.push(`${prefix}-[#0088cc]`) classes.push(`${prefix}-[#0088cc]/50`) classes.push(`${prefix}-current`) @@ -10031,6 +10046,7 @@ for (let prefix of prefixes) { --radius-full: 9999px; --radius-sm: 0.125rem; --color-red-500: #ef4444; + --border-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -10090,6 +10106,7 @@ test('bg', async () => { css` @theme { --color-red-500: #ef4444; + --background-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -10102,6 +10119,7 @@ test('bg', async () => { 'bg-red-500/2.75', 'bg-red-500/[0.5]', 'bg-red-500/[50%]', + 'bg-blue-500', 'bg-current', 'bg-current/50', 'bg-current/[0.5]', @@ -10235,6 +10253,7 @@ test('bg', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --background-color-blue-500: #3b82f6; } .bg-\\[\\#0088cc\\] { @@ -10261,6 +10280,10 @@ test('bg', async () => { background-color: color-mix(in oklab, var(--some-var) 50%, transparent); } + .bg-blue-500 { + background-color: var(--background-color-blue-500); + } + .bg-current { background-color: currentColor; } @@ -17425,6 +17448,7 @@ test('fill', async () => { css` @theme { --color-red-500: #ef4444; + --fill-blue-500: #3b82f6; } @tailwind utilities; `, @@ -17436,6 +17460,7 @@ test('fill', async () => { 'fill-red-500/2.75', 'fill-red-500/[0.5]', 'fill-red-500/[50%]', + 'fill-blue-500', 'fill-current', 'fill-current/50', 'fill-current/[0.5]', @@ -17451,6 +17476,7 @@ test('fill', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --fill-blue-500: #3b82f6; } .fill-\\[\\#0088cc\\] { @@ -17461,6 +17487,10 @@ test('fill', async () => { fill: oklab(59.9824% -.06725 -.12414 / .5); } + .fill-blue-500 { + fill: var(--fill-blue-500); + } + .fill-current { fill: currentColor; } @@ -17525,6 +17555,7 @@ test('stroke', async () => { css` @theme { --color-red-500: #ef4444; + --stroke-blue-500: #3b82f6; } @tailwind utilities; `, @@ -17537,6 +17568,7 @@ test('stroke', async () => { 'stroke-red-500/2.75', 'stroke-red-500/[0.5]', 'stroke-red-500/[50%]', + 'stroke-blue-500', 'stroke-current', 'stroke-current/50', 'stroke-current/[0.5]', @@ -17572,6 +17604,7 @@ test('stroke', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --stroke-blue-500: #3b82f6; } .stroke-\\[\\#0088cc\\] { @@ -17598,6 +17631,10 @@ test('stroke', async () => { stroke: color-mix(in oklab, var(--my-color) 50%, transparent); } + .stroke-blue-500 { + stroke: var(--stroke-blue-500); + } + .stroke-current { stroke: currentColor; } @@ -18659,6 +18696,7 @@ test('decoration', async () => { css` @theme { --color-red-500: #ef4444; + --text-decoration-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -18668,6 +18706,7 @@ test('decoration', async () => { 'decoration-red-500/50', 'decoration-red-500/[0.5]', 'decoration-red-500/[50%]', + 'decoration-blue-500', 'decoration-current', 'decoration-current/50', 'decoration-current/[0.5]', @@ -18711,6 +18750,7 @@ test('decoration', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --text-decoration-color-blue-500: #3b82f6; } .decoration-\\[\\#0088cc\\] { @@ -18745,6 +18785,12 @@ test('decoration', async () => { text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } + .decoration-blue-500 { + -webkit-text-decoration-color: var(--text-decoration-color-blue-500); + -webkit-text-decoration-color: var(--text-decoration-color-blue-500); + text-decoration-color: var(--text-decoration-color-blue-500); + } + .decoration-current { text-decoration-color: currentColor; } @@ -20311,6 +20357,7 @@ test('outline', async () => { css` @theme { --color-red-500: #ef4444; + --outline-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -20330,6 +20377,7 @@ test('outline', async () => { 'outline-red-500/50', 'outline-red-500/[0.5]', 'outline-red-500/[50%]', + 'outline-blue-500', 'outline-current', 'outline-current/50', 'outline-current/[0.5]', @@ -20366,6 +20414,7 @@ test('outline', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --outline-color-blue-500: #3b82f6; } .outline-hidden { @@ -20450,6 +20499,10 @@ test('outline', async () => { outline-color: color-mix(in oklab, var(--value) 50%, transparent); } + .outline-blue-500 { + outline-color: var(--outline-color-blue-500); + } + .outline-current { outline-color: currentColor; } @@ -20721,6 +20774,7 @@ test('text', async () => { @theme { --spacing: 0.25rem; --color-red-500: #ef4444; + --text-color-blue-500: #3b82f6; --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; --leading-snug: 1.375; @@ -20736,6 +20790,7 @@ test('text', async () => { 'text-red-500/2.75', 'text-red-500/[0.5]', 'text-red-500/[50%]', + 'text-blue-500', 'text-current', 'text-current/50', 'text-current/[0.5]', @@ -20784,6 +20839,7 @@ test('text', async () => { ":root, :host { --spacing: .25rem; --color-red-500: #ef4444; + --text-color-blue-500: #3b82f6; --text-sm: .875rem; --text-sm--line-height: 1.25rem; --leading-snug: 1.375; @@ -20900,6 +20956,10 @@ test('text', async () => { color: color-mix(in oklab, var(--my-color) 50%, transparent); } + .text-blue-500 { + color: var(--text-color-blue-500); + } + .text-current { color: currentColor; } @@ -21158,6 +21218,7 @@ test('shadow', async () => { css` @theme { --color-red-500: #ef4444; + --shadow-blue-500: #3b82f6; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } @@ -21185,6 +21246,7 @@ test('shadow', async () => { 'shadow-red-500/2.75', 'shadow-red-500/[0.5]', 'shadow-red-500/[50%]', + 'shadow-blue-500', 'shadow-current', 'shadow-current/50', 'shadow-current/[0.5]', @@ -21239,6 +21301,11 @@ test('shadow', async () => { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-blue-500 { + --tw-shadow: #3b82f6; + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -21670,6 +21737,7 @@ test('ring', async () => { css` @theme { --color-red-500: #ef4444; + --ring-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -21683,6 +21751,7 @@ test('ring', async () => { 'ring-red-500/2.75', 'ring-red-500/[0.5]', 'ring-red-500/[50%]', + 'ring-blue-500', 'ring-current', 'ring-current/50', 'ring-current/[0.5]', @@ -21715,6 +21784,7 @@ test('ring', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --ring-color-blue-500: #3b82f6; } .ring { @@ -21776,6 +21846,10 @@ test('ring', async () => { --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent); } + .ring-blue-500 { + --tw-ring-color: var(--ring-color-blue-500); + } + .ring-current { --tw-ring-color: currentColor; } @@ -22297,6 +22371,7 @@ test('ring-offset', async () => { css` @theme { --color-red-500: #ef4444; + --ring-offset-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -22307,6 +22382,7 @@ test('ring-offset', async () => { 'ring-offset-red-500/50', 'ring-offset-red-500/[0.5]', 'ring-offset-red-500/[50%]', + 'ring-offset-blue-500', 'ring-offset-current', 'ring-offset-current/50', 'ring-offset-current/[0.5]', @@ -22339,6 +22415,7 @@ test('ring-offset', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --ring-offset-color-blue-500: #3b82f6; } .ring-offset-0 { @@ -22395,6 +22472,10 @@ test('ring-offset', async () => { --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent); } + .ring-offset-blue-500 { + --tw-ring-offset-color: var(--ring-offset-color-blue-500); + } + .ring-offset-current { --tw-ring-offset-color: currentColor; } From 5ed59d2f74342695f4044de620bdb4dcae7fdfe3 Mon Sep 17 00:00:00 2001 From: Scott Bedard Date: Tue, 1 Apr 2025 10:17:28 -0500 Subject: [PATCH 3/5] fix box-shadow-color --- packages/tailwindcss/src/utilities.test.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 07e1773a1957..ae5db0384ae3 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -21218,7 +21218,7 @@ test('shadow', async () => { css` @theme { --color-red-500: #ef4444; - --shadow-blue-500: #3b82f6; + --box-shadow-color-blue-500: #3b82f6; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } @@ -21266,6 +21266,7 @@ test('shadow', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --box-shadow-color-blue-500: #3b82f6; } .shadow-\\[10px_10px\\]\\/25 { @@ -21301,11 +21302,6 @@ test('shadow', async () => { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-blue-500 { - --tw-shadow: #3b82f6; - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -21337,6 +21333,10 @@ test('shadow', async () => { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent); } + .shadow-blue-500 { + --tw-shadow-color: color-mix(in oklab, var(--box-shadow-color-blue-500) var(--tw-shadow-alpha), transparent); + } + .shadow-current { --tw-shadow-color: color-mix(in oklab, currentColor var(--tw-shadow-alpha), transparent); } From e2ac6024a0b1cf6ff1f44dee75dfdcfdae55cf6c Mon Sep 17 00:00:00 2001 From: Scott Bedard Date: Tue, 1 Apr 2025 10:30:51 -0500 Subject: [PATCH 4/5] fix test --- packages/tailwindcss/src/utilities.test.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 10b185d76c4f..ce2ec88e2863 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -23118,7 +23118,13 @@ test('shadow', async () => { } .shadow-blue-500 { - --tw-shadow-color: color-mix(in oklab, var(--box-shadow-color-blue-500) var(--tw-shadow-alpha), transparent); + --tw-shadow-color: color-mix(in srgb, #3b82f6 var(--tw-shadow-alpha), transparent); + } + + @supports (color: color-mix(in lab, red, red)) { + .shadow-blue-500 { + --tw-shadow-color: color-mix(in oklab, var(--box-shadow-color-blue-500) var(--tw-shadow-alpha), transparent); + } } .shadow-current { From abd5fc816fc08f132303ea03d8648c0cfa1207e6 Mon Sep 17 00:00:00 2001 From: Scott Bedard Date: Fri, 4 Apr 2025 09:51:26 -0500 Subject: [PATCH 5/5] fix bad merge --- packages/tailwindcss/src/utilities.test.ts | 58 ++++++++++------------ 1 file changed, 27 insertions(+), 31 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 1fb1ced4079d..b9e10037c831 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -10917,6 +10917,10 @@ test('bg', async () => { } } + .bg-blue-500 { + background-color: var(--background-color-blue-500); + } + .bg-current, .bg-current\\/50 { background-color: currentColor; } @@ -10937,10 +10941,6 @@ test('bg', async () => { } } - .bg-blue-500 { - background-color: var(--background-color-blue-500); - } - .bg-current\\/\\[50\\%\\] { background-color: currentColor; } @@ -19340,6 +19340,10 @@ test('stroke', async () => { } } + .stroke-blue-500 { + stroke: var(--stroke-blue-500); + } + .stroke-current, .stroke-current\\/50 { stroke: currentColor; } @@ -19360,10 +19364,6 @@ test('stroke', async () => { } } - .stroke-blue-500 { - stroke: var(--stroke-blue-500); - } - .stroke-current\\/\\[50\\%\\] { stroke: currentColor; } @@ -20694,6 +20694,12 @@ test('decoration', async () => { } } + .decoration-blue-500 { + -webkit-text-decoration-color: var(--text-decoration-color-blue-500); + -webkit-text-decoration-color: var(--text-decoration-color-blue-500); + text-decoration-color: var(--text-decoration-color-blue-500); + } + .decoration-current, .decoration-current\\/50 { text-decoration-color: currentColor; } @@ -20718,12 +20724,6 @@ test('decoration', async () => { } } - .decoration-blue-500 { - -webkit-text-decoration-color: var(--text-decoration-color-blue-500); - -webkit-text-decoration-color: var(--text-decoration-color-blue-500); - text-decoration-color: var(--text-decoration-color-blue-500); - } - .decoration-current\\/\\[50\\%\\] { text-decoration-color: currentColor; } @@ -22687,6 +22687,10 @@ test('outline', async () => { } } + .outline-blue-500 { + outline-color: var(--outline-color-blue-500); + } + .outline-current, .outline-current\\/50 { outline-color: currentColor; } @@ -22707,10 +22711,6 @@ test('outline', async () => { } } - .outline-blue-500 { - outline-color: var(--outline-color-blue-500); - } - .outline-current\\/\\[50\\%\\] { outline-color: currentColor; } @@ -23244,6 +23244,10 @@ test('text', async () => { } } + .text-blue-500 { + color: var(--text-color-blue-500); + } + .text-current, .text-current\\/50 { color: currentColor; } @@ -23264,10 +23268,6 @@ test('text', async () => { } } - .text-blue-500 { - color: var(--text-color-blue-500); - } - .text-current\\/\\[50\\%\\] { color: currentColor; } @@ -23988,7 +23988,7 @@ test('shadow', async () => { } .shadow-blue-500 { - --tw-shadow-color: color-mix(in srgb, #3b82f6 var(--tw-shadow-alpha), transparent); + --tw-shadow-color: #3b82f6; } @supports (color: color-mix(in lab, red, red)) { @@ -25736,14 +25736,6 @@ test('ring-offset', async () => { } } - .ring-offset-blue-500 { - --tw-ring-offset-color: var(--ring-offset-color-blue-500); - } - - .ring-offset-current { - --tw-ring-offset-color: currentColor; - } - .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] { --tw-ring-offset-color: var(--my-color); } @@ -25784,6 +25776,10 @@ test('ring-offset', async () => { } } + .ring-offset-blue-500 { + --tw-ring-offset-color: var(--ring-offset-color-blue-500); + } + .ring-offset-current, .ring-offset-current\\/50 { --tw-ring-offset-color: currentcolor; }