Do Not Use `postcss-extend`

[wesleyboar]

Goal

• Do not use postcss-extend.
• Do not break the code that relies on @extend.

Background

Dependency postcss-extend is outdated, unsupported, esoteric, and causing Node warnings (see WP-280).

Direction

1. Install PostCSS Mixins.
2. Find/Replace old "extend" syntax with new "mixin" syntax.
   _{We could automate with postcss-classes-to-mixins, but uninstall after migration.}
3. Test all relevant code that TACC/Core-Styles demo lets us test.
4. Test clients:
   • TACC/Core-CMS
   • TACC/Core-Portal
5. Use on clients:
   • TACC/Core-CMS
   • TACC/Core-Portal
   • TACC/tup-ui

Reference

Replace

.x-truncate--many-lines {
  ...
}

and

... {
  @extend .x-truncate--many-lines;
}

With

@define-mixin x-truncate--many-lines {
  ...
}

and

... {
  @mixin x-truncate--many-lines;
}

[wesleyboar]

Status

• message
• truncate, untruncate
• link
• tabs
• layout
• tabs
• grid
• figure
• center
• blockquote
• article-link