Use AST transformations in @tailwindcss/postcss

packages/@tailwindcss-node/src/compile.ts

@@ -7,15 +7,80 @@ import { pathToFileURL } from 'node:url'
 import {
   __unstable__loadDesignSystem as ___unstable__loadDesignSystem,
   compile as _compile,
+  compileAst as _compileAst,
   Features,
 } from 'tailwindcss'
+import type { AstNode } from '../../tailwindcss/src/ast'
 import { getModuleDependencies } from './get-module-dependencies'
 import { rewriteUrls } from './urls'
 
 export { Features }
 
 export type Resolver = (id: string, base: string) => Promise<string | false | undefined>
 
+export async function compileAst(
+  ast: AstNode[],
+  {
+    base,
+    onDependency,
+    shouldRewriteUrls,
+
+    customCssResolver,
+    customJsResolver,
+  }: {
+    base: string
+    onDependency: (path: string) => void
+    shouldRewriteUrls?: boolean
+
+    customCssResolver?: Resolver
+    customJsResolver?: Resolver
+  },
+) {
+  let compiler = await _compileAst(ast, {
+    base,
+    async loadModule(id, base) {
+      return loadModule(id, base, onDependency, customJsResolver)
+    },
+    async loadStylesheet(id, base) {
+      let sheet = await loadStylesheet(id, base, onDependency, customCssResolver)
+
+      if (shouldRewriteUrls) {
+        sheet.content = await rewriteUrls({
+          css: sheet.content,
+          root: base,
+          base: sheet.base,
+        })
+      }
+
+      return sheet
+    },
+  })
+
+  // Verify if the `source(…)` path exists (until the glob pattern starts)
+  if (compiler.root && compiler.root !== 'none') {
+    let globSymbols = /[*{]/
+    let basePath = []
+    for (let segment of compiler.root.pattern.split('/')) {
+      if (globSymbols.test(segment)) {
+        break
+      }
+
+      basePath.push(segment)
+    }
+
+    let exists = await fsPromises
+      .stat(path.resolve(base, basePath.join('/')))
+      .then((stat) => stat.isDirectory())
+      .catch(() => false)
+
+    if (!exists) {
+      throw new Error(`The \`source(${compiler.root.pattern})\` does not exist`)
+    }
+  }
+
+  return compiler
+}
+
 export async function compile(
   css: string,
   {

packages/@tailwindcss-node/src/index.ts

@@ -1,7 +1,7 @@
 import * as Module from 'node:module'
 import { pathToFileURL } from 'node:url'
 import * as env from './env'
-export { __unstable__loadDesignSystem, compile, Features } from './compile'
+export { __unstable__loadDesignSystem, compile, compileAst, Features } from './compile'
 export * from './normalize-path'
 export { env }
 

packages/@tailwindcss-postcss/src/ast.test.ts

@@ -0,0 +1,107 @@
+import dedent from 'dedent'
+import postcss from 'postcss'
+import { expect, it } from 'vitest'
+import { toCss } from '../../tailwindcss/src/ast'
+import { parse } from '../../tailwindcss/src/css-parser'
+import { cssAstToPostCssAst, postCssAstToCssAst } from './ast'
+
+let css = dedent
+
+it('should convert a PostCSS AST into a Tailwind CSS AST', () => {
+  let input = css`
+    @charset "UTF-8";
+
+    @layer foo, bar, baz;
+
+    @import 'tailwindcss';
+
+    .foo {
+      color: red;
+
+      &:hover {
+        color: blue;
+      }
+
+      .bar {
+        color: green !important;
+        background-color: yellow;
+
+        @media (min-width: 640px) {
+          color: orange;
+        }
+      }
+    }
+  `
+
+  let ast = postcss.parse(input)
+  let transformedAst = postCssAstToCssAst(ast)
+
+  expect(toCss(transformedAst)).toMatchInlineSnapshot(`
+    "@charset "UTF-8";
+    @layer foo, bar, baz;
+    @import 'tailwindcss';
+    .foo {
+      color: red;
+      &:hover {
+        color: blue;
+      }
+      .bar {
+        color: green !important;
+        background-color: yellow;
+        @media (min-width: 640px) {
+          color: orange;
+        }
+      }
+    }
+    "
+  `)
+})
+
+it('should convert a Tailwind CSS AST into a PostCSS AST', () => {
+  let input = css`
+    @charset "UTF-8";
+
+    @layer foo, bar, baz;
+
+    @import 'tailwindcss';
+
+    .foo {
+      color: red;
+
+      &:hover {
+        color: blue;
+      }
+
+      .bar {
+        color: green !important;
+        background-color: yellow;
+
+        @media (min-width: 640px) {
+          color: orange;
+        }
+      }
+    }
+  `
+
+  let ast = parse(input)
+  let transformedAst = cssAstToPostCssAst(ast)
+
+  expect(transformedAst.toString()).toMatchInlineSnapshot(`
+    "@charset "UTF-8";
+    @layer foo, bar, baz;
+    @import 'tailwindcss';
+    .foo {
+        color: red;
+        &:hover {
+            color: blue
+        }
+        .bar {
+            color: green !important;
+            background-color: yellow;
+            @media (min-width: 640px) {
+                color: orange
+            }
+        }
+    }"
+  `)
+})

packages/@tailwindcss-postcss/src/ast.ts

@@ -0,0 +1,108 @@
+import postcss, {
+  type ChildNode as PostCssChildNode,
+  type Container as PostCssContainerNode,
+  type Root as PostCssRoot,
+  type Source as PostcssSource,
+} from 'postcss'
+import { atRule, comment, decl, rule, type AstNode } from '../../tailwindcss/src/ast'
+
+export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undefined): PostCssRoot {
+  let root = postcss.root()
+  root.source = source
+
+  function transform(node: AstNode, parent: PostCssContainerNode) {
+    // Declaration
+    if (node.kind === 'declaration') {
+      let astNode = postcss.decl({
+        prop: node.property,
+        value: node.value ?? '',
+        important: node.important,
+      })
+      astNode.source = source
+      parent.append(astNode)
+    }
+
+    // Rule
+    else if (node.kind === 'rule') {
+      let astNode = postcss.rule({ selector: node.selector })
+      astNode.source = source
+      parent.append(astNode)
+      for (let child of node.nodes) {
+        transform(child, astNode)
+      }
+    }
+
+    // AtRule
+    else if (node.kind === 'at-rule') {
+      let astNode = postcss.atRule({ name: node.name.slice(1), params: node.params })
+      astNode.source = source
+      parent.append(astNode)
+      for (let child of node.nodes) {
+        transform(child, astNode)
+      }
+    }
+
+    // Comment
+    else if (node.kind === 'comment') {
+      let astNode = postcss.comment({ text: node.value })
+      astNode.source = source
+      parent.append(astNode)
+    }
+
+    // AtRoot & Context should not happen
+    else if (node.kind === 'at-root' || node.kind === 'context') {
+    }
+
+    // Unknown
+    else {
+      node satisfies never
+    }
+  }
+
+  for (let node of ast) {
+    transform(node, root)
+  }
+
+  return root
+}
+
+export function postCssAstToCssAst(root: PostCssRoot): AstNode[] {
+  function transform(
+    node: PostCssChildNode,
+    parent: Extract<AstNode, { nodes: AstNode[] }>['nodes'],
+  ) {
+    // Declaration
+    if (node.type === 'decl') {
+      parent.push(decl(node.prop, node.value, node.important))
+    }
+
+    // Rule
+    else if (node.type === 'rule') {
+      let astNode = rule(node.selector)
+      node.each((child) => transform(child, astNode.nodes))
+      parent.push(astNode)
+    }
+
+    // AtRule
+    else if (node.type === 'atrule') {
+      let astNode = atRule(`@${node.name}`, node.params)
+      node.each((child) => transform(child, astNode.nodes))
+      parent.push(astNode)
+    }
+
+    // Comment
+    else if (node.type === 'comment') {
+      parent.push(comment(node.text))
+    }
+
+    // Unknown
+    else {
+      node satisfies never
+    }
+  }
+
+  let ast: AstNode[] = []
+  root.each((node) => transform(node, ast))
+
+  return ast
+}