@vanilla-extract/vite-plugin 2.1.2 → 3.1.0

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

@@ -4,49 +4,144 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var path = require('path');
 var vite = require('vite');
+var outdent = require('outdent');
 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',
 
-    configResolved(resolvedConfig) {
+    configureServer(_server) {
+      server = _server;
+    },
+
+    config(_userConfig, env) {
+      const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
+      return {
+        optimizeDeps: {
+          include
+        },
+        ssr: {
+          external: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope', '@vanilla-extract/css/adapter']
+        }
+      };
+    },
+
+    async configResolved(resolvedConfig) {
       config = resolvedConfig;
-      useRuntime = devStyleRuntime === 'vanilla-extract' && config.command === 'serve';
+
+      if (config.command === 'serve') {
+        postCssConfig = await resolvePostcssConfig(config);
+      }
+
+      virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
       packageInfo = integration.getPackageInfo(config.root);
     },
 
     resolveId(id) {
-      if (integration.virtualCssFileFilter.test(id)) {
-        const {
-          fileName,
-          source
-        } = integration.getSourceFromVirtualCssFile(id); // resolveId shouldn't really cause a side-effect however custom module meta isn't currently working
-        // This is a hack work around until https://github.com/vitejs/vite/issues/3240 is resolved
-
-        const shortHashFileName = vite.normalizePath(`${fileName}?hash=${integration.hash(source)}`);
-        cssMap.set(shortHashFileName, source);
-        return shortHashFileName;
+      if (id.indexOf(virtualPrefix) === 0) {
+        return id;
       }
     },
 
     load(id) {
-      if (cssMap.has(id)) {
-        const css = cssMap.get(id);
-        cssMap.delete(id);
-        return css;
+      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.`);
+        }
+
+        const css = cssMap.get(fileScopeId);
+
+        if (!server) {
+          return css;
+        }
+
+        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);
+          });   
+        `;
       }
 
       return null;
@@ -57,13 +152,13 @@ function vanillaExtractPlugin({
         return null;
       }
 
-      const usedIndex = id.indexOf('?used');
-      const fixedId = usedIndex > 0 ? id.substring(0, usedIndex) : id;
+      const index = id.indexOf('?');
+      const validId = index === -1 ? id : id.substring(0, index);
 
-      if (ssr || useRuntime) {
+      if (ssr) {
         return integration.addFileScope({
           source: code,
-          filePath: vite.normalizePath(path__default['default'].relative(packageInfo.dirname, fixedId)),
+          filePath: vite.normalizePath(path__default["default"].relative(packageInfo.dirname, validId)),
           packageInfo
         }).source;
       }
@@ -72,19 +167,58 @@ function vanillaExtractPlugin({
         source,
         watchFiles
       } = await integration.compile({
-        filePath: fixedId,
+        filePath: validId,
         cwd: config.root
       });
 
       for (const file of watchFiles) {
-        this.addWatchFile(file);
+        // In start mode, we need to prevent the file from rewatching itself.
+        // If it's a `build --watch`, it needs to watch everything.
+        if (config.command === 'build' || file !== id) {
+          this.addWatchFile(file);
+        }
       }
 
       return integration.processVanillaFile({
         source,
-        filePath: fixedId,
-        outputCss: !ssr,
-        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug'
+        filePath: validId,
+        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        serializeVirtualCssPath: async ({
+          fileScope,
+          source
+        }) => {
+          const fileId = integration.stringifyFileScope(fileScope);
+          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

@@ -4,49 +4,144 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var path = require('path');
 var vite = require('vite');
+var outdent = require('outdent');
 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',
 
-    configResolved(resolvedConfig) {
+    configureServer(_server) {
+      server = _server;
+    },
+
+    config(_userConfig, env) {
+      const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
+      return {
+        optimizeDeps: {
+          include
+        },
+        ssr: {
+          external: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope', '@vanilla-extract/css/adapter']
+        }
+      };
+    },
+
+    async configResolved(resolvedConfig) {
       config = resolvedConfig;
-      useRuntime = devStyleRuntime === 'vanilla-extract' && config.command === 'serve';
+
+      if (config.command === 'serve') {
+        postCssConfig = await resolvePostcssConfig(config);
+      }
+
+      virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
       packageInfo = integration.getPackageInfo(config.root);
     },
 
     resolveId(id) {
-      if (integration.virtualCssFileFilter.test(id)) {
-        const {
-          fileName,
-          source
-        } = integration.getSourceFromVirtualCssFile(id); // resolveId shouldn't really cause a side-effect however custom module meta isn't currently working
-        // This is a hack work around until https://github.com/vitejs/vite/issues/3240 is resolved
-
-        const shortHashFileName = vite.normalizePath(`${fileName}?hash=${integration.hash(source)}`);
-        cssMap.set(shortHashFileName, source);
-        return shortHashFileName;
+      if (id.indexOf(virtualPrefix) === 0) {
+        return id;
       }
     },
 
     load(id) {
-      if (cssMap.has(id)) {
-        const css = cssMap.get(id);
-        cssMap.delete(id);
-        return css;
+      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.`);
+        }
+
+        const css = cssMap.get(fileScopeId);
+
+        if (!server) {
+          return css;
+        }
+
+        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);
+          });   
+        `;
       }
 
       return null;
@@ -57,13 +152,13 @@ function vanillaExtractPlugin({
         return null;
       }
 
-      const usedIndex = id.indexOf('?used');
-      const fixedId = usedIndex > 0 ? id.substring(0, usedIndex) : id;
+      const index = id.indexOf('?');
+      const validId = index === -1 ? id : id.substring(0, index);
 
-      if (ssr || useRuntime) {
+      if (ssr) {
         return integration.addFileScope({
           source: code,
-          filePath: vite.normalizePath(path__default['default'].relative(packageInfo.dirname, fixedId)),
+          filePath: vite.normalizePath(path__default["default"].relative(packageInfo.dirname, validId)),
           packageInfo
         }).source;
       }
@@ -72,19 +167,58 @@ function vanillaExtractPlugin({
         source,
         watchFiles
       } = await integration.compile({
-        filePath: fixedId,
+        filePath: validId,
         cwd: config.root
       });
 
       for (const file of watchFiles) {
-        this.addWatchFile(file);
+        // In start mode, we need to prevent the file from rewatching itself.
+        // If it's a `build --watch`, it needs to watch everything.
+        if (config.command === 'build' || file !== id) {
+          this.addWatchFile(file);
+        }
       }
 
       return integration.processVanillaFile({
         source,
-        filePath: fixedId,
-        outputCss: !ssr,
-        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug'
+        filePath: validId,
+        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        serializeVirtualCssPath: async ({
+          fileScope,
+          source
+        }) => {
+          const fileId = integration.stringifyFileScope(fileScope);
+          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,44 +1,120 @@
 import path from 'path';
 import { normalizePath } from 'vite';
-import { getPackageInfo, virtualCssFileFilter, getSourceFromVirtualCssFile, hash, cssFileFilter, addFileScope, compile, processVanillaFile } from '@vanilla-extract/integration';
+import outdent from 'outdent';
+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',
 
-    configResolved(resolvedConfig) {
+    configureServer(_server) {
+      server = _server;
+    },
+
+    config(_userConfig, env) {
+      const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
+      return {
+        optimizeDeps: {
+          include
+        },
+        ssr: {
+          external: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope', '@vanilla-extract/css/adapter']
+        }
+      };
+    },
+
+    async configResolved(resolvedConfig) {
       config = resolvedConfig;
-      useRuntime = devStyleRuntime === 'vanilla-extract' && config.command === 'serve';
+
+      if (config.command === 'serve') {
+        postCssConfig = await resolvePostcssConfig(config);
+      }
+
+      virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
       packageInfo = getPackageInfo(config.root);
     },
 
     resolveId(id) {
-      if (virtualCssFileFilter.test(id)) {
-        const {
-          fileName,
-          source
-        } = getSourceFromVirtualCssFile(id); // resolveId shouldn't really cause a side-effect however custom module meta isn't currently working
-        // This is a hack work around until https://github.com/vitejs/vite/issues/3240 is resolved
-
-        const shortHashFileName = normalizePath(`${fileName}?hash=${hash(source)}`);
-        cssMap.set(shortHashFileName, source);
-        return shortHashFileName;
+      if (id.indexOf(virtualPrefix) === 0) {
+        return id;
       }
     },
 
     load(id) {
-      if (cssMap.has(id)) {
-        const css = cssMap.get(id);
-        cssMap.delete(id);
-        return css;
+      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.`);
+        }
+
+        const css = cssMap.get(fileScopeId);
+
+        if (!server) {
+          return css;
+        }
+
+        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);
+          });   
+        `;
       }
 
       return null;
@@ -49,13 +125,13 @@ function vanillaExtractPlugin({
         return null;
       }
 
-      const usedIndex = id.indexOf('?used');
-      const fixedId = usedIndex > 0 ? id.substring(0, usedIndex) : id;
+      const index = id.indexOf('?');
+      const validId = index === -1 ? id : id.substring(0, index);
 
-      if (ssr || useRuntime) {
+      if (ssr) {
         return addFileScope({
           source: code,
-          filePath: normalizePath(path.relative(packageInfo.dirname, fixedId)),
+          filePath: normalizePath(path.relative(packageInfo.dirname, validId)),
           packageInfo
         }).source;
       }
@@ -64,19 +140,58 @@ function vanillaExtractPlugin({
         source,
         watchFiles
       } = await compile({
-        filePath: fixedId,
+        filePath: validId,
         cwd: config.root
       });
 
       for (const file of watchFiles) {
-        this.addWatchFile(file);
+        // In start mode, we need to prevent the file from rewatching itself.
+        // If it's a `build --watch`, it needs to watch everything.
+        if (config.command === 'build' || file !== id) {
+          this.addWatchFile(file);
+        }
       }
 
       return processVanillaFile({
         source,
-        filePath: fixedId,
-        outputCss: !ssr,
-        identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug'
+        filePath: validId,
+        identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        serializeVirtualCssPath: async ({
+          fileScope,
+          source
+        }) => {
+          const fileId = stringifyFileScope(fileScope);
+          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.2",
+  "version": "3.1.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,10 @@
   "author": "SEEK",
   "license": "MIT",
   "dependencies": {
-    "@vanilla-extract/integration": "^1.4.2"
+    "@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"
@@ -23,4 +26,4 @@
   "peerDependencies": {
     "vite": "^2.2.3"
   }
-}
+}

package/CHANGELOG.md

@@ -1,141 +0,0 @@
-# @vanilla-extract/vite-plugin
-
-## 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()]
-  }
-  ```