SonarQube CSS / SCSS / Less Analyzer

Description

This SonarQube plugin analyzes:

• CSS files
• CSS code embedded in HTML/XHTML files
• SCSS files
• Less files

and:

• Computes metrics: lines of code, complexity, number of rules, etc.
• Validates your CSS code
• Checks for duplicated code
• Checks various guidelines to find out potential bugs, vulnerabilities and code smells through more than:
  • 80 checks on CSS code
  • 90 checks on SCSS code
  • 80 checks on Less code
• Provides the ability to write your own checks

A live example is available here.

Usage

Installation Guide

1. Download and install SonarQube
2. Install the CSS / SCSS / Less plugin either by a direct download or through the update center. See plugin compatibility with SonarQube versions.
3. Install your favorite scanner (SonarQube Scanner, Maven, Ant, etc.)
4. Analyze your code

Getting Started in Two Minutes

For a quick try, a simple package and procedure is available at https://github.com/racodond/package-test-sonarqube-css

Analyzing CSS code embedded in HTML/XHTML files

The plugin analyzes CSS code embedded in <style type="text/css">...</style> tags in HTML/XHTML files. To do so, as a prerequisite, SonarQube has to import those files. Either:

• Install a plugin importing those files (Web plugin for instance)
• Or turn on the import of unknown files by setting property sonar.import_unknown_files to true

The list of files containing embedded CSS to analyze can be customized through the sonar.css.embedded.file.suffixes property.

stylelint / SonarQube Rule Mapping

If you are already using stylelint, adding SonarQube to your stack will help you bring code quality to another level. The stylelint / SonarQube rule mapping may be of great help to define your SonarQube quality profile.

Custom Checks

You're thinking of new valuable checks? Version 2.1 or greater provides an API to write your own custom checks. A sample plugin with detailed explanations is available here. If your custom checks may benefit the community, feel free to create a pull request in order to make the check available in the CSS / SCSS / Less analyzer.

You're thinking of new checks that may benefit the community but don't have the time or the skills to write them? Feel free to create an issue for your checks to be taken under consideration.

Metrics

Functions

Number of rules.

Complexity

The following elements increment the complexity by one:

• Class selector
• ID selector
• Attribute selector
• Type selector
• Pseudo selector
• Keyframes selector
• At-rule

Complexity/function

It computes the complexity/rule, meaning the average number of selectors per rule. It gives a measurement on how specific the selectors are.

Contributing

Any contribution is more than welcome!

You feel like:

• Adding a new check? Just open an issue to discuss the value of your check. Once validated, code, don't forget to add a lot of unit tests and open a PR.
• Maintaining the stylelint / SonarQube rule mapping? Just open a PR
• Fixing some bugs or improving existing checks? Just open a PR.