Modules matching other modules' components with same names

[opr]

Hi, if I have a module container

@include module(container) {
  background: red;
}

and then another module hero

@include module(hero) {

  @include component(background-container) {

    @include is(desktop) {
      margin: 10px auto;
    }
  }
}

the generated CSS:

.container, [class*=container--] {
    background: red;
}

also affects my div named thus: <div class="hero__background-container--desktop">

[opr]

Comment from Raptori on the reactiflux discord

[class^="container-"], [class*=" container-"] might work?