Add @import resolver

packages/tailwindcss/src/at-import.test.ts

@@ -0,0 +1,79 @@
+import { expect, it } from 'vitest'
+import { compile } from './index'
+
+let css = String.raw
+
+async function run(
+  css: string,
+  resolveImport: (id: string, basedir: string) => Promise<{ content: string; basedir: string }>,
+) {
+  let compiler = await compile(css, '/root', { resolveImport })
+  return compiler.build([])
+}
+
+it('can resolve relative @imports', async () => {
+  let resolver = async (id: string, basedir: string) => {
+    expect(basedir).toBe('/root')
+    expect(id).toBe('./foo/bar.css')
+    return {
+      content: css`
+        .foo {
+          color: red;
+        }
+      `,
+      basedir: '/root/foo',
+    }
+  }
+
+  await expect(
+    run(
+      css`
+        @import './foo/bar.css';
+      `,
+      resolver,
+    ),
+  ).resolves.toMatchInlineSnapshot(`
+    ".foo {
+      color: red;
+    }
+    "
+  `)
+})
+
+it('can recursively resolve relative @imports', async () => {
+  let resolver = async (id: string, basedir: string) => {
+    if (basedir === '/root' && id === './foo/bar.css') {
+      return {
+        content: css`
+          @import './bar/baz.css';
+        `,
+        basedir: '/root/foo',
+      }
+    } else if (basedir === '/root/foo' && id === './bar/baz.css') {
+      return {
+        content: css`
+          .baz {
+            color: blue;
+          }
+        `,
+        basedir: '/root/foo/bar',
+      }
+    }
+
+    throw new Error(`Unexpected import: ${id}`)
+  }
+
+  await expect(
+    run(
+      css`
+        @import './foo/bar.css';
+      `,
+      resolver,
+    ),
+  ).resolves.toMatchInlineSnapshot(`
+    ".baz {
+      color: blue;
+    }
+    "
+  `)
+})

packages/tailwindcss/src/at-import.ts

@@ -0,0 +1,52 @@
+import { walk, WalkAction, type AstNode } from './ast'
+import * as CSS from './css-parser'
+
+type ResolveImport = (id: string, basedir: string) => Promise<{ content: string; basedir: string }>
+
+export async function substituteAtImports(
+  ast: AstNode[],
+  basedir: string,
+  resolveImport: ResolveImport,
+) {
+  let promises: Map<string, Promise<AstNode[]>> = new Map()
+
+  walk(ast, (node) => {
+    // Find @import rules and start resolving them
+    if (node.kind === 'rule' && node.selector[0] === '@' && node.selector.startsWith('@import ')) {
+      let id = node.selector.slice('@import "'.length, -1)
+      promises.set(key(id, basedir), resolveAtImport(id, basedir, resolveImport))
+    }
+  })
+
+  let entries = [...promises.entries()]
+  let resolvers = entries.map(async ([id, promise]) => [id, await promise] as const)
+  let resolved = await Promise.all(resolvers)
+  let unwrapped = new Map(resolved)
+
+  walk(ast, (node, { replaceWith }) => {
+    // Replace all @import rules
+    if (node.kind === 'rule' && node.selector[0] === '@' && node.selector.startsWith('@import ')) {
+      let id = node.selector.slice('@import "'.length, -1)
+      let result = unwrapped.get(key(id, basedir))
+      if (result) {
+        replaceWith(result)
+        return WalkAction.Skip
+      }
+    }
+  })
+}
+
+async function resolveAtImport(
+  id: string,
+  basedir: string,
+  resolveImport: ResolveImport,
+): Promise<AstNode[]> {
+  const { content, basedir: nestedBaseDir } = await resolveImport(id, basedir)
+  let ast = CSS.parse(content)
+  await substituteAtImports(ast, nestedBaseDir, resolveImport)
+  return ast
+}
+
+function key(id: string, basedir: string): string {
+  return `${id}:${basedir}`
+}

packages/tailwindcss/src/index.ts

@@ -1,6 +1,7 @@
 import { version } from '../package.json'
 import { substituteAtApply } from './apply'
 import { comment, decl, rule, toCss, walk, WalkAction, type Rule } from './ast'
+import { substituteAtImports } from './at-import'
 import { applyCompatibilityHooks } from './compat/apply-compat-hooks'
 import type { UserConfig } from './compat/config/types'
 import { type Plugin } from './compat/plugin-api'
@@ -17,6 +18,7 @@ const IS_VALID_UTILITY_NAME = /^[a-z][a-zA-Z0-9/%._-]*$/
 type CompileOptions = {
   loadPlugin?: (path: string) => Promise<Plugin>
   loadConfig?: (path: string) => Promise<UserConfig>
+  resolveImport?: (id: string, basedir: string) => Promise<{ content: string; basedir: string }>
 }
 
 function throwOnPlugin(): never {
@@ -27,6 +29,10 @@ function throwOnConfig(): never {
   throw new Error('No `loadConfig` function provided to `compile`')
 }
 
+function throwOnResolveImport(): never {
+  throw new Error('No `resolveImport` function provided to `compile`')
+}
+
 function parseThemeOptions(selector: string) {
   let options = ThemeOptions.NONE
 
@@ -45,10 +51,17 @@ function parseThemeOptions(selector: string) {
 
 async function parseCss(
   css: string,
-  { loadPlugin = throwOnPlugin, loadConfig = throwOnConfig }: CompileOptions = {},
+  basedir: string,
+  {
+    loadPlugin = throwOnPlugin,
+    loadConfig = throwOnConfig,
+    resolveImport = throwOnResolveImport,
+  }: CompileOptions = {},
 ) {
   let ast = CSS.parse(css)
 
+  await substituteAtImports(ast, basedir, resolveImport)
+
   // Find all `@theme` declarations
   let theme = new Theme()
   let customVariants: ((designSystem: DesignSystem) => void)[] = []
@@ -314,12 +327,13 @@ async function parseCss(
 
 export async function compile(
   css: string,
+  basedir: string,
   opts: CompileOptions = {},
 ): Promise<{
   globs: { origin?: string; pattern: string }[]
   build(candidates: string[]): string
 }> {
-  let { designSystem, ast, globs } = await parseCss(css, opts)
+  let { designSystem, ast, globs } = await parseCss(css, basedir, opts)
 
   let tailwindUtilitiesNode: Rule | null = null
 
@@ -397,7 +411,7 @@ export async function compile(
 }
 
 export async function __unstable__loadDesignSystem(css: string, opts: CompileOptions = {}) {
-  let result = await parseCss(css, opts)
+  let result = await parseCss(css, '', opts)
   return result.designSystem
 }