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

packages/webpack-plugin/src/compiler.ts

@@ -64,9 +64,16 @@ function compileVanillaSource(
       loader._compiler.webpack && loader._compiler.webpack.version,
     );
     const compat = createCompat(isWebpack5);
-    // Child compiler will compile vanilla-extract files to be evaled during compilation
-    const outputOptions = { filename: loader.resourcePath };
 
+    // Escape webpack template strings in output files so they don't get replaced
+    // Non-standard escape syntax, see the docs https://webpack.js.org/configuration/output/#template-strings
+    const outputOptions = {
+      filename: loader.resourcePath
+        .replaceAll('[', '[\\')
+        .replaceAll(']', '\\]'),
+    };
+
+    // Child compiler will compile vanilla-extract files to be evaled during compilation
     const compilerName = getCompilerName(loader.resourcePath);
     const childCompiler = getRootCompilation(loader).createChildCompiler(
       compilerName,

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,