sonarqube giving false positive with the rule "Unknown type selectors should be removed" when trying to style a custom HTML tag

Question

We have used angular custom directive to generate a custom html tag called .The corresponding style sheet file for this tag is student.scss and its content is

student-result {/* Sonarqube is reporting critical issue at this line saying 
              "Remove the usage of the unknown "student-result" type selector" */


   .student-result-top {
      position :absolute;
      height :300px;
   }
}

Can anybody suggest any way to resolve the issue or any plugin which will make sonarqube to recognize these custom HTML tags?

Answer 1

Geo j's approach of using a class selector instead of an element selector is good. Instead of editing every html source file to add the class, you can use @HostBinding to give every instance of the component the same class by default:

@HostBinding('class.student-result') hasStudentResultClass = true;

Answer 2

Instead of using the angular selector directly inside your scss file give an id or class to it and apply required style.

<student-result class="student-result"></student-result>

Now in your scss access the same selector as .student-result instead of student-result. This might help I believe.