diff --git a/.changeset/eleven-seals-invent.md b/.changeset/eleven-seals-invent.md
new file mode 100644
index 000000000..f2498e641
--- /dev/null
+++ b/.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
diff --git a/fixtures/template-string-paths/src/[blog-id]/index.css.ts b/fixtures/template-string-paths/src/[blog-id]/index.css.ts
new file mode 100644
index 000000000..c0a970f1e
--- /dev/null
+++ b/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' });
diff --git a/fixtures/template-string-paths/src/index.ts b/fixtures/template-string-paths/src/index.ts
index c70358ac9..9ec82b6a0 100644
--- a/fixtures/template-string-paths/src/index.ts
+++ b/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() {
[[id]] path
[...slug] path
[[...slug]] path
+ [blog-id] path
`;
}
diff --git a/packages/webpack-plugin/src/compiler.ts b/packages/webpack-plugin/src/compiler.ts
index 59be9c44c..8749e07f9 100644
--- a/packages/webpack-plugin/src/compiler.ts
+++ b/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\\]');
diff --git a/tests/e2e/snapshots/template-string-paths-Desktop---Chromium-darwin.png b/tests/e2e/snapshots/template-string-paths-Desktop---Chromium-darwin.png
index bb37654b7..6def0bf2e 100644
Binary files a/tests/e2e/snapshots/template-string-paths-Desktop---Chromium-darwin.png and b/tests/e2e/snapshots/template-string-paths-Desktop---Chromium-darwin.png differ
diff --git a/tests/e2e/snapshots/template-string-paths-Mobile---Chromium-darwin.png b/tests/e2e/snapshots/template-string-paths-Mobile---Chromium-darwin.png
index d0dc710b6..db213374c 100644
Binary files a/tests/e2e/snapshots/template-string-paths-Mobile---Chromium-darwin.png and b/tests/e2e/snapshots/template-string-paths-Mobile---Chromium-darwin.png differ
diff --git a/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--development.css b/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--development.css
index ea948545d..8b3a66cbb 100644
--- a/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--development.css
+++ b/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--development.css
@@ -13,3 +13,6 @@
.\[\[\.\.\.slug\]\]_optionalCatchAllSegment__1kvknas0 {
color: orchid;
}
+.\[blog-id\]_withHyphen__1e83mlh0 {
+ color: indigo;
+}
diff --git a/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--production.css b/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--production.css
index 8327813bf..250d7d8d1 100644
--- a/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--production.css
+++ b/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--production.css
@@ -13,3 +13,6 @@
._1kvknas0 {
color: orchid;
}
+._1e83mlh0 {
+ color: indigo;
+}