mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
3da49f9837
This PR extends our JS configuration to CSS migration by also allowing `plugins` with options.
An example of such config would be:
```js
import { type Config } from 'tailwindcss'
import myPlugin from "./myPlugin";
export default {
plugins: [
myPlugin({
class: "tw",
}),
],
} satisfies Config;
```
If the option object contains only values allowed in our CSS API, we can convert this to CSS entirely:
```css
@plugin './myPlugin' {
class: 'tw';
}
```
39 lines
1010 B
TypeScript
39 lines
1010 B
TypeScript
import { parse, type ChildNode, type Plugin, type Root } from 'postcss'
|
|
import { format } from 'prettier'
|
|
import { walk, WalkAction } from '../utils/walk'
|
|
|
|
// Prettier is used to generate cleaner output, but it's only used on the nodes
|
|
// that were marked as `pretty` during the migration.
|
|
export function formatNodes(): Plugin {
|
|
async function migrate(root: Root) {
|
|
// Find the nodes to format
|
|
let nodesToFormat: ChildNode[] = []
|
|
walk(root, (child) => {
|
|
if (child.raws.tailwind_pretty) {
|
|
nodesToFormat.push(child)
|
|
return WalkAction.Skip
|
|
}
|
|
})
|
|
|
|
// Format the nodes
|
|
await Promise.all(
|
|
nodesToFormat.map(async (node) => {
|
|
node.replaceWith(
|
|
parse(
|
|
await format(node.toString(), {
|
|
parser: 'css',
|
|
semi: true,
|
|
singleQuote: true,
|
|
}),
|
|
),
|
|
)
|
|
}),
|
|
)
|
|
}
|
|
|
|
return {
|
|
postcssPlugin: '@tailwindcss/upgrade/format-nodes',
|
|
OnceExit: migrate,
|
|
}
|
|
}
|