@vanilla-extract/vite-plugin 3.2.1 → 3.4.0

package/README.md

@@ -74,7 +74,7 @@ document.write(`
 
 ---
 
-Want to work at a higher level while maximising style re-use? Check out  🍨 [Sprinkles](https://vanilla-extract.style/documentation/sprinkles-api), our official zero-runtime atomic CSS framework, built on top of vanilla-extract.
+Want to work at a higher level while maximising style re-use? Check out  🍨 [Sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles), our official zero-runtime atomic CSS framework, built on top of vanilla-extract.
 
 ---
 
@@ -639,7 +639,7 @@ export const themeB = createTheme(vars, {
 });
 ```
 
-> 💡 All theme variants must provide a value for every variable or it’s a type error.
+> 💡 All theme values must be provided or it’s a type error.
 
 ### createGlobalTheme
 
@@ -662,7 +662,7 @@ export const vars = createGlobalTheme(':root', {
 });
 ```
 
-> 💡 All theme variants must provide a value for every variable or it’s a type error.
+> 💡 All theme values must be provided or it’s a type error.
 
 If you want to implement an existing theme contract, you can pass it as the second argument.
 
@@ -857,7 +857,7 @@ export const exampleStyle = style({
 });
 ```
 
-Scoped variables can be set via the `vars` property on style objects.
+Scoped variables can be set using the `vars` key.
 
 ```ts
 import { createVar, style } from '@vanilla-extract/css';
@@ -1044,7 +1044,7 @@ document.write(`
 
 Your recipe configuration can also make use of existing variables, classes and styles.
 
-For example, you can pass in the result of your [`sprinkles`](https://vanilla-extract.style/documentation/sprinkles-api) function directly.
+For example, you can pass in the result of your [`sprinkles`](https://vanilla-extract.style/documentation/packages/sprinkles) function directly.
 
 ```ts
 import { recipe } from '@vanilla-extract/recipes';

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

@@ -68,6 +68,8 @@ const resolvePostcssConfig = async config => {
 
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
+const virtualExtCss = '.vanilla.css';
+const virtualExtJs = '.vanilla.js';
 function vanillaExtractPlugin({
   identifiers,
   esbuildOptions
@@ -76,7 +78,7 @@ function vanillaExtractPlugin({
   let server;
   let postCssConfig;
   const cssMap = new Map();
-  let virtualExt;
+  let forceEmitCssInSsrBuild = !!process.env.VITE_RSC_BUILD;
   let packageName;
 
   const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
@@ -109,60 +111,71 @@ function vanillaExtractPlugin({
         postCssConfig = await resolvePostcssConfig(config);
       }
 
-      virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
+      if (config.plugins.some(p => p.name === 'astro:build')) {
+        forceEmitCssInSsrBuild = true;
+      }
     },
 
     resolveId(source) {
-      if (!source.endsWith(virtualExt)) {
+      const [validId, query] = source.split('?');
+
+      if (!validId.endsWith(virtualExtCss) && !validId.endsWith(virtualExtJs)) {
         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 || server.config.isProduction) {
+      if (validId.endsWith(virtualExtCss)) {
         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) => {
-          inject(css);
-        });   
+        if (import.meta.hot) {
+          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;
       }
 
@@ -174,10 +187,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 && !forceEmitCssInSsrBuild) {
         return integration.addFileScope({
           source: code,
           filePath: vite.normalizePath(validId),
@@ -198,7 +208,7 @@ function vanillaExtractPlugin({
       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);
         }
       }
@@ -211,7 +221,7 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
+          const rootRelativeId = `${fileScope.filePath}${config.command === 'build' || ssr && forceEmitCssInSsrBuild ? virtualExtCss : virtualExtJs}`;
           const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
           let cssSource = source;
 
@@ -227,10 +237,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

@@ -68,6 +68,8 @@ const resolvePostcssConfig = async config => {
 
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
+const virtualExtCss = '.vanilla.css';
+const virtualExtJs = '.vanilla.js';
 function vanillaExtractPlugin({
   identifiers,
   esbuildOptions
@@ -76,7 +78,7 @@ function vanillaExtractPlugin({
   let server;
   let postCssConfig;
   const cssMap = new Map();
-  let virtualExt;
+  let forceEmitCssInSsrBuild = !!process.env.VITE_RSC_BUILD;
   let packageName;
 
   const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
@@ -109,60 +111,71 @@ function vanillaExtractPlugin({
         postCssConfig = await resolvePostcssConfig(config);
       }
 
-      virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
+      if (config.plugins.some(p => p.name === 'astro:build')) {
+        forceEmitCssInSsrBuild = true;
+      }
     },
 
     resolveId(source) {
-      if (!source.endsWith(virtualExt)) {
+      const [validId, query] = source.split('?');
+
+      if (!validId.endsWith(virtualExtCss) && !validId.endsWith(virtualExtJs)) {
         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 || server.config.isProduction) {
+      if (validId.endsWith(virtualExtCss)) {
         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) => {
-          inject(css);
-        });   
+        if (import.meta.hot) {
+          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;
       }
 
@@ -174,10 +187,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 && !forceEmitCssInSsrBuild) {
         return integration.addFileScope({
           source: code,
           filePath: vite.normalizePath(validId),
@@ -198,7 +208,7 @@ function vanillaExtractPlugin({
       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);
         }
       }
@@ -211,7 +221,7 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
+          const rootRelativeId = `${fileScope.filePath}${config.command === 'build' || ssr && forceEmitCssInSsrBuild ? virtualExtCss : virtualExtJs}`;
           const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
           let cssSource = source;
 
@@ -227,10 +237,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

@@ -41,6 +41,8 @@ const resolvePostcssConfig = async config => {
 
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
+const virtualExtCss = '.vanilla.css';
+const virtualExtJs = '.vanilla.js';
 function vanillaExtractPlugin({
   identifiers,
   esbuildOptions
@@ -49,7 +51,7 @@ function vanillaExtractPlugin({
   let server;
   let postCssConfig;
   const cssMap = new Map();
-  let virtualExt;
+  let forceEmitCssInSsrBuild = !!process.env.VITE_RSC_BUILD;
   let packageName;
 
   const getAbsoluteVirtualFileId = source => normalizePath(path.join(config.root, source));
@@ -82,60 +84,71 @@ function vanillaExtractPlugin({
         postCssConfig = await resolvePostcssConfig(config);
       }
 
-      virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
+      if (config.plugins.some(p => p.name === 'astro:build')) {
+        forceEmitCssInSsrBuild = true;
+      }
     },
 
     resolveId(source) {
-      if (!source.endsWith(virtualExt)) {
+      const [validId, query] = source.split('?');
+
+      if (!validId.endsWith(virtualExtCss) && !validId.endsWith(virtualExtJs)) {
         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 || server.config.isProduction) {
+      if (validId.endsWith(virtualExtCss)) {
         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) => {
-          inject(css);
-        });   
+        if (import.meta.hot) {
+          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;
       }
 
@@ -147,10 +160,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 && !forceEmitCssInSsrBuild) {
         return addFileScope({
           source: code,
           filePath: normalizePath(validId),
@@ -171,7 +181,7 @@ function vanillaExtractPlugin({
       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);
         }
       }
@@ -184,7 +194,7 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
+          const rootRelativeId = `${fileScope.filePath}${config.command === 'build' || ssr && forceEmitCssInSsrBuild ? virtualExtCss : virtualExtJs}`;
           const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
           let cssSource = source;
 
@@ -200,10 +210,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.2.1",
+  "version": "3.4.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-vite-plugin.cjs.js",
   "module": "dist/vanilla-extract-vite-plugin.esm.js",