ESLint plugin for Griffel

ESLint plugin to follow best practices and anticipate common mistakes when writing styles with Griffel

Install

yarn add --dev @griffel/eslint-plugin
# or
npm install --save-dev @griffel/eslint-plugin

Usage

Note: This plugin requires ESLint 9+ and flat config (eslint.config.mjs).

Use the recommended configuration in your eslint.config.mjs:

import griffelPlugin from '@griffel/eslint-plugin';

export default [
  {
    files: ['**/*.ts', '**/*.tsx'],
    ...griffelPlugin.configs.recommended,
  },
];

Shareable configurations

This plugin exports recommended configuration that enforce good practices, but you can choose to use only the ones that are necessary for your use case:

import griffelPlugin from '@griffel/eslint-plugin';

export default [
  {
    files: ['**/*.ts', '**/*.tsx'],
    plugins: {
      '@griffel': griffelPlugin,
    },
    rules: {
      '@griffel/hook-naming': 'error',
      '@griffel/no-shorthands': 'error',
      '@griffel/pseudo-element-naming': 'error',
    },
  },
];

You can find more info about enabled rules in the Supported Rules section below.

Supported Rules

Key: 🔧 = fixable

| Name | Description | 🔧 | | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | --- | | @griffel/hook-naming | Ensure that hooks returned by the makeStyles() function start with "use" | ❌ | | @griffel/no-invalid-shorthand-arguments | All shorthands must not use space separators, and instead pass in multiple arguments | ✅ | | @griffel/no-shorthands | Enforce usage of CSS longhands | ✅ | | @griffel/styles-file | Ensures that all makeStyles() and makeResetStyles() calls are placed in a .styles.js or .styles.ts file | ❌ | limitations) | ❌ | | @griffel/pseudo-element-naming | Ensures that all Pseudo Elements start with two colons | ✅ | | @griffel/top-level-styles | Ensures that all makeStyles(), makeResetStyles() and makeStaticStyles() calls are written in the top level of a file to discourage developer misuse. | ❌ | | @griffel/no-deprecated-shorthands | Ensure that deprecated shorthand functions are not used | ❌