Ensure nested functions in selectors used with JavaScript plugins are not truncated

Author: philipp-spiess

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure `@reference "…"` does not emit CSS variables ([#16774](https://github.com/tailwindlabs/tailwindcss/pull/16774))
 - Fix an issue where `@reference "…"` would sometimes omit keyframe animations ([#16774](https://github.com/tailwindlabs/tailwindcss/pull/16774))
 - Ensure `z-*!` utilities are property marked as `!important` ([#16795](https://github.com/tailwindlabs/tailwindcss/pull/16795))
+- Ensure nested functions in selectors used with JavaScript plugins are not truncated
 
 ## [4.0.8] - 2025-02-21
 

packages/tailwindcss/src/compat/selector-parser.test.ts

@@ -77,6 +77,85 @@ describe('parse', () => {
       },
     ])
   })
+
+  it('parses &:has(.child:nth-child(2))', () => {
+    expect(parse('&:has(.child:nth-child(2))')).toEqual([
+      {
+        kind: 'selector',
+        value: '&',
+      },
+      {
+        kind: 'function',
+        value: ':has',
+        nodes: [
+          {
+            kind: 'selector',
+            value: '.child',
+          },
+          {
+            kind: 'function',
+            value: ':nth-child',
+            nodes: [
+              {
+                kind: 'value',
+                value: '2',
+              },
+            ],
+          },
+        ],
+      },
+    ])
+  })
+
+  it('parses &:has(:nth-child(2))', () => {
+    expect(parse('&:has(:nth-child(2))')).toEqual([
+      {
+        kind: 'selector',
+        value: '&',
+      },
+      {
+        kind: 'function',
+        value: ':has',
+        nodes: [
+          {
+            kind: 'function',
+            value: ':nth-child',
+            nodes: [
+              {
+                kind: 'value',
+                value: '2',
+              },
+            ],
+          },
+        ],
+      },
+    ])
+  })
+
+  it('parses :not(:nth-child(1))', () => {
+    expect(parse('&:not(:nth-child(1))')).toEqual([
+      {
+        kind: 'selector',
+        value: '&',
+      },
+      {
+        kind: 'function',
+        value: ':not',
+        nodes: [
+          {
+            kind: 'function',
+            value: ':nth-child',
+            nodes: [
+              {
+                kind: 'value',
+                value: '1',
+              },
+            ],
+          },
+        ],
+      },
+    ])
+  })
 })
 
 describe('toCss', () => {

packages/tailwindcss/src/compat/selector-parser.ts

@@ -300,7 +300,11 @@ export function parse(input: string) {
           buffer = ''
           i = end
 
-          ast.push(node)
+          if (parent) {
+            parent.nodes.push(node)
+          } else {
+            ast.push(node)
+          }
 
           break
         }