prettier-plugin-rational-order

1.0.3 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Cannot find module 'prettier-plugin-rational-order' ↓

cause Plugin is not installed or not in node_modules.

fix

Run npm install --save-dev prettier-plugin-rational-order

error Couldn't resolve plugin "prettier-plugin-rational-order" ↓

cause Prettier cannot find the plugin despite being installed, often due to wrong path in .prettierrc.

fix

Set plugins to the relative path: 'plugins': ['./node_modules/prettier-plugin-rational-order']

Warnings

gotcha 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. ↓

fix Ensure the plugin is installed as a local devDependency, or specify the full path in the plugins array.

gotcha The plugin may reorder properties in an unexpected way for files with complex selectors or nested rules. Always review changes before committing. ↓

fix Use prettier --check to verify ordering without overwriting, and manually adjust if needed.

gotcha Does not support CSS-in-JS or styled-components by default; only works with .css, .scss, .sass files. ↓

fix Use the appropriate Prettier config to associate the plugin with those file types.

deprecated This plugin is no longer actively maintained. Future CSS property additions may not be sorted correctly. ↓

fix Consider using stylelint-config-rational-order or a more actively maintained alternative.

Install

npm install prettier-plugin-rational-order

yarn add prettier-plugin-rational-order

pnpm add prettier-plugin-rational-order

Imports

Plugin
wrong
```
import 'prettier-plugin-rational-order'
```
correct
```
// Plugin auto-loads when installed. No explicit import needed.
```
Prettier automatically discovers plugins with the 'prettier-plugin-' prefix. No import statement is needed.
.prettierrc plugins
wrong
```
{
  "plugins": ["prettier-plugin-rational-order"]
}
```
correct
```
{
  "plugins": ["./node_modules/prettier-plugin-rational-order"]
}
```
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.

CLI usage

wrong

npx prettier --plugin=prettier-plugin-rational-order --write '**/*.css'

correct

npx prettier --write --plugin=prettier-plugin-rational-order '**/*.css'

Order of arguments matters in some shells; --plugin should come before --write.

Quickstart

Install the plugin, configure Prettier, create a CSS file with mixed order, run prettier, and view the reordered output.

npm install --save-dev prettier prettier-plugin-rational-order
echo '{ "plugins": ["./node_modules/prettier-plugin-rational-order"] }' > .prettierrc
cat <<EOF > test.css
.declaration-order {
  color: #333;
  margin: 0;
  position: absolute;
  padding: 10px;
  font-size: 16px;
}
EOF
npx prettier --write test.css
cat test.css
# Output will be grouped by rational order.