@projectwallace/css-design-tokens 0.7.1 → 0.8.1

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.
Files changed (5) hide show
  1. package/dist/css-design-tokens.js +262 -211
  2. package/dist/destructure-font-family.d.ts +1 -1
  3. package/dist/index.d.ts +5 -5
  4. package/package.json +48 -48
  5. package/readme.md +1 -0
package/dist/css-design-tokens.js CHANGED
@@ -1,60 +1,60 @@
1
- import { cssKeywords as Y, colorKeywords as F, namedColors as B, systemColors as G, colorFunctions as T, analyze as W } from "@projectwallace/css-analyzer";
2
- import { convert as k } from "css-time-sort";
3
- import { convert as K } from "color-sorter";
4
- import { parse as d } from "css-tree";
5
- import { ColorSpace as o, sRGB as M, XYZ_D65 as Z, XYZ_D50 as U, XYZ_ABS_D65 as V, Lab_D65 as J, Lab as Q, LCH as ee, sRGB_Linear as te, HSL as re, HWB as ne, HSV as le, P3_Linear as ie, P3 as se, A98RGB_Linear as oe, A98RGB as ue, ProPhoto_Linear as ae, ProPhoto as ce, REC_2020_Linear as fe, REC_2020 as pe, OKLab as me, OKLCH as he, OKLrab as ge, parse as _e } from "colorjs.io/fn";
6
- const N = 0, L = 1, E = 2, b = 3, q = 4, C = 5, j = 6, z = 7, A = 8, I = 9, R = 10, _ = 11, de = /* @__PURE__ */ new Map([
7
- [N, "white"],
8
- [L, "black"],
9
- [E, "grey"],
10
- [b, "red"],
11
- [q, "orange"],
12
- [C, "yellow"],
13
- [j, "green"],
14
- [z, "cyan"],
15
- [A, "blue"],
16
- [I, "magenta"],
17
- [R, "pink"],
18
- [_, "unknown"]
1
+ import { cssKeywords as T, colorKeywords as W, namedColors as K, systemColors as M, colorFunctions as Z, analyze as U } from "@projectwallace/css-analyzer";
2
+ import { convert as V } from "css-time-sort";
3
+ import { convert as J } from "color-sorter";
4
+ import { parse as $ } from "css-tree";
5
+ import { ColorSpace as o, sRGB as Q, XYZ_D65 as ee, XYZ_D50 as te, XYZ_ABS_D65 as re, Lab_D65 as ne, Lab as ie, LCH as le, sRGB_Linear as se, HSL as oe, HWB as ue, HSV as ae, P3_Linear as fe, P3 as ce, A98RGB_Linear as pe, A98RGB as me, ProPhoto_Linear as ge, ProPhoto as he, REC_2020_Linear as de, REC_2020 as _e, OKLab as ve, OKLCH as $e, OKLrab as be, parse as xe } from "colorjs.io/fn";
6
+ const A = 0, j = 1, z = 2, y = 3, I = 4, R = 5, H = 6, X = 7, D = 8, P = 9, Y = 10, v = 11, ye = /* @__PURE__ */ new Map([
7
+ [A, "white"],
8
+ [j, "black"],
9
+ [z, "grey"],
10
+ [y, "red"],
11
+ [I, "orange"],
12
+ [R, "yellow"],
13
+ [H, "green"],
14
+ [X, "cyan"],
15
+ [D, "blue"],
16
+ [P, "magenta"],
17
+ [Y, "pink"],
18
+ [v, "unknown"]
19
19
  ]);
20
- function ve(n) {
20
+ function we(n) {
21
21
  let t = /* @__PURE__ */ new Map();
22
- for (let r in n) {
23
- let e = _;
24
- if (!r.includes("var(") && !r.includes("calc(")) {
25
- let s = K(r), { hue: l, saturation: i, lightness: m } = s;
26
- i < 10 && m === 100 ? e = N : i < 10 && m === 0 ? e = L : i < 5 ? e = E : l < 22 ? e = b : l < 50 ? e = q : l < 72 ? e = C : l < 144 ? e = j : l < 180 ? e = z : l < 250 ? e = A : l < 300 ? e = I : l < 350 ? e = R : e = b;
22
+ for (let i in n) {
23
+ let e = v;
24
+ if (!i.includes("var(") && !i.includes("calc(")) {
25
+ let s = J(i), { hue: l, saturation: r, lightness: f } = s;
26
+ r < 10 && f === 100 ? e = A : r < 10 && f === 0 ? e = j : r < 5 ? e = z : l < 22 ? e = y : l < 50 ? e = I : l < 72 ? e = R : l < 144 ? e = H : l < 180 ? e = X : l < 250 ? e = D : l < 300 ? e = P : l < 350 ? e = Y : e = y;
27
27
  }
28
- t.has(e) ? t.get(e).push(r) : t.set(e, [r]);
28
+ t.has(e) ? t.get(e).push(i) : t.set(e, [i]);
29
29
  }
30
30
  return Array.from(t).sort(
31
- (r, e) => r[0] === _ || e[0] === _ ? -1 : e[1].length - r[1].length
31
+ (i, e) => i[0] === v || e[0] === v ? -1 : e[1].length - i[1].length
32
32
  );
33
33
  }
34
- const u = "com.projectwallace.css-authored-as", a = "com.projectwallace.usage-count", be = "com.projectwallace.css-properties";
35
- o.register(M);
36
- o.register(Z);
37
- o.register(U);
38
- o.register(V);
39
- o.register(J);
34
+ const c = "com.projectwallace.css-authored-as", u = "com.projectwallace.usage-count", x = "com.projectwallace.css-properties";
40
35
  o.register(Q);
41
36
  o.register(ee);
42
37
  o.register(te);
43
38
  o.register(re);
44
39
  o.register(ne);
45
- o.register(le);
46
40
  o.register(ie);
41
+ o.register(le);
47
42
  o.register(se);
48
43
  o.register(oe);
49
44
  o.register(ue);
50
45
  o.register(ae);
51
- o.register(ce);
52
46
  o.register(fe);
47
+ o.register(ce);
53
48
  o.register(pe);
54
49
  o.register(me);
55
- o.register(he);
56
50
  o.register(ge);
57
- function h(n) {
51
+ o.register(he);
52
+ o.register(de);
53
+ o.register(_e);
54
+ o.register(ve);
55
+ o.register($e);
56
+ o.register(be);
57
+ function g(n) {
58
58
  let t = n.toLowerCase();
59
59
  if (t === "transparent")
60
60
  return {
@@ -62,24 +62,24 @@ function h(n) {
62
62
  components: [0, 0, 0],
63
63
  alpha: 0
64
64
  };
65
- if (Y.has(t) || F.has(t) || t.includes("var("))
65
+ if (T.has(t) || W.has(t) || t.includes("var("))
66
66
  return null;
67
67
  try {
68
- let r = _e(n), [e, s, l] = r.coords;
68
+ let i = xe(n), [e, s, l] = i.coords;
69
69
  return {
70
- colorSpace: r.spaceId,
70
+ colorSpace: i.spaceId,
71
71
  components: [
72
72
  e ?? "none",
73
73
  s ?? "none",
74
74
  l ?? "none"
75
75
  ],
76
- alpha: r.alpha ?? 0
76
+ alpha: i.alpha ?? 0
77
77
  };
78
78
  } catch {
79
79
  return null;
80
80
  }
81
81
  }
82
- function x() {
82
+ function O() {
83
83
  return {
84
84
  color: void 0,
85
85
  offsetX: void 0,
@@ -89,134 +89,138 @@ function x() {
89
89
  inset: !1
90
90
  };
91
91
  }
92
- function $e(n) {
93
- let t = d(n, {
92
+ function Se(n) {
93
+ let t = $(n, {
94
94
  context: "value",
95
95
  positions: !0
96
96
  });
97
- function r(l) {
97
+ function i(l) {
98
98
  return l.loc ? n.slice(l.loc.start.offset, l.loc.end.offset) : "";
99
99
  }
100
- let e = x(), s = [e];
100
+ let e = O(), s = [e];
101
101
  return t.children.size < 2 ? null : (t.children.forEach((l) => {
102
102
  if (l.type === "Identifier") {
103
103
  if (l.name.toLowerCase() === "inset")
104
104
  e.inset = !0;
105
- else if (B.has(l.name) || G.has(l.name)) {
106
- let i = h(l.name);
107
- if (i === null)
105
+ else if (K.has(l.name) || M.has(l.name)) {
106
+ let r = g(l.name);
107
+ if (r === null)
108
108
  return;
109
- e.color = i;
109
+ e.color = r;
110
110
  }
111
111
  } else if (l.type === "Dimension" || l.type === "Number" && l.value === "0") {
112
- let i = l.type === "Dimension" ? {
112
+ let r = l.type === "Dimension" ? {
113
113
  value: Number(l.value),
114
114
  unit: l.unit
115
115
  } : {
116
116
  value: 0,
117
117
  unit: "px"
118
118
  };
119
- e.offsetX ? e.offsetY ? e.blur ? e.spread || (e.spread = i) : e.blur = i : e.offsetY = i : e.offsetX = i;
119
+ e.offsetX ? e.offsetY ? e.blur ? e.spread || (e.spread = r) : e.blur = r : e.offsetY = r : e.offsetX = r;
120
120
  } else if (l.type === "Function") {
121
- if (T.has(l.name)) {
122
- let i = h(r(l));
123
- if (i === null)
121
+ if (Z.has(l.name)) {
122
+ let r = g(i(l));
123
+ if (r === null)
124
124
  return;
125
- e.color = i;
125
+ e.color = r;
126
126
  } else if (l.name.toLowerCase() === "var" && !e.color) {
127
- let i = h(r(l));
128
- if (i === null)
127
+ let r = g(i(l));
128
+ if (r === null)
129
129
  return;
130
- e.color = i;
130
+ e.color = r;
131
131
  }
132
132
  } else if (l.type === "Hash") {
133
- let i = h(r(l));
134
- if (i === null)
133
+ let r = g(i(l));
134
+ if (r === null)
135
135
  return;
136
- e.color = i;
137
- } else l.type === "Operator" && l.value === "," && (y(e), e = x(), s.push(e));
138
- }), y(e), s);
136
+ e.color = r;
137
+ } else l.type === "Operator" && l.value === "," && (L(e), e = O(), s.push(e));
138
+ }), L(e), s);
139
139
  }
140
- const g = {
140
+ const _ = {
141
141
  value: 0,
142
142
  unit: "px"
143
143
  };
144
- function y(n) {
145
- return n.offsetX || (n.offsetX = g), n.offsetY || (n.offsetY = g), n.blur || (n.blur = g), n.spread || (n.spread = g), n.color || (n.color = h("#000")), n;
144
+ function L(n) {
145
+ return n.offsetX || (n.offsetX = _), n.offsetY || (n.offsetY = _), n.blur || (n.blur = _), n.spread || (n.spread = _), n.color || (n.color = g("#000")), n;
146
146
  }
147
- const w = /* @__PURE__ */ new Map([
147
+ const E = /* @__PURE__ */ new Map([
148
148
  ["linear", [0, 0, 1, 1]],
149
149
  ["ease", [0.25, 0.1, 0.25, 1]],
150
150
  ["ease-in", [0.42, 0, 1, 1]],
151
151
  ["ease-out", [0, 0, 0.58, 1]],
152
152
  ["ease-in-out", [0.42, 0, 0.58, 1]]
153
153
  ]);
154
- function xe(n) {
155
- if (n = n.trim().toLowerCase(), w.has(n))
156
- return w.get(n);
154
+ function Ne(n) {
155
+ if (n = n.trim().toLowerCase(), E.has(n))
156
+ return E.get(n);
157
157
  if (n.includes("var("))
158
158
  return null;
159
159
  if (n.startsWith("cubic-bezier(")) {
160
- let t = n.replace("cubic-bezier(", "").replace(")", "").split(",").map((r) => Number(r.trim()));
161
- if (t.length === 4 && t.every((r) => Number.isFinite(r)))
160
+ let t = n.replace("cubic-bezier(", "").replace(")", "").split(",").map((i) => Number(i.trim()));
161
+ if (t.length === 4 && t.every((i) => Number.isFinite(i)))
162
162
  return t;
163
163
  }
164
164
  return null;
165
165
  }
166
- function S(n) {
166
+ function C(n) {
167
167
  return n.replaceAll(/^['"]|['"]$/g, "");
168
168
  }
169
- function ye(n) {
170
- let t = d(n, {
169
+ function Oe(n) {
170
+ if (n.toLowerCase().includes("var("))
171
+ return;
172
+ let t = $(n, {
171
173
  context: "value",
172
174
  positions: !0
173
175
  });
174
- function r(i) {
175
- return i.loc ? n.slice(i.loc.start.offset, i.loc.end.offset) : "";
176
+ function i(r) {
177
+ return r.loc ? n.slice(r.loc.start.offset, r.loc.end.offset) : "";
176
178
  }
177
179
  let e = [];
178
180
  if (!t.children || t.children.size === 0)
179
181
  return e;
180
182
  let s = "", l;
181
- for (let i of t.children) {
182
- if (i.type === "Operator" && i.value === ",") {
183
- e.push(S(s)), s = "", l = i.type;
183
+ for (let r of t.children) {
184
+ if (r.type === "Operator" && r.value === ",") {
185
+ e.push(C(s)), s = "", l = r.type;
184
186
  continue;
185
187
  }
186
- l === "Identifier" && i.type === "Identifier" && (s += " "), s += r(i), l = i.type;
188
+ l === "Identifier" && r.type === "Identifier" && (s += " "), s += i(r), l = r.type;
187
189
  }
188
- return e.push(S(s)), e;
190
+ return e.push(C(s)), e;
189
191
  }
190
- function c(n) {
192
+ function a(n) {
191
193
  if (n === void 0 || typeof n == "number" && isNaN(n))
192
194
  return "0";
193
195
  typeof n != "string" && (n = n.toString());
194
196
  let t = 0;
195
- for (let r of n)
196
- t = (t << 5) - t + r.charCodeAt(0), t |= 0;
197
+ for (let i of n)
198
+ t = (t << 5) - t + i.charCodeAt(0), t |= 0;
197
199
  return (t >>> 0).toString(16);
198
200
  }
199
- function we(n) {
200
- let t = d(n, { context: "value" });
201
+ function Le(n) {
202
+ let t = $(n, { context: "value" });
201
203
  if (t.children === null || t.children.size !== 1) return null;
202
- let r = t.children.first;
203
- switch (r.type) {
204
- case "Dimension":
205
- return {
206
- value: Number(r.value),
207
- unit: r.unit
204
+ let i = t.children.first;
205
+ switch (i.type) {
206
+ case "Dimension": {
207
+ let e = Number(i.value);
208
+ return e === 0 ? 0 : {
209
+ value: e,
210
+ unit: i.unit
208
211
  };
212
+ }
209
213
  case "Number":
210
- return Number(r.value);
214
+ return Number(i.value);
211
215
  case "Percentage":
212
- return Number(r.value) / 100;
216
+ return Number(i.value) / 100;
213
217
  case "Identifier":
214
- if (r.name === "normal")
218
+ if (i.name === "normal")
215
219
  return 1.2;
216
220
  }
217
221
  return null;
218
222
  }
219
- let O = /* @__PURE__ */ new Map([
223
+ let q = /* @__PURE__ */ new Map([
220
224
  ["xx-small", 0.6],
221
225
  ["x-small", 0.75],
222
226
  ["small", 0.89],
@@ -226,199 +230,246 @@ let O = /* @__PURE__ */ new Map([
226
230
  ["xx-large", 2],
227
231
  ["xxx-large", 3]
228
232
  ]);
229
- function Se(n) {
230
- let t = d(n, { context: "value" });
233
+ function Ee(n) {
234
+ let t = $(n, { context: "value" });
231
235
  if (t.children === null || t.children.size !== 1) return null;
232
- let r = t.children.first;
233
- switch (r.type) {
236
+ let i = t.children.first;
237
+ switch (i.type) {
234
238
  case "Dimension": {
235
- if (r.unit === "px" || r.unit === "rem")
236
- return {
237
- value: Number(r.value),
238
- unit: r.unit
239
+ let e = i.unit.toLowerCase();
240
+ if (e === "px" || e === "rem") {
241
+ let s = Number(i.value);
242
+ return s === 0 ? {
243
+ value: 0,
244
+ unit: "px"
245
+ } : {
246
+ value: s,
247
+ unit: e
239
248
  };
249
+ }
240
250
  break;
241
251
  }
242
252
  case "Identifier": {
243
- let e = r.name.toLowerCase();
244
- if (O.has(e))
253
+ let e = i.name.toLowerCase();
254
+ if (q.has(e))
245
255
  return {
246
- value: O.get(e),
256
+ value: q.get(e),
247
257
  unit: "rem"
248
258
  };
259
+ break;
260
+ }
261
+ case "Number": {
262
+ if (Number(i.value) === 0)
263
+ return {
264
+ value: 0,
265
+ unit: "px"
266
+ };
267
+ break;
249
268
  }
250
269
  }
251
270
  return null;
252
271
  }
253
- function je(n) {
254
- let t = W(n);
255
- return Oe(t);
272
+ function Re(n) {
273
+ let t = U(n);
274
+ return Ce(t);
256
275
  }
257
- function f(n) {
276
+ function p(n) {
258
277
  return "uniqueWithLocations" in n ? n.uniqueWithLocations : n.unique;
259
278
  }
260
- function p(n) {
279
+ function m(n) {
261
280
  return Array.isArray(n) ? n.length : n;
262
281
  }
263
- function Oe(n) {
282
+ function Ce(n) {
264
283
  return {
265
284
  color: (() => {
266
- let t = /* @__PURE__ */ Object.create(null), r = f(n.values.colors), e = ve(r);
285
+ let t = /* @__PURE__ */ Object.create(null), i = p(n.values.colors), e = we(i);
267
286
  for (let [s, l] of e)
268
- for (let i of l) {
269
- let m = h(i);
270
- if (m !== null) {
271
- let X = `${de.get(s)}-${c(i)}`, D = n.values.colors.itemsPerContext, P = Object.entries(D).reduce(($, [H, v]) => ((i in v.unique || v.uniqueWithLocations && i in v.uniqueWithLocations) && $.push(H), $), []);
272
- t[X] = {
273
- $type: "color",
274
- $value: m,
275
- $extensions: {
276
- [u]: i,
277
- [a]: p(r[i]),
278
- [be]: P
279
- }
280
- };
287
+ for (let r of l) {
288
+ let f = g(r), w = m(i[r]);
289
+ if (f !== null) {
290
+ let { colorSpace: k, components: F, alpha: B } = f, h = `${ye.get(s)}-${a([k, ...F, B].join(""))}`, G = n.values.colors.itemsPerContext, S = Object.entries(G).reduce((d, [N, b]) => r in b.unique || b.uniqueWithLocations && r in b.uniqueWithLocations ? d.add(N) : d, /* @__PURE__ */ new Set());
291
+ if (t[h]) {
292
+ let d = t[h].$extensions[x];
293
+ t[h].$extensions[x] = Array.from(new Set(d).union(S)), t[h].$extensions[u] += w;
294
+ } else
295
+ t[h] = {
296
+ $type: "color",
297
+ $value: f,
298
+ $extensions: {
299
+ [c]: r,
300
+ [u]: w,
301
+ [x]: Array.from(S)
302
+ }
303
+ };
281
304
  }
282
305
  }
283
306
  return t;
284
307
  })(),
285
308
  font_size: (() => {
286
- let t = /* @__PURE__ */ Object.create(null), r = f(n.values.fontSizes);
287
- for (let e in r) {
288
- let s = `fontSize-${c(e)}`, l = Se(e), i = {
289
- [u]: e,
290
- [a]: p(r[e])
291
- };
292
- l === null ? t[s] = {
293
- $value: e,
294
- $extensions: i
295
- } : t[s] = {
296
- $type: "dimension",
297
- $value: l,
298
- $extensions: i
309
+ let t = /* @__PURE__ */ Object.create(null), i = p(n.values.fontSizes);
310
+ for (let e in i) {
311
+ let s = Ee(e), l = {
312
+ [c]: e,
313
+ [u]: m(i[e])
299
314
  };
315
+ if (s === null) {
316
+ let r = `fontSize-${a(e)}`;
317
+ t[r] = {
318
+ $value: e,
319
+ $extensions: l
320
+ };
321
+ } else {
322
+ let r = `fontSize-${a(s.value.toString() + s.unit)}`;
323
+ t[r] ? t[r].$extensions[u] += l[u] : t[r] = {
324
+ $type: "dimension",
325
+ $value: s,
326
+ $extensions: l
327
+ };
328
+ }
300
329
  }
301
330
  return t;
302
331
  })(),
303
332
  font_family: (() => {
304
- let t = /* @__PURE__ */ Object.create(null), r = f(n.values.fontFamilies);
305
- for (let e in r) {
306
- let s = ye(e), l = `fontFamily-${c(e)}`;
307
- t[l] = {
333
+ let t = /* @__PURE__ */ Object.create(null), i = p(n.values.fontFamilies);
334
+ for (let e in i) {
335
+ let s = Oe(e), l = `fontFamily-${a(e)}`, r = {
336
+ [c]: e,
337
+ [u]: m(i[e])
338
+ };
339
+ s === void 0 ? t[l] = {
340
+ $value: e,
341
+ $extensions: r
342
+ } : t[l] = {
308
343
  $type: "fontFamily",
309
344
  $value: s,
310
- $extensions: {
311
- [u]: e,
312
- [a]: p(r[e])
313
- }
345
+ $extensions: r
314
346
  };
315
347
  }
316
348
  return t;
317
349
  })(),
318
350
  line_height: (() => {
319
- let t = /* @__PURE__ */ Object.create(null), r = f(n.values.lineHeights);
320
- for (let e in r) {
321
- let s = `lineHeight-${c(e)}`, l = we(e), i = {
322
- [u]: e,
323
- [a]: p(r[e])
351
+ let t = /* @__PURE__ */ Object.create(null), i = p(n.values.lineHeights);
352
+ for (let e in i) {
353
+ let s = Le(e), l = {
354
+ [c]: e,
355
+ [u]: m(i[e])
324
356
  };
325
- l === null ? t[s] = {
326
- $value: e,
327
- $extensions: i
328
- } : typeof l == "number" ? t[s] = {
329
- $type: "number",
330
- $value: l,
331
- $extensions: i
332
- } : typeof l == "object" && (l.unit === "px" || l.unit === "rem" ? t[s] = {
333
- $type: "dimension",
334
- $value: l,
335
- $extensions: i
336
- } : t[s] = {
337
- $value: e,
338
- $extensions: i
339
- });
357
+ if (s === null) {
358
+ let r = `lineHeight-${a(e)}`;
359
+ t[r] = {
360
+ $value: e,
361
+ $extensions: l
362
+ };
363
+ } else if (typeof s == "number") {
364
+ let r = `lineHeight-${a(s)}`;
365
+ t[r] ? t[r].$extensions[u] += l[u] : t[r] = {
366
+ $type: "number",
367
+ $value: s,
368
+ $extensions: l
369
+ };
370
+ } else if (typeof s == "object")
371
+ if (s.unit === "px" || s.unit === "rem") {
372
+ let r = `lineHeight-${a(s.value.toString() + s.unit)}`;
373
+ t[r] ? t[r].$extensions[u] += l[u] : t[r] = {
374
+ $type: "dimension",
375
+ $value: s,
376
+ $extensions: l
377
+ };
378
+ } else {
379
+ let r = `lineHeight-${a(e)}`;
380
+ t[r] = {
381
+ $value: e,
382
+ $extensions: l
383
+ };
384
+ }
340
385
  }
341
386
  return t;
342
387
  })(),
343
388
  gradient: (() => {
344
- let t = /* @__PURE__ */ Object.create(null), r = f(n.values.gradients);
345
- for (let e in r)
346
- t[`gradient-${c(e)}`] = {
389
+ let t = /* @__PURE__ */ Object.create(null), i = p(n.values.gradients);
390
+ for (let e in i)
391
+ t[`gradient-${a(e)}`] = {
347
392
  $value: e,
348
393
  $extensions: {
349
- [u]: e,
350
- [a]: p(r[e])
394
+ [c]: e,
395
+ [u]: m(i[e])
351
396
  }
352
397
  };
353
398
  return t;
354
399
  })(),
355
400
  box_shadow: (() => {
356
- let t = /* @__PURE__ */ Object.create(null), r = f(n.values.boxShadows);
357
- for (let e in r) {
358
- let s = `boxShadow-${c(e)}`, l = $e(e), i = {
359
- [u]: e,
360
- [a]: p(r[e])
401
+ let t = /* @__PURE__ */ Object.create(null), i = p(n.values.boxShadows);
402
+ for (let e in i) {
403
+ let s = `boxShadow-${a(e)}`, l = Se(e), r = {
404
+ [c]: e,
405
+ [u]: m(i[e])
361
406
  };
362
407
  l === null ? t[s] = {
363
408
  $value: e,
364
- $extensions: i
409
+ $extensions: r
365
410
  } : t[s] = {
366
411
  $type: "shadow",
367
412
  $value: l.length === 1 ? l[0] : l,
368
- $extensions: i
413
+ $extensions: r
369
414
  };
370
415
  }
371
416
  return t;
372
417
  })(),
373
418
  radius: (() => {
374
- let t = /* @__PURE__ */ Object.create(null), r = f(n.values.borderRadiuses);
375
- for (let e in r) {
376
- let s = `radius-${c(e)}`;
419
+ let t = /* @__PURE__ */ Object.create(null), i = p(n.values.borderRadiuses);
420
+ for (let e in i) {
421
+ let s = `radius-${a(e)}`;
377
422
  t[s] = {
378
423
  $value: e,
379
424
  $extensions: {
380
- [u]: e,
381
- [a]: p(r[e])
425
+ [c]: e,
426
+ [u]: m(i[e])
382
427
  }
383
428
  };
384
429
  }
385
430
  return t;
386
431
  })(),
387
432
  duration: (() => {
388
- let t = /* @__PURE__ */ Object.create(null), r = f(n.values.animations.durations);
389
- for (let e in r) {
390
- let s = k(e), l = s < Number.MAX_SAFE_INTEGER - 1, i = c(s.toString()), m = {
391
- [u]: e,
392
- [a]: p(r[e])
393
- };
394
- l ? t[`duration-${i}`] = {
395
- $type: "duration",
396
- $value: {
397
- value: s,
398
- unit: "ms"
399
- },
400
- $extensions: m
401
- } : t[`duration-${i}`] = {
402
- $value: e,
403
- $extensions: m
433
+ let t = /* @__PURE__ */ Object.create(null), i = p(n.values.animations.durations);
434
+ for (let e in i) {
435
+ let s = V(e), l = s < Number.MAX_SAFE_INTEGER - 1, r = {
436
+ [c]: e,
437
+ [u]: m(i[e])
404
438
  };
439
+ if (l) {
440
+ let f = `duration-${a(s.toString())}`;
441
+ t[f] ? t[f].$extensions[u] += r[u] : t[f] = {
442
+ $type: "duration",
443
+ $value: {
444
+ value: s,
445
+ unit: "ms"
446
+ },
447
+ $extensions: r
448
+ };
449
+ } else {
450
+ let f = `duration-${a("invalid" + s.toString())}`;
451
+ t[f] = {
452
+ $value: e,
453
+ $extensions: r
454
+ };
455
+ }
405
456
  }
406
457
  return t;
407
458
  })(),
408
459
  easing: (() => {
409
- let t = /* @__PURE__ */ Object.create(null), r = f(n.values.animations.timingFunctions);
410
- for (let e in r) {
411
- let s = `easing-${c(e)}`, l = xe(e), i = {
412
- [u]: e,
413
- [a]: p(r[e])
460
+ let t = /* @__PURE__ */ Object.create(null), i = p(n.values.animations.timingFunctions);
461
+ for (let e in i) {
462
+ let s = `easing-${a(e)}`, l = Ne(e), r = {
463
+ [c]: e,
464
+ [u]: m(i[e])
414
465
  };
415
466
  l !== null ? t[s] = {
416
467
  $value: l,
417
468
  $type: "cubicBezier",
418
- $extensions: i
469
+ $extensions: r
419
470
  } : t[s] = {
420
471
  $value: e,
421
- $extensions: i
472
+ $extensions: r
422
473
  };
423
474
  }
424
475
  return t;
@@ -426,6 +477,6 @@ function Oe(n) {
426
477
  };
427
478
  }
428
479
  export {
429
- Oe as analysis_to_tokens,
430
- je as css_to_tokens
480
+ Ce as analysis_to_tokens,
481
+ Re as css_to_tokens
431
482
  };
package/dist/destructure-font-family.d.ts CHANGED
@@ -1 +1 @@
1
- export declare function destructure_font_family(value: string): string[];
1
+ export declare function destructure_font_family(value: string): string[] | undefined;
package/dist/index.d.ts CHANGED
@@ -1,16 +1,16 @@
1
1
  import { CubicBezierToken, DimensionToken, DurationToken, FontFamilyToken, NumberToken, UnparsedToken, ColorToken, CssAnalysis, ShadowToken } from './types.js';
2
2
  export declare function css_to_tokens(css: string): Tokens;
3
3
  type TokenID = string;
4
- type Tokens = {
4
+ export type Tokens = {
5
5
  color: Record<TokenID, ColorToken>;
6
- font_size: Record<TokenID, UnparsedToken | DimensionToken>;
7
- font_family: Record<TokenID, FontFamilyToken>;
8
- line_height: Record<TokenID, UnparsedToken | DimensionToken | NumberToken>;
6
+ font_size: Record<TokenID, DimensionToken | UnparsedToken>;
7
+ font_family: Record<TokenID, FontFamilyToken | UnparsedToken>;
8
+ line_height: Record<TokenID, DimensionToken | NumberToken | UnparsedToken>;
9
9
  gradient: Record<TokenID, UnparsedToken>;
10
10
  box_shadow: Record<TokenID, ShadowToken | UnparsedToken>;
11
11
  radius: Record<TokenID, UnparsedToken>;
12
12
  duration: Record<TokenID, DurationToken | UnparsedToken>;
13
- easing: Record<TokenID, UnparsedToken | CubicBezierToken>;
13
+ easing: Record<TokenID, CubicBezierToken | UnparsedToken>;
14
14
  };
15
15
  export declare function analysis_to_tokens(analysis: CssAnalysis): Tokens;
16
16
  export {};
package/package.json CHANGED
@@ -1,49 +1,49 @@
1
1
  {
2
- "name": "@projectwallace/css-design-tokens",
3
- "description": "Generate spec-compliant Design Tokens from CSS.",
4
- "version": "0.7.1",
5
- "license": "EUPL-1.2",
6
- "author": "Bart Veneman <bart@projectwallace.com>",
7
- "repository": {
8
- "type": "git",
9
- "url": "git+https://github.com/projectwallace/css-design-tokens.git"
10
- },
11
- "homepage": "https://github.com/projectwallace/css-design-tokens",
12
- "issues": "https://github.com/projectwallace/css-design-tokens/issues",
13
- "keywords": [
14
- "css",
15
- "design-tokens",
16
- "spec"
17
- ],
18
- "type": "module",
19
- "files": [
20
- "dist"
21
- ],
22
- "main": "dist/css-design-tokens.js",
23
- "types": "dist/index.d.ts",
24
- "exports": {
25
- "types": "./dist/index.d.ts",
26
- "default": "./dist/css-design-tokens.js"
27
- },
28
- "engines": {
29
- "node": ">=18"
30
- },
31
- "scripts": {
32
- "test": "vitest run",
33
- "build": "vite build",
34
- "check": "tsc --noEmit"
35
- },
36
- "dependencies": {
37
- "@projectwallace/css-analyzer": "^7.6.0",
38
- "color-sorter": "^7.0.0",
39
- "colorjs.io": "^0.6.0-alpha.1",
40
- "css-time-sort": "^3.0.0",
41
- "css-tree": "^3.1.0"
42
- },
43
- "devDependencies": {
44
- "@types/css-tree": "^2.3.10",
45
- "vite": "^7.0.4",
46
- "vite-plugin-dts": "^4.5.4",
47
- "vitest": "^3.2.4"
48
- }
49
- }
2
+ "name": "@projectwallace/css-design-tokens",
3
+ "description": "Generate spec-compliant Design Tokens from CSS.",
4
+ "version": "0.8.1",
5
+ "license": "EUPL-1.2",
6
+ "author": "Bart Veneman <bart@projectwallace.com>",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/projectwallace/css-design-tokens.git"
10
+ },
11
+ "homepage": "https://github.com/projectwallace/css-design-tokens",
12
+ "issues": "https://github.com/projectwallace/css-design-tokens/issues",
13
+ "keywords": [
14
+ "css",
15
+ "design-tokens",
16
+ "spec"
17
+ ],
18
+ "type": "module",
19
+ "files": [
20
+ "dist"
21
+ ],
22
+ "main": "dist/css-design-tokens.js",
23
+ "types": "dist/index.d.ts",
24
+ "exports": {
25
+ "types": "./dist/index.d.ts",
26
+ "default": "./dist/css-design-tokens.js"
27
+ },
28
+ "engines": {
29
+ "node": ">=22"
30
+ },
31
+ "scripts": {
32
+ "test": "vitest run",
33
+ "build": "vite build",
34
+ "check": "tsc --noEmit"
35
+ },
36
+ "dependencies": {
37
+ "@projectwallace/css-analyzer": "^7.6.0",
38
+ "color-sorter": "^7.0.0",
39
+ "colorjs.io": "^0.6.0-alpha.1",
40
+ "css-time-sort": "^3.0.0",
41
+ "css-tree": "^3.1.0"
42
+ },
43
+ "devDependencies": {
44
+ "@types/css-tree": "^2.3.10",
45
+ "vite": "^7.0.4",
46
+ "vite-plugin-dts": "^4.5.4",
47
+ "vitest": "^3.2.4"
48
+ }
49
+ }
package/readme.md CHANGED
@@ -169,6 +169,7 @@ let font_family = {
169
169
  }
170
170
  },
171
171
  'fontFamily-582e015a': {
172
+ $type: 'fontFamily',
172
173
  $value: ['Arial Black', 'sans-serif'],
173
174
  $extensions: {
174
175
  'com.projectwallace.css-authored-as': 'Arial Black, sans-serif',