Skip to main content

declaration-property-custom-property-allowed-list

Specify a list of allowed property and custom property pairs within declarations.

a { color: var(--foo); }
/** ↑          ↑
 * These properties and these custom properties */

Use this rule to enforce a subset of custom properties for a property as a convention. For example, allow only:

  • /^--radius-/ for /radius$/, so that only radius tokens are used for radii
  • /^--space-/ for /^(margin|padding|gap)/, so that only spacing tokens are used for spacing

This rule supports 2 message arguments: the property name and the disallowed custom property.

Options​

Object<string, Array<string>>​

{ "property-name": ["array", "of", "custom-properties", "/regex/"] }

You can specify a regex for a property name, such as { "/^animation/": [] }.

Given:

{
  "declaration-property-custom-property-allowed-list": {
    "/color/": ["/^--foo-/"],
    "border": ["/^--foo-/", "--bar"]
  }
}

The following patterns are considered problems:

a { color: var(--bar); }
a { background-color: var(--bar); }
a { border: var(--baz) solid var(--qux); }

The following patterns are not considered problems:

a { color: var(--foo-baz); }
a { background-color: var(--foo-baz); }
a { border: var(--foo-baz) solid var(--bar); }