noMissingVarFunction

Diagnostic Category: lint/nursery/noMissingVarFunction

Since: v1.9.2

Sources:

Same as: stylelint/custom-property-no-missing-var-function

Disallow missing var function for css variables.

This rule has the following limitations:

It only reports custom properties that are defined and accesible 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

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

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;
}

noMissingVarFunction

Examples

Invalid

Valid

Related links