mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
d6d913ec39
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" />
132 lines
3.3 KiB
TypeScript
132 lines
3.3 KiB
TypeScript
import { candidate, fetchStyles, html, js, json, retryAssertion, test, ts } from '../utils'
|
|
|
|
test(
|
|
'dev mode',
|
|
{
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"type": "module",
|
|
"dependencies": {
|
|
"astro": "^4.15.2",
|
|
"@tailwindcss/vite": "workspace:^",
|
|
"tailwindcss": "workspace:^"
|
|
}
|
|
}
|
|
`,
|
|
'astro.config.mjs': ts`
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
import { defineConfig } from 'astro/config'
|
|
|
|
// https://astro.build/config
|
|
export default defineConfig({
|
|
vite: { plugins: [tailwindcss()] },
|
|
build: { inlineStylesheets: 'never' },
|
|
})
|
|
`,
|
|
'src/pages/index.astro': html`
|
|
<div class="underline">Hello, world!</div>
|
|
|
|
<style is:global>
|
|
@import 'tailwindcss';
|
|
</style>
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, spawn, expect }) => {
|
|
let process = await spawn('pnpm astro dev')
|
|
await process.onStdout((m) => m.includes('ready in'))
|
|
|
|
let url = ''
|
|
await process.onStdout((m) => {
|
|
let match = /Local\s*(http.*)\//.exec(m)
|
|
if (match) url = match[1]
|
|
return Boolean(url)
|
|
})
|
|
|
|
await process.onStdout((m) => m.includes('watching for file changes'))
|
|
|
|
await retryAssertion(async () => {
|
|
let css = await fetchStyles(url)
|
|
expect(css).toContain(candidate`underline`)
|
|
})
|
|
|
|
await retryAssertion(async () => {
|
|
await fs.write(
|
|
'src/pages/index.astro',
|
|
html`
|
|
<div class="underline font-bold">Hello, world!</div>
|
|
|
|
<style is:global>
|
|
@import 'tailwindcss';
|
|
</style>
|
|
`,
|
|
)
|
|
|
|
let css = await fetchStyles(url)
|
|
expect(css).toContain(candidate`underline`)
|
|
expect(css).toContain(candidate`font-bold`)
|
|
})
|
|
},
|
|
)
|
|
|
|
test(
|
|
'build mode',
|
|
{
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"type": "module",
|
|
"dependencies": {
|
|
"astro": "^4.15.2",
|
|
"react": "^19",
|
|
"react-dom": "^19",
|
|
"@astrojs/react": "^4",
|
|
"@tailwindcss/vite": "workspace:^",
|
|
"tailwindcss": "workspace:^"
|
|
}
|
|
}
|
|
`,
|
|
'astro.config.mjs': ts`
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
import react from '@astrojs/react'
|
|
import { defineConfig } from 'astro/config'
|
|
|
|
// https://astro.build/config
|
|
export default defineConfig({
|
|
vite: { plugins: [tailwindcss()] },
|
|
integrations: [react()],
|
|
build: { inlineStylesheets: 'never' },
|
|
})
|
|
`,
|
|
// prettier-ignore
|
|
'src/pages/index.astro': html`
|
|
---
|
|
import ClientOnly from './client-only';
|
|
---
|
|
|
|
<div class="underline">Hello, world!</div>
|
|
|
|
<ClientOnly client:only="react" />
|
|
|
|
<style is:global>
|
|
@import 'tailwindcss';
|
|
</style>
|
|
`,
|
|
'src/pages/client-only.jsx': js`
|
|
export default function ClientOnly() {
|
|
return <div className="overline">Hello, world!</div>
|
|
}
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, exec, expect }) => {
|
|
await exec('pnpm astro build')
|
|
|
|
let files = await fs.glob('dist/**/*.css')
|
|
expect(files).toHaveLength(1)
|
|
|
|
await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`overline`])
|
|
},
|
|
)
|