dudu/design-pipeline/export-tokens.mjs

#!/usr/bin/env node
/**
 * export-tokens.mjs — 设计令牌导出管线（零依赖，Node >= 18）
 *
 * 解析 design/tokens/*.css 的 CSS 自定义属性（:root = light，[data-theme="dark"] = dark），
 * 生成各端主题产物并直写消费位置（无中间拷贝层，--check 守的即真实消费文件）：
 *   ios/dudu/Shared/DuduTheme.swift                        — Color(light/dark 动态) + 尺寸常量
 *   android/app/src/main/java/app/dudu/design/DuduTheme.kt — Compose Color/Dp 常量（Light/Dark）
 *   web/tokens.css                                          — 官网令牌层（custom props 原样透传 +
 *                                                             Outfit 字体 data URI 内嵌，单文件自包含）
 *
 * 用法：node design-pipeline/export-tokens.mjs [--check]
 *   --check  CI 校验模式：重新生成并与已提交产物比对，不一致退出 1
 */

import { readFileSync, writeFileSync, mkdirSync, readdirSync, existsSync } from 'node:fs';
import { resolve, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';

const __dir = dirname(fileURLToPath(import.meta.url));
const TOKENS_DIR = resolve(__dir, '../design/tokens');
const OUT_IOS = resolve(__dir, '../ios/dudu/Shared/DuduTheme.swift');
const OUT_ANDROID = resolve(__dir, '../android/app/src/main/java/app/dudu/design/DuduTheme.kt');
const OUT_WEB = resolve(__dir, '../web/tokens.css');
const FONT_WOFF2 = resolve(__dir, '../design/assets/outfit-latin.woff2');

// ─── 解析 ────────────────────────────────────────────────────────────────────

/** 提取一个 CSS 块（selector { ... }）里的全部 --var: value */
function parseBlock(css, selector) {
  const out = {};
  const re = new RegExp(`${selector.replace(/[[\]"=]/g, (m) => '\\' + m)}\\s*\\{([\\s\\S]*?)\\}`, 'g');
  let m;
  while ((m = re.exec(css))) {
    const body = m[1].replace(/\/\*[\s\S]*?\*\//g, '');
    for (const line of body.split(';')) {
      const mm = line.match(/--([\w-]+)\s*:\s*(.+)/);
      if (mm) out[mm[1].trim()] = mm[2].trim();
    }
  }
  return out;
}

const files = readdirSync(TOKENS_DIR).filter((f) => f.endsWith('.css')).sort();
let light = {}, dark = {};
for (const f of files) {
  const css = readFileSync(resolve(TOKENS_DIR, f), 'utf8');
  Object.assign(light, parseBlock(css, ':root'));
  Object.assign(dark, parseBlock(css, '[data-theme="dark"]'));
}

/** 解析 var() 引用链到最终值 */
function resolveVar(val, scope) {
  let v = val, guard = 0;
  while (v && v.includes('var(') && guard++ < 10) {
    v = v.replace(/var\(--([\w-]+)\)/g, (_, name) => scope[name] ?? light[name] ?? '');
  }
  return v.trim();
}

// ─── 颜色转换 ─────────────────────────────────────────────────────────────────

/** #RGB/#RRGGBB/rgba() → {r,g,b,a} 0-1 浮点；无法解析返回 null */
function parseColor(v) {
  if (!v) return null;
  v = v.trim();
  let m = v.match(/^#([0-9a-f]{6})$/i);
  if (m) {
    const n = parseInt(m[1], 16);
    return { r: (n >> 16 & 255) / 255, g: (n >> 8 & 255) / 255, b: (n & 255) / 255, a: 1 };
  }
  m = v.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
  if (m) return { r: +m[1] / 255, g: +m[2] / 255, b: +m[3] / 255, a: m[4] === undefined ? 1 : +m[4] };
  return null;
}

const hex2 = (f) => Math.round(f * 255).toString(16).padStart(2, '0').toUpperCase();

// ─── 分类 ────────────────────────────────────────────────────────────────────

const colorTokens = [];   // {name, light:{...}, dark:{...}}
const dimenTokens = [];   // {name, value} px → pt/dp
const otherSkipped = [];

const camel = (s) => s.replace(/-(\w)/g, (_, c) => c.toUpperCase());

for (const [name, raw] of Object.entries(light)) {
  const lv = resolveVar(raw, light);
  const dvRaw = dark[name];
  const dv = dvRaw ? resolveVar(dvRaw, dark) : lv;
  const lc = parseColor(lv);
  if (lc) {
    colorTokens.push({ name: camel(name), light: lc, dark: parseColor(dv) ?? lc });
    continue;
  }
  const px = lv.match(/^(-?[\d.]+)px$/);
  if (px) {
    dimenTokens.push({ name: camel(name), value: parseFloat(px[1]) });
    continue;
  }
  otherSkipped.push(name);
}

colorTokens.sort((a, b) => a.name.localeCompare(b.name));
dimenTokens.sort((a, b) => a.name.localeCompare(b.name));

// ─── 生成 Swift ───────────────────────────────────────────────────────────────

const HEADER = `// 自动生成 — 请勿手改。来源 design/tokens/*.css
// 重新生成：node design-pipeline/export-tokens.mjs
`;

function swift() {
  const colors = colorTokens.map((t) => {
    const l = t.light, d = t.dark;
    return `    public static let ${t.name} = dynamic(
        light: Color(.sRGB, red: ${l.r.toFixed(4)}, green: ${l.g.toFixed(4)}, blue: ${l.b.toFixed(4)}, opacity: ${l.a.toFixed(2)}),
        dark: Color(.sRGB, red: ${d.r.toFixed(4)}, green: ${d.g.toFixed(4)}, blue: ${d.b.toFixed(4)}, opacity: ${d.a.toFixed(2)}))`;
  }).join('\n');
  const dims = dimenTokens.map((t) => `    public static let ${t.name}: CGFloat = ${t.value}`).join('\n');
  return `${HEADER}
import SwiftUI

public enum DuduTheme {
    /// light/dark 动态色（跟随系统外观）
    static func dynamic(light: Color, dark: Color) -> Color {
        Color(UIColor { trait in
            trait.userInterfaceStyle == .dark ? UIColor(dark) : UIColor(light)
        })
    }

    // MARK: - Colors
${colors}

    // MARK: - Dimensions (pt)
${dims}
}
`;
}

// ─── 生成 Kotlin ─────────────────────────────────────────────────────────────

function kotlin() {
  const group = (scope) => colorTokens.map((t) => {
    const c = scope === 'light' ? t.light : t.dark;
    const argb = `0x${hex2(c.a)}${hex2(c.r)}${hex2(c.g)}${hex2(c.b)}`;
    return `        val ${t.name} = Color(${argb})`;
  }).join('\n');
  const dims = dimenTokens.map((t) =>
    Number.isInteger(t.value) ? `    val ${t.name} = ${t.value}.dp` : `    val ${t.name} = ${t.value}f.dp`
  ).join('\n');
  return `${HEADER}
package app.dudu.design

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

object DuduTheme {
    object Light {
${group('light')}
    }

    object Dark {
${group('dark')}
    }

    // Dimensions (dp)
${dims}
}
`;
}

// ─── 生成 Web（官网令牌层）───────────────────────────────────────────────────

function web() {
  const props = (scope) =>
    Object.entries(scope).map(([k, v]) => `  --${k}: ${v};`).join('\n');
  const fontB64 = readFileSync(FONT_WOFF2).toString('base64');
  return `/* 自动生成 — 请勿手改。来源 design/tokens/*.css + assets/outfit-latin.woff2
   重新生成：node design-pipeline/export-tokens.mjs */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(data:font/woff2;base64,${fontB64}) format('woff2');
}

:root {
${props(light)}
}

[data-theme="dark"] {
${props(dark)}
}
`;
}

// ─── 输出 / 校验 ─────────────────────────────────────────────────────────────

const outputs = [
  [OUT_IOS, swift()],
  [OUT_ANDROID, kotlin()],
  [OUT_WEB, web()],
];

const check = process.argv.includes('--check');
let dirty = false;
for (const [path, content] of outputs) {
  if (check) {
    const cur = existsSync(path) ? readFileSync(path, 'utf8') : '';
    if (cur !== content) {
      console.error(`❌ 过期：${path}（请重新运行导出脚本并提交）`);
      dirty = true;
    }
  } else {
    mkdirSync(dirname(path), { recursive: true });
    writeFileSync(path, content, 'utf8');
    console.log(`✅ ${path}`);
  }
}
if (check && dirty) process.exit(1);
if (check) console.log('✅ 令牌产物与源一致');
console.log(`颜色 ${colorTokens.length} · 尺寸 ${dimenTokens.length} · 跳过(非色非px) ${otherSkipped.length}: ${otherSkipped.join(', ')}`);