Merge pull request #56 from ony3000/support-tagged-template

Support tagged template
ony3000 · Apr 28, 2024 · 53ca8b5 · 53ca8b5
2 parents 7551641 + 4c424e8
commit 53ca8b5
Show file tree

Hide file tree

Showing 9 changed files with 539 additions and 0 deletions.
diff --git a/src/packages/core-parts/finder.ts b/src/packages/core-parts/finder.ts
@@ -430,6 +430,65 @@ export function findTargetClassNameNodes(
         }
         break;
       }
+      case 'TaggedTemplateExpression': {
+        nonCommentNodes.push(currentASTNode);
+
+        if (
+          (isTypeof(
+            node,
+            z.object({
+              tag: z.object({
+                type: z.literal('Identifier'),
+                name: z.string(),
+              }),
+            }),
+          ) &&
+            supportedFunctions.includes(node.tag.name)) ||
+          (isTypeof(
+            node,
+            z.object({
+              tag: z.object({
+                type: z.literal('MemberExpression'),
+                object: z.object({
+                  type: z.literal('Identifier'),
+                  name: z.string(),
+                }),
+              }),
+            }),
+          ) &&
+            supportedFunctions.includes(node.tag.object.name)) ||
+          (isTypeof(
+            node,
+            z.object({
+              tag: z.object({
+                type: z.literal('CallExpression'),
+                callee: z.object({
+                  type: z.literal('Identifier'),
+                  name: z.string(),
+                }),
+              }),
+            }),
+          ) &&
+            supportedFunctions.includes(node.tag.callee.name))
+        ) {
+          keywordStartingNodes.push(currentASTNode);
+
+          classNameNodes.forEach((classNameNode) => {
+            const [classNameRangeStart, classNameRangeEnd] = classNameNode.range;
+
+            if (
+              currentNodeRangeStart <= classNameRangeStart &&
+              classNameRangeEnd <= currentNodeRangeEnd
+            ) {
+              if (classNameNode.type === ClassNameType.UTL) {
+                // eslint-disable-next-line no-param-reassign
+                classNameNode.type = ClassNameType.TLPQ;
+              }
+            }
+          });
+        }
+        break;
+      }
       case 'Block':
       case 'Line': {
         if (

diff --git a/tests/v2-test/astro/variable-declaration.test.ts b/tests/v2-test/astro/variable-declaration.test.ts
@@ -125,6 +125,74 @@ const combination = classNames(
       endingPosition: 'absolute-with-indent',
     },
   },
+  {
+    name: 'tagged template (1)',
+    input: `
+---
+const classes = tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+---
+`,
+    output: `---
+const classes = tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit
+eu posuere\`;
+---
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'relative',
+    },
+  },
+  {
+    name: 'tagged template (2)',
+    input: `
+---
+const Bar = tw.foo\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+---
+`,
+    output: `---
+const Bar = tw.foo\`lorem ipsum dolor sit amet consectetur adipiscing elit proin
+ex massa hendrerit eu posuere\`;
+---
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'absolute',
+    },
+  },
+  {
+    name: 'tagged template (3)',
+    input: `
+---
+const Bar = tw(Foo)\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+---
+`,
+    output: `---
+const Bar = tw(
+  Foo,
+)\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa
+hendrerit eu posuere\`;
+---
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'absolute-with-indent',
+    },
+  },
+  {
+    name: 'tagged template (4) - short enough class name',
+    input: `
+---
+const classes = tw\`lorem ipsum dolor sit amet\`;
+---
+`,
+    output: `---
+const classes = tw\`lorem ipsum dolor sit amet\`;
+---
+`,
+    options: {
+      customFunctions: ['tw'],
+    },
+  },
 ];
 
 describe('astro/variable-declaration', () => {

diff --git a/tests/v2-test/babel/variable-declaration.test.ts b/tests/v2-test/babel/variable-declaration.test.ts
@@ -105,6 +105,58 @@ const { data } = useSWR(
     output: `const { data } = useSWR(\`\${process.env.NEXT_PUBLIC_API_URL}/cart/\${cartId}\`);
 `,
   },
+  {
+    name: 'tagged template (1)',
+    input: `
+const classes = tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+`,
+    output: `const classes = tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit
+eu posuere\`;
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'relative',
+    },
+  },
+  {
+    name: 'tagged template (2)',
+    input: `
+const Bar = tw.foo\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+`,
+    output: `const Bar = tw.foo\`lorem ipsum dolor sit amet consectetur adipiscing elit proin
+ex massa hendrerit eu posuere\`;
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'absolute',
+    },
+  },
+  {
+    name: 'tagged template (3)',
+    input: `
+const Bar = tw(Foo)\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+`,
+    output: `const Bar = tw(
+  Foo,
+)\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa
+hendrerit eu posuere\`;
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'absolute-with-indent',
+    },
+  },
+  {
+    name: 'tagged template (4) - short enough class name',
+    input: `
+const classes = tw\`lorem ipsum dolor sit amet\`;
+`,
+    output: `const classes = tw\`lorem ipsum dolor sit amet\`;
+`,
+    options: {
+      customFunctions: ['tw'],
+    },
+  },
 ];
 
 describe('babel/variable-declaration', () => {

diff --git a/tests/v2-test/typescript/variable-declaration.test.ts b/tests/v2-test/typescript/variable-declaration.test.ts
@@ -107,6 +107,58 @@ const { data } = useSWR<CartResponse>(
 );
 `,
   },
+  {
+    name: 'tagged template (1)',
+    input: `
+const classes = tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+`,
+    output: `const classes = tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit
+eu posuere\`;
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'relative',
+    },
+  },
+  {
+    name: 'tagged template (2)',
+    input: `
+const Bar = tw.foo\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+`,
+    output: `const Bar = tw.foo\`lorem ipsum dolor sit amet consectetur adipiscing elit proin
+ex massa hendrerit eu posuere\`;
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'absolute',
+    },
+  },
+  {
+    name: 'tagged template (3)',
+    input: `
+const Bar = tw(Foo)\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+`,
+    output: `const Bar = tw(
+  Foo,
+)\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa
+hendrerit eu posuere\`;
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'absolute-with-indent',
+    },
+  },
+  {
+    name: 'tagged template (4) - short enough class name',
+    input: `
+const classes = tw\`lorem ipsum dolor sit amet\`;
+`,
+    output: `const classes = tw\`lorem ipsum dolor sit amet\`;
+`,
+    options: {
+      customFunctions: ['tw'],
+    },
+  },
 ];
 
 describe('typescript/variable-declaration', () => {

diff --git a/tests/v2-test/vue/variable-declaration.test.ts b/tests/v2-test/vue/variable-declaration.test.ts
@@ -69,6 +69,74 @@ const combination = classNames(
 </template>
 `,
   },
+  {
+    name: 'tagged template (1)',
+    input: `
+<script setup lang="ts">
+const classes = tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+</script>
+`,
+    output: `<script setup lang="ts">
+const classes = tw\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit
+eu posuere\`;
+</script>
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'relative',
+    },
+  },
+  {
+    name: 'tagged template (2)',
+    input: `
+<script setup lang="ts">
+const Bar = tw.foo\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+</script>
+`,
+    output: `<script setup lang="ts">
+const Bar = tw.foo\`lorem ipsum dolor sit amet consectetur adipiscing elit proin
+ex massa hendrerit eu posuere\`;
+</script>
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'absolute',
+    },
+  },
+  {
+    name: 'tagged template (3)',
+    input: `
+<script setup lang="ts">
+const Bar = tw(Foo)\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere\`;
+</script>
+`,
+    output: `<script setup lang="ts">
+const Bar = tw(
+  Foo,
+)\`lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa
+hendrerit eu posuere\`;
+</script>
+`,
+    options: {
+      customFunctions: ['tw'],
+      endingPosition: 'absolute-with-indent',
+    },
+  },
+  {
+    name: 'tagged template (4) - short enough class name',
+    input: `
+<script setup lang="ts">
+const classes = tw\`lorem ipsum dolor sit amet\`;
+</script>
+`,
+    output: `<script setup lang="ts">
+const classes = tw\`lorem ipsum dolor sit amet\`;
+</script>
+`,
+    options: {
+      customFunctions: ['tw'],
+    },
+  },
 ];
 
 describe('vue/variable-declaration', () => {