How to extend mutual modifiers with Stylus?

Question

I have a header with some modifiers:

.header {
  font-weight: bold;
}
.header--main {
  font-family: 'Segoe UI', sans-serif;
}
.header--type-error {
  color: red;
}
.header--main.header--type-error {
  font-size: 1.2em;
}

More stylish:

.header {
  font-weight: bold;
  &--main {
    font-family: 'Segoe UI', sans-serif;
  }
  &--type-error {
    color: red;
  }
  &--main&--type-error {
    font-size: 1.2em;
  }
}

If I want to extend Error__header with the header and his mods, I can do it like this

.Error__header {
  @extend .header;
  @extend .header--main;
  @extend .header--type-error;
  @extend .header--main.header--type-error;
}

Is there a solution for getting effect of @extend .header--main.header--type-error without writing it?

Answer 1

For obvious reasons you can't have some effect without doing anything for it :)

However, in your case, you could want to use placeholder selector alongside with root reference:

.header,
$foo {
  font-weight: bold;
  &--main,
  /$foo {
    font-family: 'Segoe UI', sans-serif;
  }
  &--type-error,
  /$foo {
    color: red;
  }
  &--main&--type-error,
  /$foo {
    font-size: 1.2em;
  }
}

.Error__header {
  @extend $foo;
}

would be equal to the code you wrote. And if you'd wanted not to have all the selectors like .Error__header--main.Error__header--type-error generated and only the .Error__header added to each of those, you can do this:

.header {
  &,
  /$foo {
    font-weight: bold;
  }
  &--main,
  /$foo {
    font-family: 'Segoe UI', sans-serif;
  }
  &--type-error,
  /$foo {
    color: red;
  }
  &--main&--type-error,
  /$foo {
    font-size: 1.2em;
  }
}

.Error__header {
  @extend $foo;
}

and this would compile to

.header,
.Error__header {
  font-weight: bold;
}
.header--main,
.Error__header {
  font-family: 'Segoe UI', sans-serif;
}
.header--type-error,
.Error__header {
  color: #f00;
}
.header--main.header--type-error,
.Error__header {
  font-size: 1.2em;
}