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 code smells and potential bugs through more than:
  • 70 checks on CSS code
  • 80 checks on SCSS code
  • 70 checks on Less code
• Provides the ability to write your own checks

• Demo project

1. Download and install SonarQube
2. Install the CSS / SCSS /Less analyzer either by a direct download or through the update center.
3. Install your favorite analyzer (SonarQube Scanner, Maven, Ant, etc.) and analyze your code. Note that starting at version 2.0, Java 8 is required to run an analysis.

Plugin versions and compatibility with SonarQube versions: http:https://docs.sonarqube.org/display/PLUG/Plugin+Version+Matrix

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.

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.

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.

Number of rules.

The following elements increment the complexity by one:

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

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

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.