fix: support for JSXExpressionContainer containing Literal

Author: francoismassart

lib/rules/classnames-order.js

@@ -220,9 +220,10 @@ module.exports = {
       let suffix = '';
       let trim = false;
       if (arg === null) {
-        originalClassNamesValue = node.value.value;
-        start = node.value.range[0] + 1;
-        end = node.value.range[1] - 1;
+        originalClassNamesValue = astUtil.extractValueFromNode(node);
+        const range = astUtil.extractRangeFromNode(node);
+        start = range[0] + 1;
+        end = range[1] - 1;
       } else {
         switch (arg.type) {
           case 'TemplateLiteral':

lib/util/ast.js

@@ -47,9 +47,15 @@ function isVueLiteralAttributeValue(node) {
  * @returns {Boolean}
  */
 function isLiteralAttributeValue(node) {
-  if (node.value && node.value.type === 'Literal') {
-    // No support for dynamic or conditional...
-    return !/\{|\?|\}/.test(node.value.value);
+  if (node.value) {
+    switch (node.value.type) {
+      case 'Literal':
+        // No support for dynamic or conditional...
+        return !/\{|\?|\}/.test(node.value.value);
+      case 'JSXExpressionContainer':
+        // className={"..."}
+        return node.value.expression.type === 'Literal';
+    }
   }
   return false;
 }
@@ -90,6 +96,24 @@ function isValidVueAttribute(node) {
   return true;
 }
 
+function extractRangeFromNode(node) {
+  switch (node.value.type) {
+    case 'JSXExpressionContainer':
+      return node.value.expression.range;
+    default:
+      return node.value.range;
+  }
+}
+
+function extractValueFromNode(node) {
+  switch (node.value.type) {
+    case 'JSXExpressionContainer':
+      return node.value.expression.value;
+    default:
+      return node.value.value;
+  }
+}
+
 /**
  * Inspect and parse an abstract syntax node and run a callback function
  *
@@ -104,7 +128,7 @@ function parseNodeRecursive(node, arg, cb, skipConditional = false, isolate = fa
   let originalClassNamesValue;
   let classNames;
   if (arg === null) {
-    originalClassNamesValue = node.value.value;
+    originalClassNamesValue = extractValueFromNode(node);
     classNames = attrUtil.getClassNamesFromAttribute(originalClassNamesValue, true);
     classNames = removeDuplicatesFromArray(classNames);
     if (classNames.length === 0) {
@@ -172,6 +196,8 @@ function getTemplateElementSuffix(text, raw) {
 }
 
 module.exports = {
+  extractRangeFromNode,
+  extractValueFromNode,
   isValidJSXAttribute,
   isValidVueAttribute,
   parseNodeRecursive,

package-lock.json

@@ -32,8 +32,10 @@
     "@tailwindcss/aspect-ratio": "^0.2.0",
     "@tailwindcss/line-clamp": "^0.2.0",
     "@tailwindcss/typography": "^0.4.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.1.0",
     "mocha": "^7.2.0",
+    "typescript": "4.3.5",
     "vue-eslint-parser": "^7.6.0"
   },
   "engines": {

package.json

@@ -179,6 +179,48 @@ ruleTester.run("classnames-order", rule, {
     },
   ],
   invalid: [
+    {
+      code: `
+      export interface FakePropsInterface {
+        readonly name?: string;
+      }
+      
+      function Fake({
+        name = 'yolo'
+      }: FakeProps) {
+      
+        return (
+          <>
+            <h1 className={"absolute bottom-0 w-full flex flex-col"}>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={"flex absolute bottom-0 flex-col w-full"}>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/classnames-order.js

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

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

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