@vanilla-extract/webpack-plugin - npm Package Compare versions

Comparing version 0.0.0-inline-prototype-202342012537 to 0.0.0-master-20240201234045

dist/vanilla-extract-webpack-plugin.cjs.d.ts

@@ -0,4 +1,32 @@
+import { Compiler, Compilation, RuleSetRule } from 'webpack';
 import { IdentifierOption } from '@vanilla-extract/integration';
-import { RuleSetRule, Compiler } from 'webpack';
 
+interface LoaderContext {
+    addDependency: (filePath: string) => void;
+    addContextDependency: (filePath: string) => void;
+    cacheable: (value: boolean) => void;
+    target: string;
+    resourcePath: string;
+    context: string;
+    rootContext: string;
+    async: () => (err: unknown, result?: string) => void;
+    hot: boolean;
+    loaders: any[];
+    emitError: (error: Error) => void;
+    _compiler: Compiler;
+    _compilation: Compilation;
+    mode: 'production' | 'development' | 'none';
+}
+
+type Externals = any;
+declare class ChildCompiler {
+    externals: Externals | undefined;
+    constructor(externals: Externals);
+    isChildCompiler(name: string | undefined): boolean;
+    getCompiledSource(loader: LoaderContext): Promise<{
+        source: string;
+        dependencies: string[];
+    }>;
+}
+
 interface PluginOptions {
@@ -8,8 +36,17 @@ test?: RuleSetRule['test'];
     outputCss?: boolean;
+    externals?: any;
+    /** @deprecated */
+    allowRuntime?: boolean;
 }
