Skip to content

Commit c6c81d3

Browse files
thecrypticacethecrypticace
committed
Add drop-shadow-* color support
1 parent f772266 commit c6c81d3

File tree

3 files changed

+200
-17
lines changed

3 files changed

+200
-17
lines changed

‎packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3984,8 +3984,74 @@ exports[`getClassList 1`] = `
39843984
"divide-y-4",
39853985
"divide-y-8",
39863986
"divide-y-reverse",
3987+
"drop-shadow-current",
3988+
"drop-shadow-current/0",
3989+
"drop-shadow-current/5",
3990+
"drop-shadow-current/10",
3991+
"drop-shadow-current/15",
3992+
"drop-shadow-current/20",
3993+
"drop-shadow-current/25",
3994+
"drop-shadow-current/30",
3995+
"drop-shadow-current/35",
3996+
"drop-shadow-current/40",
3997+
"drop-shadow-current/45",
3998+
"drop-shadow-current/50",
3999+
"drop-shadow-current/55",
4000+
"drop-shadow-current/60",
4001+
"drop-shadow-current/65",
4002+
"drop-shadow-current/70",
4003+
"drop-shadow-current/75",
4004+
"drop-shadow-current/80",
4005+
"drop-shadow-current/85",
4006+
"drop-shadow-current/90",
4007+
"drop-shadow-current/95",
4008+
"drop-shadow-current/100",
4009+
"drop-shadow-inherit",
4010+
"drop-shadow-inherit/0",
4011+
"drop-shadow-inherit/5",
4012+
"drop-shadow-inherit/10",
4013+
"drop-shadow-inherit/15",
4014+
"drop-shadow-inherit/20",
4015+
"drop-shadow-inherit/25",
4016+
"drop-shadow-inherit/30",
4017+
"drop-shadow-inherit/35",
4018+
"drop-shadow-inherit/40",
4019+
"drop-shadow-inherit/45",
4020+
"drop-shadow-inherit/50",
4021+
"drop-shadow-inherit/55",
4022+
"drop-shadow-inherit/60",
4023+
"drop-shadow-inherit/65",
4024+
"drop-shadow-inherit/70",
4025+
"drop-shadow-inherit/75",
4026+
"drop-shadow-inherit/80",
4027+
"drop-shadow-inherit/85",
4028+
"drop-shadow-inherit/90",
4029+
"drop-shadow-inherit/95",
4030+
"drop-shadow-inherit/100",
39874031
"drop-shadow-none",
39884032
"drop-shadow-sm",
4033+
"drop-shadow-transparent",
4034+
"drop-shadow-transparent/0",
4035+
"drop-shadow-transparent/5",
4036+
"drop-shadow-transparent/10",
4037+
"drop-shadow-transparent/15",
4038+
"drop-shadow-transparent/20",
4039+
"drop-shadow-transparent/25",
4040+
"drop-shadow-transparent/30",
4041+
"drop-shadow-transparent/35",
4042+
"drop-shadow-transparent/40",
4043+
"drop-shadow-transparent/45",
4044+
"drop-shadow-transparent/50",
4045+
"drop-shadow-transparent/55",
4046+
"drop-shadow-transparent/60",
4047+
"drop-shadow-transparent/65",
4048+
"drop-shadow-transparent/70",
4049+
"drop-shadow-transparent/75",
4050+
"drop-shadow-transparent/80",
4051+
"drop-shadow-transparent/85",
4052+
"drop-shadow-transparent/90",
4053+
"drop-shadow-transparent/95",
4054+
"drop-shadow-transparent/100",
39894055
"duration-75",
39904056
"duration-100",
39914057
"duration-150",

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18960,8 +18960,6 @@ test('filter', async () => {
1896018960
).toMatchInlineSnapshot(`
1896118961
":root, :host {
1896218962
--blur-xl: 24px;
18963-
--drop-shadow: 0 1px 1px #0000000d;
18964-
--drop-shadow-xl: 0 9px 7px #0000001a;
1896518963
}
1896618964

1896718965
.blur-\\[4px\\] {
@@ -19000,17 +18998,17 @@ test('filter', async () => {
1900018998
}
1900118999

1900219000
.drop-shadow {
19003-
--tw-drop-shadow: drop-shadow(var(--drop-shadow));
19001+
--tw-drop-shadow: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d));
1900419002
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, );
1900519003
}
1900619004

1900719005
.drop-shadow-\\[0_0_red\\] {
19008-
--tw-drop-shadow: drop-shadow(0 0 red);
19006+
--tw-drop-shadow: drop-shadow(0 0 var(--tw-drop-shadow-color, red));
1900919007
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, );
1901019008
}
1901119009

1901219010
.drop-shadow-xl {
19013-
--tw-drop-shadow: drop-shadow(var(--drop-shadow-xl));
19011+
--tw-drop-shadow: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a));
1901419012
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, );
1901519013
}
1901619014

