@modular-css/vite 30.0.1 → 30.0.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 30.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`63af4ac3`](https://github.com/tivac/modular-css/commit/63af4ac3ee6380ede5396463fb0305bc14274d84)]:
+  - @modular-css/css-to-js@29.0.3
+  - @modular-css/processor@29.0.3
+
+## 30.0.2
+
+### Patch Changes
+
+- [#972](https://github.com/tivac/modular-css/pull/972) [`673df5d3`](https://github.com/tivac/modular-css/commit/673df5d345dead81f68eb6199757cfaf400f09a6) Thanks [@tivac](https://github.com/tivac)! - Improved vite integration, now correctly invalidating files when a file is changed or deleted.
+  Improved invalidation in the processor, preventing stale `@value` or `composes` references from being output.
+- Updated dependencies [[`673df5d3`](https://github.com/tivac/modular-css/commit/673df5d345dead81f68eb6199757cfaf400f09a6)]:
+  - @modular-css/processor@29.0.2
+  - @modular-css/css-to-js@29.0.2
+
 ## 30.0.1
 
 ### Patch Changes

package/README.md

@@ -33,7 +33,7 @@ A minimatch pattern, or an array of minimatch patterns, relative to `process.cwd
 
 ### `processor`
 
-Pass an already-instantiated `Processor` instance to the rollup plugin. It will then add any files found when traversing the modules to it and both the rollup-discovered and any already-existing files will be output in the final CSS.
+Pass an already-instantiated `Processor` instance to the vite plugin. It will then add any files found when traversing the modules to it and both the vite-discovered and any already-existing files will be output in the final CSS.
 
 #### `styleExport`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modular-css/vite",
-  "version": "30.0.1",
+  "version": "30.0.3",
   "description": "vite support for modular-css",
   "main": "./vite.js",
   "repository": {
@@ -26,8 +26,8 @@
     "postcss"
   ],
   "dependencies": {
-    "@modular-css/css-to-js": "^29.0.1",
-    "@modular-css/processor": "^29.0.1",
+    "@modular-css/css-to-js": "^29.0.3",
+    "@modular-css/processor": "^29.0.3",
     "@rollup/pluginutils": "^5.0.2"
   },
   "peerDependencies": {

package/vite.js

@@ -59,11 +59,26 @@ module.exports = (
     }
 
     let viteServer;
+    let viteConfig;
+
+    const watchFile = (file) => {
+        const slashed = slash(file);
+
+        if(viteServer) {
+            viteServer.watcher.add(slashed);
+        } else if(viteConfig.build.watch) {
+            this.addWatchFile(slashed);
+        }
+    };
 
     return {
         name    : "@modular-css/vite",
         enforce : "pre",
 
+        configResolved(config) {
+            viteConfig = config;
+        },
+
         configureServer(instance) {
             viteServer = instance;
 
@@ -75,6 +90,27 @@ module.exports = (
                 }
 
                 processor.invalidate(file);
+
+                // Make sure vite knows that files that depend on us might've changed too
+                processor.fileDependents(file).forEach((dep) => {
+                    viteServer.watcher.emit("change", dep);
+                });
+            });
+
+            viteServer.watcher.on("unlink", (file) => {
+                if(!processor.has(file)) {
+                    return;
+                }
+
+                // Have to grab deps _before_ removal
+                const deps = processor.fileDependents(file);
+                
+                processor.remove(file);
+                
+                // Invalidate dependencies of the file that was removed
+                deps.forEach((dep) => {
+                    viteServer.watcher.emit("change", dep);
+                });
             });
         },
 
@@ -82,7 +118,7 @@ module.exports = (
             log("build start");
 
             // Watch any files already in the procesor
-            Object.keys(processor.files).forEach((file) => this.addWatchFile(file));
+            Object.keys(processor.files).forEach((file) => watchFile(file));
         },
 
         async resolveId(source) {
@@ -191,7 +227,7 @@ module.exports = (
 
             const deps = processor.fileDependencies(file);
 
-            deps.forEach((dep) => this.addWatchFile(slash(dep)));
+            deps.forEach((dep) => watchFile(dep));
 
             // TODO: Gets CSS order right by forcing them to load their dependent CSS first.
             // Feels very brittle and overkill, but this is what we've got for now