# Origami as an assembler for css?

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

`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.

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

:root {
  --textcolor: black;
}

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

```


`style.ori.css`:

```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 angle brackets are needed because the path contains a #)*/
${<lib/page-layout-grid-centered-#26ea-a0.css>}


```

## Versioning
If a collection of projects are using the shared libary, there might be some divergence of css 'components' used. The idea of the library is that it contains reusable groups of css rules to achieve recognizable outcomes such as 'header', 'menu-to-side-on-mobile', 'sticky-footer', 'content-centered-with-grid', 'content-centered-with-flexbox'. The ideal is to merge improvements from each project into the library in such a way that all projects can benefit, without breaking things. However, sometimes there might be incompatibilities.

What would work here is a strongly hands-on approach to version control. This is not about isolation of css components; a careful attention to the css cascade in each project is assumed. A solution could be to identify versions of 'solutions' with a unique version number in the name. Demonstrated with `page-laout-grid-centered-#25ea-a0.css`. Additionally, the comment above the include line contains PINNED as a reminder to keep this project on this version until further review; apparently there was a conflict with a newer version of the grid-centered layout css.

## 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.

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`)