vite: Fix HMR invalidation (#1482)

vanilla-extract-css · Oct 1, 2024 · 30c0305 · 30c0305
1 parent 7b256d2
commit 30c0305
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/.changeset/twelve-pans-dress.md b/.changeset/twelve-pans-dress.md
@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+Fixes a bug where Vanilla Extract files with extensions other than `css.ts` were not being invalidated during HMR
diff --git a/fixtures/features/src/html.ts b/fixtures/features/src/html.ts
@@ -10,3 +10,9 @@ export default `
     <div id="${testNodes.styleCompositionInSelector}" class="${styles.styleCompositionInSelector}">Style composition in selector</div>
     <div id="${testNodes.styleVariantsCompositionInSelector}" class="${styles.styleVariantsCompositionInSelector.variant}">Style variants composition in selector</div>
   `;
+
+// @ts-expect-error Vite env not defined
+if (import.meta.hot) {
+  // @ts-expect-error Vite env not defined
+  import.meta.hot.accept();
+}
diff --git a/fixtures/features/src/index.ts b/fixtures/features/src/index.ts
@@ -5,10 +5,3 @@ function render() {
 }
 
 render();
-
-// Uncomment to enable HMR with Vite
-// if (import.meta.hot) {
-//   import.meta.hot.accept('./features.css', () => {
-//     render();
-//   });
-// }
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
@@ -214,7 +214,7 @@ export function vanillaExtractPlugin({
           // 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 (file.endsWith('.css.ts')) {
+          if (cssFileFilter.test(file)) {
             invalidateModule(fileIdToVirtualId(file));
           }
         }