stylelint-junit-formatter


Output JUnit XML reports of stylelint results (that can be parsed by CircleCI or Bamboo).

Usage

$3

Before:

!image

After:

!image

Install stylelint-junit-formatter (and stylelint and optionally, a config)
``console
$ npm install stylelint-junit-formatter stylelint stylelint-config-standard --save-dev
`

Add a .stylelintrc, e.g.:

`javascript
{
"extends": "stylelint-config-standard",
"ignoreFiles": "node_modules/*/",
}

`

Add a .circleci/config.yml that runs stylelint and saves the results, e.g.:

`yaml
version: 2
jobs:
build:
docker:
- image: circleci/node:10

steps:
- checkout
# Download and cache dependencies
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package-lock.json" }}
- v1-dependencies-

- run:
name: Build
command: if [ ! -d "node_modules" ]; then npm ci; fi

- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package-lock.json" }}

- run:
name: Lint
command: |
mkdir -p reports/stylelint
npm run lint -s -- --custom-formatter 'node_modules/stylelint-junit-formatter' > reports/stylelint/test-results.xml

- store_test_results:
path: reports
`

$3

`javascript
const fs = require('fs');
const stylelint = require('stylelint');
const junitFormatter = require('stylelint-junit-formatter');

const stylelintOptions = {
files: '*/.css',
formatter: junitFormatter,
};

stylelint.lint(stylelintOptions)
.then((resultObject) => {
// Do something with the result, e.g. write a report.xml to disk:
// fs.writeFile('report.xml', resultObject.output, (error) => {…});
});

`

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

The formatter will generate a .xml-report with the following look:
`xml















`

In the event of errors, those are presented in a way that CircleCI/Bamboo can interpret:
`xml







message="Expected "color" to come before "font-weight" (declaration-block-properties-order)">
On line 7, column 3 in /path/to/css/file.css



message="Unexpected longhand value '0 2rem 1.5rem 2rem' instead of '0 2rem 1.5rem' (shorthand-property-no-redundant-values)">
On line 8, column 3 in /path/to/css/file.css







``