webpack-plugin: Fix extracted file resolution when deeply nested (#195)

Author: mattcompiles

.changeset/quiet-cycles-reply.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/webpack-plugin': patch
+---
+
+Fix issue when @vanilla-extract/webpack-plugin is nested within a separate node_modules folder

packages/webpack-plugin/src/loader.ts

@@ -1,3 +1,4 @@
+import path from 'path';
 // @ts-expect-error
 import loaderUtils from 'loader-utils';
 import { processVanillaFile } from '@vanilla-extract/integration';
@@ -6,6 +7,15 @@ import type { LoaderContext } from './types';
 import { debug, formatResourcePath } from './logger';
 import { ChildCompiler } from './compiler';
 
+const emptyCssExtractionFile = require.resolve(
+  path.join(
+    path.dirname(
+      require.resolve('@vanilla-extract/webpack-plugin/package.json'),
+    ),
+    'extracted',
+  ),
+);
+
 interface LoaderOptions {
   outputCss: boolean;
 }
@@ -59,7 +69,7 @@ export function pitch(this: LoaderContext) {
 
           const request = loaderUtils.stringifyRequest(
             this,
-            `${fileName}!=!${virtualResourceLoader}!@vanilla-extract/webpack-plugin/extracted`,
+            `${fileName}!=!${virtualResourceLoader}!${emptyCssExtractionFile}`,
           );
 
           return `import ${request}`;