Wrapping blocks with nested elements with a container class

[szalonna]

Hello!

We want to wrap blocks in container classes but we have some issues with nested elements.

Source:

@import "node_modules/sass-bem/_bem";

@mixin component_a {
    @include block('a') {
        content: 'a';
        @include element('b') {
            content: 'b';
            @include element('c') {
                content: 'c';
                @include at('e') {
                    content: 'e';
                }
            }
            @include at('f') {
                content: 'f';
            }
        }
    }
}

@include component_a();
.d {
    @include component_a();
}

Expected result:

.a {
  content: 'a'; }
  .a__b {
    content: 'b'; }
    .a__b .a__c {
      content: 'c'; }
      .a--e .a__b .a__c {
        content: 'e'; }
    .a--f .a__b {
      content: 'f'; }

.d .a {
  content: 'a'; }
  .d .a__b {
    content: 'b'; }
    .d .a__b .a__c {
      content: 'c'; }
      .d .a--e .a__b .a__c {
        content: 'e'; }
    .d .a--f .a__b {
      content: 'f'; }

What we got:

.a {
  content: 'a'; }
  .a__b {
    content: 'b'; }
    .a__b .a__c {
      content: 'c'; }
      .a--e .a__b .a__c {
        content: 'e'; }
    .a--f .a__b {
      content: 'f'; }

.d .a {
  content: 'a'; }
  .d .a__b {
    content: 'b'; }
    .d .a__b .d .a__c {
      content: 'c'; }
      .d .a--e .d .a__b .d .a__c {
        content: 'e'; }
    .d .a--f .d .a__b {
      content: 'f'; }

As you can see in the wrapped component the .d class appears multiple times between nested elements.