@vanilla-extract/vite-plugin 5.2.0 → 5.2.1-vite-hmr-fix-20260318112727

package/dist/vanilla-extract-vite-plugin.cjs.dev.js

@@ -41,6 +41,7 @@ function vanillaExtractPlugin({
   let compiler$1;
   let isBuild;
   const vitePromise = import('vite');
+  const transformedModules = new Set();
   const getIdentOption = () => identifiers ?? (config.mode === 'production' ? 'short' : 'debug');
   const getAbsoluteId = filePath => {
     let resolvedId = filePath;
@@ -55,21 +56,37 @@ function vanillaExtractPlugin({
     }
     return integration.normalizePath(resolvedId);
   };
-  function invalidateModule(absoluteId) {
-    if (!server) return;
+
+  /**
+   * Custom invalidation function that takes a chain of importers to invalidate. If an importer is a
+   * VE module, its virtual CSS is invalidated instead. Otherwise, the module is invalidated
+   * normally.
+   */
+  const invalidateImporterChain = ({
+    importerChain,
+    server,
+    timestamp
+  }) => {
     const {
       moduleGraph
     } = server;
-    const modules = moduleGraph.getModulesByFile(absoluteId);
-    if (modules) {
-      for (const module of modules) {
-        moduleGraph.invalidateModule(module);
-
-        // Vite uses this timestamp to add `?t=` query string automatically for HMR.
-        module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
+    const seen = new Set();
+    for (const mod of importerChain) {
+      if (mod.id && integration.cssFileFilter.test(mod.id)) {
+        const virtualModules = moduleGraph.getModulesByFile(fileIdToVirtualId(mod.id));
+        for (const virtualModule of virtualModules ?? []) {
+          moduleGraph.invalidateModule(virtualModule, seen, timestamp, true);
+        }
+      } else if (mod.id) {
+        // `mod` is from the compiler's internal Vite server, so look up the
+        // corresponding module in the consuming server's graph by ID
+        const serverMod = moduleGraph.getModuleById(mod.id);
+        if (serverMod) {
+          moduleGraph.invalidateModule(serverMod, seen, timestamp, true);
+        }
       }
     }
-  }
+  };
   return [{
     name: `${PLUGIN_NAMESPACE}-inline-dev-css`,
     apply: (_, {
@@ -95,6 +112,9 @@ function vanillaExtractPlugin({
     name: PLUGIN_NAMESPACE,
     configureServer(_server) {
       server = _server;
+      server.watcher.on('unlink', file => {
+        transformedModules.delete(integration.normalizePath(file));
+      });
     },
     config(_userConfig, _configEnv) {
       configEnv = _configEnv;
@@ -104,7 +124,7 @@ function vanillaExtractPlugin({
         }
       };
     },
-    async configResolved(_resolvedConfig) {
+    configResolved(_resolvedConfig) {
       config = _resolvedConfig;
       isBuild = config.command === 'build' && !config.build.watch;
       packageName = integration.getPackageInfo(config.root).name;
@@ -159,54 +179,71 @@ function vanillaExtractPlugin({
       var _compiler3;
       return (_compiler3 = compiler$1) === null || _compiler3 === void 0 ? void 0 : _compiler3.close();
     },
-    async transform(code, id, options = {}) {
+    async transform(code, id, options) {
       const [validId] = id.split('?');
       if (!integration.cssFileFilter.test(validId)) {
         return null;
       }
       const identOption = getIdentOption();
+      const normalizedId = integration.normalizePath(validId);
       if (unstable_mode === 'transform') {
+        transformedModules.add(normalizedId);
         return integration.transform({
           source: code,
-          filePath: integration.normalizePath(validId),
+          filePath: normalizedId,
           rootPath: config.root,
           packageName,
           identOption
         });
       }
-      if (compiler$1) {
-        const absoluteId = getAbsoluteId(validId);
-        const {
-          source,
-          watchFiles
-        } = await compiler$1.processVanillaFile(absoluteId, {
-          outputCss: true
-        });
-        const result = {
-          code: source,
-          map: {
-            mappings: ''
-          }
-        };
-
-        // We don't need to watch files or invalidate modules in build mode or during SSR
-        if (isBuild || options.ssr) {
-          return result;
+      if (!compiler$1) {
+        return null;
+      }
+      const absoluteId = getAbsoluteId(validId);
+      const {
+        source,
+        watchFiles
+      } = await compiler$1.processVanillaFile(absoluteId, {
+        outputCss: true
+      });
+      transformedModules.add(normalizedId);
+      const result = {
+        code: source,
+        map: {
+          mappings: ''
         }
-        for (const file of watchFiles) {
-          if (!file.includes('node_modules') && integration.normalizePath(file) !== absoluteId) {
-            this.addWatchFile(file);
-          }
+      };
 
-          // We have to invalidate the virtual module & deps, not the real one we just transformed
-          // The deps have to be invalidated in case one of them changing was the trigger causing
-          // the current transformation
-          if (integration.cssFileFilter.test(file)) {
-            invalidateModule(fileIdToVirtualId(file));
-          }
-        }
+      // We don't need to watch files or invalidate modules in build mode or during SSR
+      if (isBuild || options !== null && options !== void 0 && options.ssr) {
         return result;
       }
+      for (const file of watchFiles) {
+        if (!file.includes('node_modules') && integration.normalizePath(file) !== absoluteId) {
+          this.addWatchFile(file);
+        }
+      }
+      return result;
+    },
+    // The compiler's module graph is always a subset of the consuming Vite dev server's module
+    // graph, so this early exit will be hit for any modules that aren't related to VE modules.
+    async handleHotUpdate({
+      file,
+      server,
+      timestamp
+    }) {
+      if (!compiler$1) {
+        return;
+      }
+      const importerChain = await compiler$1.findImporterTree(integration.normalizePath(file), transformedModules);
+      if (importerChain.size === 0) {
+        return;
+      }
+      invalidateImporterChain({
+        importerChain,
+        server,
+        timestamp
+      });
     },
     resolveId(source) {
       var _compiler4;

package/dist/vanilla-extract-vite-plugin.cjs.prod.js

@@ -41,6 +41,7 @@ function vanillaExtractPlugin({
   let compiler$1;
   let isBuild;
   const vitePromise = import('vite');
+  const transformedModules = new Set();
   const getIdentOption = () => identifiers ?? (config.mode === 'production' ? 'short' : 'debug');
   const getAbsoluteId = filePath => {
     let resolvedId = filePath;
@@ -55,21 +56,37 @@ function vanillaExtractPlugin({
     }
     return integration.normalizePath(resolvedId);
   };
-  function invalidateModule(absoluteId) {
-    if (!server) return;
+
+  /**
+   * Custom invalidation function that takes a chain of importers to invalidate. If an importer is a
+   * VE module, its virtual CSS is invalidated instead. Otherwise, the module is invalidated
+   * normally.
+   */
+  const invalidateImporterChain = ({
+    importerChain,
+    server,
+    timestamp
+  }) => {
     const {
       moduleGraph
     } = server;
-    const modules = moduleGraph.getModulesByFile(absoluteId);
-    if (modules) {
-      for (const module of modules) {
-        moduleGraph.invalidateModule(module);
-
-        // Vite uses this timestamp to add `?t=` query string automatically for HMR.
-        module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
+    const seen = new Set();
+    for (const mod of importerChain) {
+      if (mod.id && integration.cssFileFilter.test(mod.id)) {
+        const virtualModules = moduleGraph.getModulesByFile(fileIdToVirtualId(mod.id));
+        for (const virtualModule of virtualModules ?? []) {
+          moduleGraph.invalidateModule(virtualModule, seen, timestamp, true);
+        }
+      } else if (mod.id) {
+        // `mod` is from the compiler's internal Vite server, so look up the
+        // corresponding module in the consuming server's graph by ID
+        const serverMod = moduleGraph.getModuleById(mod.id);
+        if (serverMod) {
+          moduleGraph.invalidateModule(serverMod, seen, timestamp, true);
+        }
       }
     }
-  }
+  };
   return [{
     name: `${PLUGIN_NAMESPACE}-inline-dev-css`,
     apply: (_, {
@@ -95,6 +112,9 @@ function vanillaExtractPlugin({
     name: PLUGIN_NAMESPACE,
     configureServer(_server) {
       server = _server;
+      server.watcher.on('unlink', file => {
+        transformedModules.delete(integration.normalizePath(file));
+      });
     },
     config(_userConfig, _configEnv) {
       configEnv = _configEnv;
@@ -104,7 +124,7 @@ function vanillaExtractPlugin({
         }
       };
     },
-    async configResolved(_resolvedConfig) {
+    configResolved(_resolvedConfig) {
       config = _resolvedConfig;
       isBuild = config.command === 'build' && !config.build.watch;
       packageName = integration.getPackageInfo(config.root).name;
@@ -159,54 +179,71 @@ function vanillaExtractPlugin({
       var _compiler3;
       return (_compiler3 = compiler$1) === null || _compiler3 === void 0 ? void 0 : _compiler3.close();
     },
-    async transform(code, id, options = {}) {
+    async transform(code, id, options) {
       const [validId] = id.split('?');
       if (!integration.cssFileFilter.test(validId)) {
         return null;
       }
       const identOption = getIdentOption();
+      const normalizedId = integration.normalizePath(validId);
       if (unstable_mode === 'transform') {
+        transformedModules.add(normalizedId);
         return integration.transform({
           source: code,
-          filePath: integration.normalizePath(validId),
+          filePath: normalizedId,
           rootPath: config.root,
           packageName,
           identOption
         });
       }
-      if (compiler$1) {
-        const absoluteId = getAbsoluteId(validId);
-        const {
-          source,
-          watchFiles
-        } = await compiler$1.processVanillaFile(absoluteId, {
-          outputCss: true
-        });
-        const result = {
-          code: source,
-          map: {
-            mappings: ''
-          }
-        };
-
-        // We don't need to watch files or invalidate modules in build mode or during SSR
-        if (isBuild || options.ssr) {
-          return result;
+      if (!compiler$1) {
+        return null;
+      }
+      const absoluteId = getAbsoluteId(validId);
+      const {
+        source,
+        watchFiles
+      } = await compiler$1.processVanillaFile(absoluteId, {
+        outputCss: true
+      });
+      transformedModules.add(normalizedId);
+      const result = {
+        code: source,
+        map: {
+          mappings: ''
         }
-        for (const file of watchFiles) {
-          if (!file.includes('node_modules') && integration.normalizePath(file) !== absoluteId) {
-            this.addWatchFile(file);
-          }
+      };
 
-          // We have to invalidate the virtual module & deps, not the real one we just transformed
-          // The deps have to be invalidated in case one of them changing was the trigger causing
-          // the current transformation
-          if (integration.cssFileFilter.test(file)) {
-            invalidateModule(fileIdToVirtualId(file));
-          }
-        }
+      // We don't need to watch files or invalidate modules in build mode or during SSR
+      if (isBuild || options !== null && options !== void 0 && options.ssr) {
         return result;
       }
+      for (const file of watchFiles) {
+        if (!file.includes('node_modules') && integration.normalizePath(file) !== absoluteId) {
+          this.addWatchFile(file);
+        }
+      }
+      return result;
+    },
+    // The compiler's module graph is always a subset of the consuming Vite dev server's module
+    // graph, so this early exit will be hit for any modules that aren't related to VE modules.
+    async handleHotUpdate({
+      file,
+      server,
+      timestamp
+    }) {
+      if (!compiler$1) {
+        return;
+      }
+      const importerChain = await compiler$1.findImporterTree(integration.normalizePath(file), transformedModules);
+      if (importerChain.size === 0) {
+        return;
+      }
+      invalidateImporterChain({
+        importerChain,
+        server,
+        timestamp
+      });
     },
     resolveId(source) {
       var _compiler4;

package/dist/vanilla-extract-vite-plugin.esm.js

@@ -1,6 +1,6 @@
 import path from 'path';
 import { createCompiler } from '@vanilla-extract/compiler';
-import { getPackageInfo, cssFileFilter, transform, normalizePath } from '@vanilla-extract/integration';
+import { normalizePath, getPackageInfo, cssFileFilter, transform } from '@vanilla-extract/integration';
 
 const PLUGIN_NAMESPACE = 'vite-plugin-vanilla-extract';
 const virtualExtCss = '.vanilla.css';
@@ -33,6 +33,7 @@ function vanillaExtractPlugin({
   let compiler;
   let isBuild;
   const vitePromise = import('vite');
+  const transformedModules = new Set();
   const getIdentOption = () => identifiers ?? (config.mode === 'production' ? 'short' : 'debug');
   const getAbsoluteId = filePath => {
     let resolvedId = filePath;
@@ -47,21 +48,37 @@ function vanillaExtractPlugin({
     }
     return normalizePath(resolvedId);
   };
-  function invalidateModule(absoluteId) {
-    if (!server) return;
+
+  /**
+   * Custom invalidation function that takes a chain of importers to invalidate. If an importer is a
+   * VE module, its virtual CSS is invalidated instead. Otherwise, the module is invalidated
+   * normally.
+   */
+  const invalidateImporterChain = ({
+    importerChain,
+    server,
+    timestamp
+  }) => {
     const {
       moduleGraph
     } = server;
-    const modules = moduleGraph.getModulesByFile(absoluteId);
-    if (modules) {
-      for (const module of modules) {
-        moduleGraph.invalidateModule(module);
-
-        // Vite uses this timestamp to add `?t=` query string automatically for HMR.
-        module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
+    const seen = new Set();
+    for (const mod of importerChain) {
+      if (mod.id && cssFileFilter.test(mod.id)) {
+        const virtualModules = moduleGraph.getModulesByFile(fileIdToVirtualId(mod.id));
+        for (const virtualModule of virtualModules ?? []) {
+          moduleGraph.invalidateModule(virtualModule, seen, timestamp, true);
+        }
+      } else if (mod.id) {
+        // `mod` is from the compiler's internal Vite server, so look up the
+        // corresponding module in the consuming server's graph by ID
+        const serverMod = moduleGraph.getModuleById(mod.id);
+        if (serverMod) {
+          moduleGraph.invalidateModule(serverMod, seen, timestamp, true);
+        }
       }
     }
-  }
+  };
   return [{
     name: `${PLUGIN_NAMESPACE}-inline-dev-css`,
     apply: (_, {
@@ -87,6 +104,9 @@ function vanillaExtractPlugin({
     name: PLUGIN_NAMESPACE,
     configureServer(_server) {
       server = _server;
+      server.watcher.on('unlink', file => {
+        transformedModules.delete(normalizePath(file));
+      });
     },
     config(_userConfig, _configEnv) {
       configEnv = _configEnv;
@@ -96,7 +116,7 @@ function vanillaExtractPlugin({
         }
       };
     },
-    async configResolved(_resolvedConfig) {
+    configResolved(_resolvedConfig) {
       config = _resolvedConfig;
       isBuild = config.command === 'build' && !config.build.watch;
       packageName = getPackageInfo(config.root).name;
@@ -151,54 +171,71 @@ function vanillaExtractPlugin({
       var _compiler3;
       return (_compiler3 = compiler) === null || _compiler3 === void 0 ? void 0 : _compiler3.close();
     },
-    async transform(code, id, options = {}) {
+    async transform(code, id, options) {
       const [validId] = id.split('?');
       if (!cssFileFilter.test(validId)) {
         return null;
       }
       const identOption = getIdentOption();
+      const normalizedId = normalizePath(validId);
       if (unstable_mode === 'transform') {
+        transformedModules.add(normalizedId);
         return transform({
           source: code,
-          filePath: normalizePath(validId),
+          filePath: normalizedId,
           rootPath: config.root,
           packageName,
           identOption
         });
       }
-      if (compiler) {
-        const absoluteId = getAbsoluteId(validId);
-        const {
-          source,
-          watchFiles
-        } = await compiler.processVanillaFile(absoluteId, {
-          outputCss: true
-        });
-        const result = {
-          code: source,
-          map: {
-            mappings: ''
-          }
-        };
-
-        // We don't need to watch files or invalidate modules in build mode or during SSR
-        if (isBuild || options.ssr) {
-          return result;
+      if (!compiler) {
+        return null;
+      }
+      const absoluteId = getAbsoluteId(validId);
+      const {
+        source,
+        watchFiles
+      } = await compiler.processVanillaFile(absoluteId, {
+        outputCss: true
+      });
+      transformedModules.add(normalizedId);
+      const result = {
+        code: source,
+        map: {
+          mappings: ''
         }
-        for (const file of watchFiles) {
-          if (!file.includes('node_modules') && normalizePath(file) !== absoluteId) {
-            this.addWatchFile(file);
-          }
+      };
 
-          // We have to invalidate the virtual module & deps, not the real one we just transformed
-          // The deps have to be invalidated in case one of them changing was the trigger causing
-          // the current transformation
-          if (cssFileFilter.test(file)) {
-            invalidateModule(fileIdToVirtualId(file));
-          }
-        }
+      // We don't need to watch files or invalidate modules in build mode or during SSR
+      if (isBuild || options !== null && options !== void 0 && options.ssr) {
         return result;
       }
+      for (const file of watchFiles) {
+        if (!file.includes('node_modules') && normalizePath(file) !== absoluteId) {
+          this.addWatchFile(file);
+        }
+      }
+      return result;
+    },
+    // The compiler's module graph is always a subset of the consuming Vite dev server's module
+    // graph, so this early exit will be hit for any modules that aren't related to VE modules.
+    async handleHotUpdate({
+      file,
+      server,
+      timestamp
+    }) {
+      if (!compiler) {
+        return;
+      }
+      const importerChain = await compiler.findImporterTree(normalizePath(file), transformedModules);
+      if (importerChain.size === 0) {
+        return;
+      }
+      invalidateImporterChain({
+        importerChain,
+        server,
+        timestamp
+      });
     },
     resolveId(source) {
       var _compiler4;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanilla-extract/vite-plugin",
-  "version": "5.2.0",
+  "version": "5.2.1-vite-hmr-fix-20260318112727",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-vite-plugin.cjs.js",
   "module": "dist/vanilla-extract-vite-plugin.esm.js",
@@ -16,8 +16,8 @@
   "author": "SEEK",
   "license": "MIT",
   "dependencies": {
-    "@vanilla-extract/compiler": "^0.5.0",
-    "@vanilla-extract/integration": "^8.0.8"
+    "@vanilla-extract/compiler": "^0.6.0-vite-hmr-fix-20260318112727",
+    "@vanilla-extract/integration": "^8.0.9"
   },
   "devDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"