Stylelint: Allow leading underscore in CSS variable names (#38966)

app/javascript/mastodon/components/number_fields/styles.module.scss

@@ -1,11 +1,11 @@
 .list {
-  --item-gap: var(--number-fields-gap, 24px);
+  --_item-gap: var(--number-fields-gap, 24px);
 
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
-  gap: 4px var(--item-gap);
+  gap: 4px var(--_item-gap);
   font-size: 13px;
   color: var(--color-text-secondary);
 }

stylelint.config.js

@@ -24,6 +24,13 @@ module.exports = {
     'selector-id-pattern': null,
     'value-keyword-case': null,
     'value-no-vendor-prefix': null,
+    'custom-property-pattern': [
+      '^_?[a-z]([a-z0-9])*(-[a-z0-9]+)*$',
+      {
+        message: (name) =>
+          `Expected custom property name "${name}" to be kebab-case (optional leading underscore allowed)`,
+      },
+    ],
 
     'scss/dollar-variable-empty-line-before': null,
     'scss/no-global-function-names': null,