Composes should cascade within a block

[ramitha]

If we have two classes on the same block that are composing other classes, it should just work. In the code block below, the resolved style should be that of text-body[color=text].

tag.block.scss

:scope {
  composes: 'text-body[color=text-on-dark]', 'text-body[size=small]';
  border-radius: token('corner-radius-small');
  padding: token('spacing-half-x') token('spacing-one-x');
}

// types
:scope[type=enabled] {
  composes: 'text-body[color=text]';
  background-color: token('color-background-none-active');
}

text-body.block.scss

/ defaults
:scope {
  font-size: token('font-size-medium');
  line-height: token('line-height-default');
  font-weight: token('font-weight-regular');
  color: token('color-text');
}

:scope[size=small] {
  font-size: token('font-size-small');
}

:scope {
  @include text-color('text');
  @include text-color('text-low-emphasis');
  @include text-color('action');
  @include text-color('signal-positive');
  @include text-color('signal-negative');
  @include text-color('signal-neutral');
  @include text-color('text-on-dark');
}