Fylgja - Props Builder

The Fylgja Props Builder simplifies the creation of Design Tokens (CSS custom properties) by converting JavaScript objects into CSS variables or JSON-based token systems.

This tool empowers you to construct comprehensive Design Token sets with ease.

[!Note] Originally developed for the Fylgja Tokens package, this utility is also adaptable for use with other design systems.

Installation

You can install Fylgja Props Builder via npm or other Node-based package managers like pnpm or bun:

npm install @fylgja/props-builder

Usage

Import the propsBuilder function into your Node.js scripts:

import { propsBuilder } from "../index.js";

Then, use it to generate output files based on your configuration:

import { propsBuilder } from "../index.js";

propsBuilder(
  props, // Required: JavaScript object containing your design tokens.
  filename, // Required: Name of the output file.
  {
    parseAs: "auto", // Optional: Specifies the output format ("auto", "css", "json"). Defaults to "auto" (determined by file extension).
    writeToFile: true, // Optional: If false, outputs the generated content to the console. Defaults to true.
    selector: ":where(:root)", // Optional: CSS selector for custom property declarations (CSS output only).
    wrapper: "", // Optional: Wrapper for design system-specific formatting (e.g., Figma).
  }
)

For basic usage, only the props and filename arguments are necessary.

The optional parameters provide flexibility for advanced scenarios.

import { propsBuilder } from "../index.js";

propsBuilder(
  {
    color: {
      red: "#f00",
      green: "#0f0",
      blue: "#00f",
    }
  },
  "output.css"
);

This will generate output.css with the following content:

:where(:root) {
  --color-red: #f00;
  --color-green: #0f0;
  --color-blue: #00f;
}

This example demonstrates a simple use case, but the Props Builder can handle complex and nested design token structures, facilitating the creation of robust and scalable design systems.