Search code examples
cssjenkinssasscheckstylestylelint

How to generate a checkstyle.xml for Jenkins with stylelint?


I wonder how to generate a checkstyle.xml for Jenkins with stylelint. Searched around the web and sadly found just stylelint-checkstyle-formatter, but only the following "instruction":

Simply read the stylelint documentation about using formatters and follow those instructions.

Sadly again, I found nothing in the documentation...


Solution

  • I've finally found a way (with gulp) and want it to share on StackOverflow.

    First install the following dependencies:

    yarn add -D stylelint gulp-stylelint stylelint-checkstyle-formatter stylelint-scss stylelint-config-recommended-scss
    

    Then use the following gulp task:

    gulp.task("scss-lint", function() {
        const gulpStylelint = require('gulp-stylelint');
        const stylelintCheckstyleFormatter = require('stylelint-checkstyle-formatter');
    
        return gulp
            .src('src/**/*.scss')
            .pipe(gulpStylelint({
                reportOutputDir: 'build/reports/scss-checkstyle',
                reporters: [
                    {formatter: 'verbose', console: true},
                    {formatter: stylelintCheckstyleFormatter, save: 'checkstyle.xml'},
                ],
            }));
    });
    

    And finally my .stylelint:

    {
        "extends": "stylelint-config-recommended-scss",
        "defaultSeverity": "warning",
        "formatter": "stylelint-checkstyle-formatter",
        "plugins": [
            "stylelint-scss"
        ],
            "rules": {
            "indentation": 4,
                "color-hex-length": null,
                "shorthand-property-no-redundant-values": null,
                "no-missing-end-of-source-newline": null,
                "declaration-empty-line-before": null,
                "at-rule-empty-line-before": null,
                "selector-type-no-unknown": [
                true,
                {
                    "ignore": ["custom-elements"],
                    "ignoreTypes": ["tooltip"]
                }
            ]
        }
    }