fix: support tag.div and tag(Component) (#302)

francoismassart · May 23, 2024 · 5a5db1b · 5a5db1b
1 parent e95872d
commit 5a5db1b
Show file tree

Hide file tree

Showing 17 changed files with 256 additions and 196 deletions.
diff --git a/lib/rules/classnames-order.js b/lib/rules/classnames-order.js
@@ -235,7 +235,7 @@ module.exports = {
       TextAttribute: attributeVisitor,
       CallExpression: callExpressionVisitor,
       TaggedTemplateExpression: function (node) {
-        if (!tags.includes(node.tag.name)) {
+        if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
           return;
         }
 

diff --git a/lib/rules/enforces-negative-arbitrary-values.js b/lib/rules/enforces-negative-arbitrary-values.js
@@ -179,7 +179,7 @@ module.exports = {
       TextAttribute: attributeVisitor,
       CallExpression: callExpressionVisitor,
       TaggedTemplateExpression: function (node) {
-        if (!tags.includes(node.tag.name)) {
+        if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
           return;
         }
         parseForNegativeArbitraryClassNames(node, node.quasi);

diff --git a/lib/rules/enforces-shorthand.js b/lib/rules/enforces-shorthand.js
@@ -362,9 +362,8 @@ module.exports = {
                 } else if (hasY || hasX) {
                   const xOrY = hasX ? 'x' : 'y';
                   const xOrYType = getBodyByShorthand(targetGroups, classname.parentType, xOrY);
-                  const patchedName = `${cls.variants}${important}${minus}${mergedConfig.prefix}${xOrYType}${
-                    absoluteVal.length ? '-' + absoluteVal : ''
-                  }`;
+                  const patchedName = `${cls.variants}${important}${minus}${mergedConfig.prefix}${xOrYType}${absoluteVal.length ? '-' + absoluteVal : ''
+                    }`;
                   const toBeReplaced = sameVariantAndValue
                     .filter((c) => {
                       const candidates = hasX ? ['l', 'r'] : ['t', 'b'];
@@ -501,7 +500,7 @@ module.exports = {
       TextAttribute: attributeVisitor,
       CallExpression: callExpressionVisitor,
       TaggedTemplateExpression: function (node) {
-        if (!tags.includes(node.tag.name)) {
+        if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
           return;
         }
 

diff --git a/lib/rules/migration-from-tailwind-2.js b/lib/rules/migration-from-tailwind-2.js
@@ -290,7 +290,7 @@ module.exports = {
       TextAttribute: attributeVisitor,
       CallExpression: callExpressionVisitor,
       TaggedTemplateExpression: function (node) {
-        if (!tags.includes(node.tag.name)) {
+        if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
           return;
         }
         parseForObsoleteClassNames(node, node.quasi);

diff --git a/lib/rules/no-arbitrary-value.js b/lib/rules/no-arbitrary-value.js
@@ -179,7 +179,7 @@ module.exports = {
       TextAttribute: attributeVisitor,
       CallExpression: callExpressionVisitor,
       TaggedTemplateExpression: function (node) {
-        if (!tags.includes(node.tag.name)) {
+        if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
           return;
         }
         parseForArbitraryValues(node, node.quasi);

diff --git a/lib/rules/no-contradicting-classname.js b/lib/rules/no-contradicting-classname.js
@@ -203,7 +203,7 @@ module.exports = {
       TextAttribute: attributeVisitor,
       CallExpression: callExpressionVisitor,
       TaggedTemplateExpression: function (node) {
-        if (!tags.includes(node.tag.name)) {
+        if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
           return;
         }
 

diff --git a/lib/rules/no-custom-classname.js b/lib/rules/no-custom-classname.js
@@ -182,7 +182,7 @@ module.exports = {
       TextAttribute: attributeVisitor,
       CallExpression: callExpressionVisitor,
       TaggedTemplateExpression: function (node) {
-        if (!tags.includes(node.tag.name)) {
+        if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
           return;
         }
         astUtil.parseNodeRecursive(node, node.quasi, parseForCustomClassNames, false, false, ignoredKeys);

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
   },
   "packageManager": "npm@10.2.5+sha256.8002e3e7305d2abd4016e1368af48d49b066c269079eeb10a56e7d6598acfdaa",
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.0.0"
   },
   "license": "MIT"
 }
diff --git a/tests/lib/rules/arbitrary-values.js b/tests/lib/rules/arbitrary-values.js
@@ -677,5 +677,14 @@ ruleTester.run("arbitrary-values", rule, {
       options: config,
       errors: generateErrors("stroke-[angle:var(--some)]"),
     },
+    ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({
+      code: `${tag}\`stroke-[var(--some)] stroke-['yolo'] stroke-[angle:var(--some)]\``,
+      errors: generateErrors("stroke-[angle:var(--some)]"),
+      options: [
+        {
+          tags: ["myTag"],
+        },
+      ],
+    }))),
   ],
 });
diff --git a/tests/lib/rules/classnames-order.js b/tests/lib/rules/classnames-order.js
@@ -187,8 +187,8 @@ ruleTester.run("classnames-order", rule, {
         },
       },
     },
-    {
-      code: `myTag\`
+    ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({
+      code: `${tag}\`
         container
         flex
         w-12
@@ -200,7 +200,7 @@ ruleTester.run("classnames-order", rule, {
           tags: ["myTag"],
         },
       ],
-    },
+    }))),
     {
       code: `<div class="z-dialog flex w-12">Number values</div>`,
       settings: {
@@ -699,86 +699,88 @@ ruleTester.run("classnames-order", rule, {
       `,
       errors: generateErrors(2),
     },
-    {
-      code: `
-      myTag\`
-        invalid
-        sm:w-6
-        container
-        w-12
-        flex
-        lg:w-4
-      \`;`,
-      output: `
-      myTag\`
-        invalid
-        container
-        flex
-        w-12
-        sm:w-6
-        lg:w-4
-      \`;`,
-      options: [
-        {
-          tags: ["myTag"],
-        },
-      ],
-      errors: errors,
-    },
-    {
-      code: `
-      const buttonClasses = myTag\`
-        \${fullWidth ? "w-12" : "w-6"}
-        container
-        \${fullWidth ? "sm:w-8" : "sm:w-4"}
-        lg:w-9
-        flex
-        \${hasError && "bg-red"}
-      \`;`,
-      output: `
-      const buttonClasses = myTag\`
-        \${fullWidth ? "w-12" : "w-6"}
-        container
-        \${fullWidth ? "sm:w-8" : "sm:w-4"}
-        flex
-        lg:w-9
-        \${hasError && "bg-red"}
-      \`;`,
-      options: [
-        {
-          tags: ["myTag"],
-        },
-      ],
-      errors: errors,
-    },
-    {
-      code: `
-      const buttonClasses = myTag\`
-        \${fullWidth ? "w-12" : "w-6"}
-        flex
-        container
-        \${fullWidth ? "sm:w-7" : "sm:w-4"}
-        lg:py-4
-        sm:py-6
-        \${hasError && "bg-red"}
-      \`;`,
-      output: `
-      const buttonClasses = myTag\`
-        \${fullWidth ? "w-12" : "w-6"}
-        container
-        flex
-        \${fullWidth ? "sm:w-7" : "sm:w-4"}
-        sm:py-6
-        lg:py-4
-        \${hasError && "bg-red"}
-      \`;`,
-      options: [
-        {
-          tags: ["myTag"],
-        },
-      ],
-      errors: generateErrors(2),
-    },
+    ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].flatMap(tag => ([
+      {
+        code: `
+        ${tag}\`
+          invalid
+          sm:w-6
+          container
+          w-12
+          flex
+          lg:w-4
+        \`;`,
+        output: `
+        ${tag}\`
+          invalid
+          container
+          flex
+          w-12
+          sm:w-6
+          lg:w-4
+        \`;`,
+        options: [
+          {
+            tags: ["myTag"],
+          },
+        ],
+        errors: errors,
+      },
+      {
+        code: `
+        const buttonClasses = ${tag}\`
+          \${fullWidth ? "w-12" : "w-6"}
+          container
+          \${fullWidth ? "sm:w-8" : "sm:w-4"}
+          lg:w-9
+          flex
+          \${hasError && "bg-red"}
+        \`;`,
+        output: `
+        const buttonClasses = ${tag}\`
+          \${fullWidth ? "w-12" : "w-6"}
+          container
+          \${fullWidth ? "sm:w-8" : "sm:w-4"}
+          flex
+          lg:w-9
+          \${hasError && "bg-red"}
+        \`;`,
+        options: [
+          {
+            tags: ["myTag"],
+          },
+        ],
+        errors: errors,
+      },
+      {
+        code: `
+        const buttonClasses = ${tag}\`
+          \${fullWidth ? "w-12" : "w-6"}
+          flex
+          container
+          \${fullWidth ? "sm:w-7" : "sm:w-4"}
+          lg:py-4
+          sm:py-6
+          \${hasError && "bg-red"}
+        \`;`,
+        output: `
+        const buttonClasses = ${tag}\`
+          \${fullWidth ? "w-12" : "w-6"}
+          container
+          flex
+          \${fullWidth ? "sm:w-7" : "sm:w-4"}
+          sm:py-6
+          lg:py-4
+          \${hasError && "bg-red"}
+        \`;`,
+        options: [
+          {
+            tags: ["myTag"],
+          },
+        ],
+        errors: generateErrors(2),
+      },
+    ]))),
     {
       code: `
       classnames([

diff --git a/tests/lib/rules/enforces-negative-arbitrary-values.js b/tests/lib/rules/enforces-negative-arbitrary-values.js
@@ -140,5 +140,14 @@ ruleTester.run("enforces-negative-arbitrary-values", rule, {
       code: `<div class="group/edit:-inset-[1px] group/edit:top-[-1px]">support named group/peer syntax</div>`,
       errors: generateErrors("group/edit:-inset-[1px]"),
     },
+    ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({
+      code: `${tag}\`-my-[1px] -mx-[1px]\``,
+      errors: generateErrors("-my-[1px] -mx-[1px]"),
+      options: [
+        {
+          tags: ["myTag"],
+        },
+      ],
+    }))),
   ],
 });
diff --git a/tests/lib/rules/enforces-shorthand.js b/tests/lib/rules/enforces-shorthand.js
@@ -800,5 +800,15 @@ ruleTester.run("shorthands", rule, {
       errors: [generateError(["h-custom", "w-custom"], "size-custom")],
       options: customSpacingOnlyOptions,
     },
+    ...["myTag", "myTag.subTag", "myTag(SomeComponent)"].map((tag) => ({
+      code: `${tag}\`overflow-hidden text-ellipsis whitespace-nowrap text-white text-xl\``,
+      output: `${tag}\`truncate text-white text-xl\``,
+      errors: [generateError(["overflow-hidden", "text-ellipsis", "whitespace-nowrap"], "truncate")],
+      options: [
+        {
+          tags: ["myTag"],
+        },
+      ],
+    })),
   ],
 });
