Missing warnings in SonarQube 9.9 from a stylelint analysis

SonarQube Server / Community Build
1
  • SonarQube Enterprise 9.9.0.65466
  • Self hosted Docker
  • sonarsource/sonarqube-scan-action@master

I’m scanning a React project that uses styled-components. I’m using stylelint to generate a report from a GitHub Action

- name: Run Stylelint
  run: npx stylelint src/MyFile.tsx --formatter json --output-file stylelint.json

Which generates this report:

[
    {
        "source": "/home/runner/work/myRepo/myProject/src/MyFile.tsx",
        "deprecations": [],
        "invalidOptionWarnings": [],
        "parseErrors": [],
        "errored": false,
        "warnings": [
            {
                "line": 15,
                "column": 5,
                "endLine": 15,
                "endColumn": 16,
                "rule": "declaration-block-no-duplicate-properties",
                "severity": "warning",
                "text": "Unexpected duplicate \"align-items\" (declaration-block-no-duplicate-properties)"
            },
            {
                "line": 17,
                "column": 5,
                "endLine": 19,
                "endColumn": 6,
                "rule": "rule-empty-line-before",
                "severity": "warning",
                "text": "Expected empty line before rule (rule-empty-line-before)"
            },
            {
                "line": 11,
                "column": 5,
                "endLine": 11,
                "endColumn": 32,
                "rule": "shorthand-property-no-redundant-values",
                "severity": "warning",
                "text": "Expected \"8px 15px 8px 15px\" to be \"8px 15px\" (shorthand-property-no-redundant-values)"
            }
        ]
    }
]

And I include it in the sonar scan by setting sonar.css.stylelint.reportPaths

- uses: sonarsource/sonarqube-scan-action@master
  env:
    SONAR_TOKEN: ${{ secrets.SQ_GLOBAL_ANALYSIS_TOKEN }}
    SONAR_HOST_URL: ${{ vars.SQ_HOST_URL }}
  with: 
    args: >
      -Dsonar.projectKey=${{ vars.SONAR_PROJECT_KEY }}
      -Dsonar.sourceEncoding=UTF-8
      -Dsonar.sources=src/,terraform/
      -Dsonar.css.stylelint.reportPaths=stylelint.json

Interestingly, only 2 of the 3 warnings are rendering in the SonarQube project. :thinking:

INFO: Creating TypeScript program (done) | time=3551ms
INFO: Starting analysis with current program
INFO: Analyzed 164 file(s) with current program
INFO: 164/164 source files have been analyzed
INFO: Hit the cache for 0 out of 164
INFO: Miss the cache for 164 out of 164: ANALYSIS_MODE_INELIGIBLE [164/164]
INFO: Sensor TypeScript analysis [javascript] (done) | time=38346ms
INFO: Sensor JavaScript inside YAML analysis [javascript]
INFO: No input files found for analysis
INFO: Hit the cache for 0 out of 0
INFO: Miss the cache for 0 out of 0
INFO: Sensor JavaScript inside YAML analysis [javascript] (done) | time=8ms
INFO: Sensor CSS Rules [javascript]
INFO: 2 source files to be analyzed
INFO: 2/2 source files have been analyzed
INFO: Hit the cache for 0 out of 0
INFO: Miss the cache for 0 out of 0
INFO: Sensor CSS Rules [javascript] (done) | time=179ms
INFO: Sensor JavaScript/TypeScript Coverage [javascript]
INFO: Analysing [/github/workspace/coverage/lcov.info]
INFO: Sensor JavaScript/TypeScript Coverage [javascript] (done) | time=65ms
INFO: Sensor CSS Metrics [javascript]
INFO: Sensor CSS Metrics [javascript] (done) | time=29ms
INFO: Sensor Import of stylelint issues [javascript]
INFO: Importing /github/workspace/stylelint.json
INFO: Sensor Import of stylelint issues [javascript] (done) | time=10ms

In SonarQube, it reports only 2 of the issues: “Issue detected by an external rule engine: stylelint”

Expected “8px 15px 8px 15px” to be “8px 15px” (shorthand-property-no-redundant-values)

Expected empty line before rule (rule-empty-line-before)

How can I ensure that all errors/warnings are published and reported in SonarQube?

2

Hey there.

Can you turn on DEBUG level analysis logs in your scan to see if more information is logged about the import of styelint issues?

- name: SonarQube Scan
  uses: sonarsource/sonarqube-scan-action@master
  with:
    args: >
      -X
3

Here it is!

16:05:05.926 INFO: Sensor Import of stylelint issues [javascript]
16:05:05.927 INFO: Importing /github/workspace/stylelint.json
16:05:05.932 DEBUG: Stylelint issue for rule 'declaration-block-no-duplicate-properties' is skipped because this rule is activated in your SonarQube profile for CSS (rule key in SQ css:S4656)
16:05:05.938 INFO: Sensor Import of stylelint issues [javascript] (done) | time=12ms

style-components let’s me create CSS in Java/TypeScript.

example MyFile.tsx:

import styled from 'styled-components';

const myWrapper = styled.div`
    align-items: center;
    padding: 8px 15px 8px 15px;
    cursor: pointer;
    line-height: 20px;
    margin-bottom: 5px;
    align-items: left;
`;

The SonarQube CSS profiler skips *.tsx files, so I’m running stylelint to export a report to SonarQube. What do I need to do now to ensure that declaration-block-no-duplicate-properties doesn’t get skipped?

4

Ah, that’s an interesting corner case I’m not sure we considered. Let me flag this for some experts.

1 Like
6

I thought maybe if I excluded css files:

-Dsonar.sources=src/
-Dsonar.exclusions=src/**/*.css

then maybe I could have only the stylelint report published… But, if I exclude css, then stylelint gets skipped too:

 DEBUG: 'Import of stylelint issues' skipped because there is no related file in current project
8

Hi @dbaghdanov,

indeed tsx files are not analyzed by the CSS analyzer, but we should consider imported issues as valid. The problem is there is some processing on imported issues and this case has not been considered. I’ve opened a ticket to fix this on our side.

Thanks!
Victor

1 Like