Usage `no-deprecated-vars`

What is this rule?

This rule disallows the use of deprecated CSS tokens (variables) in your CSS code. It encourages the use of up-to-date and maintained tokens to promote consistency and maintainability.

Options

This rule takes two options:

true: Enables the rule.
ignoreProperties: An optional string that specifies a property to ignore.

Examples

Good examples

The following examples do not trigger any warnings:

.foo {
  font-size: var(--your-custom-font-size);
}

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

.bar {
  border-radius: var(--your-custom-border-radius);
}

Bad examples

The following examples trigger warnings:

.foo {
  font-size: var(--color-base-primary);
}

.foo {
  font-size: var(--button-border-radius-top-left);
}

Configuration

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

{
  "rules": {
    "@tryg/no-deprecated-vars": [true]
  }
}

When a deprecated token is detected, the rule reports a message: "Deprecated token "{token}" {extra message}". The extra message is optional and is included if the deprecated token has a replacement suggestion.

Fix

This rule is fixable, meaning that it can automatically replace the deprecated token with the suggested replacement. To enable this feature, add the fix option to your Stylelint configuration file:

{
  "fix": true
}