Why is this an issue?

CSS custom properties are variables, but they are not substituted when they appear as bare tokens in declaration values. For example, color: --accent-color; is not interpreted as a variable lookup, so the declaration becomes invalid and is ignored.

This rule raises an issue when a custom property defined in the same source file is used as a value without the var() function.

How to fix it

Wrap the custom property reference in var() whenever it is used as a declaration value.

Noncompliant code example

:root {
  --accent-color: red;
}

a {
  color: --accent-color; /* Noncompliant */
}

@property --accent-color {
  syntax: "<color>";
  inherits: false;
  initial-value: red;
}

a {
  color: --accent-color; /* Noncompliant */
}

Compliant solution

:root {
  --accent-color: red;
}

a {
  color: var(--accent-color);
}

@property --accent-color {
  syntax: "<color>";
  inherits: false;
  initial-value: red;
}

a {
  color: var(--accent-color);
}

Exceptions and limitations

• Properties that legitimately accept author-defined identifiers, such as transition-property, are ignored:

  @property --accent-color {
    syntax: "<color>";
    inherits: false;
    initial-value: red;
  }
  
  a {
    transition-property: --accent-color;
  }
  

• Only custom properties defined in the same source file are tracked. Uses of custom properties defined in another file are not reported.

Resources

Documentation

• stylelint - Rule custom-property-no-missing-var-function
• MDN documentation about using CSS custom properties