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>
71 lines
1.8 KiB
JavaScript
71 lines
1.8 KiB
JavaScript
import { run, html, css, defaults } from './util/run'
|
|
|
|
it('should be possible to use contrast-more and contrast-less variants', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="bg-white contrast-more:bg-pink-500 contrast-less:bg-black"></div>`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
${defaults}
|
|
.bg-white {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
}
|
|
@media (prefers-contrast: more) {
|
|
.contrast-more\:bg-pink-500 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
|
|
}
|
|
}
|
|
@media (prefers-contrast: less) {
|
|
.contrast-less\:bg-black {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('dark mode should appear after the contrast variants', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="contrast-more:bg-black dark:bg-white"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
${defaults}
|
|
@media (prefers-contrast: more) {
|
|
.contrast-more\:bg-black {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
|
}
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.dark\:bg-white {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|