@jchiam/eslint-plugin-css-in-js

eslint-plugin-css-in-js

This plugin provides a collection of ESLint rules that help with linting CSS-in-JS codebases.

Requirements

• ESLint 9 or 10
• Node.js >= 22

Installation

npm i -D eslint @jchiam/eslint-plugin-css-in-js

Usage

Add the plugin to your eslint.config.js:

import cssInJs from '@jchiam/eslint-plugin-css-in-js';

export default [
  {
    plugins: {
      '@jchiam/css-in-js': cssInJs
    },
    rules: {
      '@jchiam/css-in-js/css-concentric-order': 'warn'
    }
  }
];

No rules are enabled by default — add only the rules you need.

Supported Rules

• css-concentric-order — enforce concentric ordering of CSS-in-JS properties

Breaking Changes

v0 (legacy) to current

Migrated to ESLint flat config (required for ESLint 9+). The .eslintrc format is no longer supported.

Plugin registration changes from .eslintrc:

{
  "plugins": ["@jchiam/eslint-plugin-css-in-js"],
  "rules": {
    "@jchiam/css-in-js/css-concentric-order": "warn"
  }
}

To eslint.config.js:

import cssInJs from '@jchiam/eslint-plugin-css-in-js';

export default [
  {
    plugins: { '@jchiam/css-in-js': cssInJs },
    rules: { '@jchiam/css-in-js/css-concentric-order': 'warn' }
  }
];