CSS module name generation & CSS pruning

[rsek]

applies various fixes, optimization, and cleanup ahead of sass migration. this reduces the size of the compiled ironsworn.css by ~45% (!).

before:

after:

• write a function to programmatically generate pretty CSS module class names

  • format: ${kebabCase(componentFilename)}__${kebabCase(class)}
  • example: font-icon__wrapper
  • this gives us legible, fairly predictable names that are easily targeted by e.g. user style sheets, and are easy to locate even without the use of dev tools
  • does mean we need to keep our component names unique, but that seems like the best policy regardless

• normalizes several CSS module class names to match migrate from LESS to SCSS (via PostCSS) #567 , and to make the generated class names more concise

• minify rendered CSS via CSS nano

• replace autoprefixer with postcss-preset-env, which includes autoprefixer (and offers more detailed configuration)

• reconfigure browserslist: our previous browserlist was actually much more lenient than even the general-purpose defaults provided by browserslist, so we were generating CSS for browsers that don't even support our compiled JS

• work out fix for CSS bloat. running vite in library mode inlines images as base64, regardless of the configured size. yikes.

  • there's ~70+ base64 strings in our CSS currently 😬
  • there's an open PR for it, but i haven't found any satisfactory workarounds there
  • referencing svg sprites doesn't work... at least in currently available browsers. sigh.
  • at the very least i could set them as CSS variables, then they just appear once? appear only as URLs.

• Update CHANGELOG.md