From 21f2bf99b9764929b5268ce2174840086ef191cc Mon Sep 17 00:00:00 2001 From: Alexander Lichter Date: Fri, 14 Nov 2025 16:44:07 +0100 Subject: [PATCH] perf(vite): add plugin hook filter (#19308) ## Summary This PR adds plugin [hook filters](https://vite.dev/guide/api-plugin#hook-filters) to the Vite plugin. They are backwards-compatible, having no impact on older Vite versions as the check for `isPotentialCssRootFile` is still included. It can be dropped once you don't need to support older Vite versions. ## See also https://github.com/e18e/ecosystem-issues/issues/171 --------- Co-authored-by: Jordan Pittman --- packages/@tailwindcss-vite/src/index.ts | 81 +++++++++++++++---------- 1 file changed, 48 insertions(+), 33 deletions(-) diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index ab9635d10..29b85b2be 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -97,23 +97,30 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] { name: '@tailwindcss/vite:generate:serve', apply: 'serve', enforce: 'pre', + transform: { + filter: { + id: { + exclude: [/\/\.vite\//, SPECIAL_QUERY_RE, COMMON_JS_PROXY_RE], + include: [/\.css(?:\?.*)?$/, /&lang\.css/, INLINE_STYLE_ID_RE], + }, + }, + async handler(src, id) { + if (!isPotentialCssRootFile(id)) return - async transform(src, id, options) { - if (!isPotentialCssRootFile(id)) return + using I = new Instrumentation() + DEBUG && I.start('[@tailwindcss/vite] Generate CSS (serve)') - using I = new Instrumentation() - DEBUG && I.start('[@tailwindcss/vite] Generate CSS (serve)') + let root = roots.get(id) - let root = roots.get(id) + let result = await root.generate(src, (file) => this.addWatchFile(file), I) + if (!result) { + roots.delete(id) + return src + } - let result = await root.generate(src, (file) => this.addWatchFile(file), I) - if (!result) { - roots.delete(id) - return src - } - - DEBUG && I.end('[@tailwindcss/vite] Generate CSS (serve)') - return result + DEBUG && I.end('[@tailwindcss/vite] Generate CSS (serve)') + return result + }, }, }, @@ -123,31 +130,39 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] { apply: 'build', enforce: 'pre', - async transform(src, id) { - if (!isPotentialCssRootFile(id)) return + transform: { + filter: { + id: { + exclude: [/\/\.vite\//, SPECIAL_QUERY_RE, COMMON_JS_PROXY_RE], + include: [/\.css(?:\?.*)?$/, /&lang\.css/, INLINE_STYLE_ID_RE], + }, + }, + async handler(src, id) { + if (!isPotentialCssRootFile(id)) return - using I = new Instrumentation() - DEBUG && I.start('[@tailwindcss/vite] Generate CSS (build)') + using I = new Instrumentation() + DEBUG && I.start('[@tailwindcss/vite] Generate CSS (build)') - let root = roots.get(id) + let root = roots.get(id) - let result = await root.generate(src, (file) => this.addWatchFile(file), I) - if (!result) { - roots.delete(id) - return src - } - DEBUG && I.end('[@tailwindcss/vite] Generate CSS (build)') + let result = await root.generate(src, (file) => this.addWatchFile(file), I) + if (!result) { + roots.delete(id) + return src + } + DEBUG && I.end('[@tailwindcss/vite] Generate CSS (build)') - if (shouldOptimize) { - DEBUG && I.start('[@tailwindcss/vite] Optimize CSS') - result = optimize(result.code, { - minify, - map: result.map, - }) - DEBUG && I.end('[@tailwindcss/vite] Optimize CSS') - } + if (shouldOptimize) { + DEBUG && I.start('[@tailwindcss/vite] Optimize CSS') + result = optimize(result.code, { + minify, + map: result.map, + }) + DEBUG && I.end('[@tailwindcss/vite] Optimize CSS') + } - return result + return result + }, }, }, ] satisfies Plugin[]