feat: add shorthand support for scroll-padding and scroll-margin

lib/config/groups.js

@@ -1412,84 +1412,108 @@ module.exports.groups = [
       },
       {
         type: 'Scroll Margin',
-        members: 'scroll\\-(?<value>${scrollMargin})',
-        configKey: 'scrollMargin',
         members: [
           {
             type: 'scroll-m',
             members: 'scroll-m\\-(?<value>${scrollMargin})|\\-scroll-m\\-(?<negativeValue>${-scrollMargin})',
+            shorthand: 'all',
+            body: 'scroll-m',
             configKey: 'scrollMargin',
           },
           {
             type: 'scroll-my',
             members: 'scroll-my\\-(?<value>${scrollMargin})|\\-scroll-my\\-(?<negativeValue>${-scrollMargin})',
+            shorthand: 'y',
+            body: 'scroll-my',
             configKey: 'scrollMargin',
           },
           {
             type: 'scroll-mx',
             members: 'scroll-mx\\-(?<value>${scrollMargin})|\\-scroll-mx\\-(?<negativeValue>${-scrollMargin})',
+            shorthand: 'x',
+            body: 'scroll-mx',
             configKey: 'scrollMargin',
           },
           {
             type: 'scroll-mt',
             members: 'scroll-mt\\-(?<value>${scrollMargin})|\\-scroll-mt\\-(?<negativeValue>${-scrollMargin})',
+            shorthand: 't',
+            body: 'scroll-mt',
             configKey: 'scrollMargin',
           },
           {
             type: 'scroll-mr',
             members: 'scroll-mr\\-(?<value>${scrollMargin})|\\-scroll-mr\\-(?<negativeValue>${-scrollMargin})',
+            shorthand: 'r',
+            body: 'scroll-mr',
             configKey: 'scrollMargin',
           },
           {
             type: 'scroll-mb',
             members: 'scroll-mb\\-(?<value>${scrollMargin})|\\-scroll-mb\\-(?<negativeValue>${-scrollMargin})',
+            shorthand: 'b',
+            body: 'scroll-mb',
             configKey: 'scrollMargin',
           },
           {
             type: 'scroll-ml',
             members: 'scroll-ml\\-(?<value>${scrollMargin})|\\-scroll-ml\\-(?<negativeValue>${-scrollMargin})',
+            shorthand: 'l',
+            body: 'scroll-ml',
             configKey: 'scrollMargin',
           },
         ],
       },
       {
         type: 'Scroll Padding',
-        members: 'scroll\\-(?<value>${scrollPadding})',
-        configKey: 'scrollPadding',
         members: [
           {
             type: 'scroll-p',
             members: 'scroll-p\\-(?<value>${scrollPadding})',
+            shorthand: 'all',
+            body: 'scroll-p',
             configKey: 'scrollPadding',
           },
           {
             type: 'scroll-py',
             members: 'scroll-py\\-(?<value>${scrollPadding})',
+            shorthand: 'y',
+            body: 'scroll-py',
             configKey: 'scrollPadding',
           },
           {
             type: 'scroll-px',
             members: 'scroll-px\\-(?<value>${scrollPadding})',
+            shorthand: 'x',
+            body: 'scroll-px',
             configKey: 'scrollPadding',
           },
           {
             type: 'scroll-pt',
             members: 'scroll-pt\\-(?<value>${scrollPadding})',
+            shorthand: 't',
+            body: 'scroll-pt',
             configKey: 'scrollPadding',
           },
           {
             type: 'scroll-pr',
             members: 'scroll-pr\\-(?<value>${scrollPadding})',
+            shorthand: 'r',
+            body: 'scroll-pr',
             configKey: 'scrollPadding',
           },
           {
             type: 'scroll-pb',
             members: 'scroll-pb\\-(?<value>${scrollPadding})',
+            shorthand: 'b',
+            body: 'scroll-pb',
             configKey: 'scrollPadding',
           },
           {
             type: 'scroll-pl',
             members: 'scroll-pl\\-(?<value>${scrollPadding})',
+            shorthand: 'l',
+            body: 'scroll-pl',
             configKey: 'scrollPadding',
           },
         ],

lib/rules/enforces-shorthand.js

@@ -121,6 +121,7 @@ module.exports = {
       Tables: ['Border Spacing'],
       Transforms: ['Scale'],
       Typography: ['Text Overflow', 'Whitespace'],
+      Interactivity: ['Scroll Padding', 'Scroll Margin'],
     };
 
     // We don't want to affect other rules by object reference

tests/lib/rules/enforces-shorthand.js

@@ -199,6 +199,15 @@ ruleTester.run("shorthands", rule, {
       code: `<div class="h-custom w-custom">h-custom & w-custom don't exist... no size-*</div>`,
       options: customSizeOnlyOptions,
     },
+    {
+      code: `<div class="scroll-px-3">Already using scroll-padding shorthand</div>`,
+    },
+    {
+      code: `<div class="scroll-pt-3 scroll-pb-4">Different scroll-padding values</div>`,
+    },
+    {
+      code: `<div class="scroll-ml-2 md:scroll-mr-2">Different variants for scroll-margin</div>`,
+    },
   ],
 
   invalid: [
@@ -832,5 +841,40 @@ ruleTester.run("shorthands", rule, {
         generateError(["md:self-end", "md:justify-self-end"], "md:place-self-end"),
       ],
     },
+    {
+      code: `<div class="scroll-pl-3 scroll-pr-3">Possible shorthand for scroll-padding-x</div>`,
+      output: `<div class="scroll-px-3">Possible shorthand for scroll-padding-x</div>`,
+      errors: [generateError(["scroll-pl-3", "scroll-pr-3"], "scroll-px-3")],
+    },
+    {
+      code: `<div class="scroll-pt-4 scroll-pb-4">Possible shorthand for scroll-padding-y</div>`,
+      output: `<div class="scroll-py-4">Possible shorthand for scroll-padding-y</div>`,
+      errors: [generateError(["scroll-pt-4", "scroll-pb-4"], "scroll-py-4")],
+    },
+    {
+      code: `<div class="scroll-px-3 scroll-py-3">Possible shorthand for scroll-padding</div>`,
+      output: `<div class="scroll-p-3">Possible shorthand for scroll-padding</div>`,
+      errors: [generateError(["scroll-px-3", "scroll-py-3"], "scroll-p-3")],
+    },
+    {
+      code: `<div class="scroll-ml-2 scroll-mr-2">Possible shorthand for scroll-margin-x</div>`,
+      output: `<div class="scroll-mx-2">Possible shorthand for scroll-margin-x</div>`,
+      errors: [generateError(["scroll-ml-2", "scroll-mr-2"], "scroll-mx-2")],
+    },
+    {
+      code: `<div class="scroll-mt-1 scroll-mb-1">Possible shorthand for scroll-margin-y</div>`,
+      output: `<div class="scroll-my-1">Possible shorthand for scroll-margin-y</div>`,
+      errors: [generateError(["scroll-mt-1", "scroll-mb-1"], "scroll-my-1")],
+    },
+    {
+      code: `<div class="scroll-mx-2 scroll-my-2">Possible shorthand for scroll-margin</div>`,
+      output: `<div class="scroll-m-2">Possible shorthand for scroll-margin</div>`,
+      errors: [generateError(["scroll-mx-2", "scroll-my-2"], "scroll-m-2")],
+    },
+    {
+      code: `<div class="scroll-pt-5 scroll-pr-5 scroll-pb-5 scroll-pl-5">All scroll-padding directions</div>`,
+      output: `<div class="scroll-p-5">All scroll-padding directions</div>`,
+      errors: [generateError(["scroll-pt-5", "scroll-pr-5", "scroll-pb-5", "scroll-pl-5"], "scroll-p-5")],
+    },
   ],
 });