Improve support for custom variants in group-*, peer-*, has-*, and not-* variants (#14743)

Co-authored-by: Robin Malfait <[email protected]>

Author: thecrypticace

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Added `not-*` versions of all builtin media query and supports variants ([#14743](https://github.com/tailwindlabs/tailwindcss/pull/14743))
+- Improved support for custom variants with `group-*`, `peer-*`, `has-*`, and `not-*` ([#14743](https://github.com/tailwindlabs/tailwindcss/pull/14743))
+
 ### Changed
 
 - Don't convert underscores in the first argument to `var()` and `theme()` to spaces ([#14776](https://github.com/tailwindlabs/tailwindcss/pull/14776), [#14781](https://github.com/tailwindlabs/tailwindcss/pull/14781))
@@ -17,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Don't migrate important modifiers inside conditional statements in Vue and Alpine (e.g. `<div v-if="!border" />`) ([#14774](https://github.com/tailwindlabs/tailwindcss/pull/14774))
 - Ensure third-party plugins with `exports` in their `package.json` are resolved correctly ([#14775](https://github.com/tailwindlabs/tailwindcss/pull/14775))
 - Ensure underscores in the `url()` function are never unescaped ([#14776](https://github.com/tailwindlabs/tailwindcss/pull/14776))
+- Fixed display of complex variants in Intellisense ([#14743](https://github.com/tailwindlabs/tailwindcss/pull/14743))
 - _Upgrade (experimental)_: Ensure `@import` statements for relative CSS files are actually migrated to use relative path syntax ([#14769](https://github.com/tailwindlabs/tailwindcss/pull/14769))
 - _Upgrade (experimental)_: Only generate Preflight compatibility styles when Preflight is used ([#14773](https://github.com/tailwindlabs/tailwindcss/pull/14773))
 - _Upgrade (experimental)_: Don't escape underscores when printing theme values migrated to CSS variables in arbitrary values (e.g. `m-[var(--spacing-1_5)]` instead of `m-[var(--spacing-1\_5)]`) ([#14778](https://github.com/tailwindlabs/tailwindcss/pull/14778))

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -3859,7 +3859,68 @@ exports[`getVariants 1`] = `
     "isArbitrary": true,
     "name": "not",
     "selectors": [Function],
-    "values": [],
+    "values": [
+      "not",
+      "group",
+      "peer",
+      "first",
+      "last",
+      "only",
+      "odd",
+      "even",
+      "first-of-type",
+      "last-of-type",
+      "only-of-type",
+      "visited",
+      "target",
+      "open",
+      "default",
+      "checked",
+      "indeterminate",
+      "placeholder-shown",
+      "autofill",
+      "optional",
+      "required",
+      "valid",
+      "invalid",
+      "in-range",
+      "out-of-range",
+      "read-only",
+      "empty",
+      "focus-within",
+      "hover",
+      "focus",
+      "focus-visible",
+      "active",
+      "enabled",
+      "disabled",
+      "inert",
+      "has",
+      "aria",
+      "data",
+      "nth",
+      "nth-last",
+      "nth-of-type",
+      "nth-last-of-type",
+      "supports",
+      "motion-safe",
+      "motion-reduce",
+      "contrast-more",
+      "contrast-less",
+      "max",
+      "sm",
+      "min",
+      "@max",
+      "@",
+      "@min",
+      "portrait",
+      "landscape",
+      "ltr",
+      "rtl",
+      "dark",
+      "print",
+      "forced-colors",
+    ],
   },
   {
     "hasDash": true,

packages/tailwindcss/src/ast.ts

@@ -87,33 +87,37 @@ export function walk(
       parent: AstNode | null
       replaceWith(newNode: AstNode | AstNode[]): void
       context: Record<string, string>
+      path: AstNode[]
     },
   ) => void | WalkAction,
-  parent: AstNode | null = null,
+  parentPath: AstNode[] = [],
   context: Record<string, string> = {},
 ) {
   for (let i = 0; i < ast.length; i++) {
     let node = ast[i]
+    let path = [...parentPath, node]
+    let parent = parentPath.at(-1) ?? null
 
     // We want context nodes to be transparent in walks. This means that
     // whenever we encounter one, we immediately walk through its children and
     // furthermore we also don't update the parent.
     if (node.kind === 'context') {
-      walk(node.nodes, visit, parent, { ...context, ...node.context })
+      walk(node.nodes, visit, parentPath, { ...context, ...node.context })
       continue
     }
 
     let status =
       visit(node, {
         parent,
+        context,
+        path,
         replaceWith(newNode) {
           ast.splice(i, 1, ...(Array.isArray(newNode) ? newNode : [newNode]))
           // We want to visit the newly replaced node(s), which start at the
           // current index (i). By decrementing the index here, the next loop
           // will process this position (containing the replaced node) again.
           i--
         },
-        context,
       }) ?? WalkAction.Continue
 
     // Stop the walk entirely
@@ -123,11 +127,52 @@ export function walk(
     if (status === WalkAction.Skip) continue
 
     if (node.kind === 'rule') {
-      walk(node.nodes, visit, node, context)
+      walk(node.nodes, visit, path, context)
     }
   }
 }
 
+// This is a depth-first traversal of the AST
+export function walkDepth(
+  ast: AstNode[],
+  visit: (
+    node: AstNode,
+    utils: {
+      parent: AstNode | null
+      path: AstNode[]
+      context: Record<string, string>
+      replaceWith(newNode: AstNode[]): void
+    },
+  ) => void,
+  parentPath: AstNode[] = [],
+  context: Record<string, string> = {},
+) {
+  for (let i = 0; i < ast.length; i++) {
+    let node = ast[i]
+    let path = [...parentPath, node]
+    let parent = parentPath.at(-1) ?? null
+
+    if (node.kind === 'rule') {
+      walkDepth(node.nodes, visit, path, context)
+    } else if (node.kind === 'context') {
+      walkDepth(node.nodes, visit, parentPath, { ...context, ...node.context })
+      continue
+    }
+
+    visit(node, {
+      parent,
+      context,
+      path,
+      replaceWith(newNode) {
+        ast.splice(i, 1, ...newNode)
+
+        // Skip over the newly inserted nodes (being depth-first it doesn't make sense to visit them)
+        i += newNode.length - 1
+      },
+    })
+  }
+}
+
 export function toCss(ast: AstNode[]) {
   let atRoots: string = ''
   let seenAtProperties = new Set<string>()