diff --git a/tests/lib/rules/migration-from-tailwind-2.js b/tests/lib/rules/migration-from-tailwind-2.js
@@ -382,5 +382,23 @@ ruleTester.run("migration-from-tailwind-2", rule, {
       filename: "test.vue",
       parser: require.resolve("vue-eslint-parser"),
     },
+    ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({
+      code: `${tag}\`flex-grow-0\``,
+      output: `${tag}\`grow-0\``,
+      errors: [
+        {
+          messageId: "classnameChanged",
+          data: {
+            deprecated: "flex-grow-0",
+            updated: "grow-0",
+          },
+        },
+      ],
+      options: [
+        {
+          tags: ["myTag"],
+        },
+      ],
+    }))),
   ],
 });
diff --git a/tests/lib/rules/no-arbitrary-value.js b/tests/lib/rules/no-arbitrary-value.js
@@ -160,5 +160,14 @@ ruleTester.run("no-arbitrary-value", rule, {
       code: `<div className={'min-h-[75dvh]'}>Dynamic viewport units</div>`,
       errors: generateErrors(["min-h-[75dvh]"]),
     },
+    ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({
+      code: `${tag}\`w-[100px]\``,
+      errors: generateErrors("w-[100px]"),
+      options: [
+        {
+          tags: ["myTag"],
+        },
+      ],
+    }))),
   ],
 });