An idea for how to meta-program a CSS framework. See output.css below

generate.js

// $var and $class generate a new CSS variable/class
const $var   = ($obj, $key) => `--${$key}: ${$obj.$vars[$key]};`
const $class = ($obj, $key) => `.${$key} { ${$obj.$prop}: var(--${$key}); }`

// $factory builds a CSS string
function $factory($pre, $obj, $fn) {
  return Object
    .keys($obj.$vars)
    .map ($key => $fn($obj, $key))
    .join(`\n${$pre}`)
}

// $vars and $classes call $var and $class with arguments
const $vars    = ($obj) => `:root {\n\t${$factory("\t", $obj, $var)}\n}`
const $classes = ($obj) => `\n\n${$factory("", $obj, $class)}`

// $generate builds a CSS string with vars and classes
const $generate = ($obj) => $vars($obj) + $classes($obj)

const $lineHeight = {
  $prop: "line-height",
  $vars: {
    "single-spaced": "1.2",
    "normal-spaced": "1.5",
    "double-spaced": "2.0"
  }
}

console.log($generate($lineHeight))

output.css

:root {
  --single-spaced: 1.2;
  --normal-spaced: 1.5;
  --double-spaced: 2.0;
}

.single-spaced { line-height: var(--single-spaced); }
.normal-spaced { line-height: var(--normal-spaced); }
.double-spaced { line-height: var(--double-spaced); }