Fix style compilation for file paths containing webpack template strings

.changeset/eleven-oranges-collect.md

@@ -0,0 +1,7 @@
+---
+'@vanilla-extract/webpack-plugin': patch
+---
+
+Fixes a bug that was causing style compilation to fail on paths containing [webpack template strings] such as `[id]`.
+
+[webpack template strings]: https://webpack.js.org/configuration/output/#template-strings

package.json

@@ -64,6 +64,7 @@
     }
   },
   "volta": {
-    "node": "20.9.0"
+    "node": "20.9.0",
+    "pnpm": "8.10.2"
   }
 }

packages/webpack-plugin/src/compiler.ts

@@ -65,7 +65,11 @@ function compileVanillaSource(
     );
     const compat = createCompat(isWebpack5);
     // Child compiler will compile vanilla-extract files to be evaled during compilation
-    const outputOptions = { filename: loader.resourcePath };
+    const outputOptions = {
+      filename: loader.resourcePath
+        .replaceAll('[', '[\\')
+        .replaceAll(']', '\\]'),
+    };
 
     const compilerName = getCompilerName(loader.resourcePath);
     const childCompiler = getRootCompilation(loader).createChildCompiler(

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
     "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
-    "lib": ["es2019", "es2017", "dom"],
+    "lib": ["es2021", "dom"],
     "noEmit": true,
     "noImplicitAny": true,
     "noUnusedLocals": true,