Twig is a very commonly used templating library for PHP. It would be nice if the HTML analyzer understood Twig tags. Currently, these tags can cause errors, for example:
.doc_manager {
background-color: {{ systemUser.get('background-color') }}
Will lead to complaints about systemUser.get('background-color') being an ‘unexpected unknown property’, even though it would be properly replaced at runtime.
Hi,
‘unexpected unknown property’, are we talking about CSS rule here? (you can check that by rule key prefix)
Yes, it’s rule css:S4654
So the file where you have those FPs is a php file or html? Could you show the full file, minimal file reproducing this FP?
Official documentation says It doesn't have a specific extension, .html or .xml are just fine, but normally I have seen twig templates as .html.twig.
Hi everyone, this was the only post I found on the forum about support for twig files. Is this still a feature request, as we also have twig files with the ‘html.twig’ extension that are not being recognized. I cannot figure out whether this is because either these files are simply not supported, or because the scanners are simply not incorporating the files with those extensions?
Is there a way to tell the html/css scanners to also incorporate ‘html.twig’ files perhaps?
Any tips much appreciated!
Hello @validaide-mark-bijl and welcome to the community!
Unfortunately, we do not support parsing and analyzing twig file at the moment.
However, we have this item on our agenda. So stay tuned, we will hopefully provide this feature soon.
Best,
Nils
Hey Nils, thanks so much for the quick and clear response! Will definitely stay tuned then 
We are running Sonar in our GitHub PR build for our Symfony / PHP applications and libraries to ensure our team stay sharp, and just being able to detect e.g. duplicate code would already be a great advantage!
Cheers,
Mark
Hello @James_Costerton,
as described above, we do not yet support twig syntax. However, our analyzers can detect bugs and code quality issues in twig files for HTML and CSS for example.
If your Twig files have the .twig extension, you can easily add it to the file extensions to be assigned. You can do this in General Settings / Languages / HTML / HTML File suffixes or in your sonar-project.properties with the key sonar.html.file.suffixes.
Here you can find an example analysis of a twig template file.
As we do not yet support twig syntax, this can lead to unexpected side effects in the results. Please take this into account.
Best,
Nils
In SonarQube 9.7, .twig file extension was added to the HTML language ([SONARHTML-141] - Jira). Does this mean that twig files are now fully supported for parsing and analysis?
We are seeing many false positives for rule Web:UnclosedTagCheck for twig html such as:
<div{{ attributes.addClass('my-class') }}></div>
https://www.drupal.org/docs/8/theming-drupal-8/using-attributes-in-templates#s-single-class
Hello @ThomasMinney,
Thank you for bringing this up. Welcome to the community!
I’m sorry you are seeing all these False Positives.
Our intention was to first analyze the regular HTML inside the file and ignore the Twig-specific parts.
This is not working as expected, here’s a ticket to track this.
For now, I think your best option is to disable the extension.
Best,
Gabriel
I’m the author and maintainer of Twing and its sibling library twig-lexer:
I would gladely help at implementing a proper support for Twig sources for SonarQube. Is it possible?
Also please note that Twig is not an HTML-superset contrary to what it may seem. It is an agnostic templating language, able to render whatever we want.
So, considering it as an HTML superset not only creates false positive for HTML templates, but would also totally fail with templates dedicated to render markdowns, CSS, yaml, phtml, JSON, C++…or whatever format you can imagine.
I’d very like to help here.