ESLint Plugin CSS Import Order

1.1.0 verified Sat Apr 25 auth: no javascript

An ESLint plugin that enforces a consistent ordering of CSS imports, separating them from JavaScript/TypeScript imports. Version 1.1.0 is the latest stable release with moderate release cadence. It differs from alternatives by focusing specifically on CSS import ordering without additional rules, and it ships TypeScript type definitions.

Common errors

error Error: Failed to load plugin 'css-import-order' declared in 'extends': Cannot find module 'eslint-plugin-css-import-order' ↓

cause Plugin not installed

fix

Run 'npm install -D eslint-plugin-css-import-order'

error Configuration for rule "css-import-order/order" is invalid: Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '"warn"'). ↓

cause Using string severity in ESLint v6+ - needs numeric value

fix

Set rule severity as number: 'css-import-order/order': 1 or 'warn' is allowed in some versions but use number for consistency.

Warnings

breaking ESLint peer dependency range <9.0.0; plugin incompatible with ESLint v9+ ↓

fix Use ESLint v8 or lower, or wait for plugin update.

deprecated The recommended config uses deprecated 'extends' property; ESLint v9 recommends flat config ↓

fix Use flat config with 'import plugin from 'eslint-plugin-css-import-order'; export default [plugin.configs.recommended];'

gotcha Rule only checks CSS imports (ending in .css), not other style imports like .scss or .less ↓

fix Configure custom extensions if needed via rule options.

Install

npm install eslint-plugin-css-import-order

yarn add eslint-plugin-css-import-order

pnpm add eslint-plugin-css-import-order

Imports

plugin

wrong

const plugin = require('eslint-plugin-css-import-order')

correct

import plugin from 'eslint-plugin-css-import-order'

ESM default import; also works with require in CJS projects.

rules

wrong

import { cssImportOrderRule } from 'eslint-plugin-css-import-order'

correct

import { rules } from 'eslint-plugin-css-import-order'

Named export for rules object.

configs
```
import { configs } from 'eslint-plugin-css-import-order'
```
Named export for configuration presets, e.g., configs.recommended.

Quickstart

Installs the plugin, adds it to ESLint config, and shows a fix for CSS import ordering.

// Install: npm i -D eslint-plugin-css-import-order
// .eslintrc.js
module.exports = {
  plugins: ['css-import-order'],
  extends: ['plugin:css-import-order/recommended'],
  rules: {
    'css-import-order/order': 'warn'
  }
};

// Example code that triggers the rule:
import A from 'module-a';
import './my-css.css';  // CSS import out of order
import B from './module-b';
// After fix:
import A from 'module-a';
import B from './module-b';

import './my-css.css';