webpack-plugin: Skip child compile when within the child compiler (#181)

Author: mattcompiles

.changeset/selfish-radios-invent.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/webpack-plugin': patch
+---
+
+Fix issue where CSS can be duplicated in some scenarios

packages/webpack-plugin/src/compiler.ts

@@ -36,17 +36,13 @@ export class ChildCompiler {
     );
   }
 
-  async getCompiledSource(loader: LoaderContext, request: string) {
+  async getCompiledSource(loader: LoaderContext) {
     const cacheId = loader.resourcePath;
     let compilationPromise = this.cache.get(cacheId);
 
     if (!compilationPromise) {
       log('No cached compilation. Compiling: %s', cacheId);
-      compilationPromise = compileVanillaSource(
-        loader,
-        request,
-        this.externals,
-      );
+      compilationPromise = compileVanillaSource(loader, this.externals);
 
       this.cache.set(cacheId, compilationPromise);
     } else {
@@ -86,7 +82,6 @@ function getRootCompilation(loader: LoaderContext) {
 
 function compileVanillaSource(
   loader: LoaderContext,
-  request: string,
   externals: Externals | undefined,
 ): Promise<CompilationResult> {
   return new Promise((resolve, reject) => {
@@ -127,15 +122,15 @@ function compileVanillaSource(
           library: {
             type: 'commonjs2',
           },
-          import: [`!!${request}`],
+          import: [loader.resourcePath],
         },
       });
     } else {
       // Webpack 4 code. Remove once support is removed
       const { LibraryTemplatePlugin, SingleEntryPlugin } = require('webpack');
 
       new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler);
-      new SingleEntryPlugin(loader.context, `!!${request}`).apply(
+      new SingleEntryPlugin(loader.context, loader.resourcePath).apply(
         childCompiler,
       );
     }

packages/webpack-plugin/src/loader.ts

@@ -19,7 +19,7 @@ export default function (this: LoaderContext, source: string) {
   return source;
 }
 
-export async function pitch(this: LoaderContext, remainingRequest: string) {
+export function pitch(this: LoaderContext) {
   this.cacheable(true);
   const { childCompiler, outputCss } = loaderUtils.getOptions(
     this,
@@ -33,49 +33,44 @@ export async function pitch(this: LoaderContext, remainingRequest: string) {
 
   const isChildCompiler = childCompiler.isChildCompiler(compiler.name);
 
-  if (
-    isChildCompiler &&
-    compiler.options.output.filename === this.resourcePath
-  ) {
+  if (isChildCompiler) {
     log(
-      'Skip vanilla-extract loader as we are already within a child compiler for this file',
+      'Skip vanilla-extract loader as we are already within a child compiler for %s',
+      compiler.options.output.filename,
     );
     return;
   }
 
-  const callback = this.async();
+  log('Loading file');
 
-  try {
-    const { source } = await childCompiler.getCompiledSource(
-      this,
-      remainingRequest,
-    );
+  const callback = this.async();
 
-    if (isChildCompiler) {
-      // If within a vanilla-extract child compiler then only compile source, don't eval and assign CSS
-      return callback(null, source);
-    }
-
-    const result = processVanillaFile({
-      source,
-      outputCss,
-      filePath: this.resourcePath,
-      serializeVirtualCssPath: ({ fileName, base64Source }) => {
-        const virtualResourceLoader = `${require.resolve(
-          'virtual-resource-loader',
-        )}?${JSON.stringify({ source: base64Source })}`;
-
-        const request = loaderUtils.stringifyRequest(
-          this,
-          `${fileName}!=!${virtualResourceLoader}!@vanilla-extract/webpack-plugin/extracted`,
-        );
-
-        return `import ${request}`;
-      },
+  childCompiler
+    .getCompiledSource(this)
+    .then(({ source }) => {
+      const result = processVanillaFile({
+        source,
+        outputCss,
+        filePath: this.resourcePath,
+        serializeVirtualCssPath: ({ fileName, base64Source }) => {
+          const virtualResourceLoader = `${require.resolve(
+            'virtual-resource-loader',
+          )}?${JSON.stringify({ source: base64Source })}`;
+
+          const request = loaderUtils.stringifyRequest(
+            this,
+            `${fileName}!=!${virtualResourceLoader}!@vanilla-extract/webpack-plugin/extracted`,
+          );
+
+          return `import ${request}`;
+        },
+      });
+
+      log('Completed successfully');
+
+      callback(null, result);
+    })
+    .catch((e) => {
+      callback(e);
     });
-
-    callback(null, result);
-  } catch (e) {
-    callback(e);
-  }
 }