v6: Test out using `postcss-custom-media` to reduce responsive variants

Had an idea tonight—can we build a single responsive variant for say the navbar expand that can be customized via CSS variable? Well the answer is not quite. This is because we cannot use CSS variables in media queries. However, we can generate custom media queries and then override those with the help of postcss-custom-media.

Here's how it looks in this proof of concept PR:

@custom-media --navbar-expand (min-width: 768px);

@media (--navbar-expand) {
  .new-navbar-expand {
    // styles
  }
}

You can then override the --navbar-expand custom media:

@custom-media --navbar-expand (min-width: 992px);

Together with PostCSS, this generates the normal media query: @media (min-width: 992px) { ... }. It adds a dependency, but holy crap could it clean out some duplicate code for responsive media queries. This could most obviously work well on our navbar and offcanvas components, but it'd also work on the responsive list groups, dropdown menus, and responsive tables.

Or it could all be a waste. Either way, fun to play around with the idea.