Build style-dictionary from YAML config

build-from-yaml.js

const YAML = require('yamljs');
const globby = require('globby');
const fs = require('fs-extra');
const path = require('path');
const styleDictionary = require('style-dictionary');

const convertStringValues = obj =>
  Object.keys(obj).reduce((acc, key) => {
    const item = obj[key];
    const hasValueKey = !!item.value;

    let resolvedValue;

    if (hasValueKey) {
      resolvedValue = item;
    } else if (typeof item === 'string') {
      resolvedValue = { value: item };
    } else {
      resolvedValue = convertStringValues(item);
    }

    return {
      ...acc,
      [key]: resolvedValue
    };
  }, {});

(async () => {
  await fs.remove('build');

  await fs.copy('properties', '.properties_json');

  const paths = await globby(['.properties_json/**/*.yml']);

  await Promise.all(
    paths.map(async p => {
      const data = YAML.parse(await fs.readFile(p, 'utf8'));

      // Map value fields to objects
      console.info(`Converting ${p} to JSON...\r`);

      const json = JSON.stringify(convertStringValues(data));

      // Write output
      const newP = path.join(
        path.dirname(p),
        path.basename(p, '.yml') + '.json'
      );

      console.info(`Writing ${newP}...`);

      await fs.writeFile(newP, json);
    })
  );

  console.info('Processing style-dictionary...');

  const sd = styleDictionary.extend('./config.json');

  sd.buildAllPlatforms();

  console.info('Removing build directory...');
  await fs.remove('.properties_json');
})();

Scans properties directory for YAML, converts to JSON under .properties_json directory, and runs Style Dictionary on that directory.

i.e. convert

color:
  base:
    gray:
      light: '#CCCCCC'
      medium: '#999999'
      dark: '#111111'
    red: '#FF0000'
    green: '#00FF00'
    pink:
      value: hotpink

to

{
  "color": {
    "base": {
      "gray": {
        "light": { "value": "#CCCCCC" },
        "medium": { "value": "#999999" },
        "dark": { "value": "#111111" }
      },
      "red": { "value": "#FF0000" },
      "green": { "value": "#00FF00" },
      "pink": { "value": "hotpink" }
    }
  }
}

package.json

{
  "name": "style-dictionary-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "node scripts/build.js"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "fs-extra": "^8.1.0",
    "globby": "^11.0.0",
    "style-dictionary": "^2.8.3",
    "yamljs": "^0.3.0"
  }
}