Registry / devops / prettier-plugin-style-order

prettier-plugin-style-order

library0.2.2jsnpmunverified

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.

devops

npm install prettier-plugin-style-order

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-ST

prettier-plugin-style-order

devopsjavascriptv0.2.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ const prettierPluginStyleOrder = require('prettier-plugin-style-order')

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

This plugin is typically not imported directly; Prettier auto-loads it. However, if manually loading, use CommonJS require.

prettier

✓ import { format } from 'prettier'; const result = await format(code, { parser: 'css', plugins: ['prettier-plugin-style-order'] })

✗ import prettier from 'prettier'

Use named export 'format' for programmatic usage. Plugin is passed as string or object in plugins array.

prettier-plugin-style-order

✓ npm install -D prettier-plugin-style-order (then Prettier auto-loads)

✗ npm install -g prettier-plugin-style-order

Plugin is auto-discovered by Prettier when installed locally. No explicit import needed.

Installs the plugin and runs Prettier to sort CSS properties in a file.

// Install: npm install -D prettier prettier-plugin-style-order // Create a CSS file (example.css): // .example { // color: red; // display: flex; // position: absolute; // top: 0; // background: blue; // } // Run: npx prettier --write example.css // Now example.css is sorted: // .example { // position: absolute; // top: 0; // display: flex; // color: red; // background: blue; // }

Debug

Known issues

gotchaPlugin may not work with Prettier versions < 1.13.

fix

Upgrade Prettier to >= 1.13.

affects: <1.13

gotchaPlugin only sorts properties within rules; it does not sort entire stylesheets or across multiple rules.

fix

Ensure each CSS rule is sorted independently; no cross-rule sorting.

affects: all

gotchaPlugin may conflict with other Prettier plugins that modify CSS, leading to unexpected ordering.

fix

Use only one CSS-related Prettier plugin at a time, or configure load order carefully.

affects: all

Errors

Common errors & fixes

Cannot find module 'prettier-plugin-style-order'

Plugin not installed or Prettier not using correct node_modules path.

fix

Run 'npm install -D prettier-plugin-style-order' in the project root.

Require stack: ...\prettier\index.js [...] \prettier-plugin-style-order\src\index.js

Plugin source is not built; installed from GitHub raw source.

fix

Install from npm registry (prettier-plugin-style-order@0.2.2) instead of GitHub.

Without configuration, plugin is loaded but sorting order may be incorrect for custom groups.

Plugin uses a default order; custom order not supported.

fix

Accept default ordering or switch to a more configurable tool like stylelint-order.

Upgrade

Version history

0.2.2latest on npm

Audit

Dependencies

prettieroptionalpeer dependency, plugin requires Prettier >= 1.13

Agent activity

3 hits · last 30 days

node

Resources

githubhttps://github.com/natemoo-re/prettier-plugin-style-order ↗

packagehttps://www.npmjs.com/package/prettier-plugin-style-order ↗