Skip to content
Biome
Docs Enterprise Playground
Blog

noMissingVarFunction

Summary

Section titled Summary

Description

Section titled Description

Disallow missing var function for css variables.

This rule has the following limitations:

  • It only reports custom properties that are defined and accessible within the same source.
  • It does not check properties that can contain author-defined identifiers.
  • It ignores the following properties:
    • animation
    • animation-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

Section titled Examples

Invalid

Section titled Invalid
a {
  --foo: red;
  color: --foo;
}
code-block.css:3:10 lint/nursery/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.
  
.parent {
  --foo: red;
  .child {
    color: --foo;
  }
}
code-block.css:4:12 lint/nursery/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.
  
@property --bar {}


a {
  color: --bar;
}
code-block.css:4:10 lint/nursery/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.
  
:root {
  --baz: 0;
}


a {
  --foo: --baz;
}
code-block.css:6:10 lint/nursery/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

Section titled Valid
p {
  color: var(--foo);
}
p {
  --foo: red;
  color: var(--foo);
}
p {
  color: --foo;
}
*:root {
--global: red;
}


a {
    color: var(--global);
}
@property --global-value {}
a {
  color: var(--global-value);
}
a {
  view-transition-name: --bbb;
}

How to configure

Section titled How to configure
biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "noMissingVarFunction": "error"
      }
    }
  }
}
Section titled Related links