Fix interpolation ranges if there is a comment inside an interpolation.

Fixes #26
hudochenkov · Dec 29, 2023 · 75756b5 · 75756b5
1 parent de5b7f9
commit 75756b5
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 2 deletions.
diff --git a/lib/__tests__/__snapshots__/parseJs.test.js.snap b/lib/__tests__/__snapshots__/parseJs.test.js.snap
@@ -1220,6 +1220,46 @@ exports[`simple interpolations properties property value with two interpolations
 ]
 `;
 
+exports[`simple interpolations properties property value. interpolation with a comment after value 1`] = `
+[
+  {
+    "css": "color: \${red /* hello */}",
+    "interpolationRanges": [
+      {
+        "end": 52,
+        "start": 34,
+      },
+    ],
+    "locationStart": {
+      "column": 28,
+      "line": 1,
+    },
+    "rangeEnd": 52,
+    "rangeStart": 27,
+  },
+]
+`;
+
+exports[`simple interpolations properties property value. interpolation with a comment before value 1`] = `
+[
+  {
+    "css": "color: \${/* hello */ red}",
+    "interpolationRanges": [
+      {
+        "end": 52,
+        "start": 34,
+      },
+    ],
+    "locationStart": {
+      "column": 28,
+      "line": 1,
+    },
+    "rangeEnd": 52,
+    "rangeStart": 27,
+  },
+]
+`;
+
 exports[`simple interpolations selectors comment in selector with interpolation 1`] = `
 [
   {

diff --git a/lib/__tests__/parseJs.test.js b/lib/__tests__/parseJs.test.js
@@ -66,6 +66,18 @@ describe('simple interpolations', () => {
 			expect(document).toMatchSnapshot();
 		});
 
+		test('property value. interpolation with a comment after value', () => {
+			let document = parseJs('let Component = styled.div`color: ${red /* hello */}`;');
+
+			expect(document).toMatchSnapshot();
+		});
+
+		test('property value. interpolation with a comment before value', () => {
+			let document = parseJs('let Component = styled.div`color: ${/* hello */ red}`;');
+
+			expect(document).toMatchSnapshot();
+		});
+
 		test('property value with symbol right before interpolation', () => {
 			let document = parseJs('let Component = styled.div`margin: -${space}`;');
 

diff --git a/lib/parseJs.js b/lib/parseJs.js
@@ -70,9 +70,16 @@ function getNodeCssData(node, inputCode, sourceFile) {
 			let templateSpan = node.template.templateSpans[index];
 
 			// To include `${`
-			let start = templateSpan.expression.pos - 2;
+			let start = templateSpan.pos - 2;
 			// To include `}`
-			let end = templateSpan.expression.end + 1;
+			let end = templateSpan.literal.end - templateSpan.literal.text.length;
+
+			if (ts.isTemplateTail(templateSpan.literal)) {
+				end = end - 1;
+			} else {
+				// If it's a TemplateMiddle
+				end = end - 2;
+			}
 
 			interpolationRanges.push({ start, end });
 		}