Today's #ReleaseSunday features a major update for the https://thi.ng/meta-css toolchain, a data-driven codegen for creating custom modular CSS frameworks, incl. transpiler, bundler, dev/watch mode...
The new version supports callable parametric templates, which not only help to reduce the overall API surface (i.e. the total number of rules) of a generated CSS framework, but also enable advanced operations like those shown in the attached images (e.g. declarations of CSS color variables (in rgb, hsl, lch, or oklch modes) and pure CSS color per-color-channel adjustments...).
Also new, is added support for documentation metadata for all generative CSS class & template specs (incl. template params). Parts of the readme are generated from these embedded docs and the next version will include a new CLI command to generate Markdown files from/for these CSS docs...
The readme for this package is already pretty detailed by now and should cover most important patterns and usage (incl. the new template features). Take a look (also the examples linked from the readme)!
Some previews of recent #ThingUmbrella updates/additions:
The declarative & fully typed CLI arg parser https://thi.ng/args now has a nice cliApp() wrapper (also largely declarative), supporting multiple sub-commands (with shared and command-specific args/options), automated usage generation, https://no-color.org support/detection. Still doing more testing with various CLI tools of mine (from which this all has been extracted), but planning to release in next couple of days...
People who've been following the project will know that for years I've been a big fan of Tachyons CSS[1], which is pretty much used for all ~150 examples in the repo. As nice as it is, it's also unmaintained by now and there're various more modern features missing (e.g. grids) and there're also general issues with the overall approach. Switching to Tailwind would mean having to install a whole boatload of additional tooling so is anathema and also doesn't address some of the features I've been wanting to explore: E.g. Generating entire CSS frameworks from a bunch of wildly combinatorial rules, options & lookup tables, keeping literally everything customizable, combinable and purely data-driven (i.e. generated from a JSON file). Similar to Tachyons CSS, these custom generated frameworks are based on standalone CSS utility classes (hence the original particle-inspired naming). However, I'm aiming for a different usage and instead of assigning them directly to an HTML element's class attrib, here we can assign them to (nested) CSS selectors to define fully inlined declarations. The additional killer feature is that each of these classes can be prefixed with an arbitrary number of freely defined media queries and thus making it trivial to add additional responsive/accesible features and without requiring megabytes of raw CSS to cover the combinatorial explosion!
For the past few days I've been trialling this new approach and I very much like where this is going... Take a look at the basic example in the new https://thi.ng/meta-css package & readme. I will also write more about this in coming days. All in all, it's another example where code generation and a domain specific language approach is super powerful again... limits of my world and such...
Also, speaking of bloatware (earlier above), the entire toolchain (incl. CLI & all dependent packages) is a mere 21KB (minified) and it already can do a ton!
Just updated & simplified the https://thi.ng/meta-css tooling to also use JSON as interim representation for the generated CSS framework definitions. The metacss convert command now also acts as bundler, deduplicating CSS selectors, combining rules and media query criterias from multiple meta-stylesheets and optionally including arbitrary CSS (e.g. normalize.css as a sane starting point). More features since yesterday, but total tool bundle size (incl. all deps) has shrunk to 19KB!
I've updated the readme with an expanded example and updated instructions (should you want to try it out, even though it's still pre-release...):