Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Mar 8, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .changeset/eleven-seals-invent.md
Original file line number Diff line number Diff line change
@@ -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
3 changes: 3 additions & 0 deletions fixtures/template-string-paths/src/[blog-id]/index.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { style } from '@vanilla-extract/css';

export const withHyphen = style({ color: 'indigo' });
2 changes: 2 additions & 0 deletions fixtures/template-string-paths/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
`;
}

Expand Down
5 changes: 4 additions & 1 deletion packages/webpack-plugin/src/compiler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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\\]');
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,6 @@
.\[\[\.\.\.slug\]\]_optionalCatchAllSegment__1kvknas0 {
color: orchid;
}
.\[blog-id\]_withHyphen__1e83mlh0 {
color: indigo;
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,6 @@
._1kvknas0 {
color: orchid;
}
._1e83mlh0 {
color: indigo;
}