@projectwallace/css-design-tokens 0.7.1 → 0.8.0

package/dist/css-design-tokens.js

@@ -1,49 +1,44 @@
-import { cssKeywords as Y, colorKeywords as F, namedColors as B, systemColors as G, colorFunctions as T, analyze as W } from "@projectwallace/css-analyzer";
-import { convert as k } from "css-time-sort";
-import { convert as K } from "color-sorter";
-import { parse as d } from "css-tree";
-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";
-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([
-  [N, "white"],
-  [L, "black"],
-  [E, "grey"],
-  [b, "red"],
-  [q, "orange"],
-  [C, "yellow"],
-  [j, "green"],
-  [z, "cyan"],
-  [A, "blue"],
-  [I, "magenta"],
-  [R, "pink"],
-  [_, "unknown"]
+import { cssKeywords as T, colorKeywords as W, namedColors as K, systemColors as M, colorFunctions as Z, analyze as U } from "@projectwallace/css-analyzer";
+import { convert as V } from "css-time-sort";
+import { convert as J } from "color-sorter";
+import { parse as $ } from "css-tree";
+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 ce, P3 as fe, 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";
+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([
+  [A, "white"],
+  [j, "black"],
+  [z, "grey"],
+  [y, "red"],
+  [I, "orange"],
+  [R, "yellow"],
+  [H, "green"],
+  [X, "cyan"],
+  [D, "blue"],
+  [P, "magenta"],
+  [Y, "pink"],
+  [v, "unknown"]
 ]);
-function ve(n) {
+function we(r) {
   let t = /* @__PURE__ */ new Map();
-  for (let r in n) {
-    let e = _;
-    if (!r.includes("var(") && !r.includes("calc(")) {
-      let s = K(r), { hue: l, saturation: i, lightness: m } = s;
-      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;
+  for (let n in r) {
+    let e = v;
+    if (!n.includes("var(") && !n.includes("calc(")) {
+      let s = J(n), { hue: l, saturation: i, lightness: c } = s;
+      i < 10 && c === 100 ? e = A : i < 10 && c === 0 ? e = j : i < 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;
     }
-    t.has(e) ? t.get(e).push(r) : t.set(e, [r]);
+    t.has(e) ? t.get(e).push(n) : t.set(e, [n]);
   }
   return Array.from(t).sort(
-    (r, e) => r[0] === _ || e[0] === _ ? -1 : e[1].length - r[1].length
+    (n, e) => n[0] === v || e[0] === v ? -1 : e[1].length - n[1].length
   );
 }
-const u = "com.projectwallace.css-authored-as", a = "com.projectwallace.usage-count", be = "com.projectwallace.css-properties";
-o.register(M);
-o.register(Z);
-o.register(U);
-o.register(V);
-o.register(J);
+const f = "com.projectwallace.css-authored-as", u = "com.projectwallace.usage-count", x = "com.projectwallace.css-properties";
 o.register(Q);
 o.register(ee);
 o.register(te);
 o.register(re);
 o.register(ne);
-o.register(le);
 o.register(ie);
+o.register(le);
 o.register(se);
 o.register(oe);
 o.register(ue);
@@ -52,34 +47,39 @@ o.register(ce);
 o.register(fe);
 o.register(pe);
 o.register(me);
-o.register(he);
 o.register(ge);
-function h(n) {
-  let t = n.toLowerCase();
+o.register(he);
+o.register(de);
+o.register(_e);
+o.register(ve);
+o.register($e);
+o.register(be);
+function g(r) {
+  let t = r.toLowerCase();
   if (t === "transparent")
     return {
       colorSpace: "srgb",
       components: [0, 0, 0],
       alpha: 0
     };
-  if (Y.has(t) || F.has(t) || t.includes("var("))
+  if (T.has(t) || W.has(t) || t.includes("var("))
     return null;
   try {
-    let r = _e(n), [e, s, l] = r.coords;
+    let n = xe(r), [e, s, l] = n.coords;
     return {
-      colorSpace: r.spaceId,
+      colorSpace: n.spaceId,
       components: [
         e ?? "none",
         s ?? "none",
         l ?? "none"
       ],
-      alpha: r.alpha ?? 0
+      alpha: n.alpha ?? 0
     };
   } catch {
     return null;
   }
 }
-function x() {
+function O() {
   return {
     color: void 0,
     offsetX: void 0,
@@ -89,21 +89,21 @@ function x() {
     inset: !1
   };
 }
-function $e(n) {
-  let t = d(n, {
+function Se(r) {
+  let t = $(r, {
     context: "value",
     positions: !0
   });
-  function r(l) {
-    return l.loc ? n.slice(l.loc.start.offset, l.loc.end.offset) : "";
+  function n(l) {
+    return l.loc ? r.slice(l.loc.start.offset, l.loc.end.offset) : "";
   }
-  let e = x(), s = [e];
+  let e = O(), s = [e];
   return t.children.size < 2 ? null : (t.children.forEach((l) => {
     if (l.type === "Identifier") {
       if (l.name.toLowerCase() === "inset")
         e.inset = !0;
-      else if (B.has(l.name) || G.has(l.name)) {
-        let i = h(l.name);
+      else if (K.has(l.name) || M.has(l.name)) {
+        let i = g(l.name);
         if (i === null)
           return;
         e.color = i;
@@ -118,61 +118,61 @@ function $e(n) {
       };
       e.offsetX ? e.offsetY ? e.blur ? e.spread || (e.spread = i) : e.blur = i : e.offsetY = i : e.offsetX = i;
     } else if (l.type === "Function") {
-      if (T.has(l.name)) {
-        let i = h(r(l));
+      if (Z.has(l.name)) {
+        let i = g(n(l));
         if (i === null)
           return;
         e.color = i;
       } else if (l.name.toLowerCase() === "var" && !e.color) {
-        let i = h(r(l));
+        let i = g(n(l));
         if (i === null)
           return;
         e.color = i;
       }
     } else if (l.type === "Hash") {
-      let i = h(r(l));
+      let i = g(n(l));
       if (i === null)
         return;
       e.color = i;
-    } else l.type === "Operator" && l.value === "," && (y(e), e = x(), s.push(e));
-  }), y(e), s);
+    } else l.type === "Operator" && l.value === "," && (L(e), e = O(), s.push(e));
+  }), L(e), s);
 }
-const g = {
+const _ = {
   value: 0,
   unit: "px"
 };
-function y(n) {
-  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;
+function L(r) {
+  return r.offsetX || (r.offsetX = _), r.offsetY || (r.offsetY = _), r.blur || (r.blur = _), r.spread || (r.spread = _), r.color || (r.color = g("#000")), r;
 }
-const w = /* @__PURE__ */ new Map([
+const E = /* @__PURE__ */ new Map([
   ["linear", [0, 0, 1, 1]],
   ["ease", [0.25, 0.1, 0.25, 1]],
   ["ease-in", [0.42, 0, 1, 1]],
   ["ease-out", [0, 0, 0.58, 1]],
   ["ease-in-out", [0.42, 0, 0.58, 1]]
 ]);
-function xe(n) {
-  if (n = n.trim().toLowerCase(), w.has(n))
-    return w.get(n);
-  if (n.includes("var("))
+function Ne(r) {
+  if (r = r.trim().toLowerCase(), E.has(r))
+    return E.get(r);
+  if (r.includes("var("))
     return null;
-  if (n.startsWith("cubic-bezier(")) {
-    let t = n.replace("cubic-bezier(", "").replace(")", "").split(",").map((r) => Number(r.trim()));
-    if (t.length === 4 && t.every((r) => Number.isFinite(r)))
+  if (r.startsWith("cubic-bezier(")) {
+    let t = r.replace("cubic-bezier(", "").replace(")", "").split(",").map((n) => Number(n.trim()));
+    if (t.length === 4 && t.every((n) => Number.isFinite(n)))
       return t;
   }
   return null;
 }
-function S(n) {
-  return n.replaceAll(/^['"]|['"]$/g, "");
+function q(r) {
+  return r.replaceAll(/^['"]|['"]$/g, "");
 }
-function ye(n) {
-  let t = d(n, {
+function Oe(r) {
+  let t = $(r, {
     context: "value",
     positions: !0
   });
-  function r(i) {
-    return i.loc ? n.slice(i.loc.start.offset, i.loc.end.offset) : "";
+  function n(i) {
+    return i.loc ? r.slice(i.loc.start.offset, i.loc.end.offset) : "";
   }
   let e = [];
   if (!t.children || t.children.size === 0)
@@ -180,43 +180,45 @@ function ye(n) {
   let s = "", l;
   for (let i of t.children) {
     if (i.type === "Operator" && i.value === ",") {
-      e.push(S(s)), s = "", l = i.type;
+      e.push(q(s)), s = "", l = i.type;
       continue;
     }
-    l === "Identifier" && i.type === "Identifier" && (s += " "), s += r(i), l = i.type;
+    l === "Identifier" && i.type === "Identifier" && (s += " "), s += n(i), l = i.type;
   }
-  return e.push(S(s)), e;
+  return e.push(q(s)), e;
 }
-function c(n) {
-  if (n === void 0 || typeof n == "number" && isNaN(n))
+function a(r) {
+  if (r === void 0 || typeof r == "number" && isNaN(r))
     return "0";
-  typeof n != "string" && (n = n.toString());
+  typeof r != "string" && (r = r.toString());
   let t = 0;
-  for (let r of n)
-    t = (t << 5) - t + r.charCodeAt(0), t |= 0;
+  for (let n of r)
+    t = (t << 5) - t + n.charCodeAt(0), t |= 0;
   return (t >>> 0).toString(16);
 }
-function we(n) {
-  let t = d(n, { context: "value" });
+function Le(r) {
+  let t = $(r, { context: "value" });
   if (t.children === null || t.children.size !== 1) return null;
-  let r = t.children.first;
-  switch (r.type) {
-    case "Dimension":
-      return {
-        value: Number(r.value),
-        unit: r.unit
+  let n = t.children.first;
+  switch (n.type) {
+    case "Dimension": {
+      let e = Number(n.value);
+      return e === 0 ? 0 : {
+        value: e,
+        unit: n.unit
       };
+    }
     case "Number":
-      return Number(r.value);
+      return Number(n.value);
     case "Percentage":
-      return Number(r.value) / 100;
+      return Number(n.value) / 100;
     case "Identifier":
-      if (r.name === "normal")
+      if (n.name === "normal")
         return 1.2;
   }
   return null;
 }
-let O = /* @__PURE__ */ new Map([
+let C = /* @__PURE__ */ new Map([
   ["xx-small", 0.6],
   ["x-small", 0.75],
   ["small", 0.89],
@@ -226,138 +228,176 @@ let O = /* @__PURE__ */ new Map([
   ["xx-large", 2],
   ["xxx-large", 3]
 ]);
-function Se(n) {
-  let t = d(n, { context: "value" });
+function Ee(r) {
+  let t = $(r, { context: "value" });
   if (t.children === null || t.children.size !== 1) return null;
-  let r = t.children.first;
-  switch (r.type) {
+  let n = t.children.first;
+  switch (n.type) {
     case "Dimension": {
-      if (r.unit === "px" || r.unit === "rem")
-        return {
-          value: Number(r.value),
-          unit: r.unit
+      let e = n.unit.toLowerCase();
+      if (e === "px" || e === "rem") {
+        let s = Number(n.value);
+        return s === 0 ? {
+          value: 0,
+          unit: "px"
+        } : {
+          value: s,
+          unit: e
         };
+      }
       break;
     }
     case "Identifier": {
-      let e = r.name.toLowerCase();
-      if (O.has(e))
+      let e = n.name.toLowerCase();
+      if (C.has(e))
         return {
-          value: O.get(e),
+          value: C.get(e),
           unit: "rem"
         };
+      break;
+    }
+    case "Number": {
+      if (Number(n.value) === 0)
+        return {
+          value: 0,
+          unit: "px"
+        };
+      break;
     }
   }
   return null;
 }
-function je(n) {
-  let t = W(n);
-  return Oe(t);
+function Re(r) {
+  let t = U(r);
+  return qe(t);
 }
-function f(n) {
-  return "uniqueWithLocations" in n ? n.uniqueWithLocations : n.unique;
+function p(r) {
+  return "uniqueWithLocations" in r ? r.uniqueWithLocations : r.unique;
 }
-function p(n) {
-  return Array.isArray(n) ? n.length : n;
+function m(r) {
+  return Array.isArray(r) ? r.length : r;
 }
-function Oe(n) {
+function qe(r) {
   return {
     color: (() => {
-      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.colors), e = ve(r);
+      let t = /* @__PURE__ */ Object.create(null), n = p(r.values.colors), e = we(n);
       for (let [s, l] of e)
         for (let i of l) {
-          let m = h(i);
-          if (m !== null) {
-            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), $), []);
-            t[X] = {
-              $type: "color",
-              $value: m,
-              $extensions: {
-                [u]: i,
-                [a]: p(r[i]),
-                [be]: P
-              }
-            };
+          let c = g(i), w = m(n[i]);
+          if (c !== null) {
+            let { colorSpace: k, components: F, alpha: B } = c, h = `${ye.get(s)}-${a([k, ...F, B].join(""))}`, G = r.values.colors.itemsPerContext, S = Object.entries(G).reduce((d, [N, b]) => i in b.unique || b.uniqueWithLocations && i in b.uniqueWithLocations ? d.add(N) : d, /* @__PURE__ */ new Set());
+            if (t[h]) {
+              let d = t[h].$extensions[x];
+              t[h].$extensions[x] = Array.from(new Set(d).union(S)), t[h].$extensions[u] += w;
+            } else
+              t[h] = {
+                $type: "color",
+                $value: c,
+                $extensions: {
+                  [f]: i,
+                  [u]: w,
+                  [x]: Array.from(S)
+                }
+              };
           }
         }
       return t;
     })(),
     font_size: (() => {
-      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.fontSizes);
-      for (let e in r) {
-        let s = `fontSize-${c(e)}`, l = Se(e), i = {
-          [u]: e,
-          [a]: p(r[e])
-        };
-        l === null ? t[s] = {
-          $value: e,
-          $extensions: i
-        } : t[s] = {
-          $type: "dimension",
-          $value: l,
-          $extensions: i
+      let t = /* @__PURE__ */ Object.create(null), n = p(r.values.fontSizes);
+      for (let e in n) {
+        let s = Ee(e), l = {
+          [f]: e,
+          [u]: m(n[e])
         };
+        if (s === null) {
+          let i = `fontSize-${a(e)}`;
+          t[i] = {
+            $value: e,
+            $extensions: l
+          };
+        } else {
+          let i = `fontSize-${a(s.value.toString() + s.unit)}`;
+          t[i] ? t[i].$extensions[u] += l[u] : t[i] = {
+            $type: "dimension",
+            $value: s,
+            $extensions: l
+          };
+        }
       }
       return t;
     })(),
     font_family: (() => {
-      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.fontFamilies);
-      for (let e in r) {
-        let s = ye(e), l = `fontFamily-${c(e)}`;
+      let t = /* @__PURE__ */ Object.create(null), n = p(r.values.fontFamilies);
+      for (let e in n) {
+        let s = Oe(e), l = `fontFamily-${a(e)}`;
         t[l] = {
           $type: "fontFamily",
           $value: s,
           $extensions: {
-            [u]: e,
-            [a]: p(r[e])
+            [f]: e,
+            [u]: m(n[e])
           }
         };
       }
       return t;
     })(),
     line_height: (() => {
-      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.lineHeights);
-      for (let e in r) {
-        let s = `lineHeight-${c(e)}`, l = we(e), i = {
-          [u]: e,
-          [a]: p(r[e])
+      let t = /* @__PURE__ */ Object.create(null), n = p(r.values.lineHeights);
+      for (let e in n) {
+        let s = Le(e), l = {
+          [f]: e,
+          [u]: m(n[e])
         };
-        l === null ? t[s] = {
-          $value: e,
-          $extensions: i
-        } : typeof l == "number" ? t[s] = {
-          $type: "number",
-          $value: l,
-          $extensions: i
-        } : typeof l == "object" && (l.unit === "px" || l.unit === "rem" ? t[s] = {
-          $type: "dimension",
-          $value: l,
-          $extensions: i
-        } : t[s] = {
-          $value: e,
-          $extensions: i
-        });
+        if (s === null) {
+          let i = `lineHeight-${a(e)}`;
+          t[i] = {
+            $value: e,
+            $extensions: l
+          };
+        } else if (typeof s == "number") {
+          let i = `lineHeight-${a(s)}`;
+          t[i] ? t[i].$extensions[u] += l[u] : t[i] = {
+            $type: "number",
+            $value: s,
+            $extensions: l
+          };
+        } else if (typeof s == "object")
+          if (s.unit === "px" || s.unit === "rem") {
+            let i = `lineHeight-${a(s.value.toString() + s.unit)}`;
+            t[i] ? t[i].$extensions[u] += l[u] : t[i] = {
+              $type: "dimension",
+              $value: s,
+              $extensions: l
+            };
+          } else {
+            let i = `lineHeight-${a(e)}`;
+            t[i] = {
+              $value: e,
+              $extensions: l
+            };
+          }
       }
       return t;
     })(),
     gradient: (() => {
-      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.gradients);
-      for (let e in r)
-        t[`gradient-${c(e)}`] = {
+      let t = /* @__PURE__ */ Object.create(null), n = p(r.values.gradients);
+      for (let e in n)
+        t[`gradient-${a(e)}`] = {
           $value: e,
           $extensions: {
-            [u]: e,
-            [a]: p(r[e])
+            [f]: e,
+            [u]: m(n[e])
           }
         };
       return t;
     })(),
     box_shadow: (() => {
-      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.boxShadows);
-      for (let e in r) {
-        let s = `boxShadow-${c(e)}`, l = $e(e), i = {
-          [u]: e,
-          [a]: p(r[e])
+      let t = /* @__PURE__ */ Object.create(null), n = p(r.values.boxShadows);
+      for (let e in n) {
+        let s = `boxShadow-${a(e)}`, l = Se(e), i = {
+          [f]: e,
+          [u]: m(n[e])
         };
         l === null ? t[s] = {
           $value: e,
@@ -371,46 +411,52 @@ function Oe(n) {
       return t;
     })(),
     radius: (() => {
-      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.borderRadiuses);
-      for (let e in r) {
-        let s = `radius-${c(e)}`;
+      let t = /* @__PURE__ */ Object.create(null), n = p(r.values.borderRadiuses);
+      for (let e in n) {
+        let s = `radius-${a(e)}`;
         t[s] = {
           $value: e,
           $extensions: {
-            [u]: e,
-            [a]: p(r[e])
+            [f]: e,
+            [u]: m(n[e])
           }
         };
       }
       return t;
     })(),
     duration: (() => {
-      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.animations.durations);
-      for (let e in r) {
-        let s = k(e), l = s < Number.MAX_SAFE_INTEGER - 1, i = c(s.toString()), m = {
-          [u]: e,
-          [a]: p(r[e])
-        };
-        l ? t[`duration-${i}`] = {
-          $type: "duration",
-          $value: {
-            value: s,
-            unit: "ms"
-          },
-          $extensions: m
-        } : t[`duration-${i}`] = {
-          $value: e,
-          $extensions: m
+      let t = /* @__PURE__ */ Object.create(null), n = p(r.values.animations.durations);
+      for (let e in n) {
+        let s = V(e), l = s < Number.MAX_SAFE_INTEGER - 1, i = {
+          [f]: e,
+          [u]: m(n[e])
         };
+        if (l) {
+          let c = `duration-${a(s.toString())}`;
+          t[c] ? t[c].$extensions[u] += i[u] : t[c] = {
+            $type: "duration",
+            $value: {
+              value: s,
+              unit: "ms"
+            },
+            $extensions: i
+          };
+        } else {
+          let c = `duration-${a("invalid" + s.toString())}`;
+          t[c] = {
+            $value: e,
+            $extensions: i
+          };
+        }
       }
       return t;
     })(),
     easing: (() => {
-      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.animations.timingFunctions);
-      for (let e in r) {
-        let s = `easing-${c(e)}`, l = xe(e), i = {
-          [u]: e,
-          [a]: p(r[e])
+      let t = /* @__PURE__ */ Object.create(null), n = p(r.values.animations.timingFunctions);
+      for (let e in n) {
+        let s = `easing-${a(e)}`, l = Ne(e), i = {
+          [f]: e,
+          [u]: m(n[e])
         };
         l !== null ? t[s] = {
           $value: l,
@@ -426,6 +472,6 @@ function Oe(n) {
   };
 }
 export {
-  Oe as analysis_to_tokens,
-  je as css_to_tokens
+  qe as analysis_to_tokens,
+  Re as css_to_tokens
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@projectwallace/css-design-tokens",
   "description": "Generate spec-compliant Design Tokens from CSS.",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "license": "EUPL-1.2",
   "author": "Bart Veneman <bart@projectwallace.com>",
   "repository": {
@@ -26,7 +26,7 @@
     "default": "./dist/css-design-tokens.js"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=22"
   },
   "scripts": {
     "test": "vitest run",