MDC Web #2415 experimentation

input.scss

@function replace-or-append($list, $target, $value) {
  $newlist: ();
  $replaced: false;

  @for $i from 1 through length($list) {
    @if (nth($list, $i) == $target) {
      $newlist: append($newlist, $value);
      $replaced: true;
    } @else {
      $newlist: append($newlist, nth($list, $i));
    }
  }

  @if not $replaced {
    $newlist: append($newlist, $value);
  }

  @return $newlist;
}

@function replace-parent-or-append($selectors, $target, $value) {
  @for $i from 1 through length($selectors) {
    $selectors: set-nth($selectors, $i, replace-or-append(nth($selectors, $i), $target, $value));
  }
  @return $selectors;
}

@mixin mdc-bar-color($color) {
  $selectors: replace-parent-or-append(&, '.mdc-bar', '.mdc-bar__sub');

  @at-root #{$selectors} {
    color: $color;
  }
}

.mdc-bar {
  @include mdc-bar-color(#000);
}

.mdc-foo {
  @include mdc-bar-color(#333);
}

.mdc-foo .mdc-bar {
  @include mdc-bar-color(#333);
}

output.css

.mdc-bar__sub { /* Problematic, since we presumably _want_ .mdc-bar here! */
  color: #000;
}

.mdc-foo .mdc-bar__sub { /* Working as intended, adds the class */
  color: #333;
}

.mdc-foo .mdc-bar__sub { /* Working as intended, replaces the class */
  color: #333;
}