CSS codemod: Migrate @import "tailwindcss/tailwind.css" to @import "tailwindcss" (#14514)

This PR adds an additional step to ensure we migrate:
```css
@import "tailwindcss/tailwind.css";
```

To:
```css
@import "tailwindcss";
```
This commit is contained in:
Robin Malfait 2024-09-25 14:48:22 +02:00 • committed by GitHub
parent 723f5db38b
commit e770c0da30
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 17 additions and 1 deletions

View file

@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- _Experimental_: Improve codemod output, keep CSS after last Tailwind directive unlayered ([#14512](https://github.com/tailwindlabs/tailwindcss/pull/14512))
- _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))
## [4.0.0-alpha.25] - 2024-09-24

View file

@ -24,6 +24,16 @@ it("should not migrate `@import 'tailwindcss'`", async () => {
`)
})
it('should migrate the tailwind.css import', async () => {
expect(
await migrate(css`
@import 'tailwindcss/tailwind.css';
`),
).toEqual(css`
@import 'tailwindcss';
`)
})
it('should migrate the default @tailwind directives to a single import', async () => {
expect(
await migrate(css`

View file

@ -15,8 +15,13 @@ export function migrateTailwindDirectives(): Plugin {
let layerOrder: string[] = []
root.walkAtRules((node) => {
// Migrate legacy `@import "tailwindcss/tailwind.css"`
if (node.name === 'import' && node.params.match(/^["']tailwindcss\/tailwind\.css["']$/)) {
node.params = node.params.replace('tailwindcss/tailwind.css', 'tailwindcss')
}
// Track old imports and directives
if (
else if (
(node.name === 'tailwind' && node.params === 'base') ||
(node.name === 'import' && node.params.match(/^["']tailwindcss\/base["']$/))
) {