Fix parsing for CSS with escaped characters

hudochenkov · Jan 4, 2024 · f2da88a · f2da88a
1 parent a1b7420
commit f2da88a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/lib/__tests__/__snapshots__/parseJs.test.js.snap b/lib/__tests__/__snapshots__/parseJs.test.js.snap
@@ -599,6 +599,21 @@ exports[`no interpolations empty component 1`] = `
 
 exports[`no interpolations empty file 1`] = `[]`;
 
+exports[`no interpolations escaped characters in the code 1`] = `
+[
+  {
+    "css": "content: "\\u200B";",
+    "interpolationRanges": [],
+    "locationStart": {
+      "column": 28,
+      "line": 1,
+    },
+    "rangeEnd": 45,
+    "rangeStart": 27,
+  },
+]
+`;
+
 exports[`no interpolations no components in a file 1`] = `[]`;
 
 exports[`no interpolations one component 1`] = `

diff --git a/lib/__tests__/parseJs.test.js b/lib/__tests__/parseJs.test.js
@@ -56,6 +56,12 @@ describe('no interpolations', () => {
 
 		expect(document).toMatchSnapshot();
 	});
+
+	test('escaped characters in the code', () => {
+		let document = parseJs('let Component = styled.div`content: "\\u200B";`;');
+
+		expect(document).toMatchSnapshot();
+	});
 });
 
 describe('simple interpolations', () => {

diff --git a/lib/parseJs.js b/lib/parseJs.js
@@ -87,23 +87,18 @@ function getNodeCssData(node, inputCode, sourceFile) {
 		}
 	}
 
-	// exclude backticks
-	let rangeStart = node.template.pos + 1;
+	let text;
 
 	// Template literal without interpolation
 	if (ts.isNoSubstitutionTemplateLiteral(node.template)) {
-		rangeStart =
-			node.template.text.length > 0
-				? inputCode.indexOf(node.template.text, rangeStart)
-				: rangeStart;
+		text = node.template.rawText || '';
 	} else {
 		// If it's a TemplateExpression
-		rangeStart =
-			node.template.head.text.length > 0
-				? inputCode.indexOf(node.template.head.text, rangeStart)
-				: rangeStart;
+		text = node.template.head.rawText || '';
 	}
 
+	// exclude backticks
+	let rangeStart = inputCode.indexOf(text, node.template.pos + 1);
 	let rangeEnd = node.template.end - 1;
 
 	let { line, character } = ts.getLineAndCharacterOfPosition(sourceFile, node.template.pos);