migrate [[data-visible]_&] to in-data-visible

tailwindlabs · Nov 18, 2024 · a7feae7 · a7feae7
1 parent 9dc5ec4
commit a7feae7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/modernize-arbitrary-values.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/modernize-arbitrary-values.test.ts
@@ -16,8 +16,9 @@ test.each([
   ['[&:not(:first-child)]:flex', 'not-first:flex'],
 
   // in-* variants
-  ['[p_&]:flex', 'in-p:flex'],
+  ['[p_&]:flex', 'in-[p]:flex'],
   ['[.foo_&]:flex', 'in-[.foo]:flex'],
+  ['[[data-visible]_&]:flex', 'in-data-visible:flex'],
   // Some extreme examples of what happens in the wild:
   ['group-[]:flex', 'in-[.group]:flex'],
   ['group-[]/name:flex', 'in-[.group\\/name]:flex'],

diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/modernize-arbitrary-values.ts b/packages/@tailwindcss-upgrade/src/template/codemods/modernize-arbitrary-values.ts
@@ -16,7 +16,10 @@ export function modernizeArbitraryValues(
 
     for (let [variant, parent] of variants(clone)) {
       // Forward modifier from the root to the compound variant
-      if (variant.kind === 'compound' && (variant.root === 'has' || variant.root === 'not')) {
+      if (
+        variant.kind === 'compound' &&
+        (variant.root === 'has' || variant.root === 'not' || variant.root === 'in')
+      ) {
         if (variant.modifier !== null) {
           if ('modifier' in variant.variant) {
             variant.variant.modifier = variant.modifier
@@ -97,6 +100,30 @@ export function modernizeArbitraryValues(
         prefixedVariant = designSystem.parseVariant('**')
       }
 
+      // Handling a child/parent combinator. E.g.: `[[data-visible]_&]` => `in-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 === 'attribute' &&
+        ast.nodes[0].nodes[1].type === 'combinator' &&
+        ast.nodes[0].nodes[1].value === ' ' &&
+        ast.nodes[0].nodes[2].type === 'nesting' &&
+        ast.nodes[0].nodes[2].value === '&'
+      ) {
+        ast.nodes[0].nodes = [ast.nodes[0].nodes[0]]
+        changed = true
+        // When handling a compound like `in-[[data-visible]]`, we will first
+        // handle `[[data-visible]]`, then the parent `in-*` part. This means
+        // that we can convert `[[data-visible]_&]` to `in-[[data-visible]]`.
+        //
+        // Later this gets converted to `in-data-visible`.
+        Object.assign(variant, designSystem.parseVariant(`in-[${ast.toString()}]`))
+        continue
+      }
+
       // `in-*` variant
       if (
         // Only top-level, so `has-[p_&]` is not supported
@@ -124,12 +151,7 @@ export function modernizeArbitraryValues(
         }
 
         changed = true
-        if (nodes.length === 1 && nodes[0].type === 'tag') {
-          Object.assign(variant, designSystem.parseVariant(`in-${selector.toString().trim()}`))
-        } else {
-          Object.assign(variant, designSystem.parseVariant(`in-[${selector.toString().trim()}]`))
-        }
-
+        Object.assign(variant, designSystem.parseVariant(`in-[${selector.toString().trim()}]`))
         continue
       }