How to achieve BEM / CSS Module type scoping with @scope

  <style>
  @scope (.outer) to (.child) {
    .text {
      color: red;
    }
  }
  </style>
  
  <div class="outer">
    <div class="text">Outer Text</div>

    <div class="child">
      <div class="text">Inner Text</div>
    </div>
  </div>

  <style>
  @scope (.outer-2) to (.inner-2) {
    :scope {
      color: purple;
    }
  }
  </style>
  
  <div class="outer-2">
    Outer Text 2

    <div class="inner-2">Inner Text 2</div>
  </div>