From 42c429465934c2c68faab39e23a1d5adbc2fe43a Mon Sep 17 00:00:00 2001
From: Matt Jones <mattjones701@gmail.com>
Date: Wed, 6 Oct 2021 16:15:50 +1100
Subject: [PATCH 01/28] Inject styles experiment

---
 .../integration/injectStyles/package.json     |  4 +++
 packages/integration/package.json             | 10 ++++++-
 packages/integration/src/injectStyles.ts      | 22 +++++++++++++++
 .../integration/src/processVanillaFile.ts     | 27 +++++++++++++++++--
 packages/vite-plugin/src/index.ts             | 12 ++++-----
 test-helpers/src/startFixture/vite.ts         |  2 +-
 6 files changed, 66 insertions(+), 11 deletions(-)
 create mode 100644 packages/integration/injectStyles/package.json
 create mode 100644 packages/integration/src/injectStyles.ts

diff --git a/packages/integration/injectStyles/package.json b/packages/integration/injectStyles/package.json
new file mode 100644
index 000000000..cb3e5c641
--- /dev/null
+++ b/packages/integration/injectStyles/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/vanilla-extract-integration-injectStyles.cjs.js",
+  "module": "dist/vanilla-extract-integration-injectStyles.esm.js"
+}
diff --git a/packages/integration/package.json b/packages/integration/package.json
index 4dff61bc3..89f75e122 100644
--- a/packages/integration/package.json
+++ b/packages/integration/package.json
@@ -3,9 +3,17 @@
   "version": "1.4.2",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-integration.cjs.js",
