Webpack vite compiler wip

.changeset/popular-cups-serve.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/webpack-plugin': patch
+'@vanilla-extract/integration': patch
+---
+
+Testing vite node compiler in webpack plugin

packages/integration/src/compiler.ts

@@ -171,6 +171,10 @@ export interface Compiler {
     filePath: string,
     options?: {
       outputCss?: boolean;
+      serializeVirtualCssPath?: (file: {
+        fileName: string;
+        source: string;
+      }) => string | Promise<string>;
     },
   ): Promise<{ source: string; watchFiles: Set<string> }>;
   getCssForFile(virtualCssFilePath: string): { filePath: string; css: string };
@@ -184,7 +188,11 @@ interface ProcessedVanillaFile {
 
 export interface CreateCompilerOptions {
   root: string;
-  cssImportSpecifier?: (filePath: string) => string;
+  cssImportSpecifier?: (
+    cssDepModuleId: string,
+    moduleId: string,
+    source: string,
+  ) => string | Promise<string>;
   identifiers?: IdentifierOption;
   viteConfig?: ViteUserConfig;
   /** @deprecated */
@@ -332,7 +340,9 @@ export const createCompiler = ({
 
           const { cssDeps, watchFiles } = scanModule(moduleNode);
 
-          for (const cssDep of cssDeps) {
+          // Filter falsy css deps, webpack plugin's extracted.js file has undefined cssDeps for
+          // some reason
+          for (const cssDep of cssDeps.filter(Boolean)) {
             const cssDepModuleId = normalizePath(cssDep);
             const cssObjs = cssByModuleId.get(cssDepModuleId);
             const cachedCss = cssCache.get(cssDepModuleId);
@@ -343,9 +353,9 @@ export const createCompiler = ({
               continue;
             }
 
-            if (cssObjs) {
-              let css = '';
+            let css = cachedCss?.css || '';
 
+            if (cssObjs) {
               if (cssObjs.length > 0) {
                 css = transformCss({
                   localClassNames: Array.from(localClassNames),
@@ -368,7 +378,11 @@ export const createCompiler = ({
 
             if (cssObjs || cachedCss?.css) {
               cssImports.push(
-                `import '${cssImportSpecifier(cssDepModuleId)}';`,
+                `import '${await cssImportSpecifier(
+                  cssDepModuleId,
+                  moduleId,
+                  css,
+                )}';`,
               );
             }
           }

packages/webpack-plugin-next/extracted.js

@@ -0,0 +1,2 @@
+// This is a noop file for extracted CSS source to point to
+// Webpack requires a file to exist on disk for virtual source files

packages/webpack-plugin-next/loader/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/vanilla-extract-webpack-plugin-next-loader.cjs.js",
+  "module": "dist/vanilla-extract-webpack-plugin-next-loader.esm.js"
+}

packages/webpack-plugin-next/next/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/vanilla-extract-webpack-plugin-next-next.cjs.js",
+  "module": "dist/vanilla-extract-webpack-plugin-next-next.esm.js"
+}

packages/webpack-plugin-next/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@vanilla-extract/webpack-plugin-next",
+  "version": "0.0.0",
+  "description": "Zero-runtime Stylesheets-in-TypeScript",
+  "main": "dist/vanilla-extract-webpack-plugin-next.cjs.js",
+  "module": "dist/vanilla-extract-webpack-plugin-next.esm.js",
+  "types": "dist/vanilla-extract-webpack-plugin-next.cjs.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/vanilla-extract-webpack-plugin-next.cjs.d.ts",
+      "module": "./dist/vanilla-extract-webpack-plugin-next.esm.js",
+      "default": "./dist/vanilla-extract-webpack-plugin-next.cjs.js"
+    },
+    "./loader": {
+      "types": "./loader/dist/vanilla-extract-webpack-plugin-next-loader.cjs.d.ts",
+      "module": "./loader/dist/vanilla-extract-webpack-plugin-next-loader.esm.js",
+      "default": "./loader/dist/vanilla-extract-webpack-plugin-next-loader.cjs.js"
+    },
+    "./virtualFileLoader": {
+      "types": "./virtualFileLoader/dist/vanilla-extract-webpack-plugin-next-virtualFileLoader.cjs.d.ts",
+      "module": "./virtualFileLoader/dist/vanilla-extract-webpack-plugin-next-virtualFileLoader.esm.js",
+      "default": "./virtualFileLoader/dist/vanilla-extract-webpack-plugin-next-virtualFileLoader.cjs.js"
+    },
+    "./next": {
+      "types": "./next/dist/vanilla-extract-webpack-plugin-next-next.cjs.d.ts",
+      "module": "./next/dist/vanilla-extract-webpack-plugin-next-next.esm.js",
+      "default": "./next/dist/vanilla-extract-webpack-plugin-next-next.cjs.js"
+    },
+    "./virtualNextFileLoader": {
+      "types": "./virtualNextFileLoader/dist/vanilla-extract-webpack-plugin-next-virtualNextFileLoader.cjs.d.ts",
+      "module": "./virtualNextFileLoader/dist/vanilla-extract-webpack-plugin-next-virtualNextFileLoader.esm.js",
+      "default": "./virtualNextFileLoader/dist/vanilla-extract-webpack-plugin-next-virtualNextFileLoader.cjs.js"
+    }
+  },
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts",
+      "loader.ts",
+      "virtualFileLoader.ts",
+      "next.ts",
+      "virtualNextFileLoader.ts"
+    ]
+  },
+  "files": [
+    "/dist",
+    "/loader",
+    "/virtualFileLoader",
+    "/next",
+    "/virtualNextFileLoader",
+    "extracted.js",
+    "vanilla.virtual.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
+    "directory": "packages/webpack-plugin-next"
+  },
+  "author": "SEEK",
+  "license": "MIT",
+  "peerDependencies": {
+    "webpack": "^4.30.0 || ^5.20.2"
+  },
+  "dependencies": {
+    "@vanilla-extract/integration": "workspace:^",
+    "debug": "^4.3.1",
+    "loader-utils": "^2.0.0",
+    "picocolors": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/debug": "^4.1.5",
+    "webpack": "^5.90.0"
+  }
+}

packages/webpack-plugin-next/src/compat.ts

@@ -0,0 +1,51 @@
+import {
+  Compiler,
+  ExternalsPlugin,
+  Compilation,
+  Module,
+  node,
+  optimize,
+} from 'webpack';
+
+export interface WebpackCompat {
+  isWebpack5: boolean;
+  getNodeTemplatePlugin: (compiler: Compiler) => typeof node.NodeTemplatePlugin;
+  getNodeTargetPlugin: (compiler: Compiler) => typeof node.NodeTargetPlugin;
+  getLimitChunkCountPlugin: (
+    compiler: Compiler,
+  ) => typeof optimize.LimitChunkCountPlugin;
+  getExternalsPlugin: (compiler: Compiler) => typeof ExternalsPlugin;
+  isModuleUsed: (compilation: Compilation, module: Module) => boolean;
+}
+
+const webpack4: WebpackCompat = {
+  isWebpack5: false,
+  getNodeTemplatePlugin: () => require('webpack/lib/node/NodeTemplatePlugin'),
+  getNodeTargetPlugin: () => require('webpack/lib/node/NodeTargetPlugin'),
+  getLimitChunkCountPlugin: () =>
+    require('webpack/lib/optimize/LimitChunkCountPlugin'),
+  getExternalsPlugin: () => require('webpack/lib/ExternalsPlugin'),
+  isModuleUsed: (_compilation, module) =>
+    typeof module.used === 'boolean' ? module.used : true,
+};
+
+const webpack5: WebpackCompat = {
+  isWebpack5: true,
+  getNodeTemplatePlugin: (compiler) => compiler.webpack.node.NodeTemplatePlugin,
+  getNodeTargetPlugin: (compiler) => compiler.webpack.node.NodeTargetPlugin,
+  getLimitChunkCountPlugin: (compiler) =>
+    compiler.webpack.optimize.LimitChunkCountPlugin,
+  getExternalsPlugin: (compiler) => compiler.webpack.ExternalsPlugin,
+  isModuleUsed: (compilation, module) => {
+    const exportsInfo = compilation.moduleGraph.getExportsInfo(module);
+
+    return exportsInfo.isModuleUsed('main');
+  },
+};
+
+export default (isWebpack5: boolean): WebpackCompat => {
+  if (isWebpack5) {
+    return webpack5;
+  }
+  return webpack4;
+};

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

@@ -0,0 +1,8 @@
+import type { Compiler } from 'webpack';
+import { AbstractVanillaExtractPlugin } from './plugin';
+
+export class VanillaExtractPlugin extends AbstractVanillaExtractPlugin {
+  apply(compiler: Compiler) {
+    this.inject(compiler, 'virtualFileLoader');
+  }
+}

packages/webpack-plugin-next/src/loader.ts

@@ -0,0 +1,77 @@
+// @ts-expect-error
+import loaderUtils from 'loader-utils';
+import {
+  getPackageInfo,
+  IdentifierOption,
+  transform,
+  type Compiler as VanillaExtractCompiler,
+} from '@vanilla-extract/integration';
+
+import type { LoaderContext } from './types';
+import { debug, formatResourcePath } from './logger';
+interface LoaderOptions {
+  outputCss: boolean;
+  identifiers?: IdentifierOption;
+}
+
+interface InternalLoaderOptions extends LoaderOptions {
+  vanillaExtractCompiler: VanillaExtractCompiler;
+  virtualLoader: 'virtualFileLoader' | 'virtualNextFileLoader';
+}
+
+const defaultIdentifierOption = (
+  mode: LoaderContext['mode'],
+  identifiers?: IdentifierOption,
+): IdentifierOption =>
+  identifiers ?? (mode === 'production' ? 'short' : 'debug');
+
+export default function (this: LoaderContext, source: string) {
+  const { identifiers } = loaderUtils.getOptions(this) as InternalLoaderOptions;
+
+  const { name } = getPackageInfo(this.rootContext);
+
+  const callback = this.async();
+
+  transform({
+    source,
+    filePath: this.resourcePath,
+    rootPath: this.rootContext,
+    packageName: name,
+    identOption: defaultIdentifierOption(this.mode, identifiers),
+  })
+    .then((code) => {
+      callback(null, code);
+    })
+    .catch((e) => {
+      callback(e);
+    });
+}
+
+export function pitch(this: LoaderContext) {
+  const { vanillaExtractCompiler, outputCss } = loaderUtils.getOptions(
+    this,
+  ) as InternalLoaderOptions;
+
+  const log = debug(
+    `vanilla-extract:loader:${formatResourcePath(this.resourcePath)}`,
+  );
+
+  log(`Loading file ${this.resourcePath}`);
+
+  const callback = this.async();
+
+  vanillaExtractCompiler
+    .processVanillaFile(this.resourcePath, {
+      outputCss,
+    })
+    .then(({ source, watchFiles }) => {
+      watchFiles.forEach((dep) => {
+        this.addDependency(dep);
+      });
+      log(`Source:\n${source}`);
+      callback(null, source);
+    })
+    .catch((e) => {
+      callback(e);
+    });
+}

packages/webpack-plugin-next/src/logger.ts

@@ -0,0 +1,9 @@
+import createDebug from 'debug';
+import pc from 'picocolors';
+
+export const formatResourcePath = (i: string) =>
+  pc.blue(`"${i.replace(/.*\//, '')}"`);
+
+createDebug.formatters.r = (r: string) => formatResourcePath(r);
+
+export const debug = createDebug;

packages/webpack-plugin-next/src/next.ts

@@ -0,0 +1,18 @@
+import path from 'path';
+import { AbstractVanillaExtractPlugin } from './plugin';
+import type { Compiler } from 'webpack';
+
+const virtualNextFileLoader = require.resolve(
+  path.join(
+    path.dirname(require.resolve('../../package.json')),
+    'virtualNextFileLoader',
+  ),
+);
+
+export class VanillaExtractPlugin extends AbstractVanillaExtractPlugin {
+  static loader = virtualNextFileLoader;
+
+  apply(compiler: Compiler) {
+    this.inject(compiler, 'virtualNextFileLoader');
+  }
+}