Write a webpack loader that converts styles types function chains back into strings

[sirtimbly]

In order to save on final compiled bundle size the generated classes based on the CSS files should be circumvented after the developer is done using them for writing. A webpack loader might be able to look at the long function chains and use regex to convert them back into a static hyperscript declaration like h("div.bold.mx-2.p-2") the typescript classes are super useful for writing and linting, but add a couple kilobytes of code to the final bundle just for developer ergonomics .

I have considered switching to CSS Modules but am not sure it will really be helpful since the webpack css-loader is built for replacing values in a class attribute with a specifically scoped hashed version.

Pseudo code:

1. loader function is passed the source of a typescript file
2. check for existence of an import of a generated atomic stylesheet class

• this relies on consistent use of a naming convention like import $$ from "./base-styles" so anything that start with import {$, $$ is a style class import

3. regex match any code string that starts with $$( or $. and ends with .h(
4. each match should be converted so that dots are spaces, and camelCased symbols are converted to hyphen-cased - basically the inverse of what the frets-styles-generator does to create the typescript class members
5. remove the reference to the style class import
6. add a import { h } from "maquette" (if it doesn't already exist)