Fix responsive format to use Primer CSS style (mx-sm-2, mx-md-4)

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>

Author: Copilot

docs/rules/namespace-spacing-utils.md

@@ -13,7 +13,7 @@ The following patterns are detected:
 - Margin: `m-{size}`, `mx-{size}`, `my-{size}`, `mt-{size}`, `mr-{size}`, `mb-{size}`, `ml-{size}`
 - Padding: `p-{size}`, `px-{size}`, `py-{size}`, `pt-{size}`, `pr-{size}`, `pb-{size}`, `pl-{size}`
 - Sizes: `0-12`, `auto`, `n1-n12` (negative values)
-- Responsive variants: `sm:`, `md:`, `lg:`, `xl:` prefixes
+- Responsive variants: `mx-sm-2`, `mx-md-4`, `p-lg-3`, `mt-xl-6` (breakpoint embedded in class name)
 
 👎 Examples of **incorrect** code for this rule:
 
@@ -36,7 +36,8 @@ The following patterns are detected:
 <div className="mx-auto" />
 
 // ❌ Responsive variants without namespace
-<div className="md:m-4" />
+<div className="mx-sm-2" />
+<div className="mx-md-4" />
 ```
 
 👍 Examples of **correct** code for this rule:
@@ -60,7 +61,8 @@ The following patterns are detected:
 <div className="pr-mx-auto" />
 
 // ✅ Responsive variants with namespace
-<div className="md:pr-m-4" />
+<div className="pr-mx-sm-2" />
+<div className="pr-mx-md-4" />
 
 // ✅ Non-spacing classes are not affected
 <div className="text-bold color-fg-default" />

src/rules/__tests__/namespace-spacing-utils.test.js

@@ -63,9 +63,10 @@ ruleTester.run('namespace-spacing-utils', rule, {
     // Template literal with namespaced classes
     '<div className={`pr-m-4 pr-p-2`} />',
 
-    // Responsive variants (already namespaced)
-    '<div className="md:pr-m-4" />',
-    '<div className="lg:pr-p-2" />',
+    // Responsive variants (already namespaced) - Primer CSS format: mx-sm-2, mx-md-4
+    '<div className="pr-mx-sm-2" />',
+    '<div className="pr-mx-md-4" />',
+    '<div className="pr-p-lg-3" />',
   ],
   invalid: [
     // Basic margin classes without namespace
@@ -185,16 +186,21 @@ ruleTester.run('namespace-spacing-utils', rule, {
       errors: [{messageId: 'namespaceRequired', data: {className: 'm-4', replacement: 'pr-m-4'}}],
     },
 
-    // Responsive variants
+    // Responsive variants - Primer CSS format: mx-sm-2, mx-md-4
     {
-      code: '<div className="md:m-4" />',
-      output: '<div className="md:pr-m-4" />',
-      errors: [{messageId: 'namespaceRequired', data: {className: 'md:m-4', replacement: 'md:pr-m-4'}}],
+      code: '<div className="mx-sm-2" />',
+      output: '<div className="pr-mx-sm-2" />',
+      errors: [{messageId: 'namespaceRequired', data: {className: 'mx-sm-2', replacement: 'pr-mx-sm-2'}}],
     },
     {
-      code: '<div className="lg:p-2" />',
-      output: '<div className="lg:pr-p-2" />',
-      errors: [{messageId: 'namespaceRequired', data: {className: 'lg:p-2', replacement: 'lg:pr-p-2'}}],
+      code: '<div className="mx-md-4" />',
+      output: '<div className="pr-mx-md-4" />',
+      errors: [{messageId: 'namespaceRequired', data: {className: 'mx-md-4', replacement: 'pr-mx-md-4'}}],
+    },
+    {
+      code: '<div className="p-lg-3" />',
+      output: '<div className="pr-p-lg-3" />',
+      errors: [{messageId: 'namespaceRequired', data: {className: 'p-lg-3', replacement: 'pr-p-lg-3'}}],
     },
 
     // Size 0 classes

src/rules/namespace-spacing-utils.js

@@ -1,8 +1,9 @@
 // Regex pattern to match margin/padding utility classes from Primer CSS
 // Matches: m-{size}, mx-{size}, my-{size}, mt-{size}, mr-{size}, mb-{size}, ml-{size}
 //          p-{size}, px-{size}, py-{size}, pt-{size}, pr-{size}, pb-{size}, pl-{size}
-// Sizes: 0-12, auto, n1-n12 (negative), responsive variants like md:m-4
-const spacingUtilPattern = /(?<!\S)(?:(?:sm|md|lg|xl):)?([mp][xytblr]?-(?:auto|n?[0-9]+))(?!\S)/g
+// Sizes: 0-12, auto, n1-n12 (negative)
+// Responsive variants: mx-sm-2, mx-md-4, etc. (breakpoint embedded in class name)
+const spacingUtilPattern = /(?<!\S)([mp][xytblr]?-(?:sm-|md-|lg-|xl-)?(?:auto|n?[0-9]+))(?!\S)/g
 
 // Process a class name string and find unnamespaced spacing utilities
 const findUnNamespacedClasses = classNameStr => {
@@ -18,7 +19,7 @@ const findUnNamespacedClasses = classNameStr => {
     if (!prefix.endsWith('pr-')) {
       matches.push({
         original: fullMatch,
-        replacement: fullMatch.includes(':') ? fullMatch.replace(/:([mp])/, ':pr-$1') : `pr-${fullMatch}`,
+        replacement: `pr-${fullMatch}`,
         index: startIndex,
       })
     }