Add createCompiler to integration package (#1030)

.changeset/khaki-years-stare.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': minor
+---
+
+Provide current file scope as an additional argument to the adapter methods `registerClassName` and `registerComposition`. This is to allow fine-grained caching of registered class names and class compositions per file.

.changeset/large-rabbits-grow.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Throw when `setAdapter` is called with a falsy value

.changeset/silent-roses-impress.md

@@ -0,0 +1,7 @@
+---
+'@vanilla-extract/esbuild-plugin': patch
+'@vanilla-extract/integration': patch
+'@vanilla-extract/jest-transform': patch
+---
+
+Bump esbuild to v0.17.6

.changeset/slow-carrots-itch.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/integration': minor
+---
+
+Add `createCompiler` function for creating a compiler instance that can be re-used between builds. This is a low-level function intended for use by bundler plugins and, as such, is currently undocumented. Note that in order to use the new compiler you must also update `@vanilla-extract/css` to v1.10.0.

.changeset/tender-snakes-occur.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/integration': minor
+---
+
+Add support for `onBeginFileScope` adapter lifecycle hook

.github/workflows/validate.yml

@@ -35,8 +35,39 @@ jobs:
       - name: Lint
         run: pnpm lint
 
-      - name: Test
-        run: pnpm test:jest
+      - name: Unit Test
+        run: pnpm test:unit
+  windows-test:
+    strategy:
+      matrix:
+        # Blank string allows us to test against version in nvmrc file
+        # configured in 'Set up Node.js' down below.
+        node: [''] # Add 'lts/*' to this list when ready
+    name: Windows Tests (${{ (matrix.node && matrix.node != 'lts/*') && format('node {0}', matrix.node) || matrix.node || 'nvmrc' }})
+    runs-on: windows-latest
+    env:
+      CI: true
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@main
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@main
+        with:
+          node-version: ${{ matrix.node }}
+          node-version-file: ${{ matrix.node == '' && '.nvmrc' || '' }}
+          cache: 'pnpm'
+
+      - name: Install Dependencies
+        run: pnpm i
+
+      - name: Build
+        run: pnpm build
+
+      - name: Unit Test
+        run: pnpm test:unit
   playwright:
     name: Playwright tests
     runs-on: macos-11

jest.config.js

@@ -4,6 +4,6 @@ module.exports = {
     '\\.css\\.ts$': '@vanilla-extract/jest-transform',
     '\\.tsx?$': ['babel-jest', { configFile: './babel-jest.config.js' }],
   },
-  testMatch: ['**/?(*.)+(test).[jt]s?(x)'],
+  testMatch: ['**/?(*.)+(test).[jt]s?(x)', '!**/*.vitest.test*'],
   testTimeout: 10000,
 };

package.json

@@ -13,7 +13,9 @@
     "start": "pnpm start-fixture themed",
     "start-site": "pnpm --filter=site start",
     "build-site": "pnpm --filter=site build",
+    "test:unit": "pnpm test:jest && pnpm test:vitest",
     "test:jest": "jest",
+    "test:vitest": "vitest --watch=false",
     "test:playwright": "playwright test",
     "format": "prettier --write .",
     "lint": "manypkg check && prettier --check . && tsc",
