Socket
Socket
Sign inDemoInstall

stylelint-gitlabci-formatter

Package Overview
Dependencies
2
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

stylelint-gitlabci-formatter


Version published
Maintainers
1
Created

Readme

Source

Stylelint Gitlab CI formatter

Output JUnit XML reports of Stylelint results for Gitlab CI.

Based on https://github.com/eddies/stylelint-junit-formatter, slightly adapted for Gitlab CI.

Screenshot tests stylelint

Usage

Install stylelint-gitlabci-formatter (and stylelint and optionally, a config):

npm install stylelint-gitlabci-formatter stylelint stylelint-config-standard --save-dev

Add 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 &quot;}&quot; 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>

Keywords

FAQs

Last updated on 19 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc