Skip to content

Improve compatibility with Safari 15 #17435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
philipp-spiess merged 28 commits into from
Apr 1, 2025
Merged

Improve compatibility with Safari 15 #17435

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
56883e7
WIP
philipp-spiess Mar 26, 2025
747dacf
Do what needs to be done
philipp-spiess Mar 27, 2025
40ba52b
Improve Next.js playground
philipp-spiess Mar 28, 2025
5183f44
De-duplicate `lightningcss` configuration
philipp-spiess Mar 28, 2025
6937fef
Simplify `color-mix(…)` inlining and adding unit tests
philipp-spiess Mar 28, 2025
e7f48b6
Revert changes to tsconfig
philipp-spiess Mar 28, 2025
19e4beb
Update snapshots
philipp-spiess Mar 28, 2025
f3e2993
Make the `@property` stuff disable-able
philipp-spiess Mar 28, 2025
1460365
PostCSS should not polyfill `@property` for CSS module files
philipp-spiess Mar 28, 2025
f6f78b1
Update more snapshots
philipp-spiess Mar 28, 2025
4c01e6f
Update snapshots
philipp-spiess Mar 31, 2025
74c5cef
Emit `@property` fallbacks at the beginning of the file
philipp-spiess Mar 31, 2025
eb801de
Add test case to stuff
philipp-spiess Mar 31, 2025
77eb998
Update snapshots
philipp-spiess Mar 31, 2025
e4ecce7
Refactor `replaceShadowColors(…)` to print AST
philipp-spiess Mar 31, 2025
9bddc09
Add fallbacks for new relative color usage
philipp-spiess Mar 31, 2025
8f09cac
More snapshot updates and comments
philipp-spiess Mar 31, 2025
5be1398
Don't use regex for replacement
philipp-spiess Mar 31, 2025
78e10dc
Further reduce the precision of color values because lightningcss pre…
philipp-spiess Mar 31, 2025
cbcf42a
Fix regex
philipp-spiess Mar 31, 2025
0ad7aad
Fix Svelte tests
philipp-spiess Mar 31, 2025
0bbcd09
Still needs a layer and fix supports query
philipp-spiess Mar 31, 2025
7d6fabc
Even more snapshot updates
philipp-spiess Mar 31, 2025
66c2c48
So. Many. Snapshots
philipp-spiess Mar 31, 2025
ddace46
Apply cleanups and also flag `color-mix(…)` polyfills so they aren't …
philipp-spiess Apr 1, 2025
8e54832
Revert changes to `replaceShadowColors(…)` and move polyfill closer t…
philipp-spiess Apr 1, 2025
79144ce
Update color values in `colors.ts`
philipp-spiess Apr 1, 2025
9244037
Update snapshots
philipp-spiess Apr 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Revert changes to replaceShadowColors(…) and move polyfill closer t… 
…o utilities
  • Loading branch information
@philipp-spiess
philipp-spiess committed Apr 1, 2025
commit 8e54832cdeab4d447f264af7b0a764a4d6c48303
55 changes: 55 additions & 0 deletions packages/tailwindcss/src/utilities.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22588,12 +22588,14 @@ test('text-shadow', async () => {
'text-shadow-sm',
'text-shadow-none',
'text-shadow-[12px_12px_#0088cc]',
'text-shadow-[12px_12px_var(--value)]',
'text-shadow-[10px_10px]',
'text-shadow-[var(--value)]',
'text-shadow-[shadow:var(--value)]',

'text-shadow-sm/25',
'text-shadow-[12px_12px_#0088cc]/25',
'text-shadow-[12px_12px_var(--value)]/25',
'text-shadow-[10px_10px]/25',

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

.text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
--tw-text-shadow-alpha: 25%;
text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value));
}

@supports (color: lab(from red l a b)) {
.text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(from var(--value) l a b / 25%));
}
}

