Output JUnit XML reports of Stylelint results for Gitlab CI.
Based on https://github.com/eddies/stylelint-junit-formatter, slightly adapted for Gitlab CI.
Install stylelint-gitlabci-formatter (and stylelint and optionally, a config):
npm install stylelint-gitlabci-formatter stylelint stylelint-config-standard --save-devAdd a .stylelintrc, e.g.:
{
"extends": "stylelint-config-standard",
"ignoreFiles": "node_modules/**/*",
}Add a script to package.json that runs stylelint, e.g.:
{
"name": "stylelint-ci",
"version": "1.0.0",
"scripts": {
"lint": "stylelint '**/*.css'"
},
"devDependencies": {
"stylelint": "^16",
"stylelint-gitlabci-formatter": "^1"
}
}At this point, you should be able to execute npm run lint on the command line.
Add a .gitlab-ci.yml that runs stylelint and saves the results, e.g.:
stylelint:
stage: lint
image: node:lts-alpine
before_script:
- npm install
script:
- npx stylelint
--custom-formatter ./node_modules/stylelint-gitlabci-formatter
--output-file stylelint_junit.xml
"**/*.css"
artifacts:
expire_in: 1 week
when: always
# https://docs.gitlab.com/ee/ci/yaml/artifacts_reports.html#artifactsreportsjunit
reports:
junit: stylelint_junit.xml
The formatter will generate a .xml-report with the following look:
<?xml version="1.0" encoding="utf-8"?>
<testsuites name="stylelint.rules">
<testsuite name="path/to/css/file1.css" failures="0" errors="0" tests="1">
<testcase name="stylelint.passed"/>
</testsuite>
<testsuite name="path/to/css/file2.css" failures="0" errors="0" tests="1">
<testcase name="stylelint.passed"/>
</testsuite>
<testsuite name="path/to/css/file3.css" failures="0" errors="0" tests="1">
<testcase name="stylelint.passed"/>
</testsuite>
<testsuite name="path/to/css/file4.css" failures="0" errors="0" tests="1">
<testcase name="stylelint.passed"/>
</testsuite>
</testsuites>In the event of errors, those are presented in a way that Gitlab CI can interpret:
<?xml version="1.0" encoding="utf-8"?>
<testsuites name="stylelint.rules">
<testsuite name="path/to/css/file.css" failures="3" errors="3" tests="3">
<testcase classname="block-closing-brace-space-before" name="1:18 > Expected single space before "}" of a single-line block (block-closing-brace-space-before)" file="path/to/css/file.css">
<failure type="error">On line 1, column 18 in path/to/css/file.css: Expected single space before "}" of a single-line block (block-closing-brace-space-before)</failure>
</testcase>
<testcase classname="declaration-block-trailing-semicolon" name="1:18 > Expected a trailing semicolon (declaration-block-trailing-semicolon)" file="path/to/css/file.css">
<failure type="error">On line 1, column 18 in path/to/css/file.css: Expected a trailing semicolon (declaration-block-trailing-semicolon)</failure>
</testcase>
</testsuite>
</testsuites>