Skip to content

Commit 941f713

Browse files
philipp-spiessphilipp-spiess
committed
Revert changes to replaceShadowColors(…) and move polyfill closer to utilities
1 parent 5b4333b commit 941f713

File tree

4 files changed

+181
-249
lines changed

4 files changed

+181
-249
lines changed

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22588,12 +22588,14 @@ test('text-shadow', async () => {
2258822588
'text-shadow-sm',
2258922589
'text-shadow-none',
2259022590
'text-shadow-[12px_12px_#0088cc]',
22591+
'text-shadow-[12px_12px_var(--value)]',
2259122592
'text-shadow-[10px_10px]',
2259222593
'text-shadow-[var(--value)]',
2259322594
'text-shadow-[shadow:var(--value)]',
2259422595

2259522596
'text-shadow-sm/25',
2259622597
'text-shadow-[12px_12px_#0088cc]/25',
22598+
'text-shadow-[12px_12px_var(--value)]/25',
2259722599
'text-shadow-[10px_10px]/25',
2259822600

2259922601
// Colors
@@ -22634,6 +22636,17 @@ test('text-shadow', async () => {
2263422636
--color-red-500: #ef4444;
2263522637
}
2263622638

22639+
.text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
22640+
--tw-text-shadow-alpha: 25%;
22641+
text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value));
22642+
}
22643+
22644+
@supports (color: lab(from red l a b)) {
22645+
.text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
22646+
text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(from var(--value) l a b / 25%));
22647+
}
22648+
}
22649+
2263722650
.text-shadow-\\[10px_10px\\]\\/25 {
2263822651
--tw-text-shadow-alpha: 25%;
2263922652
text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
@@ -22669,6 +22682,10 @@ test('text-shadow', async () => {
2266922682
text-shadow: 12px 12px var(--tw-text-shadow-color, #08c);
2267022683
}
2267122684

22685+
.text-shadow-\\[12px_12px_var\\(--value\\)\\] {
22686+
text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value));
22687+
}
22688+
2267222689
.text-shadow-\\[color\\:var\\(--value\\)\\] {
2267322690
--tw-text-shadow-color: color-mix(in oklab, var(--value) var(--tw-text-shadow-alpha), transparent);
2267422691
}
@@ -22826,12 +22843,14 @@ test('shadow', async () => {
2282622843
'shadow-xl',
2282722844
'shadow-none',
2282822845
'shadow-[12px_12px_#0088cc]',
22846+
'shadow-[12px_12px_var(--value)]',
2282922847
'shadow-[10px_10px]',
2283022848
'shadow-[var(--value)]',
2283122849
'shadow-[shadow:var(--value)]',
2283222850

2283322851
'shadow-sm/25',
2283422852
'shadow-[12px_12px_#0088cc]/25',
22853+
'shadow-[12px_12px_var(--value)]/25',
2283522854
'shadow-[10px_10px]/25',
2283622855

2283722856
// Colors
@@ -22884,6 +22903,18 @@ test('shadow', async () => {
2288422903
--color-red-500: #ef4444;
2288522904
}
2288622905

22906+
.shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
22907+
--tw-shadow-alpha: 25%;
22908+
--tw-shadow: 12px 12px var(--tw-shadow-color, var(--value));
22909+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
22910+
}
22911+
22912+
@supports (color: lab(from red l a b)) {
22913+
.shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
22914+
--tw-shadow: 12px 12px var(--tw-shadow-color, oklab(from var(--value) l a b / 25%));
22915+
}
22916+
}
22917+
2288722918
.shadow-\\[10px_10px\\]\\/25 {
2288822919
--tw-shadow-alpha: 25%;
2288922920
--tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
@@ -22912,6 +22943,11 @@ test('shadow', async () => {
2291222943
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2291322944
}
2291422945

22946+
.shadow-\\[12px_12px_var\\(--value\\)\\] {
22947+
--tw-shadow: 12px 12px var(--tw-shadow-color, var(--value));
22948+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
22949+
}
22950+
2291522951
.shadow-\\[shadow\\:var\\(--value\\)\\], .shadow-\\[var\\(--value\\)\\] {
2291622952
--tw-shadow: var(--value);
2291722953
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -23153,12 +23189,14 @@ test('inset-shadow', async () => {
2315323189
'inset-shadow-sm',
2315423190
'inset-shadow-none',
2315523191
'inset-shadow-[12px_12px_#0088cc]',
23192+
'inset-shadow-[12px_12px_var(--value)]',
2315623193
'inset-shadow-[10px_10px]',
2315723194
'inset-shadow-[var(--value)]',
2315823195
'inset-shadow-[shadow:var(--value)]',
2315923196

2316023197
'inset-shadow-sm/25',
2316123198
'inset-shadow-[12px_12px_#0088cc]/25',
23199+
'inset-shadow-[12px_12px_var(--value)]/25',
2316223200
'inset-shadow-[10px_10px]/25',
2316323201

2316423202
// Colors
@@ -23211,6 +23249,18 @@ test('inset-shadow', async () => {
2321123249
--color-red-500: #ef4444;
2321223250
}
2321323251

23252+
.inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
23253+
--tw-inset-shadow-alpha: 25%;
23254+
--tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value));
23255+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
23256+
}
23257+
23258+
@supports (color: lab(from red l a b)) {
23259+
.inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
23260+
--tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value) l a b / 25%));
23261+
}
23262+
}
23263+
2321423264
.inset-shadow-\\[10px_10px\\]\\/25 {
2321523265
--tw-inset-shadow-alpha: 25%;
2321623266
--tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
@@ -23244,6 +23294,11 @@ test('inset-shadow', async () => {
2324423294
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2324523295
}
2324623296

23297+
.inset-shadow-\\[12px_12px_var\\(--value\\)\\] {
23298+
--tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value));
23299+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
23300+
}
23301+
2324723302
.inset-shadow-\\[shadow\\:var\\(--value\\)\\], .inset-shadow-\\[var\\(--value\\)\\] {
2324823303
--tw-inset-shadow: inset var(--value);
2324923304
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

‎packages/tailwindcss/src/utilities.ts

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4997,7 +4997,7 @@ export function createUtilities(theme: Theme) {
49974997
return [
49984998
textShadowProperties(),
49994999
decl('--tw-text-shadow-alpha', alpha),
5000-
...replaceShadowColors(
5000+
...alphaReplacedShadowProperties(
50015001
'text-shadow',
50025002
value,
50035003
alpha,
@@ -5023,7 +5023,7 @@ export function createUtilities(theme: Theme) {
50235023
return [
50245024
textShadowProperties(),
50255025
decl('--tw-text-shadow-alpha', alpha),
5026-
...replaceShadowColors(
5026+
...alphaReplacedShadowProperties(
50275027
'text-shadow',
50285028
value,
50295029
alpha,
@@ -5047,7 +5047,7 @@ export function createUtilities(theme: Theme) {
50475047
return [
50485048
textShadowProperties(),
50495049
decl('--tw-text-shadow-alpha', alpha),
5050-
...replaceShadowColors(
5050+
...alphaReplacedShadowProperties(
50515051
'text-shadow',
50525052
value,
50535053
alpha,
@@ -5139,7 +5139,7 @@ export function createUtilities(theme: Theme) {
51395139
return [
51405140
boxShadowProperties(),
51415141
decl('--tw-shadow-alpha', alpha),
5142-
...replaceShadowColors(
5142+
...alphaReplacedShadowProperties(
51435143
'--tw-shadow',
51445144
value,
51455145
alpha,
@@ -5167,7 +5167,7 @@ export function createUtilities(theme: Theme) {
51675167
return [
51685168
boxShadowProperties(),
51695169
decl('--tw-shadow-alpha', alpha),
5170-
...replaceShadowColors(
5170+
...alphaReplacedShadowProperties(
51715171
'--tw-shadow',
51725172
value,
51735173
alpha,
@@ -5196,7 +5196,7 @@ export function createUtilities(theme: Theme) {
51965196
return [
51975197
boxShadowProperties(),
51985198
decl('--tw-shadow-alpha', alpha),
5199-
...replaceShadowColors(
5199+
...alphaReplacedShadowProperties(
52005200
'--tw-shadow',
52015201
value,
52025202
alpha,
@@ -5260,7 +5260,7 @@ export function createUtilities(theme: Theme) {
52605260
return [
52615261
boxShadowProperties(),
52625262
decl('--tw-inset-shadow-alpha', alpha),
5263-
...replaceShadowColors(
5263+
...alphaReplacedShadowProperties(
52645264
'--tw-inset-shadow',
52655265
value,
52665266
alpha,
@@ -5288,7 +5288,7 @@ export function createUtilities(theme: Theme) {
52885288
return [
52895289
boxShadowProperties(),
52905290
decl('--tw-inset-shadow-alpha', alpha),
5291-
...replaceShadowColors(
5291+
...alphaReplacedShadowProperties(
52925292
'--tw-inset-shadow',
52935293
value,
52945294
alpha,
@@ -5319,7 +5319,7 @@ export function createUtilities(theme: Theme) {
53195319
return [
53205320
boxShadowProperties(),
53215321
decl('--tw-inset-shadow-alpha', alpha),
5322-
...replaceShadowColors(
5322+
...alphaReplacedShadowProperties(
53235323
'--tw-inset-shadow',
53245324
value,
53255325
alpha,
@@ -6074,3 +6074,42 @@ function resolveValueFunction(
60746074
}
60756075
}
60766076
}
6077+
6078+
function alphaReplacedShadowProperties(
6079+
property: string,
6080+
value: string,
6081+
alpha: string | null | undefined,
6082+
varInjector: (color: string) => string,
6083+
prefix: string = '',
6084+
): AstNode[] {
6085+
let requiresFallback = false
6086+
let replacedValue = replaceShadowColors(value, (color) => {
6087+
if (alpha == null) {
6088+
return varInjector(color)
6089+
}
6090+
6091+
// When the input is currentcolor, we use our existing `color-mix(…)` approach to increase
6092+
// browser support. Note that the fallback of this is handled more generically in
6093+
// post-processing.
6094+
if (color.startsWith('current')) {
6095+
return varInjector(withAlpha(color, alpha))
6096+
}
6097+
6098+
// If any dynamic values are needed for the relative color syntax, we need to insert a
6099+
// replacement as lightningcss won't be able to resolve them statically.
6100+
if (color.startsWith('var(') || alpha.startsWith('var(')) {
6101+
requiresFallback = true
6102+
}
6103+
6104+
return varInjector(replaceAlpha(color, alpha))
6105+
})
6106+
6107+
if (requiresFallback) {
6108+
return [
6109+
decl(property, prefix + replaceShadowColors(value, varInjector)),
6110+
rule('@supports (color: lab(from red l a b))', [decl(property, prefix + replacedValue)]),
6111+
]
6112+
} else {
6113+
return [decl(property, prefix + replacedValue)]
6114+
}
6115+
}

0 commit comments

Comments
 (0)