{"id":19715,"library":"eslint-plugin-css-import-order","title":"ESLint Plugin CSS Import Order","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","eslint","typescript","imports"],"install":[{"cmd":"npm install eslint-plugin-css-import-order","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-css-import-order","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-css-import-order","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin requires ESLint version >=6.0.0 and <9.0.0","package":"eslint","optional":false}],"imports":[{"note":"ESM default import; also works with require in CJS projects.","wrong":"const plugin = require('eslint-plugin-css-import-order')","symbol":"plugin","correct":"import plugin from 'eslint-plugin-css-import-order'"},{"note":"Named export for rules object.","wrong":"import { cssImportOrderRule } from 'eslint-plugin-css-import-order'","symbol":"rules","correct":"import { rules } from 'eslint-plugin-css-import-order'"},{"note":"Named export for configuration presets, e.g., configs.recommended.","wrong":null,"symbol":"configs","correct":"import { configs } from 'eslint-plugin-css-import-order'"}],"quickstart":{"code":"// Install: npm i -D eslint-plugin-css-import-order\n// .eslintrc.js\nmodule.exports = {\n  plugins: ['css-import-order'],\n  extends: ['plugin:css-import-order/recommended'],\n  rules: {\n    'css-import-order/order': 'warn'\n  }\n};\n\n// Example code that triggers the rule:\nimport A from 'module-a';\nimport './my-css.css';  // CSS import out of order\nimport B from './module-b';\n// After fix:\nimport A from 'module-a';\nimport B from './module-b';\n\nimport './my-css.css';","lang":"javascript","description":"Installs the plugin, adds it to ESLint config, and shows a fix for CSS import ordering."},"warnings":[{"fix":"Use ESLint v8 or lower, or wait for plugin update.","message":"ESLint peer dependency range <9.0.0; plugin incompatible with ESLint v9+","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use flat config with 'import plugin from 'eslint-plugin-css-import-order'; export default [plugin.configs.recommended];'","message":"The recommended config uses deprecated 'extends' property; ESLint v9 recommends flat config","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Configure custom extensions if needed via rule options.","message":"Rule only checks CSS imports (ending in .css), not other style imports like .scss or .less","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install -D eslint-plugin-css-import-order'","cause":"Plugin not installed","error":"Error: Failed to load plugin 'css-import-order' declared in 'extends': Cannot find module 'eslint-plugin-css-import-order'"},{"fix":"Set rule severity as number: 'css-import-order/order': 1 or 'warn' is allowed in some versions but use number for consistency.","cause":"Using string severity in ESLint v6+ - needs numeric value","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\"')."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}