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; +}