Stylelint DevTool Props

Stylelint DevTool Props is a stylelint rule to enforce CSS property ordering like Chrome DevTools.

Usage

Add stylelint and Stylelint DevTool Props to your project.

npm install stylelint stylelint-devtool-prop-order --save-dev

Add Stylelint DevTool Props to your stylelint configuration.

{
  "plugins": [
    "stylelint-devtool-prop-order"
  ],
  "rules": {
    "csstools/devtool-prop-order": "always" || "ignore"
  }
}

Options

always

If the first option is "always" or true, then Stylelint DevTool Props requires all nodes to be linted.

Examples

The following examples demonstrate violations and the result of fixes.

:root {
  --SystemType: systsem-ui;
  --SystemMonoType: ui-monospace;
}

.example {
  --border-color:;

  align-self: center;
  color: var(--Orange600Color);
  display: inline-block;
  inline-size: 8.75em;
  text-align: end;
  white-space: nowrap;
}

.example {
  display: inline-block;

  /* Layout */
  align-self: center;
  inline-size: 8.75em;

  /* Text */
  text-align: end;
  white-space: nowrap;

  /* Appearance */
  color: var(--color);

  --color: Orange;
}

.aside::before {
  /* Layout */
  width: 0.875em;

  /* Appearance */
  background-position: top 1rem center;
  background-repeat: no-repeat;
  border-end-start-radius: 0.375rem;
  border-start-start-radius: 0.375rem;

  /* Generated */
  content: "";
}

.visually-hidden {
  all: unset !important;
  position: fixed !important;

  /* Layout */
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  width: 1px !important;

  /* Behavior */
  pointer-events: none !important;
}

While the following patterns are considered violations:

☝️ Warnings

• Expected "display" to come before "align-self" in group "Display"
• Expected "text-align" to come before "white-space" in group "Text"
• Expected an empty line before property "display"
• Expected an empty line before property "inline-size"
• Expected an empty line before property "color"

.aside::before {
  background-position: top 1rem center;
  background-repeat: no-repeat;
  border-end-start-radius: 0.375rem;
  border-start-start-radius: 0.375rem;
  content: "";
  width: 0.875em;
}

☝️ Warnings

• Expected "position" to come before "pointer-events" in group "Display"
• Expected an empty line before property "clip-path"
• Expected an empty line before property "pointer-events"
• Expected an empty line before property "position"
• Expected an empty line before property "width"

.visually-hidden {
  all: unset !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  pointer-events: none !important;
  position: fixed !important;
  width: 1px !important;
}

☝️ Warnings

• Expected "position" to come before "pointer-events" in group "Layout"
• Expected an empty line before property "clip-path"
• Expected an empty line before property "pointer-events"
• Expected an empty line before property "position"

ignore

If the first option is "ignore" or null, then Stylelint DevTool Props does nothing.

Secondary Options

None at this time.