+  "module": "dist/vanilla-extract-integration.esm.js",
   "files": [
-    "/dist"
+    "/dist",
+    "/injectStyles"
   ],
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts",
+      "injectStyles.ts"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/seek-oss/vanilla-extract.git",
diff --git a/packages/integration/src/injectStyles.ts b/packages/integration/src/injectStyles.ts
new file mode 100644
index 000000000..523997b1f
--- /dev/null
+++ b/packages/integration/src/injectStyles.ts
@@ -0,0 +1,22 @@
+const stylesheets: Record<string, HTMLElement> = {};
+
+interface InjectStylesOptions {
+  fileScopeId: string;
+  css: string;
+}
+export const injectStyles = ({ fileScopeId, css }: InjectStylesOptions) => {
+  let stylesheet = stylesheets[fileScopeId];
+
+  if (!stylesheet) {
+    const styleEl = document.createElement('style');
+    styleEl.setAttribute('data-vanilla-extract', fileScopeId);
+
+    if (!styleEl.sheet) {
+      throw new Error(`Couldn't create stylesheet`);
+    }
+    stylesheet = stylesheets[fileScopeId] = styleEl;
+    document.head.appendChild(styleEl);
+  }
+
+  stylesheet.innerHTML = css;
+};
diff --git a/packages/integration/src/processVanillaFile.ts b/packages/integration/src/processVanillaFile.ts
index f49144f33..c369cddb0 100644
--- a/packages/integration/src/processVanillaFile.ts
+++ b/packages/integration/src/processVanillaFile.ts
@@ -28,6 +28,7 @@ interface ProcessVanillaFileOptions {
   source: string;
   filePath: string;
   outputCss?: boolean;
+  injectCss?: boolean;
   identOption?: IdentifierOption;
   serializeVirtualCssPath?: (file: {
     fileName: string;
@@ -41,6 +42,7 @@ export function processVanillaFile({
   outputCss = true,
   identOption = process.env.NODE_ENV === 'production' ? 'short' : 'debug',
   serializeVirtualCssPath,
+  injectCss = false,
 }: ProcessVanillaFileOptions) {
   type Css = Parameters<Adapter['appendCss']>[0];
   type Composition = Parameters<Adapter['registerComposition']>[0];
@@ -105,6 +107,14 @@ export function processVanillaFile({
       cssObjs: fileScopeCss,
     }).join('\n');
 
+    if (injectCss) {
+      const injectCall = `injectStyles({fileScopeId: ${JSON.stringify(
+        serialisedFileScope,
+      )}, css: ${JSON.stringify(css)}});`;
+      cssImports.push(injectCall);
+      return;
+    }
+
     const base64Source = Buffer.from(css, 'utf-8').toString('base64');
     const fileName = `${
       fileScope.packageName
@@ -142,7 +152,12 @@ export function processVanillaFile({
       ? RegExp(`(${unusedCompositions.join('|')})\\s`, 'g')
       : null;
 
-  return serializeVanillaModule(cssImports, evalResult, unusedCompositionRegex);
+  return serializeVanillaModule(
+    cssImports,
+    evalResult,
+    unusedCompositionRegex,
+    injectCss,
+  );
 }
 
 function stringifyExports(
@@ -229,6 +244,7 @@ function serializeVanillaModule(
   cssImports: Array<string>,
   exports: Record<string, unknown>,
   unusedCompositionRegex: RegExp | null,
+  injectStyles: boolean,
 ) {
   const recipeImports = new Set<string>();
 
@@ -246,7 +262,14 @@ function serializeVanillaModule(
         )};`,
   );
 
-  const outputCode = [...cssImports, ...recipeImports, ...moduleExports];
+  const outputCode = [
+    injectStyles
+      ? 'import { injectStyles } from "@vanilla-extract/integration/injectStyles"'
+      : '',
+    ...cssImports,
+    ...recipeImports,
+    ...moduleExports,
+  ];
 
   return outputCode.join('\n');
 }
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index d0e9268d9..df29486c6 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -71,19 +71,16 @@ export function vanillaExtractPlugin({
         return null;
       }
 
-      const usedIndex = id.indexOf('?used');
-      const fixedId = usedIndex > 0 ? id.substring(0, usedIndex) : id;
-
       if (ssr || useRuntime) {
         return addFileScope({
           source: code,
-          filePath: normalizePath(path.relative(packageInfo.dirname, fixedId)),
+          filePath: normalizePath(path.relative(packageInfo.dirname, id)),
           packageInfo,
         }).source;
       }
 
       const { source, watchFiles } = await compile({
-        filePath: fixedId,
+        filePath: id,
         cwd: config.root,
       });
 
@@ -91,10 +88,11 @@ export function vanillaExtractPlugin({
         this.addWatchFile(file);
       }
 
+      console.log(source);
       return processVanillaFile({
         source,
-        filePath: fixedId,
-        outputCss: !ssr,
+        filePath: id,
+        injectCss: true,
         identOption:
           identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
       });
diff --git a/test-helpers/src/startFixture/vite.ts b/test-helpers/src/startFixture/vite.ts
index 21534dfb6..db2ba329d 100644
--- a/test-helpers/src/startFixture/vite.ts
+++ b/test-helpers/src/startFixture/vite.ts
@@ -42,7 +42,7 @@ export const startViteFixture = async (
     configFile: false,
     root,
     logLevel: 'error',
-    plugins: [vanillaExtractPlugin({ devStyleRuntime: 'vanilla-extract' })],
+    plugins: [vanillaExtractPlugin()],
     optimizeDeps: {
       include: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope'],
     },

From f9d1a15d8da965146055bad4de3e5e298d0d37e8 Mon Sep 17 00:00:00 2001
From: Matt Jones <mattjones701@gmail.com>
Date: Thu, 7 Oct 2021 09:36:18 +1100
Subject: [PATCH 02/28] Get basic inject working

---
 packages/integration/src/injectStyles.ts       | 4 ----
 packages/integration/src/processVanillaFile.ts | 2 +-
 packages/vite-plugin/src/index.ts              | 1 -
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/integration/src/injectStyles.ts b/packages/integration/src/injectStyles.ts
index 523997b1f..f26ad0a56 100644
--- a/packages/integration/src/injectStyles.ts
+++ b/packages/integration/src/injectStyles.ts
@@ -10,10 +10,6 @@ export const injectStyles = ({ fileScopeId, css }: InjectStylesOptions) => {
   if (!stylesheet) {
     const styleEl = document.createElement('style');
     styleEl.setAttribute('data-vanilla-extract', fileScopeId);
-
-    if (!styleEl.sheet) {
-      throw new Error(`Couldn't create stylesheet`);
-    }
     stylesheet = stylesheets[fileScopeId] = styleEl;
     document.head.appendChild(styleEl);
   }
diff --git a/packages/integration/src/processVanillaFile.ts b/packages/integration/src/processVanillaFile.ts
index c369cddb0..104a7fb47 100644
--- a/packages/integration/src/processVanillaFile.ts
+++ b/packages/integration/src/processVanillaFile.ts
@@ -112,7 +112,7 @@ export function processVanillaFile({
         serialisedFileScope,
       )}, css: ${JSON.stringify(css)}});`;
       cssImports.push(injectCall);
-      return;
+      continue;
     }
 
     const base64Source = Buffer.from(css, 'utf-8').toString('base64');
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index df29486c6..36f2f0f04 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -88,7 +88,6 @@ export function vanillaExtractPlugin({
         this.addWatchFile(file);
       }
 
-      console.log(source);
       return processVanillaFile({
         source,
         filePath: id,

From d2fd45cc71ec2ec0bf22f4767574b0ebcd2aca51 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Thu, 7 Oct 2021 16:11:40 +1100
Subject: [PATCH 03/28] Add the inject styles entry point

---
 packages/css/injectStyles/package.json |  8 +++++++
 packages/css/package.json              |  2 ++
 packages/css/src/injectStyles.ts       | 29 ++++++++++++++++++++++++++
 3 files changed, 39 insertions(+)
 create mode 100644 packages/css/injectStyles/package.json
 create mode 100644 packages/css/src/injectStyles.ts

diff --git a/packages/css/injectStyles/package.json b/packages/css/injectStyles/package.json
new file mode 100644
index 000000000..1d5f33f6f
--- /dev/null
+++ b/packages/css/injectStyles/package.json
@@ -0,0 +1,8 @@
+{
+  "main": "dist/vanilla-extract-css-injectStyles.cjs.js",
+  "module": "dist/vanilla-extract-css-injectStyles.esm.js",
+  "browser": {
+    "./dist/vanilla-extract-css-injectStyles.cjs.js": "./dist/vanilla-extract-css-injectStyles.browser.cjs.js",
+    "./dist/vanilla-extract-css-injectStyles.esm.js": "./dist/vanilla-extract-css-injectStyles.browser.esm.js"
+  }
+}
diff --git a/packages/css/package.json b/packages/css/package.json
index 1532bdeaa..463368ac9 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -17,6 +17,7 @@
       "adapter.ts",
       "transformCss.ts",
       "fileScope.ts",
+      "injectStyles.ts",
       "disableRuntimeStyles.ts"
     ]
   },
@@ -27,6 +28,7 @@
     "/adapter",
     "/transformCss",
     "/fileScope",
+    "/injectStyles",
     "/disableRuntimeStyles"
   ],
   "repository": {
diff --git a/packages/css/src/injectStyles.ts b/packages/css/src/injectStyles.ts
new file mode 100644
index 000000000..a2fdc8816
--- /dev/null
+++ b/packages/css/src/injectStyles.ts
@@ -0,0 +1,29 @@
+import type { FileScope } from './types';
+
+const stylesheets: Record<string, HTMLElement> = {};
+
+interface InjectStylesOptions {
+  fileScope: FileScope;
+  css: string;
+}
+export const injectStyles = ({ fileScope, css }: InjectStylesOptions) => {
+  const fileScopeId = fileScope.packageName
+    ? [fileScope.packageName, fileScope.filePath].join('/')
+    : fileScope.filePath;
+
+  let stylesheet = stylesheets[fileScopeId];
+
+  if (!stylesheet) {
+    const styleEl = document.createElement('style');
+
+    if (fileScope.packageName) {
+      styleEl.setAttribute('data-package', fileScope.packageName);
+    }
+
+    styleEl.setAttribute('data-file', fileScope.filePath);
+    stylesheet = stylesheets[fileScopeId] = styleEl;
+    document.head.appendChild(styleEl);
+  }
+
+  stylesheet.innerHTML = css;
+};

From b668abe3119db8e342e54bab7408ebf8ca099724 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Thu, 7 Oct 2021 16:12:34 +1100
Subject: [PATCH 04/28] Switch to injecting styles

---
 packages/css/src/runtimeAdapter.ts            | 46 ++-------------
 packages/integration/src/index.ts             |  6 +-
 .../integration/src/processVanillaFile.ts     | 23 ++++----
 packages/vite-plugin/package.json             |  3 +-
 packages/vite-plugin/src/index.ts             | 59 ++++++++++++-------
 test-helpers/src/startFixture/vite.ts         |  2 +-
 yarn.lock                                     |  8 +++
 7 files changed, 71 insertions(+), 76 deletions(-)

diff --git a/packages/css/src/runtimeAdapter.ts b/packages/css/src/runtimeAdapter.ts
index 7e0b93878..6a19a838f 100644
--- a/packages/css/src/runtimeAdapter.ts
+++ b/packages/css/src/runtimeAdapter.ts
@@ -1,29 +1,12 @@
-import type { Adapter, Composition, CSS, FileScope } from './types';
+import type { Adapter, Composition, CSS } from './types';
+import { injectStyles } from './injectStyles';
 import { transformCss } from './transformCss';
 import { setAdapterIfNotSet } from './adapter';
 
-const stylesheets: Record<string, CSSStyleSheet> = {};
-
 const localClassNames = new Set<string>();
 const composedClassLists: Array<Composition> = [];
 let bufferedCSSObjs: Array<CSS> = [];
 
-function getStylesheet({ packageName, filePath }: FileScope) {
-  const fileScopeId = packageName ? `${packageName}${filePath}` : filePath;
-  if (stylesheets[fileScopeId]) {
-    return stylesheets[fileScopeId];
-  }
-  const styleEl = document.createElement('style');
-  document.head.appendChild(styleEl);
-
-  if (!styleEl.sheet) {
-    throw new Error(`Couldn't create stylesheet`);
-  }
-  stylesheets[fileScopeId] = styleEl.sheet;
-
-  return styleEl.sheet;
-}
-
 const browserRuntimeAdapter: Adapter = {
   appendCss: (cssObj: CSS) => {
     bufferedCSSObjs.push(cssObj);
@@ -40,30 +23,9 @@ const browserRuntimeAdapter: Adapter = {
       localClassNames: Array.from(localClassNames),
       composedClassLists,
       cssObjs: bufferedCSSObjs,
-    });
-    const stylesheet = getStylesheet(fileScope);
-    const existingRuleCount = stylesheet.cssRules.length;
-
-    let ruleIndex = 0;
-
-    for (const rule of css) {
-      try {
-        if (ruleIndex < existingRuleCount) {
-          stylesheet.deleteRule(ruleIndex);
-        }
-        stylesheet.insertRule(rule, ruleIndex++);
-      } catch (e) {
-        console.warn(`Failed to insert rule\n${rule}`);
-
-        // insert placeholder rule to keep index count correct
-        stylesheet.insertRule('.--placeholder-rule--{}', ruleIndex - 1);
-      }
-    }
+    }).join('\n');
 
-    // Delete remaining rules
-    while (ruleIndex < existingRuleCount) {
-      stylesheet.deleteRule(ruleIndex++);
-    }
+    injectStyles({ fileScope, css });
 
     bufferedCSSObjs = [];
   },
diff --git a/packages/integration/src/index.ts b/packages/integration/src/index.ts
index d80e814ef..44f949f3d 100644
--- a/packages/integration/src/index.ts
+++ b/packages/integration/src/index.ts
@@ -1,4 +1,8 @@
-export { processVanillaFile } from './processVanillaFile';
+export {
+  processVanillaFile,
+  parseFileScope,
+  stringifyFileScope,
+} from './processVanillaFile';
 export { getSourceFromVirtualCssFile } from './virtualFile';
 export { getPackageInfo } from './packageInfo';
 export { compile, vanillaExtractFilescopePlugin } from './compile';
