@styleframe/cli 3.0.0 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +124 -0
- package/dist/build-CBdsifMN.js +47 -0
- package/dist/build-D7cinF0l.cjs +50 -0
- package/dist/build-dtcg-BpbjBRCf.js +429 -0
- package/dist/build-dtcg-vuGHy-Sl.cjs +434 -0
- package/dist/chunk-D6vf50IK.cjs +28 -0
- package/dist/commands/build.d.ts +22 -0
- package/dist/commands/build.d.ts.map +1 -0
- package/dist/commands/dtcg/build-dtcg.d.ts +36 -0
- package/dist/commands/dtcg/build-dtcg.d.ts.map +1 -0
- package/dist/commands/dtcg/build-dtcg.test.d.ts +2 -0
- package/dist/commands/dtcg/build-dtcg.test.d.ts.map +1 -0
- package/dist/commands/dtcg/evaluate.d.ts +30 -0
- package/dist/commands/dtcg/evaluate.d.ts.map +1 -0
- package/dist/commands/dtcg/evaluate.test.d.ts +2 -0
- package/dist/commands/dtcg/evaluate.test.d.ts.map +1 -0
- package/dist/commands/dtcg/export.d.ts +24 -0
- package/dist/commands/dtcg/export.d.ts.map +1 -0
- package/dist/commands/dtcg/import.d.ts +38 -0
- package/dist/commands/dtcg/import.d.ts.map +1 -0
- package/dist/commands/dtcg/index.d.ts +3 -0
- package/dist/commands/dtcg/index.d.ts.map +1 -0
- package/dist/commands/figma/export.d.ts +24 -0
- package/dist/commands/figma/export.d.ts.map +1 -0
- package/dist/commands/figma/import.d.ts +38 -0
- package/dist/commands/figma/import.d.ts.map +1 -0
- package/dist/commands/figma/index.d.ts +3 -0
- package/dist/commands/figma/index.d.ts.map +1 -0
- package/dist/commands/init/nuxt.d.ts +2 -0
- package/dist/commands/init/nuxt.d.ts.map +1 -0
- package/dist/commands/init/vite.d.ts +2 -0
- package/dist/commands/init/vite.d.ts.map +1 -0
- package/dist/commands/init.d.ts +26 -0
- package/dist/commands/init.d.ts.map +1 -0
- package/dist/constants.d.ts +8 -0
- package/dist/constants.d.ts.map +1 -0
- package/dist/dtcg-D1-iITOr.js +14 -0
- package/dist/dtcg-D84AfyzO.cjs +13 -0
- package/dist/export-CBdPGGEq.js +66 -0
- package/dist/export-DmPAU9Wh.cjs +69 -0
- package/dist/export-ONk9eKoZ.cjs +86 -0
- package/dist/export-suUS16eO.js +83 -0
- package/dist/figma-BvXoqRPU.cjs +13 -0
- package/dist/figma-D2RJh56T.js +14 -0
- package/dist/import-BQrcHNjK.cjs +126 -0
- package/dist/import-Bll_uBvJ.js +123 -0
- package/dist/import-MqLYxb8d.js +114 -0
- package/dist/import-ibQc_GXm.cjs +117 -0
- package/dist/index.cjs +21 -8669
- package/dist/index.d.ts +3 -4
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +16 -18
- package/dist/init-CAO0mA_w.js +262 -0
- package/dist/init-CaJoUVv2.cjs +265 -0
- package/dist/utils.d.ts +7 -0
- package/dist/utils.d.ts.map +1 -0
- package/package.json +14 -17
- package/dist/build-BFZSJ2Zh.js +0 -49
- package/dist/export-SH70kD-5.js +0 -139
- package/dist/import-CwuwczM7.js +0 -90
- package/dist/index-C3Gqfamh.js +0 -3689
- package/dist/index-DH3Hm47n.js +0 -14
- package/dist/index-DtEAy_us.js +0 -4475
- package/dist/init-DnrkQJYO.js +0 -234
|
@@ -0,0 +1,434 @@
|
|
|
1
|
+
let _styleframe_dtcg = require("@styleframe/dtcg");
|
|
2
|
+
//#region src/commands/dtcg/evaluate.ts
|
|
3
|
+
function isReference(value) {
|
|
4
|
+
return typeof value === "object" && value !== null && "type" in value && value.type === "reference";
|
|
5
|
+
}
|
|
6
|
+
function isCss(value) {
|
|
7
|
+
return typeof value === "object" && value !== null && "type" in value && value.type === "css";
|
|
8
|
+
}
|
|
9
|
+
function isPrimitive(value) {
|
|
10
|
+
return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Resolve a Reference's *primitive* value (following alias chains). Returns
|
|
14
|
+
* null if the chain is broken (missing target or cycle).
|
|
15
|
+
*/
|
|
16
|
+
function resolveReferenceTarget(ref, context) {
|
|
17
|
+
const visited = context.visited ?? /* @__PURE__ */ new Set();
|
|
18
|
+
if (visited.has(ref.name)) return {
|
|
19
|
+
resolved: null,
|
|
20
|
+
reason: `Reference cycle: ${[...visited, ref.name].join(" → ")}`
|
|
21
|
+
};
|
|
22
|
+
const target = context.variables.get(ref.name);
|
|
23
|
+
if (!target) {
|
|
24
|
+
if (ref.fallback !== void 0 && ref.fallback !== null) return evaluateValue(ref.fallback, context);
|
|
25
|
+
return {
|
|
26
|
+
resolved: null,
|
|
27
|
+
reason: `Unknown reference target: ${ref.name}`
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
const nextContext = {
|
|
31
|
+
variables: context.variables,
|
|
32
|
+
visited: new Set([...visited, ref.name]),
|
|
33
|
+
maxViewport: context.maxViewport
|
|
34
|
+
};
|
|
35
|
+
return evaluateValue(target.value, nextContext);
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Try to evaluate a CSS template literal. Two strategies:
|
|
39
|
+
*
|
|
40
|
+
* 1. **String-template fold**: replace each `Reference` part with its
|
|
41
|
+
* resolved primitive (stringified) and concatenate. If the resulting
|
|
42
|
+
* string parses as a known CSS form (cubic-bezier(...), a hex color,
|
|
43
|
+
* a dimension, a duration), return it.
|
|
44
|
+
* 2. **Pure arithmetic**: if every part reduces to a finite number or one
|
|
45
|
+
* of `+`/`-`/`*`/`/`/`(`/`)` operators with whitespace, evaluate the
|
|
46
|
+
* arithmetic and return the numeric result.
|
|
47
|
+
*
|
|
48
|
+
* Otherwise, return `{resolved: null, cssExpression: <fold>}` so the caller
|
|
49
|
+
* can preserve the expression in an extension.
|
|
50
|
+
*/
|
|
51
|
+
function evaluateCss(css, context) {
|
|
52
|
+
const parts = [];
|
|
53
|
+
let unevaluable = false;
|
|
54
|
+
let unevaluableReason;
|
|
55
|
+
for (const part of css.value) {
|
|
56
|
+
if (typeof part === "string") {
|
|
57
|
+
parts.push({
|
|
58
|
+
kind: "literal",
|
|
59
|
+
text: part
|
|
60
|
+
});
|
|
61
|
+
continue;
|
|
62
|
+
}
|
|
63
|
+
const evaluated = evaluateValue(part, context);
|
|
64
|
+
if (evaluated.resolved === null) {
|
|
65
|
+
unevaluable = true;
|
|
66
|
+
unevaluableReason = evaluated.reason;
|
|
67
|
+
parts.push({
|
|
68
|
+
kind: "value",
|
|
69
|
+
text: ""
|
|
70
|
+
});
|
|
71
|
+
continue;
|
|
72
|
+
}
|
|
73
|
+
const text = String(evaluated.resolved);
|
|
74
|
+
const numeric = typeof evaluated.resolved === "number" ? evaluated.resolved : void 0;
|
|
75
|
+
parts.push({
|
|
76
|
+
kind: "value",
|
|
77
|
+
text,
|
|
78
|
+
numeric
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
const folded = parts.map((p) => p.text).join("");
|
|
82
|
+
if (unevaluable) return {
|
|
83
|
+
resolved: null,
|
|
84
|
+
cssExpression: folded,
|
|
85
|
+
reason: unevaluableReason ?? "Computed expression includes an unresolvable reference"
|
|
86
|
+
};
|
|
87
|
+
if (parts.every((p) => {
|
|
88
|
+
if (p.kind === "value") return p.numeric !== void 0;
|
|
89
|
+
return /^[\d.\s+\-*/()]*$/.test(p.text);
|
|
90
|
+
}) && parts.some((p) => p.kind === "value")) try {
|
|
91
|
+
const result = safeArithmetic(folded.trim());
|
|
92
|
+
if (typeof result === "number" && Number.isFinite(result)) return { resolved: result };
|
|
93
|
+
} catch (err) {
|
|
94
|
+
return {
|
|
95
|
+
resolved: null,
|
|
96
|
+
cssExpression: folded,
|
|
97
|
+
reason: `Arithmetic evaluation failed: ${err.message}`
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
const subResult = substituteFluidUnits(folded, context.maxViewport ?? 1440);
|
|
101
|
+
if (subResult && /^[\d.\s+\-*/()]+$/.test(subResult.rebased)) try {
|
|
102
|
+
const result = safeArithmetic(subResult.rebased.trim());
|
|
103
|
+
if (typeof result === "number" && Number.isFinite(result)) return {
|
|
104
|
+
resolved: result,
|
|
105
|
+
...subResult.substituted ? { normalisationSource: "fluid-max" } : {}
|
|
106
|
+
};
|
|
107
|
+
} catch {}
|
|
108
|
+
return { resolved: folded };
|
|
109
|
+
}
|
|
110
|
+
/**
|
|
111
|
+
* Replace fluid-friendly literals so a `calc()` expression mixing `100vw`,
|
|
112
|
+
* `rem`, and `px` reduces to pure arithmetic.
|
|
113
|
+
*
|
|
114
|
+
* Returns `null` when the input still contains units we don't substitute
|
|
115
|
+
* (e.g. `vh`, `%`, `em`) — the caller should fall back to the
|
|
116
|
+
* verbatim-string path.
|
|
117
|
+
*
|
|
118
|
+
* `substituted` indicates whether at least one fluid unit was actually
|
|
119
|
+
* substituted. `false` means we only stripped a bare `calc(...)` wrapper —
|
|
120
|
+
* the expression was effectively pure arithmetic and the result should NOT
|
|
121
|
+
* be flagged as fluid-normalised.
|
|
122
|
+
*/
|
|
123
|
+
function substituteFluidUnits(expression, maxViewport) {
|
|
124
|
+
let substituted = false;
|
|
125
|
+
let rebased = expression.replace(/\bcalc\b/g, "");
|
|
126
|
+
if (rebased.includes("100vw")) {
|
|
127
|
+
rebased = rebased.replace(/100vw/g, String(maxViewport));
|
|
128
|
+
substituted = true;
|
|
129
|
+
}
|
|
130
|
+
if (/(-?\d*\.?\d+)\s*rem/.test(rebased)) {
|
|
131
|
+
rebased = rebased.replace(/(-?\d*\.?\d+)\s*rem/g, "($1 * 16)");
|
|
132
|
+
substituted = true;
|
|
133
|
+
}
|
|
134
|
+
if (/(-?\d*\.?\d+)\s*px/.test(rebased)) {
|
|
135
|
+
rebased = rebased.replace(/(-?\d*\.?\d+)\s*px/g, "$1");
|
|
136
|
+
substituted = true;
|
|
137
|
+
}
|
|
138
|
+
if (/[a-zA-Z%]/.test(rebased)) return null;
|
|
139
|
+
return {
|
|
140
|
+
rebased,
|
|
141
|
+
substituted
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
145
|
+
* Safe arithmetic over a whitespace-trimmed expression containing only
|
|
146
|
+
* numbers, parentheses, and `+`/`-`/`*`/`/`. Throws on anything else.
|
|
147
|
+
*/
|
|
148
|
+
function safeArithmetic(expression) {
|
|
149
|
+
if (!/^[\d.\s+\-*/()]+$/.test(expression)) throw new Error(`Disallowed characters in expression: "${expression}"`);
|
|
150
|
+
return new Function(`return (${expression});`)();
|
|
151
|
+
}
|
|
152
|
+
function evaluateValue(value, context) {
|
|
153
|
+
if (value === null || value === void 0) return {
|
|
154
|
+
resolved: null,
|
|
155
|
+
reason: "Value is null/undefined"
|
|
156
|
+
};
|
|
157
|
+
if (isPrimitive(value)) return { resolved: value };
|
|
158
|
+
if (isReference(value)) {
|
|
159
|
+
const targetResolution = resolveReferenceTarget(value, context);
|
|
160
|
+
if ((!context.visited || context.visited.size === 0) && targetResolution.resolved !== null) return {
|
|
161
|
+
...targetResolution,
|
|
162
|
+
aliasTarget: value.name
|
|
163
|
+
};
|
|
164
|
+
return targetResolution;
|
|
165
|
+
}
|
|
166
|
+
if (isCss(value)) return evaluateCss(value, context);
|
|
167
|
+
if (Array.isArray(value)) return {
|
|
168
|
+
resolved: null,
|
|
169
|
+
reason: "Heterogeneous array — DTCG composite encoding not yet implemented"
|
|
170
|
+
};
|
|
171
|
+
return {
|
|
172
|
+
resolved: null,
|
|
173
|
+
reason: `Unsupported value shape: ${typeof value}`
|
|
174
|
+
};
|
|
175
|
+
}
|
|
176
|
+
//#endregion
|
|
177
|
+
//#region src/commands/dtcg/build-dtcg.ts
|
|
178
|
+
var TOKENS_SCHEMA_URL = "https://design-tokens.org/schemas/2025.10/tokens.json";
|
|
179
|
+
var RESOLVER_SCHEMA_URL = "https://www.designtokens.org/schemas/2025.10/resolver.json";
|
|
180
|
+
function buildVariableMap(root) {
|
|
181
|
+
const map = /* @__PURE__ */ new Map();
|
|
182
|
+
for (const v of root.variables) map.set(v.name, v);
|
|
183
|
+
for (const theme of root.themes) for (const v of theme.variables) if (!map.has(v.name)) map.set(v.name, v);
|
|
184
|
+
return map;
|
|
185
|
+
}
|
|
186
|
+
function processVariable(variable, context) {
|
|
187
|
+
const evaluation = evaluateValue(variable.value, context);
|
|
188
|
+
const classification = classifyValueForVariable(variable.name, evaluation);
|
|
189
|
+
return {
|
|
190
|
+
name: variable.name,
|
|
191
|
+
evaluation,
|
|
192
|
+
classification
|
|
193
|
+
};
|
|
194
|
+
}
|
|
195
|
+
function classifyValueForVariable(name, evaluation) {
|
|
196
|
+
if (evaluation.resolved === null) return void 0;
|
|
197
|
+
return (0, _styleframe_dtcg.classifyValue)(evaluation.resolved, { path: name });
|
|
198
|
+
}
|
|
199
|
+
/**
|
|
200
|
+
* Place a token at `dotPath` in `doc`. Two collision cases need handling:
|
|
201
|
+
*
|
|
202
|
+
* 1. **Token at a path whose group already has children.** If we set
|
|
203
|
+
* `border-width = {...token}` after `border-width.thin = {...}` was
|
|
204
|
+
* written, a naive overwrite drops the children. Instead, we promote
|
|
205
|
+
* the parent token into a `$root` slot inside the existing group.
|
|
206
|
+
* 2. **Children written into a slot that's already a token.** Reverse
|
|
207
|
+
* ordering: if `border-width = {...token}` was written first and we
|
|
208
|
+
* now need to add `border-width.thin = {...}`, we move the existing
|
|
209
|
+
* token into `$root` and continue descending into the new group.
|
|
210
|
+
*
|
|
211
|
+
* Both cases are handled by checking whether the slot looks like a token
|
|
212
|
+
* (`$value` present) or a group, and by upgrading to `$root` whenever a
|
|
213
|
+
* token coexists with siblings at the same path.
|
|
214
|
+
*/
|
|
215
|
+
function setNestedToken(doc, dotPath, token) {
|
|
216
|
+
const segments = dotPath.split(".");
|
|
217
|
+
let cursor = doc;
|
|
218
|
+
for (let i = 0; i < segments.length - 1; i++) {
|
|
219
|
+
const segment = segments[i];
|
|
220
|
+
const next = cursor[segment];
|
|
221
|
+
if (typeof next !== "object" || next === null || Array.isArray(next)) cursor[segment] = {};
|
|
222
|
+
else if ("$value" in next) cursor[segment] = { $root: next };
|
|
223
|
+
cursor = cursor[segment];
|
|
224
|
+
}
|
|
225
|
+
const leaf = segments[segments.length - 1];
|
|
226
|
+
const existing = cursor[leaf];
|
|
227
|
+
if (typeof existing === "object" && existing !== null && !Array.isArray(existing) && !("$value" in existing)) existing.$root = token;
|
|
228
|
+
else cursor[leaf] = token;
|
|
229
|
+
}
|
|
230
|
+
function hasRootToken(doc, dotPath) {
|
|
231
|
+
const segments = dotPath.split(".");
|
|
232
|
+
let cursor = doc;
|
|
233
|
+
for (const segment of segments) {
|
|
234
|
+
if (typeof cursor !== "object" || cursor === null || Array.isArray(cursor)) return false;
|
|
235
|
+
cursor = cursor[segment];
|
|
236
|
+
}
|
|
237
|
+
return typeof cursor === "object" && cursor !== null && !Array.isArray(cursor) && "$root" in cursor;
|
|
238
|
+
}
|
|
239
|
+
function setNestedOverride(context, dotPath, value, type) {
|
|
240
|
+
const segments = dotPath.split(".");
|
|
241
|
+
let cursor = context;
|
|
242
|
+
for (let i = 0; i < segments.length - 1; i++) {
|
|
243
|
+
const segment = segments[i];
|
|
244
|
+
const next = cursor[segment];
|
|
245
|
+
if (typeof next !== "object" || next === null || Array.isArray(next) || "$value" in next) cursor[segment] = {};
|
|
246
|
+
cursor = cursor[segment];
|
|
247
|
+
}
|
|
248
|
+
const token = { $value: value };
|
|
249
|
+
if (type !== void 0) token.$type = type;
|
|
250
|
+
cursor[segments[segments.length - 1]] = token;
|
|
251
|
+
}
|
|
252
|
+
function makeAliasToken(target, type, description) {
|
|
253
|
+
const token = { $value: (0, _styleframe_dtcg.formatAlias)(target) };
|
|
254
|
+
if (type !== void 0) token.$type = type;
|
|
255
|
+
if (description) token.$description = description;
|
|
256
|
+
return token;
|
|
257
|
+
}
|
|
258
|
+
function makeValueToken(classification, description, fluidBound) {
|
|
259
|
+
const token = {
|
|
260
|
+
$value: classification.value,
|
|
261
|
+
$type: classification.type
|
|
262
|
+
};
|
|
263
|
+
if (description) token.$description = description;
|
|
264
|
+
if (fluidBound) token.$extensions = { "dev.styleframe": { fluidBound } };
|
|
265
|
+
return token;
|
|
266
|
+
}
|
|
267
|
+
function makeExpressionToken(expression, description) {
|
|
268
|
+
const token = {
|
|
269
|
+
$value: expression,
|
|
270
|
+
$extensions: { "dev.styleframe": { expression } }
|
|
271
|
+
};
|
|
272
|
+
if (description) token.$description = description;
|
|
273
|
+
return token;
|
|
274
|
+
}
|
|
275
|
+
function valuesEqual(a, b) {
|
|
276
|
+
if (a === b) return true;
|
|
277
|
+
if (typeof a !== typeof b) return false;
|
|
278
|
+
if (typeof a === "object") return JSON.stringify(a) === JSON.stringify(b);
|
|
279
|
+
return false;
|
|
280
|
+
}
|
|
281
|
+
function capitalizeContextName(name) {
|
|
282
|
+
if (name.length === 0) return name;
|
|
283
|
+
return name.charAt(0).toUpperCase() + name.slice(1);
|
|
284
|
+
}
|
|
285
|
+
function buildDTCG(root, options = {}) {
|
|
286
|
+
const includeSchema = options.includeSchema ?? true;
|
|
287
|
+
const schemaUrl = options.schemaUrl ?? TOKENS_SCHEMA_URL;
|
|
288
|
+
const modifierName = options.modifierName ?? "theme";
|
|
289
|
+
const collectionName = options.collectionName ?? "Design Tokens";
|
|
290
|
+
const defaultModeName = options.defaultModeName ?? "Default";
|
|
291
|
+
const tokensSourceRef = options.tokensSourceRef ?? "tokens.json";
|
|
292
|
+
const variableMap = buildVariableMap(root);
|
|
293
|
+
const fluidMaxVariable = variableMap.get("fluid.max-width");
|
|
294
|
+
const fluidMaxResolved = fluidMaxVariable ? evaluateValue(fluidMaxVariable.value, { variables: variableMap }).resolved : null;
|
|
295
|
+
const maxViewport = typeof fluidMaxResolved === "number" ? fluidMaxResolved : 1440;
|
|
296
|
+
const context = {
|
|
297
|
+
variables: variableMap,
|
|
298
|
+
maxViewport
|
|
299
|
+
};
|
|
300
|
+
const processed = /* @__PURE__ */ new Map();
|
|
301
|
+
const typeMap = /* @__PURE__ */ new Map();
|
|
302
|
+
for (const variable of root.variables) {
|
|
303
|
+
const p = processVariable(variable, context);
|
|
304
|
+
processed.set(variable.name, p);
|
|
305
|
+
if (p.classification) typeMap.set(variable.name, p.classification.type);
|
|
306
|
+
}
|
|
307
|
+
const resolveTypeFromAliasChain = (name, seen) => {
|
|
308
|
+
if (seen.has(name)) return void 0;
|
|
309
|
+
const direct = typeMap.get(name);
|
|
310
|
+
if (direct) return direct;
|
|
311
|
+
const p = processed.get(name);
|
|
312
|
+
if (p?.evaluation.aliasTarget) return resolveTypeFromAliasChain(p.evaluation.aliasTarget, new Set([...seen, name]));
|
|
313
|
+
};
|
|
314
|
+
const tokens = {};
|
|
315
|
+
if (includeSchema) tokens.$schema = schemaUrl;
|
|
316
|
+
tokens.$extensions = { "dev.styleframe": { collection: collectionName } };
|
|
317
|
+
const diagnostics = [];
|
|
318
|
+
let emittedCount = 0;
|
|
319
|
+
let fluidNormalisedCount = 0;
|
|
320
|
+
for (const variable of root.variables) {
|
|
321
|
+
const p = processed.get(variable.name);
|
|
322
|
+
if (!p) continue;
|
|
323
|
+
const { evaluation, classification } = p;
|
|
324
|
+
if (evaluation.aliasTarget) {
|
|
325
|
+
const targetType = resolveTypeFromAliasChain(evaluation.aliasTarget, /* @__PURE__ */ new Set());
|
|
326
|
+
setNestedToken(tokens, variable.name, makeAliasToken(evaluation.aliasTarget, targetType));
|
|
327
|
+
emittedCount++;
|
|
328
|
+
continue;
|
|
329
|
+
}
|
|
330
|
+
if (classification) {
|
|
331
|
+
const fluidBound = evaluation.normalisationSource === "fluid-max" ? "max" : void 0;
|
|
332
|
+
const promoted = fluidBound && classification.type === "number" && typeof classification.value === "number" ? {
|
|
333
|
+
type: "dimension",
|
|
334
|
+
value: {
|
|
335
|
+
value: classification.value,
|
|
336
|
+
unit: "px"
|
|
337
|
+
}
|
|
338
|
+
} : classification;
|
|
339
|
+
setNestedToken(tokens, variable.name, makeValueToken(promoted, void 0, fluidBound));
|
|
340
|
+
if (fluidBound) fluidNormalisedCount++;
|
|
341
|
+
emittedCount++;
|
|
342
|
+
continue;
|
|
343
|
+
}
|
|
344
|
+
if (evaluation.cssExpression) {
|
|
345
|
+
setNestedToken(tokens, variable.name, makeExpressionToken(evaluation.cssExpression));
|
|
346
|
+
diagnostics.push({
|
|
347
|
+
name: variable.name,
|
|
348
|
+
level: "warn",
|
|
349
|
+
reason: evaluation.reason ?? "Computed expression — preserved as dev.styleframe.expression extension"
|
|
350
|
+
});
|
|
351
|
+
emittedCount++;
|
|
352
|
+
continue;
|
|
353
|
+
}
|
|
354
|
+
if (evaluation.resolved !== null && typeof evaluation.resolved !== "boolean") {
|
|
355
|
+
setNestedToken(tokens, variable.name, {
|
|
356
|
+
$value: String(evaluation.resolved),
|
|
357
|
+
$extensions: { "dev.styleframe": { unknownType: true } }
|
|
358
|
+
});
|
|
359
|
+
diagnostics.push({
|
|
360
|
+
name: variable.name,
|
|
361
|
+
level: "warn",
|
|
362
|
+
reason: "Could not infer DTCG $type — emitted as untyped string"
|
|
363
|
+
});
|
|
364
|
+
emittedCount++;
|
|
365
|
+
continue;
|
|
366
|
+
}
|
|
367
|
+
diagnostics.push({
|
|
368
|
+
name: variable.name,
|
|
369
|
+
level: "warn",
|
|
370
|
+
reason: evaluation.reason ?? "Unrepresentable value — skipped"
|
|
371
|
+
});
|
|
372
|
+
}
|
|
373
|
+
const themedThemes = root.themes.filter((t) => t.variables.length > 0);
|
|
374
|
+
let resolver;
|
|
375
|
+
if (themedThemes.length > 0) {
|
|
376
|
+
const contexts = {};
|
|
377
|
+
for (const theme of themedThemes) {
|
|
378
|
+
const contextDoc = {};
|
|
379
|
+
for (const variable of theme.variables) {
|
|
380
|
+
const themeProcessed = processVariable(variable, context);
|
|
381
|
+
const defaultProcessed = processed.get(variable.name);
|
|
382
|
+
let themeValue;
|
|
383
|
+
let themeType;
|
|
384
|
+
if (themeProcessed.evaluation.aliasTarget) {
|
|
385
|
+
themeValue = (0, _styleframe_dtcg.formatAlias)(themeProcessed.evaluation.aliasTarget);
|
|
386
|
+
themeType = resolveTypeFromAliasChain(themeProcessed.evaluation.aliasTarget, /* @__PURE__ */ new Set());
|
|
387
|
+
} else if (themeProcessed.classification) {
|
|
388
|
+
themeValue = themeProcessed.classification.value;
|
|
389
|
+
themeType = themeProcessed.classification.type;
|
|
390
|
+
}
|
|
391
|
+
if (themeValue === void 0) continue;
|
|
392
|
+
let defaultValue;
|
|
393
|
+
if (defaultProcessed?.evaluation.aliasTarget) defaultValue = (0, _styleframe_dtcg.formatAlias)(defaultProcessed.evaluation.aliasTarget);
|
|
394
|
+
else if (defaultProcessed?.classification) defaultValue = defaultProcessed.classification.value;
|
|
395
|
+
if (defaultValue !== void 0 && valuesEqual(themeValue, defaultValue)) continue;
|
|
396
|
+
setNestedOverride(contextDoc, hasRootToken(tokens, variable.name) ? `${variable.name}.$root` : variable.name, themeValue, themeType);
|
|
397
|
+
}
|
|
398
|
+
contexts[capitalizeContextName(theme.name)] = contextDoc;
|
|
399
|
+
}
|
|
400
|
+
for (const key of Object.keys(contexts)) if (Object.keys(contexts[key]).length === 0) delete contexts[key];
|
|
401
|
+
const themeContextNames = Object.keys(contexts);
|
|
402
|
+
if (themeContextNames.length > 0) {
|
|
403
|
+
const allContexts = { [defaultModeName]: [] };
|
|
404
|
+
for (const name of themeContextNames) allContexts[name] = [contexts[name]];
|
|
405
|
+
resolver = {
|
|
406
|
+
$schema: RESOLVER_SCHEMA_URL,
|
|
407
|
+
version: "2025.10",
|
|
408
|
+
modifiers: { [modifierName]: {
|
|
409
|
+
contexts: allContexts,
|
|
410
|
+
default: defaultModeName
|
|
411
|
+
} },
|
|
412
|
+
resolutionOrder: [{
|
|
413
|
+
type: "set",
|
|
414
|
+
sources: [{ $ref: tokensSourceRef }]
|
|
415
|
+
}, { $ref: `#/modifiers/${modifierName}` }]
|
|
416
|
+
};
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
return {
|
|
420
|
+
tokens,
|
|
421
|
+
resolver,
|
|
422
|
+
diagnostics,
|
|
423
|
+
emittedCount,
|
|
424
|
+
fluidNormalisedCount,
|
|
425
|
+
maxViewport
|
|
426
|
+
};
|
|
427
|
+
}
|
|
428
|
+
//#endregion
|
|
429
|
+
Object.defineProperty(exports, "buildDTCG", {
|
|
430
|
+
enumerable: true,
|
|
431
|
+
get: function() {
|
|
432
|
+
return buildDTCG;
|
|
433
|
+
}
|
|
434
|
+
});
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
//#region \0rolldown/runtime.js
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
10
|
+
key = keys[i];
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
12
|
+
get: ((k) => from[k]).bind(null, key),
|
|
13
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
19
|
+
value: mod,
|
|
20
|
+
enumerable: true
|
|
21
|
+
}) : target, mod));
|
|
22
|
+
//#endregion
|
|
23
|
+
Object.defineProperty(exports, "__toESM", {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function() {
|
|
26
|
+
return __toESM;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
declare const _default: import('citty').CommandDef<{
|
|
2
|
+
entry: {
|
|
3
|
+
type: "positional";
|
|
4
|
+
description: string;
|
|
5
|
+
default: string;
|
|
6
|
+
valueHint: string;
|
|
7
|
+
};
|
|
8
|
+
outputDir: {
|
|
9
|
+
type: "string";
|
|
10
|
+
description: string;
|
|
11
|
+
default: string;
|
|
12
|
+
alias: string[];
|
|
13
|
+
valueHint: string;
|
|
14
|
+
};
|
|
15
|
+
clean: {
|
|
16
|
+
type: "boolean";
|
|
17
|
+
description: string;
|
|
18
|
+
default: false;
|
|
19
|
+
};
|
|
20
|
+
}>;
|
|
21
|
+
export default _default;
|
|
22
|
+
//# sourceMappingURL=build.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../src/commands/build.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAKA,wBA6CG"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { Root } from '@styleframe/core';
|
|
2
|
+
import { DTCGDocument, DTCGResolverDocument } from '@styleframe/dtcg';
|
|
3
|
+
export interface BuildDTCGOptions {
|
|
4
|
+
collectionName?: string;
|
|
5
|
+
defaultModeName?: string;
|
|
6
|
+
modifierName?: string;
|
|
7
|
+
includeSchema?: boolean;
|
|
8
|
+
schemaUrl?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Filename referenced as the base `set` in the resolver's `resolutionOrder`.
|
|
11
|
+
* Resolver consumers must be able to load this path via their `fileLoader`.
|
|
12
|
+
* Defaults to `"tokens.json"`.
|
|
13
|
+
*/
|
|
14
|
+
tokensSourceRef?: string;
|
|
15
|
+
}
|
|
16
|
+
export interface BuildDiagnostic {
|
|
17
|
+
name: string;
|
|
18
|
+
level: "warn" | "info";
|
|
19
|
+
reason: string;
|
|
20
|
+
}
|
|
21
|
+
export interface BuildDTCGResult {
|
|
22
|
+
tokens: DTCGDocument;
|
|
23
|
+
resolver?: DTCGResolverDocument;
|
|
24
|
+
diagnostics: BuildDiagnostic[];
|
|
25
|
+
emittedCount: number;
|
|
26
|
+
/**
|
|
27
|
+
* Number of tokens whose final value was derived via fluid-unit
|
|
28
|
+
* substitution (`100vw` → max viewport, `rem` → px) rather than direct
|
|
29
|
+
* arithmetic. Useful for the export CLI's diagnostic summary.
|
|
30
|
+
*/
|
|
31
|
+
fluidNormalisedCount: number;
|
|
32
|
+
/** Max viewport (in px) used when substituting `100vw` for fluid tokens. */
|
|
33
|
+
maxViewport: number;
|
|
34
|
+
}
|
|
35
|
+
export declare function buildDTCG(root: Root, options?: BuildDTCGOptions): BuildDTCGResult;
|
|
36
|
+
//# sourceMappingURL=build-dtcg.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"build-dtcg.d.ts","sourceRoot":"","sources":["../../../src/commands/dtcg/build-dtcg.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAmB,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAGN,KAAK,YAAY,EAEjB,KAAK,oBAAoB,EAMzB,MAAM,kBAAkB,CAAC;AAY1B,MAAM,WAAW,gBAAgB;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC/B,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,oBAAoB,EAAE,MAAM,CAAC;IAC7B,4EAA4E;IAC5E,WAAW,EAAE,MAAM,CAAC;CACpB;AA4LD,wBAAgB,SAAS,CACxB,IAAI,EAAE,IAAI,EACV,OAAO,GAAE,gBAAqB,GAC5B,eAAe,CAsPjB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"build-dtcg.test.d.ts","sourceRoot":"","sources":["../../../src/commands/dtcg/build-dtcg.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { TokenValue, Variable } from '@styleframe/core';
|
|
2
|
+
export interface EvaluateContext {
|
|
3
|
+
variables: Map<string, Variable>;
|
|
4
|
+
/** Visited variable names — used to detect ref cycles. */
|
|
5
|
+
visited?: Set<string>;
|
|
6
|
+
/**
|
|
7
|
+
* Viewport width in px substituted for `100vw` when reducing fluid
|
|
8
|
+
* expressions. Defaults to `1440` (the styleframe theme's default
|
|
9
|
+
* `fluid.max-width`); pass an explicit value when the project overrides it.
|
|
10
|
+
*/
|
|
11
|
+
maxViewport?: number;
|
|
12
|
+
}
|
|
13
|
+
export interface EvaluatedValue {
|
|
14
|
+
/** Concrete primitive form, or `null` if the expression couldn't be reduced. */
|
|
15
|
+
resolved: string | number | boolean | null;
|
|
16
|
+
/** When the expression is exactly one reference, this is the target name. */
|
|
17
|
+
aliasTarget?: string;
|
|
18
|
+
/** Original CSS-string form, populated when `resolved` is null. */
|
|
19
|
+
cssExpression?: string;
|
|
20
|
+
/** Diagnostic reason, populated when `resolved` is null. */
|
|
21
|
+
reason?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Set when the value was derived via unit substitution (`100vw` → max
|
|
24
|
+
* viewport, `rem` → px) rather than direct arithmetic. Lets callers attach
|
|
25
|
+
* a `dev.styleframe.fluidBound` extension so the substitution is auditable.
|
|
26
|
+
*/
|
|
27
|
+
normalisationSource?: "fluid-max";
|
|
28
|
+
}
|
|
29
|
+
export declare function evaluateValue(value: TokenValue, context: EvaluateContext): EvaluatedValue;
|
|
30
|
+
//# sourceMappingURL=evaluate.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"evaluate.d.ts","sourceRoot":"","sources":["../../../src/commands/dtcg/evaluate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAGX,UAAU,EACV,QAAQ,EACR,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC/B,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACjC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC9B,gFAAgF;IAChF,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAC3C,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,WAAW,CAAC;CAClC;AAsND,wBAAgB,aAAa,CAC5B,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,eAAe,GACtB,cAAc,CAuChB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"evaluate.test.d.ts","sourceRoot":"","sources":["../../../src/commands/dtcg/evaluate.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
declare const _default: import('citty').CommandDef<{
|
|
2
|
+
config: {
|
|
3
|
+
type: "string";
|
|
4
|
+
description: string;
|
|
5
|
+
default: string;
|
|
6
|
+
alias: string[];
|
|
7
|
+
valueHint: string;
|
|
8
|
+
};
|
|
9
|
+
output: {
|
|
10
|
+
type: "string";
|
|
11
|
+
description: string;
|
|
12
|
+
default: string;
|
|
13
|
+
alias: string[];
|
|
14
|
+
valueHint: string;
|
|
15
|
+
};
|
|
16
|
+
collection: {
|
|
17
|
+
type: "string";
|
|
18
|
+
description: string;
|
|
19
|
+
default: string;
|
|
20
|
+
alias: string[];
|
|
21
|
+
};
|
|
22
|
+
}>;
|
|
23
|
+
export default _default;
|
|
24
|
+
//# sourceMappingURL=export.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../../../src/commands/dtcg/export.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAQA,wBA8FG"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
declare const _default: import('citty').CommandDef<{
|
|
2
|
+
input: {
|
|
3
|
+
type: "string";
|
|
4
|
+
description: string;
|
|
5
|
+
required: true;
|
|
6
|
+
alias: string[];
|
|
7
|
+
valueHint: string;
|
|
8
|
+
};
|
|
9
|
+
output: {
|
|
10
|
+
type: "string";
|
|
11
|
+
description: string;
|
|
12
|
+
default: string;
|
|
13
|
+
alias: string[];
|
|
14
|
+
valueHint: string;
|
|
15
|
+
};
|
|
16
|
+
composables: {
|
|
17
|
+
type: "boolean";
|
|
18
|
+
description: string;
|
|
19
|
+
default: true;
|
|
20
|
+
};
|
|
21
|
+
rem: {
|
|
22
|
+
type: "boolean";
|
|
23
|
+
description: string;
|
|
24
|
+
default: false;
|
|
25
|
+
};
|
|
26
|
+
baseFontSize: {
|
|
27
|
+
type: "string";
|
|
28
|
+
description: string;
|
|
29
|
+
default: string;
|
|
30
|
+
};
|
|
31
|
+
instanceName: {
|
|
32
|
+
type: "string";
|
|
33
|
+
description: string;
|
|
34
|
+
default: string;
|
|
35
|
+
};
|
|
36
|
+
}>;
|
|
37
|
+
export default _default;
|
|
38
|
+
//# sourceMappingURL=import.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"import.d.ts","sourceRoot":"","sources":["../../../src/commands/dtcg/import.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,wBA4FG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/commands/dtcg/index.ts"],"names":[],"mappings":";AAEA,wBAUG"}
|