noInvalidPropertyInitValue (CSS)

Language CSS

Summary

Rule available since: v2.5.8
Diagnostic Category: lint/nursery/noInvalidPropertyInitValue
This rule doesn’t have a fix.
The default severity of this rule is information.

How to configure

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

Description

Checks that the initial-value of an @property rule follows the value format declared by its syntax.

Browsers do not register a custom property when its initial-value does not follow this format.

For function values, this rule checks the function name but does not check its arguments. It leaves the browser to validate:

indexed or unknown env() values, whose result may depend on an index or fallback;
math functions whose result depends on their arguments, such as calc(), min(), and max(), used with <angle>, <integer>, <length>, <length-percentage>, <number>, <percentage>, <resolution>, or <time>;
color functions such as rgb() and color-mix() used with <color>;
image functions such as linear-gradient() and image-set() used with <image>;
transform functions such as rotate() and translateX() used with <transform-function> or <transform-list>.

Examples

Invalid

red is a color, not a length, so the browser does not register --size.

1
@property --size {
2
  syntax: "<length>";
3
  inherits: false;
4
  initial-value: red;
5
}

code-block.css:4:18 lint/nursery/noInvalidPropertyInitValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The initial-value does not match the registered property syntax.
  
    2 │   syntax: "<length>";
    3 │   inherits: false;
  > 4 │   initial-value: red;
      │                  ^^^
    5 │ }
    6 │ 
  
  ℹ A mismatched initial value prevents the custom property from being registered.
  
  ℹ Use an initial value accepted by the syntax descriptor.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

#fff is a color, not an image, so the browser does not register --background-image.

1
@property --background-image {
2
  syntax: "<image>";
3
  inherits: false;
4
  initial-value: #fff;
5
}

code-block.css:4:18 lint/nursery/noInvalidPropertyInitValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The initial-value does not match the registered property syntax.
  
    2 │   syntax: "<image>";
    3 │   inherits: false;
  > 4 │   initial-value: #fff;
      │                  ^^^^
    5 │ }
    6 │ 
  
  ℹ A mismatched initial value prevents the custom property from being registered.
  
  ℹ Use an initial value accepted by the syntax descriptor.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

<color># requires one or more colors separated by commas. The browser does not register --palette because red blue has no comma.

1
@property --palette {
2
  syntax: "<color>#";
3
  inherits: false;
4
  initial-value: red blue;
5
}

code-block.css:4:18 lint/nursery/noInvalidPropertyInitValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The initial-value does not match the registered property syntax.
  
    2 │   syntax: "<color>#";
    3 │   inherits: false;
  > 4 │   initial-value: red blue;
      │                  ^^^^^^^^
    5 │ }
    6 │ 
  
  ℹ A mismatched initial value prevents the custom property from being registered.
  
  ℹ Use an initial value accepted by the syntax descriptor.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

Both 1rem and calc(1px + 2px) use length values, so they follow their declared formats.

1
@property --size {
2
  syntax: "<length>";
3
  inherits: false;
4
  initial-value: 1rem;
5
}
6

7
@property --calculated-size {
8
  syntax: "<length>";
9
  inherits: false;
10
  initial-value: calc(1px + 2px);
11
}