tailwindcss/integrations/vite
Philipp Spiess d6d913ec39
Don't use color-mix(…) on currentColor (#17247)
Closes #17194

This PR works around a crash when rendering opacity on `currentColor`
(as used by the placeholder styles in preflight) on Safari 16.4 and
Safari 16.5. Unfortunately it seems that the [`color-mix(…)` function is
not compatible with `currentColor` for these versions of
Safari](https://stackoverflow.com/questions/76436497/the-color-mix-property-involving-currentcolor-causes-safari-to-crash).
We tried a few different ways to work around this without success:

- Using an `@supports` media query to target these Safari versions and
overwriting the placeholder still makes these browsers crash.
- Changing the way we apply opacity to `currentColor` in core doesn't
seem to work for non-placeholder values:
https://github.com/tailwindlabs/tailwindcss/issues/17194#issuecomment-2728949181
However, a wrong opacity is still better than a complete browser crash.

The work-around of using the `oklab(…)` function does seem to work for
`::placeholder` styles in preflight though according to our testing so
this PR applies this change to preflight.

## Test plan

- See https://play.tailwindcss.com/WSsSTLHu8h?file=css 
- Tested on Chrome/Safari 16.4/Safari 18.3/Firefox

<img width="564" alt="Screenshot 2025-03-17 at 11 32 47"
src="https://github.com/user-attachments/assets/cfd0db71-f39a-4bc0-bade-cea70afe50ae"
/>
2025-03-17 13:23:02 +01:00
..
astro.test.ts Don't use color-mix(…) on currentColor (#17247) 2025-03-17 13:23:02 +01:00
config.test.ts Improve integration tests (stability + performance) (#15125) 2024-12-12 13:48:56 +01:00
css-modules.test.ts Improve integration tests (stability + performance) (#15125) 2024-12-12 13:48:56 +01:00
html-style-blocks.test.ts Vite: Transform <style> blocks in html files (#16069) 2025-01-31 14:26:45 +00:00
ignored-packages.test.ts Do not scan tailwind-merge sources for candidates (#16005) 2025-01-29 17:32:06 +01:00
index.test.ts Make @reference emit variable fallbacks instead of CSS variable declarations (#16774) 2025-02-25 11:36:43 +01:00
multi-root.test.ts Make @reference emit variable fallbacks instead of CSS variable declarations (#16774) 2025-02-25 11:36:43 +01:00
nuxt.test.ts Fix integration tests for Windows (#16693) 2025-02-20 17:50:50 +01:00
other-transforms.test.ts Make @reference emit variable fallbacks instead of CSS variable declarations (#16774) 2025-02-25 11:36:43 +01:00
react-router.test.ts Vite: Remove module-graph scanner (#16631) 2025-02-20 15:23:44 +01:00
resolvers.test.ts Make @reference emit variable fallbacks instead of CSS variable declarations (#16774) 2025-02-25 11:36:43 +01:00
solidstart.test.ts Fix Vite issues with SolidStart (#16052) 2025-01-30 16:58:20 +01:00
ssr.test.ts Vite: Remove module-graph scanner (#16631) 2025-02-20 15:23:44 +01:00
svelte.test.ts Make @reference emit variable fallbacks instead of CSS variable declarations (#16774) 2025-02-25 11:36:43 +01:00
url-rewriting.test.ts Enable URL rewriting for PostCSS (#16965) 2025-03-07 12:18:10 +01:00
virtual-modules.test.ts Vite: Don't crash with virtual module dependencies (#16780) 2025-02-25 11:29:58 +01:00
vue.test.ts Improve integration tests (stability + performance) (#15125) 2024-12-12 13:48:56 +01:00