do not convert [&>…] to *:…

Author: RobinMalfait

packages/@tailwindcss-upgrade/src/template/codemods/modernize-arbitrary-values.test.ts

@@ -7,8 +7,17 @@ test.each([
   ['[[data-visible]]:flex', 'data-visible:flex'],
   ['[&[data-visible]]:flex', 'data-visible:flex'],
   ['[[data-visible]&]:flex', 'data-visible:flex'],
-  ['[&>[data-visible]]:flex', '*:data-visible:flex'],
-  ['[&_>_[data-visible]]:flex', '*:data-visible:flex'],
+
+  // Keep as-is. Ideally this is converted to `*:data-visible:flex`, but that
+  // changes the specificity from (0, 2, 0) to (0, 1, 0)
+  //
+  // E.g.:
+  //
+  // - .\[\&\>\[data-visible\]\]\:flex > [data-visible]     (0, 2, 0)
+  // - [data-visible]:where(.\*\:data-visible\:flex > *)    (0, 1, 0)
+  //
+  ['[&>[data-visible]]:flex', '[&>[data-visible]]:flex'],
+  ['[&_>_[data-visible]]:flex', '[&_>_[data-visible]]:flex'],
 
   // Keep multiple attribute selectors as-is
   ['[[data-visible][data-dark]]:flex', '[[data-visible][data-dark]]:flex'],

packages/@tailwindcss-upgrade/src/template/codemods/modernize-arbitrary-values.ts

@@ -13,7 +13,7 @@ export function modernizeArbitraryValues(
     let clone = structuredClone(candidate)
     let changed = false
 
-    for (let [variant, parent] of variants(clone)) {
+    for (let variant of variants(clone)) {
       // Expecting an arbitrary variant
       if (variant.kind !== 'arbitrary') continue
 
@@ -25,26 +25,6 @@ export function modernizeArbitraryValues(
       // Expecting a single selector node
       if (ast.nodes.length !== 1) continue
 
-      // Track whether we need to add a `*:` variant
-      let addChildVariant = false
-
-      // Handling a child combinator. E.g.: `[&>[data-visible]]` => `*:data-visible`
-      if (
-        // Only top-level, so `has-[&>[data-visible]]` is not supported
-        parent === null &&
-        // [&_>_[data-visible]]:flex
-        //  ^ ^ ^^^^^^^^^^^^^^
-        ast.nodes[0].length === 3 &&
-        ast.nodes[0].nodes[0].type === 'nesting' &&
-        ast.nodes[0].nodes[0].value === '&' &&
-        ast.nodes[0].nodes[1].type === 'combinator' &&
-        ast.nodes[0].nodes[1].value === '>' &&
-        ast.nodes[0].nodes[2].type === 'attribute'
-      ) {
-        ast.nodes[0].nodes = [ast.nodes[0].nodes[2]]
-        addChildVariant = true
-      }
-
       // Filter out `&`. E.g.: `&[data-foo]` => `[data-foo]`
       let selectorNodes = ast.nodes[0].filter((node) => node.type !== 'nesting')
 
@@ -113,14 +93,6 @@ export function modernizeArbitraryValues(
                 : { kind: 'arbitrary', value: `${attributeKey}${operator}${attributeValue}` }, // aria-[foo~="true"], aria-[foo|="true"], …
         } satisfies Variant)
       }
-
-      if (addChildVariant) {
-        let idx = clone.variants.indexOf(variant)
-        if (idx === -1) continue
-
-        // Ensure we have the `*:` variant
-        clone.variants.splice(idx, 1, variant, { kind: 'static', root: '*' })
-      }
     }
 
     return changed ? printCandidate(designSystem, clone) : rawCandidate
@@ -130,18 +102,15 @@ export function modernizeArbitraryValues(
 }
 
 function* variants(candidate: Candidate) {
-  function* inner(
-    variant: Variant,
-    parent: Extract<Variant, { kind: 'compound' }> | null = null,
-  ): Iterable<[Variant, Extract<Variant, { kind: 'compound' }> | null]> {
-    yield [variant, parent]
+  function* inner(variant: Variant): Iterable<Variant> {
+    yield variant
 
     if (variant.kind === 'compound') {
-      yield* inner(variant.variant, variant)
+      yield* inner(variant.variant)
     }
   }
 
   for (let variant of candidate.variants) {
-    yield* inner(variant, null)
+    yield* inner(variant)
   }
 }