Skip to content

Commit 521c5ed

Browse files
philipp-spiessphilipp-spiess
committed
Add fallbacks for new relative color usage
1 parent 7c0cdeb commit 521c5ed

File tree

4 files changed

+249
-97
lines changed

4 files changed

+249
-97
lines changed

‎packages/tailwindcss/src/utilities.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22484,7 +22484,7 @@ test('text-shadow', async () => {
2248422484

2248522485
.text-shadow-\\[10px_10px\\]\\/25 {
2248622486
--tw-text-shadow-alpha: 25%;
22487-
text-shadow: 10px 10px var(--tw-text-shadow-color, oklab(from currentcolor l a b / 25%));
22487+
text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
2248822488
}
2248922489

2249022490
.text-shadow-\\[12px_12px_\\#0088cc\\]\\/25 {
@@ -22732,7 +22732,7 @@ test('shadow', async () => {
2273222732

2273322733
.shadow-\\[10px_10px\\]\\/25 {
2273422734
--tw-shadow-alpha: 25%;
22735-
--tw-shadow: 10px 10px var(--tw-shadow-color, oklab(from currentcolor l a b / 25%));
22735+
--tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
2273622736
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2273722737
}
2273822738

@@ -23057,7 +23057,7 @@ test('inset-shadow', async () => {
2305723057

2305823058
.inset-shadow-\\[10px_10px\\]\\/25 {
2305923059
--tw-inset-shadow-alpha: 25%;
23060-
--tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, oklab(from currentcolor l a b / 25%));
23060+
--tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
2306123061
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2306223062
}
2306323063

‎packages/tailwindcss/src/utilities.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export function withAlpha(value: string, alpha: string): string {
186186
/**
187187
* Apply opacity to a color using `color-mix`.
188188
*/
189-
export function replaceAlpha(value: string, alpha: string | null): string {
189+
export function replaceAlpha(value: string, alpha: string): string {
190190
if (alpha === null) return value
191191

192192
// Convert numeric values (like `0.5`) to percentages (like `50%`) so they

‎packages/tailwindcss/src/utils/replace-shadow-colors.test.ts‎

Lines changed: 183 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -2,80 +2,187 @@ import { expect, it } from 'vitest'
22
import { toCss } from '../ast'
33
import { replaceShadowColors } from './replace-shadow-colors'
44

5-
const table = [
6-
{
7-
input: ['text-shadow', 'var(--my-shadow)'],
8-
output: 'text-shadow: var(--my-shadow);',
9-
},
10-
{
11-
input: ['text-shadow', '1px var(--my-shadow)'],
12-
output: 'text-shadow: 1px var(--my-shadow);',
13-
},
14-
{
15-
input: ['text-shadow', '1px 1px var(--my-color)'],
16-
output: 'text-shadow: 1px 1px var(--tw-shadow-color, var(--my-color));',
17-
},
18-
{
19-
input: ['text-shadow', '0 0 0 var(--my-color)'],
20-
output: 'text-shadow: 0 0 0 var(--tw-shadow-color, var(--my-color));',
21-
},
22-
{
23-
input: ['text-shadow', '1px 2px'],
24-
output: 'text-shadow: 1px 2px var(--tw-shadow-color, currentcolor);',
25-
},
26-
{
27-
input: ['text-shadow', '1px 2px 3px'],
28-
output: 'text-shadow: 1px 2px 3px var(--tw-shadow-color, currentcolor);',
29-
},
30-
{
31-
input: ['text-shadow', '1px 2px 3px 4px'],
32-
output: 'text-shadow: 1px 2px 3px 4px var(--tw-shadow-color, currentcolor);',
33-
},
34-
{
35-
input: [
36-
'text-shadow',
37-
['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
38-
],
39-
output: `text-shadow: ${[
40-
'var(--my-shadow)',
41-
'1px 1px var(--tw-shadow-color, var(--my-color))',
42-
'0 0 1px var(--tw-shadow-color, var(--my-color))',
43-
].join(', ')};`,
44-
},
45-
{
46-
input: ['text-shadow', '1px 1px var(--my-color)'],
47-
intensity: '50%',
48-
output: 'text-shadow: 1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%));',
49-
},
50-
{
51-
input: ['text-shadow', '1px 2px 3px 4px'],
52-
intensity: '50%',
53-
output:
54-
'text-shadow: 1px 2px 3px 4px var(--tw-shadow-color, oklab(from currentcolor l a b / 50%));',
55-
},
56-
{
57-
input: [
58-
'text-shadow',
59-
['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
60-
],
61-
intensity: '50%',
62-
output: `text-shadow: ${[
63-
'var(--my-shadow)',
64-
'1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))',
65-
'0 0 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))',
66-
].join(', ')};`,
67-
},
68-
]
5+
it('should handle var shadow', () => {
6+
let parsed = replaceShadowColors(
7+
'text-shadow',
8+
'var(--my-shadow)',
9+
null,
10+
(color) => `var(--tw-shadow-color, ${color})`,
11+
)
12+
expect(toCss(parsed).trim()).toMatchInlineSnapshot('"text-shadow: var(--my-shadow);"')
13+
})
6914

70-
it.each(table)(
71-
'should replace the color of box-shadow $input with $output',
72-
({ input, intensity = null, output }) => {
73-
let parsed = replaceShadowColors(
74-
input[0],
75-
input[1],
76-
intensity,
77-
(color) => `var(--tw-shadow-color, ${color})`,
78-
)
79-
expect(toCss(parsed).trim()).toEqual(output)
80-
},
81-
)
15+
it('should handle var shadow with offset', () => {
16+
let parsed = replaceShadowColors(
17+
'text-shadow',
18+
'1px var(--my-shadow)',
19+
null,
20+
(color) => `var(--tw-shadow-color, ${color})`,
21+
)
22+
expect(toCss(parsed).trim()).toMatchInlineSnapshot('"text-shadow: 1px var(--my-shadow);"')
23+
})
24+
25+
it('should handle var color with offsets', () => {
26+
let parsed = replaceShadowColors(
27+
'text-shadow',
28+
'1px 1px var(--my-color)',
29+
null,
30+
(color) => `var(--tw-shadow-color, ${color})`,
31+
)
32+
expect(toCss(parsed).trim()).toMatchInlineSnapshot(
33+
`
34+
"text-shadow: 1px 1px var(--tw-shadow-color, var(--my-color));"
35+
`,
36+
)
37+
})
38+
39+
it('should handle var color with zero offsets', () => {
40+
let parsed = replaceShadowColors(
41+
'text-shadow',
42+
'0 0 0 var(--my-color)',
43+
null,
44+
(color) => `var(--tw-shadow-color, ${color})`,
45+
)
46+
expect(toCss(parsed).trim()).toMatchInlineSnapshot(
47+
`
48+
"text-shadow: 0 0 0 var(--tw-shadow-color, var(--my-color));"
49+
`,
50+
)
51+
})
52+
53+
it('should handle two values with currentcolor', () => {
54+
let parsed = replaceShadowColors(
55+
'text-shadow',
56+
'1px 2px',
57+
null,
58+
(color) => `var(--tw-shadow-color, ${color})`,
59+
)
60+
expect(toCss(parsed).trim()).toMatchInlineSnapshot(
61+
`
62+
"text-shadow: 1px 2px var(--tw-shadow-color, currentcolor);"
63+
`,
64+
)
65+
})
66+
67+
it('should handle three values with currentcolor', () => {
68+
let parsed = replaceShadowColors(
69+
'text-shadow',
70+
'1px 2px 3px',
71+
null,
72+
(color) => `var(--tw-shadow-color, ${color})`,
73+
)
74+
expect(toCss(parsed).trim()).toMatchInlineSnapshot(
75+
`
76+
"text-shadow: 1px 2px 3px var(--tw-shadow-color, currentcolor);"
77+
`,
78+
)
79+
})
80+
81+
it('should handle four values with currentcolor', () => {
82+
let parsed = replaceShadowColors(
83+
'text-shadow',
84+
'1px 2px 3px 4px',
85+
null,
86+
(color) => `var(--tw-shadow-color, ${color})`,
87+
)
88+
expect(toCss(parsed).trim()).toMatchInlineSnapshot(
89+
`
90+
"text-shadow: 1px 2px 3px 4px var(--tw-shadow-color, currentcolor);"
91+
`,
92+
)
93+
})
94+
95+
it('should handle multiple shadows', () => {
96+
let parsed = replaceShadowColors(
97+
'text-shadow',
98+
['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
99+
null,
100+
(color) => `var(--tw-shadow-color, ${color})`,
101+
)
102+
expect(toCss(parsed).trim()).toMatchInlineSnapshot(
103+
`
104+
"text-shadow: var(--my-shadow), 1px 1px var(--tw-shadow-color, var(--my-color)), 0 0 1px var(--tw-shadow-color, var(--my-color));"
105+
`,
106+
)
107+
})
108+
109+
it('should handle var color with intensity', () => {
110+
let parsed = replaceShadowColors(
111+
'text-shadow',
112+
'1px 1px var(--my-color)',
113+
'50%',
114+
(color) => `var(--tw-shadow-color, ${color})`,
115+
)
116+
expect(toCss(parsed).trim()).toMatchInlineSnapshot(
117+
`
118+
"text-shadow: 1px 1px var(--tw-shadow-color, var(--my-color));
119+
@supports (color: lab(from red l a b)) {
120+
text-shadow: 1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%));
121+
}"
122+
`,
123+
)
124+
})
125+
126+
it('should handle box-shadow with intensity', () => {
127+
let parsed = replaceShadowColors(
128+
'box-shadow',
129+
'1px 1px var(--my-color)',
130+
'50%',
131+
(color) => `var(--tw-shadow-color, ${color})`,
132+
)
133+
expect(toCss(parsed).trim()).toMatchInlineSnapshot(
134+
`
135+
"box-shadow: 1px 1px var(--tw-shadow-color, var(--my-color));
136+
@supports (color: lab(from red l a b)) {
137+
box-shadow: 1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%));
138+
}"
139+
`,
140+
)
141+
})
142+
143+
it('should handle box-shadow with inset prefix and intensity', () => {
144+
let parsed = replaceShadowColors(
145+
'box-shadow',
146+
'1px 1px var(--my-color)',
147+
'50%',
148+
(color) => `var(--tw-shadow-color, ${color})`,
149+
'inset ',
150+
)
151+
expect(toCss(parsed).trim()).toMatchInlineSnapshot(
152+
`
153+
"box-shadow: inset 1px 1px var(--tw-shadow-color, var(--my-color));
154+
@supports (color: lab(from red l a b)) {
155+
box-shadow: inset 1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%));
156+
}"
157+
`,
158+
)
159+
})
160+
161+
it('should handle four values with intensity and no color value', () => {
162+
let parsed = replaceShadowColors(
163+
'text-shadow',
164+
'1px 2px 3px 4px',
165+
'50%',
166+
(color) => `var(--tw-shadow-color, ${color})`,
167+
)
168+
expect(toCss(parsed).trim()).toMatchInlineSnapshot(
169+
`"text-shadow: 1px 2px 3px 4px var(--tw-shadow-color, color-mix(in oklab, currentcolor 50%, transparent));"`,
170+
)
171+
})
172+
173+
it('should handle multiple shadows with intensity', () => {
174+
let parsed = replaceShadowColors(
175+
'text-shadow',
176+
['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
177+
'50%',
178+
(color) => `var(--tw-shadow-color, ${color})`,
179+
)
180+
expect(toCss(parsed).trim()).toMatchInlineSnapshot(
181+
`
182+
"text-shadow: var(--my-shadow), 1px 1px var(--tw-shadow-color, var(--my-color)), 0 0 1px var(--tw-shadow-color, var(--my-color));
183+
@supports (color: lab(from red l a b)) {
184+
text-shadow: var(--my-shadow), 1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%)), 0 0 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%));
185+
}"
186+
`,
187+
)
188+
})

0 commit comments

Comments
 (0)