Skip to content

feat(cli): add css custom properties export format#32

Open
seonghobae wants to merge 1 commit intogoogle-labs-code:mainfrom
seonghobae:css-export-20260423
Open

feat(cli): add css custom properties export format#32
seonghobae wants to merge 1 commit intogoogle-labs-code:mainfrom
seonghobae:css-export-20260423

Conversation

@seonghobae
Copy link
Copy Markdown

This PR adds a new 'css' export format, allowing design tokens to be exported as a stylesheet of CSS Custom Properties.

This implements the feature requested in #15.

  • A new is added to transform resolved tokens into a CSS string.
  • The declare -x AGENT="1"
    declare -x BOOST_INCLUDE="/opt/homebrew/include"
    declare -x BOOST_LIB="/opt/homebrew/lib"
    declare -x BUN_INSTALL="/Users/seonghobae/.bun"
    declare -x COLORTERM="truecolor"
    declare -x CPPFLAGS="-I/opt/homebrew/opt/openblas/include -I/opt/homebrew/opt/libomp/include"
    declare -x DISPLAY="/var/run/com.apple.launchd.B0surFoGSM/org.xquartz:0"
    declare -x EDITOR="cursor -w"
    declare -x HISTTIMEFORMAT="%Y-%m-%d %H:%M:%S "
    declare -x HOME="/Users/seonghobae"
    declare -x HOMEBREW_CELLAR="/opt/homebrew/Cellar"
    declare -x HOMEBREW_PREFIX="/opt/homebrew"
    declare -x HOMEBREW_REPOSITORY="/opt/homebrew"
    declare -x INFOPATH="/opt/homebrew/share/info:"
    declare -x JENV_LOADED="1"
    declare -x JENV_SHELL="bash"
    declare -x LANG="ko_KR.UTF-8"
    declare -x LC_ALL="ko_KR.UTF-8"
    declare -x LDFLAGS="-L/opt/homebrew/opt/openblas/lib -L/opt/homebrew/opt/libomp/lib"
    declare -x LITELLM_API_KEY="sk-4gYhfRG89kkwiLgDXhQ4bg"
    declare -x LITELLM_BASE_URL="https://llm-gateway-dev.hyosungitx.com"
    declare -x LITELLM_MASTER_KEY="sk-C7ceIzPthTej48dQPltIO"
    declare -x LLM_API_BASE="https://api.openai.com/v1"
    declare -x LLM_API_KEY="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"
    declare -x LOGNAME="seonghobae"
    declare -x LaunchInstanceID="DB2515DF-51C5-4E98-ACB7-EAB071F86241"
    declare -x NODE_OPTIONS="--max_old_space_size=16384 --max-semi-space-size=512 --expose-gc"
    declare -x OLDPWD="/Users/seonghobae"
    declare -x OPENCODE="1"
    declare -x OPENCODE_PID="23629"
    declare -x OPENCODE_PROCESS_ROLE="worker"
    declare -x OPENCODE_RUN_ID="a9285f64-c5ca-4f0c-af5c-de4709086e77"
    declare -x OSLogRateLimit="64"
    declare -x PATH="/Users/seonghobae/.opencode/bin:/Users/seonghobae/.strix/bin:/opt/homebrew/opt/qt@5/bin:/opt/homebrew/opt/ncurses/bin:/opt/homebrew/opt/openssl@3/bin:/opt/homebrew/opt/bzip2/bin:/opt/homebrew/opt/llvm/bin:/Users/seonghobae/.bun/bin:/Users/seonghobae/.local/bin:/Users/seonghobae/.jenv/shims:/Users/seonghobae/.jenv/bin:/Users/seonghobae/.pyenv/shims:/Users/seonghobae/.pyenv/bin:/opt/homebrew/opt/node@22/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/opt/pkg/env/active/bin:/opt/pmk/env/global/bin:/opt/X11/bin:/Library/Apple/usr/bin:/Library/TeX/texbin:/usr/local/share/dotnet:~/.dotnet/tools:/usr/local/go/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/usr/local/bin:/opt/R/arm64/gfortran/bin:/opt/homebrew/opt/postgresql/lib:/opt/homebrew/opt/boost/lib:/opt/homebrew/opt/boost/include/boost"
    declare -x PGPASSWORD="Ybydygwnfyfamf3hduf?"
    declare -x PKG_CONFIG_PATH=":/opt/homebrew/lib/pkgconfig:/opt/homebrew/opt/openblas/lib/pkgconfig:/opt/homebrew/opt/boost/lib/pkgconfig:/opt/homebrew/opt/glibmm/lib/pkgconfig"
    declare -x PSQL_EDITOR="code -w"
    declare -x PWD="/Users/seonghobae/.config/superpowers/worktrees/design.md/css-export-20260423"
    declare -x PYENV_ROOT="/Users/seonghobae/.pyenv"
    declare -x PYENV_SHELL="bash"
    declare -x SECURITYSESSIONID="186b7"
    declare -x SHELL="/opt/homebrew/bin/bash"
    declare -x SHLVL="2"
    declare -x SSH_AUTH_SOCK="/var/run/com.apple.launchd.kou4aKbN01/Listeners"
    declare -x STRIX_LLM="openai/gpt-5.4"
    declare -x TERM="xterm-256color"
    declare -x TERM_PROGRAM="Apple_Terminal"
    declare -x TERM_PROGRAM_VERSION="470"
    declare -x TERM_SESSION_ID="9DA39B56-FB0E-470E-97B3-C0FC599C83CA"
    declare -x TMPDIR="/var/folders/vq/nxtc622x2lg1xq3jpdktymdw0000gn/T/"
    declare -x USER="seonghobae"
    declare -x VISUAL="cursor -w"
    declare -x VOOSTER_API_KEY="ak_kwjiktwryrzmf4ggtqk5fipx"
    declare -x XPC_FLAGS="0x0"
    declare -x XPC_SERVICE_NAME="0"
    declare -x _="/Users/seonghobae/.opencode/bin/opencode"
    declare -x __CFBundleIdentifier="com.apple.Terminal" command is updated to support the new format.
  • Unit tests are included to verify the output.

