Not able to set stylelint rule for Check this potential box model size issue

Question

I am working on Angular2 application with webpack. I am using sonarqube for code quality metrics. I use VS Code as IDE.

Below css gives me a warning on sonarqube "Check this potential box model size issue" which is correct.

.popup-dock-button {
  background: url('./app/assets/images/dock.svg') no-repeat;
  background-size: 13px 13px;
  float: left;
  width: 20px;
  height: 20px;
  padding: 3px;
}

But in VSCode i am not able to see this code smell as warning. Below is my stylelintrc.json file

{
    "extends": [
        "stylelint-config-standard"
    ],
    "plugins": [
        "stylelint-scss"
    ],
    "rules": {
        "indentation": 4,
        "number-leading-zero": null,
        "declaration-block-no-ignored-properties": true,
        "selector-class-pattern": "^[a-z][-a-z0-9]*$",
        "selector-no-id": true
    },
    "defaultSeverity": "warning"
}

I am not able to find a rule id which is to be set to solve this issue.

Answer 1

Sonar and stylelint are two different tools. They are both capable of CSS static analysis. However, they have different rules, options and configurations. Sonar appears to be Java-based and stylelint is written in JavaScript for Node.js.

It looks like your running Sonar as part of your CI and stylelint within your IDE. That is why the warnings in your CI are different than those within your IDE.

FYI, the list of Sonor CSS rules is here . Perhaps you'll find an option there to disable the "Check this potential box model size issue" rule.

Answer 2

It looks like there is no such a rule in stylelint. For your information, I initiated a SonarQube / stylelint rule mapping at https://github.com/racodond/sonar-css-plugin/blob/master/doc/stylelint-sonarqube-rule-mapping.md