feat: support satisfies operator in TypeScript

lib/rules/classnames-order.js

@@ -164,6 +164,9 @@ module.exports = {
             suffix = astUtil.getTemplateElementSuffix(txt, originalClassNamesValue);
             originalClassNamesValue = astUtil.getTemplateElementBody(txt, prefix, suffix);
             break;
+          case 'TSSatisfiesExpression':
+            sortNodeArgumentValue(node, arg.expression);
+            break;
         }
       }
 

lib/rules/enforces-negative-arbitrary-values.js

@@ -126,6 +126,9 @@ module.exports = {
               return;
             }
             break;
+          case 'TSSatisfiesExpression':
+            parseForNegativeArbitraryClassNames(node, arg.expression);
+            return;
         }
       }
 

lib/rules/enforces-shorthand.js

@@ -233,6 +233,9 @@ module.exports = {
             suffix = astUtil.getTemplateElementSuffix(txt, originalClassNamesValue);
             originalClassNamesValue = astUtil.getTemplateElementBody(txt, prefix, suffix);
             break;
+          case 'TSSatisfiesExpression':
+            parseForShorthandCandidates(node, arg.expression);
+            return;
         }
       }
 

lib/rules/migration-from-tailwind-2.js

@@ -153,6 +153,9 @@ module.exports = {
             suffix = astUtil.getTemplateElementSuffix(txt, originalClassNamesValue);
             originalClassNamesValue = astUtil.getTemplateElementBody(txt, prefix, suffix);
             break;
+          case 'TSSatisfiesExpression':
+            parseForObsoleteClassNames(node, arg.expression);
+            return;
         }
       }
 

lib/rules/no-arbitrary-value.js

@@ -126,6 +126,9 @@ module.exports = {
               return;
             }
             break;
+          case 'TSSatisfiesExpression':
+            parseForArbitraryValues(node, arg.expression);
+            return;
         }
       }
 

lib/rules/no-unnecessary-arbitrary-value.js

@@ -165,6 +165,9 @@ module.exports = {
               }
             }
             break;
+          case 'TSSatisfiesExpression':
+            parseForArbitraryValues(node, arg.expression);
+            return;
         }
       }
 

lib/util/ast.js

@@ -331,6 +331,9 @@ function parseNodeRecursive(rootNode, childNode, cb, skipConditional = false, is
       case 'TemplateElement':
         originalClassNamesValue = childNode.value.raw;
         break;
+      case 'TSSatisfiesExpression':
+        parseNodeRecursive(rootNode, childNode.expression, cb, skipConditional, isolate, ignoredKeys);
+        return;
     }
     ({ classNames } = extractClassnamesFromValue(originalClassNamesValue));
     classNames = removeDuplicatesFromArray(classNames);

package.json

@@ -45,7 +45,7 @@
     "mocha": "^10.2.0",
     "semver": "^7.6.0",
     "tailwindcss": "^3.4.0",
-    "typescript": "4.3.5",
+    "typescript": "4.9.5",
     "vue-eslint-parser": "^9.4.2"
   },
   "packageManager": "npm@10.2.5+sha256.8002e3e7305d2abd4016e1368af48d49b066c269079eeb10a56e7d6598acfdaa",

tests/lib/rules/classnames-order.js

