Merge pull request #70 from ony3000/fix-tagged-template

Prevents strings written to values of an object from being treated like strings written to properties of an object
ony3000 · Jul 21, 2024 · 86ba362 · 86ba362
2 parents 85f5a7a + a56305b
commit 86ba362
Show file tree

Hide file tree

Showing 67 changed files with 1,833 additions and 38 deletions.
diff --git a/src/packages/core-parts/finder.ts b/src/packages/core-parts/finder.ts
@@ -350,27 +350,45 @@ export function findTargetClassNameNodes(ast: any, options: ResolvedOptions): Cl
       case 'Property': {
         nonCommentNodes.push(currentASTNode);
 
-        classNameNodes.forEach((classNameNode, index, array) => {
-          const [classNameNodeRangeStart, classNameNodeRangeEnd] = classNameNode.range;
+        if (
+          isTypeof(
+            node,
+            z.object({
+              key: z.object({
+                range: z.custom<NodeRange>((value) =>
+                  isTypeof(value, z.tuple([z.number(), z.number()])),
+                ),
+              }),
+            }),
+          )
+        ) {
+          const [objectKeyRangeStart, objectKeyRangeEnd] = node.key.range;
 
-          if (
-            currentNodeRangeStart <= classNameNodeRangeStart &&
-            classNameNodeRangeEnd <= currentNodeRangeEnd
-          ) {
-            if (classNameNode.type === 'unknown') {
-              // eslint-disable-next-line no-param-reassign
-              array[index] = createExpressionNode({
-                delimiterType: classNameNode.delimiterType,
-                isItAnObjectProperty: true,
-                range: classNameNode.range,
-                startLineIndex: classNameNode.startLineIndex,
-              });
-            } else if (classNameNode.type === 'expression') {
-              // eslint-disable-next-line no-param-reassign
-              classNameNode.isItAnObjectProperty = true;
+          classNameNodes.forEach((classNameNode, index, array) => {
+            const [classNameNodeRangeStart, classNameNodeRangeEnd] = classNameNode.range;
+            const isItAnObjectProperty =
+              objectKeyRangeStart <= classNameNodeRangeStart &&
+              classNameNodeRangeEnd <= objectKeyRangeEnd;
+
+            if (
+              currentNodeRangeStart <= classNameNodeRangeStart &&
+              classNameNodeRangeEnd <= currentNodeRangeEnd
+            ) {
+              if (classNameNode.type === 'unknown') {
+                // eslint-disable-next-line no-param-reassign
+                array[index] = createExpressionNode({
+                  delimiterType: classNameNode.delimiterType,
+                  isItAnObjectProperty,
+                  range: classNameNode.range,
+                  startLineIndex: classNameNode.startLineIndex,
+                });
+              } else if (classNameNode.type === 'expression') {
+                // eslint-disable-next-line no-param-reassign
+                classNameNode.isItAnObjectProperty = isItAnObjectProperty;
+              }
             }
-          }
-        });
+          });
+        }
         break;
       }
       case 'ConditionalExpression': {
@@ -2056,27 +2074,44 @@ export function findTargetClassNameNodesForSvelte(
       case 'Property': {
         nonCommentNodes.push(currentASTNode);
 
-        classNameNodes.forEach((classNameNode, index, array) => {
-          const [classNameNodeRangeStart, classNameNodeRangeEnd] = classNameNode.range;
+        if (
+          isTypeof(
+            node,
+            z.object({
+              key: z.object({
+                start: z.number(),
+                end: z.number(),
+              }),
+            }),
+          )
+        ) {
+          const [objectKeyRangeStart, objectKeyRangeEnd] = [node.key.start, node.key.end];
 
-          if (
-            currentNodeRangeStart <= classNameNodeRangeStart &&
-            classNameNodeRangeEnd <= currentNodeRangeEnd
-          ) {
-            if (classNameNode.type === 'unknown') {
-              // eslint-disable-next-line no-param-reassign
-              array[index] = createExpressionNode({
-                delimiterType: classNameNode.delimiterType,
-                isItAnObjectProperty: true,
-                range: classNameNode.range,
-                startLineIndex: classNameNode.startLineIndex,
-              });
-            } else if (classNameNode.type === 'expression') {
-              // eslint-disable-next-line no-param-reassign
-              classNameNode.isItAnObjectProperty = true;
+          classNameNodes.forEach((classNameNode, index, array) => {
+            const [classNameNodeRangeStart, classNameNodeRangeEnd] = classNameNode.range;
+            const isItAnObjectProperty =
+              objectKeyRangeStart <= classNameNodeRangeStart &&
+              classNameNodeRangeEnd <= objectKeyRangeEnd;
+
+            if (
+              currentNodeRangeStart <= classNameNodeRangeStart &&
+              classNameNodeRangeEnd <= currentNodeRangeEnd
+            ) {
+              if (classNameNode.type === 'unknown') {
+                // eslint-disable-next-line no-param-reassign
+                array[index] = createExpressionNode({
+                  delimiterType: classNameNode.delimiterType,
+                  isItAnObjectProperty,
+                  range: classNameNode.range,
+                  startLineIndex: classNameNode.startLineIndex,
+                });
+              } else if (classNameNode.type === 'expression') {
+                // eslint-disable-next-line no-param-reassign
+                classNameNode.isItAnObjectProperty = isItAnObjectProperty;
+              }
             }
-          }
-        });
+          });
+        }
         break;
       }
       case 'ConditionalExpression': {

diff --git a/tests/v2-test/angular/tagged-template/absolute.test.ts b/tests/v2-test/angular/tagged-template/absolute.test.ts
@@ -132,6 +132,29 @@ const Bar = tw(Foo)\`lorem ipsum dolor sit amet consectetur adipiscing elit proi
 proin ex massa hendrerit eu posuere eu volutpat id neque
 pellentesque\`;
 </script>
+`,
+  },
+  {
+    name: 'syntax variants - written as an object value',
+    input: `
+<script setup lang="ts">
+const classes = {
+  short: tw\`lorem ipsum dolor sit amet\`,
+  near: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin\`,
+  long: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque\`,
+};
+</script>
+`,
+    output: `<script setup lang="ts">
+  const classes = {
+    short: tw\`lorem ipsum dolor sit amet\`,
+    near: tw\`lorem ipsum dolor sit amet consectetur
+adipiscing elit proin\`,
+    long: tw\`lorem ipsum dolor sit amet consectetur
+adipiscing elit proin ex massa hendrerit eu posuere eu
+volutpat id neque pellentesque\`,
+  };
+</script>
 `,
   },
 ];

diff --git a/tests/v2-test/angular/tagged-template/ideal.test.ts b/tests/v2-test/angular/tagged-template/ideal.test.ts
@@ -132,6 +132,29 @@ const Bar = tw(Foo)\`lorem ipsum dolor sit amet consectetur adipiscing elit proi
   proin ex massa hendrerit eu posuere eu volutpat id neque
   pellentesque\`;
 </script>
+`,
+  },
+  {
+    name: 'syntax variants - written as an object value',
+    input: `
+<script setup lang="ts">
+const classes = {
+  short: tw\`lorem ipsum dolor sit amet\`,
+  near: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin\`,
+  long: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque\`,
+};
+</script>
+`,
+    output: `<script setup lang="ts">
+  const classes = {
+    short: tw\`lorem ipsum dolor sit amet\`,
+    near: tw\`lorem ipsum dolor sit amet consectetur
+    adipiscing elit proin\`,
+    long: tw\`lorem ipsum dolor sit amet consectetur
+    adipiscing elit proin ex massa hendrerit eu posuere eu
+    volutpat id neque pellentesque\`,
+  };
+</script>
 `,
   },
 ];

diff --git a/tests/v2-test/angular/tagged-template/relative.test.ts b/tests/v2-test/angular/tagged-template/relative.test.ts
@@ -129,6 +129,28 @@ const Bar = tw(Foo)\`lorem ipsum dolor sit amet consectetur adipiscing elit proi
   ex massa hendrerit eu posuere eu volutpat id neque
   pellentesque\`;
 </script>
+`,
+  },
+  {
+    name: 'syntax variants - written as an object value',
+    input: `
+<script setup lang="ts">
+const classes = {
+  short: tw\`lorem ipsum dolor sit amet\`,
+  near: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin\`,
+  long: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque\`,
+};
+</script>
+`,
+    output: `<script setup lang="ts">
+  const classes = {
+    short: tw\`lorem ipsum dolor sit amet\`,
+    near: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin\`,
+    long: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin
+    ex massa hendrerit eu posuere eu volutpat id neque
+    pellentesque\`,
+  };
+</script>
 `,
   },
 ];

