@heathmont/moon-css

Moon CSS

A library for generating primitive, semantic, component variables and component classes.

Features

• Generates CSS variables from Figma design tokens
• Optionally configures a Tailwind v3 preset
• Optionally generates pre-built component classes

Installation

• Get required and optional variables:
  • Personal Access Token (FIGMA_TOKEN)
  • Base variables Figma file ID (FIGMA_FILE)
  • Component variables Figma file ID (FIGMA_COMPONENTS_FILE). OPTIONAL
  • Installation directory for the Moon CSS script (MOON_OUTPUT_DIR). OPTIONAL
• Create a .env file with your variables:

FIGMA_TOKEN=figd_personal-access-token
FIGMA_FILE=your-brand:BZiHkvF7pXFHrFH8P0cG2T
FIGMA_COMPONENTS_FILE=your-brand:S3q1SkVngbwHuwpxHKCsgtJj
MOON_OUTPUT_DIR=assets

Usage

Basic installation:

npx @heathmont/moon-css

This generates css/your-brand-base.css with all CSS variables.

Optional Features

Generate Tailwind preset:

npx @heathmont/moon-css --with-preset

This adds js/your-brand-base-preset.js for Tailwind utility classes.

Include pre-built components:

npx @heathmont/moon-css --with-preset --with-components

This also generates js/moon-components.js with ready-to-use component classes.

Output Files

• css/your-brand-base.css - CSS variables
• js/your-brand-base-preset.js - Tailwind preset configuration (optional)
• js/moon-components.js - Pre-built component classes (optional)