Usage `no-invalid-variable-assignment`

What is this rule?

This rule disallows the assignment of CSS variables to invalid properties in your CSS code. It encourages the use of variables with properties that match their intended use to promote consistency and maintainability.

Options

This rule takes one option, a boolean value that determines whether the rule is enabled or disabled. By default, the rule is enabled when set to true.

Properties affected

This rule checks the following CSS properties:

• font-size
• font-weight
• color
• background-color
• border-color
• border-radius

Examples

Good examples

The following examples do not trigger any warnings:

.foo {
  color: var(--s-size-text-default);
}

.foo {
  font-size: var(--s-size-text-default);
}

.bar {
  border-radius: var(--s-size-radius-medium);
}

Bad examples

The following examples trigger warnings:

.foo {
  height: var(--s-size-text-default);
}

.foo {
  font-size: var(--s-size-radius-medium);
}

Configuration

To enable this rule, add the following configuration to your Stylelint configuration file:

{
  "rules": {
    "@tryg/no-invalid-variable-assignment": [true]
  }
}

Message

When an invalid variable assignment is detected, the rule reports a message: "No invalid variable assignment."

Fix

This rule is not fixable, meaning that it cannot automatically correct the invalid variable assignment. You will need to manually update the code to use the variable with a valid property.