Bug 1988862 - Add a Stylelint rule to enforce using space tokens r=frontend-codestyle-reviewers,hjones

- Add tests for margin shorthand
- Add tests for padding shorthand
- Add tests for inset shorthand
- Add tests for gap shorthand
- Add tests for margin/padding block/inline shorthand
- Add tests for margin/padding longhand properties
- Remove tokens-table values from auto-fixable list
- Add tests for inset block/inline, plus top, left, right, and bottom
- Add tests for column-gap and row-gap
- Add tests for keywords
- Add files to be ignored for rollout
- Add tests for variable fallbacks

Differential Revision: https://phabricator.services.mozilla.com/D267857

Author: dustin-jw

.stylelintrc.js

@@ -274,6 +274,7 @@ module.exports = {
     "stylelint-plugin-mozilla/use-border-color-tokens": true,
     "stylelint-plugin-mozilla/use-font-size-tokens": true,
     "stylelint-plugin-mozilla/use-font-weight-tokens": true,
+    "stylelint-plugin-mozilla/use-space-tokens": true,
   },
 
   overrides: [
@@ -418,6 +419,7 @@ module.exports = {
         "stylelint-plugin-mozilla/use-border-color-tokens": false,
         "stylelint-plugin-mozilla/use-font-size-tokens": false,
         "stylelint-plugin-mozilla/use-font-weight-tokens": false,
+        "stylelint-plugin-mozilla/use-space-tokens": false,
       },
     },
     {
@@ -429,6 +431,7 @@ module.exports = {
       rules: {
         "stylelint-plugin-mozilla/use-border-radius-tokens": true,
         "stylelint-plugin-mozilla/use-border-color-tokens": false,
+        "stylelint-plugin-mozilla/use-space-tokens": false,
       },
     },
   ],

docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-space-tokens.rst

@@ -0,0 +1,100 @@
+================
+use-space-tokens
+================
+
+This rule checks that CSS declarations use space design token variables
+instead of hardcoded values. This ensures consistent spacing (e.g. margins,
+padding, gaps, etc.) across the application and makes it easier to maintain
+design system consistency.
+
+Examples of incorrect code for this rule:
+-----------------------------------------
+
+.. code-block:: css
+
+  .custom-button {
+    padding: 0.5rem;
+  }
+
+.. code-block:: css
+
+  .card {
+    margin-inline: 8px;
+  }
+
+.. code-block:: css
+
+  .overlay {
+    inset: 1rem;
+  }
+
+.. code-block:: css
+
+  .grid {
+    gap: 4px 12px;
+  }
+
+Examples of correct token usage for this rule:
+----------------------------------------------
+
+.. code-block:: css
+
+  .custom-button {
+    padding-block: var(--space-small);
+  }
+
+.. code-block:: css
+
+  .custom-button {
+    padding-inline: var(--space-medium);
+  }
+
+.. code-block:: css
+
+  .custom-button {
+    column-gap: var(--space-xxsmall);
+  }
+
+.. code-block:: css
+
+  .custom-button {
+    margin-block-start: var(--space-large);
+  }
+
+.. code-block:: css
+
+  /* Local CSS variables that reference valid space tokens are allowed */
+  :root {
+    --custom-space: var(--space-xsmall);
+  }
+
+  .custom-button {
+    padding: var(--custom-space);
+  }
+
+.. code-block:: css
+
+  .custom-button {
+    margin-inline-end: var(--custom-space, --space-xlarge);
+  }
+
+
+The rule also allows these values to be non-token values:
+
+.. code-block:: css
+
+  .inherited-inset {
+    inset: inherit;
+  }
+
+.. code-block:: css
+
+  .unset-padding {
+    padding: unset;
+  }
+
+.. code-block:: css
+
+  .initial-row-gap {
+    row-gap: initial;
+  }