-declare class VanillaExtractPlugin {
+declare abstract class AbstractVanillaExtractPlugin {
     test: RuleSetRule['test'];
     outputCss: boolean;
+    allowRuntime: boolean;
+    childCompiler: ChildCompiler;
     identifiers?: IdentifierOption;
     constructor(options?: PluginOptions);
+    protected inject(compiler: Compiler, virtualLoader: 'virtualFileLoader' | 'virtualNextFileLoader'): void;
+}
+
+declare class VanillaExtractPlugin extends AbstractVanillaExtractPlugin {
     apply(compiler: Compiler): void;
@@ -16,0 +53,0 @@ }

dist/vanilla-extract-webpack-plugin.cjs.dev.js

@@ -5,85 +5,8 @@ 'use strict';
 
-var integration = require('@vanilla-extract/integration');
+var plugin = require('./plugin-5e2d9703.cjs.dev.js');
+require('@vanilla-extract/integration');
 
-const webpack4 = {
-  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 = {
-  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');
-  }
-};
-var createCompat = (isWebpack5 => {
-  if (isWebpack5) {
-    return webpack5;
-  }
-  return webpack4;
-});
-
-const pluginName = 'VanillaExtractPlugin';
-function markCSSFilesAsSideEffects(compiler, compat) {
-  compiler.hooks.normalModuleFactory.tap(pluginName, nmf => {
-    if (compat.isWebpack5) {
-      nmf.hooks.createModule.tap(pluginName,
-      // @ts-expect-error CreateData is typed as 'object'...
-      createData => {
-        if (createData.matchResource && createData.matchResource.endsWith('.vanilla.css')) {
-          createData.settings.sideEffects = true;
-        }
-      });
-    } else {
-      nmf.hooks.afterResolve.tap(pluginName,
-      // @ts-expect-error Can't be typesafe for webpack 4
-      result => {
-        if (result.matchResource && result.matchResource.endsWith('.vanilla.css')) {
-          result.settings.sideEffects = true;
-        }
-      });
-    }
-  });
-}
-const defaultIdentifierOption = (mode, identifiers) => identifiers ?? (mode === 'production' ? 'short' : 'debug');
-class VanillaExtractPlugin {
-  constructor(options = {}) {
-    const {
-      test = integration.cssFileFilter,
-      outputCss = true,
-      identifiers
-    } = options;
-    this.test = test;
-    this.outputCss = outputCss;
-    this.identifiers = identifiers;
-  }
+class VanillaExtractPlugin extends plugin.AbstractVanillaExtractPlugin {
   apply(compiler) {
-    var _compiler$options$mod;
-    const veCompiler = new integration.InlineCompiler({
-      root: compiler.context,
-      identifiers: defaultIdentifierOption(compiler.options.mode, this.identifiers)
-    });
-    compiler.hooks.shutdown.tapPromise('VanillaExtractPlugin', async () => {
-      await veCompiler.close();
-    });
-    const compat = createCompat(Boolean(compiler.webpack && compiler.webpack.version));
-    markCSSFilesAsSideEffects(compiler, compat);
-    (_compiler$options$mod = compiler.options.module) === null || _compiler$options$mod === void 0 ? void 0 : _compiler$options$mod.rules.splice(0, 0, {
-      test: /\.(ts|tsx)$/,
-      use: [{
-        loader: require.resolve('../loader'),
-        options: {
-          outputCss: this.outputCss,
-          veCompiler: veCompiler
-        }
-      }]
-    });
+    this.inject(compiler, 'virtualFileLoader');
   }
@@ -90,0 +13,0 @@ }

dist/vanilla-extract-webpack-plugin.cjs.prod.js

@@ -5,85 +5,8 @@ 'use strict';
 
-var integration = require('@vanilla-extract/integration');
+var plugin = require('./plugin-0b6512f4.cjs.prod.js');
+require('@vanilla-extract/integration');
 
-const webpack4 = {
-  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 = {
-  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');
-  }
-};
-var createCompat = (isWebpack5 => {
-  if (isWebpack5) {
-    return webpack5;
-  }
-  return webpack4;
-});
-
-const pluginName = 'VanillaExtractPlugin';
-function markCSSFilesAsSideEffects(compiler, compat) {
-  compiler.hooks.normalModuleFactory.tap(pluginName, nmf => {
-    if (compat.isWebpack5) {
-      nmf.hooks.createModule.tap(pluginName,
-      // @ts-expect-error CreateData is typed as 'object'...
-      createData => {
-        if (createData.matchResource && createData.matchResource.endsWith('.vanilla.css')) {
-          createData.settings.sideEffects = true;
-        }
-      });
-    } else {
-      nmf.hooks.afterResolve.tap(pluginName,
-      // @ts-expect-error Can't be typesafe for webpack 4
-      result => {
-        if (result.matchResource && result.matchResource.endsWith('.vanilla.css')) {
-          result.settings.sideEffects = true;
-        }
-      });
-    }
-  });
-}
-const defaultIdentifierOption = (mode, identifiers) => identifiers ?? (mode === 'production' ? 'short' : 'debug');
-class VanillaExtractPlugin {
-  constructor(options = {}) {
-    const {
-      test = integration.cssFileFilter,
-      outputCss = true,
-      identifiers
-    } = options;
-    this.test = test;
-    this.outputCss = outputCss;
-    this.identifiers = identifiers;
-  }
+class VanillaExtractPlugin extends plugin.AbstractVanillaExtractPlugin {
   apply(compiler) {
-    var _compiler$options$mod;
-    const veCompiler = new integration.InlineCompiler({
-      root: compiler.context,
-      identifiers: defaultIdentifierOption(compiler.options.mode, this.identifiers)
-    });
-    compiler.hooks.shutdown.tapPromise('VanillaExtractPlugin', async () => {
-      await veCompiler.close();
-    });
-    const compat = createCompat(Boolean(compiler.webpack && compiler.webpack.version));
-    markCSSFilesAsSideEffects(compiler, compat);
-    (_compiler$options$mod = compiler.options.module) === null || _compiler$options$mod === void 0 ? void 0 : _compiler$options$mod.rules.splice(0, 0, {
-      test: /\.(ts|tsx)$/,
-      use: [{
-        loader: require.resolve('../loader'),
-        options: {
-          outputCss: this.outputCss,
-          veCompiler: veCompiler
-        }
-      }]
-    });
+    this.inject(compiler, 'virtualFileLoader');
   }
@@ -90,0 +13,0 @@ }

dist/vanilla-extract-webpack-plugin.esm.js

@@ -1,84 +0,7 @@
-import { InlineCompiler, cssFileFilter } from '@vanilla-extract/integration';
+import { A as AbstractVanillaExtractPlugin } from './plugin-4525597e.esm.js';
+import '@vanilla-extract/integration';
 
-const webpack4 = {
-  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 = {
-  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');
-  }
-};
-var createCompat = (isWebpack5 => {
-  if (isWebpack5) {
-    return webpack5;
-  }
-  return webpack4;
-});
-
-const pluginName = 'VanillaExtractPlugin';
-function markCSSFilesAsSideEffects(compiler, compat) {
-  compiler.hooks.normalModuleFactory.tap(pluginName, nmf => {
-    if (compat.isWebpack5) {
-      nmf.hooks.createModule.tap(pluginName,
-      // @ts-expect-error CreateData is typed as 'object'...
-      createData => {
-        if (createData.matchResource && createData.matchResource.endsWith('.vanilla.css')) {
-          createData.settings.sideEffects = true;
-        }
-      });
-    } else {
-      nmf.hooks.afterResolve.tap(pluginName,
-      // @ts-expect-error Can't be typesafe for webpack 4
-      result => {
-        if (result.matchResource && result.matchResource.endsWith('.vanilla.css')) {
-          result.settings.sideEffects = true;
-        }
-      });
-    }
-  });
-}
-const defaultIdentifierOption = (mode, identifiers) => identifiers ?? (mode === 'production' ? 'short' : 'debug');
-class VanillaExtractPlugin {
-  constructor(options = {}) {
-    const {
-      test = cssFileFilter,
-      outputCss = true,
-      identifiers
-    } = options;
-    this.test = test;
-    this.outputCss = outputCss;
-    this.identifiers = identifiers;
-  }
+class VanillaExtractPlugin extends AbstractVanillaExtractPlugin {
   apply(compiler) {
-    var _compiler$options$mod;
-    const veCompiler = new InlineCompiler({
-      root: compiler.context,
-      identifiers: defaultIdentifierOption(compiler.options.mode, this.identifiers)
-    });
-    compiler.hooks.shutdown.tapPromise('VanillaExtractPlugin', async () => {
-      await veCompiler.close();
-    });
-    const compat = createCompat(Boolean(compiler.webpack && compiler.webpack.version));
-    markCSSFilesAsSideEffects(compiler, compat);
-    (_compiler$options$mod = compiler.options.module) === null || _compiler$options$mod === void 0 ? void 0 : _compiler$options$mod.rules.splice(0, 0, {
-      test: /\.(ts|tsx)$/,
-      use: [{
-        loader: require.resolve('../loader'),
-        options: {
-          outputCss: this.outputCss,
-          veCompiler: veCompiler
-        }
-      }]
-    });
+    this.inject(compiler, 'virtualFileLoader');
   }
@@ -85,0 +8,0 @@ }

loader/dist/vanilla-extract-webpack-plugin-loader.cjs.d.ts

@@ -20,4 +20,5 @@ import { Compiler, Compilation } from 'webpack';
 
-declare function pitch(this: LoaderContext): Promise<void>;
+declare function export_default(this: LoaderContext, source: string): void;
+declare function pitch(this: LoaderContext): void;
 
-export { pitch };
+export { export_default as default, pitch };

loader/dist/vanilla-extract-webpack-plugin-loader.cjs.dev.js

@@ -8,2 +8,4 @@ 'use strict';
 var integration = require('@vanilla-extract/integration');
+var createDebug = require('debug');
+var chalk = require('chalk');
 
@@ -14,34 +16,94 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 var loaderUtils__default = /*#__PURE__*/_interopDefault(loaderUtils);
+var createDebug__default = /*#__PURE__*/_interopDefault(createDebug);
+var chalk__default = /*#__PURE__*/_interopDefault(chalk);
 
-const virtualLoader = require.resolve(path__default["default"].join(path__default["default"].dirname(require.resolve('../../package.json')), 'virtualFileLoader'));
-async function pitch() {
+const formatResourcePath = i => chalk__default["default"].blue(`"${i.replace(/.*\//, '')}"`);
+createDebug__default["default"].formatters.r = r => formatResourcePath(r);
+const debug = createDebug__default["default"];
+
+const virtualFileLoader = require.resolve(path__default["default"].join(path__default["default"].dirname(require.resolve('../../package.json')), 'virtualFileLoader'));
+const virtualFileLoaderExtractionFile = path__default["default"].join(path__default["default"].dirname(require.resolve('../../package.json')), 'extracted.js');
+const virtualNextFileLoaderExtractionFile = path__default["default"].join(path__default["default"].dirname(require.resolve('../../package.json')), 'vanilla.virtual.css');
+const defaultIdentifierOption = (mode, identifiers) => identifiers ?? (mode === 'production' ? 'short' : 'debug');
+function loader (source) {
   const {
-    veCompiler,
-    outputCss
+    identifiers
   } = loaderUtils__default["default"].getOptions(this);
+  const {
+    name
+  } = integration.getPackageInfo(this.rootContext);
   const callback = this.async();
-  const result = await veCompiler.processVanillaFile(this.resourcePath, {
+  integration.transform({
+    source,
+    filePath: this.resourcePath,
+    rootPath: this.rootContext,
+    packageName: name,
+    identOption: defaultIdentifierOption(this.mode, identifiers)
+  }).then(code => {
+    callback(null, code);
+  }).catch(e => {
+    callback(e);
+  });
+}
+function pitch() {
+  const {
+    childCompiler,
     outputCss,
-    cssImportSpecifier: async (filePath, css, root) => {
-      const serializedCss = await integration.serializeCss(css);
-      const absFilePath = path__default["default"].join(root, filePath);
-      const virtualFileName = absFilePath + '.vanilla.css';
-      const virtualResourceLoader = `${virtualLoader}?${JSON.stringify({
-        source: serializedCss
-      })}`;
-      const request = loaderUtils__default["default"].stringifyRequest(this, `${virtualFileName}!=!${virtualResourceLoader}!${absFilePath}`);
-
-      // Webpack automatically wraps the request in quotes which VE does for us.
-      return request.slice(1, -1);
-    }
+    identifiers,
+    virtualLoader
+  } = loaderUtils__default["default"].getOptions(this);
+  const log = debug(`vanilla-extract:loader:${formatResourcePath(this.resourcePath)}`);
+  const compiler = this._compiler;
+  const isChildCompiler = childCompiler.isChildCompiler(compiler.name);
+  if (isChildCompiler) {
+    log('Skip vanilla-extract loader as we are already within a child compiler for %s', compiler.options.output.filename);
+    return;
+  }
+  log('Loading file');
+  const callback = this.async();
+  childCompiler.getCompiledSource(this).then(async ({
+    source
+  }) => {
+    const result = await integration.processVanillaFile({
+      source,
+      outputCss,
+      filePath: this.resourcePath,
+      identOption: defaultIdentifierOption(this.mode, identifiers),
+      serializeVirtualCssPath: async ({
+        fileName,
+        source
+      }) => {
+        const serializedCss = await integration.serializeCss(source);
+        if (virtualLoader === 'virtualFileLoader') {
+          const virtualResourceLoader = `${virtualFileLoader}?${JSON.stringify({
+            fileName,
+            source: serializedCss
+          })}`;
+          const request = loaderUtils__default["default"].stringifyRequest(this, `${fileName}!=!${virtualResourceLoader}!${virtualFileLoaderExtractionFile}`);
+          return `import ${request}`;
+        } else {
+          // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/style9-next-loader.ts#L64-L72
+          const request = loaderUtils__default["default"].stringifyRequest(this,
+          // Next.js RSC CSS extraction will discard any loaders in the request.
+          // So we need to pass virtual css information through resourceQuery.
+          // https://github.com/vercel/next.js/blob/3a9bfe60d228fc2fd8fe65b76d49a0d21df4ecc7/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L425-L429
+          // The compressed serialized CSS of vanilla-extract will add compressionFlag.
+          // Causing the resourceQuery to be abnormally split, so uri encoding is required.
+          // https://github.com/vanilla-extract-css/vanilla-extract/blob/58005eb5e7456cf2b3c04ea7aef29677db37cc3c/packages/integration/src/serialize.ts#L15
+          `${virtualNextFileLoaderExtractionFile}?${encodeURIComponent(JSON.stringify({
+            fileName,
+            source: serializedCss
+          }))}`);
+          return `import ${request}`;
+        }
+      }
+    });
+    log('Completed successfully');
+    callback(null, result);
+  }).catch(e => {
+    callback(e);
   });
-  if (!result) {
-    return callback(null);
-  }
-  for (const watchFile of result.watchFiles) {
-    this.addDependency(watchFile);
-  }
-  return callback(null, result.source);
 }
 
+exports["default"] = loader;
 exports.pitch = pitch;

loader/dist/vanilla-extract-webpack-plugin-loader.cjs.prod.js

@@ -8,2 +8,4 @@ 'use strict';
 var integration = require('@vanilla-extract/integration');
+var createDebug = require('debug');
+var chalk = require('chalk');
 
@@ -14,34 +16,94 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 var loaderUtils__default = /*#__PURE__*/_interopDefault(loaderUtils);
+var createDebug__default = /*#__PURE__*/_interopDefault(createDebug);
+var chalk__default = /*#__PURE__*/_interopDefault(chalk);
 
-const virtualLoader = require.resolve(path__default["default"].join(path__default["default"].dirname(require.resolve('../../package.json')), 'virtualFileLoader'));
-async function pitch() {
+const formatResourcePath = i => chalk__default["default"].blue(`"${i.replace(/.*\//, '')}"`);
+createDebug__default["default"].formatters.r = r => formatResourcePath(r);
+const debug = createDebug__default["default"];
+
+const virtualFileLoader = require.resolve(path__default["default"].join(path__default["default"].dirname(require.resolve('../../package.json')), 'virtualFileLoader'));
+const virtualFileLoaderExtractionFile = path__default["default"].join(path__default["default"].dirname(require.resolve('../../package.json')), 'extracted.js');
+const virtualNextFileLoaderExtractionFile = path__default["default"].join(path__default["default"].dirname(require.resolve('../../package.json')), 'vanilla.virtual.css');
+const defaultIdentifierOption = (mode, identifiers) => identifiers ?? (mode === 'production' ? 'short' : 'debug');
+function loader (source) {
   const {
-    veCompiler,
-    outputCss
+    identifiers
   } = loaderUtils__default["default"].getOptions(this);
+  const {
+    name
+  } = integration.getPackageInfo(this.rootContext);
   const callback = this.async();
-  const result = await veCompiler.processVanillaFile(this.resourcePath, {
+  integration.transform({
+    source,
+    filePath: this.resourcePath,
+    rootPath: this.rootContext,
+    packageName: name,
+    identOption: defaultIdentifierOption(this.mode, identifiers)
+  }).then(code => {
+    callback(null, code);
+  }).catch(e => {
+    callback(e);
+  });
+}
+function pitch() {
+  const {
+    childCompiler,
     outputCss,
-    cssImportSpecifier: async (filePath, css, root) => {
-      const serializedCss = await integration.serializeCss(css);
-      const absFilePath = path__default["default"].join(root, filePath);
-      const virtualFileName = absFilePath + '.vanilla.css';
-      const virtualResourceLoader = `${virtualLoader}?${JSON.stringify({
-        source: serializedCss
-      })}`;
-      const request = loaderUtils__default["default"].stringifyRequest(this, `${virtualFileName}!=!${virtualResourceLoader}!${absFilePath}`);
-
-      // Webpack automatically wraps the request in quotes which VE does for us.
-      return request.slice(1, -1);
-    }
+    identifiers,
+    virtualLoader
+  } = loaderUtils__default["default"].getOptions(this);
+  const log = debug(`vanilla-extract:loader:${formatResourcePath(this.resourcePath)}`);
+  const compiler = this._compiler;
+  const isChildCompiler = childCompiler.isChildCompiler(compiler.name);
+  if (isChildCompiler) {
+    log('Skip vanilla-extract loader as we are already within a child compiler for %s', compiler.options.output.filename);
+    return;
+  }
+  log('Loading file');
+  const callback = this.async();
+  childCompiler.getCompiledSource(this).then(async ({
+    source
+  }) => {
+    const result = await integration.processVanillaFile({
+      source,
+      outputCss,
+      filePath: this.resourcePath,
+      identOption: defaultIdentifierOption(this.mode, identifiers),
+      serializeVirtualCssPath: async ({
+        fileName,
+        source
+      }) => {
+        const serializedCss = await integration.serializeCss(source);
+        if (virtualLoader === 'virtualFileLoader') {
+          const virtualResourceLoader = `${virtualFileLoader}?${JSON.stringify({
+            fileName,
+            source: serializedCss
+          })}`;
+          const request = loaderUtils__default["default"].stringifyRequest(this, `${fileName}!=!${virtualResourceLoader}!${virtualFileLoaderExtractionFile}`);
+          return `import ${request}`;
+        } else {
+          // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/style9-next-loader.ts#L64-L72
+          const request = loaderUtils__default["default"].stringifyRequest(this,
+          // Next.js RSC CSS extraction will discard any loaders in the request.
+          // So we need to pass virtual css information through resourceQuery.
+          // https://github.com/vercel/next.js/blob/3a9bfe60d228fc2fd8fe65b76d49a0d21df4ecc7/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L425-L429
+          // The compressed serialized CSS of vanilla-extract will add compressionFlag.
+          // Causing the resourceQuery to be abnormally split, so uri encoding is required.
+          // https://github.com/vanilla-extract-css/vanilla-extract/blob/58005eb5e7456cf2b3c04ea7aef29677db37cc3c/packages/integration/src/serialize.ts#L15
+          `${virtualNextFileLoaderExtractionFile}?${encodeURIComponent(JSON.stringify({
+            fileName,
+            source: serializedCss
+          }))}`);
+          return `import ${request}`;
+        }
+      }
+    });
+    log('Completed successfully');
+    callback(null, result);
+  }).catch(e => {
+    callback(e);
   });
-  if (!result) {
-    return callback(null);
-  }
-  for (const watchFile of result.watchFiles) {
-    this.addDependency(watchFile);
-  }
-  return callback(null, result.source);
 }
 
+exports["default"] = loader;
 exports.pitch = pitch;

loader/dist/vanilla-extract-webpack-plugin-loader.esm.js

 import path from 'path';
 import loaderUtils from 'loader-utils';
-import { serializeCss } from '@vanilla-extract/integration';
+import { getPackageInfo, transform, processVanillaFile, serializeCss } from '@vanilla-extract/integration';
+import createDebug from 'debug';
+import chalk from 'chalk';
 
-const virtualLoader = require.resolve(path.join(path.dirname(require.resolve('../../package.json')), 'virtualFileLoader'));
-async function pitch() {
+const formatResourcePath = i => chalk.blue(`"${i.replace(/.*\//, '')}"`);
+createDebug.formatters.r = r => formatResourcePath(r);
+const debug = createDebug;
+
+const virtualFileLoader = require.resolve(path.join(path.dirname(require.resolve('../../package.json')), 'virtualFileLoader'));
+const virtualFileLoaderExtractionFile = path.join(path.dirname(require.resolve('../../package.json')), 'extracted.js');
+const virtualNextFileLoaderExtractionFile = path.join(path.dirname(require.resolve('../../package.json')), 'vanilla.virtual.css');
+const defaultIdentifierOption = (mode, identifiers) => identifiers ?? (mode === 'production' ? 'short' : 'debug');
+function loader (source) {
   const {
-    veCompiler,
-    outputCss
+    identifiers
   } = loaderUtils.getOptions(this);
+  const {
+    name
+  } = getPackageInfo(this.rootContext);
   const callback = this.async();
-  const result = await veCompiler.processVanillaFile(this.resourcePath, {
+  transform({
+    source,
+    filePath: this.resourcePath,
+    rootPath: this.rootContext,
+    packageName: name,
+    identOption: defaultIdentifierOption(this.mode, identifiers)
+  }).then(code => {
+    callback(null, code);
+  }).catch(e => {
+    callback(e);
+  });
+}
+function pitch() {
+  const {
+    childCompiler,
     outputCss,
-    cssImportSpecifier: async (filePath, css, root) => {
-      const serializedCss = await serializeCss(css);
-      const absFilePath = path.join(root, filePath);
-      const virtualFileName = absFilePath + '.vanilla.css';
-      const virtualResourceLoader = `${virtualLoader}?${JSON.stringify({
-        source: serializedCss
-      })}`;
-      const request = loaderUtils.stringifyRequest(this, `${virtualFileName}!=!${virtualResourceLoader}!${absFilePath}`);
-
-      // Webpack automatically wraps the request in quotes which VE does for us.
-      return request.slice(1, -1);
-    }
+    identifiers,
+    virtualLoader
+  } = loaderUtils.getOptions(this);
+  const log = debug(`vanilla-extract:loader:${formatResourcePath(this.resourcePath)}`);
+  const compiler = this._compiler;
+  const isChildCompiler = childCompiler.isChildCompiler(compiler.name);
+  if (isChildCompiler) {
+    log('Skip vanilla-extract loader as we are already within a child compiler for %s', compiler.options.output.filename);
+    return;
+  }
+  log('Loading file');
+  const callback = this.async();
+  childCompiler.getCompiledSource(this).then(async ({
+    source
+  }) => {
+    const result = await processVanillaFile({
+      source,
+      outputCss,
+      filePath: this.resourcePath,
+      identOption: defaultIdentifierOption(this.mode, identifiers),
+      serializeVirtualCssPath: async ({
+        fileName,
+        source
+      }) => {
+        const serializedCss = await serializeCss(source);
+        if (virtualLoader === 'virtualFileLoader') {
+          const virtualResourceLoader = `${virtualFileLoader}?${JSON.stringify({
+            fileName,
+            source: serializedCss
+          })}`;
+          const request = loaderUtils.stringifyRequest(this, `${fileName}!=!${virtualResourceLoader}!${virtualFileLoaderExtractionFile}`);
+          return `import ${request}`;
+        } else {
+          // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/style9-next-loader.ts#L64-L72
+          const request = loaderUtils.stringifyRequest(this,
+          // Next.js RSC CSS extraction will discard any loaders in the request.
+          // So we need to pass virtual css information through resourceQuery.
+          // https://github.com/vercel/next.js/blob/3a9bfe60d228fc2fd8fe65b76d49a0d21df4ecc7/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L425-L429
+          // The compressed serialized CSS of vanilla-extract will add compressionFlag.
+          // Causing the resourceQuery to be abnormally split, so uri encoding is required.
+          // https://github.com/vanilla-extract-css/vanilla-extract/blob/58005eb5e7456cf2b3c04ea7aef29677db37cc3c/packages/integration/src/serialize.ts#L15
+          `${virtualNextFileLoaderExtractionFile}?${encodeURIComponent(JSON.stringify({
+            fileName,
+            source: serializedCss
+          }))}`);
+          return `import ${request}`;
+        }
+      }
+    });
+    log('Completed successfully');
+    callback(null, result);
+  }).catch(e => {
+    callback(e);
   });
-  if (!result) {
-    return callback(null);
-  }
-  for (const watchFile of result.watchFiles) {
-    this.addDependency(watchFile);
-  }
-  return callback(null, result.source);
 }
 
-export { pitch };
+export { loader as default, pitch };

package.json

 {
   "name": "@vanilla-extract/webpack-plugin",
-  "version": "0.0.0-inline-prototype-202342012537",
+  "version": "0.0.0-master-20240201234045",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -20,2 +20,10 @@ "main": "dist/vanilla-extract-webpack-plugin.cjs.js",
       "default": "./virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js"
+    },
+    "./next": {
+      "module": "./next/dist/vanilla-extract-webpack-plugin-next.esm.js",
+      "default": "./next/dist/vanilla-extract-webpack-plugin-next.cjs.js"
+    },
+    "./virtualNextFileLoader": {
+      "module": "./virtualNextFileLoader/dist/vanilla-extract-webpack-plugin-virtualNextFileLoader.esm.js",
+      "default": "./virtualNextFileLoader/dist/vanilla-extract-webpack-plugin-virtualNextFileLoader.cjs.js"
     }
@@ -27,3 +35,5 @@ },
       "loader.ts",
-      "virtualFileLoader.ts"
+      "virtualFileLoader.ts",
+      "next.ts",
+      "virtualNextFileLoader.ts"
     ]
@@ -35,3 +45,6 @@ },
     "/virtualFileLoader",
-    "extracted.js"
+    "/next",
+    "/virtualNextFileLoader",
+    "extracted.js",
+    "vanilla.virtual.css"
   ],
@@ -49,3 +62,3 @@ "repository": {
   "dependencies": {
-    "@vanilla-extract/integration": "^0.0.0-inline-prototype-202342012537",
+    "@vanilla-extract/integration": "0.0.0-master-20240201234045",
     "chalk": "^4.1.1",
@@ -57,4 +70,4 @@ "debug": "^4.3.1",
     "@types/debug": "^4.1.5",
-    "webpack": "^5.36.1"
+    "webpack": "^5.90.0"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58109

increased by144.45%

Number of package files

42

increased by100%

Lines of code

1281

increased by177.87%

Worsened metrics

Number of low supply chain risk alerts

11

increased by83.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@vanilla-extract/integration@0.0.0-master-20240201234045(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedoutdent@0.8.0(transitive)

• - Removed@vanilla-extract/integration@0.0.0-webpack-vite-compiler-wip-20240609024920(transitive)

• Updated@vanilla-extract/integration@0.0.0-master-20240201234045