Usage `no-hardcoded-declaration-values`

What is this rule?

This rule disallows the use of hardcoded values for certain CSS properties. Instead, it encourages the use of CSS variables (tokens) to promote consistency and maintainability in your CSS code.

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 {
  font-size: var(--your-custom-font-size);
}

.foo {
  height: 200px;
}

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

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

Bad examples

The following examples trigger warnings:

.foo {
  font-weight: bold;
}

.foo {
  font-size: 20px;
}

.foo {
  color: rgb(149, 60, 60);
}

Configuration

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

{
  "rules": {
    "@tryg/no-hardcoded-declaration-values": [true]
  }
}

Message

When a hardcoded value is detected, the rule reports a message: "No hardcoded declaration values. Use css token instead."