eslint-plugin-tailwindcss - npm Package Compare versions

Comparing version 3.0.4 to 3.1.0-beta.0

lib/config/groups.js

@@ -101,2 +101,4 @@ /**
             members: 'overflow\\-(?<value>auto|hidden|clip|visible|scroll)',
+            shorthand: 'all',
+            body: 'overflow',
           },
@@ -106,2 +108,4 @@ {
             members: 'overflow\\-x\\-(?<value>auto|hidden|clip|visible|scroll)',
+            shorthand: 'x',
+            body: 'overflow-x',
           },
@@ -111,2 +115,4 @@ {
             members: 'overflow\\-y\\-(?<value>auto|hidden|clip|visible|scroll)',
+            shorthand: 'y',
+            body: 'overflow-y',
           },
@@ -121,2 +127,4 @@ ],
             members: 'overscroll\\-(?<value>auto|contain|none)',
+            shorthand: 'all',
+            body: 'overscroll',
           },
@@ -126,2 +134,4 @@ {
             members: 'overscroll\\-x\\-(?<value>auto|contain|none)',
+            shorthand: 'x',
+            body: 'overscroll-x',
           },
@@ -131,2 +141,4 @@ {
             members: 'overscroll\\-y\\-(?<value>auto|contain|none)',
+            shorthand: 'y',
+            body: 'overscroll-y',
           },
@@ -145,2 +157,4 @@ ],
             members: '(inset\\-(?<value>${inset})|\\-inset\\-(?<negativeValue>${-inset}))',
+            shorthand: 'all',
+            body: 'inset',
           },
@@ -150,2 +164,4 @@ {
             members: '(inset\\-y\\-(?<value>${inset})|\\-inset\\-y\\-(?<negativeValue>${-inset}))',
+            shorthand: 'y',
+            body: 'inset-y',
           },
@@ -155,2 +171,4 @@ {
             members: '(inset\\-x\\-(?<value>${inset})|\\-inset\\-x\\-(?<negativeValue>${-inset}))',
+            shorthand: 'x',
+            body: 'inset-x',
           },
@@ -160,2 +178,4 @@ {
             members: '(top\\-(?<value>${inset})|\\-top\\-(?<negativeValue>${-inset}))',
+            shorthand: 't',
+            body: 'top',
           },
@@ -165,2 +185,4 @@ {
             members: '(right\\-(?<value>${inset})|\\-right\\-(?<negativeValue>${-inset}))',
+            shorthand: 'r',
+            body: 'right',
           },
@@ -170,2 +192,4 @@ {
             members: '(bottom\\-(?<value>${inset})|\\-bottom\\-(?<negativeValue>${-inset}))',
+            shorthand: 'b',
+            body: 'bottom',
           },
@@ -175,2 +199,4 @@ {
             members: '(left\\-(?<value>${inset})|\\-left\\-(?<negativeValue>${-inset}))',
+            shorthand: 'l',
+            body: 'left',
           },
@@ -280,2 +306,4 @@ ],
             members: 'gap\\-(?<value>${gap})',
+            shorthand: 'all',
+            body: 'gap',
           },
@@ -285,2 +313,4 @@ {
             members: 'gap\\-x\\-(?<value>${gap})',
+            shorthand: 'x',
+            body: 'gap-x',
           },
@@ -290,2 +320,4 @@ {
             members: 'gap\\-y\\-(?<value>${gap})',
+            shorthand: 'y',
+            body: 'gap-y',
           },
@@ -341,2 +373,4 @@ ],
             members: 'p\\-(?<value>${padding})',
+            shorthand: 'all',
+            body: 'p',
           },
@@ -346,2 +380,4 @@ {
             members: 'py\\-(?<value>${padding})',
+            shorthand: 'y',
+            body: 'py',
           },
@@ -351,2 +387,4 @@ {
             members: 'px\\-(?<value>${padding})',
+            shorthand: 'x',
+            body: 'px',
           },
@@ -356,2 +394,4 @@ {
             members: 'pt\\-(?<value>${padding})',
+            shorthand: 't',
+            body: 'pt',
           },
@@ -361,2 +401,4 @@ {
             members: 'pr\\-(?<value>${padding})',
+            shorthand: 'r',
+            body: 'pr',
           },
@@ -366,2 +408,4 @@ {
             members: 'pb\\-(?<value>${padding})',
+            shorthand: 'b',
+            body: 'pb',
           },
@@ -371,2 +415,4 @@ {
             members: 'pl\\-(?<value>${padding})',
+            shorthand: 'l',
+            body: 'pl',
           },
@@ -381,2 +427,4 @@ ],
             members: '(m\\-(?<value>${margin})|\\-m\\-(?<negativeValue>${-margin}))',
+            shorthand: 'all',
+            body: 'm',
           },
@@ -386,2 +434,4 @@ {
             members: '(my\\-(?<value>${margin})|\\-my\\-(?<negativeValue>${-margin}))',
+            shorthand: 'y',
+            body: 'my',
           },
@@ -391,2 +441,4 @@ {
             members: '(mx\\-(?<value>${margin})|\\-mx\\-(?<negativeValue>${-margin}))',
+            shorthand: 'x',
+            body: 'mx',
           },
@@ -396,2 +448,4 @@ {
             members: '(mt\\-(?<value>${margin})|\\-mt\\-(?<negativeValue>${-margin}))',
+            shorthand: 't',
+            body: 'mt',
           },
@@ -401,2 +455,4 @@ {
             members: '(mr\\-(?<value>${margin})|\\-mr\\-(?<negativeValue>${-margin}))',
+            shorthand: 'r',
+            body: 'mr',
           },
@@ -406,2 +462,4 @@ {
             members: '(mb\\-(?<value>${margin})|\\-mb\\-(?<negativeValue>${-margin}))',
+            shorthand: 'b',
+            body: 'mb',
           },
@@ -411,2 +469,4 @@ {
             members: '(ml\\-(?<value>${margin})|\\-ml\\-(?<negativeValue>${-margin}))',
+            shorthand: 'l',
+            body: 'ml',
           },
@@ -632,2 +692,4 @@ ],
             members: 'rounded(\\-(?<value>${borderRadius}))?',
+            shorthand: 'all',
+            body: 'rounded',
           },
@@ -637,2 +699,4 @@ {
             members: 'rounded\\-t(\\-(?<value>${borderRadius}))?',
+            shorthand: 't',
+            body: 'rounded-t',
           },
@@ -642,2 +706,4 @@ {
             members: 'rounded\\-r(\\-(?<value>${borderRadius}))?',
+            shorthand: 'r',
+            body: 'rounded-r',
           },
@@ -647,2 +713,4 @@ {
             members: 'rounded\\-b(\\-(?<value>${borderRadius}))?',
+            shorthand: 'b',
+            body: 'rounded-b',
           },
@@ -652,2 +720,4 @@ {
             members: 'rounded\\-l(\\-(?<value>${borderRadius}))?',
+            shorthand: 'l',
+            body: 'rounded-l',
           },
@@ -657,2 +727,4 @@ {
             members: 'rounded\\-tl(\\-(?<value>${borderRadius}))?',
+            shorthand: 'tl',
+            body: 'rounded-tl',
           },
@@ -662,2 +734,4 @@ {
             members: 'rounded\\-tr(\\-(?<value>${borderRadius}))?',
+            shorthand: 'tr',
+            body: 'rounded-tr',
           },
@@ -667,2 +741,4 @@ {
             members: 'rounded\\-br(\\-(?<value>${borderRadius}))?',
+            shorthand: 'br',
+            body: 'rounded-br',
           },
@@ -672,2 +748,4 @@ {
             members: 'rounded\\-bl(\\-(?<value>${borderRadius}))?',
+            shorthand: 'bl',
+            body: 'rounded-bl',
           },
@@ -682,2 +760,4 @@ ],
             members: 'border(\\-(?<value>${borderWidth}))?',
+            shorthand: 'all',
+            body: 'border',
           },
@@ -687,2 +767,4 @@ {
             members: 'border\\-y(\\-(?<value>${borderWidth}))?',
+            shorthand: 'y',
+            body: 'border-y',
           },
@@ -692,2 +774,4 @@ {
             members: 'border\\-x(\\-(?<value>${borderWidth}))?',
+            shorthand: 'x',
+            body: 'border-x',
           },
@@ -697,2 +781,4 @@ {
             members: 'border\\-t(\\-(?<value>${borderWidth}))?',
+            shorthand: 't',
+            body: 'border-t',
           },
@@ -702,2 +788,4 @@ {
             members: 'border\\-r(\\-(?<value>${borderWidth}))?',
+            shorthand: 'r',
+            body: 'border-r',
           },
@@ -707,2 +795,4 @@ {
             members: 'border\\-b(\\-(?<value>${borderWidth}))?',
+            shorthand: 'b',
+            body: 'border-b',
           },
@@ -712,2 +802,4 @@ {
             members: 'border\\-l(\\-(?<value>${borderWidth}))?',
+            shorthand: 'l',
+            body: 'border-l',
           },
@@ -722,2 +814,4 @@ ],
             members: 'border\\-(?<value>${borderColor})',
+            shorthand: 'all',
+            body: 'border',
           },
@@ -727,2 +821,4 @@ {
             members: 'border\\-y\\-(?<value>${borderColor})',
+            shorthand: 'y',
+            body: 'border-y',
           },
@@ -732,2 +828,4 @@ {
             members: 'border\\-x\\-(?<value>${borderColor})',
+            shorthand: 'x',
+            body: 'border-x',
           },
@@ -737,2 +835,4 @@ {
             members: 'border\\-t\\-(?<value>${borderColor})',
+            shorthand: 't',
+            body: 'border-t',
           },
@@ -742,2 +842,4 @@ {
             members: 'border\\-r\\-(?<value>${borderColor})',
+            shorthand: 'r',
+            body: 'border-r',
           },
@@ -747,2 +849,4 @@ {
             members: 'border\\-b\\-(?<value>${borderColor})',
+            shorthand: 'b',
+            body: 'border-b',
           },
@@ -752,2 +856,4 @@ {
             members: 'border\\-l\\-(?<value>${borderColor})',
+            shorthand: 'l',
+            body: 'border-l',
           },
@@ -1006,11 +1112,17 @@ ],
             type: 'scale',
-            members: 'scale\\-(?<value>${scale})',
+            members: 'scale\\-(?<value>${scale})|\\-scale\\-(?<negativeValue>${-scale})',
+            shorthand: 'all',
+            body: 'scale',
           },
           {
             type: 'scale-y',
-            members: 'scale\\-y\\-(?<value>${scale})',
+            members: 'scale\\-y\\-(?<value>${scale})|\\-scale\\-y\\-(?<negativeValue>${-scale})',
+            shorthand: 'y',
+            body: 'scale-y',
           },
           {
             type: 'scale-x',
-            members: 'scale\\-x\\-(?<value>${scale})',
+            members: 'scale\\-x\\-(?<value>${scale})|\\-scale\\-x\\-(?<negativeValue>${-scale})',
+            shorthand: 'x',
+            body: 'scale-x',
           },
@@ -1017,0 +1129,0 @@ ],

lib/index.js

@@ -16,2 +16,3 @@ /**
     'classnames-order': require(base + 'classnames-order'),
+    'enforces-shorthand': require(base + 'enforces-shorthand'),
     'migration-from-tailwind-2': require(base + 'migration-from-tailwind-2'),
@@ -31,2 +32,3 @@ 'no-contradicting-classname': require(base + 'no-contradicting-classname'),
         'tailwindcss/classnames-order': 'warn',
+        'tailwindcss/enforces-shorthand': 'warn',
         'tailwindcss/migration-from-tailwind-2': 'warn',
@@ -33,0 +35,0 @@ 'tailwindcss/no-custom-classname': 'warn',

lib/util/groupMethods.js

@@ -411,2 +411,13 @@ /**
 /**
+ * Get the prefixes of the full classname
+ *
+ * @param {String} className The target classname
+ * @param {String} separator The delimiter to be used between variants
+ * @returns {String} The variants
+ */
+function getPrefixes(className, separator = ':') {
+  return className.split(separator).slice(0, -1).join(separator);
+}
+
+/**
  * Get the last part of the full classname
@@ -435,2 +446,81 @@ *
 
+/**
+ * Find the group of a classname
+ *
+ * @param {String} name Classname to be find using patterns
+ * @param {Array} group The group bein tested
+ * @param {Object} config TailwindCSS config
+ * @param {String} parentType The name of the parent group
+ * @returns {Object} The infos
+ */
+function findInGroup(name, group, config, parentType = null) {
+  if (typeof group.members === 'string') {
+    const pattern = patchRegex(group.members, config);
+    const classRe = new RegExp(`^(${pattern})$`);
+    if (classRe.test(name)) {
+      const res = classRe.exec(name);
+      let value = '';
+      if (res && res.groups) {
+        if (res.groups.value) {
+          value = res.groups.value;
+        }
+        if (res.groups.negativeValue) {
+          value = '-' + res.groups.negativeValue;
+        }
+      }
+      return {
+        group: parentType,
+        ...group,
+        value: value,
+      };
+    } else {
+      return null;
+    }
+  } else {
+    const innerGroup = group.members.find((v) => findInGroup(name, v, config, group.type));
+    if (!innerGroup) {
+      return null;
+    } else {
+      return findInGroup(name, innerGroup, config, group.type);
+    }
+  }
+}
+
+/**
+ * Returns an object with parsed properties
+ *
+ * @param {String} name Classname to be parsed
+ * @param {Array} arr The flatten array containing the regex
+ * @param {Object} config The TailwindCSS config
+ * @param {Number} index The index
+ * @returns {Object} Parsed infos
+ */
+function parseClassname(name, arr, config, index = null) {
+  const classPrefixes = getPrefixes(name, config.separator);
+  const classSuffix = getSuffix(name, config.separator);
+  let slot = null;
+  arr.forEach((group) => {
+    if (slot === null) {
+      const found = findInGroup(classSuffix, group, config);
+      if (found) {
+        slot = found;
+      }
+    }
+  });
+  const variants = classPrefixes ? classPrefixes + config.separator : '';
+  const value = slot ? slot.value : '';
+  const isNegative = value[0] === '-';
+  const off = isNegative ? 1 : 0;
+  const body = name.substr(0, name.length - value.length + off).substr(variants.length + off);
+  return {
+    index: index,
+    name: name,
+    variants: variants,
+    parentType: slot ? slot.group : '',
+    body: body,
+    value: value,
+    shorthand: slot ? slot.shorthand : '',
+  };
+}
+
 module.exports = {
@@ -440,3 +530,5 @@ initGroupSlots,
   getGroupIndex,
+  getPrefixes,
   getSuffix,
+  parseClassname,
 };

package.json

 {
   "name": "eslint-plugin-tailwindcss",
-  "version": "3.0.4",
+  "version": "3.1.0-beta.0",
   "description": "Rules enforcing best practices while using Tailwind CSS",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -36,2 +36,4 @@ # eslint-plugin-tailwindcss
 
+- New rule: [`enforces-shorthand`](docs/rules/enforces-shorthand.md) merging multiple classnames when possible
+
 - FIX: [correctly handle number values in config](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/86) (by [patrikholcak](https://github.com/patrikholcak) 🙏)
@@ -38,0 +40,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136000

increased by18.4%

Number of package files

24

increased by4.35%

Lines of code

3771

increased by16.89%

Number of lines in readme file

192

increased by1.05%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

9

increased by12.5%

No dependency changes