-
Version:
SonarCloud
-
error observed
SonarCloud does not recognize a valid SVG element foreignObject, although it does recognize elements like path
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
-
steps to reproduce: see snapshot
-
potential workaround: non found apart from declaring it as a false-positive, it broke out quality gate since it’s categorized as a bug.
Do I need to do something special to enable recognition of this SVG elements?
Is there anyone from SonarCloud to assist here? I don’t really understand why this false positive occurs… Did anyone else notice the same behavior? Are there some settings I need to adjust?
Hi @Matija_Lukic ,
Thank you for reporting this issue. It is indeed a false positive. I created the corresponding ticket: https://github.com/SonarSource/sonar-css/issues/206
In the meantime the workaround is to add foreignObject to the “ignoreTypes” parameter of the rule S4670 “Selectors should be known”. Example: ignoreTypes = /(^mat-)|foreignObject/
Cheers,
Nicolas
Thanks Nicolas! Can you just point me to where exactly I should change this parameter in my SonarCloud project?
First you need to have a custom quality profile (skip these steps if you already have one):
- Go to your organization
- Click on “Quality Profiles” in the menu below the organization name
=> You should be on a page like this one.
- Search for the “CSS” quality profile. Click on the dropdown on its right and select “Extend”.
- Create your new Quality Profile.
One you have a custom quality profile for CSS you can customize the configuration of the rule:
- Go to your organization
- Click on “Rules” in the menu below the organization name
- Search for the rule named “Selectors should be known”, then select it.
=> You should arrive on a page like this.
- At the bottom you have a list of quality profiles where the rule is enabled.
- Click “change” on the right of your new quality profile.
- Change the “ignoreTypes” field to
/(^mat-)|foreignObject/
Finally you need to make sure that the new Quality Profile is used by your project:
- Go to your project
- Click on “Administration” in the menu below the project name.
- Select “Quality Profiles”
- Change the CSS quality profile to match your new one.
Now you can reanalyze your project and see the updated result.