Merge branch 'master' of github.com:francoismassart/eslint-plugin-tailwindcss into fix/issue-40-jit-arbitrary-values

# Conflicts:
#	tests/lib/rules/no-contradicting-classname.js

Author: francoismassart

README.md

@@ -12,7 +12,13 @@ Rules enforcing best practices and consistency using [Tailwind CSS](https://tail
 
 ## Latest changelog
 
-- Add [`groupByResponsive`](https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/classnames-order.md#groupbyresponsive-default-false) option (default: `false`) in `v1.13.0`
+- [Performance gains](https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/42) on `no-custom-classname` and `no-contradicting-classname` (by [larrifax](https://github.com/larrifax) 🙏)
+
+- Add support for [tagged templates](https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/41) (by [larrifax](https://github.com/larrifax) 🙏)
+
+- [Include "plugins": ["tailwindcss"]](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/44) in the `recommended` preset(by [kripod](https://github.com/kripod) 🙏)
+
+- [Support dark class](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/43) when `darkMode` is set to `class`
 
 [View all releases on github](https://github.com/francoismassart/eslint-plugin-tailwindcss/releases)
 

docs/rules/no-custom-classname.md

@@ -22,9 +22,10 @@ Examples of **correct** code for this rule:
 
 ```js
 ...
-"tailwindcss/classnames-order": [<enabled>, {
+"tailwindcss/no-custom-classname": [<enabled>, {
   "callees": Array<string>,
   "config": <string>|<object>,
+  "cssFiles": Array<string>,
   "whitelist": Array<string>
 }]
 ...

lib/config/groups.js

@@ -13,6 +13,10 @@ module.exports.groups = [
         type: 'Hover, Focus, & Other States',
         members: 'group',
       },
+      {
+        type: 'Dark Mode',
+        members: '${dark}',
+      },
     ],
   },
   {
@@ -132,7 +136,7 @@ module.exports.groups = [
       },
       {
         type: 'Z-Index',
-        members: 'z\\-${zIndex}',
+        members: '(z\\-${zIndex}|\\-z\\-${-zIndex})',
       },
     ],
   },
@@ -362,6 +366,14 @@ module.exports.groups = [
             type: 'space-x',
             members: '(space\\-x\\-${space}|\\-space\\-x\\-${-space})',
           },
+          {
+            type: 'space-y-reverse',
+            members: 'space\\-y\\-reverse',
+          },
+          {
+            type: 'space-x-reverse',
+            members: 'space\\-x\\-reverse',
+          },
         ],
       },
     ],

lib/index.js

@@ -18,6 +18,7 @@ module.exports = {
   },
   configs: {
     recommended: {
+      plugins: ['tailwindcss'],
       parserOptions: {
         ecmaFeatures: {
           jsx: true,

lib/rules/classnames-order.js

@@ -58,13 +58,19 @@ module.exports = {
             default: true,
             type: 'boolean',
           },
+          tags: {
+            type: 'array',
+            items: { type: 'string', minLength: 0 },
+            uniqueItems: true,
+          },
         },
       },
     ],
   },
 
   create: function (context) {
     const callees = getOption(context, 'callees');
+    const tags = getOption(context, 'tags');
     const twConfig = getOption(context, 'config');
     const groupsConfig = getOption(context, 'groups');
     const groupByResponsive = getOption(context, 'groupByResponsive');
@@ -333,6 +339,13 @@ module.exports = {
           sortNodeArgumentValue(node, arg);
         });
       },
+      TaggedTemplateExpression: function (node) {
+        if (!tags.includes(node.tag.name)) {
+          return;
+        }
+
+        sortNodeArgumentValue(node, node.quasi);
+      },
     };
     const templateVisitor = {
       VAttribute: function (node) {

lib/rules/no-contradicting-classname.js

@@ -46,13 +46,19 @@ module.exports = {
             default: 'tailwind.config.js',
             type: ['string', 'object'],
           },
+          tags: {
+            type: 'array',
+            items: { type: 'string', minLength: 0 },
+            uniqueItems: true,
+          },
         },
       },
     ],
   },
 
   create: function (context) {
     const callees = getOption(context, 'callees');
+    const tags = getOption(context, 'tags');
     const twConfig = getOption(context, 'config');
 
     const mergedConfig = customConfig.resolve(twConfig);
@@ -61,6 +67,9 @@ module.exports = {
     // Helpers
     //----------------------------------------------------------------------
 
+    // Init assets before sorting
+    const groups = groupUtil.getGroups(defaultGroups, mergedConfig);
+
     /**
      * Parse the classnames and report found conflicts
      * @param {Array} classNames
@@ -69,7 +78,6 @@ module.exports = {
     const parseForContradictingClassNames = (classNames, node) => {
       classNames = attrUtil.sanitizeClassnames(classNames);
       // Init assets before sorting
-      const groups = groupUtil.getGroups(defaultGroups, mergedConfig);
       const sorted = groupUtil.initGroupSlots(groups);
 
       // Move each classname inside its dedicated group
@@ -147,6 +155,24 @@ module.exports = {
         });
         parseForContradictingClassNames(allClassnamesForNode, node);
       },
+      TaggedTemplateExpression: function (node) {
+        if (!tags.includes(node.tag.name)) {
+          return;
+        }
+
+        const allClassnamesForNode = [];
+        const pushClasses = (classNames, targetNode) => {
+          if (targetNode === null) {
+            // Classnames should be parsed in isolation (e.g. conditional expressions)
+            parseForContradictingClassNames(classNames, node);
+          } else {
+            // Gather the classes prior to validation
+            allClassnamesForNode.push(...classNames);
+          }
+        };
+        astUtil.parseNodeRecursive(node, node.quasi, pushClasses, true);
+        parseForContradictingClassNames(allClassnamesForNode, node);
+      },
     };
 
     const templateVisitor = {

lib/rules/no-custom-classname.js

@@ -52,6 +52,11 @@ module.exports = {
             items: { type: 'string', minLength: 0 },
             uniqueItems: true,
           },
+          tags: {
+            type: 'array',
+            items: { type: 'string', minLength: 0 },
+            uniqueItems: true,
+          },
           whitelist: {
             type: 'array',
             items: { type: 'string', minLength: 0 },
@@ -64,6 +69,7 @@ module.exports = {
 
   create: function (context) {
     const callees = getOption(context, 'callees');
+    const tags = getOption(context, 'tags');
     const twConfig = getOption(context, 'config');
     const cssFiles = getOption(context, 'cssFiles');
     const whitelist = getOption(context, 'whitelist');
@@ -74,16 +80,17 @@ module.exports = {
     // Helpers
     //----------------------------------------------------------------------
 
+    // Init assets before sorting
+    const groups = groupUtil.getGroups(defaultGroups, mergedConfig);
+    const classnamesFromFiles = getClassnamesFromCSS(cssFiles);
+
     /**
      * Parse the classnames and report found conflicts
      * @param {Array} classNames
      * @param {ASTNode} node
      */
     const parseForCustomClassNames = (classNames, node) => {
       classNames = attrUtil.sanitizeClassnames(classNames);
-      // Init assets before sorting
-      const groups = groupUtil.getGroups(defaultGroups, mergedConfig);
-      const classnamesFromFiles = getClassnamesFromCSS(cssFiles);
 
       classNames.forEach((className) => {
         const idx = groupUtil.getGroupIndex(className, groups, mergedConfig.separator);
@@ -128,6 +135,12 @@ module.exports = {
           astUtil.parseNodeRecursive(node, arg, parseForCustomClassNames);
         });
       },
+      TaggedTemplateExpression: function (node) {
+        if (!tags.includes(node.tag.name)) {
+          return;
+        }
+        astUtil.parseNodeRecursive(node, node.quasi, parseForCustomClassNames);
+      },
     };
 
     const templateVisitor = {

lib/util/groupMethods.js

@@ -31,6 +31,8 @@ function generateOptions(propName, keys, config, isNegative = false) {
     keys.splice(defaultKeyIndex, 1);
   }
   switch (propName) {
+    case 'dark':
+      return config.darkMode === 'class' ? 'dark' : '';
     case 'placeholderColor':
     case 'textColor':
     case 'backgroundColor':
@@ -91,9 +93,14 @@ function patchRegex(re, config) {
   }
   // e.g. backgroundColor, letterSpacing...
   props.forEach((prop) => {
+    const token = new RegExp('\\$\\{' + prop + '\\}');
     const isNegative = prop.substr(0, 1) === '-';
     const patchedProp = isNegative ? prop.substr(1) : prop;
-    if (!config.theme || !config.theme[patchedProp]) {
+    if (prop === 'dark') {
+      // Special case, not a default property from the theme
+      replaced = replaced.replace(token, generateOptions(patchedProp, [], config, isNegative));
+      return patched + replaced;
+    } else if (!config.theme || !config.theme[patchedProp]) {
       // prop not found in config
       return;
     }
@@ -104,7 +111,6 @@ function patchRegex(re, config) {
     const absoluteKeys = keys.map((k) => {
       return isNegative ? k.substr(1) : k;
     });
-    const token = new RegExp('\\$\\{' + prop + '\\}');
     if (keys.length === 0 || replaced.match(token) === null) {
       // empty array
       return;

lib/util/settings.js

@@ -27,6 +27,8 @@ function getOption(context, name) {
       return false;
     case 'removeDuplicates':
       return true;
+    case 'tags':
+      return [];
     case 'whitelist':
       return [];
   }