Region classes not always rendered properly into SCSS

I have configured the following regions in my .info file:

regions[middle_first] = Middle First
regions[middle_second] = Middle Second
regions[middle_third] = Middle Third

Used underscores to remain consistent with naming convention for default regions.

And related region group:
region_groups[middle] = 'Middle'

In themename.json:

"middle": {
                "row": "12",
                "primary_region": "middle_first",
                "maxwidth": "1280",
                "maxwidth_type": "pixel",
                "collapsed": "TRUE",
                "regions": {
                    "middle_first": {
                        "push": "0",
                        "prefix": "0",
                        "width": "4",
                        "suffix": "0",
                        "pull": "0"
                    },
                    "middle_second": {
                        "push": "0",
                        "prefix": "0",
                        "width": "4",
                        "suffix": "0",
                        "pull": "0"
                    },
                    "middle_third": {
                        "push": "0",
                        "prefix": "0",
                        "width": "4",
                        "suffix": "0",
                        "pull": "0"
                    }
                }
            },

However, appears inconsistently in my scss and thus css:

// Breakpoint: all; Region Group: middle;
.middle-layout { 
  @include row(12);
  max-width: 1280px;

  // Breakpoint: all; Region Group: middle; Region: middle_first;
  .region--middle-first { 
    @include column(4, 12); 
    margin-bottom: $regionSpacing;
  } 

  // Breakpoint: all; Region Group: middle; Region: middle_second;
  .region--middle-second { 
    @include column(4, 12); 
    margin-bottom: $regionSpacing;
  } 

  // Breakpoint: all; Region Group: middle; Region: middle_third;
  .region--middle-third { 
    @include column(4, 12); 
    margin-bottom: $regionSpacing;
  } 

  // A primary region exists for the middle region group.
  // so we are going to iterate over combinations of available/missing
  // regions to change the layout for this group based on those scenarios.
  
  // 1 missing region

  &.with--middle_first.without--middle-second {
    .region--middle_first {
      @include column-reset();
      @include column(8, 12);
    }
  }

  &.with--middle_first.without--middle-third {
    .region--middle_first {
      @include column-reset();
      @include column(8, 12);
    }
  }

  // 2 missing regions

  &.with--middle_first.without--middle-second.without--middle-third {
    .region--middle_first {
      @include column-reset();
      @include column(12, 12);
    }
  }
}

Notice the incosistencies in hyvens and underscores in css classes, eg:
.with--middle_first.without--middle-second.without--middle-third

It seems that the underscore is applied to the Primary Region only. Changing Primary Region to Middle Second yields:

&.with--middle_second.without--middle-first.without--middle-third {
    .region--middle_second

Because the php snippit to generate region classes in page.tpl.php results in classes with hyvens this breaks Primary Region functionality (ie stretching to full width when other blocks are empty) as there is now a disconnect between generated html and css.