diff --git a/tests/v2-test/astro/others/absolute.test.ts b/tests/v2-test/astro/others/absolute.test.ts
@@ -214,6 +214,39 @@ elit proin ex massa hendrerit eu posuere\`,
       customFunctions: ['clsx'],
     },
   },
+  {
+    name: 'template literal - written as an object value',
+    input: `
+<div>
+  <div>
+    <div class={classNames({
+      short: \`lorem ipsum dolor sit amet\`,
+      near: \`lorem ipsum dolor sit amet consectetur adipiscing elit proin\`,
+      long: \`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque\`,
+    })}>
+      <slot />
+    </div>
+  </div>
+</div>
+`,
+    output: `<div>
+  <div>
+    <div
+      class={classNames({
+        short: "lorem ipsum dolor sit amet",
+        near: \`lorem ipsum dolor sit amet consectetur
+adipiscing elit proin\`,
+        long: \`lorem ipsum dolor sit amet consectetur
+adipiscing elit proin ex massa hendrerit eu posuere eu
+volutpat id neque pellentesque\`,
+      })}
+    >
+      <slot />
+    </div>
+  </div>
+</div>
+`,
+  },
 ];
 
 testEach(fixtures, options);
diff --git a/tests/v2-test/astro/others/ideal.test.ts b/tests/v2-test/astro/others/ideal.test.ts
@@ -217,6 +217,39 @@ const fixtures: Fixture[] = [
       customFunctions: ['clsx'],
     },
   },
