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

Remove variant dark mode strategy

Browse source
This commit is contained in:
Jordan Pittman 2024-01-05 12:16:10 -05:00
parent 2433d99716
commit 185250438c
2 changed files with 0 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/corePlugins.js
View file

@ -227,45 +227,10 @@ export let variantPlugins = {
])
}
if (mode === 'variant') {
let formats
if (Array.isArray(className)) {
formats = className
} else if (typeof className === 'function') {
formats = className
} else if (typeof className === 'string') {
formats = [className]
}
// TODO: We could also add these warnings if the user passes a function that returns string | string[]
// But this is an advanced enough use case that it's probably not necessary
if (Array.isArray(formats)) {
for (let format of formats) {
if (format === '.dark') {
mode = false
log.warn('darkmode-variant-without-selector', [
'When using `variant` for `darkMode`, you must provide a selector.',
'Example: `darkMode: ["variant", ".your-selector &"]`',
])
} else if (!format.includes('&')) {
mode = false
log.warn('darkmode-variant-without-ampersand', [
'When using `variant` for `darkMode`, your selector must contain `&`.',
'Example `darkMode: ["variant", ".your-selector &"]`',
])
}
}
}
className = formats
}
if (mode === 'selector') {
addVariant('dark', `&:where(${className}, ${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} &)`)

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

@ -229,65 +229,3 @@ it('should use modern sorting otherwise', () => {
`)
})
})
it('should allow customization of the dark mode variant', () => {
let config = {
darkMode: ['variant', '&:not(.light *)'],
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
}
let input = css`
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.dark\:font-bold:not(.light *) {
font-weight: 700;
}
`)
})
})
it('should support parallel selectors for the dark mode variant', () => {
let config = {
darkMode: ['variant', ['&:not(.light *)', '&:not(.extralight *)']],
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
}
let input = css`
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.dark\:font-bold:not(.light *),
.dark\:font-bold:not(.extralight *) {
font-weight: 700;
}
`)
})
})
it('should support fn selectors for the dark mode variant', () => {
let config = {
darkMode: ['variant', () => ['&:not(.light *)', '&:not(.extralight *)']],
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
}
let input = css`
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.dark\:font-bold:not(.light *),
.dark\:font-bold:not(.extralight *) {
font-weight: 700;
}
`)
})
})