Theo Tailwind v2 Transform

tailwind-format.js

const camelCase = require("lodash/camelCase");
const kebabCase = require("lodash/kebabCase");
const theo = require("theo");

theo.registerFormat("tailwindv2", (result) => {
  // "result" is an Immutable.Map
  // https://facebook.github.io/immutable-js/
  let tailwindTheme = {
    textColor: {},
    backgroundColor: {},
    fontFamily: {},
  };

  result.get("props").forEach((prop) => {
    let name = prop.get("name");
    let cssVar = `var(--${kebabCase(name)})`;
    console.log(prop.get("category"));
    switch (prop.get("category")) {
      case "text-color":
        {
          let property = name.replace("TEXT_", "");
          tailwindTheme.textColor[camelCase(property)] = cssVar;
        }
        break;
      case "background-color":
        {
          let property = name.replace("BG_", "");
          tailwindTheme.backgroundColor[camelCase(property)] = cssVar;
        }
        break;
      default:
        break;
    }
  });
  return `
    module.exports = ${JSON.stringify(tailwindTheme, null, 2)}
  `;
});

theo
  .convert({
    transform: { type: "web", file: "./design-tokens/app.json" },
    format: { type: "tailwindv2" },
  })
  .then((config) => require("fs").writeFileSync("tailwindv2.js", config))
  .catch((error) => console.log(`Something went wrong: ${error}`));