@nordhealth/eslint-plugin

ESLint plugin for Nord Design System - enforces logical CSS selectors, legacy class migration, and Tailwind best practices.

Installation

pnpm add -D @nordhealth/eslint-plugin

Usage

Recommended Config

The recommended config enables Nord rules for ongoing development plus safe better-tailwindcss rules:

// eslint.config.mjs
import nordPlugin from '@nordhealth/eslint-plugin'

export default [
  nordPlugin.configs.recommended,
  // ... other configs
]

Available Configs

| Config | Description | | ------------------- | ------------------------------------------------- | | recommended | Nord rules + safe better-tailwindcss rules (warn) | | recommended-error | Same as recommended but with error severity |

Nord Rules

| Rule | Default | Description | | --------------------------------------- | ------- | ------------------------------------------------------ | | @nordhealth/logical-selectors | warn | Enforce logical CSS properties | | @nordhealth/no-legacy-classes | off | Auto-fix deprecated n-* classes to n:* equivalents | | @nordhealth/no-unknown-legacy-classes | off | Warn on unknown n-* classes |

Migration rules

The migration rules are off by default. Enable them when migrating from legacy CSS, then disable when complete:

// In your eslint.config.js
export default [
  {
    rules: {
      '@nordhealth/no-legacy-classes': 'warn',
      '@nordhealth/no-unknown-legacy-classes': 'warn'
    }
  }
]

Tailwind Rules (from better-tailwindcss)

The recommended config enables these better-tailwindcss rules by default:

• better-tailwindcss/enforce-consistent-class-order
• better-tailwindcss/enforce-consistent-important-position
• better-tailwindcss/enforce-consistent-variable-syntax
• better-tailwindcss/enforce-shorthand-classes
• better-tailwindcss/enforce-canonical-classes
• better-tailwindcss/no-deprecated-classes
• better-tailwindcss/no-duplicate-classes
• better-tailwindcss/no-unnecessary-whitespace
• better-tailwindcss/no-conflicting-classes
• better-tailwindcss/no-restricted-classes

Enabling better-tailwindcss/no-unknown-classes

The better-tailwindcss/no-unknown-classes rule is NOT enabled by default because it requires project-specific configuration:

// eslint.config.mjs
import nordPlugin from '@nordhealth/eslint-plugin'

export default [
  nordPlugin.configs.recommended,
  {
    settings: {
      'better-tailwindcss': {
        entryPoint: './path/to/your/tailwind.css'
      }
    },
    rules: {
      'better-tailwindcss/no-unknown-classes': 'warn'
    }
  }
]