noMissingVarFunction

このコンテンツはまだ日本語訳がありません。

Summary

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

How to configure

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

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

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
}

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
}

noMissingVarFunction

Summary

How to configure

Description

Examples

Invalid

Valid

Related links