From 30c0305577638ada06393729f8eaaa7a72d69369 Mon Sep 17 00:00:00 2001
From: Adam Skoufis <askoufis@users.noreply.github.com>
Date: Tue, 1 Oct 2024 14:25:42 +1000
Subject: [PATCH] vite: Fix HMR invalidation (#1482)

---
 .changeset/twelve-pans-dress.md   | 5 +++++
 fixtures/features/src/html.ts     | 6 ++++++
 fixtures/features/src/index.ts    | 7 -------
 packages/vite-plugin/src/index.ts | 2 +-
 4 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/twelve-pans-dress.md

diff --git a/.changeset/twelve-pans-dress.md b/.changeset/twelve-pans-dress.md
new file mode 100644
index 00000000..9a4f4383
--- /dev/null
+++ 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
index 2d81f7bb..340b74a7 100644
--- 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
index bddb8b10..e647b5e2 100644
--- 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
index 54fbb7bd..ec3e193e 100644
--- 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));
           }
         }