Skip to content

Commit dd2058d

Browse files
authored
Always add layer(…) as the first param to @import (#15102)
This PR ensures that when we inject `layer(…)` into an `@import` that it always gets inserted as the first param. The `layer(…)` has to come first by spec. Input: ```css @import "./foo" supports(--foo); ``` Before: ```css @import "./foo" supports(--foo) layer(utilities); ``` After: ```css @import "./foo" layer(utilities) supports(--foo); ```
1 parent dad9ac6 commit dd2058d

File tree

3 files changed

+21
-1
lines changed

3 files changed

+21
-1
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1111

1212
- Use configured `--letter-spacing` values for custom font size utilities ([#15099](https://github.com/tailwindlabs/tailwindcss/pull/15099))
1313
- 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))
14+
- _Upgrade (experimental)_: Always add `layer(…)` as the first param to `@import` ([#15102](https://github.com/tailwindlabs/tailwindcss/pull/15102))
1415

1516
### Changed
1617

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,22 @@ it('should add missing `layer(…)` to imported files', async () => {
4040
`)
4141
})
4242

43+
it('should add missing `layer(…)` as the first param after the import itself', async () => {
44+
expect(
45+
await migrate(css`
46+
@import 'tailwindcss/utilities' supports(--foo); /* Expected no layer */
47+
@import './foo.css' supports(--foo); /* Expected layer(utilities) supports(--foo) */
48+
@import './bar.css' supports(--foo); /* Expected layer(utilities) supports(--foo) */
49+
@import 'tailwindcss/components' supports(--foo); /* Expected no layer */
50+
`),
51+
).toMatchInlineSnapshot(`
52+
"@import 'tailwindcss/utilities' supports(--foo); /* Expected no layer */
53+
@import './foo.css' layer(utilities) supports(--foo); /* Expected layer(utilities) supports(--foo) */
54+
@import './bar.css' layer(utilities) supports(--foo); /* Expected layer(utilities) supports(--foo) */
55+
@import 'tailwindcss/components' supports(--foo); /* Expected no layer */"
56+
`)
57+
})
58+
4359
it('should not migrate anything if no `@tailwind` directives (or imports) are found', async () => {
4460
expect(
4561
await migrate(css`

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { AtRule, type ChildNode, type Plugin, type Root } from 'postcss'
2+
import { segment } from '../../../tailwindcss/src/utils/segment'
23

34
export function migrateMissingLayers(): Plugin {
45
function migrate(root: Root) {
@@ -119,7 +120,9 @@ export function migrateMissingLayers(): Plugin {
119120
if (node.type !== 'atrule' || node.name !== 'import') continue
120121

121122
if (!node.params.includes('layer(')) {
122-
node.params += ` layer(${targetLayerName})`
123+
let params = segment(node.params, ' ')
124+
params.splice(1, 0, `layer(${targetLayerName})`)
125+
node.params = params.join(' ')
123126
node.raws.tailwind_injected_layer = true
124127
}
125128
}

0 commit comments

Comments
 (0)