Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 60b0da9

Browse filesBrowse files
philipp-spiessphilipp-spiess
authored
Polyfill: Fall back to first color value when color-mix(…) contains unresolvable var(…) (#17513)
This PR further improves the `color-mix(…)` polyfill to create a reasonable fallback if dynamic values that can not statically be resolved are used. This refers to either the use of `currentcolor` or any variables that are not static theme variables. Here are two examples that now generate a reasonable fallback instead of not showing any color at all: ```css .text-\\(--my-color\\)\\/\\(--my-opacity\\) { color: var(--my-color); } @supports (color: color-mix(in lab, red, red)) { .text-\\(--my-color\\)\\/\\(--my-opacity\\) { color: color-mix(in oklab, var(--my-color) var(--my-opacity), transparent); } } ``` ```css .text-current\\/50 { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { .text-current\\/50 { color: color-mix(in oklab, currentColor 50%, transparent); } } ``` ## Test plan - Made sure the test diffs are looking reasonable - Tested this on a production site with `<p className="text-shadow-lg/50 [--my-color:red] text-shadow-(color:--my-color)">shadow test</p>` - Browsers that do not support `color-mix(…)` will properly show a red shadow now albeit with 100% opacity: iOS 15.5 and Chrome 110 - Browsers that I have tested to make sure it still works there with opacity: Firefox 127, Firefox 128, Latest Chrome, Safari, Firefox - Browsers that do show a black shadow because of `var(…)var(…)` being chained with no space by lightningcss: Chrome 111
1 parent 81a676f commit 60b0da9
Copy full SHA for 60b0da9

File tree

Expand file treeCollapse file tree

10 files changed

+1781
-332
lines changed
Filter options
Expand file treeCollapse file tree

10 files changed

+1781
-332
lines changed

‎CHANGELOG.md

Copy file name to clipboardExpand all lines: CHANGELOG.md
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1515
- Fix `drop-shadow-*` utilities that use multiple shadows in `@theme inline` ([#17515](https://github.com/tailwindlabs/tailwindcss/pull/17515))
1616
- PostCSS: Fix race condition when two changes are queued concurrently ([#17514](https://github.com/tailwindlabs/tailwindcss/pull/17514))
1717
- PostCSS: Ensure we process files containing an `@tailwind utilities;` directive ([#17514](https://github.com/tailwindlabs/tailwindcss/pull/17514))
18+
- Ensure the `color-mix(…)` polyfill creates fallbacks even when using colors that can not be statically analyzed ([#17513](https://github.com/tailwindlabs/tailwindcss/pull/17513))
1819

1920
## [4.1.1] - 2025-04-02
2021

‎integrations/cli/index.test.ts

Copy file name to clipboardExpand all lines: integrations/cli/index.test.ts
+4-1Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1711,7 +1711,10 @@ test(
17111711
}
17121712
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
17131713
::placeholder {
1714-
color: color-mix(in oklab, currentcolor 50%, transparent);
1714+
color: currentcolor;
1715+
@supports (color: color-mix(in lab, red, red)) {
1716+
color: color-mix(in oklab, currentcolor 50%, transparent);
1717+
}
17151718
}
17161719
}
17171720
textarea {

‎packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

Copy file name to clipboardExpand all lines: packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+7-1Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,13 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
173173
174174
@supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
175175
::placeholder {
176-
color: color-mix(in oklab, currentcolor 50%, transparent);
176+
color: currentColor;
177+
}
178+
179+
@supports (color: color-mix(in lab, red, red)) {
180+
::placeholder {
181+
color: color-mix(in oklab, currentcolor 50%, transparent);
182+
}
177183
}
178184
}
179185

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

Copy file name to clipboardExpand all lines: packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+7-1Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,13 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
287287
288288
@supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
289289
::placeholder {
290-
color: color-mix(in oklab, currentcolor 50%, transparent);
290+
color: currentColor;
291+
}
292+
293+
@supports (color: color-mix(in lab, red, red)) {
294+
::placeholder {
295+
color: color-mix(in oklab, currentcolor 50%, transparent);
296+
}
291297
}
292298
}
293299

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.