mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
fbdb858e97
* Reduce specificity of `rtl`, `ltr`, and `dark` variants Reduce specificity of `rtl`, `ltr`, and `dark` variants (when using `darkMode: 'class'`) to make them the same as other variants. This also sorts the LTR/RTL and dark variants later in the variant plugin list to ensure that the reduced specificity doesn't cause them to start "losing" to other variants to keep things as backwards compatible as possible. Resolves a long-standing issue where `darkMode: 'media'` and `darkMode: 'class'` had different specificity, which meant switching your dark mode strategy could break your site. * Update changelog --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
124 lines
2.9 KiB
JavaScript
124 lines
2.9 KiB
JavaScript
import { crosscheck, run, html, css, defaults } from './util/run'
|
|
|
|
crosscheck(() => {
|
|
it('should be possible to use the darkMode "class" mode', () => {
|
|
let config = {
|
|
darkMode: 'class',
|
|
content: [{ raw: html`<div class="dark:font-bold"></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}
|
|
:is(:where(.dark) .dark\:font-bold) {
|
|
font-weight: 700;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should be possible to change the class name', () => {
|
|
let config = {
|
|
darkMode: ['class', '.test-dark'],
|
|
content: [{ raw: html`<div class="dark:font-bold"></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}
|
|
:is(:where(.test-dark) .dark\:font-bold) {
|
|
font-weight: 700;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should be possible to use the darkMode "media" mode', () => {
|
|
let config = {
|
|
darkMode: 'media',
|
|
content: [{ raw: html`<div class="dark:font-bold"></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-color-scheme: dark) {
|
|
.dark\:font-bold {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should default to the `media` mode when no mode is provided', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="dark:font-bold"></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-color-scheme: dark) {
|
|
.dark\:font-bold {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should default to the `media` mode when mode is set to `false`', () => {
|
|
let config = {
|
|
darkMode: false,
|
|
content: [{ raw: html`<div class="dark:font-bold"></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-color-scheme: dark) {
|
|
.dark\:font-bold {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
})
|