webpack/next: Fix webpack template strings by using a modified regex from the webpack source (#1333)

Author: askoufis

.changeset/eleven-seals-invent.md

@@ -0,0 +1,11 @@
+---
+'@vanilla-extract/webpack-plugin': patch
+'@vanilla-extract/next-plugin': patch
+---
+
+Use a more accurate regex for detecting [webpack template strings] in paths
+
+We now use a modified version of the regex from the webpack source code to detect template strings in paths.
+As long as the path isn't already escaped, we should detect it.
+
+[webpack template strings]: https://webpack.js.org/configuration/output/#template-strings

fixtures/template-string-paths/src/[blog-id]/index.css.ts

@@ -0,0 +1,3 @@
+import { style } from '@vanilla-extract/css';
+
+export const withHyphen = style({ color: 'indigo' });

fixtures/template-string-paths/src/index.ts

@@ -3,6 +3,7 @@ import { singleSquareBracketsId } from './[id]/index.css';
 import { doubleSquareBracketId } from './[[id]]/index.css';
 import { catchAllSegment } from './[...slug]/index.css';
 import { optionalCatchAllSegment } from './[[...slug]]/index.css';
+import { withHyphen } from './[blog-id]/index.css';
 
 // Fixture for testing escaping of webpack template strings and Next.js dyanmic routes
 // https://webpack.js.org/configuration/output/#template-strings
@@ -14,6 +15,7 @@ function render() {
     <div class="${doubleSquareBracketId}">[[id]] path</div>
     <div class="${catchAllSegment}">[...slug] path</div>
     <div class="${optionalCatchAllSegment}">[[...slug]] path</div>
+    <div class="${withHyphen}">[blog-id] path</div>
   `;
 }
 

packages/webpack-plugin/src/compiler.ts

@@ -55,7 +55,10 @@ function getRootCompilation(loader: LoaderContext) {
   return compilation;
 }
 
-const templateStringRegexp = /\[([^\[\]\.]+)\]/g;
+// Modified version of webpack's regex for detecting template strings.
+// We only want to match un-escaped strings so we can escape them ourselves.
+// https://github.com/webpack/webpack/blob/87660921808566ef3b8796f8df61bd79fc026108/lib/TemplatedPathPlugin.js#L19
+const templateStringRegexp = /\[([\w:]+)\]/g;
 
 export const escapeWebpackTemplateString = (s: string) =>
   s.replaceAll(templateStringRegexp, '[\\$1\\]');

tests/e2e/snapshots/template-string-paths-Desktop---Chromium-darwin.png

@@ -13,3 +13,6 @@
 .\[\[\.\.\.slug\]\]_optionalCatchAllSegment__1kvknas0 {
   color: orchid;
 }
+.\[blog-id\]_withHyphen__1e83mlh0 {
+  color: indigo;
+}

tests/e2e/snapshots/template-string-paths-Mobile---Chromium-darwin.png

@@ -13,3 +13,6 @@
 ._1kvknas0 {
   color: orchid;
 }
+._1e83mlh0 {
+  color: indigo;
+}