easy-comb

English · 简体中文

Sort properties and unify the code style of CSS, Less, SCSS and Sass files, with the csscomb command and config files you already use.

easy-comb is a maintained fork of CSScomb 4.3.0, which no longer gets fixes. It keeps the csscomb command, .csscomb.json and the option names, so switching is one npm install. On top of that it fixes long-standing CSScomb bugs, such as extra semicolons after sorting and broken rgba() colors, and parses syntax that CSScomb rejects, such as Less padding-@{side}.

See what it does to a stylesheet

With the built-in config and no config file, npx csscomb card.css turns this:

.card{color:#FFFFFF;z-index:2;padding:0 .5em;display:flex;position:relative;
  -webkit-transition:opacity .3s;transition:opacity .3s;background:url('bg.png') #FF0000}
A:hover, LI > SPAN{font-weight:bold;color:#AABBCC;}

into this:

.card {
  position: relative;
  z-index: 2;

  display: flex;

  padding: 0 0.5em;

  color: #fff;

  background: url("bg.png") #f00;

  -webkit-transition: opacity 0.3s;
          transition: opacity 0.3s;
}

a:hover, li > span {
  font-weight: bold;
  color: #abc;
}

Properties are grouped by role, colors are shortened and lowercased, quotes and leading zeros are unified, and vendor prefixes are aligned.

Format your first stylesheets

npm install easy-comb --save-dev
npx csscomb src/styles
npx csscomb --lint src/styles

The second command fixes every stylesheet under src/styles in place; the third only checks them and exits with 1 if any file would change. You need Node.js ^16.17.0 || >=18.3.0; global installs and version details are in Install easy-comb.

What you get

• Your CSScomb setup keeps working: the command is still csscomb, .csscomb.json and every option name are unchanged, and the few breaking changes are listed in Switch from CSScomb 4.3.0.
• A complete property order you never maintain: the built-in order follows stylelint-config-recess-order and places every other standard property from mdn-data; unlisted vendor-prefixed properties land right before their standard property, and custom properties (--color) can be sorted too. See Sort properties.
• Real-world stylesheets format safely: all 18,461 valid cases of WPT, css-parsing-tests, sass-spec and less.js format without a crash or a change in compiled output (reproduce).
• Your config comes in the format you prefer: JSON, JavaScript or TypeScript with defineConfig, or generated from a stylesheet you like (Configure easy-comb).
• Style is checked in CI and fixed on commit: --lint fails the build on unformatted files, and the same command runs from lint-staged or any editor that can run a command on save (recipes); the Node.js API ships with TypeScript declarations.

Know when to use something else

easy-comb changes the order of properties and the details its options control; it does not reprint or wrap whole files. If you want every line reprinted in one canonical layout, use Prettier; if you already use stylelint and only need property order checked and fixed there, use the stylelint-order plugin.

Learn more

• Guide: find the page for what you want to do, from the command line to the full option rules
• Switch from CSScomb 4.3.0, including a side-by-side comparison
• CHANGELOG
• easy-gonz, the parser easy-comb uses

License

MIT; a fork of CSScomb by @mishanga and @tonyganch, see credits.