{"id":20408,"library":"prettier-plugin-rational-order","title":"prettier-plugin-rational-order","description":"Prettier plugin that sorts CSS property declarations into a rational order (positioning, box model, typography, visual, animation, misc). Version 1.0.3 is the latest stable release (no further releases since initial). It groups related properties together making styles more readable. Alternative to stylelint-based ordering like stylelint-config-rational-order, but works as a formatter instead of a linter. Supports CSS, SCSS, and Sass. Requires Prettier >=2.3.","status":"active","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/tujoworker/prettier-plugin-rational-order","tags":["javascript","prettier","plugin","rational","order","styling","properties","css","scss"],"install":[{"cmd":"npm install prettier-plugin-rational-order","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-rational-order","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-rational-order","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; the plugin requires Prettier to be installed and runs as a Prettier plugin.","package":"prettier","optional":false}],"imports":[{"note":"Prettier automatically discovers plugins with the 'prettier-plugin-' prefix. No import statement is needed.","wrong":"import 'prettier-plugin-rational-order'","symbol":"Plugin","correct":"// Plugin auto-loads when installed. No explicit import needed."},{"note":"Prettier expects the plugin path relative to the config file. Using just the package name may work in some setups but the explicit path is more reliable.","wrong":"{\n  \"plugins\": [\"prettier-plugin-rational-order\"]\n}","symbol":".prettierrc plugins","correct":"{\n  \"plugins\": [\"./node_modules/prettier-plugin-rational-order\"]\n}"},{"note":"Order of arguments matters in some shells; --plugin should come before --write.","wrong":"npx prettier --plugin=prettier-plugin-rational-order --write '**/*.css'","symbol":"CLI usage","correct":"npx prettier --write --plugin=prettier-plugin-rational-order '**/*.css'"}],"quickstart":{"code":"npm install --save-dev prettier prettier-plugin-rational-order\necho '{ \"plugins\": [\"./node_modules/prettier-plugin-rational-order\"] }' > .prettierrc\ncat <<EOF > test.css\n.declaration-order {\n  color: #333;\n  margin: 0;\n  position: absolute;\n  padding: 10px;\n  font-size: 16px;\n}\nEOF\nnpx prettier --write test.css\ncat test.css\n# Output will be grouped by rational order.","lang":"bash","description":"Install the plugin, configure Prettier, create a CSS file with mixed order, run prettier, and view the reordered output."},"warnings":[{"fix":"Ensure the plugin is installed as a local devDependency, or specify the full path in the plugins array.","message":"Plugin auto-loads only if installed in the same project as Prettier. If installed globally or in a monorepo root, Prettier may not find it.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use prettier --check to verify ordering without overwriting, and manually adjust if needed.","message":"The plugin may reorder properties in an unexpected way for files with complex selectors or nested rules. Always review changes before committing.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use the appropriate Prettier config to associate the plugin with those file types.","message":"Does not support CSS-in-JS or styled-components by default; only works with .css, .scss, .sass files.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Consider using stylelint-config-rational-order or a more actively maintained alternative.","message":"This plugin is no longer actively maintained. Future CSS property additions may not be sorted correctly.","severity":"deprecated","affected_versions":">=0.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 --save-dev prettier-plugin-rational-order","cause":"Plugin is not installed or not in node_modules.","error":"Cannot find module 'prettier-plugin-rational-order'"},{"fix":"Set plugins to the relative path: 'plugins': ['./node_modules/prettier-plugin-rational-order']","cause":"Prettier cannot find the plugin despite being installed, often due to wrong path in .prettierrc.","error":"Couldn't resolve plugin \"prettier-plugin-rational-order\""}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}