noMissingVarFunction (CSS)

Language CSS

Summary

Rule available since: v1.9.2
Diagnostic Category: lint/correctness/noMissingVarFunction
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as custom-property-no-missing-var-function

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "noMissingVarFunction": "error"
6
      }
7
    }
8
  }
9
}

Description

Require var() when using a declared CSS custom property.

Custom property names begin with --, but their values must be read with var(--name). Writing the name directly does not substitute the custom property’s value.

The rule has the following limits:

It reports only custom properties that are declared and visible in the same source.
It skips properties where a name beginning with -- can be an ordinary value.
It skips the following properties:
- animation
- animation-name
- container-name
- counter-increment
- counter-reset
- counter-set
- grid-column
- grid-column-end
- grid-column-start
- grid-row
- grid-row-end
- grid-row-start
- list-style
- list-style-type
- transition
- transition-property
- view-transition-name
- will-change

Examples

Invalid

1
a {
2
  --foo: red;
3
  color: --foo;
4
}

code-block.css:3:10 lint/correctness/noMissingVarFunction ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ CSS variables '--foo' is used without the 'var()' function
  
    1 │ a {
    2 │   --foo: red;
  > 3 │   color: --foo;
      │          ^^^^^
    4 │ }
    5 │ 
  
  ℹ CSS variables should be used with the 'var()' function to ensure proper fallback behavior and browser compatibility.

1
.parent {
2
  --foo: red;
3
  .child {
4
    color: --foo;
5
  }
6
}

code-block.css:4:12 lint/correctness/noMissingVarFunction ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ CSS variables '--foo' is used without the 'var()' function
  
    2 │   --foo: red;
    3 │   .child {
  > 4 │     color: --foo;
      │            ^^^^^
    5 │   }
    6 │ }
  
  ℹ CSS variables should be used with the 'var()' function to ensure proper fallback behavior and browser compatibility.

1
@property --bar {}
2

3
a {
4
  color: --bar;
5
}

code-block.css:4:10 lint/correctness/noMissingVarFunction ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ CSS variables '--bar' is used without the 'var()' function
  
    3 │ a {
  > 4 │   color: --bar;
      │          ^^^^^
    5 │ }
    6 │ 
  
  ℹ CSS variables should be used with the 'var()' function to ensure proper fallback behavior and browser compatibility.

1
:root {
2
  --baz: 0;
3
}
4

5
a {
6
  --foo: --baz;
7
}

code-block.css:6:10 lint/correctness/noMissingVarFunction ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ CSS variables '--baz' is used without the 'var()' function
  
    5 │ a {
  > 6 │   --foo: --baz;
      │          ^^^^^
    7 │ }
    8 │ 
  
  ℹ CSS variables should be used with the 'var()' function to ensure proper fallback behavior and browser compatibility.

Valid

1
p {
2
  color: var(--foo);
3
}

1
p {
2
  --foo: red;
3
  color: var(--foo);
4
}

An undeclared name is not reported because the rule cannot determine whether it was meant to refer to a custom property:

1
p {
2
  color: --foo;
3
}

1
*:root {
2
--global: red;
3
}
4

5
a {
6
    color: var(--global);
7
}

1
@property --global-value {}
2
a {
3
  color: var(--global-value);
4
}

1
a {
2
  view-transition-name: --bbb;
3
}