Update browser runtime

.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.

.changeset/khaki-taxis-tell.md

@@ -0,0 +1,10 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Change the way vanilla runtime works.
+
+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.

.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).

.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.

.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.

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();

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"
+  }
+}

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": {

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;
+};

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 = [];
   },

packages/integration/package.json

@@ -3,6 +3,7 @@
   "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"
   ],

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';

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 {
@@ -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);

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"