{"id":20433,"library":"prettier-plugin-style-order","title":"Prettier Plugin Style Order","description":"A Prettier plugin that sorts CSS property declarations and groups related properties together. Version 0.2.2, released as a stable package. It follows a rational order (positioning, box model, typography, visual, animation, misc) similar to stylelint-config-rational-order. Unlike other CSS sorting tools, it integrates seamlessly with Prettier without requiring additional configuration. The plugin works with Prettier >= 1.13 and supports CSS, SCSS, and Less files. It is lightweight, has no runtime dependencies, and relies on postcss-sorting under the hood.","status":"active","version":"0.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/natemoo-re/prettier-plugin-style-order","tags":["javascript","prettier","plugin","style","css","order","group"],"install":[{"cmd":"npm install prettier-plugin-style-order","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-style-order","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-style-order","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, plugin requires Prettier >= 1.13","package":"prettier","optional":true}],"imports":[{"note":"This plugin is typically not imported directly; Prettier auto-loads it. However, if manually loading, use CommonJS require.","wrong":"import prettierPluginStyleOrder from 'prettier-plugin-style-order'","symbol":"default","correct":"const prettierPluginStyleOrder = require('prettier-plugin-style-order')"},{"note":"Use named export 'format' for programmatic usage. Plugin is passed as string or object in plugins array.","wrong":"import prettier from 'prettier'","symbol":"prettier","correct":"import { format } from 'prettier'; const result = await format(code, { parser: 'css', plugins: ['prettier-plugin-style-order'] })"},{"note":"Plugin is auto-discovered by Prettier when installed locally. No explicit import needed.","wrong":"npm install -g prettier-plugin-style-order","symbol":"prettier-plugin-style-order","correct":"npm install -D prettier-plugin-style-order (then Prettier auto-loads)"}],"quickstart":{"code":"// Install: npm install -D prettier prettier-plugin-style-order\n\n// Create a CSS file (example.css):\n// .example {\n//   color: red;\n//   display: flex;\n//   position: absolute;\n//   top: 0;\n//   background: blue;\n// }\n\n// Run: npx prettier --write example.css\n\n// Now example.css is sorted:\n// .example {\n//   position: absolute;\n//   top: 0;\n//   display: flex;\n//   color: red;\n//   background: blue;\n// }\n","lang":"javascript","description":"Installs the plugin and runs Prettier to sort CSS properties in a file."},"warnings":[{"fix":"Upgrade Prettier to >= 1.13.","message":"Plugin may not work with Prettier versions < 1.13.","severity":"gotcha","affected_versions":"<1.13"},{"fix":"Ensure each CSS rule is sorted independently; no cross-rule sorting.","message":"Plugin only sorts properties within rules; it does not sort entire stylesheets or across multiple rules.","severity":"gotcha","affected_versions":"all"},{"fix":"Use only one CSS-related Prettier plugin at a time, or configure load order carefully.","message":"Plugin may conflict with other Prettier plugins that modify CSS, leading to unexpected ordering.","severity":"gotcha","affected_versions":"all"}],"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 prettier-plugin-style-order' in the project root.","cause":"Plugin not installed or Prettier not using correct node_modules path.","error":"Cannot find module 'prettier-plugin-style-order'"},{"fix":"Install from npm registry (prettier-plugin-style-order@0.2.2) instead of GitHub.","cause":"Plugin source is not built; installed from GitHub raw source.","error":"Require stack: ...\\prettier\\index.js [...] \\prettier-plugin-style-order\\src\\index.js"},{"fix":"Accept default ordering or switch to a more configurable tool like stylelint-order.","cause":"Plugin uses a default order; custom order not supported.","error":"Without configuration, plugin is loaded but sorting order may be incorrect for custom groups."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}