Development mode for examples using thi.ng meta‐css

Example projects added since late 2023 are using a new project template which utilizes the thi.ng/meta-css toolchain to better separate styles from code. This wiki page acts as centralized description for working with this setup:

To just run & build this example, use the usual yarn start or yarn build and see the example build instructions.

If you want to experiment with the source code and specifically the MetaCSS styles (*.mcss files), this project setup requires a different approach during development:

Using a multi-process runner

tl;dr I recommend using a multi-process launcher/runner like mprocs to invoke both of steps/commands described below, all at once, like so:

(cd examples/<example> && mprocs "yarn css:watch" "yarn start:only")

Since August 2024, all examples using the meta-css workflow also provide a dev script alias as syntax sugar for the above command and can be used like so:

(cd examples/<example> && yarn dev)

thi.ng/meta-css transpiler

Open a terminal and use the thi.ng/meta-css toolchain to first generate utility classes for a CSS framework and then start the transpiler/bundler in watch mode to compile MetaCSS stylesheets (e.g. /css/style.mcss) to actual CSS, using the just generated framework specs:

# from the repo root directory
(cd examples/<example> && yarn css:watch)

This command will start observing the file patterns listed below and create both a new JSON file (/css/framework.json) with hundreds of CSS class definitions & declarations and a transpiled & bundled version of *.mcss stylesheets in the example's directory... This bundled output file (/css/style.css) is also being watched by Vite, which will then automatically reload the styles in the browser...

• /css/*.mcss.json (MetaCSS rule specs)
• /css/*.mcss (MetaCSS stylesheets)
• /src/*.mcss (ditto)

The /css/custom.mcss.json and /css/style.mcss files contain further comments, but please also do consult the thi.ng/meta-css readme for further guidance.

Vite dev server

Open a second terminal and start the ViteJS dev server only (without any other preparation steps):

(cd examples/<example> && yarn start:only)