{"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,"search_vec":"'0.2.2':19 '1.13':63 'addit':56 'anim':35 'box':31 'config':41 'configur':57 'css':10,46,66,91 'declar':12 'depend':77 'file':70 'follow':26 'group':14,93 'hood':86 'integr':50 'javascript':87 'less':69 'lightweight':73 'misc':36 'model':32 'order':4,29,43,92 'packag':24 'plugin':2,7,59,89 'posit':30 'postcss':82 'postcss-sort':81 'prettier':1,6,53,62,88 'properti':11,16 'ration':28,42 'relat':15 'releas':20 'reli':79 'requir':55 'runtim':76 'scss':67 'seamless':51 'similar':37 'sort':9,47,83 'stabl':23 'style':3,90 'stylelint':40 'stylelint-config-rational-ord':39 'support':65 'togeth':17 'tool':48 'typographi':33 'unlik':44 'version':18 'visual':34 'without':54 'work':60","created_at":"2026-04-25T11:23:05.187481+00:00","updated_at":"2026-04-25T11:23:05.187481+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/natemoo-re/prettier-plugin-style-order","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/prettier-plugin-style-order","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}