fix: support for v3.1.0

- Drop support for `officialSorting` & `prependCustom` (`classnames-order`)
- New features from v3.1.0
- Tests adapted
- New tests
- README
- Include fix from #144 (by @mpsijm)

Author: francoismassart

README.md

@@ -37,6 +37,11 @@ If you enjoy my work you can:
 
 ## Latest changelog
 
+- ADD: support for [new features from Tailwind CSS v3.1.0](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.1.0)
+  > Custom `dark` class, `.grid-flow-dense`, `.text-start`, `.text-end`, `.mix-blend-plus-lighter`, `.border-spacing...`
+- BREAKING CHANGE: `groupByResponsive`, `officialSorting` and `prependCustom` are deprecated ☠️. The official sorting is always used for `classnames-order`.
+  > This was required in order to support classnames generated by plugins.
+- FIX: [Many fixes](https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/132) including support for classnames generated by plugins.
 - FIX: [speeds up `enforces-shorthand` and `classnames-order`](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/136) with `officialSorting: true` by introducing WeakMap caches to reduce duplicate calculations (by [mpsijm](https://github.com/mpsijm) 🙏)
 - New strategy for whitespaces and linebreaks: the plugin will attempt to leave them intact
 - New option `officialSorting` for [`classnames-order`](docs/rules/classnames-order.md#officialsorting-default-false) can be set to `true` in order to use the same ordering order as the official [`prettier-plugin-tailwindcss`](https://www.npmjs.com/package/prettier-plugin-tailwindcss)
@@ -159,10 +164,7 @@ All these settings have nice default values that are explained in each rules' do
       "config": "tailwind.config.js",
       "cssFiles": ["**/*.css", "!**/node_modules", "!**/.*", "!**/dist", "!**/build"],
       "cssFilesRefreshRate": 5_000,
-      "groupByResponsive": true,
       "groups": defaultGroups, // imported from groups.js
-      "officialSorting": false,
-      "prependCustom": false,
       "removeDuplicates": true,
       "whitelist": []
     }

docs/rules/classnames-order.md

@@ -25,10 +25,7 @@ Examples of **correct** code for this rule:
 "tailwindcss/classnames-order": [<enabled>, {
   "callees": Array<string>,
   "config": <string>|<object>,
-  "groupByResponsive": <boolean>,
   "groups": Array<object>,
-  "officialSorting": <boolean>,
-  "prependCustom": <boolean>,
   "removeDuplicates": <boolean>,
   "tags": Array<string>,
 }]
@@ -55,25 +52,6 @@ It is also possible to directly inject a configuration as plain `object` like `{
 
 Finally, the plugin will [merge the provided configuration](https://tailwindcss.com/docs/configuration#referencing-in-java-script) with [Tailwind CSS's default configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js).
 
-### `groupByResponsive` (default: `true`)
-
-When this option was introduced in version 2.x.x of the plugin, this setting was set to `false` to avoid a tsunami of reorder in the classnames.
-You had to set it to `true` intentionally.
-
-Since version 3 of the plugin, the default value is now `true`, grouping by responsive modifier in priority vs. grouping by property.
-
-Linting this code:
-
-`<div class="rounded sm:rounded-lg lg:rounded-2xl p-4 sm:p-6 lg:p-8">...</div>`
-
-By default, the ordering process will group the classnames by variants then by properties:
-
-`<div class="p-4 rounded sm:p-6 sm:rounded-lg lg:p-8 lg:rounded-2xl">...</div>`
-
-Set `groupByResponsive` to `false` and the ordering will work by properties, then by variants:
-
-`<div class="p-4 sm:p-6 lg:p-8 rounded sm:rounded-lg lg:rounded-2xl">...</div>`
-
 ### `groups` (default defined in [groups.js](../../lib/config/groups.js))
 
 If you really need to, you can write your own configuration.
@@ -116,14 +94,6 @@ const customGroups = require('custom-groups').groups;
 ...
 ```
 
-### `officialSorting` (default: `false`)
-
-Set `officialSorting` to `true` if you want to use the same ordering rules as the official plugin `prettier-plugin-tailwindcss`. Enabling this settings will cause `groupByResponsive`, `groups`, `prependCustom` and `removeDuplicates` options to be ignored.
-
-### `prependCustom` (default: `false`)
-
-By default, classnames which doesn't belong to Tailwind CSS will be pushed at the end. Set `prependCustom` to `true` if you prefer to move them at the beginning.
-
 ### `removeDuplicates` (default: `true`)
 
 Duplicate classnames are automatically removed but you can always disable this behavior by setting `removeDuplicates` to `false`.

lib/config/groups.js

@@ -289,7 +289,7 @@ module.exports.groups = [
       },
       {
         type: 'Grid Auto Flow',
-        members: 'grid\\-flow\\-(row|col)(\\-dense)?',
+        members: 'grid\\-flow\\-(dense|(row|col)(\\-dense)?)',
       },
       {
         type: 'Grid Auto Columns',
@@ -555,7 +555,7 @@ module.exports.groups = [
       },
       {
         type: 'Text Alignment',
-        members: 'text\\-(left|center|right|justify)',
+        members: 'text\\-(left|center|right|justify|start|end)',
       },
       {
         type: 'Text Color',
@@ -940,7 +940,7 @@ module.exports.groups = [
       {
         type: 'Mix Blend Mode',
         members:
-          'mix\\-blend\\-(normal|multiply|screen|overlay|darken|lighten|color\\-(burn|dodge)|(hard|soft)\\-light|difference|exclusion|hue|saturation|color|luminosity)',
+          'mix\\-blend\\-(normal|multiply|screen|overlay|darken|lighten|color\\-(burn|dodge)|(hard|soft)\\-light|difference|exclusion|hue|saturation|color|luminosity|plus\\-lighter)',
       },
       {
         type: 'Background Blend Mode',
@@ -1039,6 +1039,29 @@ module.exports.groups = [
         type: 'Border Collapse',
         members: 'border\\-(collapse|separate)',
       },
+      {
+        type: 'Border Spacing',
+        members: [
+          {
+            type: 'border-spacing',
+            members: 'border\\-spacing\\-(?<value>${borderSpacing})',
+            shorthand: 'all',
+            body: 'border-spacing',
+          },
+          {
+            type: 'border-spacing-x',
+            members: 'border\\-spacing\\-x\\-(?<value>${borderSpacing})',
+            shorthand: 'x',
+            body: 'border-spacing-x',
+          },
+          {
+            type: 'border-spacing-y',
+            members: 'border\\-spacing\\-y\\-(?<value>${borderSpacing})',
+            shorthand: 'y',
+            body: 'border-spacing-y',
+          },
+        ],
+      },
       {
         type: 'Table Layout',
         members: 'table\\-(auto|fixed)',

lib/rules/classnames-order.js

@@ -49,22 +49,10 @@ module.exports = {
             default: 'tailwind.config.js',
             type: ['string', 'object'],
           },
-          groupByResponsive: {
-            default: true,
-            type: 'boolean',
-          },
           groups: {
             type: 'array',
             items: { type: 'object' },
           },
-          officialSorting: {
-            default: false,
-            type: 'boolean',
-          },
-          prependCustom: {
-            default: false,
-            type: 'boolean',
-          },
           removeDuplicates: {
             default: true,
             type: 'boolean',
@@ -84,20 +72,15 @@ module.exports = {
     const tags = getOption(context, 'tags');
     const twConfig = getOption(context, 'config');
     const groupsConfig = getOption(context, 'groups');
-    const groupByResponsive = getOption(context, 'groupByResponsive');
-    const officialSorting = getOption(context, 'officialSorting');
-    const prependCustom = getOption(context, 'prependCustom');
     const removeDuplicates = getOption(context, 'removeDuplicates');
 
     const mergedConfig = customConfig.resolve(twConfig);
-    const contextFallback = officialSorting
-      ? (
-          // Set the created contextFallback in the cache if it does not exist yet.
-          contextFallbackCache.has(mergedConfig)
-            ? contextFallbackCache
-            : contextFallbackCache.set(mergedConfig, createContextFallback(mergedConfig))
-        ).get(mergedConfig)
-      : null;
+    const contextFallback = // Set the created contextFallback in the cache if it does not exist yet.
+      (
+        contextFallbackCache.has(mergedConfig)
+          ? contextFallbackCache
+          : contextFallbackCache.set(mergedConfig, createContextFallback(mergedConfig))
+      ).get(mergedConfig);
 
     //----------------------------------------------------------------------
     // Helpers
@@ -309,52 +292,23 @@ module.exports = {
         return;
       }
 
-      let orderedClassNames;
-      let validatedClassNamesValue = '';
+      let orderedClassNames = order(classNames, contextFallback);
 
-      if (officialSorting) {
-        orderedClassNames = order(classNames, contextFallback);
-        for (let i = 0; i < orderedClassNames.length; i++) {
-          const w = whitespaces[i] ?? '';
-          const cls = orderedClassNames[i];
-          validatedClassNamesValue += headSpace ? `${w}${cls}` : `${cls}${w}`;
-          if (headSpace && tailSpace && i === orderedClassNames.length - 1) {
-            validatedClassNamesValue += whitespaces[whitespaces.length - 1] ?? '';
-          }
-        }
-      } else {
-        if (removeDuplicates) {
-          removeDuplicatesFromClassnamesAndWhitespaces(classNames, whitespaces, headSpace, tailSpace);
-        }
-
-        // Sorting
-        const mergedSorted = [];
-        const mergedExtras = [];
-        if (groupByResponsive) {
-          const respGroups = getResponsiveGroups(classNames);
-          respGroups.forEach((clsGroup) => {
-            const { sorted, extras } = getSortedGroups(clsGroup);
-            mergedSorted.push(...sorted);
-            mergedExtras.push(...extras);
-          });
-        } else {
-          const { sorted, extras } = getSortedGroups(classNames);
-          mergedSorted.push(...sorted);
-          mergedExtras.push(...extras);
-        }
+      if (removeDuplicates) {
+        removeDuplicatesFromClassnamesAndWhitespaces(orderedClassNames, whitespaces, headSpace, tailSpace);
+      }
 
-        // Generates the validated/sorted attribute value
-        const flatted = mergedSorted.flat();
-        const union = prependCustom ? [...mergedExtras, ...flatted] : [...flatted, ...mergedExtras];
-        for (let i = 0; i < union.length; i++) {
-          const w = whitespaces[i] ?? '';
-          const cls = union[i];
-          validatedClassNamesValue += headSpace ? `${w}${cls}` : `${cls}${w}`;
-          if (headSpace && tailSpace && i === union.length - 1) {
-            validatedClassNamesValue += whitespaces[whitespaces.length - 1] ?? '';
-          }
+      // Generates the validated/sorted attribute value
+      let validatedClassNamesValue = '';
+      for (let i = 0; i < orderedClassNames.length; i++) {
+        const w = whitespaces[i] ?? '';
+        const cls = orderedClassNames[i];
+        validatedClassNamesValue += headSpace ? `${w}${cls}` : `${cls}${w}`;
+        if (headSpace && tailSpace && i === orderedClassNames.length - 1) {
+          validatedClassNamesValue += whitespaces[whitespaces.length - 1] ?? '';
         }
       }
+
       if (originalClassNamesValue !== validatedClassNamesValue) {
         validatedClassNamesValue = prefix + validatedClassNamesValue + suffix;
         context.report({

lib/rules/enforces-shorthand.js

@@ -72,6 +72,7 @@ module.exports = {
       'Flexbox & Grid': ['Gap'],
       Spacing: ['Padding', 'Margin'],
       Borders: ['Border Radius', 'Border Width', 'Border Color'],
+      Tables: ['Border Spacing'],
       Transforms: ['Scale'],
     };
     // We don't want to affect other rules by object reference

lib/util/groupMethods.js

@@ -64,7 +64,22 @@ function generateOptions(propName, keys, config, isNegative = false) {
   switch (propName) {
     case 'dark':
       // Optional `dark` class
-      return config.darkMode === 'class' ? 'dark' : '';
+      if (config.darkMode === 'class') {
+        return 'dark';
+      } else if (Array.isArray(config.darkMode) && config.darkMode.length === 2 && config.darkMode[0] === 'class') {
+        // https://tailwindcss.com/docs/dark-mode#customizing-the-class-name
+        // For the sake of simplicity we only support a single class name
+        let value = '';
+        const res = /^\.(?<classnameValue>[A-Z0-9\:\-\_\[\d\]]*)$/gi.exec(config.darkMode[1]);
+        if (res && res.groups) {
+          if (res.groups.classnameValue) {
+            value = res.groups.classnameValue;
+          }
+        }
+        return value;
+      } else {
+        return '';
+      }
     case 'arbitraryProperties':
       escapedKeys.push(genericArbitraryOption);
       return '(' + escapedKeys.join('|') + ')';
@@ -119,6 +134,7 @@ function generateOptions(propName, keys, config, isNegative = false) {
       }
       options.push(`\\[(${arbitraryColors.join('|')})\\]`);
       return '(' + options.join('|') + ')';
+    case 'borderSpacing':
     case 'borderWidth':
     case 'divideWidth':
     case 'fontSize':
@@ -290,7 +306,7 @@ function patchRegex(re, config) {
   const resArray = [...res];
   const props = resArray.map((arr) => arr[1]);
   if (props.length === 0) {
-    return cache[re] = `${patched}(${replaced})`;
+    return (cache[re] = `${patched}(${replaced})`);
   }
   // e.g. backgroundColor, letterSpacing, -margin...
   props.forEach((prop) => {
@@ -345,7 +361,7 @@ function patchRegex(re, config) {
     const opts = generateOptions(absoluteProp, keys, config, isNegative);
     replaced = replaced.replace(token, opts);
   });
-  return cache[re] = `${patched}(${replaced})`;
+  return (cache[re] = `${patched}(${replaced})`);
 }
 
 /**

lib/util/removeDuplicatesFromClassnamesAndWhitespaces.js

@@ -1,20 +1,18 @@
 'use strict';
 
-function removeDuplicatesFromClassnamesAndWhitespaces(classNames, whitespaces, headSpace, tailSpace) {
-  const uniqueSet = new Set(classNames);
-  if (uniqueSet.size === classNames.length) {
-    return;
-  }
+function removeDuplicatesFromClassnamesAndWhitespaces(orderedClassNames, whitespaces, headSpace, tailSpace) {
+  let previous = orderedClassNames[0];
   const offset = (!headSpace && !tailSpace) || tailSpace ? -1 : 0;
-  uniqueSet.forEach((cls) => {
-    let duplicatedInstances = classNames.filter((el) => el === cls).length - 1;
-    while (duplicatedInstances > 0) {
-      const idx = classNames.lastIndexOf(cls);
-      classNames.splice(idx, 1);
-      whitespaces.splice(idx + offset, 1);
-      duplicatedInstances--;
+  for (let i = 1; i < orderedClassNames.length; i++) {
+    const cls = orderedClassNames[i];
+    // This function assumes that the list of classNames is ordered, so just comparing to the previous className is enough
+    if (cls === previous) {
+      orderedClassNames.splice(i, 1);
+      whitespaces.splice(i + offset, 1);
+      i--;
     }
-  });
+    previous = cls;
+  }
 }
 
 module.exports = removeDuplicatesFromClassnamesAndWhitespaces;

lib/util/settings.js

@@ -19,14 +19,8 @@ function getOption(context, name) {
       return 'tailwind.config.js';
     case 'cssFiles':
       return ['**/*.css', '!**/node_modules', '!**/.*', '!**/dist', '!**/build'];
-    case 'groupByResponsive':
-      return true;
     case 'groups':
       return defaultGroups;
-    case 'officialSorting':
-      return false;
-    case 'prependCustom':
-      return false;
     case 'removeDuplicates':
       return true;
     case 'tags':