.text-shadow-\\[10px_10px\\]\\/25 {
--tw-text-shadow-alpha: 25%;
text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
Expand Down Expand Up @@ -22669,6 +22682,10 @@ test('text-shadow', async () => {
text-shadow: 12px 12px var(--tw-text-shadow-color, #08c);
}

.text-shadow-\\[12px_12px_var\\(--value\\)\\] {
text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value));
}

.text-shadow-\\[color\\:var\\(--value\\)\\] {
--tw-text-shadow-color: color-mix(in oklab, var(--value) var(--tw-text-shadow-alpha), transparent);
}
Expand Down Expand Up @@ -22826,12 +22843,14 @@ test('shadow', async () => {
'shadow-xl',
'shadow-none',
'shadow-[12px_12px_#0088cc]',
'shadow-[12px_12px_var(--value)]',
'shadow-[10px_10px]',
'shadow-[var(--value)]',
'shadow-[shadow:var(--value)]',

'shadow-sm/25',
'shadow-[12px_12px_#0088cc]/25',
'shadow-[12px_12px_var(--value)]/25',
'shadow-[10px_10px]/25',

// Colors
Expand Down Expand Up @@ -22884,6 +22903,18 @@ test('shadow', async () => {
--color-red-500: #ef4444;
}

.shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
--tw-shadow-alpha: 25%;
--tw-shadow: 12px 12px var(--tw-shadow-color, var(--value));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

@supports (color: lab(from red l a b)) {
.shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
--tw-shadow: 12px 12px var(--tw-shadow-color, oklab(from var(--value) l a b / 25%));
}
}

.shadow-\\[10px_10px\\]\\/25 {
--tw-shadow-alpha: 25%;
--tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
Expand Down Expand Up @@ -22912,6 +22943,11 @@ test('shadow', async () => {
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\\[12px_12px_var\\(--value\\)\\] {
--tw-shadow: 12px 12px var(--tw-shadow-color, var(--value));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\\[shadow\\:var\\(--value\\)\\], .shadow-\\[var\\(--value\\)\\] {
--tw-shadow: var(--value);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
Expand Down Expand Up @@ -23153,12 +23189,14 @@ test('inset-shadow', async () => {
'inset-shadow-sm',
'inset-shadow-none',
'inset-shadow-[12px_12px_#0088cc]',
'inset-shadow-[12px_12px_var(--value)]',
'inset-shadow-[10px_10px]',
'inset-shadow-[var(--value)]',
'inset-shadow-[shadow:var(--value)]',

'inset-shadow-sm/25',
'inset-shadow-[12px_12px_#0088cc]/25',
'inset-shadow-[12px_12px_var(--value)]/25',
'inset-shadow-[10px_10px]/25',

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

.inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
--tw-inset-shadow-alpha: 25%;
--tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

@supports (color: lab(from red l a b)) {
.inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
--tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value) l a b / 25%));
}
}

.inset-shadow-\\[10px_10px\\]\\/25 {
--tw-inset-shadow-alpha: 25%;
--tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
Expand Down Expand Up @@ -23244,6 +23294,11 @@ test('inset-shadow', async () => {
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.inset-shadow-\\[12px_12px_var\\(--value\\)\\] {
--tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.inset-shadow-\\[shadow\\:var\\(--value\\)\\], .inset-shadow-\\[var\\(--value\\)\\] {
--tw-inset-shadow: inset var(--value);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
Expand Down
57 changes: 48 additions & 9 deletions packages/tailwindcss/src/utilities.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4997,7 +4997,7 @@ export function createUtilities(theme: Theme) {
return [
textShadowProperties(),
decl('--tw-text-shadow-alpha', alpha),
...replaceShadowColors(
...alphaReplacedShadowProperties(
'text-shadow',
value,
alpha,
Expand All @@ -5023,7 +5023,7 @@ export function createUtilities(theme: Theme) {
return [
textShadowProperties(),
decl('--tw-text-shadow-alpha', alpha),
...replaceShadowColors(
...alphaReplacedShadowProperties(
'text-shadow',
value,
alpha,
Expand All @@ -5047,7 +5047,7 @@ export function createUtilities(theme: Theme) {
return [
textShadowProperties(),
decl('--tw-text-shadow-alpha', alpha),
...replaceShadowColors(
...alphaReplacedShadowProperties(
'text-shadow',
value,
alpha,
Expand Down Expand Up @@ -5139,7 +5139,7 @@ export function createUtilities(theme: Theme) {
return [
boxShadowProperties(),
decl('--tw-shadow-alpha', alpha),
...replaceShadowColors(
...alphaReplacedShadowProperties(
'--tw-shadow',
value,
alpha,
Expand Down Expand Up @@ -5167,7 +5167,7 @@ export function createUtilities(theme: Theme) {
return [
boxShadowProperties(),
decl('--tw-shadow-alpha', alpha),
...replaceShadowColors(
...alphaReplacedShadowProperties(
'--tw-shadow',
value,
alpha,
Expand Down Expand Up @@ -5196,7 +5196,7 @@ export function createUtilities(theme: Theme) {
return [
boxShadowProperties(),
decl('--tw-shadow-alpha', alpha),
...replaceShadowColors(
...alphaReplacedShadowProperties(
'--tw-shadow',
value,
alpha,
Expand Down Expand Up @@ -5260,7 +5260,7 @@ export function createUtilities(theme: Theme) {
return [
boxShadowProperties(),
decl('--tw-inset-shadow-alpha', alpha),
...replaceShadowColors(
...alphaReplacedShadowProperties(
'--tw-inset-shadow',
value,
alpha,
Expand Down Expand Up @@ -5288,7 +5288,7 @@ export function createUtilities(theme: Theme) {
return [
boxShadowProperties(),
decl('--tw-inset-shadow-alpha', alpha),
...replaceShadowColors(
...alphaReplacedShadowProperties(
'--tw-inset-shadow',
value,
alpha,
Expand Down Expand Up @@ -5319,7 +5319,7 @@ export function createUtilities(theme: Theme) {
return [
boxShadowProperties(),
decl('--tw-inset-shadow-alpha', alpha),
...replaceShadowColors(
...alphaReplacedShadowProperties(
'--tw-inset-shadow',
value,
alpha,
Expand Down Expand Up @@ -6074,3 +6074,42 @@ function resolveValueFunction(
}
}
}

function alphaReplacedShadowProperties(
property: string,
value: string,
alpha: string | null | undefined,
varInjector: (color: string) => string,
prefix: string = '',
): AstNode[] {
let requiresFallback = false
let replacedValue = replaceShadowColors(value, (color) => {
if (alpha == null) {
return varInjector(color)
}

// When the input is currentcolor, we use our existing `color-mix(…)` approach to increase
// browser support. Note that the fallback of this is handled more generically in
// post-processing.
if (color.startsWith('current')) {
return varInjector(withAlpha(color, alpha))
}

// If any dynamic values are needed for the relative color syntax, we need to insert a
// replacement as lightningcss won't be able to resolve them statically.
if (color.startsWith('var(') || alpha.startsWith('var(')) {
requiresFallback = true
}

return varInjector(replaceAlpha(color, alpha))
})

if (requiresFallback) {
return [
decl(property, prefix + replaceShadowColors(value, varInjector)),
rule('@supports (color: lab(from red l a b))', [decl(property, prefix + replacedValue)]),
]
} else {
return [decl(property, prefix + replacedValue)]
}
}
Loading