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

wip

Browse source
This commit is contained in:
Jordan Pittman 2023-12-21 16:38:25 -05:00
parent 543dacf81a
commit c055aa4017
2 changed files with 56 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/corePlugins.js
View file

@ -225,19 +225,40 @@ export let variantPlugins = {
'Change `darkMode` to `media` or remove it entirely.',
'https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration',
])
} else if (mode === 'variant' && className === '.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 &"]`',
])
} else if (mode === 'variant' && !className.includes('&')) {
mode = false
log.warn('darkmode-variant-without-ampersand', [
'When using `variant` for `darkMode`, your selector must contain `&`.',
'Example `darkMode: ["variant", ".your-selector &"]`',
])
}
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', [
'darkMode: "variant" was used without a provided 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 === 'class') {

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

@ -255,9 +255,28 @@ it('should support parallel selectors for the dark mode variant', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.dark\:font-bold:not(.light *) {
font-weight: 700;
}
.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;
}