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>
58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
import { crosscheck, run, html, css } from './util/run'
|
|
|
|
crosscheck(() => {
|
|
test('custom separator', () => {
|
|
let config = {
|
|
darkMode: 'class',
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div class="md_hover_text-right"></div>
|
|
<div class="motion-safe_hover_text-center"></div>
|
|
<div class="dark_focus_text-left"></div>
|
|
<div class="group-hover_focus-within_text-left"></div>
|
|
<div class="rtl_active_text-center"></div>
|
|
`,
|
|
},
|
|
],
|
|
separator: '_',
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.group:hover .group-hover_focus-within_text-left:focus-within {
|
|
text-align: left;
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.motion-safe_hover_text-center:hover {
|
|
text-align: center;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.md_hover_text-right:hover {
|
|
text-align: right;
|
|
}
|
|
}
|
|
:is(:where([dir='rtl']) .rtl_active_text-center:active) {
|
|
text-align: center;
|
|
}
|
|
:is(:where(.dark) .dark_focus_text-left:focus) {
|
|
text-align: left;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('dash is not supported', () => {
|
|
let config = {
|
|
darkMode: 'class',
|
|
content: [{ raw: 'lg-hover-font-bold' }],
|
|
separator: '-',
|
|
}
|
|
|
|
return expect(run('@tailwind utilities', config)).rejects.toThrowError(
|
|
"The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead."
|
|
)
|
|
})
|
|
})
|