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

Fix grouping using different variant types inside nested groups

Browse source
This commit is contained in:
Jordan Pittman 2022-05-23 15:43:12 -04:00
parent b0e1f47b94
commit 50024e4603
2 changed files with 52 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/lib/generateRules.js
View file

@ -458,7 +458,7 @@ function* resolveMatches(candidate, context, original = candidate) {
if (flagEnabled(context.tailwindConfig, 'variantGrouping')) {
if (classCandidate.startsWith('(') && classCandidate.endsWith(')')) {
let base = variants.slice().reverse().join(separator)
for (let part of classCandidate.slice(1, -1).split(/\,(?![^(]*\))/g)) {
for (let part of splitAtTopLevelOnly(classCandidate.slice(1, -1), ',')) {
yield* resolveMatches(base + separator + part, context, original)
}
}

51
tests/variant-grouping.test.js
View file

@ -178,6 +178,57 @@ it('should be possible to use nested multiple grouped variants', () => {
})
})
it('should be possible to mix and match nesting and different variant combinations', () => {
let config = {
experimental: 'all',
content: [
{
raw: html`<div
class="md:[&>*]:(text-black,dark:(text-white,hover:[@supports(color:green)]:[&:nth-child(2n=1)]:text-gray-100))"
></div>`,
},
],
corePlugins: { preflight: false },
plugins: [],
}
let input = css`
@tailwind utilities;
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (min-width: 768px) {
.md\:\[\&\>\*\]\:\(text-black\2c
dark\:\(text-white\2c
hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\)
> * {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
.md\:\[\&\>\*\]\:\(text-black\2c
dark\:\(text-white\2c
hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\)
> * {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@supports (color: green) {
.md\:\[\&\>\*\]\:\(text-black\2c
dark\:\(text-white\2c
hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\):nth-child(2n=1):hover
> * {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
}
}
}
`)
})
})
it('should group with variants defined in external plugins', () => {
let config = {
experimental: 'all',