Unknown property 'jsx' found with styled-jsx TS:S6747

[bpconfigit (Brecht Pynoo)]

We use styled-jsx for adding styles to our react application. In general, styled-jsx tags look like the following:

<style jsx>{`
  .classname-to-style {
    padding: 10px;
  }
`}</style>

They are part of the component structure in a tsx file. Since recently, this false-positive has shown up that it does not recognize the jsx attribute.

Unknown property ‘jsx’ found
JSX elements should not use unknown properties and attributes typescript:S6747

For more information on styled-jsx, you can look here

Currently, we are closing those code smells as a false positive, but it would be better, if it didn’t show up at all.

[Yassin (Yassin Kammoun)]

Hello @bpconfigit,

Welcome to the Sonar community, and many thanks for your feedback!

We received similar feedback from other users about this recently added rule. Before taking any action, we are still collecting more data and feedback.

In the meantime, you can get rid of these false-positives using this workaround: the rule defines a whitelist parameter that can be configured to ignore property and attribute names.

Hope this helps,
Yassin