export interface CssToken { /** `--fox-` 를 뗀 이름 */ name: string; property: string; /** 그 모드에서 선언된 원문. 참조면 `var(--fox-…)`, 아니면 값. */ declaration: string; /** 참조면 가리키는 토큰 이름, 아니면 null */ alias: string | null; } export interface CssSection { id: string; label: string; category: string | null; /** 이 섹션의 값이 어디서 왔는지 */ source: string; tokens: CssToken[]; } const PREFIX = "--fox-"; /** `var(--fox-x)` 형태면 가리키는 토큰 이름을 돌려준다. */ function aliasOf(value: string): string | null { const match = /^var\(\s*--fox-([a-z0-9-]+)\s*\)$/.exec(value.trim()); return match ? match[1] : null; } /** * `var(--name, 내용)`에서 괄호 짝을 세어 `내용`만 잘라낸다. * 내용 자체가 `var(--fox-…)`를 품고 있어 정규식으로는 안전하게 못 자른다. */ function extractFallback(text: string, marker: string): string | null { const start = text.indexOf(marker); if (start < 0) { return null; } let depth = 1; let i = start + marker.length; for (; i < text.length && depth > 0; i += 1) { if (text[i] === "(") depth += 1; else if (text[i] === ")") depth -= 1; } return text.slice(start + marker.length, i - 1).trim(); } /** 최상위 콤마 하나로 두 조각을 나눈다(괄호 안의 콤마는 무시). */ function splitTopLevel(text: string): [string, string] | null { let depth = 0; for (let i = 0; i < text.length; i += 1) { const ch = text[i]; if (ch === "(") depth += 1; else if (ch === ")") depth -= 1; else if (ch === "," && depth === 0) { return [text.slice(0, i).trim(), text.slice(i + 1).trim()]; } } return null; } /** * 라이트/다크 두 값을 분해한다. * * Lightning CSS가 `light-dark()`를 폴리필해 * `var(--lightningcss-light, A) var(--lightningcss-dark, B)`로 내보내므로 그 형태를 먼저 보고, * 폴리필이 없는 설정(브라우저 타깃을 좁힌 경우)을 대비해 원형도 함께 처리한다. */ function splitLightDark(declaration: string): { light: string; dark: string } | null { const light = extractFallback(declaration, "var(--lightningcss-light,"); const dark = extractFallback(declaration, "var(--lightningcss-dark,"); if (light !== null && dark !== null) { return { light, dark }; } if (declaration.startsWith("light-dark(")) { const inner = extractFallback(declaration, "light-dark("); const pair = inner === null ? null : splitTopLevel(inner); if (pair) { return { light: pair[0], dark: pair[1] }; } } return null; } function toToken(name: string, declaration: string): CssToken { return { name, property: `${PREFIX}${name}`, declaration, alias: aliasOf(declaration), }; } interface RawTokens { /** `:root` 기본 선언 — 색상은 light-dark 형태, 반응형은 모바일 값 */ base: Map<string, string>; /** `@media (min-width: …)` 안의 오버라이드 — PC 값 */ pc: Map<string, string>; } function readRaw(): RawTokens { const base = new Map<string, string>(); const pc = new Map<string, string>(); const collect = (rule: CSSStyleRule, into: Map<string, string>) => { if (rule.selectorText !== ":root") { return; } for (const property of Array.from(rule.style)) { if (property.startsWith(PREFIX) && !into.has(property)) { into.set(property.slice(PREFIX.length), rule.style.getPropertyValue(property).trim()); } } }; for (const sheet of Array.from(document.styleSheets)) { let rules: CSSRuleList; try { rules = sheet.cssRules; } catch { // 교차 출처 스타일시트 — 우리 토큰은 동일 출처이므로 건너뛴다. continue; } for (const rule of Array.from(rules)) { if (rule instanceof CSSStyleRule) { collect(rule, base); } else if (rule instanceof CSSMediaRule && rule.conditionText.includes("min-width")) { // 반응형 오버라이드. `prefers-color-scheme` 블록은 조건에 min-width가 없어 걸러진다. for (const inner of Array.from(rule.cssRules)) { if (inner instanceof CSSStyleRule) { collect(inner, pc); } } } } } return { base, pc }; } const SIZE_PREFIX = /^(border|padding|gap|radius|icon|shadow|backdrop)-/; const PRIMITIVE_PREFIX = /^(primitive|font-family|font-weight|number)-/; /** * 컴파일된 CSS만 읽어 섹션을 구성한다. * * **매니페스트가 아니라 실제 스타일시트가 값의 출처다.** 토큰 SCSS를 고치면(원칙적으로 * 자동 생성물이라 고치면 안 되지만) 이 화면에 즉시 반영되므로, 생성물과 화면이 어긋날 * 여지가 없다. * 선언 **원문**을 읽는 것이 요점이다 — 계산값을 읽으면 참조(`var(--fox-…)`)가 이미 * 풀려 버리고, 현재 테마·뷰포트 한쪽 값만 보인다. 원문에는 light/dark와 PC/모바일이 * 모두 남아 있어 현재 화면 상태와 무관하게 네 조합을 전부 볼 수 있다. */ export function readCssSections(): CssSection[] { const { base, pc } = readRaw(); const colors: { name: string; light: string; dark: string }[] = []; const responsive: string[] = []; const size: string[] = []; const theme: string[] = []; const primitive: string[] = []; for (const [name, declaration] of base) { if (name.startsWith("color-")) { const pair = splitLightDark(declaration); colors.push({ name, light: pair?.light ?? declaration, dark: pair?.dark ?? declaration, }); continue; } if (pc.has(name)) { responsive.push(name); continue; } if (SIZE_PREFIX.test(name)) { size.push(name); continue; } if (name.startsWith("theme-")) { theme.push(name); continue; } if (PRIMITIVE_PREFIX.test(name)) { primitive.push(name); continue; } // 분류에 없는 새 토큰도 버리지 않는다 — Size 뒤에 붙여 눈에 띄게 둔다. size.push(name); } return [ { id: "light", label: "Light", category: "Mode", source: "컴파일된 CSS — light-dark()의 라이트 쪽", tokens: colors.map((entry) => toToken(entry.name, entry.light)), }, { id: "dark", label: "Dark", category: "Mode", source: "컴파일된 CSS — light-dark()의 다크 쪽", tokens: colors.map((entry) => toToken(entry.name, entry.dark)), }, { id: "pc", label: "PC", category: "Responsive", source: "컴파일된 CSS — @media (min-width: 768px) 블록", tokens: responsive.map((name) => toToken(name, pc.get(name) ?? "")), }, { id: "mobile", label: "Mobile", category: "Responsive", source: "컴파일된 CSS — :root 기본값(모바일 우선)", tokens: responsive.map((name) => toToken(name, base.get(name) ?? "")), }, { id: "size", label: "Size", category: null, source: "컴파일된 CSS — :root", tokens: size.map((n) => toToken(n, base.get(n) ?? "")) }, { id: "theme", label: "Theme", category: null, source: "컴파일된 CSS — :root", tokens: theme.map((n) => toToken(n, base.get(n) ?? "")) }, { id: "primitive", label: "Primitive", category: null, source: "컴파일된 CSS — :root", tokens: primitive.map((n) => toToken(n, base.get(n) ?? "")) }, ]; }