+  {
+    name: 'template literal - written as an object value',
+    input: `
+<div>
+  <div>
+    <div class={classNames({
+      short: \`lorem ipsum dolor sit amet\`,
+      near: \`lorem ipsum dolor sit amet consectetur adipiscing elit proin\`,
+      long: \`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque\`,
+    })}>
+      <slot />
+    </div>
+  </div>
+</div>
+`,
+    output: `<div>
+  <div>
+    <div
+      class={classNames({
+        short: "lorem ipsum dolor sit amet",
+        near: \`lorem ipsum dolor sit amet consectetur
+        adipiscing elit proin\`,
+        long: \`lorem ipsum dolor sit amet consectetur
+        adipiscing elit proin ex massa hendrerit eu posuere
+        eu volutpat id neque pellentesque\`,
+      })}
+    >
+      <slot />
+    </div>
+  </div>
+</div>
+`,
+  },
 ];
 
 testEach(fixtures, options);
diff --git a/tests/v2-test/astro/others/relative.test.ts b/tests/v2-test/astro/others/relative.test.ts
@@ -213,6 +213,38 @@ const fixtures: Fixture[] = [
       customFunctions: ['clsx'],
     },
   },
+  {
+    name: 'template literal - written as an object value',
+    input: `
+<div>
+  <div>
+    <div class={classNames({
+      short: \`lorem ipsum dolor sit amet\`,
+      near: \`lorem ipsum dolor sit amet consectetur adipiscing elit proin\`,
+      long: \`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque\`,
+    })}>
+      <slot />
+    </div>
+  </div>
+</div>
+`,
+    output: `<div>
+  <div>
+    <div
+      class={classNames({
+        short: "lorem ipsum dolor sit amet",
+        near: "lorem ipsum dolor sit amet consectetur adipiscing elit proin",
+        long: \`lorem ipsum dolor sit amet consectetur adipiscing elit proin
+        ex massa hendrerit eu posuere eu volutpat id neque
+        pellentesque\`,
+      })}
+    >
+      <slot />
+    </div>
+  </div>
+</div>
+`,
+  },
 ];
 
 testEach(fixtures, options);
diff --git a/tests/v2-test/astro/tagged-template/absolute.test.ts b/tests/v2-test/astro/tagged-template/absolute.test.ts
@@ -132,6 +132,29 @@ const Bar = tw(
 proin ex massa hendrerit eu posuere eu volutpat id neque
 pellentesque\`;
 ---
+`,
+  },
+  {
+    name: 'syntax variants - written as an object value',
+    input: `
+---
+const classes = {
+  short: tw\`lorem ipsum dolor sit amet\`,
+  near: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin\`,
+  long: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque\`,
+};
+---
+`,
+    output: `---
+const classes = {
+  short: tw\`lorem ipsum dolor sit amet\`,
+  near: tw\`lorem ipsum dolor sit amet consectetur adipiscing
+elit proin\`,
+  long: tw\`lorem ipsum dolor sit amet consectetur adipiscing
+elit proin ex massa hendrerit eu posuere eu volutpat id
+neque pellentesque\`,
+};
+---
 `,
   },
 ];

diff --git a/tests/v2-test/astro/tagged-template/ideal.test.ts b/tests/v2-test/astro/tagged-template/ideal.test.ts
@@ -132,6 +132,29 @@ const Bar = tw(
 proin ex massa hendrerit eu posuere eu volutpat id neque
 pellentesque\`;
 ---
+`,
+  },
+  {
+    name: 'syntax variants - written as an object value',
+    input: `
+---
+const classes = {
+  short: tw\`lorem ipsum dolor sit amet\`,
+  near: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin\`,
+  long: tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque\`,
+};
+---
+`,
+    output: `---
+const classes = {
+  short: tw\`lorem ipsum dolor sit amet\`,
+  near: tw\`lorem ipsum dolor sit amet consectetur adipiscing
+  elit proin\`,
+  long: tw\`lorem ipsum dolor sit amet consectetur adipiscing
+  elit proin ex massa hendrerit eu posuere eu volutpat id
+  neque pellentesque\`,
+};
+---
 `,
   },
 ];