3ae22f1f9d
This PR adds a codemod that migrates the `@media screen(…)` to the
properly expanded `@media (…)` syntax.
```css
@media screen(md) {
.foo {
color: red;
}
}
```
Will be converted to:
```css
@media (width >= 48rem) {
.foo {
color: red;
}
}
```
If you happen to have custom screens (even complex ones), the screen
will be converted to a custom media query.
```css
@media screen(foo) {
.foo {
color: red;
}
}
```
With a custom `tailwind.config.js` file with a config like this:
```js
module.exports = {
// …
theme: {
screens: {
foo: { min: '100px', max: '123px' },
},
}
}
```
Then the codemod will convert it to:
```css
@media (123px >= width >= 100px) {
.foo {
color: red;
}
}
```
36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import fs from 'node:fs/promises'
|
|
import path from 'node:path'
|
|
import postcss from 'postcss'
|
|
import type { Config } from 'tailwindcss'
|
|
import type { DesignSystem } from '../../tailwindcss/src/design-system'
|
|
import { formatNodes } from './codemods/format-nodes'
|
|
import { migrateAtApply } from './codemods/migrate-at-apply'
|
|
import { migrateAtLayerUtilities } from './codemods/migrate-at-layer-utilities'
|
|
import { migrateMediaScreen } from './codemods/migrate-media-screen'
|
|
import { migrateMissingLayers } from './codemods/migrate-missing-layers'
|
|
import { migrateTailwindDirectives } from './codemods/migrate-tailwind-directives'
|
|
|
|
export interface MigrateOptions {
|
|
newPrefix: string | null
|
|
designSystem: DesignSystem
|
|
userConfig: Config
|
|
}
|
|
|
|
export async function migrateContents(contents: string, options: MigrateOptions, file?: string) {
|
|
return postcss()
|
|
.use(migrateAtApply(options))
|
|
.use(migrateMediaScreen(options))
|
|
.use(migrateAtLayerUtilities())
|
|
.use(migrateMissingLayers())
|
|
.use(migrateTailwindDirectives(options))
|
|
.use(formatNodes())
|
|
.process(contents, { from: file })
|
|
.then((result) => result.css)
|
|
}
|
|
|
|
export async function migrate(file: string, options: MigrateOptions) {
|
|
let fullPath = path.resolve(process.cwd(), file)
|
|
let contents = await fs.readFile(fullPath, 'utf-8')
|
|
|
|
await fs.writeFile(fullPath, await migrateContents(contents, options, fullPath))
|
|
}
|