CSS codemod: ensure we don't lose selectors

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Experimental_: Fix incorrect empty `layer()` at the end of `@import` at-rules when running codemods ([#14513](https://github.com/tailwindlabs/tailwindcss/pull/14513))
 - _Experimental_: Migrate `@import "tailwindcss/tailwind.css"` to `@import "tailwindcss"` ([#14514](https://github.com/tailwindlabs/tailwindcss/pull/14514))
 - _Experimental_: Do not wrap comment nodes in `@layer` when running codemods ([#14517](https://github.com/tailwindlabs/tailwindcss/pull/14517))
+- _Experimental_: Ensure we don't lose selectors when running codemods ([#14518](https://github.com/tailwindlabs/tailwindcss/pull/14518))
 
 ## [4.0.0-alpha.25] - 2024-09-24
 

packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.test.ts

@@ -783,3 +783,40 @@ describe('comments', () => {
     `)
   })
 })
+
+// Saw this when testing codemods on https://github.com/docker/docs
+it('should not lose attribute selectors', async () => {
+  expect(
+    await migrate(css`
+      @layer components {
+        #TableOfContents {
+          .toc a {
+            @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
+            &[aria-current='true'],
+            &:hover {
+              @apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white;
+            }
+            &:not([aria-current='true']) {
+              @apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white;
+            }
+          }
+        }
+      }
+    `),
+  ).toMatchInlineSnapshot(`
+    "@layer components {
+      #TableOfContents {
+        .toc a {
+          @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
+          &[aria-current='true'],
+          &:hover {
+            @apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white;
+          }
+          &:not([aria-current='true']) {
+            @apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white;
+          }
+        }
+      }
+    }"
+  `)
+})

packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.ts

@@ -75,9 +75,8 @@ export function migrateAtLayerUtilities(): Plugin {
               return WalkAction.Stop
             }
           })
-          node.selector = selector.toString()
         })
-      }).processSync(node.selector, { updateSelector: false })
+      }).processSync(node, { updateSelector: true })
     })
 
     // Upgrade every Rule in `@layer utilities` to an `@utility` at-rule.
@@ -157,10 +156,7 @@ export function migrateAtLayerUtilities(): Plugin {
               }
             })
           })
-
-          // Update the selector
-          node.selector = selectors.toString()
-        }).processSync(node.selector)
+        }).processSync(node, { updateSelector: true })
 
         // Cleanup all the nodes that should not be part of the `@utility` rule.
         if (!containsClass) {