@vanilla-extract/vite-plugin 2.1.3 → 3.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 SEEK
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -82,7 +82,6 @@ Want to work at a higher level while maximising style re-use? Check out  🍨 [S
   - [webpack](#webpack)
   - [esbuild](#esbuild)
   - [Vite](#vite)
-  - [Snowpack](#snowpack)
   - [Next.js](#nextjs)
   - [Gatsby](#gatsby)
   - [Test environments](#test-environments)
@@ -95,6 +94,7 @@ Want to work at a higher level while maximising style re-use? Check out  🍨 [S
   - [createTheme](#createtheme)
   - [createGlobalTheme](#createglobaltheme)
   - [createThemeContract](#createthemecontract)
+  - [createGlobalThemeContract](#createglobalthemecontract)
   - [assignVars](#assignvars)
   - [createVar](#createvar)
   - [fallbackVar](#fallbackvar)
@@ -271,27 +271,6 @@ export default {
 
 > Please note: There are currently no automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
 
-### Snowpack
-
-1. Install the dependencies.
-
-```bash
-npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin
-```
-
-2. Add the [Snowpack](https://www.snowpack.dev/) plugin to your snowpack config.
-
-> 💡 This plugin accepts an optional [configuration object](#configuration).
-
-```js
-// snowpack.config.json
-{
-  "plugins": ["@vanilla-extract/snowpack-plugin"]
-}
-```
-
-> Please note: There are currently no automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
-
 ### Next.js
 
 1. Install the dependencies.
@@ -300,16 +279,7 @@ npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin
 npm install @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extract/next-plugin
 ```
 
-2. If you don't have a `.babelrc` file in the root of your project, create one. Add the [Babel](https://babeljs.io) plugin to your `.babelrc` file, ensuring that you're also including `"next/babel"` in your `presets` array.
-
-```json
-{
-  "presets": ["next/babel"],
-  "plugins": ["@vanilla-extract/babel-plugin"]
-}
-```
-
-3. If you don't have a `next.config.js` file in the root of your project, create one. Add the [Next.js](https://nextjs.org) plugin to your `next.config.js` file.
+2. If you don't have a `next.config.js` file in the root of your project, create one. Add the [Next.js](https://nextjs.org) plugin to your `next.config.js` file.
 
 > 💡 This plugin accepts an optional [configuration object](#configuration).
 
@@ -319,6 +289,7 @@ const {
 } = require('@vanilla-extract/next-plugin');
 const withVanillaExtract = createVanillaExtractPlugin();
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {};
 
 module.exports = withVanillaExtract(nextConfig);
@@ -336,11 +307,25 @@ const withMDX = require('@next/mdx')({
   extension: /\.mdx$/
 });
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {};
 
 module.exports = withVanillaExtract(withMDX(nextConfig));
 ```
 
+3. (Optional) If you want to automatically generate debug IDs during development, you can add the [Babel](https://babeljs.io) plugin. Note that this step will cause Next.js to switch from [SWC](https://github.com/swc-project/swc) to Babel, increasing build times. This may or may not be an issue depending on the size of your project.
+
+> Note: While optional for Next.js, the Babel plugin is still required when trying to run `.css.ts` files in Node for unit testing since the files are no longer being processed by a bundler.
+
+If you don't have a `.babelrc` file in the root of your project, create one. Add the Babel plugin to your `.babelrc` file, ensuring that you're also including `"next/babel"` in your `presets` array.
+
+```json
+{
+  "presets": ["next/babel"],
+  "plugins": ["@vanilla-extract/babel-plugin"]
+}
+```
+
 ### 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.

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

@@ -1,12 +1,7 @@
-import type { Plugin } from 'vite';
-import { IdentifierOption } from '@vanilla-extract/integration';
-interface Options {
-    identifiers?: IdentifierOption;
-    /**
-     * Which CSS runtime to use when running `vite serve`.
-     * @default 'vite'
-     */
-    devStyleRuntime?: 'vite' | 'vanilla-extract';
-}
-export declare function vanillaExtractPlugin({ identifiers, devStyleRuntime, }?: Options): Plugin;
-export {};
+import type { Plugin } from 'vite';
+import { IdentifierOption } from '@vanilla-extract/integration';
+interface Options {
+    identifiers?: IdentifierOption;
+}
+export declare function vanillaExtractPlugin({ identifiers }?: Options): Plugin;
+export {};

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

@@ -0,0 +1,7 @@
+import type { ResolvedConfig } from 'vite';
+import type { ProcessOptions, Plugin } from 'postcss';
+export interface PostCSSConfigResult {
+    options: ProcessOptions;
+    plugins: Plugin[];
+}
+export declare const resolvePostcssConfig: (config: ResolvedConfig) => Promise<PostCSSConfigResult | null>;

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

@@ -9,25 +9,83 @@ var integration = require('@vanilla-extract/integration');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var path__default = /*#__PURE__*/_interopDefault(path);
 var outdent__default = /*#__PURE__*/_interopDefault(outdent);
 
+// Mostly copied from vite's implementation
+// https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
+const resolvePostcssConfig = async config => {
+  // inline postcss config via vite config
+  const inlineOptions = config.css?.postcss;
+  const inlineOptionsIsString = typeof inlineOptions === 'string';
+
+  if (inlineOptions && !inlineOptionsIsString) {
+    const options = { ...inlineOptions
+    };
+    delete options.plugins;
+    return {
+      options,
+      plugins: inlineOptions.plugins || []
+    };
+  } else {
+    try {
+      const searchPath = typeof inlineOptions === 'string' ? inlineOptions : config.root;
+      const postCssConfig = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss-load-config')); })).default({}, searchPath);
+      return {
+        options: postCssConfig.options,
+        // @ts-expect-error - The postcssrc options don't agree with real postcss, but it should be ok
+        plugins: postCssConfig.plugins
+      };
+    } catch (e) {
+      if (!/No PostCSS Config found/.test(e.message)) {
+        throw e;
+      }
+
+      return null;
+    }
+  }
+};
+
+const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
+
+const virtualPrefix = 'virtual:vanilla-extract:';
 function vanillaExtractPlugin({
-  identifiers,
-  devStyleRuntime = 'vite'
+  identifiers
 } = {}) {
   let config;
   let packageInfo;
-  let useRuntime = false;
+  let server;
+  let postCssConfig;
   const cssMap = new Map();
   let virtualExt;
   return {
     name: 'vanilla-extract',
     enforce: 'pre',
 
+    configureServer(_server) {
+      server = _server;
+    },
+
     config(_userConfig, env) {
-      useRuntime = devStyleRuntime === 'vanilla-extract' && env.command === 'serve';
-      const include = useRuntime ? ['@vanilla-extract/css/injectStyles'] : [];
+      const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
       return {
         optimizeDeps: {
           include
@@ -38,23 +96,26 @@ function vanillaExtractPlugin({
       };
     },
 
-    configResolved(resolvedConfig) {
+    async configResolved(resolvedConfig) {
       config = resolvedConfig;
-      virtualExt = `.vanilla.${useRuntime ? 'js' : 'css'}?hash=`;
+
+      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(virtualExt) > 0) {
+      if (id.indexOf(virtualPrefix) === 0) {
         return id;
       }
     },
 
     load(id) {
-      const extensionIndex = id.indexOf(virtualExt);
-
-      if (extensionIndex > 0) {
-        const fileScopeId = id.substring(0, extensionIndex);
+      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.`);
@@ -62,36 +123,50 @@ function vanillaExtractPlugin({
 
         const css = cssMap.get(fileScopeId);
 
-        if (!useRuntime) {
+        if (!server) {
           return css;
         }
 
         const fileScope = integration.parseFileScope(fileScopeId);
-        return outdent__default['default']`
+        return outdent__default["default"]`
           import { injectStyles } from '@vanilla-extract/css/injectStyles';
           
-          injectStyles({
+          const inject = (css) => injectStyles({
             fileScope: ${JSON.stringify(fileScope)},
-            css: ${JSON.stringify(css)}
-          })
+            css
+          });
+
+          inject(${JSON.stringify(css)});
+
+          import.meta.hot.on('${styleUpdateEvent(fileScopeId)}', (css) => {
+            inject(css);
+          });   
         `;
       }
 
       return null;
     },
 
-    async transform(code, id, ssr) {
+    async transform(code, id, ssrParam) {
       if (!integration.cssFileFilter.test(id)) {
         return null;
       }
 
+      let ssr;
+
+      if (typeof ssrParam === 'boolean') {
+        ssr = ssrParam;
+      } else {
+        ssr = ssrParam?.ssr;
+      }
+
       const index = id.indexOf('?');
       const validId = index === -1 ? id : id.substring(0, index);
 
       if (ssr) {
         return integration.addFileScope({
           source: code,
-          filePath: vite.normalizePath(path__default['default'].relative(packageInfo.dirname, validId)),
+          filePath: vite.normalizePath(path__default["default"].relative(packageInfo.dirname, validId)),
           packageInfo
         }).source;
       }
@@ -115,14 +190,42 @@ function vanillaExtractPlugin({
       return integration.processVanillaFile({
         source,
         filePath: validId,
-        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
-        serializeVirtualCssPath: ({
+        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        serializeVirtualCssPath: async ({
           fileScope,
           source
         }) => {
           const fileId = integration.stringifyFileScope(fileScope);
-          cssMap.set(fileId, source);
-          return `import "${fileId}${virtualExt}${integration.hash(source)}";`;
+          const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          let cssSource = source;
+
+          if (postCssConfig) {
+            const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(source, { ...postCssConfig.options,
+              from: undefined,
+              map: false
+            });
+            cssSource = postCssResult.css;
+          }
+
+          if (server && cssMap.has(fileId) && cssMap.get(fileId) !== source) {
+            const {
+              moduleGraph
+            } = server;
+            const module = moduleGraph.getModuleById(id);
+
+            if (module) {
+              moduleGraph.invalidateModule(module);
+            }
+
+            server.ws.send({
+              type: 'custom',
+              event: styleUpdateEvent(fileId),
+              data: cssSource
+            });
+          }
+
+          cssMap.set(fileId, cssSource);
+          return `import "${id}";`;
         }
       });
     }

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

@@ -9,25 +9,83 @@ var integration = require('@vanilla-extract/integration');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var path__default = /*#__PURE__*/_interopDefault(path);
 var outdent__default = /*#__PURE__*/_interopDefault(outdent);
 
+// Mostly copied from vite's implementation
+// https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
+const resolvePostcssConfig = async config => {
+  // inline postcss config via vite config
+  const inlineOptions = config.css?.postcss;
+  const inlineOptionsIsString = typeof inlineOptions === 'string';
+
+  if (inlineOptions && !inlineOptionsIsString) {
+    const options = { ...inlineOptions
+    };
+    delete options.plugins;
+    return {
+      options,
+      plugins: inlineOptions.plugins || []
+    };
+  } else {
+    try {
+      const searchPath = typeof inlineOptions === 'string' ? inlineOptions : config.root;
+      const postCssConfig = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss-load-config')); })).default({}, searchPath);
+      return {
+        options: postCssConfig.options,
+        // @ts-expect-error - The postcssrc options don't agree with real postcss, but it should be ok
+        plugins: postCssConfig.plugins
+      };
+    } catch (e) {
+      if (!/No PostCSS Config found/.test(e.message)) {
+        throw e;
+      }
+
+      return null;
+    }
+  }
+};
+
+const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
+
+const virtualPrefix = 'virtual:vanilla-extract:';
 function vanillaExtractPlugin({
-  identifiers,
-  devStyleRuntime = 'vite'
+  identifiers
 } = {}) {
   let config;
   let packageInfo;
-  let useRuntime = false;
+  let server;
+  let postCssConfig;
   const cssMap = new Map();
   let virtualExt;
   return {
     name: 'vanilla-extract',
     enforce: 'pre',
 
+    configureServer(_server) {
+      server = _server;
+    },
+
     config(_userConfig, env) {
-      useRuntime = devStyleRuntime === 'vanilla-extract' && env.command === 'serve';
-      const include = useRuntime ? ['@vanilla-extract/css/injectStyles'] : [];
+      const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
       return {
         optimizeDeps: {
           include
@@ -38,23 +96,26 @@ function vanillaExtractPlugin({
       };
     },
 
-    configResolved(resolvedConfig) {
+    async configResolved(resolvedConfig) {
       config = resolvedConfig;
-      virtualExt = `.vanilla.${useRuntime ? 'js' : 'css'}?hash=`;
+
+      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(virtualExt) > 0) {
+      if (id.indexOf(virtualPrefix) === 0) {
         return id;
       }
     },
 
     load(id) {
-      const extensionIndex = id.indexOf(virtualExt);
-
-      if (extensionIndex > 0) {
-        const fileScopeId = id.substring(0, extensionIndex);
+      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.`);
@@ -62,36 +123,50 @@ function vanillaExtractPlugin({
 
         const css = cssMap.get(fileScopeId);
 
-        if (!useRuntime) {
+        if (!server) {
           return css;
         }
 
         const fileScope = integration.parseFileScope(fileScopeId);
-        return outdent__default['default']`
+        return outdent__default["default"]`
           import { injectStyles } from '@vanilla-extract/css/injectStyles';
           
-          injectStyles({
+          const inject = (css) => injectStyles({
             fileScope: ${JSON.stringify(fileScope)},
-            css: ${JSON.stringify(css)}
-          })
+            css
+          });
+
+          inject(${JSON.stringify(css)});
+
+          import.meta.hot.on('${styleUpdateEvent(fileScopeId)}', (css) => {
+            inject(css);
+          });   
         `;
       }
 
       return null;
     },
 
-    async transform(code, id, ssr) {
+    async transform(code, id, ssrParam) {
       if (!integration.cssFileFilter.test(id)) {
         return null;
       }
 
+      let ssr;
+
+      if (typeof ssrParam === 'boolean') {
+        ssr = ssrParam;
+      } else {
+        ssr = ssrParam?.ssr;
+      }
+
       const index = id.indexOf('?');
       const validId = index === -1 ? id : id.substring(0, index);
 
       if (ssr) {
         return integration.addFileScope({
           source: code,
-          filePath: vite.normalizePath(path__default['default'].relative(packageInfo.dirname, validId)),
+          filePath: vite.normalizePath(path__default["default"].relative(packageInfo.dirname, validId)),
           packageInfo
         }).source;
       }
@@ -115,14 +190,42 @@ function vanillaExtractPlugin({
       return integration.processVanillaFile({
         source,
         filePath: validId,
-        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
-        serializeVirtualCssPath: ({
+        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        serializeVirtualCssPath: async ({
           fileScope,
           source
         }) => {
           const fileId = integration.stringifyFileScope(fileScope);
-          cssMap.set(fileId, source);
-          return `import "${fileId}${virtualExt}${integration.hash(source)}";`;
+          const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          let cssSource = source;
+
+          if (postCssConfig) {
+            const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(source, { ...postCssConfig.options,
+              from: undefined,
+              map: false
+            });
+            cssSource = postCssResult.css;
+          }
+
+          if (server && cssMap.has(fileId) && cssMap.get(fileId) !== source) {
+            const {
+              moduleGraph
+            } = server;
+            const module = moduleGraph.getModuleById(id);
+
+            if (module) {
+              moduleGraph.invalidateModule(module);
+            }
+
+            server.ws.send({
+              type: 'custom',
+              event: styleUpdateEvent(fileId),
+              data: cssSource
+            });
+          }
+
+          cssMap.set(fileId, cssSource);
+          return `import "${id}";`;
         }
       });
     }

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

@@ -1,24 +1,64 @@
 import path from 'path';
 import { normalizePath } from 'vite';
 import outdent from 'outdent';
-import { getPackageInfo, parseFileScope, cssFileFilter, addFileScope, compile, processVanillaFile, stringifyFileScope, hash } from '@vanilla-extract/integration';
+import { getPackageInfo, parseFileScope, cssFileFilter, addFileScope, compile, processVanillaFile, stringifyFileScope } from '@vanilla-extract/integration';
+
+// Mostly copied from vite's implementation
+// https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
+const resolvePostcssConfig = async config => {
+  // inline postcss config via vite config
+  const inlineOptions = config.css?.postcss;
+  const inlineOptionsIsString = typeof inlineOptions === 'string';
+
+  if (inlineOptions && !inlineOptionsIsString) {
+    const options = { ...inlineOptions
+    };
+    delete options.plugins;
+    return {
+      options,
+      plugins: inlineOptions.plugins || []
+    };
+  } else {
+    try {
+      const searchPath = typeof inlineOptions === 'string' ? inlineOptions : config.root;
+      const postCssConfig = await (await import('postcss-load-config')).default({}, searchPath);
+      return {
+        options: postCssConfig.options,
+        // @ts-expect-error - The postcssrc options don't agree with real postcss, but it should be ok
+        plugins: postCssConfig.plugins
+      };
+    } catch (e) {
+      if (!/No PostCSS Config found/.test(e.message)) {
+        throw e;
+      }
 
+      return null;
+    }
+  }
+};
+
+const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
+
+const virtualPrefix = 'virtual:vanilla-extract:';
 function vanillaExtractPlugin({
-  identifiers,
-  devStyleRuntime = 'vite'
+  identifiers
 } = {}) {
   let config;
   let packageInfo;
-  let useRuntime = false;
+  let server;
+  let postCssConfig;
   const cssMap = new Map();
   let virtualExt;
   return {
     name: 'vanilla-extract',
     enforce: 'pre',
 
+    configureServer(_server) {
+      server = _server;
+    },
+
     config(_userConfig, env) {
-      useRuntime = devStyleRuntime === 'vanilla-extract' && env.command === 'serve';
-      const include = useRuntime ? ['@vanilla-extract/css/injectStyles'] : [];
+      const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
       return {
         optimizeDeps: {
           include
@@ -29,23 +69,26 @@ function vanillaExtractPlugin({
       };
     },
 
-    configResolved(resolvedConfig) {
+    async configResolved(resolvedConfig) {
       config = resolvedConfig;
-      virtualExt = `.vanilla.${useRuntime ? 'js' : 'css'}?hash=`;
+
+      if (config.command === 'serve') {
+        postCssConfig = await resolvePostcssConfig(config);
+      }
+
+      virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
       packageInfo = getPackageInfo(config.root);
     },
 
     resolveId(id) {
-      if (id.indexOf(virtualExt) > 0) {
+      if (id.indexOf(virtualPrefix) === 0) {
         return id;
       }
     },
 
     load(id) {
-      const extensionIndex = id.indexOf(virtualExt);
-
-      if (extensionIndex > 0) {
-        const fileScopeId = id.substring(0, extensionIndex);
+      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.`);
@@ -53,7 +96,7 @@ function vanillaExtractPlugin({
 
         const css = cssMap.get(fileScopeId);
 
-        if (!useRuntime) {
+        if (!server) {
           return css;
         }
 
@@ -61,21 +104,35 @@ function vanillaExtractPlugin({
         return outdent`
           import { injectStyles } from '@vanilla-extract/css/injectStyles';
           
-          injectStyles({
+          const inject = (css) => injectStyles({
             fileScope: ${JSON.stringify(fileScope)},
-            css: ${JSON.stringify(css)}
-          })
+            css
+          });
+
+          inject(${JSON.stringify(css)});
+
+          import.meta.hot.on('${styleUpdateEvent(fileScopeId)}', (css) => {
+            inject(css);
+          });   
         `;
       }
 
       return null;
     },
 
-    async transform(code, id, ssr) {
+    async transform(code, id, ssrParam) {
       if (!cssFileFilter.test(id)) {
         return null;
       }
 
+      let ssr;
+
+      if (typeof ssrParam === 'boolean') {
+        ssr = ssrParam;
+      } else {
+        ssr = ssrParam?.ssr;
+      }
+
       const index = id.indexOf('?');
       const validId = index === -1 ? id : id.substring(0, index);
 
@@ -106,14 +163,42 @@ function vanillaExtractPlugin({
       return processVanillaFile({
         source,
         filePath: validId,
-        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
-        serializeVirtualCssPath: ({
+        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        serializeVirtualCssPath: async ({
           fileScope,
           source
         }) => {
           const fileId = stringifyFileScope(fileScope);
-          cssMap.set(fileId, source);
-          return `import "${fileId}${virtualExt}${hash(source)}";`;
+          const id = `${virtualPrefix}${fileId}${virtualExt}`;
+          let cssSource = source;
+
+          if (postCssConfig) {
+            const postCssResult = await (await import('postcss')).default(postCssConfig.plugins).process(source, { ...postCssConfig.options,
+              from: undefined,
+              map: false
+            });
+            cssSource = postCssResult.css;
+          }
+
+          if (server && cssMap.has(fileId) && cssMap.get(fileId) !== source) {
+            const {
+              moduleGraph
+            } = server;
+            const module = moduleGraph.getModuleById(id);
+
+            if (module) {
+              moduleGraph.invalidateModule(module);
+            }
+
+            server.ws.send({
+              type: 'custom',
+              event: styleUpdateEvent(fileId),
+              data: cssSource
+            });
+          }
+
+          cssMap.set(fileId, cssSource);
+          return `import "${id}";`;
         }
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanilla-extract/vite-plugin",
-  "version": "2.1.3",
+  "version": "3.1.1",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-vite-plugin.cjs.js",
   "module": "dist/vanilla-extract-vite-plugin.esm.js",
@@ -15,13 +15,15 @@
   "author": "SEEK",
   "license": "MIT",
   "dependencies": {
-    "@vanilla-extract/integration": "^1.4.3",
-    "outdent": "^0.8.0"
+    "@vanilla-extract/integration": "^2.0.0",
+    "outdent": "^0.8.0",
+    "postcss": "^8.3.6",
+    "postcss-load-config": "^3.1.0"
   },
   "devDependencies": {
-    "vite": "^2.6.0"
+    "vite": "^2.7.0"
   },
   "peerDependencies": {
     "vite": "^2.2.3"
   }
-}
+}

package/CHANGELOG.md

@@ -1,173 +0,0 @@
-# @vanilla-extract/vite-plugin
-
-## 2.1.3
-
-### Patch Changes
-
-- [#409](https://github.com/seek-oss/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/seek-oss/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/benjervis)! - Fix plugin for watch mode.
-
-  The vite plugin previously relied on a one to one matching of resolve to load calls, and would clean up the CSS stored in memory after it was loaded.
-
-  This isn't true in `--watch` mode, as the same file can be loaded on the rebuild without having to be resolved, which the plugin now handles.
-
-* [#409](https://github.com/seek-oss/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/seek-oss/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/benjervis)! - Update the "vanilla-extract" devStyleRuntime option.
-
-  When using the vanilla browser runtime in vite, it now operates on a new model where a .css.js file is generated, that uses @vanilla-extract/css/injectStyles to add the css to the browser.
-
-  This allows for hot reloading of styles, and makes styles a bit easier to debug at dev time (because they're actually visible).
-
-- [#409](https://github.com/seek-oss/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/seek-oss/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/benjervis)! - Handle vite 2.6.
-
-  As of vite 2.6 and greater, `?used` gets appended to css imports, which causes the file imports to be not what we expected.
-
-  This caused mismatching classnames in the vite plugin, and it caused the babel plugin to not add filescopes when it should have.
-
-* [#409](https://github.com/seek-oss/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/seek-oss/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/benjervis)! - Automatically optimize deps.
-
-  When using the new vanilla browser runtime, the new `injectStyles` dependency gets injected at runtime, so vite can't discover it ahead of time and pre-bundle it.
-
-  The plugin will now add the dependency to optimizeDeps if the vanilla runtime is being used so that it's optimized up front.
-  It also ensures that some relevant vanilla packages are externalised in SSR mode.
-
-* Updated dependencies [[`a9c5cb7`](https://github.com/seek-oss/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0)]:
-  - @vanilla-extract/integration@1.4.3
-
-## 2.1.2
-
-### Patch Changes
-
-- [#398](https://github.com/seek-oss/vanilla-extract/pull/398) [`63f4ed0`](https://github.com/seek-oss/vanilla-extract/commit/63f4ed0e67419df565f3f447cf27cec612afbb8d) Thanks [@benjervis](https://github.com/benjervis)! - Fixes a bug with vite where "?used" is appended to the file path of css files.
-
-  This could cause different class name hashes to be generated between SSR and client builds.
-  This was introduced in vite 2.6.0.
-
-## 2.1.1
-
-### Patch Changes
-
-- [#393](https://github.com/seek-oss/vanilla-extract/pull/393) [`2f379f1`](https://github.com/seek-oss/vanilla-extract/commit/2f379f118c2a2fe6dc08a1cc15a395dbc0f17ece) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix compilation errors in Vite 2.6
-
-- Updated dependencies [[`2f379f1`](https://github.com/seek-oss/vanilla-extract/commit/2f379f118c2a2fe6dc08a1cc15a395dbc0f17ece)]:
-  - @vanilla-extract/integration@1.4.2
-
-## 2.1.0
-
-### Minor Changes
-
-- [#373](https://github.com/seek-oss/vanilla-extract/pull/373) [`a55d2cf`](https://github.com/seek-oss/vanilla-extract/commit/a55d2cfd7c4ca9175a2c86557888df90907bfd0f) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `devStyleRuntime` option to allow switching between dev style runtimes
-
-  The built-in Vite dev style runtime (what adds styles to the page when running `vite serve`) doesn't seem to clean up old styles as expected. Passing `devStyleRuntime: 'vanilla-extract'` will instead use vanilla-extract's browser runtime. This pushes all style creation in development to the browser, but may give a better HMR experience.
-
-## 2.0.2
-
-### Patch Changes
-
-- [#341](https://github.com/seek-oss/vanilla-extract/pull/341) [`0b743e7`](https://github.com/seek-oss/vanilla-extract/commit/0b743e744447616f8daf0c6b88beff8ffef8d41b) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Refactor SSR file scoping to use centralised `addFileScope` implementation
-
-- Updated dependencies [[`50bae14`](https://github.com/seek-oss/vanilla-extract/commit/50bae14bf38c8a971ad1727cb8e827c86da06772), [`0b743e7`](https://github.com/seek-oss/vanilla-extract/commit/0b743e744447616f8daf0c6b88beff8ffef8d41b)]:
-  - @vanilla-extract/integration@1.3.0
-
-## 2.0.1
-
-### Patch Changes
-
-- [#327](https://github.com/seek-oss/vanilla-extract/pull/327) [`73b55f8`](https://github.com/seek-oss/vanilla-extract/commit/73b55f8e7e205701abdb1cbb029c3f2f5080b6fd) Thanks [@benjervis](https://github.com/benjervis)! - Fix bug where precompiled .css.ts files (.css.js) were treated differently in SSR mode.
-
-## 2.0.0
-
-### Major Changes
-
-- [#323](https://github.com/seek-oss/vanilla-extract/pull/323) [`1e7d647`](https://github.com/seek-oss/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the `identifiers` option which accepts either `short` or `debug`.
-
-  - `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`
-  - `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `somefile_mystyle_hnw5tz3`
-
-  ```js
-  import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
-
-  vanillaExtractPlugin({ identifiers: 'short' });
-  ```
-
-  BREAKING CHANGE
-
-  Previously identifiers were formatted as `short` when `process.env.NODE_ENV` was set to "production". By default, they will now be formatted according to Vite's [mode config](https://vitejs.dev/config/#mode).
-
-### Patch Changes
-
-- Updated dependencies [[`1e7d647`](https://github.com/seek-oss/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275)]:
-  - @vanilla-extract/integration@1.2.0
-
-## 1.2.0
-
-### Minor Changes
-
-- [#311](https://github.com/seek-oss/vanilla-extract/pull/311) [`416eb9a`](https://github.com/seek-oss/vanilla-extract/commit/416eb9ae99661597a8443594f4376aacf4d295cc) Thanks [@mattcompiles](https://github.com/mattcompiles)! - In SSR mode, move to runtime evaluation of vanilla-extract files
-
-  This unlocks the potential for CSS extraction on the server.
-
-## 1.1.2
-
-### Patch Changes
-
-- [#290](https://github.com/seek-oss/vanilla-extract/pull/290) [`adc1d64`](https://github.com/seek-oss/vanilla-extract/commit/adc1d644635a1197edd36f522f78658a641027d4) Thanks [@ygj6](https://github.com/ygj6)! - Normalize path of generated CSS files
-
-## 1.1.1
-
-### Patch Changes
-
-- [#270](https://github.com/seek-oss/vanilla-extract/pull/270) [`fe19158`](https://github.com/seek-oss/vanilla-extract/commit/fe1915808b374a1bbf8f67eca85c0253153e2cb9) Thanks [@yyx990803](https://github.com/yyx990803)! - Fix watching of modules imported by `.css.ts` files
-
-## 1.1.0
-
-### Minor Changes
-
-- [#259](https://github.com/seek-oss/vanilla-extract/pull/259) [`b8a6441`](https://github.com/seek-oss/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Allow the result of `composeStyles` to be used in selectors
-
-  When style compositions are used in selectors, they are now assigned an additional class so they can be uniquely identified. When selectors are processed internally, the composed classes are removed, only leaving behind the unique identifier classes. This allows you to treat them as if they were a single class within vanilla-extract selectors.
-
-  ```ts
-  import { style, globalStyle, composeStyles } from '@vanilla-extract/css';
-
-  const background = style({ background: 'mintcream' });
-  const padding = style({ padding: 12 });
-
-  export const container = composeStyles(background, padding);
-
-  globalStyle(`${container} *`, {
-    boxSizing: 'border-box',
-  });
-  ```
-
-### Patch Changes
-
-- Updated dependencies [[`b8a6441`](https://github.com/seek-oss/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a)]:
-  - @vanilla-extract/integration@1.1.0
-
-## 1.0.0
-
-### Major Changes
-
-- [#171](https://github.com/seek-oss/vanilla-extract/pull/171) [`84a8611`](https://github.com/seek-oss/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1
-
-### Patch Changes
-
-- Updated dependencies [[`84a8611`](https://github.com/seek-oss/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:
-  - @vanilla-extract/integration@1.0.0
-
-## 0.1.1
-
-### Patch Changes
-
-- [#96](https://github.com/seek-oss/vanilla-extract/pull/96) [`697a233`](https://github.com/seek-oss/vanilla-extract/commit/697a2332cdb34886af26224c13f1efb73b6d36b3) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Change vite-plugin to be a named export
-
-  BREAKING CHANGE
-
-  ```diff
-  -import vanillaExtractPlugin from '@vanilla-extract/vite-plugin';
-  +import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
-
-  // vite.config.js
-  export default {
-    plugins: [vanillaExtractPlugin()]
-  }
-  ```