Add bundle size report

[shawnbot]

This adds a new report for CSS bundle sizes and selector counts to our publish Action logs. On this branch, it looks like this:

Reporting bundle sizes...
┌─────────────────────┬───────────┬─────┬───────────┬─────┬──────────┬─────┬──────────────────────────────┐
│ name                │ selectors │   ± │ gzip size │   ± │ raw size │   ± │ path                         │
├─────────────────────┼───────────┼─────┼───────────┼─────┼──────────┼─────┼──────────────────────────────┤
│ primer              │      2956 │   0 │   22.91 K │   0 │ 145.95 K │   0 │ dist/primer.css              │
│ core                │      1999 │   0 │   16.14 K │   0 │ 102.09 K │   0 │ dist/core.css                │
│ utilities           │      1152 │   0 │    7.26 K │   0 │  56.74 K │   0 │ dist/utilities.css           │
│ marketing           │       660 │   0 │    3.99 K │   0 │  27.42 K │   0 │ dist/marketing.css           │
│ product             │       297 │   0 │    3.56 K │   0 │  16.33 K │   0 │ dist/product.css             │
│ marketing-utilities │       618 │   0 │    3.01 K │   0 │  23.64 K │   0 │ dist/marketing-utilities.css │
│ forms               │       187 │   0 │    2.92 K │   0 │  11.49 K │   0 │ dist/forms.css               │
│ buttons             │       138 │   0 │     1.8 K │   0 │   8.81 K │   0 │ dist/buttons.css             │
│ markdown            │       121 │   0 │    1.53 K │   0 │   6.33 K │   0 │ dist/markdown.css            │
│ base                │       130 │   0 │    1.48 K │   0 │   3.86 K │   0 │ dist/base.css                │
│ navigation          │        83 │   0 │    1.37 K │   0 │   5.58 K │   0 │ dist/navigation.css          │
│ layout              │       164 │   0 │    1.09 K │   0 │   7.01 K │   0 │ dist/layout.css              │
│ tooltips            │        57 │   0 │       1 K │   0 │   3.47 K │   0 │ dist/tooltips.css            │
│ avatars             │        38 │   0 │     815 B │   0 │   2.58 K │   0 │ dist/avatars.css             │
│ box                 │        49 │   0 │     767 B │   0 │   2.85 K │   0 │ dist/box.css                 │
│ marketing-buttons   │        14 │   0 │     628 B │   0 │   1.65 K │   0 │ dist/marketing-buttons.css   │
│ popover             │        85 │   0 │     604 B │   0 │   3.75 K │   0 │ dist/popover.css             │
│ marketing-type      │        28 │   0 │     572 B │   0 │   1.67 K │   0 │ dist/marketing-type.css      │
│ pagination          │        26 │   0 │     512 B │   0 │   1.33 K │   0 │ dist/pagination.css          │
│ labels              │        21 │   0 │     511 B │   0 │   1.25 K │   0 │ dist/labels.css              │
│ alerts              │        11 │   0 │     397 B │   0 │    889 B │   0 │ dist/alerts.css              │
│ blankslate          │         9 │   0 │     339 B │   0 │    656 B │   0 │ dist/blankslate.css          │
│ subhead             │         6 │   0 │     251 B │   0 │    388 B │   0 │ dist/subhead.css             │
│ branch-name         │         3 │   0 │     227 B │   0 │    280 B │   0 │ dist/branch-name.css         │
│ truncate            │         6 │   0 │     194 B │   0 │    452 B │   0 │ dist/truncate.css            │
│ breadcrumb          │         4 │   0 │     175 B │   0 │    269 B │   0 │ dist/breadcrumb.css          │
│ progress            │         3 │   0 │     130 B │   0 │    150 B │   0 │ dist/progress.css            │
│ table-object        │         3 │   0 │     119 B │   0 │    151 B │   0 │ dist/table-object.css        │
└─────────────────────┴───────────┴─────┴───────────┴─────┴──────────┴─────┴──────────────────────────────┘

However, it's way more useful when run on a branch that adds or removes CSS, as in this run for #760 (with redundant lines removed):

Reporting bundle sizes...
┌─────────────────────┬───────────┬───────┬───────────┬─────────┬──────────┬───────┬──────────────────────────────┐
│ name                │ selectors │     ± │ gzip size │       ± │ raw size │     ± │ path                         │
├─────────────────────┼───────────┼───────┼───────────┼─────────┼──────────┼───────┼──────────────────────────────┤
│ primer              │      3096 │ + 140 │   23.88 K │ + 991 B │ 151.95 K │ + 6 K │ dist/primer.css              │
│ core                │      2139 │ + 140 │   17.12 K │ + 998 B │ 108.09 K │ + 6 K │ dist/core.css                │
│ utilities           │      1292 │ + 140 │    8.23 K │ + 998 B │  62.73 K │ + 6 K │ dist/utilities.css           │
│ marketing           │       660 │     0 │    3.99 K │       0 │  27.42 K │     0 │ dist/marketing.css           │

You can run the report locally with:

# you'll need some output in the dist/ directory to compare
npm run dist
script/bundle-size-report

There are some useful options in the script that I haven't documented yet, but I wanted to get some feedback from @primer/ds-core on the output itself before going too far down that road.

[jonrohan]

Super cool!

[shawnbot]

It would be really cool if we could have this posted to the PR as a comment if there is a diff in bundle size.