Search code examples
javascriptstylelint

Maintaining order with Stylelint v15.11.0

My team's React project has been configured as follows wrt stylelint :

"stylelint": "^13.12.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-recommended": "^4.0.0",
"stylelint-config-sass-guidelines": "^7.1.0"

In .stylelintrc.json are these key parts:

"extends": [
  "stylelint-config-recommended",
  "stylelint-config-sass-guidelines",
  "stylelint-config-prettier"
],
"rules": {
  "order/order": null,
  "order/properties-alphabetical-order": null,

A message appeared that suggested we should upgrade to v15.11.0. I did so. I then uninstalled stylelint-config-recommended and stylelint-config-prettier because they were deprecated with this newer version of stylelint.

But then those 2 rules shown above appeared with errors about them being "Unknown rules".

We absolutely do want to maintain the order that Stylelint has enforced. I'm not sure what to do to fix this. Any ideas?

Robert

Solution

  • You could use the order rule of the stylelint-order plugin.

    {
    "plugins": [
        "stylelint-order"
    ],
    "rules": {
        "order/order": [
            "custom-properties",
            "declarations"
        ],
        "order/properties-order": [
            "width",
            "height"
        ]
    }
}