noMissingVarFunction

摘要

¥Summary

规则生效日期：v1.9.2

¥Rule available since: v1.9.2
诊断类别：lint/correctness/noMissingVarFunction

¥Diagnostic Category: lint/correctness/noMissingVarFunction
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
来源：

¥Sources:
- 与 custom-property-no-missing-var-function 相同
  
  ¥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

禁止 CSS 变量缺少 var 函数。

¥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

摘要

如何配置

描述

示例

无效

有效

相关链接