@vanilla-extract/vite-plugin 3.1.2 → 3.1.5

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)
@@ -328,7 +329,33 @@ If you don't have a `.babelrc` file in the root of your project, create one. Add
 
 ### Gatsby
 
-To add to your [Gatsby](https://www.gatsbyjs.com) site, use the [gatsby-plugin-vanilla-extract](https://github.com/KyleAMathews/gatsby-plugin-vanilla-extract) plugin.
+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
 
@@ -443,6 +470,15 @@ export const childClass = style({
 >
 > If you want to globally target child nodes within the current element (e.g. `'& a[href]'`), you should use [`globalStyle`](#globalstyle) instead.
 
+For fallback styles you may simply pass an array of properties instead of a single prop.
+
+```ts
+export const exampleStyle = style({
+  // in Firefox and IE the "overflow: overlay" will be ignored and the "overflow: auto" will be applied
+  overflow: ['auto', 'overlay'],
+});
+```
+
 Multiple styles can be composed into a single rule by providing an array of styles.
 
 ```ts
@@ -837,7 +873,7 @@ import { createVar, fallbackVar, style } from '@vanilla-extract/css';
 export const colorVar = createVar();
 
 export const exampleStyle = style({
-  color: fallbackVar(colorVar, 'blue');
+  color: fallbackVar(colorVar, 'blue'),
 });
 ```
 
@@ -850,7 +886,7 @@ export const primaryColorVar = createVar();
 export const secondaryColorVar = createVar();
 
 export const exampleStyle = style({
-  color: fallbackVar(primaryColorVar, secondaryColorVar, 'blue');
+  color: fallbackVar(primaryColorVar, secondaryColorVar, 'blue'),
 });
 ```
 

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

@@ -68,12 +68,10 @@ 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();
@@ -106,47 +104,52 @@ function vanillaExtractPlugin({
       }
 
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
-      packageInfo = integration.getPackageInfo(config.root);
     },
 
     resolveId(id) {
-      if (id.indexOf(virtualPrefix) === 0) {
-        return id;
+      if (!id.endsWith(virtualExt)) {
+        return;
+      }
+
+      const normalizedId = id.startsWith('/') ? id.slice(1) : id;
+
+      if (cssMap.has(normalizedId)) {
+        return vite.normalizePath(path__default["default"].join(config.root, normalizedId));
       }
     },
 
     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 (!id.endsWith(virtualExt)) {
+        return;
+      }
 
-        const css = cssMap.get(fileScopeId);
+      const cssFileId = id.slice(config.root.length + 1);
+      const css = cssMap.get(cssFileId);
 
-        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: cssFileId
+      })},
+          css
+        });
+
+        inject(${JSON.stringify(css)});
+
+        import.meta.hot.on('${styleUpdateEvent(cssFileId)}', (css) => {
+          inject(css);
+        });   
+      `;
     },
 
     async transform(code, id, ssrParam) {
@@ -168,9 +171,9 @@ 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
+        });
       }
 
       const {
@@ -197,8 +200,7 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          const fileId = integration.stringifyFileScope(fileScope);
-          const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          const id = `${fileScope.filePath}${virtualExt}`;
           let cssSource = source;
 
           if (postCssConfig) {
@@ -209,7 +211,7 @@ function vanillaExtractPlugin({
             cssSource = postCssResult.css;
           }
 
-          if (server && cssMap.has(fileId) && cssMap.get(fileId) !== source) {
+          if (server && cssMap.has(id) && cssMap.get(id) !== source) {
             const {
               moduleGraph
             } = server;
@@ -221,12 +223,12 @@ function vanillaExtractPlugin({
 
             server.ws.send({
               type: 'custom',
-              event: styleUpdateEvent(fileId),
+              event: styleUpdateEvent(id),
               data: cssSource
             });
           }
 
-          cssMap.set(fileId, cssSource);
+          cssMap.set(id, cssSource);
           return `import "${id}";`;
         }
       });

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

@@ -68,12 +68,10 @@ 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();
@@ -106,47 +104,52 @@ function vanillaExtractPlugin({
       }
 
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
-      packageInfo = integration.getPackageInfo(config.root);
     },
 
     resolveId(id) {
-      if (id.indexOf(virtualPrefix) === 0) {
-        return id;
+      if (!id.endsWith(virtualExt)) {
+        return;
+      }
+
+      const normalizedId = id.startsWith('/') ? id.slice(1) : id;
+
+      if (cssMap.has(normalizedId)) {
+        return vite.normalizePath(path__default["default"].join(config.root, normalizedId));
       }
     },
 
     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 (!id.endsWith(virtualExt)) {
+        return;
+      }
 
-        const css = cssMap.get(fileScopeId);
+      const cssFileId = id.slice(config.root.length + 1);
+      const css = cssMap.get(cssFileId);
 
-        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: cssFileId
+      })},
+          css
+        });
+
+        inject(${JSON.stringify(css)});
+
+        import.meta.hot.on('${styleUpdateEvent(cssFileId)}', (css) => {
+          inject(css);
+        });   
+      `;
     },
 
     async transform(code, id, ssrParam) {
@@ -168,9 +171,9 @@ 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
+        });
       }
 
       const {
@@ -197,8 +200,7 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          const fileId = integration.stringifyFileScope(fileScope);
-          const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          const id = `${fileScope.filePath}${virtualExt}`;
           let cssSource = source;
 
           if (postCssConfig) {
@@ -209,7 +211,7 @@ function vanillaExtractPlugin({
             cssSource = postCssResult.css;
           }
 
-          if (server && cssMap.has(fileId) && cssMap.get(fileId) !== source) {
+          if (server && cssMap.has(id) && cssMap.get(id) !== source) {
             const {
               moduleGraph
             } = server;
@@ -221,12 +223,12 @@ function vanillaExtractPlugin({
 
             server.ws.send({
               type: 'custom',
-              event: styleUpdateEvent(fileId),
+              event: styleUpdateEvent(id),
               data: cssSource
             });
           }
 
-          cssMap.set(fileId, cssSource);
+          cssMap.set(id, cssSource);
           return `import "${id}";`;
         }
       });

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 { 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,12 +41,10 @@ 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();
@@ -79,47 +77,52 @@ function vanillaExtractPlugin({
       }
 
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
-      packageInfo = getPackageInfo(config.root);
     },
 
     resolveId(id) {
-      if (id.indexOf(virtualPrefix) === 0) {
-        return id;
+      if (!id.endsWith(virtualExt)) {
+        return;
+      }
+
+      const normalizedId = id.startsWith('/') ? id.slice(1) : id;
+
+      if (cssMap.has(normalizedId)) {
+        return normalizePath(path.join(config.root, normalizedId));
       }
     },
 
     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 (!id.endsWith(virtualExt)) {
+        return;
+      }
 
-        const css = cssMap.get(fileScopeId);
+      const cssFileId = id.slice(config.root.length + 1);
+      const css = cssMap.get(cssFileId);
 
-        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: cssFileId
+      })},
+          css
+        });
+
+        inject(${JSON.stringify(css)});
+
+        import.meta.hot.on('${styleUpdateEvent(cssFileId)}', (css) => {
+          inject(css);
+        });   
+      `;
     },
 
     async transform(code, id, ssrParam) {
@@ -141,9 +144,9 @@ function vanillaExtractPlugin({
       if (ssr) {
         return addFileScope({
           source: code,
-          filePath: normalizePath(path.relative(packageInfo.dirname, validId)),
-          packageInfo
-        }).source;
+          filePath: normalizePath(validId),
+          rootPath: config.root
+        });
       }
 
       const {
@@ -170,8 +173,7 @@ function vanillaExtractPlugin({
           fileScope,
           source
         }) => {
-          const fileId = stringifyFileScope(fileScope);
-          const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          const id = `${fileScope.filePath}${virtualExt}`;
           let cssSource = source;
 
           if (postCssConfig) {
@@ -182,7 +184,7 @@ function vanillaExtractPlugin({
             cssSource = postCssResult.css;
           }
 
-          if (server && cssMap.has(fileId) && cssMap.get(fileId) !== source) {
+          if (server && cssMap.has(id) && cssMap.get(id) !== source) {
             const {
               moduleGraph
             } = server;
@@ -194,12 +196,12 @@ function vanillaExtractPlugin({
 
             server.ws.send({
               type: 'custom',
-              event: styleUpdateEvent(fileId),
+              event: styleUpdateEvent(id),
               data: cssSource
             });
           }
 
-          cssMap.set(fileId, cssSource);
+          cssMap.set(id, cssSource);
           return `import "${id}";`;
         }
       });

package/package.json

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