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.