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

**URL:** <https://community.sonarsource.com/t/s4653-unexpected-unknown-unit-when-css-is-under-2-parents-into-custom-style-polymerjs-element/103960>\
**Category:** SonarQube Server / Community Build\
**Tags:** css\
**Created:** [November 7, 2023, 5:00pm UTC](https://community.sonarsource.com/t/s4653-unexpected-unknown-unit-when-css-is-under-2-parents-into-custom-style-polymerjs-element/103960 "2023-11-07T17:00:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![glalloue](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/glalloue/32/2709_2.png) [@glalloue](https://community.sonarsource.com/u/glalloue)\
**Post date:** [November 7, 2023, 5:00pm UTC](https://community.sonarsource.com/t/s4653-unexpected-unknown-unit-when-css-is-under-2-parents-into-custom-style-polymerjs-element/103960/1 "2023-11-07T17:00:53Z")

</div>

I’m getting the following errors in SonarCloud:

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

```

or

```auto
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:

```auto
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 :

```auto
<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 :

```auto
<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)](https://polymer-library.polymer-project.org/3.0/api/elements/custom-style)

Is there anyway to remove these false positive ?

Information :

- SonarQube
- Community Edition
- Version 9.9.1 (build 69595)

---

<div class="post-metadata">

**Author:** ![ilia](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/ilia/32/33594_2.png) [@ilia](https://community.sonarsource.com/u/ilia)\
**Post date:** [December 18, 2023, 10:27am UTC](https://community.sonarsource.com/t/s4653-unexpected-unknown-unit-when-css-is-under-2-parents-into-custom-style-polymerjs-element/103960/5 "2023-12-18T10:27:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![glalloue](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/glalloue/32/2709_2.png) [@glalloue](https://community.sonarsource.com/u/glalloue)\
**Post date:** [February 22, 2024, 4:05pm UTC](https://community.sonarsource.com/t/s4653-unexpected-unknown-unit-when-css-is-under-2-parents-into-custom-style-polymerjs-element/103960/7 "2024-02-22T16:05:45Z")

</div>

Hello ilia ,

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

File name : `style-base.html`

Inside :

```html
<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](https://europe1.discourse-cdn.com/sonarsource/uploads/sonarcommunity/original/3X/8/e/8e52cb4b38d10efa740ec348225b8d9b442327fb.png)

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

---

<div class="post-metadata">

**Author:** ![ilia](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/ilia/32/33594_2.png) [@ilia](https://community.sonarsource.com/u/ilia)\
**Post date:** [February 26, 2024, 3:37pm UTC](https://community.sonarsource.com/t/s4653-unexpected-unknown-unit-when-css-is-under-2-parents-into-custom-style-polymerjs-element/103960/8 "2024-02-26T15:37:32Z")

</div>

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.