Skip to content

Commit 779d8ae

Browse files
aiai
committed
Fix tests
1 parent d61a31a commit 779d8ae

File tree

3 files changed

+58
-19
lines changed

3 files changed

+58
-19
lines changed

‎index.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ function findMatchingParen(str, startIndex) {
4444
else if (str[i] === ')') depth--
4545
if (depth === 0) return i
4646
}
47+
/* c8 ignore next */
4748
return -1
4849
}
4950

@@ -55,14 +56,9 @@ module.exports = () => {
5556
let index = 0
5657

5758
let funcStart = result.indexOf('--smooth-shadow(', index)
58-
for (
59-
;
60-
funcStart !== -1;
61-
funcStart = result.indexOf('--smooth-shadow(', index)
62-
) {
59+
while (funcStart !== -1) {
6360
let parenStart = funcStart + '--smooth-shadow('.length - 1
6461
let parenEnd = findMatchingParen(result, parenStart)
65-
6662
if (parenEnd === -1) break
6763

6864
let paramString = result.substring(parenStart + 1, parenEnd)
@@ -77,15 +73,16 @@ module.exports = () => {
7773
let [color, size, spread = '3'] = params
7874

7975
let replacement =
80-
`0 calc(${size} / ${spread}) calc(${size} / ${spread} * 2) rgb(from ${color} r g b / 0.25), ` +
81-
`0 calc(${size} / ${spread} * 2) calc(${size} / ${spread} * 3) rgb(from ${color} r g b / 0.18), ` +
82-
`0 calc(${size} / ${spread} * 3) calc(${size} / ${spread} * 4) rgb(from ${color} r g b / 0.12)`
76+
`0 calc(${size} / ${spread}) calc(${size} / ${spread} * 2) oklch(from ${color} l c h / 0.25), ` +
77+
`0 calc(${size} / ${spread} * 2) calc(${size} / ${spread} * 3) oklch(from ${color} l c h / 0.18), ` +
78+
`0 calc(${size} / ${spread} * 3) calc(${size} / ${spread} * 4) oklch(from ${color} l c h / 0.12)`
8379

8480
result =
8581
result.substring(0, funcStart) +
8682
replacement +
8783
result.substring(parenEnd + 1)
8884
index = funcStart + replacement.length
85+
funcStart = result.indexOf('--smooth-shadow(', index)
8986
}
9087

9188
decl.value = result

‎index.test.js‎

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,49 +14,49 @@ function run(input, output, opts) {
1414
test('replaces --smooth-shadow with layered box shadows', () => {
1515
run(
1616
'.card { box-shadow: --smooth-shadow(#000, 10px, 2); }',
17-
'.card { box-shadow: 0 calc(10px / 2) calc(10px / 2 * 2) rgb(from #000 r g b / 0.25), 0 calc(10px / 2 * 2) calc(10px / 2 * 3) rgb(from #000 r g b / 0.18), 0 calc(10px / 2 * 3) calc(10px / 2 * 4) rgb(from #000 r g b / 0.12); }'
17+
'.card { box-shadow: 0 calc(10px / 2) calc(10px / 2 * 2) oklch(from #000 l c h / 0.25), 0 calc(10px / 2 * 2) calc(10px / 2 * 3) oklch(from #000 l c h / 0.18), 0 calc(10px / 2 * 3) calc(10px / 2 * 4) oklch(from #000 l c h / 0.12); }'
1818
)
1919
})
2020

2121
test('handles CSS variables as parameters', () => {
2222
run(
2323
'.element { box-shadow: --smooth-shadow(var(--shadow-color), var(--shadow-size), var(--shadow-spread)); }',
24-
'.element { box-shadow: 0 calc(var(--shadow-size) / var(--shadow-spread)) calc(var(--shadow-size) / var(--shadow-spread) * 2) rgb(from var(--shadow-color) r g b / 0.25), 0 calc(var(--shadow-size) / var(--shadow-spread) * 2) calc(var(--shadow-size) / var(--shadow-spread) * 3) rgb(from var(--shadow-color) r g b / 0.18), 0 calc(var(--shadow-size) / var(--shadow-spread) * 3) calc(var(--shadow-size) / var(--shadow-spread) * 4) rgb(from var(--shadow-color) r g b / 0.12); }'
24+
'.element { box-shadow: 0 calc(var(--shadow-size) / var(--shadow-spread)) calc(var(--shadow-size) / var(--shadow-spread) * 2) oklch(from var(--shadow-color) l c h / 0.25), 0 calc(var(--shadow-size) / var(--shadow-spread) * 2) calc(var(--shadow-size) / var(--shadow-spread) * 3) oklch(from var(--shadow-color) l c h / 0.18), 0 calc(var(--shadow-size) / var(--shadow-spread) * 3) calc(var(--shadow-size) / var(--shadow-spread) * 4) oklch(from var(--shadow-color) l c h / 0.12); }'
2525
)
2626
})
2727

2828
test('uses default spread value of 3 when omitted', () => {
2929
run(
3030
'.card { box-shadow: --smooth-shadow(#000, 12px); }',
31-
'.card { box-shadow: 0 calc(12px / 3) calc(12px / 3 * 2) rgb(from #000 r g b / 0.25), 0 calc(12px / 3 * 2) calc(12px / 3 * 3) rgb(from #000 r g b / 0.18), 0 calc(12px / 3 * 3) calc(12px / 3 * 4) rgb(from #000 r g b / 0.12); }'
31+
'.card { box-shadow: 0 calc(12px / 3) calc(12px / 3 * 2) oklch(from #000 l c h / 0.25), 0 calc(12px / 3 * 2) calc(12px / 3 * 3) oklch(from #000 l c h / 0.18), 0 calc(12px / 3 * 3) calc(12px / 3 * 4) oklch(from #000 l c h / 0.12); }'
3232
)
3333
})
3434

3535
test('handles mix of two and three parameter calls', () => {
3636
run(
3737
'.mixed { box-shadow: --smooth-shadow(#000, 6px), --smooth-shadow(#fff, 4px, 2); }',
38-
'.mixed { box-shadow: 0 calc(6px / 3) calc(6px / 3 * 2) rgb(from #000 r g b / 0.25), 0 calc(6px / 3 * 2) calc(6px / 3 * 3) rgb(from #000 r g b / 0.18), 0 calc(6px / 3 * 3) calc(6px / 3 * 4) rgb(from #000 r g b / 0.12), 0 calc(4px / 2) calc(4px / 2 * 2) rgb(from #fff r g b / 0.25), 0 calc(4px / 2 * 2) calc(4px / 2 * 3) rgb(from #fff r g b / 0.18), 0 calc(4px / 2 * 3) calc(4px / 2 * 4) rgb(from #fff r g b / 0.12); }'
38+
'.mixed { box-shadow: 0 calc(6px / 3) calc(6px / 3 * 2) oklch(from #000 l c h / 0.25), 0 calc(6px / 3 * 2) calc(6px / 3 * 3) oklch(from #000 l c h / 0.18), 0 calc(6px / 3 * 3) calc(6px / 3 * 4) oklch(from #000 l c h / 0.12), 0 calc(4px / 2) calc(4px / 2 * 2) oklch(from #fff l c h / 0.25), 0 calc(4px / 2 * 2) calc(4px / 2 * 3) oklch(from #fff l c h / 0.18), 0 calc(4px / 2 * 3) calc(4px / 2 * 4) oklch(from #fff l c h / 0.12); }'
3939
)
4040
})
4141

4242
test('handles multiple --smooth-shadow calls in same declaration', () => {
4343
run(
4444
'.card { box-shadow: --smooth-shadow(#000, 5px, 1), inset --smooth-shadow(#fff, 2px, 1); }',
45-
'.card { box-shadow: 0 calc(5px / 1) calc(5px / 1 * 2) rgb(from #000 r g b / 0.25), 0 calc(5px / 1 * 2) calc(5px / 1 * 3) rgb(from #000 r g b / 0.18), 0 calc(5px / 1 * 3) calc(5px / 1 * 4) rgb(from #000 r g b / 0.12), inset 0 calc(2px / 1) calc(2px / 1 * 2) rgb(from #fff r g b / 0.25), 0 calc(2px / 1 * 2) calc(2px / 1 * 3) rgb(from #fff r g b / 0.18), 0 calc(2px / 1 * 3) calc(2px / 1 * 4) rgb(from #fff r g b / 0.12); }'
45+
'.card { box-shadow: 0 calc(5px / 1) calc(5px / 1 * 2) oklch(from #000 l c h / 0.25), 0 calc(5px / 1 * 2) calc(5px / 1 * 3) oklch(from #000 l c h / 0.18), 0 calc(5px / 1 * 3) calc(5px / 1 * 4) oklch(from #000 l c h / 0.12), inset 0 calc(2px / 1) calc(2px / 1 * 2) oklch(from #fff l c h / 0.25), 0 calc(2px / 1 * 2) calc(2px / 1 * 3) oklch(from #fff l c h / 0.18), 0 calc(2px / 1 * 3) calc(2px / 1 * 4) oklch(from #fff l c h / 0.12); }'
4646
)
4747
})
4848

4949
test('works with different color formats', () => {
5050
run(
5151
'.test { box-shadow: --smooth-shadow(rgb(255, 0, 0), 8px, 2); }',
52-
'.test { box-shadow: 0 calc(8px / 2) calc(8px / 2 * 2) rgb(from rgb(255, 0, 0) r g b / 0.25), 0 calc(8px / 2 * 2) calc(8px / 2 * 3) rgb(from rgb(255, 0, 0) r g b / 0.18), 0 calc(8px / 2 * 3) calc(8px / 2 * 4) rgb(from rgb(255, 0, 0) r g b / 0.12); }'
52+
'.test { box-shadow: 0 calc(8px / 2) calc(8px / 2 * 2) oklch(from rgb(255, 0, 0) l c h / 0.25), 0 calc(8px / 2 * 2) calc(8px / 2 * 3) oklch(from rgb(255, 0, 0) l c h / 0.18), 0 calc(8px / 2 * 3) calc(8px / 2 * 4) oklch(from rgb(255, 0, 0) l c h / 0.12); }'
5353
)
5454
})
5555

5656
test('handles decimal values', () => {
5757
run(
5858
'.button { box-shadow: --smooth-shadow(#333, 4.5px, 1.5); }',
59-
'.button { box-shadow: 0 calc(4.5px / 1.5) calc(4.5px / 1.5 * 2) rgb(from #333 r g b / 0.25), 0 calc(4.5px / 1.5 * 2) calc(4.5px / 1.5 * 3) rgb(from #333 r g b / 0.18), 0 calc(4.5px / 1.5 * 3) calc(4.5px / 1.5 * 4) rgb(from #333 r g b / 0.12); }'
59+
'.button { box-shadow: 0 calc(4.5px / 1.5) calc(4.5px / 1.5 * 2) oklch(from #333 l c h / 0.25), 0 calc(4.5px / 1.5 * 2) calc(4.5px / 1.5 * 3) oklch(from #333 l c h / 0.18), 0 calc(4.5px / 1.5 * 3) calc(4.5px / 1.5 * 4) oklch(from #333 l c h / 0.12); }'
6060
)
6161
})
6262

@@ -70,7 +70,7 @@ test('leaves other declarations unchanged', () => {
7070
test('works in other properties besides box-shadow', () => {
7171
run(
7272
'.custom { filter: drop-shadow(--smooth-shadow(#000, 3px, 1)); }',
73-
'.custom { filter: drop-shadow(0 calc(3px / 1) calc(3px / 1 * 2) rgb(from #000 r g b / 0.25), 0 calc(3px / 1 * 2) calc(3px / 1 * 3) rgb(from #000 r g b / 0.18), 0 calc(3px / 1 * 3) calc(3px / 1 * 4) rgb(from #000 r g b / 0.12)); }'
73+
'.custom { filter: drop-shadow(0 calc(3px / 1) calc(3px / 1 * 2) oklch(from #000 l c h / 0.25), 0 calc(3px / 1 * 2) calc(3px / 1 * 3) oklch(from #000 l c h / 0.18), 0 calc(3px / 1 * 3) calc(3px / 1 * 4) oklch(from #000 l c h / 0.12)); }'
7474
)
7575
})
7676

@@ -87,3 +87,45 @@ test('throws error for too many parameters', () => {
8787
postcss([plugin]).process(input, { from: undefined }).css
8888
}, '--smooth-shadow() requires 2 or 3 parameters')
8989
})
90+
91+
test('handles quoted parameters with single quotes', () => {
92+
run(
93+
`.card { box-shadow: --smooth-shadow('rgba(255, 0, 0, 0.5)', 10px); }`,
94+
`.card { box-shadow: 0 calc(10px / 3) calc(10px / 3 * 2) oklch(from 'rgba(255, 0, 0, 0.5)' l c h / 0.25), 0 calc(10px / 3 * 2) calc(10px / 3 * 3) oklch(from 'rgba(255, 0, 0, 0.5)' l c h / 0.18), 0 calc(10px / 3 * 3) calc(10px / 3 * 4) oklch(from 'rgba(255, 0, 0, 0.5)' l c h / 0.12); }`
95+
)
96+
})
97+
98+
test('handles quoted parameters with double quotes', () => {
99+
run(
100+
`.card { box-shadow: --smooth-shadow("rgba(0, 255, 0, 0.8)", 8px, 2); }`,
101+
`.card { box-shadow: 0 calc(8px / 2) calc(8px / 2 * 2) oklch(from "rgba(0, 255, 0, 0.8)" l c h / 0.25), 0 calc(8px / 2 * 2) calc(8px / 2 * 3) oklch(from "rgba(0, 255, 0, 0.8)" l c h / 0.18), 0 calc(8px / 2 * 3) calc(8px / 2 * 4) oklch(from "rgba(0, 255, 0, 0.8)" l c h / 0.12); }`
102+
)
103+
})
104+
105+
test('handles complex nested functions in parameters', () => {
106+
run(
107+
'.card { box-shadow: --smooth-shadow(calc(10px + 5px), min(20px, 30px), 2); }',
108+
'.card { box-shadow: 0 calc(min(20px, 30px) / 2) calc(min(20px, 30px) / 2 * 2) oklch(from calc(10px + 5px) l c h / 0.25), 0 calc(min(20px, 30px) / 2 * 2) calc(min(20px, 30px) / 2 * 3) oklch(from calc(10px + 5px) l c h / 0.18), 0 calc(min(20px, 30px) / 2 * 3) calc(min(20px, 30px) / 2 * 4) oklch(from calc(10px + 5px) l c h / 0.12); }'
109+
)
110+
})
111+
112+
test('handles quoted strings with commas inside', () => {
113+
run(
114+
`.card { box-shadow: --smooth-shadow("rgb(255, 0, 0)", 10px); }`,
115+
`.card { box-shadow: 0 calc(10px / 3) calc(10px / 3 * 2) oklch(from "rgb(255, 0, 0)" l c h / 0.25), 0 calc(10px / 3 * 2) calc(10px / 3 * 3) oklch(from "rgb(255, 0, 0)" l c h / 0.18), 0 calc(10px / 3 * 3) calc(10px / 3 * 4) oklch(from "rgb(255, 0, 0)" l c h / 0.12); }`
116+
)
117+
})
118+
119+
test('handles declarations without --smooth-shadow', () => {
120+
run(
121+
'.card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }',
122+
'.card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }'
123+
)
124+
})
125+
126+
test('handles deeply nested parentheses in parameters', () => {
127+
run(
128+
'.card { box-shadow: --smooth-shadow(hsl(calc(180deg + 45deg), calc(50% + 10%), calc(25% + 5%)), max(10px, min(20px, 15px)), 2); }',
129+
'.card { box-shadow: 0 calc(max(10px, min(20px, 15px)) / 2) calc(max(10px, min(20px, 15px)) / 2 * 2) oklch(from hsl(calc(180deg + 45deg), calc(50% + 10%), calc(25% + 5%)) l c h / 0.25), 0 calc(max(10px, min(20px, 15px)) / 2 * 2) calc(max(10px, min(20px, 15px)) / 2 * 3) oklch(from hsl(calc(180deg + 45deg), calc(50% + 10%), calc(25% + 5%)) l c h / 0.18), 0 calc(max(10px, min(20px, 15px)) / 2 * 3) calc(max(10px, min(20px, 15px)) / 2 * 4) oklch(from hsl(calc(180deg + 45deg), calc(50% + 10%), calc(25% + 5%)) l c h / 0.12); }'
130+
)
131+
})

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
],
1212
"scripts": {
1313
"unit": "node --test index.test.js",
14-
"test:coverage": "c8 pnpm unit",
14+
"test:coverage": "c8 node --test index.test.js",
1515
"test:lint": "eslint .",
1616
"test": "pnpm run /^test:/"
1717
},
@@ -53,7 +53,7 @@
5353
},
5454
"c8": {
5555
"exclude": [
56-
"**/*.test.*"
56+
"*.test.*"
5757
],
5858
"lines": 100,
5959
"reporter": "lcov",

0 commit comments

Comments
 (0)