vscode-stylelint throws an using this as a plugin

[rockingskier]

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 :)

[constverum]

It's related to .stylelintrc (99.5%; I faced the same error). Could you please post here the full version of .stylelintrc (or another file where your store stylelint config)?

And just in case: what version of stylelint-config-rational-order do you use?

[rockingskier]

I made the smallest demo I could (which is essentially just the snippets above).
https://gist.github.com/rockingskier/e712728a447ba0e8bd78cc075c400131

My actual project .stylelintrc is:

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components",
    "stylelint-config-rational-order",
    "stylelint-config-prettier"
  ],
  "rules": {
    "plugin/rational-order": [true, {
      "border-in-box-model": true,
      "empty-line-between-groups": true,
    }]
  }
}

Both have the same issue.

[constverum]

Ben, thank you for paying attention to this wrong behavior! My mistake =)
The documentation was fixed. So to fix the error just follow the steps:

1. add to dependencies all required packages: npm install --save-dev stylelint stylelint-order stylelint-config-rational-order
2. add stylelint-order to plugins
3. add "order/properties-order": [] to rules

That's all =)

My actual project .stylelintrc is:

So it will look:

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

or (also will work):

{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components",
    // "stylelint-config-rational-order",     <==== removed
    "stylelint-config-prettier"
  ],
  "plugins": [
    "stylelint-order",
    "stylelint-config-rational-order/plugin"
  ],
  "rules": {
    "order/properties-order": [],
    "plugin/rational-order": [true, {
      "border-in-box-model": true,
      "empty-line-between-groups": true,
    }]
  }
}

[rockingskier]

Works perfectly, thank you 👍

[davidjaldred]

If there are 11 or more rules, not placing "order/properties-order": [], first seems to still produce this error.

This .stylelintrc will show the 'severity' error:

{
  "plugins": ["stylelint-order", "stylelint-config-rational-order/plugin"],
  "rules": {
    "at-rule-name-case": "lower",
    "at-rule-name-newline-after": "always-multi-line",
    "at-rule-name-space-after": "always",
    "at-rule-no-unknown": true,
    "at-rule-no-vendor-prefix": true,
    "at-rule-semicolon-newline-after": "always",
    "at-rule-semicolon-space-before": "never",
    "block-closing-brace-empty-line-before": "never",
    "block-closing-brace-newline-after": "always",
    "order/properties-order": [],
    "plugin/rational-order": [
      true,
      {
        "border-in-box-model": true,
        "empty-line-between-groups": false
      }
    ]
  }
}

This .stylelintrc works fine ("order/properties-order": [], is first):

{
  "plugins": ["stylelint-order", "stylelint-config-rational-order/plugin"],
  "rules": {
    "order/properties-order": [],
    "at-rule-name-case": "lower",
    "at-rule-name-newline-after": "always-multi-line",
    "at-rule-name-space-after": "always",
    "at-rule-no-unknown": true,
    "at-rule-no-vendor-prefix": true,
    "at-rule-semicolon-newline-after": "always",
    "at-rule-semicolon-space-before": "never",
    "block-closing-brace-empty-line-before": "never",
    "block-closing-brace-newline-after": "always",
    "plugin/rational-order": [
      true,
      {
        "border-in-box-model": true,
        "empty-line-between-groups": false
      }
    ]
  }
}

This .stylelintrc also works fine (only 10 rules):

{
  "plugins": ["stylelint-order", "stylelint-config-rational-order/plugin"],
  "rules": {
    "at-rule-name-case": "lower",
    "at-rule-name-newline-after": "always-multi-line",
    "at-rule-name-space-after": "always",
    "at-rule-no-unknown": true,
    "at-rule-no-vendor-prefix": true,
    "at-rule-semicolon-newline-after": "always",
    "at-rule-semicolon-space-before": "never",
    "block-closing-brace-empty-line-before": "never",
    "order/properties-order": [],
    "plugin/rational-order": [
      true,
      {
        "border-in-box-model": true,
        "empty-line-between-groups": false
      }
    ]
  }
}