JSPM

postcss-sort-style-rules

0.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q27401F
  • License MIT

PostCSS plugin to sort style rules according to selector specificity.

Package Exports

  • postcss-sort-style-rules

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-sort-style-rules) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Sort Style Rules Build Status

PostCSS plugin to sort style rules according to selector specificity.

The order of CSS style rules only matters if two selector share same specificity. If two style rules have different specificity, changing their order will be safe and this will increase the chance that two style rules with same specificity become adjacent style rules. This is where postcss-merge-rules become useful.

If a style rule have a group of selectors, we can only rearrange the order if all selectors in one group have lower specificity than those in the other group.

.post {
  font-size: 1.5rem;
}
#title, div a {
  color: #69c;
}
.post {
  color: #ccc;
}
div {
  box-sizing: border-box;
}
div {
  box-sizing: border-box;
}
.post {
  font-size: 1.5rem;
}
#title, div a {
  color: #69c;
}
.post {
  color: #ccc;
}

Usage

postcss([ require('postcss-sort-style-rules') ])

See PostCSS docs for examples for your environment.