From 26ad4488979dc7debd73f056c80b621a7beee564 Mon Sep 17 00:00:00 2001
From: flex-jonghyen <97939463+flex-jonghyen@users.noreply.github.com>
Date: Fri, 24 Oct 2025 19:05:18 +0900
Subject: [PATCH] feat: Skip already compiled code in vite plugin

---
 packages/integration/src/filters.ts | 30 +++++++++++++++++++++++++++--
 packages/integration/src/index.ts   |  6 +++++-
 packages/vite-plugin/src/index.ts   | 16 +++++++++++----
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/packages/integration/src/filters.ts b/packages/integration/src/filters.ts
index 67279ee9b..b785268b4 100644
--- a/packages/integration/src/filters.ts
+++ b/packages/integration/src/filters.ts
@@ -1,4 +1,30 @@
-// Vite adds a "?used" to CSS files it detects, this isn't relevant for
-// .css.ts files but it's added anyway so we need to allow for it in the file match
 export const cssFileFilter: RegExp = /\.css\.(js|cjs|mjs|jsx|ts|tsx)(\?used)?$/;
 export const virtualCssFileFilter: RegExp = /\.vanilla\.css\?source=.*$/;
+
+const COMPILED_CSS_PATTERN = /\.vanilla(-[a-zA-Z0-9_-]+)?\.css['"]/;
+const VANILLA_EXTRACT_FAMILLY = /@vanilla-extract/;
+
+interface IsSourceVanillaFileContext {
+  code: string;
+}
+
+export function isSourceVanillaFile(
+  filePath: string,
+  context: IsSourceVanillaFileContext,
+): boolean {
+  if (!cssFileFilter.test(filePath)) {
+    return false;
+  }
+
+  if (context.code) {
+    if (COMPILED_CSS_PATTERN.test(context.code)) {
+      return false;
+    }
+
+    if (!VANILLA_EXTRACT_FAMILLY.test(context.code)) {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/packages/integration/src/index.ts b/packages/integration/src/index.ts
index 9ac51d50c..45cc7af51 100644
--- a/packages/integration/src/index.ts
+++ b/packages/integration/src/index.ts
@@ -15,5 +15,9 @@ export { hash } from './hash';
 export { addFileScope, normalizePath } from './addFileScope';
 export { serializeCss, deserializeCss } from './serialize';
 export { transformSync, transform } from './transform';
-export { cssFileFilter, virtualCssFileFilter } from './filters';
+export {
+  cssFileFilter,
+  virtualCssFileFilter,
+  isSourceVanillaFile,
+} from './filters';
 export type { IdentifierOption } from './types';
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index f1ad964ea..e249d0b43 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -16,6 +16,7 @@ import {
   getPackageInfo,
   transform,
   normalizePath,
+  isSourceVanillaFile,
 } from '@vanilla-extract/integration';
 
 const PLUGIN_NAMESPACE = 'vite-plugin-vanilla-extract';
@@ -213,7 +214,11 @@ export function vanillaExtractPlugin({
       async transform(code, id, options = {}) {
         const [validId] = id.split('?');
 
-        if (!cssFileFilter.test(validId)) {
+        if (
+          !isSourceVanillaFile(validId, {
+            code,
+          })
+        ) {
           return null;
         }
 
@@ -289,9 +294,12 @@ export function vanillaExtractPlugin({
 
         const absoluteId = getAbsoluteId(validId);
 
-        const { css } = compiler.getCssForFile(virtualIdToFileId(absoluteId));
-
-        return css;
+        try {
+          const { css } = compiler.getCssForFile(virtualIdToFileId(absoluteId));
+          return css;
+        } catch {
+          return null; // pass through
+        }
       },
     },
   ];