Skip to content

feat: foundational infrastructure for CSS Custom Properties export#20

Open
cryptodiscolab wants to merge 1 commit intogoogle-labs-code:mainfrom
cryptodiscolab:main
Open

feat: foundational infrastructure for CSS Custom Properties export#20
cryptodiscolab wants to merge 1 commit intogoogle-labs-code:mainfrom
cryptodiscolab:main

Conversation

@cryptodiscolab
Copy link
Copy Markdown

Technical Proposal: CSS Custom Properties Exporter for design.md

This proposal introduces a robust, dependency-free utility to bridge the gap between design.md specifications and frontend implementation by exporting design tokens directly into CSS Custom Properties.

💡 Rationale

While design.md successfully centralizes visual identity in a machine-readable format, frontend engineers still face manual labor when mapping these tokens to CSS. To fulfill the promise of "Design-as-Code," we require a formal automation layer that transforms YAML-defined tokens into standard web variables (--custom-properties).

This implementation addresses Issue #15 by providing a portable Node.js exporter.

🛠️ Implementation Overview

Key Features

  • Zero Dependencies: Built strictly using Node.js internal modules (fs, path) to ensure compatibility across all environments.
  • Recursive Mapping: Seamlessly handles nested YAML structures.
  • Standardized Serialization: Automates the creation of a :root scope with valid CSS syntax.
  • Comment-Aware Parsing: Handles inline YAML comments without corrupting token values.

Usage Pattern

node scripts/design-to-css.js <input-file> <output-file>

Authored by the Senior Engineering Leadership at Crypto Disco DailyApp.

@google-cla
Copy link
Copy Markdown

google-cla Bot commented Apr 22, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@cryptodiscolab
Copy link
Copy Markdown
Author

@google-cla check

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant