Loose sketch of css-in-js root variables

my-styles.js

const rootCSSVars = {
  colorPrimary: {name: '--color-primary', value: 'red'},
  colorSecondary: {name: '--color-secondary', value: 'orange'},
}

writeCSSToDOM(`
  :root {
    ${_.mapValues(rootCSSVars, (v) => `${v.name}: ${v.value};\n`)}
  }
`)

export const vars = _.map(rootCSSVars, (v, k) => ([k,`var(${name})`]));
// so you can do this:
import {vars} from 'my-styles'
css({
  color: vars.primaryColor,
})