Typography styles can't be @extend'ed inside media queries

[parkerpearson]

Re-raising this issue since I am running into it again with the design site.

There is no workaround besides copy/pasting the code you want to @extend which is brittle, not sharable, and creates tech debt.

The solution is to provide @mixin versions of the classes we currently use via @extend. Both options are easy to support via:

@mixin pe-page-title {
  font-size: 38px;
  ...
}

.pe-page-title {
  @include pe-page-title;
}

// Now you can either

@extend .pe-page-title;

// Or

@include pe-page-title;

[StommePoes]

Hm. What's the list, or is it just everything in typography?

[parkerpearson]

@StommePoes What I ran into was just .pe-page-title and .pe-page-title--small, but this could apply to any typography class.

[antelopeb]

@parkerpearson is this something you're still interested in? In particular, why is the @extend not working for typography? I feel like I should know this, but I can't remember.

[parkerpearson]

@antelopeb Yes I think it still makes sense to fix, although I don't currently need it as I probably did a manual work around when I was doing the UXF site.

It's not specific to typography, but classes can't be @extend'ed from within a media query. I ran into it with typography where I wanted to change the font size of a heading based on the screen width.