Fix changes to nested imports not updating styles during development (#…

…1438) Co-authored-by: Adam Skoufis <[email protected]> Co-authored-by: Adam Skoufis <[email protected]>
vanilla-extract-css · Jul 3, 2024 · 765b856 · 765b856
1 parent 85afd9e
commit 765b856
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/.changeset/chilled-paws-shop.md b/.changeset/chilled-paws-shop.md
@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+Fixes a bug where changes to `.css.ts` dependencies of top-level `.css.ts` files would not generate new CSS
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
@@ -5,8 +5,8 @@ import type {
   ResolvedConfig,
   ConfigEnv,
   ViteDevServer,
-  Rollup,
   PluginOption,
+  TransformResult,
   UserConfig,
 } from 'vite';
 import {
@@ -96,23 +96,6 @@ export function vanillaExtractPlugin({
     }
   }
 
-  function addWatchFiles(
-    this: Rollup.PluginContext,
-    fromId: string,
-    files: Set<string>,
-  ) {
-    // We don't need to watch files in build mode
-    if (config.command === 'build' && !config.build.watch) {
-      return;
-    }
-
-    for (const file of files) {
-      if (!file.includes('node_modules') && normalizePath(file) !== fromId) {
-        this.addWatchFile(file);
-      }
-    }
-  }
-
   return {
     name: 'vanilla-extract',
     configureServer(_server) {
@@ -210,16 +193,33 @@ export function vanillaExtractPlugin({
           absoluteId,
           { outputCss: true },
         );
-
-        addWatchFiles.call(this, absoluteId, watchFiles);
-
-        // We have to invalidate the virtual module, not the real one we just transformed
-        invalidateModule(fileIdToVirtualId(absoluteId));
-
-        return {
+        const result: TransformResult = {
           code: source,
           map: { mappings: '' },
         };
+
+        // We don't need to watch files in build mode
+        if (config.command === 'build' && !config.build.watch) {
+          return result;
+        }
+
+        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 (file.endsWith('.css.ts')) {
+            invalidateModule(fileIdToVirtualId(file));
+          }
+        }
+
+        return result;
       }
     },
     resolveId(source) {