Always add layer(…) as the first param to @import

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Use configured `--letter-spacing` values for custom font size utilities ([#15099](https://github.com/tailwindlabs/tailwindcss/pull/15099))
 - Ensure `space-x/y-*` and `divide-x/y-*` with variants can undo `space-x/y-reverse` and `divide-x/y-reverse` ([#15094](https://github.com/tailwindlabs/tailwindcss/pull/15094))
+- _Upgrade (experimental)_: Always add `layer(…)` as the first param to `@import` ([#15102](https://github.com/tailwindlabs/tailwindcss/pull/15102))
 
 ### Changed
 

packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.test.ts

@@ -40,6 +40,22 @@ it('should add missing `layer(…)` to imported files', async () => {
   `)
 })
 
+it('should add missing `layer(…)` as the first param after the import itself', async () => {
+  expect(
+    await migrate(css`
+      @import 'tailwindcss/utilities' supports(--foo); /* Expected no layer */
+      @import './foo.css' supports(--foo); /* Expected layer(utilities) supports(--foo) */
+      @import './bar.css' supports(--foo); /* Expected layer(utilities) supports(--foo) */
+      @import 'tailwindcss/components' supports(--foo); /* Expected no layer */
+    `),
+  ).toMatchInlineSnapshot(`
+    "@import 'tailwindcss/utilities' supports(--foo); /* Expected no layer */
+    @import './foo.css' layer(utilities) supports(--foo); /* Expected layer(utilities) supports(--foo) */
+    @import './bar.css' layer(utilities) supports(--foo); /* Expected layer(utilities) supports(--foo) */
+    @import 'tailwindcss/components' supports(--foo); /* Expected no layer */"
+  `)
+})
+
 it('should not migrate anything if no `@tailwind` directives (or imports) are found', async () => {
   expect(
     await migrate(css`

packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.ts

@@ -1,4 +1,5 @@
 import { AtRule, type ChildNode, type Plugin, type Root } from 'postcss'
+import { segment } from '../../../tailwindcss/src/utils/segment'
 
 export function migrateMissingLayers(): Plugin {
   function migrate(root: Root) {
@@ -119,7 +120,9 @@ export function migrateMissingLayers(): Plugin {
           if (node.type !== 'atrule' || node.name !== 'import') continue
 
           if (!node.params.includes('layer(')) {
-            node.params += ` layer(${targetLayerName})`
+            let params = segment(node.params, ' ')
+            params.splice(1, 0, `layer(${targetLayerName})`)
+            node.params = params.join(' ')
             node.raws.tailwind_injected_layer = true
           }
         }