Simple tooling to automate authoring functional CSS frameworks using JavaScript Objects

generate.js

// $gen_var generates a css variable
// e.g. --single-spacing: 1.2;
var $gen_var = (obj, ident) =>
  `--${obj.ident_prefix + ident}: ${obj.data[ident]};`

// $gen_class generates a css class
// e.g. .single-spacing { line-height: var(--single-spacing); }
var $gen_class = (obj, ident) =>
  `.${obj.ident_prefix + ident} { ${obj.prop}: var(--${ident}); }`

// $factory generates either a css variable or class
var $factory = (prefix, obj, fn) =>
  Object
    .keys(obj.data)
    .map (ident => fn(obj, ident))
    .join(`\n${prefix}`)

// $gen_vars generates css variables
// e.g. --single-spacing: 1.2;
// e.g. --normal-spacing: 1.5;
// e.g. --double-spacing: 2.0;
var $gen_vars = (obj) =>
  `\n:root {\n\t${$factory("\t", obj, $gen_var)}\n}\n`

// $gen_vars generates css classes
// e.g. .single-spacing { line-height: var(--single-spacing); }
// e.g. .normal-spacing { line-height: var(--normal-spacing); }
// e.g. .double-spacing { line-height: var(--double-spacing); }
var $gen_classes = (obj) =>
  `\n${$factory("", obj, $gen_class)}\n`

// $generate generates css
// e.g. :root { --single-spacing: 1.2; }
// e.g. .single-spacing { line-height: var(--single-spacing); }
var $generate = (obj) =>
  (obj.gen_vars    ? $gen_vars   (obj) : "") +
  (obj.gen_classes ? $gen_classes(obj) : "")

var $mtop = {
  prop: "margin-top",
  ident_prefix : "mtop-",
  gen_vars: false,
  gen_classes : true,
  data: {
    "extra-smallest" : null,
    "extra-smaller " : null
  }
}

console.log($generate($mtop))

output.css

.mtop-extra-smallest { margin-top: var(--extra-smallest); }
.mtop-extra-smaller  { margin-top: var(--extra-smaller ); }