feat(typography): add feature targeting for styles

[mmalerba]

No description provided.

[abhiomkar]

why not include all the styles inside single @include block?

[mmalerba]

I remember @kfranqueiro mentioning on another PR (can't remember where exactly) that he preferred this:

.some-selector {
  @include mdc-feature-targets($feat-structure) {
    ...
  }
}

.some-other-selector {
  @include mdc-feature-targets($feat-structure) {
    ...
  }
}

over this:

@include mdc-feature-targets($feat-structure) {
  .some-selector {
    ...
  }

  .some-other-selector {
    ...
  }
} 

I agree that this makes it easier to read the file because you can follow the selectors down first, and then worry about what feature you're targetting at the very end

[abhiomkar]

Ah ok. Thanks for explaining!

Yes, packaging feature related styles (ie, structure) into one block might be good for readability. But if you think it is consistent with other files this looks good.

WDYT @kfranqueiro ?

[kfranqueiro]

Yeah, this was based on a comment I made on one of the other PRs. IIRC I specifically commented in a case where writing selectors nested within feature-targets blocks ended up causing redundant selectors in output compared to before, so this also serves to discourage that from happening, as well as just more closely mirroring how you'd write CSS if you were to ignore the feature-targets stuff.

[mmalerba]

I made a PR to update the stylelint config: #4307