prettier-plugin-ej-sort

1.0.0 • Public • Published

prettier-plugin-ej-sort

Prettier plugin that sorts CSS and SCSS properties using a consistent system. See the explanation for the sorting logic down below.

Order Within Rules

The order of properties within a CSS/SCSS rule is as follows:

  1. Positioning and Display. Includes:
    • position
    • top, right, bottom, left
    • transform
    • display
    • align-items, justify-content...
  2. Layout. Includes:
    • height
    • weight
    • padding
    • margin
  3. Text. Includes:
    • color
    • font-(x): family, size, weight...
    • text-align
  4. Background and Border. Includes:
    • background
    • background-(x): size, color, position...
    • border
    • border-(x): bottom, top, radius...
    • box-shadow
  5. Animation and Transition. Includes:
    • animation
    • animation-(x): duration, delay, direction...
    • transition
  6. Miscellaneous. Includes:
    • cursor
    • anything that doesn't fit into the above categories

For SCSS, you add nested selectors after all of these.

selector {
  /* positioning & display */
  position: ...;
  /* (top, bottom, etc.) */
  display: ...;
  /* (align-items, gap, etc.) */

  /* layout */
  height: ...;
  width: ...;
  padding: ...;
  margin: ...;

  /* text */
  color: ...;
  font-family: ...;
  /* (size, weight, etc.) */

  /* background & border */
  background: ...;
  /* (color, size, etc.) */
  border: ...;
  /* (radius, etc.) */

  /* animation & transition */
  animation: ...;
  /* (duration, delay, etc.) */
  transition: ...;

  /* misc */
  cursor: ...;
  /* (etc.) */

  & nested {
	...
  }
}

Package Sidebar

Install

npm i prettier-plugin-ej-sort

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

19.6 kB

Total Files

5

Last publish

Collaborators

  • ej-shafran