mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2026-01-18 16:17:36 +00:00
d093dce0fb
This works around an issue in Chrome where `::selection` does not read from variables defined on `::selection` thus breaking all uses of color utilities with the selection variant. e.g. `selection::bg-red-200`. We now add a fallback value of `1` to all uses of `var(--tw-bg-opacity)`, `var(--tw-text-opacity)`, `var(--tw-border-opacity)`, etc… since Chrome treats the variable as if it did not exist because it's not defined on the parent. In Chrome 131 (until the change is rolled back) existing utilities like these will not work: - `selection:text-opacity-50` - `selection:[--tw-text-opacity:0.5]` Fixes #15000 --------- Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
78 lines
1.7 KiB
JavaScript
78 lines
1.7 KiB
JavaScript
import path from 'path'
|
|
import { run, css } from './util/run'
|
|
|
|
test('it detects svelte based on the file extension', () => {
|
|
let config = {
|
|
content: [path.resolve(__dirname, './syntax-svelte.test.svelte')],
|
|
corePlugins: { preflight: false },
|
|
theme: {},
|
|
plugins: [],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.bg-red-500 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.lg\:hover\:bg-blue-500:hover {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('using raw with svelte extension', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: `
|
|
<script>
|
|
let current = 'foo'
|
|
</script>
|
|
|
|
<button class:lg:hover:bg-blue-500={current === 'foo'}>Click me</button>
|
|
|
|
<button
|
|
class:bg-red-500={current === 'foo'}
|
|
>
|
|
Click me
|
|
</button>
|
|
`,
|
|
extension: 'svelte',
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
theme: {},
|
|
plugins: [],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.bg-red-500 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.lg\:hover\:bg-blue-500:hover {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|