@vanilla-extract/vite-plugin 3.1.5 → 3.2.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,13 +69,18 @@ const resolvePostcssConfig = async config => {
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
 function vanillaExtractPlugin({
-  identifiers
+  identifiers,
+  esbuildOptions
 } = {}) {
   let config;
   let server;
   let postCssConfig;
   const cssMap = new Map();
   let virtualExt;
+  let packageName;
+
+  const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
+
   return {
     name: 'vanilla-extract',
     enforce: 'pre',
@@ -98,6 +103,7 @@ function vanillaExtractPlugin({
 
     async configResolved(resolvedConfig) {
       config = resolvedConfig;
+      packageName = integration.getPackageInfo(config.root).name;
 
       if (config.command === 'serve') {
         postCssConfig = await resolvePostcssConfig(config);
@@ -106,25 +112,28 @@ function vanillaExtractPlugin({
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
     },
 
-    resolveId(id) {
-      if (!id.endsWith(virtualExt)) {
+    resolveId(source) {
+      if (!source.endsWith(virtualExt)) {
         return;
-      }
+      } // Absolute paths seem to occur often in monorepos, where files are
+      // imported from outside the config root.
+
 
-      const normalizedId = id.startsWith('/') ? id.slice(1) : id;
+      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(source); // 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(normalizedId)) {
-        return vite.normalizePath(path__default["default"].join(config.root, normalizedId));
+      if (cssMap.has(absoluteId)) {
+        return absoluteId;
       }
     },
 
     load(id) {
-      if (!id.endsWith(virtualExt)) {
+      if (!cssMap.has(id)) {
         return;
       }
 
-      const cssFileId = id.slice(config.root.length + 1);
-      const css = cssMap.get(cssFileId);
+      const css = cssMap.get(id);
 
       if (typeof css !== 'string') {
         return;
@@ -139,14 +148,14 @@ function vanillaExtractPlugin({
         
         const inject = (css) => injectStyles({
           fileScope: ${JSON.stringify({
-        filePath: cssFileId
+        filePath: id
       })},
           css
         });
 
         inject(${JSON.stringify(css)});
 
-        import.meta.hot.on('${styleUpdateEvent(cssFileId)}', (css) => {
+        import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
           inject(css);
         });   
       `;
@@ -172,7 +181,8 @@ function vanillaExtractPlugin({
         return integration.addFileScope({
           source: code,
           filePath: vite.normalizePath(validId),
-          rootPath: config.root
+          rootPath: config.root,
+          packageName
         });
       }
 
@@ -181,7 +191,8 @@ function vanillaExtractPlugin({
         watchFiles
       } = await integration.compile({
         filePath: validId,
-        cwd: config.root
+        cwd: config.root,
+        esbuildOptions
       });
 
       for (const file of watchFiles) {
@@ -192,7 +203,7 @@ function vanillaExtractPlugin({
         }
       }
 
-      return integration.processVanillaFile({
+      const output = await integration.processVanillaFile({
         source,
         filePath: validId,
         identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
@@ -200,7 +211,8 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          const id = `${fileScope.filePath}${virtualExt}`;
+          const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
+          const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
           let cssSource = source;
 
           if (postCssConfig) {
@@ -211,11 +223,11 @@ function vanillaExtractPlugin({
             cssSource = postCssResult.css;
           }
 
-          if (server && cssMap.has(id) && cssMap.get(id) !== source) {
+          if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
             const {
               moduleGraph
             } = server;
-            const module = moduleGraph.getModuleById(id);
+            const module = moduleGraph.getModuleById(absoluteId);
 
             if (module) {
               moduleGraph.invalidateModule(module);
@@ -223,15 +235,23 @@ function vanillaExtractPlugin({
 
             server.ws.send({
               type: 'custom',
-              event: styleUpdateEvent(id),
+              event: styleUpdateEvent(absoluteId),
               data: cssSource
             });
           }
 
-          cssMap.set(id, cssSource);
-          return `import "${id}";`;
+          cssMap.set(absoluteId, cssSource); // We use the root relative id here to ensure file contents (content-hashes)
+          // are consistent across build machines
+
+          return `import "${rootRelativeId}";`;
         }
       });
+      return {
+        code: output,
+        map: {
+          mappings: ''
+        }
+      };
     }
 
   };

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

@@ -69,13 +69,18 @@ const resolvePostcssConfig = async config => {
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
 function vanillaExtractPlugin({
-  identifiers
+  identifiers,
+  esbuildOptions
 } = {}) {
   let config;
   let server;
   let postCssConfig;
   const cssMap = new Map();
   let virtualExt;
+  let packageName;
+
+  const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
+
   return {
     name: 'vanilla-extract',
     enforce: 'pre',
@@ -98,6 +103,7 @@ function vanillaExtractPlugin({
 
     async configResolved(resolvedConfig) {
       config = resolvedConfig;
+      packageName = integration.getPackageInfo(config.root).name;
 
       if (config.command === 'serve') {
         postCssConfig = await resolvePostcssConfig(config);
@@ -106,25 +112,28 @@ function vanillaExtractPlugin({
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
     },
 
-    resolveId(id) {
-      if (!id.endsWith(virtualExt)) {
+    resolveId(source) {
+      if (!source.endsWith(virtualExt)) {
         return;
-      }
+      } // Absolute paths seem to occur often in monorepos, where files are
+      // imported from outside the config root.
+
 
-      const normalizedId = id.startsWith('/') ? id.slice(1) : id;
+      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(source); // 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(normalizedId)) {
-        return vite.normalizePath(path__default["default"].join(config.root, normalizedId));
+      if (cssMap.has(absoluteId)) {
+        return absoluteId;
       }
     },
 
     load(id) {
-      if (!id.endsWith(virtualExt)) {
+      if (!cssMap.has(id)) {
         return;
       }
 
-      const cssFileId = id.slice(config.root.length + 1);
-      const css = cssMap.get(cssFileId);
+      const css = cssMap.get(id);
 
       if (typeof css !== 'string') {
         return;
@@ -139,14 +148,14 @@ function vanillaExtractPlugin({
         
         const inject = (css) => injectStyles({
           fileScope: ${JSON.stringify({
-        filePath: cssFileId
+        filePath: id
       })},
           css
         });
 
         inject(${JSON.stringify(css)});
 
-        import.meta.hot.on('${styleUpdateEvent(cssFileId)}', (css) => {
+        import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
           inject(css);
         });   
       `;
@@ -172,7 +181,8 @@ function vanillaExtractPlugin({
         return integration.addFileScope({
           source: code,
           filePath: vite.normalizePath(validId),
-          rootPath: config.root
+          rootPath: config.root,
+          packageName
         });
       }
 
@@ -181,7 +191,8 @@ function vanillaExtractPlugin({
         watchFiles
       } = await integration.compile({
         filePath: validId,
-        cwd: config.root
+        cwd: config.root,
+        esbuildOptions
       });
 
       for (const file of watchFiles) {
@@ -192,7 +203,7 @@ function vanillaExtractPlugin({
         }
       }
 
-      return integration.processVanillaFile({
+      const output = await integration.processVanillaFile({
         source,
         filePath: validId,
         identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
@@ -200,7 +211,8 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          const id = `${fileScope.filePath}${virtualExt}`;
+          const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
+          const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
           let cssSource = source;
 
           if (postCssConfig) {
@@ -211,11 +223,11 @@ function vanillaExtractPlugin({
             cssSource = postCssResult.css;
           }
 
-          if (server && cssMap.has(id) && cssMap.get(id) !== source) {
+          if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
             const {
               moduleGraph
             } = server;
-            const module = moduleGraph.getModuleById(id);
+            const module = moduleGraph.getModuleById(absoluteId);
 
             if (module) {
               moduleGraph.invalidateModule(module);
@@ -223,15 +235,23 @@ function vanillaExtractPlugin({
 
             server.ws.send({
               type: 'custom',
-              event: styleUpdateEvent(id),
+              event: styleUpdateEvent(absoluteId),
               data: cssSource
             });
           }
 
-          cssMap.set(id, cssSource);
-          return `import "${id}";`;
+          cssMap.set(absoluteId, cssSource); // We use the root relative id here to ensure file contents (content-hashes)
+          // are consistent across build machines
+
+          return `import "${rootRelativeId}";`;
         }
       });
+      return {
+        code: output,
+        map: {
+          mappings: ''
+        }
+      };
     }
 
   };

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

@@ -1,7 +1,7 @@
 import path from 'path';
 import { normalizePath } from 'vite';
 import outdent from 'outdent';
-import { cssFileFilter, addFileScope, compile, processVanillaFile } from '@vanilla-extract/integration';
+import { getPackageInfo, cssFileFilter, addFileScope, compile, processVanillaFile } from '@vanilla-extract/integration';
 
 // Mostly copied from vite's implementation
 // https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
@@ -42,13 +42,18 @@ const resolvePostcssConfig = async config => {
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
 function vanillaExtractPlugin({
-  identifiers
+  identifiers,
+  esbuildOptions
 } = {}) {
   let config;
   let server;
   let postCssConfig;
   const cssMap = new Map();
   let virtualExt;
+  let packageName;
+
+  const getAbsoluteVirtualFileId = source => normalizePath(path.join(config.root, source));
+
   return {
     name: 'vanilla-extract',
     enforce: 'pre',
@@ -71,6 +76,7 @@ function vanillaExtractPlugin({
 
     async configResolved(resolvedConfig) {
       config = resolvedConfig;
+      packageName = getPackageInfo(config.root).name;
 
       if (config.command === 'serve') {
         postCssConfig = await resolvePostcssConfig(config);
@@ -79,25 +85,28 @@ function vanillaExtractPlugin({
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
     },
 
-    resolveId(id) {
-      if (!id.endsWith(virtualExt)) {
+    resolveId(source) {
+      if (!source.endsWith(virtualExt)) {
         return;
-      }
+      } // Absolute paths seem to occur often in monorepos, where files are
+      // imported from outside the config root.
+
 
-      const normalizedId = id.startsWith('/') ? id.slice(1) : id;
+      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(source); // 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(normalizedId)) {
-        return normalizePath(path.join(config.root, normalizedId));
+      if (cssMap.has(absoluteId)) {
+        return absoluteId;
       }
     },
 
     load(id) {
-      if (!id.endsWith(virtualExt)) {
+      if (!cssMap.has(id)) {
         return;
       }
 
-      const cssFileId = id.slice(config.root.length + 1);
-      const css = cssMap.get(cssFileId);
+      const css = cssMap.get(id);
 
       if (typeof css !== 'string') {
         return;
@@ -112,14 +121,14 @@ function vanillaExtractPlugin({
         
         const inject = (css) => injectStyles({
           fileScope: ${JSON.stringify({
-        filePath: cssFileId
+        filePath: id
       })},
           css
         });
 
         inject(${JSON.stringify(css)});
 
-        import.meta.hot.on('${styleUpdateEvent(cssFileId)}', (css) => {
+        import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
           inject(css);
         });   
       `;
@@ -145,7 +154,8 @@ function vanillaExtractPlugin({
         return addFileScope({
           source: code,
           filePath: normalizePath(validId),
-          rootPath: config.root
+          rootPath: config.root,
+          packageName
         });
       }
 
@@ -154,7 +164,8 @@ function vanillaExtractPlugin({
         watchFiles
       } = await compile({
         filePath: validId,
-        cwd: config.root
+        cwd: config.root,
+        esbuildOptions
       });
 
       for (const file of watchFiles) {
@@ -165,7 +176,7 @@ function vanillaExtractPlugin({
         }
       }
 
-      return processVanillaFile({
+      const output = await processVanillaFile({
         source,
         filePath: validId,
         identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
@@ -173,7 +184,8 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          const id = `${fileScope.filePath}${virtualExt}`;
+          const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
+          const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
           let cssSource = source;
 
           if (postCssConfig) {
@@ -184,11 +196,11 @@ function vanillaExtractPlugin({
             cssSource = postCssResult.css;
           }
 
-          if (server && cssMap.has(id) && cssMap.get(id) !== source) {
+          if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
             const {
               moduleGraph
             } = server;
-            const module = moduleGraph.getModuleById(id);
+            const module = moduleGraph.getModuleById(absoluteId);
 
             if (module) {
               moduleGraph.invalidateModule(module);
@@ -196,15 +208,23 @@ function vanillaExtractPlugin({
 
             server.ws.send({
               type: 'custom',
-              event: styleUpdateEvent(id),
+              event: styleUpdateEvent(absoluteId),
               data: cssSource
             });
           }
 
-          cssMap.set(id, cssSource);
-          return `import "${id}";`;
+          cssMap.set(absoluteId, cssSource); // We use the root relative id here to ensure file contents (content-hashes)
+          // are consistent across build machines
+
+          return `import "${rootRelativeId}";`;
         }
       });
+      return {
+        code: output,
+        map: {
+          mappings: ''
+        }
+      };
     }
 
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanilla-extract/vite-plugin",
-  "version": "3.1.5",
+  "version": "3.2.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.0",
+    "@vanilla-extract/integration": "^5.0.0",
     "outdent": "^0.8.0",
     "postcss": "^8.3.6",
     "postcss-load-config": "^3.1.0"