@volvo-cars/stylelint-config

Questions? Ask in Slack #vcc-ui

Stylelint configuration for Volvo Cars.

Helps you fix common issues and maintain best practices. Code formatting should be done using Prettier with the default settings and is not handled with Stylelint.

Types of rules

• :no_entry_sign: error - rules that prevent problems that risk causing bugs or performance issues in production.
• :warning: warn - stylistic rules that make code more readable, consistent and maintainable, or rules only targeting tests or documentation.

Install

yarn add @volvo-cars/stylelint-config

Usage

The default configuration includes all Stylelint rules plus design system token enforcement:

module.exports = {
  extends: ['@volvo-cars/stylelint-config'],
};

To check only design system token violations without other Stylelint rules:

module.exports = {
  extends: ['@volvo-cars/stylelint-config/design-tokens'],
};

This can be useful for running token checks separately from other lint checks.

Design System Token Enforcement

This package includes custom Stylelint plugins that enforce the use of design system tokens instead of hard-coded CSS values. These rules help maintain visual consistency and prevent contributors from accidentally adding hard-coded values.

volvo-cars/design-system-colors

Ensures color properties use design system color tokens (--v-color-*) rather than hard-coded values.

Do:

color: var(--v-color-foreground-primary);
background-color: var(--v-color-background-primary);
border: 1px solid var(--v-color-ornament);

Don't:

color: #000000;
       ^^^^^^^
background-color: rgb(255, 255, 255);
                  ^^^^^^^^^^^^^^^^^^^
border-color: red;
              ^^^

volvo-cars/design-system-typography

Ensures typography properties use design system typography tokens (--v-font-*) rather than hard-coded values.

Do:

font-family: var(--v-font-family);
font-size: var(--v-font-16-size);
font: var(--v-font-16);

Don't:

font-family: Arial, sans-serif;
             ^^^^^^^^^^^^^^^^^^
font-size: 16px;
           ^^^^
font-weight: 400;
             ^^^

volvo-cars/design-system-spacing

Ensures spacing properties use design system spacing tokens (--v-space-*) rather than hard-coded values.

Do:

margin: var(--v-space-16);
padding: var(--v-space-8) var(--v-space-16);
gap: var(--v-space-24);

Don't:

margin: 16px;
        ^^^^
padding: 1rem 2rem;
         ^^^^^^^^^^
gap: 24px;
     ^^^^

Disabling Rules

To use a non-token value for a specific case, disable the rule:

/* stylelint-disable-next-line volvo-cars/design-system-colors */
background-color: #custom-brand-color;