@vanilla-extract/vite-plugin 3.1.4 → 3.1.7

package/README.md

@@ -84,6 +84,7 @@ Want to work at a higher level while maximising style re-use? Check out  🍨 [S
   - [Vite](#vite)
   - [Next.js](#nextjs)
   - [Gatsby](#gatsby)
+  - [Rollup](#rollup)
   - [Test environments](#test-environments)
   - [Configuration](#configuration)
     - [identifiers](#identifiers)
@@ -330,6 +331,32 @@ If you don't have a `.babelrc` file in the root of your project, create one. Add
 
 To add to your [Gatsby](https://www.gatsbyjs.com) site, use the [gatsby-plugin-vanilla-extract](https://github.com/gatsby-uc/plugins/tree/main/packages/gatsby-plugin-vanilla-extract) plugin.
 
+### Rollup
+
+> Note: This option is useful for library development but not suitable for application bundles.
+> Rollup has no built-in CSS bundling, so this plugin just outputs styles as individual CSS assets.
+> For applications we instead recommend to use Vite
+> (which itself uses Rollup under the hood but comes with its own CSS bundling).
+
+1. Install the dependencies.
+
+```bash
+npm install @vanilla-extract/css @vanilla-extract/rollup-plugin
+```
+
+2. Add the [Rollup](https://rollupjs.org/) plugin to your Rollup config.
+
+> 💡 This plugin accepts an optional [configuration object](#configuration).
+
+```js
+import { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';
+
+// rollup.config.js
+export default {
+  plugins: [vanillaExtractPlugin()]
+}
+```
+
 ### Test environments
 
 1. Install the dependencies.

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

@@ -68,16 +68,18 @@ const resolvePostcssConfig = async config => {
 
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
-const virtualPrefix = 'virtual:vanilla-extract:';
 function vanillaExtractPlugin({
   identifiers
 } = {}) {
   let config;
-  let packageInfo;
   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',
@@ -100,53 +102,62 @@ function vanillaExtractPlugin({
 
     async configResolved(resolvedConfig) {
       config = resolvedConfig;
+      packageName = integration.getPackageInfo(config.root).name;
 
       if (config.command === 'serve') {
         postCssConfig = await resolvePostcssConfig(config);
       }
 
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
-      packageInfo = integration.getPackageInfo(config.root);
     },
 
-    resolveId(id) {
-      if (id.indexOf(virtualPrefix) === 0) {
-        return id;
+    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 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(absoluteId)) {
+        return absoluteId;
       }
     },
 
     load(id) {
-      if (id.indexOf(virtualPrefix) === 0) {
-        const fileScopeId = id.slice(virtualPrefix.length, id.indexOf(virtualExt));
-
-        if (!cssMap.has(fileScopeId)) {
-          throw new Error(`Unable to locate ${fileScopeId} in the CSS map.`);
-        }
+      if (!cssMap.has(id)) {
+        return;
+      }
 
-        const css = cssMap.get(fileScopeId);
+      const css = cssMap.get(id);
 
-        if (!server) {
-          return css;
-        }
+      if (typeof css !== 'string') {
+        return;
+      }
 
-        const fileScope = integration.parseFileScope(fileScopeId);
-        return outdent__default["default"]`
-          import { injectStyles } from '@vanilla-extract/css/injectStyles';
-          
-          const inject = (css) => injectStyles({
-            fileScope: ${JSON.stringify(fileScope)},
-            css
-          });
-
-          inject(${JSON.stringify(css)});
-
-          import.meta.hot.on('${styleUpdateEvent(fileScopeId)}', (css) => {
-            inject(css);
-          });   
-        `;
+      if (!server) {
+        return css;
       }
 
-      return null;
+      return outdent__default["default"]`
+        import { injectStyles } from '@vanilla-extract/css/injectStyles';
+        
+        const inject = (css) => injectStyles({
+          fileScope: ${JSON.stringify({
+        filePath: id
+      })},
+          css
+        });
+
+        inject(${JSON.stringify(css)});
+
+        import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
+          inject(css);
+        });   
+      `;
     },
 
     async transform(code, id, ssrParam) {
@@ -168,9 +179,10 @@ function vanillaExtractPlugin({
       if (ssr) {
         return integration.addFileScope({
           source: code,
-          filePath: vite.normalizePath(path__default["default"].relative(packageInfo.dirname, validId)),
-          packageInfo
-        }).source;
+          filePath: vite.normalizePath(validId),
+          rootPath: config.root,
+          packageName
+        });
       }
 
       const {
@@ -189,7 +201,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',
@@ -197,9 +209,8 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          // This file id is requested through a URL where ".." isn't valid.
-          const fileId = integration.stringifyFileScope(fileScope).replace(/\.\./g, '_dir_up_');
-          const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
+          const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
           let cssSource = source;
 
           if (postCssConfig) {
@@ -210,11 +221,11 @@ function vanillaExtractPlugin({
             cssSource = postCssResult.css;
           }
 
-          if (server && cssMap.has(fileId) && cssMap.get(fileId) !== 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);
@@ -222,15 +233,23 @@ function vanillaExtractPlugin({
 
             server.ws.send({
               type: 'custom',
-              event: styleUpdateEvent(fileId),
+              event: styleUpdateEvent(absoluteId),
               data: cssSource
             });
           }
 
-          cssMap.set(fileId, 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

@@ -68,16 +68,18 @@ const resolvePostcssConfig = async config => {
 
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
-const virtualPrefix = 'virtual:vanilla-extract:';
 function vanillaExtractPlugin({
   identifiers
 } = {}) {
   let config;
-  let packageInfo;
   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',
@@ -100,53 +102,62 @@ function vanillaExtractPlugin({
 
     async configResolved(resolvedConfig) {
       config = resolvedConfig;
+      packageName = integration.getPackageInfo(config.root).name;
 
       if (config.command === 'serve') {
         postCssConfig = await resolvePostcssConfig(config);
       }
 
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
-      packageInfo = integration.getPackageInfo(config.root);
     },
 
-    resolveId(id) {
-      if (id.indexOf(virtualPrefix) === 0) {
-        return id;
+    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 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(absoluteId)) {
+        return absoluteId;
       }
     },
 
     load(id) {
-      if (id.indexOf(virtualPrefix) === 0) {
-        const fileScopeId = id.slice(virtualPrefix.length, id.indexOf(virtualExt));
-
-        if (!cssMap.has(fileScopeId)) {
-          throw new Error(`Unable to locate ${fileScopeId} in the CSS map.`);
-        }
+      if (!cssMap.has(id)) {
+        return;
+      }
 
-        const css = cssMap.get(fileScopeId);
+      const css = cssMap.get(id);
 
-        if (!server) {
-          return css;
-        }
+      if (typeof css !== 'string') {
+        return;
+      }
 
-        const fileScope = integration.parseFileScope(fileScopeId);
-        return outdent__default["default"]`
-          import { injectStyles } from '@vanilla-extract/css/injectStyles';
-          
-          const inject = (css) => injectStyles({
-            fileScope: ${JSON.stringify(fileScope)},
-            css
-          });
-
-          inject(${JSON.stringify(css)});
-
-          import.meta.hot.on('${styleUpdateEvent(fileScopeId)}', (css) => {
-            inject(css);
-          });   
-        `;
+      if (!server) {
+        return css;
       }
 
-      return null;
+      return outdent__default["default"]`
+        import { injectStyles } from '@vanilla-extract/css/injectStyles';
+        
+        const inject = (css) => injectStyles({
+          fileScope: ${JSON.stringify({
+        filePath: id
+      })},
+          css
+        });
+
+        inject(${JSON.stringify(css)});
+
+        import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
+          inject(css);
+        });   
+      `;
     },
 
     async transform(code, id, ssrParam) {
@@ -168,9 +179,10 @@ function vanillaExtractPlugin({
       if (ssr) {
         return integration.addFileScope({
           source: code,
-          filePath: vite.normalizePath(path__default["default"].relative(packageInfo.dirname, validId)),
-          packageInfo
-        }).source;
+          filePath: vite.normalizePath(validId),
+          rootPath: config.root,
+          packageName
+        });
       }
 
       const {
@@ -189,7 +201,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',
@@ -197,9 +209,8 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          // This file id is requested through a URL where ".." isn't valid.
-          const fileId = integration.stringifyFileScope(fileScope).replace(/\.\./g, '_dir_up_');
-          const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
+          const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
           let cssSource = source;
 
           if (postCssConfig) {
@@ -210,11 +221,11 @@ function vanillaExtractPlugin({
             cssSource = postCssResult.css;
           }
 
-          if (server && cssMap.has(fileId) && cssMap.get(fileId) !== 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);
@@ -222,15 +233,23 @@ function vanillaExtractPlugin({
 
             server.ws.send({
               type: 'custom',
-              event: styleUpdateEvent(fileId),
+              event: styleUpdateEvent(absoluteId),
               data: cssSource
             });
           }
 
-          cssMap.set(fileId, 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 { getPackageInfo, parseFileScope, cssFileFilter, addFileScope, compile, processVanillaFile, stringifyFileScope } 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
@@ -41,16 +41,18 @@ const resolvePostcssConfig = async config => {
 
 const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 
-const virtualPrefix = 'virtual:vanilla-extract:';
 function vanillaExtractPlugin({
   identifiers
 } = {}) {
   let config;
-  let packageInfo;
   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',
@@ -73,53 +75,62 @@ function vanillaExtractPlugin({
 
     async configResolved(resolvedConfig) {
       config = resolvedConfig;
+      packageName = getPackageInfo(config.root).name;
 
       if (config.command === 'serve') {
         postCssConfig = await resolvePostcssConfig(config);
       }
 
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
-      packageInfo = getPackageInfo(config.root);
     },
 
-    resolveId(id) {
-      if (id.indexOf(virtualPrefix) === 0) {
-        return id;
+    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 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(absoluteId)) {
+        return absoluteId;
       }
     },
 
     load(id) {
-      if (id.indexOf(virtualPrefix) === 0) {
-        const fileScopeId = id.slice(virtualPrefix.length, id.indexOf(virtualExt));
-
-        if (!cssMap.has(fileScopeId)) {
-          throw new Error(`Unable to locate ${fileScopeId} in the CSS map.`);
-        }
+      if (!cssMap.has(id)) {
+        return;
+      }
 
-        const css = cssMap.get(fileScopeId);
+      const css = cssMap.get(id);
 
-        if (!server) {
-          return css;
-        }
+      if (typeof css !== 'string') {
+        return;
+      }
 
-        const fileScope = parseFileScope(fileScopeId);
-        return outdent`
-          import { injectStyles } from '@vanilla-extract/css/injectStyles';
-          
-          const inject = (css) => injectStyles({
-            fileScope: ${JSON.stringify(fileScope)},
-            css
-          });
-
-          inject(${JSON.stringify(css)});
-
-          import.meta.hot.on('${styleUpdateEvent(fileScopeId)}', (css) => {
-            inject(css);
-          });   
-        `;
+      if (!server) {
+        return css;
       }
 
-      return null;
+      return outdent`
+        import { injectStyles } from '@vanilla-extract/css/injectStyles';
+        
+        const inject = (css) => injectStyles({
+          fileScope: ${JSON.stringify({
+        filePath: id
+      })},
+          css
+        });
+
+        inject(${JSON.stringify(css)});
+
+        import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
+          inject(css);
+        });   
+      `;
     },
 
     async transform(code, id, ssrParam) {
@@ -141,9 +152,10 @@ function vanillaExtractPlugin({
       if (ssr) {
         return addFileScope({
           source: code,
-          filePath: normalizePath(path.relative(packageInfo.dirname, validId)),
-          packageInfo
-        }).source;
+          filePath: normalizePath(validId),
+          rootPath: config.root,
+          packageName
+        });
       }
 
       const {
@@ -162,7 +174,7 @@ function vanillaExtractPlugin({
         }
       }
 
-      return processVanillaFile({
+      const output = await processVanillaFile({
         source,
         filePath: validId,
         identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
@@ -170,9 +182,8 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          // This file id is requested through a URL where ".." isn't valid.
-          const fileId = stringifyFileScope(fileScope).replace(/\.\./g, '_dir_up_');
-          const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
+          const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
           let cssSource = source;
 
           if (postCssConfig) {
@@ -183,11 +194,11 @@ function vanillaExtractPlugin({
             cssSource = postCssResult.css;
           }
 
-          if (server && cssMap.has(fileId) && cssMap.get(fileId) !== 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);
@@ -195,15 +206,23 @@ function vanillaExtractPlugin({
 
             server.ws.send({
               type: 'custom',
-              event: styleUpdateEvent(fileId),
+              event: styleUpdateEvent(absoluteId),
               data: cssSource
             });
           }
 
-          cssMap.set(fileId, 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.4",
+  "version": "3.1.7",
   "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": "^3.0.0",
+    "@vanilla-extract/integration": "^4.0.1",
     "outdent": "^0.8.0",
     "postcss": "^8.3.6",
     "postcss-load-config": "^3.1.0"