Update browser runtime (#409)

Ben Jervis · web-flow · commit a9c5cb768ad1 · 2021-10-13T10:33:14.000+11:00
diff --git a/.changeset/chilled-goats-fold.md b/.changeset/chilled-goats-fold.md
@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+Fix plugin for watch mode.
+
+The vite plugin previously relied on a one to one matching of resolve to load calls, and would clean up the CSS stored in memory after it was loaded.
+
+This isn't true in `--watch` mode, as the same file can be loaded on the rebuild without having to be resolved, which the plugin now handles.
diff --git a/.changeset/khaki-taxis-tell.md b/.changeset/khaki-taxis-tell.md
@@ -0,0 +1,10 @@
+---
+'@vanilla-extract/css': patch
+---
+
+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.
+
+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
@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+Update the "vanilla-extract" devStyleRuntime option.
+
+When using the vanilla browser runtime in vite, it now operates on a new model where a .css.js file is generated, that uses @vanilla-extract/css/injectStyles to add the css to the browser.
+
+This allows for hot reloading of styles, and makes styles a bit easier to debug at dev time (because they're actually visible).
diff --git a/.changeset/pretty-carrots-drive.md 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.
diff --git a/.changeset/strong-zebras-prove.md 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.
diff --git a/.changeset/tiny-baboons-roll.md 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.
diff --git 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();
diff --git a/packages/css/injectStyles/package.json 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
@@ -17,6 +17,7 @@
       "adapter.ts",
       "transformCss.ts",
       "fileScope.ts",
+      "injectStyles.ts",
       "disableRuntimeStyles.ts"
     ]
   },
@@ -27,6 +28,7 @@
     "/adapter",
     "/transformCss",
     "/fileScope",
+    "/injectStyles",
     "/disableRuntimeStyles"
   ],
   "repository": {
@@ -43,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
@@ -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/injectStyles.ts b/packages/css/src/injectStyles.ts
@@ -0,0 +1,30 @@
+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);
+    styleEl.setAttribute('type', 'text/css');
+    stylesheet = stylesheets[fileScopeId] = styleEl;
+    document.head.appendChild(styleEl);
+  }
+
+  stylesheet.innerHTML = css;
+};
diff --git 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/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
@@ -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
@@ -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/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
@@ -4,16 +4,19 @@ 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;
 
-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 {
@@ -33,6 +36,7 @@ interface ProcessVanillaFileOptions {
     fileName: string;
     base64Source: string;
     fileScope: FileScope;
+    source: string;
   }) => string;
 }
 export function processVanillaFile({
@@ -113,7 +117,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);
@@ -210,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
@@ -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
diff --git a/site/package.json b/site/package.json
diff --git a/site/src/HomePage/HomePage.tsx b/site/src/HomePage/HomePage.tsx
diff --git a/test-helpers/src/startFixture/vite.ts b/test-helpers/src/startFixture/vite.ts
diff --git a/yarn.lock b/yarn.lock
