Skip to content

Commit e45302b

Browse files
Fix drop shadow filters with multiple shadows (#17515)
It seems that I broke support for multiple drop-shadow filters when `@theme inline` was used in v4.1. This PR fixes that by segmenting the drop shadow value on top-level commas and wrapping each segment with `drop-shadow(…)` like we did in v4.0.
1 parent 3e41e9f commit e45302b

File tree

4 files changed

+67
-4
lines changed

4 files changed

+67
-4
lines changed

CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1111

1212
- Don't rely on `@layer base` for the `@property` polyfills ([#17506](https://github.com/tailwindlabs/tailwindcss/pull/17506))
1313
- Fix multi-value inset shadow ([#17523](https://github.com/tailwindlabs/tailwindcss/pull/17523))
14+
- Fix `drop-shadow` utility ([#17515](https://github.com/tailwindlabs/tailwindcss/pull/17515))
15+
- Fix `drop-shadow-*` utilities that use multiple shadows in `@theme inline` ([#17515](https://github.com/tailwindlabs/tailwindcss/pull/17515))
1416

1517
## [4.1.1] - 2025-04-02
1618

packages/tailwindcss/src/utilities.test.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20366,6 +20366,9 @@ test('filter', async () => {
2036620366
--drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
2036720367
--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
2036820368
}
20369+
@theme inline {
20370+
--drop-shadow-multi: 0 1px 1px rgb(0 0 0 / 0.05), 0 9px 7px rgb(0 0 0 / 0.1);
20371+
}
2036920372
@tailwind utilities;
2037020373
`,
2037120374
[
@@ -20392,6 +20395,7 @@ test('filter', async () => {
2039220395
'drop-shadow',
2039320396
'drop-shadow/25',
2039420397
'drop-shadow-xl',
20398+
'drop-shadow-multi',
2039520399
'drop-shadow-[0_0_red]',
2039620400
'drop-shadow-red-500',
2039720401
'drop-shadow-red-500/50',
@@ -20486,6 +20490,12 @@ test('filter', async () => {
2048620490
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, );
2048720491
}
2048820492

20493+
.drop-shadow-multi {
20494+
--tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d)) drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a));
20495+
--tw-drop-shadow: drop-shadow(0 1px 1px #0000000d) drop-shadow(0 9px 7px #0000001a);
20496+
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, );
20497+
}
20498+
2048920499
.drop-shadow-xl {
2049020500
--tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a));
2049120501
--tw-drop-shadow: drop-shadow(var(--drop-shadow-xl));

packages/tailwindcss/src/utilities.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4298,7 +4298,8 @@ export function createUtilities(theme: Theme) {
42984298

42994299
if (!candidate.value) {
43004300
let value = theme.get(['--drop-shadow'])
4301-
if (value === null) return
4301+
let resolved = theme.resolve(null, ['--drop-shadow'])
4302+
if (value === null || resolved === null) return
43024303

43034304
return [
43044305
filterProperties(),
@@ -4309,7 +4310,12 @@ export function createUtilities(theme: Theme) {
43094310
alpha,
43104311
(color) => `var(--tw-drop-shadow-color, ${color})`,
43114312
),
4312-
decl('--tw-drop-shadow', `drop-shadow(${theme.resolve(null, ['--drop-shadow'])})`),
4313+
decl(
4314+
'--tw-drop-shadow',
4315+
segment(resolved, ',')
4316+
.map((value) => `drop-shadow(${value})`)
4317+
.join(' '),
4318+
),
43134319
decl('filter', cssFilterValue),
43144320
]
43154321
}
@@ -4350,7 +4356,8 @@ export function createUtilities(theme: Theme) {
43504356
// Shadow size
43514357
{
43524358
let value = theme.get([`--drop-shadow-${candidate.value.value}`])
4353-
if (value) {
4359+
let resolved = theme.resolve(candidate.value.value, ['--drop-shadow'])
4360+
if (value && resolved) {
43544361
if (candidate.modifier && !alpha) return
43554362

43564363
if (alpha) {
@@ -4379,7 +4386,9 @@ export function createUtilities(theme: Theme) {
43794386
),
43804387
decl(
43814388
'--tw-drop-shadow',
4382-
`drop-shadow(${theme.resolve(candidate.value.value, ['--drop-shadow'])})`,
4389+
segment(resolved, ',')
4390+
.map((value) => `drop-shadow(${value})`)
4391+
.join(' '),
43834392
),
43844393
decl('filter', cssFilterValue),
43854394
]

packages/tailwindcss/tests/ui.spec.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1863,6 +1863,48 @@ test('drop shadow colors', async ({ page }) => {
18631863
])
18641864
})
18651865

1866+
test('multiple drop shadow filters with `@theme inline`', async ({ page }) => {
1867+
let { getPropertyList } = await render(
1868+
page,
1869+
html`
1870+
<div id="a" class="drop-shadow-inlined"></div>
1871+
<div id="b" class="drop-shadow-inlined drop-shadow-red"></div>
1872+
<div style="--drop-shadow-var: 0 20px 20px rgb(0 0 0 / 0.75)">
1873+
<div id="c" class="drop-shadow-var"></div>
1874+
</div>
1875+
<div style="--drop-shadow-var: 0 10px 10px rgb(0 0 0 / 0.75), 0 20px 20px rgb(0 0 0 / 0.75)">
1876+
<div id="d" class="drop-shadow-var"></div>
1877+
</div>
1878+
`,
1879+
css`
1880+
@theme {
1881+
--drop-shadow-var: 0 1px 1px rgb(0 0 0 / 0.5), 0 10px 10px rgb(0 0 0 / 0.25);
1882+
}
1883+
@theme inline {
1884+
--drop-shadow-inlined: 0 1px 1px rgb(0 0 0 / 0.5), 0 10px 10px rgb(0 0 0 / 0.25);
1885+
}
1886+
`,
1887+
)
1888+
1889+
expect(await getPropertyList('#a', 'filter')).toEqual([
1890+
'drop-shadow(rgba(0, 0, 0, 0.5) 0px 1px 1px) drop-shadow(rgba(0, 0, 0, 0.25) 0px 10px 10px)',
1891+
])
1892+
1893+
expect(await getPropertyList('#b', 'filter')).toEqual([
1894+
expect.stringMatching(
1895+
/drop-shadow\(oklab\(0\.627\d+ 0\.224\d+ 0\.125\d+\) 0px 1px 1px\) drop-shadow\(oklab\(0\.627\d+ 0\.224\d+ 0\.125\d+\) 0px 10px 10px\)/,
1896+
),
1897+
])
1898+
1899+
expect(await getPropertyList('#c', 'filter')).toEqual([
1900+
'drop-shadow(rgba(0, 0, 0, 0.75) 0px 20px 20px)',
1901+
])
1902+
1903+
// Multiple values are only supported with `@theme inline` because otherwise we use var(…)
1904+
// inside of drop-shadow(…) which can only ever be a single shadow
1905+
expect(await getPropertyList('#d', 'filter')).toEqual(['none'])
1906+
})
1907+
18661908
test('outline style is optional', async ({ page }) => {
18671909
let { getPropertyValue } = await render(
18681910
page,

0 commit comments

Comments
 (0)