mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
462308d8d7
During the migration process, a lot of changes to the CSS file happen.
Some parts are converted, some parts are deleted and some new CSS is
added.
To make sure we are generating a sensible and good looking CSS file, we
will sort the final CSS and pretty print it.
The order we came up with looks like this:
```css
/* Imports */
@import "tailwindcss";
@import "../other.css";
/* Configuration */
@config "../path/to/tailwindcss.config.js";
@plugin "my-plugin-1";
@plugin "my-plugin-2";
@source "./foo/**/*.ts";
@source "./bar/**/*.ts";
@variant foo {}
@variant bar {}
@theme {}
/* Border compatibility CSS */
@layer base {}
/* Utilities */
@utility foo {}
@utility bar {}
/* Rest of your own CSS if any */
```
---------
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import postcss, { type Plugin } from 'postcss'
|
|
import { expect, it } from 'vitest'
|
|
import { formatNodes } from './format-nodes'
|
|
import { sortBuckets } from './sort-buckets'
|
|
|
|
function markPretty(): Plugin {
|
|
return {
|
|
postcssPlugin: '@tailwindcss/upgrade/mark-pretty',
|
|
OnceExit(root) {
|
|
root.walkAtRules('tw-format', (atRule) => {
|
|
atRule.raws.tailwind_pretty = true
|
|
})
|
|
},
|
|
}
|
|
}
|
|
|
|
function migrate(input: string) {
|
|
return postcss()
|
|
.use(markPretty())
|
|
.use(sortBuckets())
|
|
.use(formatNodes())
|
|
.process(input, { from: expect.getState().testPath })
|
|
.then((result) => result.css)
|
|
}
|
|
|
|
it('should format PostCSS nodes', async () => {
|
|
expect(await migrate(`@utility .foo { .foo { color: red; } }`)).toMatchInlineSnapshot(`
|
|
"@utility .foo {
|
|
.foo {
|
|
color: red;
|
|
}
|
|
}"
|
|
`)
|
|
})
|
|
|
|
it('should format PostCSS nodes in the `user` bucket', async () => {
|
|
expect(await migrate(`@tw-bucket user { @tw-format .bar { .foo { color: red; } } }`))
|
|
.toMatchInlineSnapshot(`
|
|
"@tw-format .bar {
|
|
.foo {
|
|
color: red;
|
|
}
|
|
}"
|
|
`)
|
|
})
|