mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
b94720aef3
This PR is an internal refactor of the codemods package structure that will make a few follow-up PRs easier. Essentially what happens is: 1. Moved `./src/template/` into `src/codemods/template/` 2. Moved `./src/codemods` into `./src/codemods/css` (because the CSS related codemods already) 3. Moved the migration files for the JS config, PostCSS config and Prettier config into `./src/codemods/config/`. 4. Made filenames with actual migrations consistent by prefixing them with `migrate-`. 5. Made sure that all the migration functions also use `migrate…` When looking at this PR, go commit by commit, it will be easier. In a lot of cases, it's just moving files around but those commits also come with changes to the code just to update the imports. [ci-all]
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { __unstable__loadDesignSystem } from '@tailwindcss/node'
|
|
import dedent from 'dedent'
|
|
import postcss from 'postcss'
|
|
import { expect, it } from 'vitest'
|
|
import { formatNodes } from './format-nodes'
|
|
import { migrateThemeToVar } from './migrate-theme-to-var'
|
|
import { sortBuckets } from './sort-buckets'
|
|
|
|
const css = dedent
|
|
|
|
async function migrate(input: string) {
|
|
return postcss()
|
|
.use(
|
|
migrateThemeToVar({
|
|
designSystem: await __unstable__loadDesignSystem(`@import 'tailwindcss';`, {
|
|
base: __dirname,
|
|
}),
|
|
}),
|
|
)
|
|
.use(sortBuckets())
|
|
.use(formatNodes())
|
|
.process(input, { from: expect.getState().testPath })
|
|
.then((result) => result.css)
|
|
}
|
|
|
|
it('should migrate `theme(…)` to `var(…)`', async () => {
|
|
expect(
|
|
await migrate(css`
|
|
@media theme(screens.sm) {
|
|
.foo {
|
|
background-color: theme(colors.red.900);
|
|
color: theme(colors.red.900 / 75%);
|
|
border-color: theme(colors.red.200/75%);
|
|
}
|
|
}
|
|
`),
|
|
).toMatchInlineSnapshot(`
|
|
"@media --theme(--breakpoint-sm) {
|
|
.foo {
|
|
background-color: var(--color-red-900);
|
|
color: --theme(--color-red-900 / 75%);
|
|
border-color: --theme(--color-red-200 / 75%);
|
|
}
|
|
}"
|
|
`)
|
|
})
|