Sass compilation creates duplicate selectors with inheritance

[magextrem]

Hello,

We currently have a strange behavior with sass compilation using forge.

Here's a simplified concrete example:

• In src/assets/scss/entries/50-organisms.scss

  @use '~/core' as *;
  ...
  @use '@/organisms/page/header';
  ...
  @include header.init;

• In src/views/blocks/organisms/page/header.scss

  @use '@/atoms/ui/link/link' as *;
  %link {
  text-decoration: underline
  }
  %link-test {
  @extend %link;
  height: auto;
  }
  @mixin init() {
  .link-test {
  @extend %link-test;
  }
  }

• Result after compilation in dist/assets/css/50-organisms.css

...

/* KO */
.link-test {
  height: auto;
}
...
/* OK */
.link-test {
  text-decoration: underline
}

...

It only happens when we use inheritance in sass files, otherwise compilation isn't creating other duplicate selectors. We've disabled any post process to check but it also failed. It was also tested with the latest versions of forge & modulus.

[jdacosta]

Hello Thomas,

As seen with you, this is the native behavior of the sass library. This is not related to forge directly and no fix can be done on our side.

Don't hesitate to come back to us if you have other questions :)

Have a nice day.