Fixes #15
Related to #29

This commit introduces a new 'css' export format to the declare -x AGENT="1"
declare -x BOOST_INCLUDE="/opt/homebrew/include"
declare -x BOOST_LIB="/opt/homebrew/lib"
declare -x BUN_INSTALL="/Users/seonghobae/.bun"
declare -x COLORTERM="truecolor"
declare -x CPPFLAGS="-I/opt/homebrew/opt/openblas/include -I/opt/homebrew/opt/libomp/include"
declare -x DISPLAY="/var/run/com.apple.launchd.B0surFoGSM/org.xquartz:0"
declare -x EDITOR="cursor -w"
declare -x HISTTIMEFORMAT="%Y-%m-%d %H:%M:%S "
declare -x HOME="/Users/seonghobae"
declare -x HOMEBREW_CELLAR="/opt/homebrew/Cellar"
declare -x HOMEBREW_PREFIX="/opt/homebrew"
declare -x HOMEBREW_REPOSITORY="/opt/homebrew"
declare -x INFOPATH="/opt/homebrew/share/info:"
declare -x JENV_LOADED="1"
declare -x JENV_SHELL="bash"
declare -x LANG="ko_KR.UTF-8"
declare -x LC_ALL="ko_KR.UTF-8"
declare -x LDFLAGS="-L/opt/homebrew/opt/openblas/lib -L/opt/homebrew/opt/libomp/lib"
declare -x LITELLM_API_KEY="sk-4gYhfRG89kkwiLgDXhQ4bg"
declare -x LITELLM_BASE_URL="https://llm-gateway-dev.hyosungitx.com"
declare -x LITELLM_MASTER_KEY="sk-C7ceIzPthTej48dQPltIO"
declare -x LLM_API_BASE="https://api.openai.com/v1"
declare -x LLM_API_KEY="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"
declare -x LOGNAME="seonghobae"
declare -x LaunchInstanceID="DB2515DF-51C5-4E98-ACB7-EAB071F86241"
declare -x NODE_OPTIONS="--max_old_space_size=16384 --max-semi-space-size=512 --expose-gc"
declare -x OLDPWD="/Users/seonghobae"
declare -x OPENCODE="1"
declare -x OPENCODE_PID="23629"
declare -x OPENCODE_PROCESS_ROLE="worker"
declare -x OPENCODE_RUN_ID="a9285f64-c5ca-4f0c-af5c-de4709086e77"
declare -x OSLogRateLimit="64"
declare -x PATH="/Users/seonghobae/.opencode/bin:/Users/seonghobae/.strix/bin:/opt/homebrew/opt/qt@5/bin:/opt/homebrew/opt/ncurses/bin:/opt/homebrew/opt/openssl@3/bin:/opt/homebrew/opt/bzip2/bin:/opt/homebrew/opt/llvm/bin:/Users/seonghobae/.bun/bin:/Users/seonghobae/.local/bin:/Users/seonghobae/.jenv/shims:/Users/seonghobae/.jenv/bin:/Users/seonghobae/.pyenv/shims:/Users/seonghobae/.pyenv/bin:/opt/homebrew/opt/node@22/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/opt/pkg/env/active/bin:/opt/pmk/env/global/bin:/opt/X11/bin:/Library/Apple/usr/bin:/Library/TeX/texbin:/usr/local/share/dotnet:~/.dotnet/tools:/usr/local/go/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/usr/local/bin:/opt/R/arm64/gfortran/bin:/opt/homebrew/opt/postgresql/lib:/opt/homebrew/opt/boost/lib:/opt/homebrew/opt/boost/include/boost"
declare -x PGPASSWORD="Ybydygwnfyfamf3hduf?"
declare -x PKG_CONFIG_PATH=":/opt/homebrew/lib/pkgconfig:/opt/homebrew/opt/openblas/lib/pkgconfig:/opt/homebrew/opt/boost/lib/pkgconfig:/opt/homebrew/opt/glibmm/lib/pkgconfig"
declare -x PSQL_EDITOR="code -w"
declare -x PWD="/Users/seonghobae/.config/superpowers/worktrees/design.md/css-export-20260423"
declare -x PYENV_ROOT="/Users/seonghobae/.pyenv"
declare -x PYENV_SHELL="bash"
declare -x SECURITYSESSIONID="186b7"
declare -x SHELL="/opt/homebrew/bin/bash"
declare -x SHLVL="2"
declare -x SSH_AUTH_SOCK="/var/run/com.apple.launchd.kou4aKbN01/Listeners"
declare -x STRIX_LLM="openai/gpt-5.4"
declare -x TERM="xterm-256color"
declare -x TERM_PROGRAM="Apple_Terminal"
declare -x TERM_PROGRAM_VERSION="470"
declare -x TERM_SESSION_ID="9DA39B56-FB0E-470E-97B3-C0FC599C83CA"
declare -x TMPDIR="/var/folders/vq/nxtc622x2lg1xq3jpdktymdw0000gn/T/"
declare -x USER="seonghobae"
declare -x VISUAL="cursor -w"
declare -x VOOSTER_API_KEY="ak_kwjiktwryrzmf4ggtqk5fipx"
declare -x XPC_FLAGS="0x0"
declare -x XPC_SERVICE_NAME="0"
declare -x _="/Users/seonghobae/.opencode/bin/opencode"
declare -x __CFBundleIdentifier="com.apple.Terminal" command, fulfilling the requirement of issue google-labs-code#15.

