Skip to content

Commit

Permalink
forward the modifier during parsing
Browse files Browse the repository at this point in the history
  • Loading branch information
@RobinMalfait
RobinMalfait committed Nov 15, 2024
1 parent 2ef4ae4 commit 8865b00
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 20 deletions.
7 changes: 7 additions & 0 deletions packages/tailwindcss/src/candidate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -557,6 +557,13 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
case 'compound': {
if (value === null) return null

// Forward modifier from `not-*` and `has-*` variants to the
// compound variant.
if (modifier !== null && (root === 'not' || root === 'has')) {
value = `${value}/${modifier}`
modifier = null
}

let subVariant = designSystem.parseVariant(value)
if (subVariant === null) return null

Expand Down
4 changes: 2 additions & 2 deletions packages/tailwindcss/src/variants.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1481,7 +1481,7 @@ test('not', async () => {
--breakpoint-sm: 640px;
}
.not-group-focus\\/parent-name\\:flex:not(:where(.group):focus *), .not-peer-focus\\/parent-name\\:flex:not(:where(.peer):focus ~ *), .not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target) {
.not-group-focus\\/parent-name\\:flex:not(:where(.group\\/parent-name):focus *), .not-peer-focus\\/parent-name\\:flex:not(:where(.peer\\/parent-name):focus ~ *), .not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target) {
display: flex;
}
Expand Down Expand Up @@ -1750,7 +1750,7 @@ test('has', async () => {
],
),
).toMatchInlineSnapshot(`
".group-has-checked\\:flex:is(:where(.group):has(:checked) *), .group-has-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *), .group-has-hocus\\:flex:is(:where(.group):has(:hover, :focus) *), .group-has-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:hover, :focus) *), .group-has-\\[\\:checked\\]\\:flex:is(:where(.group):has(:checked) *), .group-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *), .group-has-\\[\\&\\>img\\]\\:flex:is(:where(.group):has(* > img) *), .group-has-\\[\\&\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(* > img) *), .group-has-\\[\\+img\\]\\:flex:is(:where(.group):has( + img) *), .group-has-\\[\\>img\\]\\:flex:is(:where(.group):has( > img) *), .group-has-\\[\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has( > img) *), .group-has-\\[\\~img\\]\\:flex:is(:where(.group):has( ~ img) *), .peer-has-checked\\:flex:is(:where(.peer):has(:checked) ~ *), .peer-has-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:checked) ~ *), .peer-has-hocus\\:flex:is(:where(.peer):has(:hover, :focus) ~ *), .peer-has-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:hover, :focus) ~ *), .peer-has-\\[\\:checked\\]\\:flex:is(:where(.peer):has(:checked) ~ *), .peer-has-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:checked) ~ *), .peer-has-\\[\\&\\>img\\]\\:flex:is(:where(.peer):has(* > img) ~ *), .peer-has-\\[\\&\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(* > img) ~ *), .peer-has-\\[\\+img\\]\\:flex:is(:where(.peer):has( + img) ~ *), .peer-has-\\[\\>img\\]\\:flex:is(:where(.peer):has( > img) ~ *), .peer-has-\\[\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has( > img) ~ *), .peer-has-\\[\\~img\\]\\:flex:is(:where(.peer):has( ~ img) ~ *), .has-group-focus\\/parent-name\\:flex:has(:is(:where(.group):focus *)), .has-peer-focus\\/parent-name\\:flex:has(:is(:where(.peer):focus ~ *)), .has-checked\\:flex:has(:checked), .has-has-group-focus\\/parent-name\\:flex:has(:has(:is(:where(.group\\/parent-name):focus *))), .has-hocus\\:flex:has(:hover, :focus), .has-\\[\\:checked\\]\\:flex:has(:checked), .has-\\[\\&\\>img\\]\\:flex:has(* > img), .has-\\[\\+img\\]\\:flex:has( + img), .has-\\[\\>img\\]\\:flex:has( > img), .has-\\[\\~img\\]\\:flex:has( ~ img) {
".group-has-checked\\:flex:is(:where(.group):has(:checked) *), .group-has-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *), .group-has-hocus\\:flex:is(:where(.group):has(:hover, :focus) *), .group-has-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:hover, :focus) *), .group-has-\\[\\:checked\\]\\:flex:is(:where(.group):has(:checked) *), .group-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *), .group-has-\\[\\&\\>img\\]\\:flex:is(:where(.group):has(* > img) *), .group-has-\\[\\&\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(* > img) *), .group-has-\\[\\+img\\]\\:flex:is(:where(.group):has( + img) *), .group-has-\\[\\>img\\]\\:flex:is(:where(.group):has( > img) *), .group-has-\\[\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has( > img) *), .group-has-\\[\\~img\\]\\:flex:is(:where(.group):has( ~ img) *), .peer-has-checked\\:flex:is(:where(.peer):has(:checked) ~ *), .peer-has-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:checked) ~ *), .peer-has-hocus\\:flex:is(:where(.peer):has(:hover, :focus) ~ *), .peer-has-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:hover, :focus) ~ *), .peer-has-\\[\\:checked\\]\\:flex:is(:where(.peer):has(:checked) ~ *), .peer-has-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:checked) ~ *), .peer-has-\\[\\&\\>img\\]\\:flex:is(:where(.peer):has(* > img) ~ *), .peer-has-\\[\\&\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(* > img) ~ *), .peer-has-\\[\\+img\\]\\:flex:is(:where(.peer):has( + img) ~ *), .peer-has-\\[\\>img\\]\\:flex:is(:where(.peer):has( > img) ~ *), .peer-has-\\[\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has( > img) ~ *), .peer-has-\\[\\~img\\]\\:flex:is(:where(.peer):has( ~ img) ~ *), .has-group-focus\\/parent-name\\:flex:has(:is(:where(.group\\/parent-name):focus *)), .has-peer-focus\\/parent-name\\:flex:has(:is(:where(.peer\\/parent-name):focus ~ *)), .has-checked\\:flex:has(:checked), .has-has-group-focus\\/parent-name\\:flex:has(:has(:is(:where(.group\\/parent-name):focus *))), .has-hocus\\:flex:has(:hover, :focus), .has-\\[\\:checked\\]\\:flex:has(:checked), .has-\\[\\&\\>img\\]\\:flex:has(* > img), .has-\\[\\+img\\]\\:flex:has( + img), .has-\\[\\>img\\]\\:flex:has( > img), .has-\\[\\~img\\]\\:flex:has( ~ img) {
display: flex;
}"
`)
Expand Down
18 changes: 0 additions & 18 deletions packages/tailwindcss/src/variants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -443,15 +443,6 @@ export function createVariants(theme: Theme): Variants {
variants.compound('not', Compounds.StyleRules | Compounds.AtRules, (ruleNode, variant) => {
if (variant.variant.kind === 'arbitrary' && variant.variant.relative) return null

if (variant.modifier) {
if (variant.variant.kind === 'compound' || variant.variant.kind === 'functional') {
variant.variant.modifier = variant.modifier
variant.modifier = null
} else {
return null
}
}

let didApply = false

walk([ruleNode], (node, { path }) => {
Expand Down Expand Up @@ -719,15 +710,6 @@ export function createVariants(theme: Theme): Variants {
staticVariant('inert', ['&:is([inert], [inert] *)'])

variants.compound('has', Compounds.StyleRules, (ruleNode, variant) => {
if (variant.modifier) {
if (variant.variant.kind === 'compound' || variant.variant.kind === 'functional') {
variant.variant.modifier = variant.modifier
variant.modifier = null
} else {
return null
}
}

let didApply = false

walk([ruleNode], (node, { path }) => {
Expand Down

0 comments on commit 8865b00

Please sign in to comment.