Skip to content

Commit 2c4dc74

Browse files
authored
fix: escape backslash when processing component's css (#11425)
The `.w-\[100px\]` selector is a valid CSS class. However, when processed by the tools package, it is incorrectly saved as `.w-[100px]`, making it an invalid selector. With this PR, when a backslash is encountered during processing inside a CSS file, it is properly escaped before being saved to the new file. Fixes: #11413
1 parent 4d50eb7 commit 2c4dc74

File tree

1 file changed

+2
-1
lines changed

1 file changed

+2
-1
lines changed

packages/tools/lib/css-processors/css-processor-components.mjs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ let customPlugin = {
2222
build.onEnd(result => {
2323
result.outputFiles.forEach(async f => {
2424
// scoping
25-
const newText = scopeVariables(f.text, packageJSON);
25+
let newText = scopeVariables(f.text, packageJSON);
26+
newText = newText.replaceAll(/\\/g, "\\\\"); // Escape backslashes as they might appear in css rules
2627
await mkdir(path.dirname(f.path), {recursive: true});
2728
writeFile(f.path, newText);
2829

0 commit comments

Comments
 (0)