Skip to content

Fix @scope variant output and add test for scoped variant #19299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix @scope variant output and add test for scoped variant #19299

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5cce25
Fix @scope variant output and add test for scoped variant
SHARMA1525 Nov 12, 2025
6a155a6
Allow variants to request outer wrapper nodes
SHARMA1525 Nov 12, 2025
7d5cb61
Merge branch 'main' into fixed-scope
SHARMA1525 Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Allow variants to request outer wrapper nodes
  • Loading branch information
@SHARMA1525
SHARMA1525 committed Nov 12, 2025
commit 6a155a6d6ca6b2b86989608d9542b75b586750b4
10 changes: 0 additions & 10 deletions packages/tailwindcss/src/ast.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,16 +325,6 @@ export function optimizeAst(



if (
nodes.length === 1 &&
nodes[0].kind === 'at-rule' &&
(nodes[0].name === '@media' || nodes[0].name === '@supports' || nodes[0].name === '@container' || nodes[0].name === '@scope')
) {
let at = nodes[0]
parent.push(atRule(at.name, at.params, [styleRule(node.selector, at.nodes)]))
return
}

// Rules with `&` as the selector should be flattened
if (node.selector === '&') {
parent.push(...nodes)
Expand Down
13 changes: 12 additions & 1 deletion packages/tailwindcss/src/compat/plugin-api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,18 @@ export function buildPluginApi({
designSystem.variants.static(
name,
(r) => {
r.nodes = parseVariantValue(variant, r.nodes)
let body = parseVariantValue(variant, r.nodes)

const isBlock =
typeof variant === 'string'
? variant.trim().endsWith('}')
: variant.some((v) => v.trim().endsWith('}'))

if (isBlock && body.length === 1 && body[0].kind === 'at-rule') {
return body[0]
}
Comment on lines +148 to +157
Copy link

@coderabbitai coderabbitai bot Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Don’t gate the at-rule collapse on isBlock.

isBlock only returns true when the raw variant string literally ends with }. As soon as someone writes a scoped variant with a trailing comment or other postfix (e.g. addVariant('scoped', '@scope (&) { @slot } /* note */')), the condition fails, we skip the body[0] return, and the compiler falls back to emitting .selector { @scope … }—the exact invalid structure this PR is meant to fix. Please decide purely from the parsed AST (e.g. if (body.length === 1 && body[0].kind === 'at-rule')) so single at-rule variants are collapsed regardless of formatting. This keeps the fix from regressing in common “annotated” plugin variants.

🤖 Prompt for AI Agents 
In packages/tailwindcss/src/compat/plugin-api.ts around lines 148 to 157, the
code currently gates collapsing a single at-rule variant on the heuristic
isBlock (which checks whether the raw variant text ends with '}'), causing
variants with trailing comments or other postfixes to miss the collapse and
produce invalid output; change the logic to decide solely from the parsed AST by
removing the isBlock requirement and returning body[0] whenever body.length ===
1 and body[0].kind === 'at-rule' so single at-rule variants are collapsed
regardless of trailing formatting or comments.


r.nodes = body
},
{
compounds: compoundsForSelectors(typeof variant === 'string' ? [variant] : variant),
Expand Down
45 changes: 45 additions & 0 deletions packages/tailwindcss/src/compile.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,10 @@ export function applyVariant(
// not hitting this code path.
let { applyFn } = variants.get(variant.root)!



let originalSelector = node.kind === 'rule' ? (node as StyleRule).selector : undefined

if (variant.kind === 'compound') {
// Some variants traverse the AST to mutate the nodes. E.g.: `group-*` wants
// to prefix every selector of the variant it's compounding with `.group`.
Expand Down Expand Up @@ -255,6 +259,47 @@ export function applyVariant(
// All other variants
let result = applyFn(node, variant)
if (result === null) return null






if (result && typeof result === 'object' && 'kind' in (result as any)) {
const newNode = result as AstNode
if (newNode.kind === 'at-rule' && originalSelector) {
let replaced = false
walk(newNode.nodes, (child) => {
if (child.kind === 'rule' && child.selector === '&') {
child.selector = originalSelector!
replaced = true
}
})

if (!replaced) {
newNode.nodes = [rule(originalSelector!, newNode.nodes)]
}
}


if (newNode.kind === 'at-rule') {
;(node as any).kind = 'at-rule'
;(node as any).name = newNode.name
;(node as any).params = newNode.params
;(node as any).nodes = newNode.nodes

delete (node as any).selector
} else if (newNode.kind === 'rule') {
;(node as any).kind = 'rule'
;(node as any).selector = newNode.selector
;(node as any).nodes = newNode.nodes
delete (node as any).name
delete (node as any).params
} else {

;(node as any).nodes = (newNode as any).nodes ?? []
}
}
}

function isFallbackUtility(utility: Utility) {
Expand Down
2 changes: 1 addition & 1 deletion packages/tailwindcss/src/variants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const IS_VALID_VARIANT_NAME = /^@?[a-z0-9][a-zA-Z0-9_-]*(?<![_-])$/
type VariantFn<T extends Variant['kind']> = (
rule: Rule,
variant: Extract<Variant, { kind: T }>,
) => null | void
) => null | void | AstNode

type CompareFn = (a: Variant, z: Variant) => number

Expand Down