A new  has been created to transform the resolved design tokens from a DESIGN.md file into a string of CSS custom properties wrapped in a  selector.

The implementation follows the existing architecture by:
- Adding the  in its own module.
- Integrating the handler into the declare -x AGENT="1"
declare -x BOOST_INCLUDE="/opt/homebrew/include"
declare -x BOOST_LIB="/opt/homebrew/lib"
declare -x BUN_INSTALL="/Users/seonghobae/.bun"
declare -x COLORTERM="truecolor"
declare -x CPPFLAGS="-I/opt/homebrew/opt/openblas/include -I/opt/homebrew/opt/libomp/include"
declare -x DISPLAY="/var/run/com.apple.launchd.B0surFoGSM/org.xquartz:0"
declare -x EDITOR="cursor -w"
declare -x HISTTIMEFORMAT="%Y-%m-%d %H:%M:%S "
declare -x HOME="/Users/seonghobae"
declare -x HOMEBREW_CELLAR="/opt/homebrew/Cellar"
declare -x HOMEBREW_PREFIX="/opt/homebrew"
declare -x HOMEBREW_REPOSITORY="/opt/homebrew"
declare -x INFOPATH="/opt/homebrew/share/info:"
declare -x JENV_LOADED="1"
declare -x JENV_SHELL="bash"
declare -x LANG="ko_KR.UTF-8"
declare -x LC_ALL="ko_KR.UTF-8"
declare -x LDFLAGS="-L/opt/homebrew/opt/openblas/lib -L/opt/homebrew/opt/libomp/lib"
declare -x LITELLM_API_KEY="sk-4gYhfRG89kkwiLgDXhQ4bg"
declare -x LITELLM_BASE_URL="https://llm-gateway-dev.hyosungitx.com"
declare -x LITELLM_MASTER_KEY="sk-C7ceIzPthTej48dQPltIO"
declare -x LLM_API_BASE="https://api.openai.com/v1"
declare -x LLM_API_KEY="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"
declare -x LOGNAME="seonghobae"
declare -x LaunchInstanceID="DB2515DF-51C5-4E98-ACB7-EAB071F86241"
declare -x NODE_OPTIONS="--max_old_space_size=16384 --max-semi-space-size=512 --expose-gc"
declare -x OLDPWD="/Users/seonghobae"
declare -x OPENCODE="1"
declare -x OPENCODE_PID="23629"
declare -x OPENCODE_PROCESS_ROLE="worker"
declare -x OPENCODE_RUN_ID="a9285f64-c5ca-4f0c-af5c-de4709086e77"
declare -x OSLogRateLimit="64"
declare -x PATH="/Users/seonghobae/.opencode/bin:/Users/seonghobae/.strix/bin:/opt/homebrew/opt/qt@5/bin:/opt/homebrew/opt/ncurses/bin:/opt/homebrew/opt/openssl@3/bin:/opt/homebrew/opt/bzip2/bin:/opt/homebrew/opt/llvm/bin:/Users/seonghobae/.bun/bin:/Users/seonghobae/.local/bin:/Users/seonghobae/.jenv/shims:/Users/seonghobae/.jenv/bin:/Users/seonghobae/.pyenv/shims:/Users/seonghobae/.pyenv/bin:/opt/homebrew/opt/node@22/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/opt/pkg/env/active/bin:/opt/pmk/env/global/bin:/opt/X11/bin:/Library/Apple/usr/bin:/Library/TeX/texbin:/usr/local/share/dotnet:~/.dotnet/tools:/usr/local/go/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/usr/local/bin:/opt/R/arm64/gfortran/bin:/opt/homebrew/opt/postgresql/lib:/opt/homebrew/opt/boost/lib:/opt/homebrew/opt/boost/include/boost"
declare -x PGPASSWORD="Ybydygwnfyfamf3hduf?"
declare -x PKG_CONFIG_PATH=":/opt/homebrew/lib/pkgconfig:/opt/homebrew/opt/openblas/lib/pkgconfig:/opt/homebrew/opt/boost/lib/pkgconfig:/opt/homebrew/opt/glibmm/lib/pkgconfig"
declare -x PSQL_EDITOR="code -w"
declare -x PWD="/Users/seonghobae/.config/superpowers/worktrees/design.md/css-export-20260423"
declare -x PYENV_ROOT="/Users/seonghobae/.pyenv"
declare -x PYENV_SHELL="bash"
declare -x SECURITYSESSIONID="186b7"
declare -x SHELL="/opt/homebrew/bin/bash"
declare -x SHLVL="2"
declare -x SSH_AUTH_SOCK="/var/run/com.apple.launchd.kou4aKbN01/Listeners"
declare -x STRIX_LLM="openai/gpt-5.4"
declare -x TERM="xterm-256color"
declare -x TERM_PROGRAM="Apple_Terminal"
declare -x TERM_PROGRAM_VERSION="470"
declare -x TERM_SESSION_ID="9DA39B56-FB0E-470E-97B3-C0FC599C83CA"
declare -x TMPDIR="/var/folders/vq/nxtc622x2lg1xq3jpdktymdw0000gn/T/"
declare -x USER="seonghobae"
declare -x VISUAL="cursor -w"
declare -x VOOSTER_API_KEY="ak_kwjiktwryrzmf4ggtqk5fipx"
declare -x XPC_FLAGS="0x0"
declare -x XPC_SERVICE_NAME="0"
declare -x _="/Users/seonghobae/.opencode/bin/opencode"
declare -x __CFBundleIdentifier="com.apple.Terminal" command.
- Including a new unit test to ensure the correctness of the CSS output.

The  field was also added to the root  to unblock the build process in the clean worktree.

Refs google-labs-code#15
Related to google-labs-code#29
@google-cla
Copy link
Copy Markdown

google-cla Bot commented Apr 23, 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.

@seonghobae
Copy link
Copy Markdown
Author

The implementation for the CSS custom properties export format is complete and has been fully verified locally with passing builds and tests.

The PR is currently blocked by the check, which requires manual intervention. The code itself is ready for review and merge.

@seonghobae seonghobae marked this pull request as ready for review April 23, 2026 08:10
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.

Feature: add CSS custom properties export (--format css-vars) for native CSS consumers

1 participant