@vanilla-extract/vite-plugin 3.1.7 → 3.3.0

package/README.md

@@ -88,6 +88,7 @@ Want to work at a higher level while maximising style re-use? Check out  🍨 [S
   - [Test environments](#test-environments)
   - [Configuration](#configuration)
     - [identifiers](#identifiers)
+    - [esbuildOptions](#esbuildoptions)
 - [Styling API](#styling-api)
   - [style](#style)
   - [styleVariants](#stylevariants)
@@ -393,6 +394,12 @@ Different formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc)
 
 Each integration will set a default value based on the configuration options passed to the bundler.
 
+### esbuildOptions
+> Only for `esbuild`, `vite` and `rollup` plugins
+
+esbuild is used internally to compile `.css.ts` files before evaluating them to extract styles. You can pass additional options here to customize that process.
+Accepts a subset of esbuild build options (`plugins`, `external`, `define` and `loader`), see https://esbuild.github.io/api/#build-api.
+
 ---
 
 ## Styling API

package/dist/declarations/src/index.d.ts

@@ -1,7 +1,8 @@
 import type { Plugin } from 'vite';
-import { IdentifierOption } from '@vanilla-extract/integration';
+import { IdentifierOption, CompileOptions } from '@vanilla-extract/integration';
 interface Options {
     identifiers?: IdentifierOption;
+    esbuildOptions?: CompileOptions['esbuildOptions'];
 }
-export declare function vanillaExtractPlugin({ identifiers }?: Options): Plugin;
+export declare function vanillaExtractPlugin({ identifiers, esbuildOptions, }?: Options): Plugin;
 export {};

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

@@ -69,7 +69,8 @@ const resolvePostcssConfig = async config => {
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
 function vanillaExtractPlugin({
-  identifiers
+  identifiers,
+  esbuildOptions
 } = {}) {
   let config;
   let server;
@@ -112,56 +113,63 @@ function vanillaExtractPlugin({
     },
 
     resolveId(source) {
-      if (!source.endsWith(virtualExt)) {
+      const [validId, query] = source.split('?');
+
+      if (!validId.endsWith(virtualExt)) {
         return;
       } // Absolute paths seem to occur often in monorepos, where files are
       // imported from outside the config root.
 
 
-      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(source); // There should always be an entry in the `cssMap` here.
+      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(validId); // There should always be an entry in the `cssMap` here.
       // The only valid scenario for a missing one is if someone had written
       // a file in their app using the .vanilla.js/.vanilla.css extension
 
       if (cssMap.has(absoluteId)) {
-        return absoluteId;
+        // Keep the original query string for HMR.
+        return absoluteId + (query ? `?${query}` : '');
       }
     },
 
     load(id) {
-      if (!cssMap.has(id)) {
+      const [validId] = id.split('?');
+
+      if (!cssMap.has(validId)) {
         return;
       }
 
-      const css = cssMap.get(id);
+      const css = cssMap.get(validId);
 
       if (typeof css !== 'string') {
         return;
       }
 
-      if (!server) {
+      if (!server || server.config.isProduction) {
         return css;
       }
 
       return outdent__default["default"]`
         import { injectStyles } from '@vanilla-extract/css/injectStyles';
-        
+
         const inject = (css) => injectStyles({
           fileScope: ${JSON.stringify({
-        filePath: id
+        filePath: validId
       })},
           css
         });
 
         inject(${JSON.stringify(css)});
 
-        import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
+        import.meta.hot.on('${styleUpdateEvent(validId)}', (css) => {
           inject(css);
-        });   
+        });
       `;
     },
 
     async transform(code, id, ssrParam) {
-      if (!integration.cssFileFilter.test(id)) {
+      const [validId] = id.split('?');
+
+      if (!integration.cssFileFilter.test(validId)) {
         return null;
       }
 
@@ -173,10 +181,7 @@ function vanillaExtractPlugin({
         ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
       }
 
-      const index = id.indexOf('?');
-      const validId = index === -1 ? id : id.substring(0, index);
-
-      if (ssr) {
+      if (ssr && !process.env.VITE_RSC_BUILD) {
         return integration.addFileScope({
           source: code,
           filePath: vite.normalizePath(validId),
@@ -190,13 +195,14 @@ function vanillaExtractPlugin({
         watchFiles
       } = await integration.compile({
         filePath: validId,
-        cwd: config.root
+        cwd: config.root,
+        esbuildOptions
       });
 
       for (const file of watchFiles) {
         // In start mode, we need to prevent the file from rewatching itself.
         // If it's a `build --watch`, it needs to watch everything.
-        if (config.command === 'build' || file !== id) {
+        if (config.command === 'build' || file !== validId) {
           this.addWatchFile(file);
         }
       }
@@ -225,10 +231,12 @@ function vanillaExtractPlugin({
             const {
               moduleGraph
             } = server;
-            const module = moduleGraph.getModuleById(absoluteId);
+            const [module] = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
 
             if (module) {
-              moduleGraph.invalidateModule(module);
+              moduleGraph.invalidateModule(module); // Vite uses this timestamp to add `?t=` query string automatically for HMR.
+
+              module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
             }
 
             server.ws.send({

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

@@ -69,7 +69,8 @@ const resolvePostcssConfig = async config => {
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
 function vanillaExtractPlugin({
-  identifiers
+  identifiers,
+  esbuildOptions
 } = {}) {
   let config;
   let server;
@@ -112,56 +113,63 @@ function vanillaExtractPlugin({
     },
 
     resolveId(source) {
-      if (!source.endsWith(virtualExt)) {
+      const [validId, query] = source.split('?');
+
+      if (!validId.endsWith(virtualExt)) {
         return;
       } // Absolute paths seem to occur often in monorepos, where files are
       // imported from outside the config root.
 
 
-      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(source); // There should always be an entry in the `cssMap` here.
+      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(validId); // There should always be an entry in the `cssMap` here.
       // The only valid scenario for a missing one is if someone had written
       // a file in their app using the .vanilla.js/.vanilla.css extension
 
       if (cssMap.has(absoluteId)) {
-        return absoluteId;
+        // Keep the original query string for HMR.
+        return absoluteId + (query ? `?${query}` : '');
       }
     },
 
     load(id) {
-      if (!cssMap.has(id)) {
+      const [validId] = id.split('?');
+
+      if (!cssMap.has(validId)) {
         return;
       }
 
-      const css = cssMap.get(id);
+      const css = cssMap.get(validId);
 
       if (typeof css !== 'string') {
         return;
       }
 
-      if (!server) {
+      if (!server || server.config.isProduction) {
         return css;
       }
 
       return outdent__default["default"]`
         import { injectStyles } from '@vanilla-extract/css/injectStyles';
-        
+
         const inject = (css) => injectStyles({
           fileScope: ${JSON.stringify({
-        filePath: id
+        filePath: validId
       })},
           css
         });
 
         inject(${JSON.stringify(css)});
 
-        import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
+        import.meta.hot.on('${styleUpdateEvent(validId)}', (css) => {
           inject(css);
-        });   
+        });
       `;
     },
 
     async transform(code, id, ssrParam) {
-      if (!integration.cssFileFilter.test(id)) {
+      const [validId] = id.split('?');
+
+      if (!integration.cssFileFilter.test(validId)) {
         return null;
       }
 
@@ -173,10 +181,7 @@ function vanillaExtractPlugin({
         ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
       }
 
-      const index = id.indexOf('?');
-      const validId = index === -1 ? id : id.substring(0, index);
-
-      if (ssr) {
+      if (ssr && !process.env.VITE_RSC_BUILD) {
         return integration.addFileScope({
           source: code,
           filePath: vite.normalizePath(validId),
@@ -190,13 +195,14 @@ function vanillaExtractPlugin({
         watchFiles
       } = await integration.compile({
         filePath: validId,
-        cwd: config.root
+        cwd: config.root,
+        esbuildOptions
       });
 
       for (const file of watchFiles) {
         // In start mode, we need to prevent the file from rewatching itself.
         // If it's a `build --watch`, it needs to watch everything.
-        if (config.command === 'build' || file !== id) {
+        if (config.command === 'build' || file !== validId) {
           this.addWatchFile(file);
         }
       }
@@ -225,10 +231,12 @@ function vanillaExtractPlugin({
             const {
               moduleGraph
             } = server;
-            const module = moduleGraph.getModuleById(absoluteId);
+            const [module] = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
 
             if (module) {
-              moduleGraph.invalidateModule(module);
+              moduleGraph.invalidateModule(module); // Vite uses this timestamp to add `?t=` query string automatically for HMR.
+
+              module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
             }
 
             server.ws.send({

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

@@ -42,7 +42,8 @@ const resolvePostcssConfig = async config => {
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
 function vanillaExtractPlugin({
-  identifiers
+  identifiers,
+  esbuildOptions
 } = {}) {
   let config;
   let server;
@@ -85,56 +86,63 @@ function vanillaExtractPlugin({
     },
 
     resolveId(source) {
-      if (!source.endsWith(virtualExt)) {
+      const [validId, query] = source.split('?');
+
+      if (!validId.endsWith(virtualExt)) {
         return;
       } // Absolute paths seem to occur often in monorepos, where files are
       // imported from outside the config root.
 
 
-      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(source); // There should always be an entry in the `cssMap` here.
+      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(validId); // There should always be an entry in the `cssMap` here.
       // The only valid scenario for a missing one is if someone had written
       // a file in their app using the .vanilla.js/.vanilla.css extension
 
       if (cssMap.has(absoluteId)) {
-        return absoluteId;
+        // Keep the original query string for HMR.
+        return absoluteId + (query ? `?${query}` : '');
       }
     },
 
     load(id) {
-      if (!cssMap.has(id)) {
+      const [validId] = id.split('?');
+
+      if (!cssMap.has(validId)) {
         return;
       }
 
-      const css = cssMap.get(id);
+      const css = cssMap.get(validId);
 
       if (typeof css !== 'string') {
         return;
       }
 
-      if (!server) {
+      if (!server || server.config.isProduction) {
         return css;
       }
 
       return outdent`
         import { injectStyles } from '@vanilla-extract/css/injectStyles';
-        
+
         const inject = (css) => injectStyles({
           fileScope: ${JSON.stringify({
-        filePath: id
+        filePath: validId
       })},
           css
         });
 
         inject(${JSON.stringify(css)});
 
-        import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
+        import.meta.hot.on('${styleUpdateEvent(validId)}', (css) => {
           inject(css);
-        });   
+        });
       `;
     },
 
     async transform(code, id, ssrParam) {
-      if (!cssFileFilter.test(id)) {
+      const [validId] = id.split('?');
+
+      if (!cssFileFilter.test(validId)) {
         return null;
       }
 
@@ -146,10 +154,7 @@ function vanillaExtractPlugin({
         ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
       }
 
-      const index = id.indexOf('?');
-      const validId = index === -1 ? id : id.substring(0, index);
-
-      if (ssr) {
+      if (ssr && !process.env.VITE_RSC_BUILD) {
         return addFileScope({
           source: code,
           filePath: normalizePath(validId),
@@ -163,13 +168,14 @@ function vanillaExtractPlugin({
         watchFiles
       } = await compile({
         filePath: validId,
-        cwd: config.root
+        cwd: config.root,
+        esbuildOptions
       });
 
       for (const file of watchFiles) {
         // In start mode, we need to prevent the file from rewatching itself.
         // If it's a `build --watch`, it needs to watch everything.
-        if (config.command === 'build' || file !== id) {
+        if (config.command === 'build' || file !== validId) {
           this.addWatchFile(file);
         }
       }
@@ -198,10 +204,12 @@ function vanillaExtractPlugin({
             const {
               moduleGraph
             } = server;
-            const module = moduleGraph.getModuleById(absoluteId);
+            const [module] = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
 
             if (module) {
-              moduleGraph.invalidateModule(module);
+              moduleGraph.invalidateModule(module); // Vite uses this timestamp to add `?t=` query string automatically for HMR.
+
+              module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
             }
 
             server.ws.send({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanilla-extract/vite-plugin",
-  "version": "3.1.7",
+  "version": "3.3.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-vite-plugin.cjs.js",
   "module": "dist/vanilla-extract-vite-plugin.esm.js",
@@ -15,7 +15,7 @@
   "author": "SEEK",
   "license": "MIT",
   "dependencies": {
-    "@vanilla-extract/integration": "^4.0.1",
+    "@vanilla-extract/integration": "^5.0.0",
     "outdent": "^0.8.0",
     "postcss": "^8.3.6",
     "postcss-load-config": "^3.1.0"