@volvo-cars/eslint-plugin-css

ESLint Plugin CSS

ESLint plugin that provides linting rules for Volvo Cars CSS design system classes. It validates class usage, detects conflicts, and enforces design system compliance.

Installation

npm install --save-dev @volvo-cars/eslint-plugin-css
# or
yarn add --dev @volvo-cars/eslint-plugin-css

Usage

ESLint 9+ (Flat Config)

In your eslint.config.js:

Using recommended config:

import { defineConfig } from '@eslint/config';
import volvoCarsCss from '@volvo-cars/eslint-plugin-css';

export default defineConfig([
  volvoCarsCss.configs['flat/recommended'],
  // ... other plugins and configs
]);

Custom rule configuration:

import { defineConfig } from '@eslint/config';
import volvoCarsCss from '@volvo-cars/eslint-plugin-css';

export default defineConfig([
  {
    files: ['src/**/*.{js,jsx,ts,tsx}'],
    plugins: {
      '@volvo-cars/css': volvoCarsCss,
    },
    rules: {
      '@volvo-cars/css/conflicting-class': 'warn',
      '@volvo-cars/css/no-custom-class': 'warn',
      '@volvo-cars/css/no-deprecated-class': 'warn',
      '@volvo-cars/css/prefer-design-system-class': 'error',
      '@volvo-cars/css/no-redundant-class-util': 'warn',
      '@volvo-cars/css/no-replaceable-inline-style': 'warn',
      '@volvo-cars/css/redundant-class': 'warn',
    },
  },
]);

ESLint 8 (Legacy Config)

In your .eslintrc.json or .eslintrc.js:

{
  "extends": ["plugin:@volvo-cars/css/recommended"],
  "rules": {
    "@volvo-cars/css/conflicting-class": "warn",
    "@volvo-cars/css/no-custom-class": "warn",
    "@volvo-cars/css/no-deprecated-class": "warn",
    "@volvo-cars/css/prefer-design-system-class": "error",
    "@volvo-cars/css/no-redundant-class-util": "warn",
    "@volvo-cars/css/no-replaceable-inline-style": "warn",
    "@volvo-cars/css/redundant-class": "warn"
  }
}

Rules

Available Rules

• conflicting-class – Detects conflicting CSS class names that declare the same properties
• no-custom-class – Prevents use of custom classes not in the design system
• no-deprecated-class – Warns about deprecated design system classes
• prefer-design-system-class – Suggests design system classes over Tailwind equivalents
• no-redundant-class-util – Detects redundant utility class combinations
• no-replaceable-inline-style – Suggests design system classes over inline styles
• redundant-class – Detects redundant or conflicting class declarations

prefer-design-system-class

This rule detects Tailwind CSS classes (prefixed with tw:) that already exist in the design system. It helps ensure developers use the design system classes instead of Tailwind equivalents.

// ❌ Bad - using Tailwind when design system class exists
<div className="tw:flex tw:gap-16" />

// ✅ Good - using design system classes
<div className="flex gap-16" />

// ✅ Good - Tailwind class that doesn't exist in design system
<div className="tw:animate-spin" />

This rule is auto-fixable and will replace tw:class-name with class-name when the class exists in the design system.

Multiple Meta Files

Using with @volvo-cars/edls-css

If you want to use @volvo-cars/edls-css package together with @volvo-cars/eslint-plugin-css, configure multiple meta files to validate classes from both packages.

Flat Config (ESLint 9+):

import { defineConfig } from '@eslint/config';
import volvoCarsCss from '@volvo-cars/eslint-plugin-css';

export default defineConfig([
  {
    files: ['src/**/*.{js,jsx,ts,tsx}'],
    plugins: {
      '@volvo-cars/css': volvoCarsCss,
    },
    settings: {
      css: {
        metaFiles: [
          '@volvo-cars/css/meta.json',
          '@volvo-cars/edls-css/meta.json',
        ],
      },
    },
    rules: {
      '@volvo-cars/css/conflicting-class': 'warn',
      '@volvo-cars/css/no-custom-class': 'warn',
      '@volvo-cars/css/no-deprecated-class': 'warn',
      '@volvo-cars/css/prefer-design-system-class': 'error',
      '@volvo-cars/css/no-redundant-class-util': 'warn',
      '@volvo-cars/css/no-replaceable-inline-style': 'warn',
      '@volvo-cars/css/redundant-class': 'warn',
    },
  },
]);

Legacy Config (ESLint 8):

{
  "settings": {
    "css": {
      "metaFiles": [
        "@volvo-cars/css/meta.json",
        "@volvo-cars/edls-css/meta.json"
      ]
    }
  }
}

This configuration allows the plugin to lint classes from both the core design system and the EDLS extension package.