HTML-CSS plugins research

[utarwyn]

Hello! I propose to share the results of our research into HTML and CSS plugins in this discussion.

HTML plugin

The solution I find most suitable

The general idea proposed by @MP-Aubay of creating a SonarQube plugin is the simplest one. We will have a standard plugin with rules, quality profiles, etc.

There is, however, one drawback to consider: it requires duplicating "Sonar HTML" in our plugin and partially rewriting the sensor to integrate our rules and prevent it from recalculating the code metrics (I haven't been able to do any better). Maintenance may then be more important (especially if there is an internal code changes on their side) and the weight of our plugin will be consequent (around 500kb).

Solutions I've ruled out

But this idea is also the only possibility I've seen at the moment... the following solutions don't seem feasible at the moment:

• a linter via htmllint or similar: SonarJS doesn't allow us to import the rules of this kind of linter, so we'd have to redevelop our own bridge, which is rather complex
• linter via ESLint: SonarJS doesn't provide a plugin for parsing HTML using ESLint
• our own implementation of an HTML parser: more complicated than using the Sonar implementation, I think, with other drawbacks

CSS plugin

The subject becomes a little more complex with CSS. SonarQube manages CSS rules via SonarJS and StyleLint (as explained here).

We could then rely on the implementation of our JavaScript plugin to handle CSS, but this won't work: SonarJS doesn't allow rules to be integrated from StyleLint (whereas it does from ESLint).

So I don't have any ideas at the moment... I'll think more about it and try to find the miracle solution.

↪️ Feel free to give me your own thoughts on the matter! I propose to discuss it here and evolve the associated PR according to feedback/ideas.