S4653: Unexpected unknown unit when css is under 2 parents into custom-style polymerJS element

SonarQube Server / Community Build
1

I’m getting the following errors in SonarCloud:

Unexpected unknown unit "px;"
For the line:
margin-left: 4px;

or

Unexpected unknown unit "rem;"
For the line:
font-size: 1.2rem;

I have 57 errors in one only file with the same kind of error but associated to different units :

  • “px;”
  • “em;”
  • “rem;”
  • “;”

This is failing on this rule:

Units should be valid
The W3C specifications define the  `units`  that can be used with lengths. A unit that is not part of the list of supported ones is likely to be a typo and will be seen as a UI bug by the user.
This rule raises an issue each time a unit is not officially supported.

The error does not appear on all lines.
Css styles are defined in a file named base.html used on a polymerJs project and under <custom-style> or <dom-module> tags.

These errors always happen on a line defined under 2 css “parents”.
Example :

<dom-module id="my-mixins-style">
  <template>
    <style>
      :host {
        --my-input-border: {
          border-radius: 1px;
        };
      }
    </style>
  </template>
</dom-module>

But when we have only 1 “parent”, no error is returned by Sonar on the same file.
Example :

<dom-module id="my-mixins-style">
  <template>
    <style>
      :host {
        border-radius: 1px;
      }
    </style>
  </template>
</dom-module>

If it’s related to custom-syle used by polymerJs, the documentation validate to write it like this. See documentation : custom-style – API Reference - Polymer Project (polymer-project.org)

Is there anyway to remove these false positive ?

Information :

  • SonarQube
  • Community Edition
  • Version 9.9.1 (build 69595)
5

Hello @glalloue,

Thank you for the feedback. Would you be able to share a more complete reproducer for the issue you are raising?

Best,
Ilia

7

Hello ilia ,

Here is a code example you can use to reproduce the problem :

File name : style-base.html

Inside :

<dom-module id="working-style">
  <template>
    <style>
      :host {
        height: 1em;
        line-height: 1rem;
        border-radius: 1px;
        -webkit-line-clamp: 2;
      }
    </style>
  </template>
</dom-module>

<dom-module id="non-working-style">
  <template>
    <style>
      :host {
        --my-input-border: {
          height: 1em;
          line-height: 1rem;
          border-radius: 1px;
          -webkit-line-clamp: 2;
        };
      }
    </style>
  </template>
</dom-module>

SonarQube report will return :

image
image995×265 31.4 KB

As a conclusion :

  • working-style doesn’t return any error and it has only 1 parent
  • non-working-style return errors and it has more than 1 parent
8

Hello Geoffrey,

The issue was raised in SonarQube 9.9.1, but has been fixed in the latest version 10.4.

I believe it must come from the parser that acts incorrectly when CSS directives are nested twice, which is not standard CSS, but used in PolymerJS.

2 Likes