Extending variant depreciation

[rwdj]

Using variants in the RSCCS guide, I expect to be able to extend a specific variant of a componant. Like so:

.bad-button {
  &.-red { background-color: red; }
  &.-large { font-size: 500em; }
}

.search-form {
  > .submit {
    @extend .search-button;
    @extend .search-button.-large;
    @extend .search-button.-red;
  }
}

.search-button {
  width: 100%;
  &.-red { color: red; }
  &.-large { font-size: 1000em; }
}

which produces, as expected:

.bad-button.-red { background-color: red; }

.bad-button.-large { font-size: 500em; }

.search-button, .search-form > .submit { width: 100%; }

.search-button.-red, .search-form > .submit { color: red; }

.search-button.-large, .search-form > .submit { font-size: 1000em; }

DEPRECATION WARNING on line xx of example.scss:
Extending a compound selector, .search-button.-large, is deprecated and will not be supported in a future release.
Consider "@extend .search-button, .-large" instead.
See http://bit.ly/ExtendCompound for details.

DEPRECATION WARNING on line xx of example.scss:
Extending a compound selector, .search-button.-red, is deprecated and will not be supported in a future release.
Consider "@extend .search-button, .-red" instead.
See http://bit.ly/ExtendCompound for details.

Okay, a depreciation warning from Dart Sass, even though it's exactly what I wanted. Let's see what happens when I follow the depreciation warning so this feature doesn't break my website in the future:

.bad-button {
  &.-red { background-color: red; }
  &.-large { font-size: 500em; }
}

.search-form {
  > .submit {
    @extend .search-button, .-large, .-red;
  }
}

.search-button {
  width: 100%;
  &.-red { color: red; }
  &.-large { font-size: 1000em; }
}

.bad-button.-red, .search-form > .bad-button.submit { background-color: red; }

.bad-button.-large, .search-form > .bad-button.submit { font-size: 500em; }

.search-button, .search-form > .submit { width: 100%; }

.search-button.-red, .search-form > .submit { color: red; }

.search-button.-large, .search-form > .submit { font-size: 1000em; }

Okay, it looks fine, but it looks like it's bleeding a bit. The extra rules are:

.search-form > .bad-button.submit { background-color: red; }

.search-form > .bad-button.submit { font-size: 500em; }

That doesn't look very dangerous. Does anyone see a concern? Was I worried for nothing?

If so, should the recommended syntax be added to the RSCCS nested components guide?

[rwdj]

I am now avoiding this by being explicit with variant names:

.bad-button {
  &.-redbadbutton { background-color: red; }
  &.-largebadbutton { font-size: 500em; }
}

.search-form {
  > .submit {
    @extend .search-button, .-largesearchbutton, .-redsearchbutton;
  }
}

.search-button {
  width: 100%;
  &.-redsearchbutton { color: red; }
  &.-largesearchbutton { font-size: 1000em; }
}

This results in:

.bad-button.-redbadbutton { background-color: red; }

.bad-button.-largebadbutton { font-size: 500em; }

.search-button, .search-form > .submit { width: 100%; }

.search-button.-redsearchbutton, .search-form > .submit { color: red; }

.search-button.-largesearchbutton, .search-form > .submit { font-size: 1000em; }

which is effectively identical to the original intended result above.