Skip auto values from namespacing requirement

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

Author: Copilot

docs/rules/namespace-spacing-utils.md

@@ -12,9 +12,11 @@ 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)
+- Sizes: `0-12`, `n1-n12` (negative values)
 - Responsive variants: `mx-sm-2`, `mx-md-4`, `p-lg-3`, `mt-xl-6` (breakpoint embedded in class name)
 
+**Note:** `auto` values (e.g., `m-auto`, `mx-auto`) are **not** flagged by this rule and don't need namespacing.
+
 👎 Examples of **incorrect** code for this rule:
 
 ```jsx
@@ -32,9 +34,6 @@ The following patterns are detected:
 // ❌ Negative spacing without namespace
 <div className="m-n4" />
 
-// ❌ Auto spacing without namespace
-<div className="mx-auto" />
-
 // ❌ Responsive variants without namespace
 <div className="mx-sm-2" />
 <div className="mx-md-4" />
@@ -57,8 +56,9 @@ The following patterns are detected:
 // ✅ Negative spacing with namespace
 <div className="pr-m-n4" />
 
-// ✅ Auto spacing with namespace
-<div className="pr-mx-auto" />
+// ✅ Auto spacing (no namespace needed)
+<div className="mx-auto" />
+<div className="m-auto" />
 
 // ✅ Responsive variants with namespace
 <div className="pr-mx-sm-2" />

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

@@ -41,7 +41,9 @@ ruleTester.run('namespace-spacing-utils', rule, {
     '<div className="pr-m-n4" />',
     '<div className="pr-mt-n2" />',
 
-    // Auto spacing classes (already namespaced)
+    // Auto spacing classes - these are skipped from namespacing
+    '<div className="m-auto" />',
+    '<div className="mx-auto" />',
     '<div className="pr-m-auto" />',
     '<div className="pr-mx-auto" />',
 
@@ -155,18 +157,6 @@ ruleTester.run('namespace-spacing-utils', rule, {
       errors: [{messageId: 'namespaceRequired', data: {className: 'mt-n2', replacement: 'pr-mt-n2'}}],
     },
 
-    // Auto spacing classes
-    {
-      code: '<div className="m-auto" />',
-      output: '<div className="pr-m-auto" />',
-      errors: [{messageId: 'namespaceRequired', data: {className: 'm-auto', replacement: 'pr-m-auto'}}],
-    },
-    {
-      code: '<div className="mx-auto" />',
-      output: '<div className="pr-mx-auto" />',
-      errors: [{messageId: 'namespaceRequired', data: {className: 'mx-auto', replacement: 'pr-mx-auto'}}],
-    },
-
     // Mixed with other classes
     {
       code: '<div className="some-class m-4 other-class" />',

src/rules/namespace-spacing-utils.js

@@ -1,9 +1,10 @@
 // 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)
+// Sizes: 0-12, n1-n12 (negative)
 // Responsive variants: mx-sm-2, mx-md-4, etc. (breakpoint embedded in class name)
-const spacingUtilPattern = /^[mp][xytblr]?-(?:sm-|md-|lg-|xl-)?(?:auto|n?[0-9]+)$/
+// Note: auto values (m-auto, mx-auto, etc.) are skipped - they don't need namespacing
+const spacingUtilPattern = /^[mp][xytblr]?-(?:sm-|md-|lg-|xl-)?n?[0-9]+$/
 
 // Check if a single class token is an unnamespaced spacing utility
 const isUnNamespacedSpacingUtil = token => {