prettier-plugin-two-style-order

1.0.1 verified Sat Apr 25 auth: no javascript

Prettier plugin (v1.0.1) that sorts CSS/SCSS property declarations and groups related properties together. It enforces a consistent order (e.g., positioning, box model, typography, visual) without requiring a separate linter like stylelint. Minimal configuration—just install. Compatible with Prettier >=2.0.0. Releases are infrequent; last updated in 2021. Differentiators: zero config, works as a Prettier plugin, no postcss dependency.

Common errors

error Error: Cannot find module 'prettier-plugin-two-style-order' ↓

cause Plugin not installed or not in node_modules.

fix

Run: npm install --save-dev prettier-plugin-two-style-order

error Error: Your configuration of Prettier contains unknown option(s): styleOrder ↓

cause Trying to pass non-existent options to the plugin.

fix

Remove any styleOrder or similar keys from .prettierrc; the plugin has no config.

error Error: Plugin prettier-plugin-two-style-order is incompatible with Prettier v3 ↓

cause Plugin uses deprecated Prettier API.

fix

Downgrade Prettier to v2 or switch to a compatible plugin.

error Error: prettier-plugin-two-style-order: Could not parse CSS: ... ↓

cause File contains invalid CSS syntax.

fix

Fix the CSS syntax error; only valid CSS/SCSS is processed.

Warnings

breaking Plugin is incompatible with Prettier v3 (uses plugin API that was removed). ↓

fix Use an alternative like prettier-plugin-style-order or stick to Prettier v2.

deprecated No updates since 2021; may not work with newer Prettier versions. ↓

fix Check compatibility with your Prettier version or switch to actively maintained plugin.

gotcha Plugin sorts properties automatically with no configuration – unexpected order may not match team preferences. ↓

fix If you need custom ordering, use a configurable plugin like prettier-plugin-style-order or stylelint.

gotcha Installation guide in README says 'npm i -D prettier-plugin-style-order' which is a different package; actual package is prettier-plugin-two-style-order. ↓

fix Install the correct package: npm i -D prettier-plugin-two-style-order

gotcha Plugin only works with CSS and SCSS; does not support Less or other preprocessors. ↓

fix Use stylelint or other tools for Less/other syntaxes.

Install

npm install prettier-plugin-two-style-order

yarn add prettier-plugin-two-style-order

pnpm add prettier-plugin-two-style-order

Imports

default (plugin)

wrong

import prettierPluginStyleOrder from 'prettier-plugin-two-style-order'

correct

// No explicit import needed; Prettier auto-loads plugins named prettier-plugin-*

Prettier discovers plugins automatically if they are in node_modules. Manual import is unnecessary.

plugins config

wrong

// (Nothing common; just add the string to plugins array)

correct

// In .prettierrc: { "plugins": ["prettier-plugin-two-style-order"] }

If automatic discovery fails, add to .prettierrc plugins array.

style order options

wrong

// Setting styleOrder or similar config keys does nothing; the plugin has no options.

correct

// No options; plugin sorts automatically. Use .prettierrc for other prettier options.

This plugin does not expose any configuration. Sorting order is fixed.

Quickstart

Installs dependencies, creates minimal Prettier config, and runs the plugin on a CSS file to sort properties.

npm install --save-dev prettier prettier-plugin-two-style-order
echo '{
  "semi": true,
  "singleQuote": true
}' > .prettierrc
echo 'div {
  color: red;
  display: flex;
  margin: 0;
  font-size: 14px;
}' > test.css
npx prettier --write test.css