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.