feat: issue #376

Author: francoismassart

lib/rules/enforces-shorthand.js

@@ -73,6 +73,9 @@ module.exports = {
     // Helpers
     //----------------------------------------------------------------------
 
+    const placeContentOptions = ['center', 'start', 'end', 'between', 'around', 'evenly', 'baseline', 'stretch'];
+    const placeItemsOptions = ['start', 'end', 'center', 'stretch'];
+    const placeSelfOptions = ['auto', 'start', 'end', 'center', 'stretch'];
     // These are shorthand candidates that do not share the same parent type
     const complexEquivalences = [
       {
@@ -85,6 +88,27 @@ module.exports = {
         shorthand: 'size-',
         mode: 'value',
       },
+      ...placeContentOptions.map((opt) => {
+        return {
+          needles: [`content-${opt}`, `justify-${opt}`],
+          shorthand: `place-content-${opt}`,
+          mode: 'exact',
+        };
+      }),
+      ...placeItemsOptions.map((opt) => {
+        return {
+          needles: [`items-${opt}`, `justify-items-${opt}`],
+          shorthand: `place-items-${opt}`,
+          mode: 'exact',
+        };
+      }),
+      ...placeSelfOptions.map((opt) => {
+        return {
+          needles: [`self-${opt}`, `justify-self-${opt}`],
+          shorthand: `place-self-${opt}`,
+          mode: 'exact',
+        };
+      }),
     ];
 
     // Init assets
@@ -243,7 +267,9 @@ module.exports = {
           }
           // Test if the body of the class matches, eg. 'h-' inside 'h-10'
           if (mode === 'value') {
-            const bodyMatch = inputSet.some((inputClassPattern) => `${mergedConfig.prefix}${inputClassPattern}` === remainingClass.body);
+            const bodyMatch = inputSet.some(
+              (inputClassPattern) => `${mergedConfig.prefix}${inputClassPattern}` === remainingClass.body
+            );
             if ([undefined, null].includes(mergedConfig.theme.size)) {
               return false;
             }
@@ -362,8 +388,9 @@ module.exports = {
                 } else if (hasY || hasX) {
                   const xOrY = hasX ? 'x' : 'y';
                   const xOrYType = getBodyByShorthand(targetGroups, classname.parentType, xOrY);
-                  const patchedName = `${cls.variants}${important}${minus}${mergedConfig.prefix}${xOrYType}${absoluteVal.length ? '-' + absoluteVal : ''
-                    }`;
+                  const patchedName = `${cls.variants}${important}${minus}${mergedConfig.prefix}${xOrYType}${
+                    absoluteVal.length ? '-' + absoluteVal : ''
+                  }`;
                   const toBeReplaced = sameVariantAndValue
                     .filter((c) => {
                       const candidates = hasX ? ['l', 'r'] : ['t', 'b'];

tests/lib/rules/enforces-shorthand.js

@@ -823,5 +823,14 @@ ruleTester.run("shorthands", rule, {
         },
       ],
     },
+    {
+      code: `<div class="content-center justify-center sm:items-start sm:justify-items-start md:self-end md:justify-self-end lg:self-start lg:justify-self-center">issue #376</div>`,
+      output: `<div class="place-content-center sm:place-items-start md:place-self-end lg:self-start lg:justify-self-center">issue #376</div>`,
+      errors: [
+        generateError(["content-center", "justify-center"], "place-content-center"),
+        generateError(["sm:items-start", "sm:justify-items-start"], "sm:place-items-start"),
+        generateError(["md:self-end", "md:justify-self-end"], "md:place-self-end"),
+      ],
+    },
   ],
 });