Skip to main content

value-type-custom-property-required-list

Specify a list of value types that require custom properties.

a { border: 1px solid red; }
/**         ↑         ↑
 * These <length> and <color> values */
warning

This rule is experimental, as it's our first whose options take value types. To give feedback on them, open an issue.

Use this rule to enforce a convention. For example, require custom properties for:

  • color, so that colors come from your palette
  • length, so that spacing comes from your scale

For custom properties defined within the same source or within the files specified in the referenceFiles configuration property, this rule substitutes their declared values for the var()s in a value to find the types of the parts beside them. It ignores the declarations of custom properties, values that contain unknown custom properties, and the fallbacks of var().

The types are those of the CSSTree Syntax Reference, without their angle brackets, e.g. color, length and time. You can use the languageOptions configuration property to extend them.

This rule supports 2 message arguments: the value and its type.

Prior art:

Options​

Array<string>​

["array", "of", "types"]

Given:

{
  "value-type-custom-property-required-list": ["color", "length"]
}

The following patterns are considered problems:

a { color: red; }
a { margin: 1px; }

The following patterns are not considered problems:

a {
  color: var(--foo);
}
a {
  margin: var(--bar);
}

Optional secondary options​

ignoreFunctions​

{ "ignoreFunctions": { "type": ["array", "of", "functions", "/regex/"] } }

Ignore the parts of a type that are within the specified functions.

Given:

{
  "value-type-custom-property-required-list": [
    ["color", "number", "angle", "percentage"],
    {
      "ignoreFunctions": {
        "number": ["/.+/"],
        "color": ["color-mix"],
        "/^(angle|percentage)$/": ["/-gradient$/"]
      }
    }
  ]
}

The following patterns are not considered problems:

a { transform: scale(1.5); }
a { color: color-mix(in srgb, red, blue); }
a { background: linear-gradient(45deg, var(--foo) 0%, var(--bar) 100%); }

ignoreProperties​

{ "ignoreProperties": { "type": ["array", "of", "properties", "/regex/"] } }

Ignore the parts of a type in the values of the specified properties.

Given:

{
  "value-type-custom-property-required-list": [
    ["color", "length"],
    { "ignoreProperties": { "/.+/": ["transform"], "length": ["/^border/"] } }
  ]
}

The following patterns are not considered problems:

a { transform: translateX(1px); }
a { border-width: 1px; }

ignoreValues​

{ "ignoreValues": ["array", "of", "values", "/regex/"] }

Ignore the specified parts of a value.

Given:

{
  "value-type-custom-property-required-list": [
    ["color", "number"],
    { "ignoreValues": ["0", "transparent"] }
  ]
}

The following patterns are not considered problems:

a { flex: 0; }
a { color: transparent; }