Remove unused USWDS utilities, fonts, components

[aduth]

🛠 Summary of changes

Removes a few unused items from the design system:

• Disables serif font face, to prevent relevant utility classes from being rendered
• Removes unused utilities
• Removes unused components

Impact:

Not quite as dramatic as I'd hoped! Probably because there's a lot of repetition in what's being removed, which Brotli is quite good at optimizing.

NODE_ENV=production yarn build:css && brotli-size app/assets/builds/application.css

Before: 26.4kb
After: 26kb
Diff: -0.4kb (-1.5%)

📜 Testing Plan

Verify no visual regressions.

To verify which classes are being removed here, I created a simplified stylesheet to render just these parts of USWDS:

@use "uswds-core" with (
  $theme-show-notifications: false,
  $theme-font-type-serif: false,
  $output-these-utilities: (
    "align-self",
    "bottom",
    "flex-direction",
    "flex-wrap",
    "font-feature",
    "left",
    "right",
    "top",
  )
);

@forward "uswds-utilities";
@forward "usa-legend";

Relevant output:

Click to expand

.flex-align-self-start {
  align-self: flex-start;
}
.flex-align-self-end {

align-self: flex-end;

}
.flex-align-self-center {

align-self: center;

}
.flex-align-self-stretch {

align-self: stretch;

}
.flex-align-self-baseline {

align-self: baseline;

}
.bottom-1px {

bottom: 1px;

}
.bottom-2px {

bottom: 2px;

}
.bottom-05 {

bottom: 0.25rem;

}
.bottom-1 {

bottom: 0.5rem;

}
.bottom-105 {

bottom: 0.75rem;

}
.bottom-2 {

bottom: 1rem;

}
.bottom-205 {

bottom: 1.25rem;

}
.bottom-3 {

bottom: 1.5rem;

}
.bottom-neg-1px {

bottom: -1px;

}
.bottom-neg-2px {

bottom: -2px;

}
.bottom-neg-05 {

bottom: -0.25rem;

}
.bottom-neg-1 {

bottom: -0.5rem;

}
.bottom-neg-105 {

bottom: -0.75rem;

}
.bottom-neg-2 {

bottom: -1rem;

}
.bottom-neg-205 {

bottom: -1.25rem;

}
.bottom-neg-3 {

bottom: -1.5rem;

}
.bottom-0 {

bottom: 0;

}
.bottom-auto {

bottom: auto;

}
.bottom-full {

bottom: 100%;

}
.flex-row {

flex-direction: row;

}
.flex-column {

flex-direction: column;

}
.flex-wrap {

flex-wrap: wrap;

}
.flex-no-wrap {

flex-wrap: nowrap;

}
.text-tabular {

font-feature-settings: "tnum" 1, "kern" 1;

}
.text-no-tabular {

font-feature-settings: "kern" 1;

}
.left-1px {

left: 1px;

}
.left-2px {

left: 2px;

}
.left-05 {

left: 0.25rem;

}
.left-1 {

left: 0.5rem;

}
.left-105 {

left: 0.75rem;

}
.left-2 {

left: 1rem;

}
.left-205 {

left: 1.25rem;

}
.left-3 {

left: 1.5rem;

}
.left-neg-1px {

left: -1px;

}
.left-neg-2px {

left: -2px;

}
.left-neg-05 {

left: -0.25rem;

}
.left-neg-1 {

left: -0.5rem;

}
.left-neg-105 {

left: -0.75rem;

}
.left-neg-2 {

left: -1rem;

}
.left-neg-205 {

left: -1.25rem;

}
.left-neg-3 {

left: -1.5rem;

}
.left-0 {

left: 0;

}
.left-auto {

left: auto;

}
.right-1px {

right: 1px;

}
.right-2px {

right: 2px;

}
.right-05 {

right: 0.25rem;

}
.right-1 {

right: 0.5rem;

}
.right-105 {

right: 0.75rem;

}
.right-2 {

right: 1rem;

}
.right-205 {

right: 1.25rem;

}
.right-3 {

right: 1.5rem;

}
.right-neg-1px {

right: -1px;

}
.right-neg-2px {

right: -2px;

}
.right-neg-05 {

right: -0.25rem;

}
.right-neg-1 {

right: -0.5rem;

}
.right-neg-105 {

right: -0.75rem;

}
.right-neg-2 {

right: -1rem;

}
.right-neg-205 {

right: -1.25rem;

}
.right-neg-3 {

right: -1.5rem;

}
.right-0 {

right: 0;

}
.right-auto {

right: auto;

}
.top-1px {

top: 1px;

}
.top-2px {

top: 2px;

}
.top-05 {

top: 0.25rem;

}
.top-1 {

top: 0.5rem;

}
.top-105 {

top: 0.75rem;

}
.top-2 {

top: 1rem;

}
.top-205 {

top: 1.25rem;

}
.top-3 {

top: 1.5rem;

}
.top-neg-1px {

top: -1px;

}
.top-neg-2px {

top: -2px;

}
.top-neg-05 {

top: -0.25rem;

}
.top-neg-1 {

top: -0.5rem;

}
.top-neg-105 {

top: -0.75rem;

}
.top-neg-2 {

top: -1rem;

}
.top-neg-205 {

top: -1.25rem;

}
.top-neg-3 {

top: -1.5rem;

}
.top-0 {

top: 0;

}
.top-auto {

top: auto;

}
.usa-legend {

font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;

font-size: 1.06rem;

line-height: 1.3;

display: block;

font-weight: normal;

margin-top: 1.5rem;

max-width: 30rem;

}
.usa-legend--large {

font-size: 2.13rem;

font-weight: 700;

margin-top: 1rem;

}