SonarQube flags Emotion's css attribute as unknown property

[Naveen_Sundarrajan]

SonarQube Edition / Version : Developer / 2025.1 LTA

In our project, We are using the @emotion/react library for styling, which allows us to apply styles directly using the css attribute on HTML elements. However, SonarQube is flagging this as a code smell with the message: “Unknown property ‘css’ found”.

Currently, we have to mark it as a false positive every time we push code, which is not ideal.

One possible approach of handling this, is to Disable the Rule that raised this Code Smell issue. However, we are concerned that disabling it might hide other genuine issues.

Apart from completely disabling the rule, is there any other effective way to handle this case so that Emotion’s css attribute is recognised and not flagged as an issue?

[Colin]

Hey there.

I’ve moved your post to the section on reporting false-positives.

How to Report a False-positive / False-negative

Hey SonarSource Community! False-positives happen, as do false-negatives, and we’re eager to fix them. We are thrilled when our users report problems, so we can make our products better. What is a false-positive (FP)? A false-positive is when an issue is raised unexpectedly on code that should not trigger an issue, or where the suggested action doesn’t make any sense for the code. What is a false-negative (FN)? A false-negative is when an issue should be raised on a piece of code, but isn’t. …

Can you please tell us the exact Rule ID, and also provide a snippet of code where the issue is raised?

[Naveen_Sundarrajan]

The Rule ID is typescript:S6747 and please find the attachment for code snippet.

[Colin]

Thank you!

If you want to exclude specific property or attribute names from this rule in SonarQube, you can add exceptions directly within your Quality Profile settings. To do this, navigate to the relevant rule in your custom Quality Profile and click “Change”

Please note, making changes like this requires you to use a custom Quality Profile rather than the default ‘Sonar way’ profile. If you’re already using a custom Quality Profile, you can update it as needed. If you’re still using the default, you’ll need to create a custom Quality Profile (probably by extending the built-in QP)