@@ -327,6 +327,42 @@ ruleTester.run("classnames-order", rule, {
       parser: require.resolve("@typescript-eslint/parser"),
       errors: errors,
     },
+    {
+      code: `
+      export interface FakePropsInterface {
+        readonly name?: string;
+      }
+      function Fake({
+        name = 'yolo'
+      }: FakeProps) {
+        return (
+          <>
+            <h1 className={"absolute bottom-0 w-full flex flex-col" satisfies string}>Welcome {name}</h1>
+            <p>Bye {name}</p>
+          </>
+        );
+      }
+      export default Fake;
+      `,
+      output: `
+      export interface FakePropsInterface {
+        readonly name?: string;
+      }
+      function Fake({
+        name = 'yolo'
+      }: FakeProps) {
+        return (
+          <>
+            <h1 className={"absolute bottom-0 flex w-full flex-col" satisfies string}>Welcome {name}</h1>
+            <p>Bye {name}</p>
+          </>
+        );
+      }
+      export default Fake;
+      `,
+      parser: require.resolve("@typescript-eslint/parser"),
+      errors: errors,
+    },
     {
       code: `<div class="sm:w-6 container w-12">Classnames will be ordered</div>`,
       output: `<div class="container w-12 sm:w-6">Classnames will be ordered</div>`,

tests/lib/rules/enforces-negative-arbitrary-values.js

@@ -96,6 +96,13 @@ ruleTester.run("enforces-negative-arbitrary-values", rule, {
         "-inset-[1px] -inset-y-[1px] -inset-x-[1px] -top-[1px] -right-[1px] -bottom-[1px] -left-[1px] -top-[1px] -z-[2] -order-[2] -m-[1px] -my-[1px] -mx-[1px] -mt-[1px] -mr-[1px] -mb-[1px] -ml-[1px] -mt-[1px] -space-y-[1px] -space-x-[1px] -tracking-[1px] -indent-[1px] -hue-rotate-[50%] -backdrop-hue-rotate-[50%] -scale-[50%] -scale-y-[50%] -scale-x-[50%] -rotate-[45deg] -translate-x-[1px] -translate-y-[1px] -skew-x-[45deg] -skew-y-[45deg] -scroll-m-[1px] -scroll-my-[1px] -scroll-mx-[1px] -scroll-mt-[1px] -scroll-mr-[1px] -scroll-mb-[1px] -scroll-ml-[1px] -scroll-mt-[1px]"
       ),
     },
+    {
+      code: `<div class={"-inset-[1px] -inset-y-[1px] -inset-x-[1px] -top-[1px] -right-[1px] -bottom-[1px] -left-[1px] -top-[1px] -z-[2] -order-[2] -m-[1px] -my-[1px] -mx-[1px] -mt-[1px] -mr-[1px] -mb-[1px] -ml-[1px] -mt-[1px] -space-y-[1px] -space-x-[1px] -tracking-[1px] -indent-[1px] -hue-rotate-[50%] -backdrop-hue-rotate-[50%] -scale-[50%] -scale-y-[50%] -scale-x-[50%] -rotate-[45deg] -translate-x-[1px] -translate-y-[1px] -skew-x-[45deg] -skew-y-[45deg] -scroll-m-[1px] -scroll-my-[1px] -scroll-mx-[1px] -scroll-mt-[1px] -scroll-mr-[1px] -scroll-mb-[1px] -scroll-ml-[1px] -scroll-mt-[1px]" satisfies string}>all</div>`,
+      parser: require.resolve("@typescript-eslint/parser"),
+      errors: generateErrors(
+        "-inset-[1px] -inset-y-[1px] -inset-x-[1px] -top-[1px] -right-[1px] -bottom-[1px] -left-[1px] -top-[1px] -z-[2] -order-[2] -m-[1px] -my-[1px] -mx-[1px] -mt-[1px] -mr-[1px] -mb-[1px] -ml-[1px] -mt-[1px] -space-y-[1px] -space-x-[1px] -tracking-[1px] -indent-[1px] -hue-rotate-[50%] -backdrop-hue-rotate-[50%] -scale-[50%] -scale-y-[50%] -scale-x-[50%] -rotate-[45deg] -translate-x-[1px] -translate-y-[1px] -skew-x-[45deg] -skew-y-[45deg] -scroll-m-[1px] -scroll-my-[1px] -scroll-mx-[1px] -scroll-mt-[1px] -scroll-mr-[1px] -scroll-mb-[1px] -scroll-ml-[1px] -scroll-mt-[1px]"
+      ),
+    },
     {
       code: `
       <template>

tests/lib/rules/enforces-shorthand.js

@@ -598,6 +598,20 @@ ruleTester.run("shorthands", rule, {
       ],
       errors: [generateError(["border-l-0", "border-r-0"], "border-x-0")],
     },
+    {
+      code: `
+      <div class={"mt-0 mr-0 mb-0 ml-1" satisfies string}>
+        Possible shorthand for margin
+      </div>
+      `,
+      output: `
+      <div class={"my-0 mr-0 ml-1" satisfies string}>
+        Possible shorthand for margin
+      </div>
+      `,
+      parser: require.resolve("@typescript-eslint/parser"),
+      errors: [generateError(["mt-0", "mb-0"], "my-0")],
+    },
     {
       code: `
       <template>

tests/lib/rules/migration-from-tailwind-2.js

@@ -286,6 +286,19 @@ ruleTester.run("migration-from-tailwind-2", rule, {
         },
       ],
     },
+    {
+      code: `<div class={"transform scale-50" satisfies string}>Automatic transform</div>`,
+      output: `<div class={"scale-50" satisfies string}>Automatic transform</div>`,
+      parser: require.resolve("@typescript-eslint/parser"),
+      errors: [
+        {
+          messageId: "classnameNotNeeded",
+          data: {
+            classnames: "transform",
+          },
+        },
+      ],
+    },
     {
       code: `
       <template>

tests/lib/rules/no-arbitrary-value.js

@@ -135,6 +135,11 @@ ruleTester.run("no-arbitrary-value", rule, {
       options: skipClassAttributeOptions,
       errors: generateErrors("w-[10px]"),
     },
+    {
+      code: `<div class={"w-[10px]" satisfies string}>Arbitrary width!</div>`,
+      parser: require.resolve("@typescript-eslint/parser"),
+      errors: generateErrors("w-[10px]"),
+    },
     {
       code: `
       <script>

tests/lib/rules/no-contradicting-classname.js

@@ -342,6 +342,29 @@ ruleTester.run("no-contradicting-classname", rule, {
       parser: require.resolve("@typescript-eslint/parser"),
       errors: generateErrors("w-1 w-2"),
     },
+    {
+      code: `
+      export interface FakePropsInterface {
+        readonly name?: string;
+      }
+
+      function Fake({
+        name = 'yolo'
+      }: FakeProps) {
+
+        return (
+          <>
+            <h1 className={"container w-1 w-2" satisfies string}>Welcome {name}</h1>
+            <p>Bye {name}</p>
+          </>
+        );
+      }
+
+      export default Fake;
+      `,
+      parser: require.resolve("@typescript-eslint/parser"),
+      errors: generateErrors("w-1 w-2"),
+    },
     {
       code: '<div class="container w-1 w-2"></div>',
       errors: generateErrors("w-1 w-2"),

tests/lib/rules/no-custom-classname.js

@@ -1147,6 +1147,26 @@ ruleTester.run("no-custom-classname", rule, {
       parser: require.resolve("@typescript-eslint/parser"),
       errors: generateErrors("my-custom"),
     },
+    {
+      code: `
+      export interface FakePropsInterface {
+        readonly name?: string;
+      }
+      function Fake({
+        name = 'yolo'
+      }: FakeProps) {
+        return (
+          <>
+            <h1 className={"w-12 my-custom" satisfies string}>Welcome {name}</h1>
+            <p>Bye {name}</p>
+          </>
+        );
+      }
+      export default Fake;
+      `,
+      parser: require.resolve("@typescript-eslint/parser"),
+      errors: generateErrors("my-custom"),
+    },
     {
       code: `<div class="w-12 my-custom">my-custom is not defined in Tailwind CSS!</div>`,
       errors: generateErrors("my-custom"),

tests/lib/rules/no-unnecessary-arbitrary-value.js

@@ -268,5 +268,16 @@ ruleTester.run("arbitrary-values", rule, {
       options: config,
       errors: generateErrors(["border-[1px]", "rounded-[0.25rem]"], [["border"], ["rounded"]]),
     },
+    {
+      code: `
+      <pre class={"-z-[-10]" satisfies string}>z-10</pre>
+      `,
+      output: `
+      <pre class={"z-10" satisfies string}>z-10</pre>
+      `,
+      options: config,
+      parser: require.resolve("@typescript-eslint/parser"),
+      errors: generateErrors(["-z-[-10]"], [["z-10"]]),
+    },
   ],
 });