Testing with @angular-eslint/template-parser

lib/rules/classnames-order.js

@@ -336,19 +336,17 @@ module.exports = {
     //----------------------------------------------------------------------
     // Public
     //----------------------------------------------------------------------
+
+    const attributeVisitor = function (node) {
+      if (!astUtil.isValidJSXAttribute(node)) {
+        return;
+      }
+      sortNodeArgumentValue(node);
+    };
+
     const scriptVisitor = {
-      JSXAttribute: function (node) {
-        if (!astUtil.isValidJSXAttribute(node)) {
-          return;
-        }
-        sortNodeArgumentValue(node);
-      },
-      TextAttribute: function (node) {
-        if (!astUtil.isValidJSXAttribute(node)) {
-          return;
-        }
-        sortNodeArgumentValue(node);
-      },
+      JSXAttribute: attributeVisitor,
+      TextAttribute: attributeVisitor,
       CallExpression: function (node) {
         if (callees.findIndex((name) => node.callee.name === name) === -1) {
           return;

lib/rules/no-contradicting-classname.js

@@ -129,13 +129,16 @@ module.exports = {
     // Public
     //----------------------------------------------------------------------
 
+    const attributeVisitor = function (node) {
+      if (!astUtil.isValidJSXAttribute(node)) {
+        return;
+      }
+      astUtil.parseNodeRecursive(node, null, parseForContradictingClassNames, true);
+    };
+
     const scriptVisitor = {
-      JSXAttribute: function (node) {
-        if (!astUtil.isValidJSXAttribute(node)) {
-          return;
-        }
-        astUtil.parseNodeRecursive(node, null, parseForContradictingClassNames, true);
-      },
+      JSXAttribute: attributeVisitor,
+      TextAttribute: attributeVisitor,
       CallExpression: function (node) {
         if (callees.findIndex((name) => node.callee.name === name) === -1) {
           return;

lib/rules/no-custom-classname.js

@@ -125,13 +125,16 @@ module.exports = {
     // Public
     //----------------------------------------------------------------------
 
+    const attributeVisitor = function (node) {
+      if (!astUtil.isValidJSXAttribute(node)) {
+        return;
+      }
+      astUtil.parseNodeRecursive(node, null, parseForCustomClassNames);
+    };
+
     const scriptVisitor = {
-      JSXAttribute: function (node) {
-        if (!astUtil.isValidJSXAttribute(node)) {
-          return;
-        }
-        astUtil.parseNodeRecursive(node, null, parseForCustomClassNames);
-      },
+      JSXAttribute: attributeVisitor,
+      TextAttribute: attributeVisitor,
       CallExpression: function (node) {
         if (callees.findIndex((name) => node.callee.name === name) === -1) {
           return;

lib/util/ast.js

@@ -4,6 +4,10 @@
 
 'use strict';
 
+// context.parserPath
+// /.../eslint-plugin-tailwindcss/node_modules/espree/espree.js
+// /.../eslint-plugin-tailwindcss/node_modules/@angular-eslint/template-parser/dist/index.js
+
 const attrUtil = require('./attr');
 const removeDuplicatesFromArray = require('./removeDuplicatesFromArray');
 

package.json

@@ -18,7 +18,7 @@
   "bugs": "https://github.com/francoismassart/eslint-plugin-tailwindcss/issues",
   "main": "lib/index.js",
   "scripts": {
-    "wip": "mocha tests/lib/rules/wip.js",
+    "wip": "mocha tests/lib/rules/wip/ --recursive",
     "test": "mocha tests --recursive"
   },
   "files": [

tests/lib/rules/wip/classnames-order.js

@@ -0,0 +1,81 @@
+/**
+ * @fileoverview Use a consistent orders for the Tailwind CSS classnames, based on property then on variants
+ * @author François Massart
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var rule = require("../../../../lib/rules/classnames-order");
+var RuleTester = require("eslint").RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+var parserOptions = {
+  ecmaVersion: 2019,
+  sourceType: "module",
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+var ruleTester = new RuleTester({ parserOptions });
+
+var errors = [
+  {
+    messageId: "invalidOrder",
+  },
+];
+
+ruleTester.run("classnames-order", rule, {
+  valid: [],
+  invalid: [
+    {
+      code: `
+      <div class="flex-col cursor-pointer flex">
+        <div class="m-0 lg:m-2 md:m-1"></div>
+      </div>`,
+      output: `
+      <div class="flex flex-col cursor-pointer">
+        <div class="m-0 md:m-1 lg:m-2"></div>
+      </div>`,
+      errors: [...errors, ...errors],
+      parser: require.resolve("@angular-eslint/template-parser"),
+    },
+    {
+      code: `<div class="grid lg:grid-col-4 grid-cols-1 sm:grid-cols-2">:)</div>`,
+      output: `<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-col-4">:)</div>`,
+      errors: errors,
+      parser: require.resolve("@angular-eslint/template-parser"),
+    },
+    {
+      code: `
+      <div class="
+        flex-col
+        cursor-pointer
+        flex
+      ">
+        :)
+      </div>`,
+      output: `
+      <div class="
+        flex
+        flex-col
+        cursor-pointer
+      ">
+        :)
+      </div>`,
+      errors: errors,
+      parser: require.resolve("@angular-eslint/template-parser"),
+      options: [
+        {
+          groupByResponsive: false,
+        },
+      ],
+    },
+  ],
+});

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

@@ -0,0 +1,73 @@
+/**
+ * @fileoverview Avoid contradicting Tailwind CSS classnames (e.g. 'w-3 w-5')
+ * @author François Massart
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var rule = require("../../../../lib/rules/no-contradicting-classname");
+var RuleTester = require("eslint").RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+var parserOptions = {
+  ecmaVersion: 2019,
+  sourceType: "module",
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+var config = [
+  {
+    config: {
+      mode: "jit",
+      theme: {
+        aspectRatio: {
+          1: "1",
+          9: "9",
+          16: "16",
+        },
+        order: {
+          "-1": "-1",
+          0: "0",
+        },
+        zIndex: {
+          "-1": "-1",
+          0: "0",
+        },
+      },
+    },
+  },
+];
+
+var ruleTester = new RuleTester({ parserOptions });
+
+ruleTester.run("no-contradicting-classname", rule, {
+  valid: [
+    {
+      code: '<div class="p-1 px-2 sm:px-3 sm:pt-0">Accepts shorthands</div>',
+      parser: require.resolve("@angular-eslint/template-parser"),
+    },
+  ],
+
+  invalid: [
+    {
+      code: '<div class="container w-1 w-2"></div>',
+      errors: [
+        {
+          messageId: "conflictingClassnames",
+          data: {
+            classnames: "w-1, w-2",
+          },
+        },
+      ],
+      parser: require.resolve("@angular-eslint/template-parser"),
+    },
+  ],
+});

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

@@ -0,0 +1,50 @@
+/**
+ * @fileoverview Detect classnames which do not belong to Tailwind CSS
+ * @author no-custom-classname
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var rule = require("../../../../lib/rules/no-custom-classname");
+var RuleTester = require("eslint").RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+var parserOptions = {
+  ecmaVersion: 2019,
+  sourceType: "module",
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+var ruleTester = new RuleTester({ parserOptions });
+
+ruleTester.run("no-custom-classname", rule, {
+  valid: [
+    {
+      code: `<div class="container box-content lg:box-border max-h-24 self-end">Only Tailwind CSS classnames</div>`,
+      parser: require.resolve("@angular-eslint/template-parser"),
+    },
+  ],
+
+  invalid: [
+    {
+      code: `<div class="w-12 my-custom">my-custom is not defined in Tailwind CSS!</div>`,
+      errors: [
+        {
+          messageId: "customClassnameDetected",
+          data: {
+            classname: "my-custom",
+          },
+        },
+      ],
+      parser: require.resolve("@angular-eslint/template-parser"),
+    },
+  ],
+});