constverum / stylelint-config-rational-order

Stylelint config that sorts related property declarations by grouping together in the rational order :vertical_traffic_light:

stylelint-config-rational-order

Stylelint config that sorts related property declarations by grouping together following the order:

1. Positioning
2. Box Model
3. Typography
4. Visual
5. Animation
6. Misc

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;

  /* Box Model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;

  /* Typography */
  color: #888;
  font: normal 16px Helvetica, sans-serif;
  line-height: 1.3;
  text-align: center;

  /* Visual */
  background-color: #eee;
  border: 1px solid #888;
  border-radius: 4px;
  opacity: 1;

  /* Animation */
  transition: all 1s;

  /* Misc */
  user-select: none;
}

Usage

1. Add stylelint, stylelint-order and this package to your project:

npm install --save-dev stylelint stylelint-order stylelint-config-rational-order
# or, if you prefer yarn over npm:
yarn add --dev stylelint stylelint-order stylelint-config-rational-order

2. Add this package to the end of your extends array inside Stylelint configuration (.stylelintrc for example):

{
  "extends": [
    // "stylelint-config-standard",
    "stylelint-config-rational-order"
  ]
}

This shareable config contains the following:

{
  "plugins": [
    "stylelint-order",
    "stylelint-config-rational-order/plugin"
  ],
  "rules": {
    "order/properties-order": [],
    "plugin/rational-order": [true, {
      "border-in-box-model": false,
      "empty-line-between-groups": false,
    }]
  }
}

Since it adds stylelint-order and stylelint-config-rational-order to plugins and also adds required rules, you don't have to do this yourself when extending this config.

Optional options / rules

border-in-box-model

Defines to which group the border property belongs to.

If true border property belongs to the box model section. The default value is false (border property belongs to the visual section).

empty-line-between-groups

If true adds an empty line between groups. The default value is false.

FAQ

Why should I use the rational order and group and sort CSS properties by type instead of alphabetical order?

The pros and cons of both ways in detail:

• Happy Potter and the Order of CSS
• “Outside In” — Ordering CSS Properties by Importance

Credits

• Code Guide by @mdo
• Code Guide by HTML Academy

stylelint-config-rational-order's Issues

Warning instead of error?

Any idea how I turn the rules to result in a warning instead of error?

Please add ability to change order of groups

You have defined it as [special, positioning, boxModel, typography, etc].
I would like to be able to change the predefined order of groups because I don't agree with such an order.
Can you add an option for the plugin? Something like:

    "plugin/rational-order": [
      true,
      {
        "border-in-box-model": false,
        "empty-line-between-groups": false,
        "groups-order": ["box-model", "positioning", "visual", ... ]
      }
    ]

Feature request: Empty line setting for minimum required properties

I like separating the properties into rational groups with lines in between - however when there's only a handful (< 3 || 4) of properties the gaps are a bit unwieldily and it makes it difficult to reason.

Suggestion: a minimum property setting for enacting the empty lines.

Why font-weight needs to go above font-family?

Hi there!

Is there any way to change the config to invert this order?

Thanks.

Update stylelint version to fix vulnerabilities

yarn audit v1.22.4
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ yargs-parser                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=13.1.2 <14.0.0 || >=15.0.1 <16.0.0 || >=18.1.2             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ stylelint-config-rational-order                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ stylelint-config-rational-order > stylelint > meow >         │
│               │ yargs-parser                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://www.npmjs.com/advisories/1500                        │
└───────────────┴──────────────────────────────────────────────────────────────┘

The plugin does not do a thing

With this css:

h1 {
  position: absolute;
  display: block;
  float: right;
  color: black;
  background-color: blue;
  border: 1px black solid;
}

This configuration (basically copy/pasta).

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-rational-order"
  ],
  "plugins": [
    "stylelint-order",
    "stylelint-config-rational-order/plugin"
  ],
  "rules": {
    "order/properties-order": [],
    "plugin/rational-order": [true, {
      "border-in-box-model": false,
      "empty-line-between-groups": true,
    }]
  }
}

And the command:

stylelint --config config/.stylelintrc --fix fixtures/main.css

Strictly nothing happen.

Is this project still under maintenance?

There seems to be not much activity.

Is this project still under maintenance?

Thanks in advance!

Atom warning: stylelint v3+ requires plugins to expose a ruleName

According to Atom 1.37.0 (latest):

stylelint v3+ requires plugins to expose a ruleName.
The plugin "node_modules/stylelint-config-rational-order/index.js"
is not doing this, so will not work with stylelint v3+.
Please file an issue with the plugin.

package.json versions:

...
"devDependencies": {
    "stylelint": "^10.0.1",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-order": "^3.0.0",
    "stylelint-no-unsupported-browser-features": "^3.0.2"
}

Note: this error happens EVERY TIME the file is saved 😢

Adding header comment on --fix

Hi! I'm new to js so i don't really know how to do it myself.

When i run --fix i would like to get a comment header above every group. Like the screenshot above (from example).
/* Positioning /
/ Layout /
/ Box Model */

Thanks <3

Throwing error in the latest version

Hi 👋
Just updated to the latest version and I'm getting the following error while saving:

Error: severity property of a stylelint warning must be either 'error' or 'warning', but it was 'ignore' (string). at stylelintWarningToVscodeDiagnostic.

Why I should use rational order?

There is no answer to this question, and still, many devs live with alphabetical sort, and seeing no drawbacks of using it.

