Extra semicolon reported on the wrong line

,

Product: SonarQube - Community Edition - Version 9.6.1 (build 59531)

Language: SCSS within a .vue single file component

Rule raised: css:S1116

What’s the problem: The issue is raised on the completely wrong line.

Code sample:

<style lang="scss">
@use '~@/assets/sass/base/mixins.scss';
@use '~@/assets/sass/base/measurements/sizes.scss';
@use '~@/assets/sass/base/measurements/paddings.scss';
@use '~@/assets/sass/base/measurements/border-radiuses.scss';

.navigation-menu-list {
   @include mixins.list-reset;
   list-style-type: none;

   &__children {
      padding-left: paddings.$around-group;
   }

   &__link {
      @include mixins.bootstrap-override-type-button {
         @include mixins.link-reset;

         display: flex;
         align-items: center;
         min-height: sizes.$interactive-min-height;

         padding: paddings.$nav-menu-link-y paddings.$nav-menu-link-x;
         border-radius: border-radiuses.$button;

         font-weight: 700;

         transition:
            color 0.2s ease,
            background-color 0.2s ease
         ;
      };

      &--active {
         @include mixins.bootstrap-override-type-button {
            &,
            &:hover {
               background-color: var(--color-text-background-negative);
               color: var(--color-text-foreground-negative);
            }
         }
      }
   }
}
</style>

Where the issue should be raised: Right after the closing curly brace of mixin mixins.bootstrap-override-type-button

Where the issue is actually raised: On the first line of the style tag, where _mixins.scss is imported.

1 Like

Hello Ariane,

I don’t get the false positive you are mentioning. In fact, taking the snippet you shared and analyzing with the same SonarQube version as it is leads to the following issue:

<style lang="scss">
@use '~@/assets/sass/base/mixins.scss';
@use '~@/assets/sass/base/measurements/sizes.scss';
@use '~@/assets/sass/base/measurements/paddings.scss';
@use '~@/assets/sass/base/measurements/border-radiuses.scss';

.navigation-menu-list {
   @include mixins.list-reset;
   list-style-type: none;

   &__children {
      padding-left: paddings.$around-group;
   }

   &__link {
      @include mixins.bootstrap-override-type-button {
         @include mixins.link-reset;

         display: flex;
         align-items: center;
         min-height: sizes.$interactive-min-height;

         padding: paddings.$nav-menu-link-y paddings.$nav-menu-link-x;
         border-radius: border-radiuses.$button;

         font-weight: 700;

         transition:
            color 0.2s ease,
            background-color 0.2s ease
         ;
      }; /* << S1116 raises an issue on this semicolon */

      &--active {
         @include mixins.bootstrap-override-type-button {
            &,
            &:hover {
               background-color: var(--color-text-background-negative);
               color: var(--color-text-foreground-negative);
            }
         }
      }
   }
}
</style>

As far as I can tell, the issue raised seems rather legit to me. Am I missing something here to reproduce your false positive?

Cheers,
Yassin