mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2026-01-18 16:17:36 +00:00
d869442a54
This PR adds a codemod that ensures that some parts of your stylesheet are wrapped in an `@layer`. This is a follow-up PR of #14411, in that PR we migrate `@tailwind` directives to imports. As a quick summary, that will turn this: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` Into: ```css @import 'tailwindcss'; ``` But there are a few issues with that _if_ we have additional CSS on the page. For example let's imagine we had this: ```css @tailwind base; body { background-color: red; } @tailwind components; .btn {} @tailwind utilities; ``` This will now be turned into: ```css @import 'tailwindcss'; body { background-color: red; } .btn {} ``` But in v4 we use real layers, in v3 we used to replace the directive with the result of that layer. This means that now the `body` and `.btn` styles are in the incorrect spot. To solve this, we have to wrap them in a layer. The `body` should go in an `@layer base`, and the `.btn` should be in an `@layer components` to make sure it's in the same spot as it was before. That's what this PR does, the original input will now be turned into: ```css @import 'tailwindcss'; @layer base { body { background-color: red; } } @layer components { .btn { } } ``` There are a few internal refactors going on as well, but those are less important.
27 lines
999 B
TypeScript
27 lines
999 B
TypeScript
import fs from 'node:fs/promises'
|
|
import path from 'node:path'
|
|
import postcss from 'postcss'
|
|
import { formatNodes } from './codemods/format-nodes'
|
|
import { migrateAtApply } from './codemods/migrate-at-apply'
|
|
import { migrateAtLayerUtilities } from './codemods/migrate-at-layer-utilities'
|
|
import { migrateMissingLayers } from './codemods/migrate-missing-layers'
|
|
import { migrateTailwindDirectives } from './codemods/migrate-tailwind-directives'
|
|
|
|
export async function migrateContents(contents: string, file?: string) {
|
|
return postcss()
|
|
.use(migrateAtApply())
|
|
.use(migrateAtLayerUtilities())
|
|
.use(migrateMissingLayers())
|
|
.use(migrateTailwindDirectives())
|
|
.use(formatNodes())
|
|
.process(contents, { from: file })
|
|
.then((result) => result.css)
|
|
}
|
|
|
|
export async function migrate(file: string) {
|
|
let fullPath = path.resolve(process.cwd(), file)
|
|
let contents = await fs.readFile(fullPath, 'utf-8')
|
|
|
|
await fs.writeFile(fullPath, await migrateContents(contents, fullPath))
|
|
}
|