It would be good to point add some articles here:

• https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685 - "Outside-in" principle
• https://dev.to/thekashey/happy-potter-and-the-order-of-css-5ec - my compilation of reasons to use grouping.

Use this plugin with SASS @include and @extend

Hi, thanks for this plugin! Maybe you'll help me, how I can use this plugin with SASS @include and @extend?

@mixin mixin {
  font-size: 15px;
}

.class {
  @include mixin();

  position: absolute;
  display: block;
  margin: 0;
}

In this case stylint will throw an error. Is there a way to avoid it?

Add grid properties to list

Should probably live in box model section, above flex.

Use peer dependencies (fixes blank line)

stylelint and stylelint order should be listed as peerDependencies so the user can specify their versions.

This fixes the issue of the blank line in error messages and allows users to use stylelint v10 (as you have a yarn.lock file)

rule conflict with `stylelint-config-standard`

stylelint.config.js file like this:

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
  plugins: ['stylelint-order', 'stylelint-config-rational-order/plugin'],
  rules: {
    // `standard` conflict with `rational-order`
    'declaration-empty-line-before': [
      'never',
      {
        except: ['after-comment', 'after-declaration', 'first-nested'],
        ignore: [
          'after-comment',
          'after-declaration',
          'first-nested',
          'inside-single-line-block',
        ],
      },
    ],
    'order/properties-order': [],
    'plugin/rational-order': [
      true,
      {
        'border-in-box-model': false,
        'empty-line-between-groups': true,
      },
    ],
  },
};

When I using declaration-empty-line-before with empty-line-between-groups: true, one of the two rules not work.

So, If I only hope empty-line-between-groups: true rule works， how to configure it?

Missing few important proprieties

Hi,
The preset is missing the content css propriety for pseudo-elements.
The preset is missing the mix-blend-mode and isolation for photoshop-like layer effects
The preset is missing the object-fit propriety for image positioning/sizing

Its awesome plugin!

Hi Denis!
thx! 👍

visibility style throws an error in the config file

Removing the 'visibility' element from the array resolves it but not sure why. Lemme know if you want a PR

move border to box-model

I suggest moving border property into box-model section because where it belongs

Add logical properties

See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

In modern applications that are created with Ionic the recommend the new logical properties, so instead of margin-left: we are using margin-inline-start:.

Reduce dependencies?

row-gap and column-gap are missing

The spec conforming gap is part of the rules, but row-gap and column-gap are not.

vscode-stylelint throws an using this as a plugin

Firstly, I'm not sure if this is an issue with the vscode plugin or with stylelint-config-rational-order but I needed to start somewhere.

When I enable this by extending the stylelint config it works perfectly.

{
  "extends": [
    "stylelint-config-rational-order"
  ]
}

However if I enable it as a plugin and rule the vscode plugin throws an error about severity, see the below error.

{
  "plugins": [
    "stylelint-config-rational-order/plugin"
  ],
  "rules": {
    "plugin/rational-order": true
    // OR (both break)
    // "plugin/rational-order": [true, {
    //   "border-in-box-model": false,
    //   "empty-line-between-groups": false,
    // }]
  }
}

Error: `severity` property of a stylelint warning must be either 'error' or 'warning', but it was 'ignore' (string). at stylelintWarningToVscodeDiagnostic (/Users/ben/.vscode/extensions/shinnn.stylelint-0.48.0/node_modules/stylelint-warning-to-vscode-diagnostic/index.js:40:9) at Array.map (<anonymous>) at processResults (/Users/ben/.vscode/extensions/shinnn.stylelint-0.48.0/node_modules/stylelint-vscode/index.js:59:18) at stylelintVSCode (/Users/ben/.vscode/extensions/shinnn.stylelint-0.48.0/node_modules/stylelint-vscode/index.js:144:9)

I tried adding the severity option but the error is still throw.
"plugin/rational-order": [true, { "severity": "warning" } ]

Any ideas where this problem exists or how to fix it?

BTW I love this project, thank you :)

Styled Components - Reorder on save

Hey,

I've been using this awesome plugin to order styles across our entire organization. It works really well, and everyone is acquainted with the setup.

We are moving from Sass to the very amazing Styled Components. Unfortunately, this config doesn't reorder the styles written in a template literal.

Here is my .stylelintrc

{
    "defaultSeverity": "warning",
    "extends": [
        "stylelint-config-recommended",
        "stylelint-config-styled-components",
        "stylelint-order",
        "stylelint-config-rational-order"
    ],
    "plugins": [
        "stylelint-prettier",
        "stylelint-order",
        "stylelint-config-rational-order/plugin"
    ],
    "syntax": "scss",
    "processors": ["stylelint-processor-styled-components"],
    "rules": {
        "order/properties-order": [],
        "plugin/rational-order": true,
        "at-rule-empty-line-before": [
            "always",
            {
                "except": ["first-nested"],
                "ignoreAtRules": ["import"]
            }
        ],
        "block-closing-brace-newline-after": "always",
        "block-opening-brace-space-before": "always",
        "prettier/prettier": true,
        "property-no-vendor-prefix": true,
        "rule-empty-line-before": [
            "always",
            {
                "except": "first-nested"
            }
        ],
        "selector-no-vendor-prefix": true,
        "unit-case": "lower",
        "value-no-vendor-prefix": true
    }
}

Am I missing something?

Cheers!