Add `declaration-property-custom-property-allowed-list`

What is the problem you're trying to solve?

I want to enforce specific custom properties in specific property values.

For example:

:root {
  --space-s: clamp(0.875rem, 0.788rem + 0.4348cqi, 1.125rem);
  --space-m: clamp(1.3125rem, 1.1821rem + 0.6522cqi, 1.6875rem);
  --space-l: clamp(1.75rem, 1.5761rem + 0.8696cqi, 2.25rem);

  --radius-s: 1px;
  --radius-m: 1.5px;
  --radius-l: 2px;
}

a {
  margin-block: var(--space-m);
  border-radius: var(--radius-s);
}

Both are <length>, but I only want to use space for margins, paddings and gaps, and radius for border radius.

What solution would you like to see?

A new dedicated rule that works in conjunction with:

• https://github.com/stylelint/stylelint/issues/9465

Unlike that rule, this one needs to be scoped to properties. That rule enforces the presence of any custom property for a particular type (hence the *-required-list name), whereas this rule allows people to specify which custom properties are allowed per property.

We have a family of declarartion-property-*-allowed-list rules, e.g. declaration-property-unit-allowed-list, and this new rule would slot in there.

• Name: declaration-property-custom-property-allowed-list
• Primary option: {}
• Secondary options: None
• Autofixable: No
• Message: Disallowed custom property "${customProperty}" for property "${property}"
• Description: "Specify a list of allowed property and custom property pairs within declarations."
• Section: "Enforce conventions" -> "Allowed, disallowed & required" -> "Declaration"
• Config: No

For example, given:

{
  "rules": {
    "declaration-property-custom-property-allowed-list": {
      "/^(margin|padding)(-.+)?$/": ["/^--space-/"],
      "/^(row-|column-)?gap$/": ["/^--space-/"],
      "/^border(-.+)?-radius$/": ["/^--radius-/"],
    }
  }
}

a {
  padding: var(--radius-s); /* Disallowed custom property "var(--radius-s)" for property "padding" */
}

The value-type-custom-property-required-list and declaration-property-value-no-unknown rules would both be silent as var(--radius-s) is a <length>.