Transformer — SXL Studio Docs

What is Transformer

SXL Studio Token Transformer (@sxl-studio/token-transformer) is a CLI utility for developers that transforms design tokens from JSON (DTCG format) into valid code for three platforms:

CSS — Custom Properties (:root { --color-primary: #0066FF; })
SwiftUI — extensions and constants (static let primary = Color(...))
Kotlin Compose — objects and types (val Primary = Color(0xFF0066FF))
Vue 3 — Single File Components from Composition tokens

When to use

In CI/CD pipelines — automatic code generation on every commit
For local development — generating tokens at project start
For verification — confirming tokens transform correctly

Installation

BASH

# Globally
npm install -g @sxl-studio/token-transformer

# In a project
npm install --save-dev @sxl-studio/token-transformer

Quick start

BASH
# Generate a default config
sxl-transform --init

# Run with config
sxl-transform --config=sxl-transform.config.json

# Vue 3 from Composition JSON
sxl-transform --composition=path/to/button.json --output=./components

Configuration

The config is a JSON file with three main sections:

JSON
{
  "source": {
    "tokenDir": "./tokens",
    "configFile": "config.json",
    "include": ["core/*.json", "themes/*.json"],
    "exclude": ["config.json", "**/diff-id*.json"]
  },
  "platforms": {
    "css": {
      "outputDir": "./dist/css",
      "prefix": "ds",
      "resolveAliases": false,
      "splitEffects": true,
      "showDescriptions": true,
      "fileMapping": [
        {
          "sources": ["core/*.json"],
          "output": "primitives.css"
        }
      ]
    },
    "swiftui": {
      "outputDir": "./dist/ios",
      "prefix": "DS",
      "resolveAliases": true
    },
    "kotlin": {
      "outputDir": "./dist/android",
      "prefix": "DS",
      "resolveAliases": true
    }
  },
  "settings": {
    "remBase": 16,
    "verbose": false
  }
}

Key settings

Setting	Description	Default
`source.tokenDir`	Folder with JSON tokens	required
`source.configFile`	Plugin's config.json (for grouping)	`"config.json"`
`platforms.*.outputDir`	Output folder	required
`platforms.*.prefix`	Variable prefix	`""`
`platforms.*.resolveAliases`	Resolve aliases	CSS: `false`, others: `true`
`platforms.*.splitEffects`	Split effects (CSS only)	`true`
`platforms.*.fileMapping`	File combining rules	—
`settings.remBase`	Base rem value	`16`

fileMapping — combining files

A rule defines which tokens from which files go into which output file:

JSON
{
  "sources": ["core/palette.json", "themes/light.json"],
  "output": "core.css",
  "filter": {
    "types": ["color", "dimension"],
    "paths": ["color.primary"],
    "excludePaths": ["color.internal"]
  }
}

Without fileMapping, Transformer automatically groups by files or by collections/modes from config.json.

Output examples

CSS

CSS
:root {
  /* Primary brand color */
  --ds-color-primary: #0066FF;
  --ds-spacing-md: 16px;
  --ds-typography-heading-xl: 700 30px/24px Inter;
}

SwiftUI

SWIFT
extension Color {
    static let dsColorPrimary = Color(red: 0, green: 0.4, blue: 1, opacity: 1)
}

enum DSSpacing {
    static let md: CGFloat = 16
}

Kotlin

KOTLIN
object DSColors {
    val ColorPrimary = Color(0xFF0066FF)
}

object DSSpacing {
    val Md = 16.dp
}

Detailed examples and type mappings in Tokens to Code.

CI/CD integration

YAML
# GitHub Actions
- name: Generate tokens
  run: npx sxl-transform --config=sxl-transform.config.json

YAML
# GitLab CI
generate-tokens:
  script:
    - npx sxl-transform --config=sxl-transform.config.json

Tokens to Code — code generation (detailed)
Bridge — connecting to Figma
SXL Resolver — IntelliSense for tokens

#What is Transformer

#When to use

#Installation

#Quick start

#Configuration

#Key settings

#fileMapping — combining files

#Output examples

#CSS

#SwiftUI

#Kotlin

#CI/CD integration

#Related sections