Origami as an assembler for css?

An idea for building a shared, overridable library of styles.

To serve the website: ori serve site.ori.

lib is a (symlink to a) directory of css snippets. style.css, the final stylesheet for this project, is output by style.ori.css, which includes files from lib.

lib/typography.css. Document the interface: vars used and selectors targeted.

/*
 * vars: --textcolor
 * targets: body
 */

:root {
  --textcolor: black;
}

body {
  font-family: sans-serif;
  font-size 16px;
  color: var(--textcolor);
}

style.ori.css:

/* order is important. */
${tokens.js(tokens.yaml/, lib/tokens.yaml/)}


/*include the typography rules: typography.css*/
${lib/typography.css}

/*overrides for typography: typography.css*/
body {
  --textcolor: #25c4aa;
  font-family: 'Jost*', sans-serif; 
}

h1 {
  font-size: var(--titlesize)
}

/* include layout rules: page-layout-grid-centered-#25ea-a0 PINNED
 * the #VERSION_NUMBER indicates which of the variants in the library is being used.
 * PINNED is a reminder not to upgrade to a new version without reviewing first. */
${<lib/page-layout-grid-centered-#26ea-a0.css>}
/*(the angle brackets are needed because the path contains a #)*/

What about design tokens?

This works, too. A tokens.yaml file can be read by tokens.js and converted to CSS custom property declarations: titlesize: 3rem => --titlesize: 3rem;.

tokens.js also optionally merges a default tokens file from lib with a local one, overriding default values if they are defined in the local file.

NOTE: This project contains some convoluted variable overrides for demonstration purposes -- not necessarily recommended in production.

I suppose Origami templating could be applied to the token files, to compute some values from others? See ./token-compute.ori.yaml.

Disadvantages

no source mapping makes debugging in the browser more difficult. Could probably be added fairly easily?

Advantages

no extra tooling and dependencies (e.g. postcss -- compare gist-weborigami-postcss