wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Use class for legacy behavior, selector for new behavior

Browse source
This commit is contained in:
Adam Wathan 2023-12-22 13:44:46 -05:00 • committed by Jordan Pittman
parent c055aa4017
commit 13ad6ccabf
5 changed files with 52 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/corePlugins.js
View file

@ -244,7 +244,6 @@ export let variantPlugins = {
if (format === '.dark') {
mode = false
log.warn('darkmode-variant-without-selector', [
'darkMode: "variant" was used without a provided selector.',
'When using `variant` for `darkMode`, you must provide a selector.',
'Example: `darkMode: ["variant", ".your-selector &"]`',
])
@ -261,15 +260,15 @@ export let variantPlugins = {
className = formats
}
if (mode === 'class') {
addVariant('dark', `:is(:where(${className}) &)`)
} else if (mode === 'legacy') {
// Exists for pre v3.4 compatibility
addVariant('dark', `:is(${className} &)`)
if (mode === 'selector') {
addVariant('dark', [`:is(:where(${className}) &)`, `&:where(${className})`])
} else if (mode === 'media') {
addVariant('dark', '@media (prefers-color-scheme: dark)')
} else if (mode === 'variant') {
addVariant('dark', className)
} else if (mode === 'class') {
// Exists for pre v3.4 compatibility
addVariant('dark', `:is(${className} &)`)
}
},

11
src/lib/setupContextUtils.js
View file

@ -757,18 +757,21 @@ function resolvePlugins(context, root) {
variantPlugins['supportsVariants'],
variantPlugins['reducedMotionVariants'],
variantPlugins['prefersContrastVariants'],
variantPlugins['printVariant'],
variantPlugins['screenVariants'],
variantPlugins['orientationVariants'],
variantPlugins['directionVariants'],
variantPlugins['darkVariants'],
variantPlugins['forcedColorsVariants'],
variantPlugins['printVariant'],
]
// This is a compatibility fix for the pre 3.4 dark mode behavior
// The `class` strategy is deprecated in favor of `selector` which has the new behavior
// You can enable the old behavior by setting `darkMode: ['legacy', selector]`
let isLegacyDarkMode = context.tailwindConfig.darkMode === 'legacy'
|| (Array.isArray(context.tailwindConfig.darkMode) && context.tailwindConfig.darkMode[0] === 'legacy')
let isLegacyDarkMode =
context.tailwindConfig.darkMode === 'class' ||
(Array.isArray(context.tailwindConfig.darkMode) &&
context.tailwindConfig.darkMode[0] === 'class')
if (isLegacyDarkMode) {
afterVariants = [
@ -776,8 +779,8 @@ function resolvePlugins(context, root) {
variantPlugins['directionVariants'],
variantPlugins['reducedMotionVariants'],
variantPlugins['prefersContrastVariants'],
variantPlugins['printVariant'],
variantPlugins['darkVariants'],
variantPlugins['printVariant'],
variantPlugins['screenVariants'],
variantPlugins['orientationVariants'],

16
tests/apply.test.js
View file

@ -1972,7 +1972,7 @@ it('should maintain the correct selector when applying other utilities', () => {
it('pseudo elements inside apply are moved outside of :is() or :has()', () => {
let config = {
darkMode: 'class',
darkMode: 'selector',
content: [
{
raw: html` <div class="foo bar baz qux steve bob"></div> `,
@ -2017,8 +2017,11 @@ it('pseudo elements inside apply are moved outside of :is() or :has()', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
:is(:where(.dark) .foo):before,
.foo:where(.dark):before,
:is(:where([dir='rtl']) :is(:where(.dark) .bar)):before,
:is(:where([dir='rtl']) :is(:where(.dark) .baz:hover)):before {
:is(:where([dir='rtl']) .bar:where(.dark)):before,
:is(:where([dir='rtl']) :is(:where(.dark) .baz:hover)):before,
:is(:where([dir='rtl']) .baz:hover:where(.dark)):before {
background-color: #000;
}
:-webkit-any(
@ -2029,7 +2032,14 @@ it('pseudo elements inside apply are moved outside of :is() or :has()', () => {
:is(:where([dir='rtl']) :is(:where(.dark) .qux))::file-selector-button:hover {
background-color: #000;
}
:is(:where([dir='rtl']) :is(:where(.dark) .steve):hover):before {
:-webkit-any(:where([dir='rtl']) .qux)::-webkit-file-upload-button:hover:where() {
background-color: #000;
}
:is(:where([dir='rtl']) .qux)::file-selector-button:hover:where() {
background-color: #000;
}
:is(:where([dir='rtl']) :is(:where(.dark) .steve):hover):before,
:is(:where([dir='rtl']) .steve:where(.dark):hover):before {
background-color: #000;
}
:-webkit-any(

39
tests/dark-mode.test.js
View file

@ -2,7 +2,7 @@ import { run, html, css, defaults } from './util/run'
it('should be possible to use the darkMode "class" mode', () => {
let config = {
darkMode: 'class',
darkMode: 'selector',
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
}
@ -16,7 +16,8 @@ it('should be possible to use the darkMode "class" mode', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
:is(:where(.dark) .dark\:font-bold) {
:is(:where(.dark) .dark\:font-bold),
.dark\:font-bold:where(.dark) {
font-weight: 700;
}
`)
@ -25,7 +26,7 @@ it('should be possible to use the darkMode "class" mode', () => {
it('should be possible to change the class name', () => {
let config = {
darkMode: ['class', '.test-dark'],
darkMode: ['selector', '.test-dark'],
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
}
@ -39,7 +40,8 @@ it('should be possible to change the class name', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
:is(:where(.test-dark) .dark\:font-bold) {
:is(:where(.test-dark) .dark\:font-bold),
.dark\:font-bold:where(.test-dark) {
font-weight: 700;
}
`)
@ -120,9 +122,9 @@ it('should default to the `media` mode when mode is set to `false`', () => {
})
})
it('should support legacy dark mode behavior', () => {
it('should support the deprecated `class` dark mode behavior', () => {
let config = {
darkMode: 'legacy',
darkMode: 'class',
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
}
@ -140,9 +142,9 @@ it('should support legacy dark mode behavior', () => {
})
})
it('should support custom classes with legacy dark mode', () => {
it('should support custom classes with deprecated `class` dark mode', () => {
let config = {
darkMode: ['legacy', '.my-dark'],
darkMode: ['class', '.my-dark'],
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
}
@ -160,10 +162,14 @@ it('should support custom classes with legacy dark mode', () => {
})
})
it('should use legacy sorting when using darkMode: legacy', () => {
it('should use legacy sorting when using `darkMode: class`', () => {
let config = {
darkMode: 'legacy',
content: [{ raw: html`<div class="dark:text-green-100 hover:text-green-200 lg:text-green-300"></div>` }],
darkMode: 'class',
content: [
{
raw: html`<div class="dark:text-green-100 hover:text-green-200 lg:text-green-300"></div>`,
},
],
corePlugins: { preflight: false },
}
@ -193,8 +199,12 @@ it('should use legacy sorting when using darkMode: legacy', () => {
it('should use modern sorting otherwise', () => {
let config = {
darkMode: 'class',
content: [{ raw: html`<div class="dark:text-green-100 hover:text-green-200 lg:text-green-300"></div>` }],
darkMode: 'selector',
content: [
{
raw: html`<div class="dark:text-green-100 hover:text-green-200 lg:text-green-300"></div>`,
},
],
corePlugins: { preflight: false },
}
@ -214,7 +224,8 @@ it('should use modern sorting otherwise', () => {
color: rgb(134 239 172 / var(--tw-text-opacity));
}
}
:is(:where(.dark) .dark\:text-green-100) {
:is(:where(.dark) .dark\:text-green-100),
.dark\:text-green-100:where(.dark) {
--tw-text-opacity: 1;
color: rgb(220 252 231 / var(--tw-text-opacity));
}

4
tests/plugins/variants/__snapshots__/darkVariants.test.js.snap
View file

@ -12,7 +12,7 @@ exports[`should test the 'darkVariants' plugin 1`] = `
exports[`should test the 'darkVariants' plugin 2`] = `
"
:is(:where(.dark) .dark\\:flex) {
:is(.dark .dark\\:flex) {
display: flex;
}
"
@ -20,7 +20,7 @@ exports[`should test the 'darkVariants' plugin 2`] = `
exports[`should test the 'darkVariants' plugin 3`] = `
"
:is(:where(.my-dark-mode) .dark\\:flex) {
:is(.my-dark-mode .dark\\:flex) {
display: flex;
}
"