@@ -55,7 +57,8 @@
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-node-externals": "^5.0.0",
     "ts-node": "^10.0.0",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "vitest": "^0.28.5"
   },
   "packageManager": "[email protected]",
   "pnpm": {

packages/css/src/adapter.ts

@@ -29,6 +29,10 @@ export const setAdapterIfNotSet = (newAdapter: Adapter) => {
 };
 
 export const setAdapter = (newAdapter: Adapter) => {
+  if (!newAdapter) {
+    throw new Error('No adapter provided when calling "setAdapter"');
+  }
+
   hasConfiguredAdapter = true;
 
   adapterStack.push(newAdapter);
@@ -58,6 +62,12 @@ export const markCompositionUsed: Adapter['markCompositionUsed'] = (
   return currentAdapter().markCompositionUsed(...props);
 };
 
+export const onBeginFileScope: NonNullable<Adapter['onBeginFileScope']> = (
+  ...props
+) => {
+  return currentAdapter().onBeginFileScope?.(...props);
+};
+
 export const onEndFileScope: Adapter['onEndFileScope'] = (...props) => {
   return currentAdapter().onEndFileScope(...props);
 };

packages/css/src/fileScope.ts

@@ -1,5 +1,5 @@
 import outdent from 'outdent';
-import { onEndFileScope } from './adapter';
+import { onBeginFileScope, onEndFileScope } from './adapter';
 import type { FileScope } from './types';
 
 let refCounter = 0;
@@ -8,10 +8,12 @@ const fileScopes: Array<FileScope> = [];
 
 export function setFileScope(filePath: string, packageName?: string) {
   refCounter = 0;
-  fileScopes.unshift({
+  const fileScope = {
     filePath,
     packageName,
-  });
+  };
+  fileScopes.unshift(fileScope);
+  onBeginFileScope(fileScope);
 }
 
 export function endFileScope() {

packages/css/src/style.ts

@@ -22,7 +22,7 @@ import { dudupeAndJoinClassList } from './utils';
 
 function composedStyle(rules: Array<StyleRule | ClassNames>, debugId?: string) {
   const className = generateIdentifier(debugId);
-  registerClassName(className);
+  registerClassName(className, getFileScope());
 
   const classList = [];
   const styleRules = [];
@@ -40,10 +40,13 @@ function composedStyle(rules: Array<StyleRule | ClassNames>, debugId?: string) {
   if (classList.length > 0) {
     result = `${className} ${dudupeAndJoinClassList(classList)}`;
 
-    registerComposition({
-      identifier: className,
-      classList: result,
-    });
+    registerComposition(
+      {
+        identifier: className,
+        classList: result,
+      },
+      getFileScope(),
+    );
 
     if (styleRules.length > 0) {
       // If there are styles attached to this composition then it is
@@ -71,7 +74,7 @@ export function style(rule: ComplexStyleRule, debugId?: string) {
 
   const className = generateIdentifier(debugId);
 
-  registerClassName(className);
+  registerClassName(className, getFileScope());
   appendCss({ type: 'local', selector: className, rule }, getFileScope());
 
   return className;

packages/css/src/theme.ts

@@ -55,7 +55,7 @@ export function createTheme(arg1: any, arg2?: any, arg3?: string): any {
     typeof arg2 === 'object' ? arg3 : arg2,
   );
 
-  registerClassName(themeClassName);
+  registerClassName(themeClassName, getFileScope());
 
   const vars =
     typeof arg2 === 'object'

packages/css/src/types.ts

@@ -132,9 +132,10 @@ export interface Composition {
 type IdentOption = 'short' | 'debug';
 export interface Adapter {
   appendCss: (css: CSS, fileScope: FileScope) => void;
-  registerClassName: (className: string) => void;
-  registerComposition: (composition: Composition) => void;
+  registerClassName: (className: string, fileScope: FileScope) => void;
+  registerComposition: (composition: Composition, fileScope: FileScope) => void;
   markCompositionUsed: (identifier: string) => void;
+  onBeginFileScope?: (fileScope: FileScope) => void;
   onEndFileScope: (fileScope: FileScope) => void;
   getIdentOption: () => IdentOption;
 }

packages/esbuild-plugin-next/package.json

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "name": "@vanilla-extract/esbuild-plugin-next",
+  "version": "0.0.0",
+  "description": "Zero-runtime Stylesheets-in-TypeScript",
+  "main": "dist/vanilla-extract-esbuild-plugin-next.cjs.js",
+  "module": "dist/vanilla-extract-esbuild-plugin-next.esm.js",
+  "files": [
+    "/dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
+    "directory": "packages/esbuild-plugin-next"
+  },
+  "author": "SEEK",
+  "license": "MIT",
+  "dependencies": {
+    "@vanilla-extract/integration": "^6.0.2"
+  },
+  "devDependencies": {
+    "esbuild": "0.17.6"
+  }
+}

packages/esbuild-plugin-next/src/index.ts

@@ -0,0 +1,85 @@
+import { dirname } from 'path';
+
+import {
+  cssFileFilter,
+  createCompiler,
+  vanillaExtractTransformPlugin,
+  IdentifierOption,
+  CreateCompilerOptions,
+} from '@vanilla-extract/integration';
+import type { Plugin } from 'esbuild';
+
+const vanillaCssNamespace = 'vanilla-extract-css-ns';
+
+interface VanillaExtractPluginOptions {
+  outputCss?: boolean;
+  runtime?: boolean;
+  processCss?: (css: string) => Promise<string>;
+  identifiers?: IdentifierOption;
+  compilerVitePlugins?: CreateCompilerOptions['vitePlugins'];
+}
+export function vanillaExtractPlugin({
+  outputCss = true,
+  runtime = false,
+  processCss,
+  identifiers: identOption,
+  compilerVitePlugins: vitePlugins,
+}: VanillaExtractPluginOptions = {}): Plugin {
+  if (runtime) {
+    // If using runtime CSS then just apply fileScopes and debug IDs to code
+    return vanillaExtractTransformPlugin({ identOption });
+  }
+
+  return {
+    name: 'vanilla-extract',
+    async setup(build) {
+      const root = build.initialOptions.absWorkingDir || process.cwd();
+      const identifiers =
+        identOption || (build.initialOptions.minify ? 'short' : 'debug');
+
+      const compiler = createCompiler({ root, identifiers, vitePlugins });
+
+      build.onDispose(async () => {
+        await compiler.close();
+      });
+
+      build.onResolve({ filter: /\.vanilla\.css/ }, (args) => {
+        return {
+          path: args.path,
+          namespace: vanillaCssNamespace,
+        };
+      });
+
+      build.onLoad(
+        { filter: /.*/, namespace: vanillaCssNamespace },
+        async ({ path }) => {
+          const [rootRelativePath] = path.split('.vanilla.css');
+
+          let { css, filePath } = compiler.getCssForFile(rootRelativePath);
+
+          if (typeof processCss === 'function') {
+            css = await processCss(css);
+          }
+
+          return {
+            contents: css,
+            loader: 'css',
+            resolveDir: dirname(filePath),
+          };
+        },
+      );
+
+      build.onLoad({ filter: cssFileFilter }, async ({ path }) => {
+        const { source, watchFiles } = await compiler.processVanillaFile(path, {
+          outputCss,
+        });
+
+        return {
+          contents: source,
+          loader: 'js',
+          watchFiles: Array.from(watchFiles),
+        };
+      });
+    },
+  };
+}

packages/esbuild-plugin/package.json

@@ -18,6 +18,6 @@
     "@vanilla-extract/integration": "^6.0.2"
   },
   "devDependencies": {
-    "esbuild": "^0.16.3"
+    "esbuild": "0.17.6"
   }
 }

packages/integration/package.json

@@ -18,13 +18,15 @@
     "@babel/plugin-syntax-typescript": "^7.20.0",
     "@vanilla-extract/babel-plugin-debug-ids": "^1.0.2",
     "@vanilla-extract/css": "^1.9.4",
-    "esbuild": "^0.16.3",
+    "esbuild": "0.17.6",
     "eval": "0.1.6",
     "find-up": "^5.0.0",
     "javascript-stringify": "^2.0.1",
     "lodash": "^4.17.21",
     "mlly": "^1.1.0",
-    "outdent": "^0.8.0"
+    "outdent": "^0.8.0",
+    "vite": "^4.1.4",
+    "vite-node": "^0.28.5"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.20",