fix: check all size, width and height for size-*

Author: francoismassart

README.md

@@ -43,7 +43,7 @@ You can can the same information on your favorite command line software as well.
 - fix: [composable touch action classnames](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/293)
 - fix: [`shadow-md` + `shadow-[#color]`can be used together 🤝](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/298)
 - fix: [`tabular-nums` and `slashed-zero` can be used together 🤝](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/316)
-- fix: [`size-*` based `size` 🤓](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/315)
+- fix: [`size-*` based `size`, `spacing`, `width` and `height` 🤓](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/315)
 - fix: [there is no `size-screen` 😅](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/307)
 - fix: [edge cases with whitespace in `enforces-shorthand`](https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/308)(by [kachkaev](https://github.com/kachkaev) 🙏)
 - fix: [parsing spreads in function call returns](https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/285)(by [egorpavlikhin](https://github.com/egorpavlikhin) 🙏)

lib/rules/enforces-shorthand.js

@@ -248,8 +248,11 @@ module.exports = {
             const sizeKeys = Object.keys(mergedConfig.theme.size);
             const isSize = ['w-', 'h-'].includes(remainingClass.body);
             const isValidSize = sizeKeys.includes(remainingClass.value);
-            const validValue = bodyMatch && !(isSize && !isValidSize);
-            return validValue;
+            const wValue = mergedConfig.theme.width[remainingClass.value];
+            const hValue = mergedConfig.theme.height[remainingClass.value];
+            const sizeValue = mergedConfig.theme.size[remainingClass.value];
+            const fullMatch = wValue === hValue && wValue === sizeValue;
+            return bodyMatch && !(isSize && !isValidSize && !fullMatch);
           }
         });
 

tests/lib/rules/enforces-shorthand.js

@@ -34,7 +34,7 @@ const skipClassAttributeOptions = [
   },
 ];
 
-const customWidthHeightOptions = [
+const incompleteCustomWidthHeightOptions = [
   {
     config: {
       theme: {
@@ -48,7 +48,7 @@ const customWidthHeightOptions = [
   },
 ];
 
-const customSpacingOptions = [
+const customSpacingOnlyOptions = [
   {
     config: {
       theme: {
@@ -61,6 +61,34 @@ const customSpacingOptions = [
   },
 ];
 
+const customSizeOnlyOptions = [
+  {
+    config: {
+      theme: {
+        extend: {
+          size: { size: "100px" },
+        },
+      },
+      plugins: [],
+    },
+  },
+];
+
+const ambiguousOptions = [
+  {
+    config: {
+      theme: {
+        extend: {
+          width: { ambiguous: "75px" },
+          height: { ambiguous: "120px" },
+          size: { ambiguous: "100px" },
+        },
+      },
+      plugins: [],
+    },
+  },
+];
+
 var generateError = (classnames, shorthand) => {
   return {
     messageId: "shorthandCandidateDetected",
@@ -160,8 +188,16 @@ ruleTester.run("shorthands", rule, {
       code: "<div className={'w-screen h-screen'}>issue #307</div>",
     },
     {
-      code: `<div class="h-custom w-custom">size-* is based on spacing</div>`,
-      options: customWidthHeightOptions,
+      code: `<div class="h-custom w-custom">Incomplete config should not use size-*</div>`,
+      options: incompleteCustomWidthHeightOptions,
+    },
+    {
+      code: `<div class="h-custom w-custom">Ambiguous cannot size-*</div>`,
+      options: ambiguousOptions,
+    },
+    {
+      code: `<div class="h-custom w-custom">h-custom & w-custom don't exist... no size-*</div>`,
+      options: customSizeOnlyOptions,
     },
   ],
 
@@ -759,10 +795,10 @@ ruleTester.run("shorthands", rule, {
       errors: [generateError(["md:h-5", "md:w-5"], "md:size-5")],
     },
     {
-      code: `<div class="h-custom w-custom">size-* is based on spacing</div>`,
-      output: `<div class="size-custom">size-* is based on spacing</div>`,
+      code: `<div class="h-custom w-custom">size-*</div>`,
+      output: `<div class="size-custom">size-*</div>`,
       errors: [generateError(["h-custom", "w-custom"], "size-custom")],
-      options: customSpacingOptions,
+      options: customSpacingOnlyOptions,
     },
   ],
 });