diff --git a/packages/integration/src/processVanillaFile.ts b/packages/integration/src/processVanillaFile.ts
index 104a7fb47..18ace2fb6 100644
--- a/packages/integration/src/processVanillaFile.ts
+++ b/packages/integration/src/processVanillaFile.ts
@@ -9,11 +9,14 @@ import { hash } from './hash';
 
 const originalNodeEnv = process.env.NODE_ENV;
 
-function stringifyFileScope({ packageName, filePath }: FileScope): string {
+export function stringifyFileScope({
+  packageName,
+  filePath,
+}: FileScope): string {
   return packageName ? `${filePath}$$$${packageName}` : filePath;
 }
 
-function parseFileScope(serialisedFileScope: string): FileScope {
+export function parseFileScope(serialisedFileScope: string): FileScope {
   const [filePath, packageName] = serialisedFileScope.split('$$$');
 
   return {
@@ -34,6 +37,7 @@ interface ProcessVanillaFileOptions {
     fileName: string;
     base64Source: string;
     fileScope: FileScope;
+    source: string;
   }) => string;
 }
 export function processVanillaFile({
@@ -107,14 +111,6 @@ export function processVanillaFile({
       cssObjs: fileScopeCss,
     }).join('\n');
 
-    if (injectCss) {
-      const injectCall = `injectStyles({fileScopeId: ${JSON.stringify(
-        serialisedFileScope,
-      )}, css: ${JSON.stringify(css)}});`;
-      cssImports.push(injectCall);
-      continue;
-    }
-
     const base64Source = Buffer.from(css, 'utf-8').toString('base64');
     const fileName = `${
       fileScope.packageName
@@ -123,7 +119,12 @@ export function processVanillaFile({
     }.vanilla.css`;
 
     const virtualCssFilePath = serializeVirtualCssPath
-      ? serializeVirtualCssPath({ fileName, base64Source, fileScope })
+      ? serializeVirtualCssPath({
+          fileName,
+          base64Source,
+          fileScope,
+          source: css,
+        })
       : `import '${fileName}?source=${base64Source}';`;
 
     cssImports.push(virtualCssFilePath);
diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json
index eb4ed1f0d..92905ffe4 100644
--- a/packages/vite-plugin/package.json
+++ b/packages/vite-plugin/package.json
@@ -15,7 +15,8 @@
   "author": "SEEK",
   "license": "MIT",
   "dependencies": {
-    "@vanilla-extract/integration": "^1.4.2"
+    "@vanilla-extract/integration": "^1.4.2",
+    "outdent": "^0.8.0"
   },
   "devDependencies": {
     "vite": "^2.6.0"
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index 36f2f0f04..54115495c 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -1,16 +1,17 @@
 import path from 'path';
 import type { Plugin, ResolvedConfig } from 'vite';
 import { normalizePath } from 'vite';
+import outdent from 'outdent';
 import {
   cssFileFilter,
-  virtualCssFileFilter,
   processVanillaFile,
-  getSourceFromVirtualCssFile,
   compile,
   hash,
   getPackageInfo,
   IdentifierOption,
   addFileScope,
+  stringifyFileScope,
+  parseFileScope,
 } from '@vanilla-extract/integration';
 
 interface Options {
@@ -31,6 +32,8 @@ export function vanillaExtractPlugin({
   let useRuntime = false;
   const cssMap = new Map<string, string>();
 
+  let virtualExt: string;
+
   return {
     name: 'vanilla-extract',
     enforce: 'pre',
@@ -39,29 +42,37 @@ export function vanillaExtractPlugin({
       useRuntime =
         devStyleRuntime === 'vanilla-extract' && config.command === 'serve';
 
+      virtualExt = `.vanilla.${useRuntime ? 'js' : 'css'}?hash=`;
+
       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(virtualExt) > 0) {
+        return id;
       }
     },
     load(id) {
-      if (cssMap.has(id)) {
-        const css = cssMap.get(id);
+      const extensionIndex = id.indexOf(virtualExt);
+      if (extensionIndex > 0) {
+        const fileScopeId = id.substring(0, extensionIndex);
+        if (cssMap.has(fileScopeId)) {
+          const css = cssMap.get(fileScopeId)!;
 
-        cssMap.delete(id);
+          if (useRuntime) {
+            const fileScope = JSON.stringify(parseFileScope(fileScopeId));
 
-        return css;
+            return outdent`
+              import { injectStyles } from '@vanilla-extract/css/injectStyles';
+              
+              injectStyles({
+                fileScope: ${fileScope},
+                css: \`${css}\`
+              })
+            `;
+          }
+
+          return css;
+        }
       }
 
       return null;
@@ -71,7 +82,7 @@ export function vanillaExtractPlugin({
         return null;
       }
 
-      if (ssr || useRuntime) {
+      if (ssr) {
         return addFileScope({
           source: code,
           filePath: normalizePath(path.relative(packageInfo.dirname, id)),
@@ -85,15 +96,23 @@ export function vanillaExtractPlugin({
       });
 
       for (const file of watchFiles) {
-        this.addWatchFile(file);
+        if (config.command === 'build' || file !== id) {
+          this.addWatchFile(file);
+        }
       }
 
       return processVanillaFile({
         source,
         filePath: id,
-        injectCss: true,
         identOption:
           identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
+        serializeVirtualCssPath: ({ fileScope, source }) => {
+          const fileId = stringifyFileScope(fileScope);
+
+          cssMap.set(fileId, source);
+
+          return `import "${fileId}${virtualExt}${hash(source)}";`;
+        },
       });
     },
   };
diff --git a/test-helpers/src/startFixture/vite.ts b/test-helpers/src/startFixture/vite.ts
index db2ba329d..21534dfb6 100644
--- a/test-helpers/src/startFixture/vite.ts
+++ b/test-helpers/src/startFixture/vite.ts
@@ -42,7 +42,7 @@ export const startViteFixture = async (
     configFile: false,
     root,
     logLevel: 'error',
-    plugins: [vanillaExtractPlugin()],
+    plugins: [vanillaExtractPlugin({ devStyleRuntime: 'vanilla-extract' })],
     optimizeDeps: {
       include: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope'],
     },
diff --git a/yarn.lock b/yarn.lock
index b6a135df4..104041617 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3932,6 +3932,7 @@ __metadata:
   resolution: "@vanilla-extract/vite-plugin@workspace:packages/vite-plugin"
   dependencies:
     "@vanilla-extract/integration": ^1.4.2
+    outdent: ^0.8.0
     vite: ^2.6.0
   peerDependencies:
     vite: ^2.2.3
@@ -12714,6 +12715,13 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
+"outdent@npm:^0.8.0":
+  version: 0.8.0
+  resolution: "outdent@npm:0.8.0"
+  checksum: 5f48c7b6a2ef8cbedf1c15d8b09d4ab14a6a9414d5616f2790c5034a1b1684e42b087033188a0657f8e04b45a1a3dc5545627cf84c479864573665ecb5761152
+  languageName: node
+  linkType: hard
+
 "p-cancelable@npm:^1.0.0":
   version: 1.1.0
   resolution: "p-cancelable@npm:1.1.0"

From 5dcdb7713d451d949911a4d0d4cf65fb8b41bfad Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Thu, 7 Oct 2021 16:30:08 +1100
Subject: [PATCH 05/28] Deunescape the CSS

---
 packages/css/src/injectStyles.ts  | 1 +
 packages/vite-plugin/src/index.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/css/src/injectStyles.ts b/packages/css/src/injectStyles.ts
index a2fdc8816..774e6a29a 100644
--- a/packages/css/src/injectStyles.ts
+++ b/packages/css/src/injectStyles.ts
@@ -21,6 +21,7 @@ export const injectStyles = ({ fileScope, css }: InjectStylesOptions) => {
     }
 
     styleEl.setAttribute('data-file', fileScope.filePath);
+    styleEl.setAttribute('type', 'text/css');
     stylesheet = stylesheets[fileScopeId] = styleEl;
     document.head.appendChild(styleEl);
   }
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index 54115495c..985ef3c47 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -66,7 +66,7 @@ export function vanillaExtractPlugin({
               
               injectStyles({
                 fileScope: ${fileScope},
-                css: \`${css}\`
+                css: ${JSON.stringify(css)}
               })
             `;
           }

From b7446ee1222fca7a3d0c4a2a7ee3193cfd89a218 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Fri, 8 Oct 2021 13:38:48 +1100
Subject: [PATCH 06/28] Set optimised deps in the plugin

---
 packages/vite-plugin/src/index.ts     | 22 ++++++++++++++++++++--
 test-helpers/src/startFixture/vite.ts |  3 ---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index 985ef3c47..5fad486ac 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -37,10 +37,28 @@ export function vanillaExtractPlugin({
   return {
     name: 'vanilla-extract',
     enforce: 'pre',
+    config(userConfig, env) {
+      useRuntime =
+        devStyleRuntime === 'vanilla-extract' && env.command === 'serve';
+
+      const optimizeDeps = {
+        ...userConfig.optimizeDeps,
+        include: userConfig.optimizeDeps?.include ?? [],
+      };
+
+      optimizeDeps.include.push(
+        '@vanilla-extract/css',
+        '@vanilla-extract/css/fileScope',
+      );
+
+      if (useRuntime) {
+        optimizeDeps.include.push('@vanilla-extract/css/injectStyles');
+      }
+
+      userConfig.optimizeDeps = optimizeDeps;
+    },
     configResolved(resolvedConfig) {
       config = resolvedConfig;
-      useRuntime =
-        devStyleRuntime === 'vanilla-extract' && config.command === 'serve';
 
       virtualExt = `.vanilla.${useRuntime ? 'js' : 'css'}?hash=`;
 
diff --git a/test-helpers/src/startFixture/vite.ts b/test-helpers/src/startFixture/vite.ts
index 21534dfb6..e06b237bd 100644
--- a/test-helpers/src/startFixture/vite.ts
+++ b/test-helpers/src/startFixture/vite.ts
@@ -43,9 +43,6 @@ export const startViteFixture = async (
     root,
     logLevel: 'error',
     plugins: [vanillaExtractPlugin({ devStyleRuntime: 'vanilla-extract' })],
-    optimizeDeps: {
-      include: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope'],
-    },
     server: {
       port,
       force: true,

From daa2789d798634e85876fc70e28d860c6ca8ffd1 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Fri, 8 Oct 2021 15:14:54 +1100
Subject: [PATCH 07/28] Use the integration regex

---
 packages/babel-plugin/src/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/babel-plugin/src/index.ts b/packages/babel-plugin/src/index.ts
index 80e94f589..b2452c81c 100644
--- a/packages/babel-plugin/src/index.ts
+++ b/packages/babel-plugin/src/index.ts
@@ -1,7 +1,7 @@
 import { relative, posix, sep } from 'path';
 import { types as t, PluginObj, PluginPass, NodePath } from '@babel/core';
 import template from '@babel/template';
-import { getPackageInfo } from '@vanilla-extract/integration';
+import { cssFileFilter, getPackageInfo } from '@vanilla-extract/integration';
 
 const packageIdentifiers = new Set([
   '@vanilla-extract/css',
@@ -183,7 +183,7 @@ export default function (): PluginObj<Context> {
       }
 
       this.isESM = false;
-      this.isCssFile = /\.css\.(js|ts|jsx|tsx)$/.test(opts.filename);
+      this.isCssFile = cssFileFilter.test(opts.filename);
       this.alreadyCompiled = false;
 
       this.importIdentifiers = new Map();

From 1375ba92d133c5391b51f086d1071ec2c08ff52f Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Fri, 8 Oct 2021 15:15:12 +1100
Subject: [PATCH 08/28] Strip ?used from ids for fileScope

---
 packages/vite-plugin/src/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index 5fad486ac..a5d1959ec 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -101,9 +101,10 @@ export function vanillaExtractPlugin({
       }
 
       if (ssr) {
+        const [validId] = id.split('?');
         return addFileScope({
           source: code,
-          filePath: normalizePath(path.relative(packageInfo.dirname, id)),
+          filePath: normalizePath(path.relative(packageInfo.dirname, validId)),
           packageInfo,
         }).source;
       }

From 69f2ff2aaba365f6c527e0d8ed1816e4ea3f3b31 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Fri, 8 Oct 2021 15:18:22 +1100
Subject: [PATCH 09/28] Add a changeset for the used stuff

---
 .changeset/pretty-carrots-drive.md | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 .changeset/pretty-carrots-drive.md

diff --git a/.changeset/pretty-carrots-drive.md b/.changeset/pretty-carrots-drive.md
new file mode 100644
index 000000000..283cfed82
--- /dev/null
+++ b/.changeset/pretty-carrots-drive.md
@@ -0,0 +1,10 @@
+---
+'@vanilla-extract/babel-plugin': patch
+'@vanilla-extract/vite-plugin': patch
+---
+
+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.

From c98ad5509a7e0b61e802d0b86875181dbb386fa4 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Fri, 8 Oct 2021 15:30:18 +1100
Subject: [PATCH 10/28] Remove the initial drafts of inject styles

---
 packages/integration/src/injectStyles.ts      | 18 ------------------
 .../integration/src/processVanillaFile.ts     | 19 ++-----------------
 2 files changed, 2 insertions(+), 35 deletions(-)
 delete mode 100644 packages/integration/src/injectStyles.ts

diff --git a/packages/integration/src/injectStyles.ts b/packages/integration/src/injectStyles.ts
deleted file mode 100644
index f26ad0a56..000000000
--- a/packages/integration/src/injectStyles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-const stylesheets: Record<string, HTMLElement> = {};
-
-interface InjectStylesOptions {
-  fileScopeId: string;
-  css: string;
-}
-export const injectStyles = ({ fileScopeId, css }: InjectStylesOptions) => {
-  let stylesheet = stylesheets[fileScopeId];
-
-  if (!stylesheet) {
-    const styleEl = document.createElement('style');
-    styleEl.setAttribute('data-vanilla-extract', fileScopeId);
-    stylesheet = stylesheets[fileScopeId] = styleEl;
-    document.head.appendChild(styleEl);
-  }
-
-  stylesheet.innerHTML = css;
-};
diff --git a/packages/integration/src/processVanillaFile.ts b/packages/integration/src/processVanillaFile.ts
index 18ace2fb6..06375b021 100644
--- a/packages/integration/src/processVanillaFile.ts
+++ b/packages/integration/src/processVanillaFile.ts
@@ -31,7 +31,6 @@ interface ProcessVanillaFileOptions {
   source: string;
   filePath: string;
   outputCss?: boolean;
-  injectCss?: boolean;
   identOption?: IdentifierOption;
   serializeVirtualCssPath?: (file: {
     fileName: string;
@@ -46,7 +45,6 @@ export function processVanillaFile({
   outputCss = true,
   identOption = process.env.NODE_ENV === 'production' ? 'short' : 'debug',
   serializeVirtualCssPath,
-  injectCss = false,
 }: ProcessVanillaFileOptions) {
   type Css = Parameters<Adapter['appendCss']>[0];
   type Composition = Parameters<Adapter['registerComposition']>[0];
@@ -153,12 +151,7 @@ export function processVanillaFile({
       ? RegExp(`(${unusedCompositions.join('|')})\\s`, 'g')
       : null;
 
-  return serializeVanillaModule(
-    cssImports,
-    evalResult,
-    unusedCompositionRegex,
-    injectCss,
-  );
+  return serializeVanillaModule(cssImports, evalResult, unusedCompositionRegex);
 }
 
 function stringifyExports(
@@ -245,7 +238,6 @@ function serializeVanillaModule(
   cssImports: Array<string>,
   exports: Record<string, unknown>,
   unusedCompositionRegex: RegExp | null,
-  injectStyles: boolean,
 ) {
   const recipeImports = new Set<string>();
 
@@ -263,14 +255,7 @@ function serializeVanillaModule(
         )};`,
   );
 
-  const outputCode = [
-    injectStyles
-      ? 'import { injectStyles } from "@vanilla-extract/integration/injectStyles"'
-      : '',
-    ...cssImports,
-    ...recipeImports,
-    ...moduleExports,
-  ];
+  const outputCode = [...cssImports, ...recipeImports, ...moduleExports];
 
   return outputCode.join('\n');
 }

From e9f75751474e444f3ad8e06725bf217129918665 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Fri, 8 Oct 2021 15:39:02 +1100
Subject: [PATCH 11/28] Add a changeset for injectStyles

---
 .changeset/khaki-taxis-tell.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/khaki-taxis-tell.md

diff --git a/.changeset/khaki-taxis-tell.md b/.changeset/khaki-taxis-tell.md
new file mode 100644
index 000000000..514270064
--- /dev/null
+++ b/.changeset/khaki-taxis-tell.md
@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Change the way vanilla runtime works.
+
+The vanilla browser runtime 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).

From 9de50c95e95478d8d711fd9101c9eee2377593a3 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Fri, 8 Oct 2021 15:43:27 +1100
Subject: [PATCH 12/28] Add a changeset for the cssMap.delete thing

---
 .changeset/chilled-goats-fold.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/chilled-goats-fold.md

diff --git a/.changeset/chilled-goats-fold.md b/.changeset/chilled-goats-fold.md
new file mode 100644
index 000000000..7cc3f40d8
--- /dev/null
+++ b/.changeset/chilled-goats-fold.md
@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+Fix vite 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.
\ No newline at end of file

From 6f3b817fd3274e371071831e407d1a60514550a0 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Fri, 8 Oct 2021 16:13:56 +1100
Subject: [PATCH 13/28] Clean up the injectStyles from integration

---
 packages/integration/package.json | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/integration/package.json b/packages/integration/package.json
index 89f75e122..2fe42a074 100644
--- a/packages/integration/package.json
+++ b/packages/integration/package.json
@@ -5,13 +5,11 @@
   "main": "dist/vanilla-extract-integration.cjs.js",
   "module": "dist/vanilla-extract-integration.esm.js",
   "files": [
-    "/dist",
-    "/injectStyles"
+    "/dist"
   ],
   "preconstruct": {
     "entrypoints": [
-      "index.ts",
-      "injectStyles.ts"
+      "index.ts"
     ]
   },
   "repository": {

From 322ff6f4e2d6fa879a030ca04894c1267ea30f86 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Fri, 8 Oct 2021 16:14:15 +1100
Subject: [PATCH 14/28] Also update vanilla specific ssr config in vite plugin

---
 packages/vite-plugin/src/index.ts | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index a5d1959ec..199381cc1 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -37,25 +37,22 @@ export function vanillaExtractPlugin({
   return {
     name: 'vanilla-extract',
     enforce: 'pre',
-    config(userConfig, env) {
+    config(_userConfig, env) {
       useRuntime =
         devStyleRuntime === 'vanilla-extract' && env.command === 'serve';
 
-      const optimizeDeps = {
-        ...userConfig.optimizeDeps,
-        include: userConfig.optimizeDeps?.include ?? [],
-      };
-
-      optimizeDeps.include.push(
-        '@vanilla-extract/css',
-        '@vanilla-extract/css/fileScope',
-      );
-
-      if (useRuntime) {
-        optimizeDeps.include.push('@vanilla-extract/css/injectStyles');
-      }
+      const include = useRuntime ? ['@vanilla-extract/css/injectStyles'] : [];
 
-      userConfig.optimizeDeps = optimizeDeps;
+      return {
+        optimizeDeps: { include },
+        ssr: {
+          external: [
+            '@vanilla-extract/css',
+            '@vanilla-extract/css/fileScope',
+            '@vanilla-extract/css/adapter',
+          ],
+        },
+      };
     },
     configResolved(resolvedConfig) {
       config = resolvedConfig;

From 7754d15eb2af211ecc0fcd687d370cb987d053a1 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Fri, 8 Oct 2021 16:15:42 +1100
Subject: [PATCH 15/28] Clean up the package json from the integration version
 of injectStyles

---
 packages/integration/injectStyles/package.json | 4 ----
 1 file changed, 4 deletions(-)
 delete mode 100644 packages/integration/injectStyles/package.json

diff --git a/packages/integration/injectStyles/package.json b/packages/integration/injectStyles/package.json
deleted file mode 100644
index cb3e5c641..000000000
--- a/packages/integration/injectStyles/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "main": "dist/vanilla-extract-integration-injectStyles.cjs.js",
-  "module": "dist/vanilla-extract-integration-injectStyles.esm.js"
-}

From bcbae34a96f5e7d25a098c0f0d20ae88848d019f Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Fri, 8 Oct 2021 16:17:10 +1100
Subject: [PATCH 16/28] More cleanup

---
 packages/integration/package.json | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/integration/package.json b/packages/integration/package.json
index 2fe42a074..2c09086fb 100644
--- a/packages/integration/package.json
+++ b/packages/integration/package.json
@@ -7,11 +7,6 @@
   "files": [
     "/dist"
   ],
-  "preconstruct": {
-    "entrypoints": [
-      "index.ts"
-    ]
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/seek-oss/vanilla-extract.git",

From 83dadeeef28109298db7d448c32b5da378b7caec Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Mon, 11 Oct 2021 10:02:07 +1100
Subject: [PATCH 17/28] Remove a word

---
 .changeset/chilled-goats-fold.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/chilled-goats-fold.md b/.changeset/chilled-goats-fold.md
index 7cc3f40d8..7f97de0b8 100644
--- a/.changeset/chilled-goats-fold.md
+++ b/.changeset/chilled-goats-fold.md
@@ -2,7 +2,7 @@
 '@vanilla-extract/vite-plugin': patch
 ---
 
-Fix vite plugin for watch mode.
+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.
 

From 29594b90d03727f55549dde2ba8164ea5a5ae272 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Mon, 11 Oct 2021 10:55:20 +1100
Subject: [PATCH 18/28] Separate out the vite/browser thing

---
 .changeset/khaki-taxis-tell.md  | 5 +++--
 .changeset/polite-rings-nail.md | 9 +++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/polite-rings-nail.md

diff --git a/.changeset/khaki-taxis-tell.md b/.changeset/khaki-taxis-tell.md
index 514270064..cf4ea4dfb 100644
--- a/.changeset/khaki-taxis-tell.md
+++ b/.changeset/khaki-taxis-tell.md
@@ -4,6 +4,7 @@
 
 Change the way vanilla runtime works.
 
-The vanilla browser runtime 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.
+The vanilla browser runtime now creates style tags containing the CSS itself, rather than injecting it directly into the CSSOM.
 
-This allows for hot reloading of styles, and makes styles a bit easier to debug at dev time (because they're actually visible).
+This helps with debugability, as the generated CSS can actually be seen in the devtools.
+There are also some new attributes set on the style tags, making it easier to identify the source of each style.
diff --git a/.changeset/polite-rings-nail.md b/.changeset/polite-rings-nail.md
new file mode 100644
index 000000000..483b7e25d
--- /dev/null
+++ b/.changeset/polite-rings-nail.md
@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+Update the vanilla runtime integration.
+
+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).

From 68219f869545c55a36e250cc9805dd1e3c09bd14 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Mon, 11 Oct 2021 11:03:25 +1100
Subject: [PATCH 19/28] Add a changeset about the deps

---
 .changeset/strong-zebras-prove.md | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 .changeset/strong-zebras-prove.md

diff --git a/.changeset/strong-zebras-prove.md b/.changeset/strong-zebras-prove.md
new file mode 100644
index 000000000..9c2817a0c
--- /dev/null
+++ b/.changeset/strong-zebras-prove.md
@@ -0,0 +1,10 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+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.
\ No newline at end of file

From dd9d095c1e1ec043e4ba4658b4e832f1b0f5f10f Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Mon, 11 Oct 2021 11:07:04 +1100
Subject: [PATCH 20/28] Small cleanups in vite plugin

---
 packages/vite-plugin/src/index.ts | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index 199381cc1..be23f2b82 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -68,25 +68,27 @@ export function vanillaExtractPlugin({
     },
     load(id) {
       const extensionIndex = id.indexOf(virtualExt);
+
       if (extensionIndex > 0) {
         const fileScopeId = id.substring(0, extensionIndex);
+
         if (cssMap.has(fileScopeId)) {
           const css = cssMap.get(fileScopeId)!;
 
-          if (useRuntime) {
-            const fileScope = JSON.stringify(parseFileScope(fileScopeId));
-
-            return outdent`
-              import { injectStyles } from '@vanilla-extract/css/injectStyles';
-              
-              injectStyles({
-                fileScope: ${fileScope},
-                css: ${JSON.stringify(css)}
-              })
-            `;
+          if (!useRuntime) {
+            return css;
           }
 
-          return css;
+          const fileScope = parseFileScope(fileScopeId);
+
+          return outdent`
+            import { injectStyles } from '@vanilla-extract/css/injectStyles';
+            
+            injectStyles({
+              fileScope: ${JSON.stringify(fileScope)},
+              css: ${JSON.stringify(css)}
+            })
+          `;
         }
       }
 

From ccb8e11895e7a278db890005ee3a9c7295feeab0 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Tue, 12 Oct 2021 12:50:53 +1100
Subject: [PATCH 21/28] JSBench has spoken

---
 packages/vite-plugin/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index be23f2b82..ee4b00600 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -100,7 +100,7 @@ export function vanillaExtractPlugin({
       }
 
       if (ssr) {
-        const [validId] = id.split('?');
+        const validId = id.substring(0, id.indexOf('?'));
         return addFileScope({
           source: code,
           filePath: normalizePath(path.relative(packageInfo.dirname, validId)),

From 8477c38fbd06aa377a0d1a11be6c77a852979290 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Tue, 12 Oct 2021 16:37:34 +1100
Subject: [PATCH 22/28] Address PR comments

---
 .changeset/khaki-taxis-tell.md  | 2 +-
 .changeset/polite-rings-nail.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/khaki-taxis-tell.md b/.changeset/khaki-taxis-tell.md
index cf4ea4dfb..407a7a776 100644
--- a/.changeset/khaki-taxis-tell.md
+++ b/.changeset/khaki-taxis-tell.md
@@ -2,7 +2,7 @@
 '@vanilla-extract/css': patch
 ---
 
-Change the way vanilla runtime works.
+Improve the browser runtime dev experience.
 
 The vanilla browser runtime now creates style tags containing the CSS itself, rather than injecting it directly into the CSSOM.
 
diff --git a/.changeset/polite-rings-nail.md b/.changeset/polite-rings-nail.md
index 483b7e25d..5a0e5bdbc 100644
--- a/.changeset/polite-rings-nail.md
+++ b/.changeset/polite-rings-nail.md
@@ -2,7 +2,7 @@
 '@vanilla-extract/vite-plugin': patch
 ---
 
-Update the vanilla runtime integration.
+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.
 

From 0003de427a09679b33be18320d97bda90fb2d58f Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Tue, 12 Oct 2021 16:39:13 +1100
Subject: [PATCH 23/28] Switch to dedent

---
 packages/vite-plugin/package.json |  3 ++-
 packages/vite-plugin/src/index.ts |  4 ++--
 yarn.lock                         | 10 ++--------
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json
index 92905ffe4..2ff443452 100644
--- a/packages/vite-plugin/package.json
+++ b/packages/vite-plugin/package.json
@@ -16,9 +16,10 @@
   "license": "MIT",
   "dependencies": {
     "@vanilla-extract/integration": "^1.4.2",
-    "outdent": "^0.8.0"
+    "dedent": "^0.7.0"
   },
   "devDependencies": {
+    "@types/dedent": "^0.7.0",
     "vite": "^2.6.0"
   },
   "peerDependencies": {
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index ee4b00600..557fef264 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -1,7 +1,7 @@
 import path from 'path';
 import type { Plugin, ResolvedConfig } from 'vite';
 import { normalizePath } from 'vite';
-import outdent from 'outdent';
+import dedent from 'dedent';
 import {
   cssFileFilter,
   processVanillaFile,
@@ -81,7 +81,7 @@ export function vanillaExtractPlugin({
 
           const fileScope = parseFileScope(fileScopeId);
 
-          return outdent`
+          return dedent`
             import { injectStyles } from '@vanilla-extract/css/injectStyles';
             
             injectStyles({
diff --git a/yarn.lock b/yarn.lock
index 104041617..85ad1edf5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3931,8 +3931,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@vanilla-extract/vite-plugin@workspace:packages/vite-plugin"
   dependencies:
+    "@types/dedent": ^0.7.0
     "@vanilla-extract/integration": ^1.4.2
-    outdent: ^0.8.0
+    dedent: ^0.7.0
     vite: ^2.6.0
   peerDependencies:
     vite: ^2.2.3
@@ -12715,13 +12716,6 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
-"outdent@npm:^0.8.0":
-  version: 0.8.0
-  resolution: "outdent@npm:0.8.0"
-  checksum: 5f48c7b6a2ef8cbedf1c15d8b09d4ab14a6a9414d5616f2790c5034a1b1684e42b087033188a0657f8e04b45a1a3dc5545627cf84c479864573665ecb5761152
-  languageName: node
-  linkType: hard
-
 "p-cancelable@npm:^1.0.0":
   version: 1.1.0
   resolution: "p-cancelable@npm:1.1.0"

From 98bbdf52e2f26634752f04e9e4a1c79e1f05f614 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Tue, 12 Oct 2021 16:41:30 +1100
Subject: [PATCH 24/28] Add changeset for integration

---
 .changeset/tiny-baboons-roll.md   | 7 +++++++
 packages/integration/package.json | 1 -
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tiny-baboons-roll.md

diff --git a/.changeset/tiny-baboons-roll.md b/.changeset/tiny-baboons-roll.md
new file mode 100644
index 000000000..f351cfcba
--- /dev/null
+++ b/.changeset/tiny-baboons-roll.md
@@ -0,0 +1,7 @@
+---
+'@vanilla-extract/integration': patch
+---
+
+Export the fileScope functions.
+
+`stringifyFileScope` and `parseFileScope` are now exported to be used in other packages.
\ No newline at end of file
diff --git a/packages/integration/package.json b/packages/integration/package.json
index 2c09086fb..4dff61bc3 100644
--- a/packages/integration/package.json
+++ b/packages/integration/package.json
@@ -3,7 +3,6 @@
   "version": "1.4.2",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-integration.cjs.js",
-  "module": "dist/vanilla-extract-integration.esm.js",
   "files": [
     "/dist"
   ],

From e3108b2f5b8e663872585f138dd7ec90b2aa128c Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Tue, 12 Oct 2021 16:43:13 +1100
Subject: [PATCH 25/28] Explicitly throw if the filescope is missing

---
 packages/vite-plugin/src/index.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index 557fef264..002985ee4 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -72,16 +72,19 @@ export function vanillaExtractPlugin({
       if (extensionIndex > 0) {
         const fileScopeId = id.substring(0, extensionIndex);
 
-        if (cssMap.has(fileScopeId)) {
-          const css = cssMap.get(fileScopeId)!;
+        if (!cssMap.has(fileScopeId)) {
+          throw new Error(`Unable to locate ${fileScopeId} in the CSS map.`);
+        }
+
+        const css = cssMap.get(fileScopeId)!;
 
-          if (!useRuntime) {
-            return css;
-          }
+        if (!useRuntime) {
+          return css;
+        }
 
-          const fileScope = parseFileScope(fileScopeId);
+        const fileScope = parseFileScope(fileScopeId);
 
-          return dedent`
+        return dedent`
             import { injectStyles } from '@vanilla-extract/css/injectStyles';
             
             injectStyles({
@@ -89,7 +92,6 @@ export function vanillaExtractPlugin({
               css: ${JSON.stringify(css)}
             })
           `;
-        }
       }
 
       return null;

From 4acd1596e6e06a9e9657ad2a991c4e549119fec1 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Tue, 12 Oct 2021 16:52:43 +1100
Subject: [PATCH 26/28] Strip the `?used` everywhere

---
 packages/vite-plugin/src/index.ts | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index 002985ee4..499ddf430 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -85,13 +85,13 @@ export function vanillaExtractPlugin({
         const fileScope = parseFileScope(fileScopeId);
 
         return dedent`
-            import { injectStyles } from '@vanilla-extract/css/injectStyles';
-            
-            injectStyles({
-              fileScope: ${JSON.stringify(fileScope)},
-              css: ${JSON.stringify(css)}
-            })
-          `;
+          import { injectStyles } from '@vanilla-extract/css/injectStyles';
+          
+          injectStyles({
+            fileScope: ${JSON.stringify(fileScope)},
+            css: ${JSON.stringify(css)}
+          })
+        `;
       }
 
       return null;
@@ -101,8 +101,10 @@ export function vanillaExtractPlugin({
         return null;
       }
 
+      const index = id.indexOf('?');
+      const validId = index === -1 ? id : id.substring(0, index);
+
       if (ssr) {
-        const validId = id.substring(0, id.indexOf('?'));
         return addFileScope({
           source: code,
           filePath: normalizePath(path.relative(packageInfo.dirname, validId)),
@@ -111,7 +113,7 @@ export function vanillaExtractPlugin({
       }
 
       const { source, watchFiles } = await compile({
-        filePath: id,
+        filePath: validId,
         cwd: config.root,
       });
 
@@ -123,7 +125,7 @@ export function vanillaExtractPlugin({
 
       return processVanillaFile({
         source,
-        filePath: id,
+        filePath: validId,
         identOption:
           identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
         serializeVirtualCssPath: ({ fileScope, source }) => {

From 0f4f14e51be2e871c0f5737b463d9ac67a9ba6f7 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Tue, 12 Oct 2021 16:56:13 +1100
Subject: [PATCH 27/28] Add an explanatory comment

---
 packages/vite-plugin/src/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index 499ddf430..3c2f86b67 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -118,6 +118,8 @@ export function vanillaExtractPlugin({
       });
 
       for (const file of watchFiles) {
+        // 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);
         }

From 8b1844220cf281e4ecf00965dd84a7599a2cf885 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Wed, 13 Oct 2021 08:54:51 +1100
Subject: [PATCH 28/28] Migrate everything to outdent

---
 packages/css/package.json                     |  7 ++--
 packages/css/src/fileScope.ts                 |  4 +--
 packages/css/src/style.ts                     |  4 +--
 packages/css/src/validateSelector.ts          |  4 +--
 packages/integration/package.json             |  5 ++-
 .../integration/src/processVanillaFile.ts     |  4 +--
 packages/vite-plugin/package.json             |  3 +-
 packages/vite-plugin/src/index.ts             |  4 +--
 site/package.json                             |  3 +-
 site/src/HomePage/HomePage.tsx                | 14 ++++----
 yarn.lock                                     | 33 +++++++------------
 11 files changed, 35 insertions(+), 50 deletions(-)

diff --git a/packages/css/package.json b/packages/css/package.json
index 463368ac9..46db5e145 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -45,12 +45,11 @@
     "css-what": "^5.0.1",
     "cssesc": "^3.0.0",
     "csstype": "^3.0.7",
-    "dedent": "^0.7.0",
     "deep-object-diff": "^1.1.0",
-    "deepmerge": "^4.2.2"
+    "deepmerge": "^4.2.2",
+    "outdent": "^0.8.0"
   },
   "devDependencies": {
-    "@types/cssesc": "^3.0.0",
-    "@types/dedent": "^0.7.0"
+    "@types/cssesc": "^3.0.0"
   }
 }
diff --git a/packages/css/src/fileScope.ts b/packages/css/src/fileScope.ts
index ed9618207..ad498657d 100644
--- a/packages/css/src/fileScope.ts
+++ b/packages/css/src/fileScope.ts
@@ -1,4 +1,4 @@
-import dedent from 'dedent';
+import outdent from 'outdent';
 import { onEndFileScope } from './adapter';
 import type { FileScope } from './types';
 
@@ -27,7 +27,7 @@ export function hasFileScope() {
 export function getFileScope(): FileScope {
   if (fileScopes.length === 0) {
     throw new Error(
-      dedent`
+      outdent`
         Styles were unable to be assigned to a file. This is generally caused by one of the following:
 
         - You may have created styles outside of a '.css.ts' context
diff --git a/packages/css/src/style.ts b/packages/css/src/style.ts
index 25c305199..6cb66743a 100644
--- a/packages/css/src/style.ts
+++ b/packages/css/src/style.ts
@@ -1,5 +1,5 @@
 import cssesc from 'cssesc';
-import dedent from 'dedent';
+import outdent from 'outdent';
 import deepmerge from 'deepmerge';
 
 import type {
@@ -97,7 +97,7 @@ export function fontFace(rule: FontFaceRule, debugId?: string) {
 
   if ('fontFamily' in rule) {
     throw new Error(
-      dedent`
+      outdent`
           This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
   
           If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
diff --git a/packages/css/src/validateSelector.ts b/packages/css/src/validateSelector.ts
index 0809e8c65..9662dead6 100644
--- a/packages/css/src/validateSelector.ts
+++ b/packages/css/src/validateSelector.ts
@@ -1,6 +1,6 @@
 import { parse } from 'css-what';
 import cssesc from 'cssesc';
-import dedent from 'dedent';
+import outdent from 'outdent';
 
 // https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
 function escapeRegex(string: string) {
@@ -53,7 +53,7 @@ export const validateSelector = (selector: string, targetClassName: string) => {
       }
     } catch (err) {
       throw new Error(
-        dedent`
+        outdent`
         Invalid selector: ${replaceTarget()}
     
         Style selectors must target the '&' character (along with any modifiers), e.g. ${'`${parent} &`'} or ${'`${parent} &:hover`'}.
diff --git a/packages/integration/package.json b/packages/integration/package.json
index 4dff61bc3..f8f2a756d 100644
--- a/packages/integration/package.json
+++ b/packages/integration/package.json
@@ -16,15 +16,14 @@
   "dependencies": {
     "@vanilla-extract/css": "^1.5.0",
     "chalk": "^4.1.1",
-    "dedent": "^0.7.0",
     "esbuild": "^0.11.16",
     "eval": "^0.1.6",
     "find-up": "^5.0.0",
     "javascript-stringify": "^2.0.1",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "outdent": "^0.8.0"
   },
   "devDependencies": {
-    "@types/dedent": "^0.7.0",
     "@types/lodash": "^4.14.168"
   }
 }
diff --git a/packages/integration/src/processVanillaFile.ts b/packages/integration/src/processVanillaFile.ts
index 06375b021..b8afcd4ad 100644
--- a/packages/integration/src/processVanillaFile.ts
+++ b/packages/integration/src/processVanillaFile.ts
@@ -4,7 +4,7 @@ import { transformCss } from '@vanilla-extract/css/transformCss';
 import evalCode from 'eval';
 import { stringify } from 'javascript-stringify';
 import isPlainObject from 'lodash/isPlainObject';
-import dedent from 'dedent';
+import outdent from 'outdent';
 import { hash } from './hash';
 
 const originalNodeEnv = process.env.NODE_ENV;
@@ -219,7 +219,7 @@ function stringifyExports(
         }
       }
 
-      throw new Error(dedent`
+      throw new Error(outdent`
         Invalid exports.
 
         You can only export plain objects, arrays, strings, numbers and null/undefined.
diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json
index 2ff443452..92905ffe4 100644
--- a/packages/vite-plugin/package.json
+++ b/packages/vite-plugin/package.json
@@ -16,10 +16,9 @@
   "license": "MIT",
   "dependencies": {
     "@vanilla-extract/integration": "^1.4.2",
-    "dedent": "^0.7.0"
+    "outdent": "^0.8.0"
   },
   "devDependencies": {
-    "@types/dedent": "^0.7.0",
     "vite": "^2.6.0"
   },
   "peerDependencies": {
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index 3c2f86b67..88a93d179 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -1,7 +1,7 @@
 import path from 'path';
 import type { Plugin, ResolvedConfig } from 'vite';
 import { normalizePath } from 'vite';
-import dedent from 'dedent';
+import outdent from 'outdent';
 import {
   cssFileFilter,
   processVanillaFile,
@@ -84,7 +84,7 @@ export function vanillaExtractPlugin({
 
         const fileScope = parseFileScope(fileScopeId);
 
-        return dedent`
+        return outdent`
           import { injectStyles } from '@vanilla-extract/css/injectStyles';
           
           injectStyles({
diff --git a/site/package.json b/site/package.json
index 9ffd20a7d..d1d6a1112 100644
--- a/site/package.json
+++ b/site/package.json
@@ -9,8 +9,8 @@
   "dependencies": {
     "@mdx-js/react": "^1.6.22",
     "classnames": "^2.2.6",
-    "dedent": "^0.7.0",
     "lodash": "^4.17.21",
+    "outdent": "^0.8.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-head": "^3.4.0",
@@ -24,7 +24,6 @@
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@types/classnames": "^2.2.11",
-    "@types/dedent": "^0.7.0",
     "@types/lodash": "^4.14.168",
     "@types/mdx-js__react": "^1.5.3",
     "@types/react": "^17",
diff --git a/site/src/HomePage/HomePage.tsx b/site/src/HomePage/HomePage.tsx
index 2668d278d..83afd6e08 100644
--- a/site/src/HomePage/HomePage.tsx
+++ b/site/src/HomePage/HomePage.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import dedent from 'dedent';
+import outdent from 'outdent';
 import { Box, Stack, ContentBlock, Columns, ButtonLink } from '../system';
 import { Heading } from '../Typography/Heading';
 import { Chevron } from '../Chevron/Chevron';
@@ -190,7 +190,7 @@ export const HomePage = () => {
                   errorTokens={['brandd', 'large']}
                   title="styles.css.ts"
                 >
-                  {dedent`
+                  {outdent`
                   import { createTheme, style } from '@vanilla-extract/css';
 
                   export const [themeClass, vars] = createTheme({
@@ -324,7 +324,7 @@ export const HomePage = () => {
                 title="styles.css.ts"
                 background={{ lightMode: 'coolGray800', darkMode: 'black' }}
               >
-                {dedent`
+                {outdent`
                 import { style } from '@vanilla-extract/css';
 
                 export const className = style({
@@ -371,7 +371,7 @@ export const HomePage = () => {
                   title="styles.css.ts"
                   background={{ lightMode: 'coolGray900', darkMode: 'gray900' }}
                 >
-                  {dedent`
+                  {outdent`
                     import { createTheme, style } from '@vanilla-extract/css';
                       
                     export const [themeClass, vars] = createTheme({
@@ -410,7 +410,7 @@ export const HomePage = () => {
                 title="styles.css.ts"
                 background={{ lightMode: 'coolGray900', darkMode: 'gray900' }}
               >
-                {dedent`import { style, createVar } from '@vanilla-extract/css';
+                {outdent`import { style, createVar } from '@vanilla-extract/css';
 
       const shadowColor = createVar();
 
@@ -449,7 +449,7 @@ export const HomePage = () => {
                 title="styles.css.ts"
                 background={{ lightMode: 'coolGray900', darkMode: 'gray900' }}
               >
-                {dedent`
+                {outdent`
                 import { styleVariants } from '@vanilla-extract/css';
 
                 export const background = styleVariants({
@@ -488,7 +488,7 @@ export const HomePage = () => {
                 title="output.css"
                 background={{ lightMode: 'coolGray900', darkMode: 'gray900' }}
               >
-                {dedent`
+                {outdent`
                   :root {
                     --space-none__ya5b7b0: 0;
                     --space-small__ya5b7b1: 4px;
diff --git a/yarn.lock b/yarn.lock
index 85ad1edf5..a1ae2dd42 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3285,13 +3285,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/dedent@npm:^0.7.0":
-  version: 0.7.0
-  resolution: "@types/dedent@npm:0.7.0"
-  checksum: 8fec52e2072d734f547b9f77d689516423155e1895a0b174787e42ed616eaf7c3556189a90e6da254f43dad93489eed34dc7ad9715231281871674e31ff13f08
-  languageName: node
-  linkType: hard
-
 "@types/eslint-scope@npm:^3.7.0":
   version: 3.7.0
   resolution: "@types/eslint-scope@npm:3.7.0"
@@ -3834,15 +3827,14 @@ __metadata:
   dependencies:
     "@emotion/hash": ^0.8.0
     "@types/cssesc": ^3.0.0
-    "@types/dedent": ^0.7.0
     "@vanilla-extract/private": ^1.0.1
     chalk: ^4.1.1
     css-what: ^5.0.1
     cssesc: ^3.0.0
     csstype: ^3.0.7
-    dedent: ^0.7.0
     deep-object-diff: ^1.1.0
     deepmerge: ^4.2.2
+    outdent: ^0.8.0
   languageName: unknown
   linkType: soft
 
@@ -3868,16 +3860,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@vanilla-extract/integration@workspace:packages/integration"
   dependencies:
-    "@types/dedent": ^0.7.0
     "@types/lodash": ^4.14.168
     "@vanilla-extract/css": ^1.5.0
     chalk: ^4.1.1
-    dedent: ^0.7.0
     esbuild: ^0.11.16
     eval: ^0.1.6
     find-up: ^5.0.0
     javascript-stringify: ^2.0.1
     lodash: ^4.17.21
+    outdent: ^0.8.0
   languageName: unknown
   linkType: soft
 
@@ -3931,9 +3922,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@vanilla-extract/vite-plugin@workspace:packages/vite-plugin"
   dependencies:
-    "@types/dedent": ^0.7.0
     "@vanilla-extract/integration": ^1.4.2
-    dedent: ^0.7.0
+    outdent: ^0.8.0
     vite: ^2.6.0
   peerDependencies:
     vite: ^2.2.3
@@ -6718,13 +6708,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dedent@npm:^0.7.0":
-  version: 0.7.0
-  resolution: "dedent@npm:0.7.0"
-  checksum: 05c18541a4b932006a65eccaf03d68ac60552981db424f39f1ca4bebf5beaa53d318eadbb4dc0be24232844e69d1140763a7ada94559b2cb7771a47c0a829aeb
-  languageName: node
-  linkType: hard
-
 "deep-equal@npm:^1.0.1":
   version: 1.1.1
   resolution: "deep-equal@npm:1.1.1"
@@ -12716,6 +12699,13 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
+"outdent@npm:^0.8.0":
+  version: 0.8.0
+  resolution: "outdent@npm:0.8.0"
+  checksum: 5f48c7b6a2ef8cbedf1c15d8b09d4ab14a6a9414d5616f2790c5034a1b1684e42b087033188a0657f8e04b45a1a3dc5545627cf84c479864573665ecb5761152
+  languageName: node
+  linkType: hard
+
 "p-cancelable@npm:^1.0.0":
   version: 1.1.0
   resolution: "p-cancelable@npm:1.1.0"
@@ -15455,7 +15445,6 @@ fsevents@~2.1.2:
     "@babel/preset-typescript": ^7.13.0
     "@mdx-js/react": ^1.6.22
     "@types/classnames": ^2.2.11
-    "@types/dedent": ^0.7.0
     "@types/lodash": ^4.14.168
     "@types/mdx-js__react": ^1.5.3
     "@types/react": ^17
@@ -15468,7 +15457,6 @@ fsevents@~2.1.2:
     classnames: ^2.2.6
     copy-webpack-plugin: ^8.1.0
     css-loader: ^5.2.4
-    dedent: ^0.7.0
     file-loader: ^6.2.0
     github-slugger: ^1.3.0
     gray-matter: ^4.0.2
@@ -15476,6 +15464,7 @@ fsevents@~2.1.2:
     lodash: ^4.17.21
     mdx-loader: ^3.0.2
     mini-css-extract-plugin: ^1.5.1
+    outdent: ^0.8.0
     react: ^17.0.2
     react-dom: ^17.0.2
     react-head: ^3.4.0