Skip to content

Commit 7c0cdeb

Browse files
philipp-spiessphilipp-spiess
committed
Refactor replaceShadowColors(…) to print AST
1 parent cbe96c0 commit 7c0cdeb

File tree

3 files changed

+77
-58
lines changed

3 files changed

+77
-58
lines changed

‎packages/tailwindcss/src/utilities.ts

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4999,9 +4999,11 @@ export function createUtilities(theme: Theme) {
49994999
return [
50005000
textShadowProperties(),
50015001
decl('--tw-text-shadow-alpha', alpha),
5002-
decl(
5002+
...replaceShadowColors(
50035003
'text-shadow',
5004-
replaceShadowColors(value, alpha, (color) => `var(--tw-text-shadow-color, ${color})`),
5004+
value,
5005+
alpha,
5006+
(color) => `var(--tw-text-shadow-color, ${color})`,
50055007
),
50065008
]
50075009
}
@@ -5023,13 +5025,11 @@ export function createUtilities(theme: Theme) {
50235025
return [
50245026
textShadowProperties(),
50255027
decl('--tw-text-shadow-alpha', alpha),
5026-
decl(
5028+
...replaceShadowColors(
50275029
'text-shadow',
5028-
replaceShadowColors(
5029-
value,
5030-
alpha,
5031-
(color) => `var(--tw-text-shadow-color, ${color})`,
5032-
),
5030+
value,
5031+
alpha,
5032+
(color) => `var(--tw-text-shadow-color, ${color})`,
50335033
),
50345034
]
50355035
}
@@ -5049,9 +5049,11 @@ export function createUtilities(theme: Theme) {
50495049
return [
50505050
textShadowProperties(),
50515051
decl('--tw-text-shadow-alpha', alpha),
5052-
decl(
5052+
...replaceShadowColors(
50535053
'text-shadow',
5054-
replaceShadowColors(value, alpha, (color) => `var(--tw-text-shadow-color, ${color})`),
5054+
value,
5055+
alpha,
5056+
(color) => `var(--tw-text-shadow-color, ${color})`,
50555057
),
50565058
]
50575059
}
@@ -5139,9 +5141,11 @@ export function createUtilities(theme: Theme) {
51395141
return [
51405142
boxShadowProperties(),
51415143
decl('--tw-shadow-alpha', alpha),
5142-
decl(
5144+
...replaceShadowColors(
51435145
'--tw-shadow',
5144-
replaceShadowColors(value, alpha, (color) => `var(--tw-shadow-color, ${color})`),
5146+
value,
5147+
alpha,
5148+
(color) => `var(--tw-shadow-color, ${color})`,
51455149
),
51465150
decl('box-shadow', cssBoxShadowValue),
51475151
]
@@ -5165,9 +5169,11 @@ export function createUtilities(theme: Theme) {
51655169
return [
51665170
boxShadowProperties(),
51675171
decl('--tw-shadow-alpha', alpha),
5168-
decl(
5172+
...replaceShadowColors(
51695173
'--tw-shadow',
5170-
replaceShadowColors(value, alpha, (color) => `var(--tw-shadow-color, ${color})`),
5174+
value,
5175+
alpha,
5176+
(color) => `var(--tw-shadow-color, ${color})`,
51715177
),
51725178
decl('box-shadow', cssBoxShadowValue),
51735179
]
@@ -5192,9 +5198,11 @@ export function createUtilities(theme: Theme) {
51925198
return [
51935199
boxShadowProperties(),
51945200
decl('--tw-shadow-alpha', alpha),
5195-
decl(
5201+
...replaceShadowColors(
51965202
'--tw-shadow',
5197-
replaceShadowColors(value, alpha, (color) => `var(--tw-shadow-color, ${color})`),
5203+
value,
5204+
alpha,
5205+
(color) => `var(--tw-shadow-color, ${color})`,
51985206
),
51995207
decl('box-shadow', cssBoxShadowValue),
52005208
]
@@ -5254,9 +5262,11 @@ export function createUtilities(theme: Theme) {
52545262
return [
52555263
boxShadowProperties(),
52565264
decl('--tw-inset-shadow-alpha', alpha),
5257-
decl(
5265+
...replaceShadowColors(
52585266
'--tw-inset-shadow',
5259-
replaceShadowColors(value, alpha, (color) => `var(--tw-inset-shadow-color, ${color})`),
5267+
value,
5268+
alpha,
5269+
(color) => `var(--tw-inset-shadow-color, ${color})`,
52605270
),
52615271
decl('box-shadow', cssBoxShadowValue),
52625272
]
@@ -5280,13 +5290,12 @@ export function createUtilities(theme: Theme) {
52805290
return [
52815291
boxShadowProperties(),
52825292
decl('--tw-inset-shadow-alpha', alpha),
5283-
decl(
5293+
...replaceShadowColors(
52845294
'--tw-inset-shadow',
5285-
`inset ${replaceShadowColors(
5286-
value,
5287-
alpha,
5288-
(color) => `var(--tw-inset-shadow-color, ${color})`,
5289-
)}`,
5295+
value,
5296+
alpha,
5297+
(color) => `var(--tw-inset-shadow-color, ${color})`,
5298+
'inset ',
52905299
),
52915300
decl('box-shadow', cssBoxShadowValue),
52925301
]
@@ -5312,13 +5321,11 @@ export function createUtilities(theme: Theme) {
53125321
return [
53135322
boxShadowProperties(),
53145323
decl('--tw-inset-shadow-alpha', alpha),
5315-
decl(
5324+
...replaceShadowColors(
53165325
'--tw-inset-shadow',
5317-
replaceShadowColors(
5318-
value,
5319-
alpha,
5320-
(color) => `var(--tw-inset-shadow-color, ${color})`,
5321-
),
5326+
value,
5327+
alpha,
5328+
(color) => `var(--tw-inset-shadow-color, ${color})`,
53225329
),
53235330
decl('box-shadow', cssBoxShadowValue),
53245331
]

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

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,81 @@
11
import { expect, it } from 'vitest'
2+
import { toCss } from '../ast'
23
import { replaceShadowColors } from './replace-shadow-colors'
34

45
const table = [
56
{
6-
input: 'var(--my-shadow)',
7-
output: 'var(--my-shadow)',
7+
input: ['text-shadow', 'var(--my-shadow)'],
8+
output: 'text-shadow: var(--my-shadow);',
89
},
910
{
10-
input: '1px var(--my-shadow)',
11-
output: '1px var(--my-shadow)',
11+
input: ['text-shadow', '1px var(--my-shadow)'],
12+
output: 'text-shadow: 1px var(--my-shadow);',
1213
},
1314
{
14-
input: '1px 1px var(--my-color)',
15-
output: '1px 1px var(--tw-shadow-color, var(--my-color))',
15+
input: ['text-shadow', '1px 1px var(--my-color)'],
16+
output: 'text-shadow: 1px 1px var(--tw-shadow-color, var(--my-color));',
1617
},
1718
{
18-
input: '0 0 0 var(--my-color)',
19-
output: '0 0 0 var(--tw-shadow-color, var(--my-color))',
19+
input: ['text-shadow', '0 0 0 var(--my-color)'],
20+
output: 'text-shadow: 0 0 0 var(--tw-shadow-color, var(--my-color));',
2021
},
2122
{
22-
input: '1px 2px',
23-
output: '1px 2px var(--tw-shadow-color, currentcolor)',
23+
input: ['text-shadow', '1px 2px'],
24+
output: 'text-shadow: 1px 2px var(--tw-shadow-color, currentcolor);',
2425
},
2526
{
26-
input: '1px 2px 3px',
27-
output: '1px 2px 3px var(--tw-shadow-color, currentcolor)',
27+
input: ['text-shadow', '1px 2px 3px'],
28+
output: 'text-shadow: 1px 2px 3px var(--tw-shadow-color, currentcolor);',
2829
},
2930
{
30-
input: '1px 2px 3px 4px',
31-
output: '1px 2px 3px 4px var(--tw-shadow-color, currentcolor)',
31+
input: ['text-shadow', '1px 2px 3px 4px'],
32+
output: 'text-shadow: 1px 2px 3px 4px var(--tw-shadow-color, currentcolor);',
3233
},
3334
{
34-
input: ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
35-
output: [
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: ${[
3640
'var(--my-shadow)',
3741
'1px 1px var(--tw-shadow-color, var(--my-color))',
3842
'0 0 1px var(--tw-shadow-color, var(--my-color))',
39-
].join(', '),
43+
].join(', ')};`,
4044
},
4145
{
42-
input: '1px 1px var(--my-color)',
46+
input: ['text-shadow', '1px 1px var(--my-color)'],
4347
intensity: '50%',
44-
output: '1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))',
48+
output: 'text-shadow: 1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%));',
4549
},
4650
{
47-
input: '1px 2px 3px 4px',
51+
input: ['text-shadow', '1px 2px 3px 4px'],
4852
intensity: '50%',
49-
output: '1px 2px 3px 4px var(--tw-shadow-color, oklab(from currentcolor l a b / 50%))',
53+
output:
54+
'text-shadow: 1px 2px 3px 4px var(--tw-shadow-color, oklab(from currentcolor l a b / 50%));',
5055
},
5156
{
52-
input: ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
57+
input: [
58+
'text-shadow',
59+
['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
60+
],
5361
intensity: '50%',
54-
output: [
62+
output: `text-shadow: ${[
5563
'var(--my-shadow)',
5664
'1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))',
5765
'0 0 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))',
58-
].join(', '),
66+
].join(', ')};`,
5967
},
6068
]
6169

6270
it.each(table)(
6371
'should replace the color of box-shadow $input with $output',
6472
({ input, intensity = null, output }) => {
6573
let parsed = replaceShadowColors(
66-
input,
74+
input[0],
75+
input[1],
6776
intensity,
6877
(color) => `var(--tw-shadow-color, ${color})`,
6978
)
70-
expect(parsed).toEqual(output)
79+
expect(toCss(parsed).trim()).toEqual(output)
7180
},
7281
)

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
import { decl, type AstNode } from '../ast'
12
import { replaceAlpha } from '../utilities'
23
import { segment } from './segment'
34

45
const KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
56
const LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
67

78
export function replaceShadowColors(
9+
property: string,
810
input: string,
911
intensity: string | null | undefined,
1012
replacement: (color: string) => string,
11-
) {
13+
prefix: string = '',
14+
): AstNode[] {
1215
let shadows = segment(input, ',').map((shadow) => {
1316
shadow = shadow.trim()
1417
let parts = segment(shadow, ' ').filter((part) => part.trim() !== '')
@@ -49,5 +52,5 @@ export function replaceShadowColors(
4952
return `${shadow} ${replacementColor}`
5053
})
5154

52-
return shadows.join(', ')
55+
return [decl(property, `${prefix}${shadows.join(', ')}`)]
5356
}

0 commit comments

Comments
 (0)