@@ -19159,6 +19157,11 @@ test('filter', async () => {
1915919157
@property --tw-drop-shadow {
1916019158
syntax: "*";
1916119159
inherits: false
19160+
}
19161+
19162+
@property --tw-drop-shadow-color {
19163+
syntax: "*";
19164+
inherits: false
1916219165
}"
1916319166
`)
1916419167
expect(

‎packages/tailwindcss/src/utilities.ts‎

Lines changed: 126 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3921,6 +3921,8 @@ export function createUtilities(theme: Theme) {
39213921
property('--tw-saturate'),
39223922
property('--tw-sepia'),
39233923
property('--tw-drop-shadow'),
3924+
property('--tw-drop-shadow-color'),
3925+
property('--tw-drop-shadow-alpha', '100%', '<percentage>'),
39243926
])
39253927
}
39263928

@@ -4313,20 +4315,132 @@ export function createUtilities(theme: Theme) {
43134315
['--tw-drop-shadow', ' '],
43144316
['filter', cssFilterValue],
43154317
])
4316-
functionalUtility('drop-shadow', {
4317-
themeKeys: ['--drop-shadow'],
4318-
handle: (value) => [
4319-
filterProperties(),
4320-
decl(
4321-
'--tw-drop-shadow',
4322-
segment(value, ',')
4323-
.map((v) => `drop-shadow(${v})`)
4324-
.join(' '),
4325-
),
4326-
decl('filter', cssFilterValue),
4327-
],
4318+
4319+
utilities.functional('drop-shadow', (candidate) => {
4320+
let alpha: string | undefined
4321+
4322+
if (candidate.modifier) {
4323+
if (candidate.modifier.kind === 'arbitrary') {
4324+
alpha = candidate.modifier.value
4325+
} else {
4326+
if (isPositiveInteger(candidate.modifier.value)) {
4327+
alpha = `${candidate.modifier.value}%`
4328+
}
4329+
}
4330+
}
4331+
4332+
if (!candidate.value) {
4333+
let value = theme.get(['--drop-shadow'])
4334+
if (value === null) return
4335+
4336+
return [
4337+
filterProperties(),
4338+
decl('--tw-drop-shadow-alpha', alpha),
4339+
decl(
4340+
'--tw-drop-shadow',
4341+
segment(value, ',')
4342+
.map(
4343+
(v) =>
4344+
`drop-shadow(${replaceShadowColors(
4345+
v,
4346+
alpha,
4347+
(color) => `var(--tw-drop-shadow-color, ${color})`,
4348+
)})`,
4349+
)
4350+
.join(' '),
4351+
),
4352+
decl('filter', cssFilterValue),
4353+
]
4354+
}
4355+
4356+
if (candidate.value.kind === 'arbitrary') {
4357+
let value: string | null = candidate.value.value
4358+
let type = candidate.value.dataType ?? inferDataType(value, ['color'])
4359+
4360+
switch (type) {
4361+
case 'color': {
4362+
value = asColor(value, candidate.modifier, theme)
4363+
if (value === null) return
4364+
return [
4365+
filterProperties(),
4366+
decl('--tw-drop-shadow-color', withAlpha(value, 'var(--tw-drop-shadow-alpha)')),
4367+
]
4368+
}
4369+
default: {
4370+
if (candidate.modifier && !alpha) return
4371+
4372+
return [
4373+
filterProperties(),
4374+
decl('--tw-drop-shadow-alpha', alpha),
4375+
decl(
4376+
'--tw-drop-shadow',
4377+
segment(value, ',')
4378+
.map(
4379+
(v) =>
4380+
`drop-shadow(${replaceShadowColors(
4381+
v,
4382+
alpha,
4383+
(color) => `var(--tw-drop-shadow-color, ${color})`,
4384+
)})`,
4385+
)
4386+
.join(' '),
4387+
),
4388+
decl('filter', cssFilterValue),
4389+
]
4390+
}
4391+
}
4392+
}
4393+
4394+
// Shadow size
4395+
{
4396+
let value = theme.get([`--drop-shadow-${candidate.value.value}`])
4397+
if (value) {
4398+
if (candidate.modifier && !alpha) return
4399+
4400+
return [
4401+
filterProperties(),
4402+
decl('--tw-drop-shadow-alpha', alpha),
4403+
decl(
4404+
'--tw-drop-shadow',
4405+
segment(value, ',')
4406+
.map(
4407+
(v) =>
4408+
`drop-shadow(${replaceShadowColors(
4409+
v,
4410+
alpha,
4411+
(color) => `var(--tw-drop-shadow-color, ${color})`,
4412+
)})`,
4413+
)
4414+
.join(' '),
4415+
),
4416+
decl('filter', cssFilterValue),
4417+
]
4418+
}
4419+
}
4420+
4421+
// Shadow color
4422+
{
4423+
let value = resolveThemeColor(candidate, theme, ['--drop-shadow-color', '--color'])
4424+
if (value) {
4425+
return [
4426+
filterProperties(),
4427+
decl('--tw-drop-shadow-color', withAlpha(value, 'var(--tw-drop-shadow-alpha)')),
4428+
]
4429+
}
4430+
}
43284431
})
43294432

4433+
suggest('drop-shadow', () => [
4434+
{
4435+
values: ['current', 'inherit', 'transparent'],
4436+
valueThemeKeys: ['--drop-shadow-color', '--color'],
4437+
modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
4438+
},
4439+
{
4440+
valueThemeKeys: ['--drop-shadow'],
4441+
},
4442+
])
4443+
43304444
functionalUtility('backdrop-opacity', {
43314445
themeKeys: ['--backdrop-opacity', '--opacity'],
43324446
handleBareValue: ({ value }) => {

0 commit comments

Comments
 (0)