From 1c4d2cf6cc35601770ac244f84a8ddedac3e8daf Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 19 Sep 2025 16:16:22 -0400 Subject: [PATCH] Support Vite Environment API --- packages/@tailwindcss-vite/src/index.ts | 66 ++++++++++++++++++------- 1 file changed, 49 insertions(+), 17 deletions(-) diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 00ba92db4c83..9ac2ef473ad9 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -11,7 +11,8 @@ import { clearRequireCache } from '@tailwindcss/node/require-cache' import { Scanner } from '@tailwindcss/oxide' import fs from 'node:fs/promises' import path from 'node:path' -import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite' +import type { Environment, Plugin, ResolvedConfig, ViteDevServer } from 'vite' +import * as vite from 'vite' const DEBUG = env.DEBUG const SPECIAL_QUERY_RE = /[?&](?:worker|sharedworker|raw|url)\b/ @@ -21,27 +22,50 @@ const INLINE_STYLE_ID_RE = /[?&]index\=\d+\.css$/ export default function tailwindcss(): Plugin[] { let servers: ViteDevServer[] = [] let config: ResolvedConfig | null = null + let roots = new Map() let isSSR = false let minify = false - let roots: DefaultMap = new DefaultMap((id) => { - let cssResolver = config!.createResolver({ - ...config!.resolve, - extensions: ['.css'], - mainFields: ['style'], - conditions: ['style', 'development|production'], - tryIndex: false, - preferRelative: true, - }) - function customCssResolver(id: string, base: string) { - return cssResolver(id, base, true, isSSR) - } + function createRoot(env: Environment | null, id: string) { + type ResolveFn = (id: string, base: string) => Promise + + let customCssResolver: ResolveFn + let customJsResolver: ResolveFn + + if (!env) { + // Older, pre-environment Vite API + // TODO: Can we drop this?? + let cssResolver = config!.createResolver({ + ...config!.resolve, + extensions: ['.css'], + mainFields: ['style'], + conditions: ['style', 'development|production'], + tryIndex: false, + preferRelative: true, + }) + + let jsResolver = config!.createResolver(config!.resolve) + + customCssResolver = (id: string, base: string) => cssResolver(id, base, true, isSSR) + customJsResolver = (id: string, base: string) => jsResolver(id, base, true, isSSR) + } else { + // Newer View versions + let cssResolver = vite.createIdResolver(env.config, { + ...env.config.resolve, + extensions: ['.css'], + mainFields: ['style'], + conditions: ['style', 'development|production'], + tryIndex: false, + preferRelative: true, + }) - let jsResolver = config!.createResolver(config!.resolve) - function customJsResolver(id: string, base: string) { - return jsResolver(id, base, true, isSSR) + let jsResolver = vite.createIdResolver(env.config, env.config.resolve) + + customCssResolver = (id: string, base: string) => cssResolver(env, id, base, true) + customJsResolver = (id: string, base: string) => jsResolver(env, id, base, true) } + return new Root( id, config!.root, @@ -51,7 +75,7 @@ export default function tailwindcss(): Plugin[] { customCssResolver, customJsResolver, ) - }) + } return [ { @@ -83,6 +107,10 @@ export default function tailwindcss(): Plugin[] { DEBUG && I.start('[@tailwindcss/vite] Generate CSS (serve)') let root = roots.get(id) + if (!root) { + root ??= createRoot(this.environment ?? null, id) + roots.set(id, root) + } let result = await root.generate(src, (file) => this.addWatchFile(file), I) if (!result) { @@ -108,6 +136,10 @@ export default function tailwindcss(): Plugin[] { DEBUG && I.start('[@tailwindcss/vite] Generate CSS (build)') let root = roots.get(id) + if (!root) { + root ??= createRoot(this.environment ?? null, id) + roots.set(id, root) + } let result = await root.generate(src, (file) => this.addWatchFile(file), I) if (!result) {