@styleframe/transpiler 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @styleframe/transpiler
 
+## 3.3.0
+
+### Minor Changes
+
+- [#221](https://github.com/styleframe-dev/styleframe/pull/221) [`6d406c2`](https://github.com/styleframe-dev/styleframe/commit/6d406c289b39c666a3fb7468aa3ec08f5a6d316b) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add `treeshake` option to remove unused variables from CSS output.
+
+  `root._usage` now tracks both `variables` and `utilities` referenced during config execution and scanner registration. The transpiler's new `treeshake: true` option filters `root.variables` and theme variables down to only those present in `_usage.variables`. The plugin enables treeshaking by default when generating global CSS.
+
+### Patch Changes
+
+- Updated dependencies [[`6d406c2`](https://github.com/styleframe-dev/styleframe/commit/6d406c289b39c666a3fb7468aa3ec08f5a6d316b)]:
+  - @styleframe/core@3.5.0
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/transpiler.d.ts

@@ -11,9 +11,9 @@ export declare function addIndentToLine(line: string): string;
 /**
  * Consumes any token instance and returns the CSS string representation
  */
-export declare function consumeCSS(instance: unknown, options: StyleframeOptions): string;
+export declare function consumeCSS(instance: unknown, options: StyleframeOptions, context?: TranspileContext): string;
 
-export declare type ConsumeFunction = (instance: unknown, options: StyleframeOptions) => string;
+export declare type ConsumeFunction = (instance: unknown, options: StyleframeOptions, context?: TranspileContext) => string;
 
 /**
  * Consumes any token instance and returns the TS string representation
@@ -51,10 +51,17 @@ export declare function toCamelCase<S extends string>(str: S): CamelCase<S>;
 
 export declare function toKebabCase<S extends string>(str: S): KebabCase<S>;
 
-export declare function transpile(instance: Styleframe, { type, consumers, }?: TranspileOptions): Promise<Output>;
+export declare function transpile(instance: Styleframe, { type, treeshake, scanner, consumers, }?: TranspileOptions): Promise<Output>;
+
+export declare type TranspileContext = {
+    treeshake?: boolean;
+    scanner?: boolean;
+};
 
 export declare type TranspileOptions = {
     type?: "css" | "ts" | "dts" | "all";
+    treeshake?: boolean;
+    scanner?: boolean;
     consumers?: {
         css: ConsumeFunction;
         ts: ConsumeFunction;

package/dist/transpiler.js

@@ -1,38 +1,38 @@
-const ke = "	", P = ["charset", "import", "namespace"], I = ["layer"];
+const Me = "	", L = ["charset", "import", "namespace"], I = ["layer"];
 function M(e) {
   return typeof e == "object" && e !== null;
 }
-function h(e, t) {
+function g(e, t) {
   return M(e) && "type" in e && e.type === t;
 }
-function k(e) {
-  return h(e, "variable");
-}
 function V(e) {
-  return h(e, "reference");
-}
-function S(e) {
-  return h(e, "selector");
+  return g(e, "variable");
 }
 function K(e) {
-  return h(e, "at-rule");
+  return g(e, "reference");
+}
+function S(e) {
+  return g(e, "selector");
 }
 function q(e) {
-  return h(e, "utility");
+  return g(e, "at-rule");
 }
 function z(e) {
-  return h(e, "css");
+  return g(e, "utility");
 }
 function H(e) {
-  return h(e, "theme");
+  return g(e, "css");
 }
-function N(e) {
-  return h(e, "root");
+function Q(e) {
+  return g(e, "theme");
 }
-function _(e) {
-  return h(e, "recipe");
+function O(e) {
+  return g(e, "root");
 }
-const Q = ({
+function w(e) {
+  return g(e, "recipe");
+}
+const T = ({
   name: e,
   value: t,
   modifiers: r
@@ -41,7 +41,7 @@ const Q = ({
   e,
   ...t === "default" ? [] : [t]
 ].filter(Boolean).join(":")}`;
-function x(e) {
+function $(e) {
   return e.charAt(0).toUpperCase() + e.slice(1);
 }
 function J(e) {
@@ -61,138 +61,138 @@ function Z(e) {
   if (e = e || {}, e.circular)
     return W(e);
   const t = /* @__PURE__ */ new Map();
-  if (t.set(Date, (s) => new Date(s)), t.set(
+  if (t.set(Date, (c) => new Date(c)), t.set(
     Map,
-    (s, a) => new Map(n(Array.from(s), a))
+    (c, a) => new Map(o(Array.from(c), a))
   ), t.set(
     Set,
-    (s, a) => new Set(n(Array.from(s), a))
+    (c, a) => new Set(o(Array.from(c), a))
   ), e.constructorHandlers)
-    for (const s of e.constructorHandlers)
-      t.set(s[0], s[1]);
+    for (const c of e.constructorHandlers)
+      t.set(c[0], c[1]);
   let r;
-  return e.proto ? c : o;
-  function n(s, a) {
-    const u = Object.keys(s), i = Array.from({ length: u.length });
-    for (let f = 0; f < u.length; f++) {
-      const l = u[f], m = s[l];
-      typeof m != "object" || m === null ? i[l] = m : m.constructor !== Object && (r = t.get(m.constructor)) ? i[l] = r(m, a) : ArrayBuffer.isView(m) ? i[l] = A(m) : i[l] = a(m);
+  return e.proto ? i : n;
+  function o(c, a) {
+    const s = Object.keys(c), u = Array.from({ length: s.length });
+    for (let f = 0; f < s.length; f++) {
+      const l = s[f], m = c[l];
+      typeof m != "object" || m === null ? u[l] = m : m.constructor !== Object && (r = t.get(m.constructor)) ? u[l] = r(m, a) : ArrayBuffer.isView(m) ? u[l] = A(m) : u[l] = a(m);
     }
-    return i;
+    return u;
   }
-  function o(s) {
-    if (typeof s != "object" || s === null) return s;
-    if (Array.isArray(s)) return n(s, o);
-    if (s.constructor !== Object && (r = t.get(s.constructor)))
-      return r(s, o);
+  function n(c) {
+    if (typeof c != "object" || c === null) return c;
+    if (Array.isArray(c)) return o(c, n);
+    if (c.constructor !== Object && (r = t.get(c.constructor)))
+      return r(c, n);
     const a = {};
-    for (const u in s) {
-      if (Object.hasOwnProperty.call(s, u) === !1) continue;
-      const i = s[u];
-      typeof i != "object" || i === null ? a[u] = i : i.constructor !== Object && (r = t.get(i.constructor)) ? a[u] = r(i, o) : ArrayBuffer.isView(i) ? a[u] = A(i) : a[u] = o(i);
+    for (const s in c) {
+      if (Object.hasOwnProperty.call(c, s) === !1) continue;
+      const u = c[s];
+      typeof u != "object" || u === null ? a[s] = u : u.constructor !== Object && (r = t.get(u.constructor)) ? a[s] = r(u, n) : ArrayBuffer.isView(u) ? a[s] = A(u) : a[s] = n(u);
     }
     return a;
   }
-  function c(s) {
-    if (typeof s != "object" || s === null) return s;
-    if (Array.isArray(s)) return n(s, c);
-    if (s.constructor !== Object && (r = t.get(s.constructor)))
-      return r(s, c);
+  function i(c) {
+    if (typeof c != "object" || c === null) return c;
+    if (Array.isArray(c)) return o(c, i);
+    if (c.constructor !== Object && (r = t.get(c.constructor)))
+      return r(c, i);
     const a = {};
-    for (const u in s) {
-      const i = s[u];
-      typeof i != "object" || i === null ? a[u] = i : i.constructor !== Object && (r = t.get(i.constructor)) ? a[u] = r(i, c) : ArrayBuffer.isView(i) ? a[u] = A(i) : a[u] = c(i);
+    for (const s in c) {
+      const u = c[s];
+      typeof u != "object" || u === null ? a[s] = u : u.constructor !== Object && (r = t.get(u.constructor)) ? a[s] = r(u, i) : ArrayBuffer.isView(u) ? a[s] = A(u) : a[s] = i(u);
     }
     return a;
   }
 }
 function W(e) {
-  const t = [], r = [], n = /* @__PURE__ */ new Map();
-  if (n.set(Date, (u) => new Date(u)), n.set(
+  const t = [], r = [], o = /* @__PURE__ */ new Map();
+  if (o.set(Date, (s) => new Date(s)), o.set(
     Map,
-    (u, i) => new Map(c(Array.from(u), i))
-  ), n.set(
+    (s, u) => new Map(i(Array.from(s), u))
+  ), o.set(
     Set,
-    (u, i) => new Set(c(Array.from(u), i))
+    (s, u) => new Set(i(Array.from(s), u))
   ), e.constructorHandlers)
-    for (const u of e.constructorHandlers)
-      n.set(u[0], u[1]);
-  let o;
-  return e.proto ? a : s;
-  function c(u, i) {
-    const f = Object.keys(u), l = Array.from({ length: f.length });
+    for (const s of e.constructorHandlers)
+      o.set(s[0], s[1]);
+  let n;
+  return e.proto ? a : c;
+  function i(s, u) {
+    const f = Object.keys(s), l = Array.from({ length: f.length });
     for (let m = 0; m < f.length; m++) {
-      const d = f[m], p = u[d];
-      if (typeof p != "object" || p === null)
-        l[d] = p;
-      else if (p.constructor !== Object && (o = n.get(p.constructor)))
-        l[d] = o(p, i);
-      else if (ArrayBuffer.isView(p))
-        l[d] = A(p);
+      const y = f[m], d = s[y];
+      if (typeof d != "object" || d === null)
+        l[y] = d;
+      else if (d.constructor !== Object && (n = o.get(d.constructor)))
+        l[y] = n(d, u);
+      else if (ArrayBuffer.isView(d))
+        l[y] = A(d);
       else {
-        const b = t.indexOf(p);
-        b !== -1 ? l[d] = r[b] : l[d] = i(p);
+        const h = t.indexOf(d);
+        h !== -1 ? l[y] = r[h] : l[y] = u(d);
       }
     }
     return l;
   }
-  function s(u) {
-    if (typeof u != "object" || u === null) return u;
-    if (Array.isArray(u)) return c(u, s);
-    if (u.constructor !== Object && (o = n.get(u.constructor)))
-      return o(u, s);
-    const i = {};
-    t.push(u), r.push(i);
-    for (const f in u) {
-      if (Object.hasOwnProperty.call(u, f) === !1) continue;
-      const l = u[f];
+  function c(s) {
+    if (typeof s != "object" || s === null) return s;
+    if (Array.isArray(s)) return i(s, c);
+    if (s.constructor !== Object && (n = o.get(s.constructor)))
+      return n(s, c);
+    const u = {};
+    t.push(s), r.push(u);
+    for (const f in s) {
+      if (Object.hasOwnProperty.call(s, f) === !1) continue;
+      const l = s[f];
       if (typeof l != "object" || l === null)
-        i[f] = l;
-      else if (l.constructor !== Object && (o = n.get(l.constructor)))
-        i[f] = o(l, s);
+        u[f] = l;
+      else if (l.constructor !== Object && (n = o.get(l.constructor)))
+        u[f] = n(l, c);
       else if (ArrayBuffer.isView(l))
-        i[f] = A(l);
+        u[f] = A(l);
       else {
         const m = t.indexOf(l);
-        m !== -1 ? i[f] = r[m] : i[f] = s(l);
+        m !== -1 ? u[f] = r[m] : u[f] = c(l);
       }
     }
-    return t.pop(), r.pop(), i;
+    return t.pop(), r.pop(), u;
   }
-  function a(u) {
-    if (typeof u != "object" || u === null) return u;
-    if (Array.isArray(u)) return c(u, a);
-    if (u.constructor !== Object && (o = n.get(u.constructor)))
-      return o(u, a);
-    const i = {};
-    t.push(u), r.push(i);
-    for (const f in u) {
-      const l = u[f];
+  function a(s) {
+    if (typeof s != "object" || s === null) return s;
+    if (Array.isArray(s)) return i(s, a);
+    if (s.constructor !== Object && (n = o.get(s.constructor)))
+      return n(s, a);
+    const u = {};
+    t.push(s), r.push(u);
+    for (const f in s) {
+      const l = s[f];
       if (typeof l != "object" || l === null)
-        i[f] = l;
-      else if (l.constructor !== Object && (o = n.get(l.constructor)))
-        i[f] = o(l, a);
+        u[f] = l;
+      else if (l.constructor !== Object && (n = o.get(l.constructor)))
+        u[f] = n(l, a);
       else if (ArrayBuffer.isView(l))
-        i[f] = A(l);
+        u[f] = A(l);
       else {
         const m = t.indexOf(l);
-        m !== -1 ? i[f] = r[m] : i[f] = a(l);
+        m !== -1 ? u[f] = r[m] : u[f] = a(l);
       }
     }
-    return t.pop(), r.pop(), i;
+    return t.pop(), r.pop(), u;
   }
 }
 Z();
 function G(e, t = 8) {
   const r = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let n = "";
-  for (let o = 0; o < t; o++) {
-    const c = Math.floor(Math.random() * r.length);
-    n += r[c];
+  let o = "";
+  for (let n = 0; n < t; n++) {
+    const i = Math.floor(Math.random() * r.length);
+    o += r[i];
   }
-  return e ? `${e}${n}` : n;
+  return e ? `${e}${o}` : o;
 }
-const Y = ({ name: e }) => `.${e}-theme, [data-theme="${e}"]`, w = ({ name: e }) => e.replace(/^\.+|\.+$/g, "").replace(/\.+/g, "--");
+const Y = ({ name: e }) => `.${e}-theme, [data-theme="${e}"]`, B = ({ name: e }) => e.replace(/^\.+|\.+$/g, "").replace(/\.+/g, "--");
 function X(e, t) {
   return `@${e}${t ? " " : ""}${t}`;
 }
@@ -201,32 +201,32 @@ function re(e = "") {
   if (!ee.test(e))
     return e !== e.toLowerCase();
 }
-function B(e, t) {
-  const r = te, n = [];
+function E(e, t) {
+  const r = te, o = [];
   if (!e || typeof e != "string")
-    return n;
-  let o = "", c, s;
+    return o;
+  let n = "", i, c;
   for (const a of e) {
-    const u = r.includes(a);
-    if (u === !0) {
-      n.push(o), o = "", c = void 0;
+    const s = r.includes(a);
+    if (s === !0) {
+      o.push(n), n = "", i = void 0;
       continue;
     }
-    const i = re(a);
-    if (s === !1) {
-      if (c === !1 && i === !0) {
-        n.push(o), o = a, c = i;
+    const u = re(a);
+    if (c === !1) {
+      if (i === !1 && u === !0) {
+        o.push(n), n = a, i = u;
         continue;
       }
-      if (c === !0 && i === !1 && o.length > 1) {
-        const f = o.at(-1);
-        n.push(o.slice(0, Math.max(0, o.length - 1))), o = f + a, c = i;
+      if (i === !0 && u === !1 && n.length > 1) {
+        const f = n.at(-1);
+        o.push(n.slice(0, Math.max(0, n.length - 1))), n = f + a, i = u;
         continue;
       }
     }
-    o += a, c = i, s = u;
+    n += a, i = u, c = s;
   }
-  return n.push(o), n;
+  return o.push(n), o;
 }
 function ne(e) {
   return e ? e[0].toUpperCase() + e.slice(1) : "";
@@ -234,14 +234,14 @@ function ne(e) {
 function oe(e) {
   return e ? e[0].toLowerCase() + e.slice(1) : "";
 }
-function ue(e, t) {
-  return e ? (Array.isArray(e) ? e : B(e)).map((r) => ne(r)).join("") : "";
+function se(e, t) {
+  return e ? (Array.isArray(e) ? e : E(e)).map((r) => ne(r)).join("") : "";
 }
 function ce(e, t) {
-  return oe(ue(e || ""));
+  return oe(se(e || ""));
 }
-function se(e, t) {
-  return e ? (Array.isArray(e) ? e : B(e)).map((r) => r.toLowerCase()).join("-") : "";
+function ue(e, t) {
+  return e ? (Array.isArray(e) ? e : E(e)).map((r) => r.toLowerCase()).join("-") : "";
 }
 function ie(e) {
   return `	${e}`;
@@ -251,19 +251,19 @@ function ae(e) {
 `).map((t) => ie(t)).join(`
 `);
 }
-function T(e) {
+function F(e) {
   return e === e.toUpperCase();
 }
-function E(e) {
+function D(e) {
   return ce(e);
 }
 function le(e) {
-  return se(e);
+  return ue(e);
 }
 function fe(e) {
   return le(e);
 }
-function D(e, t) {
+function P(e, t) {
   return `${e.startsWith("--") ? e : fe(e)}: ${t};`;
 }
 function me(e) {
@@ -271,93 +271,100 @@ function me(e) {
 ` : ""}${e.map((t) => `${ae(`${t}`)}
 `).join("")}}`;
 }
-function F(e) {
+function U(e) {
   return `--${(e.startsWith("--") ? e.slice(2) : e).replace(/[^a-zA-Z0-9_\-\u0080-\uFFFF]/g, "-") || "unknown-variable"}`;
 }
 function pe(e, t) {
-  return D(F(e), t);
+  return P(U(e), t);
 }
 function de(e, t) {
-  return `var(${F(e)}${t ? `, ${t}` : ""})`;
+  return `var(${U(e)}${t ? `, ${t}` : ""})`;
 }
-function O(e, t) {
+function _(e, t) {
   return `${e} ${me(t)}`;
 }
 function ye(e) {
-  return function(r, n) {
-    return Object.entries(r).map(([o, c]) => D(o, e(c, n)));
+  return function(r, o) {
+    return Object.entries(r).map(([n, i]) => P(n, e(i, o)));
   };
 }
-function U(e) {
-  return function(r, n) {
-    const c = (n.variables?.name ?? w)({ name: r.name });
-    return pe(c, e(r.value, n));
+function k(e) {
+  return function(r, o) {
+    const i = (o.variables?.name ?? B)({ name: r.name });
+    return pe(i, e(r.value, o));
   };
 }
 function C(e) {
-  const t = U(e), r = ye(e);
-  return function(o, c, s) {
-    const { variables: a, declarations: u, children: i } = c, f = o === ":root", l = (a ?? []).map(
-      (g) => t(g, s)
+  const t = k(e), r = ye(e);
+  return function(n, i, c) {
+    const { variables: a, declarations: s, children: u } = i, f = n === ":root", l = (a ?? []).map(
+      (p) => t(p, c)
     ), m = r(
-      u ?? {},
-      s
-    ), d = (i ?? []).map(
-      (g) => e(g, s)
-    ), p = l.length > 0, b = m.length > 0, v = d.length > 0;
-    return f ? `${p || b ? O(o, [
+      s ?? {},
+      c
+    ), y = (u ?? []).map(
+      (p) => e(p, c)
+    ), d = l.length > 0, h = m.length > 0, v = y.length > 0;
+    return f ? `${d || h ? _(n, [
       ...l,
-      ...p && b ? [""] : [],
+      ...d && h ? [""] : [],
       ...m
-    ]) : ""}${v && (p || b) ? `
+    ]) : ""}${v && (d || h) ? `
 
-` : ""}${d.join(`
+` : ""}${y.join(`
 
-`)}` : O(o, [
+`)}` : _(n, [
       ...l,
-      ...p && (v || b) ? [""] : [],
+      ...d && (v || h) ? [""] : [],
       ...m,
-      ...b && v ? [""] : [],
-      ...d.flatMap(
-        (g, L) => L === d.length - 1 ? [g] : [g, ""]
+      ...h && v ? [""] : [],
+      ...y.flatMap(
+        (p, j) => j === y.length - 1 ? [p] : [p, ""]
       )
     ]);
   };
 }
 function he(e) {
   const t = C(e);
-  return function(n, o) {
-    const c = P.includes(n.identifier), s = I.includes(
-      n.identifier
-    ), a = Object.keys(n.declarations).length > 0, u = n.variables.length > 0, i = n.children.length > 0, f = X(n.identifier, n.rule);
-    return c || s && !(a || u || i) ? `${f};` : t(f, n, o);
+  return function(o, n) {
+    const i = L.includes(o.identifier), c = I.includes(
+      o.identifier
+    ), a = Object.keys(o.declarations).length > 0, s = o.variables.length > 0, u = o.children.length > 0, f = X(o.identifier, o.rule);
+    return i || c && !(a || s || u) ? `${f};` : t(f, o, n);
   };
 }
 function be(e) {
-  return function(r, n) {
-    return r.value.map((o) => e(o, n)).join("").trim();
+  return function(r, o) {
+    return r.value.map((n) => e(n, o)).join("").trim();
   };
 }
 function ge(e) {
-  return function(r, n) {
+  return function(r, o) {
     return r != null ? `${r}` : "";
   };
 }
 function Ae(e) {
-  return function(r, n) {
-    const c = (n.variables?.name ?? w)({ name: r.name });
+  return function(r, o) {
+    const i = (o.variables?.name ?? B)({ name: r.name });
     return de(
-      c,
-      r.fallback ? e(r.fallback, n) : void 0
+      i,
+      r.fallback ? e(r.fallback, o) : void 0
     );
   };
 }
 function Se(e) {
   const t = C(e);
-  return function(n, o) {
-    return n.themes.reduce(
-      (c, s) => (c.push(e(s, o)), c),
-      [t(":root", n, o)]
+  return function(o, n, i) {
+    const c = i?.treeshake ?? !1, a = i?.scanner ?? !1, s = o._usage.variables, u = (p) => !c || s.has(p.name), f = (p) => c ? { ...p, variables: p.variables.filter(u) } : p, l = c && a, m = o._usage.utilities, y = (p) => p.type !== "utility" || !l ? !0 : m.has(
+      T({
+        name: p.name,
+        value: p.value,
+        modifiers: p.modifiers
+      })
+    ), d = f(o), h = l ? { ...d, children: d.children.filter(y) } : d;
+    return o.themes.map(f).reduce(
+      (p, j) => (p.push(e(j, n)), p),
+      [t(":root", h, n)]
       // Default theme (root)
     ).join(`
 
@@ -366,65 +373,66 @@ function Se(e) {
 }
 function Ce(e) {
   const t = C(e);
-  return function(n, o) {
-    return t(n.query, n, o);
+  return function(o, n) {
+    return t(o.query, o, n);
   };
 }
 function ve(e) {
   const t = C(e);
-  return function(n, o) {
-    const s = (o.themes?.selector ?? Y)({ name: n.name });
-    return t(s, n, o);
+  return function(o, n) {
+    const c = (n.themes?.selector ?? Y)({ name: o.name });
+    return t(c, o, n);
   };
 }
 function $e(e) {
   const t = C(e);
-  return function(n, o) {
-    const c = [], a = (o.utilities?.selector ?? Q)({
-      name: n.name,
-      value: n.value,
-      modifiers: n.modifiers
-    }), u = J(a);
-    return c.push(t(u, n, o)), c.join(`
+  return function(o, n) {
+    const i = [], a = (n.utilities?.selector ?? T)({
+      name: o.name,
+      value: o.value,
+      modifiers: o.modifiers
+    }), s = J(a);
+    return i.push(t(s, o, n)), i.join(`
 
 `);
   };
 }
-function y(e, t) {
-  const r = Se(y), n = Ce(y), o = $e(y), c = he(y), s = ve(y), a = U(y), u = Ae(y), i = be(y), f = ge();
+function b(e, t, r) {
+  const o = Se(b), n = Ce(b), i = $e(b), c = he(b), a = ve(b), s = k(b), u = Ae(b), f = be(b), l = ge();
   switch (!0) {
     case S(e):
       return n(e, t);
+    case z(e):
+      return i(e, t);
     case q(e):
-      return o(e, t);
-    case K(e):
       return c(e, t);
-    case N(e):
-      return r(e, t);
-    case H(e):
-      return s(e, t);
-    case k(e):
+    case O(e):
+      return o(e, t, r);
+    case Q(e):
       return a(e, t);
     case V(e):
+      return s(e, t);
+    case K(e):
       return u(e, t);
-    case z(e):
-      return i(e, t);
-    default:
+    case H(e):
       return f(e, t);
+    default:
+      return l(e, t);
   }
 }
 function je(e) {
-  return function(r, n) {
-    let o = r._exportName;
-    o || (o = E(r.name), r.name[0] && T(r.name[0]) && (o = x(o)));
-    const c = `${o}Recipe`, s = r._runtime ?? {};
-    return `const ${c} = ${JSON.stringify(
-      s,
+  return function(r, o) {
+    let n = r._exportName;
+    n || (n = D(r.name), r.name[0] && F(r.name[0]) && (n = $(n)));
+    const i = `${n}Recipe`, c = r._runtime ?? {}, a = `${$(n)}Props`;
+    return `const ${i} = ${JSON.stringify(
+      c,
       null,
       4
     )} as const satisfies RecipeRuntime;
 
-export const ${o} = createRecipe("${r.name}", ${c});
+export type ${a} = RecipeVariantProps<typeof ${i}>;
+export const ${n} = createRecipe("${r.name}", ${i});
 `;
   };
 }
@@ -434,40 +442,40 @@ function Re(e) {
   );
 }
 function Ne(e) {
-  return function(r, n) {
-    const o = Re(r.children), c = r.recipes.length > 0, s = o.length > 0;
-    if (!c && !s)
+  return function(r, o) {
+    const n = Re(r.children), i = r.recipes.length > 0, c = n.length > 0;
+    if (!i && !c)
       return "";
     const a = [];
-    return c && (a.push(`import { createRecipe } from '@styleframe/runtime';
-import type { RecipeRuntime } from '@styleframe/runtime';
-`), a.push(e(r.recipes, n))), s && a.push(e(o, n)), a.join(`
+    return i && (a.push(`import { createRecipe } from '@styleframe/runtime';
+import type { RecipeRuntime, RecipeVariantProps } from '@styleframe/runtime';
+`), a.push(e(r.recipes, o))), c && a.push(e(n, o)), a.join(`
 `);
   };
 }
-function Oe(e) {
-  return function(r, n) {
+function xe(e) {
+  return function(r, o) {
     return r._exportName ? `export const ${r._exportName} = ${JSON.stringify(r.query)};
 ` : "";
   };
 }
-function j(e, t) {
-  const r = Ne(j), n = je(), o = Oe();
+function N(e, t) {
+  const r = Ne(N), o = je(), n = xe();
   switch (!0) {
     case Array.isArray(e):
-      return e.map((c) => j(c, t)).join(`
+      return e.map((i) => N(i, t)).join(`
 `);
-    case N(e):
+    case O(e):
       return r(e, t);
-    case _(e):
-      return n(e, t);
-    case S(e):
+    case w(e):
       return o(e, t);
+    case S(e):
+      return n(e, t);
     default:
       return "";
   }
 }
-const _e = `-----BEGIN PUBLIC KEY-----
+const Oe = `-----BEGIN PUBLIC KEY-----
 MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAs7zAFssgxOMPeo80iig4
 qSSshgNOLnW1gd4tPUrsezndaUrAKlsAys6XD8kuF+bBEIR0uFNSgKlqINLjWM1n
 BiTUzCctodyRaq6/tyFSoPLD35iblkwtfxKPM42lAJZsyTu9qoBr8MJyXmhDLuqA
@@ -475,9 +483,9 @@ dQ8di7mQHz+mCy96jQR4lFSDfHMgl27qaAh5VboTBRxgZliN8D5Fl590QkS94wAj
 hC7NbH+hPcGc/qIaZSjZfyZeBIZS74qJkrzjEA7/pukROD8UQUrQ512HHZ6XlgMn
 4bWT2K9CpWbbhsKFTecCHuxlmPkFJNMuvAb/LdP08BSnpntlyAJcQeBrna2qBen+
 GwIDAQAB
------END PUBLIC KEY-----`, xe = "__licenseRequired", we = "__licenseValidated";
-async function Be(e) {
-  const t = e.replace(/-----BEGIN PUBLIC KEY-----/, "").replace(/-----END PUBLIC KEY-----/, "").replace(/\s/g, ""), r = Uint8Array.from(atob(t), (n) => n.charCodeAt(0));
+-----END PUBLIC KEY-----`, _e = "__licenseRequired", we = "__licenseValidated";
+async function Te(e) {
+  const t = e.replace(/-----BEGIN PUBLIC KEY-----/, "").replace(/-----END PUBLIC KEY-----/, "").replace(/\s/g, ""), r = Uint8Array.from(atob(t), (o) => o.charCodeAt(0));
   return await crypto.subtle.importKey(
     "spki",
     r,
@@ -489,18 +497,18 @@ async function Be(e) {
     ["verify"]
   );
 }
-async function Te({
+async function Be({
   payload: e,
   signature: t
 }) {
-  const r = new TextEncoder().encode(e), n = Uint8Array.from(
+  const r = new TextEncoder().encode(e), o = Uint8Array.from(
     atob(t),
-    (c) => c.charCodeAt(0)
-  ), o = await Be(_e);
+    (i) => i.charCodeAt(0)
+  ), n = await Te(Oe);
   if (!await crypto.subtle.verify(
     { name: "RSASSA-PKCS1-v1_5" },
-    o,
     n,
+    o,
     r
   ))
     throw new Error(
@@ -509,9 +517,9 @@ async function Te({
   return JSON.parse(e);
 }
 function Ee(e) {
-  return Object.prototype.hasOwnProperty.call(e, xe);
+  return Object.prototype.hasOwnProperty.call(e, _e);
 }
-async function De(e) {
+async function Fe(e) {
   const t = Object.getOwnPropertyDescriptor(
     e,
     we
@@ -532,7 +540,7 @@ async function De(e) {
       valid: !1
     };
   try {
-    return await Te(
+    return await Be(
       r
     );
   } catch {
@@ -544,37 +552,38 @@ async function De(e) {
     };
   }
 }
-function Fe(e) {
+function De(e) {
   const t = e?.variants;
   if (!t || Object.keys(t).length === 0)
     return "Record<string, never>";
   const r = [];
-  for (const [n, o] of Object.entries(t)) {
-    if (!o) continue;
-    const c = Object.keys(o);
-    if (c.length > 0) {
-      const s = c.map((i) => `"${i}"`).join(" | "), u = c.includes("true") && c.includes("false") ? `${s} | boolean` : s;
-      r.push(`${n}?: ${u}`);
+  for (const [o, n] of Object.entries(t)) {
+    if (!n) continue;
+    const i = Object.keys(n);
+    if (i.length > 0) {
+      const c = i.map((u) => `"${u}"`).join(" | "), s = i.includes("true") && i.includes("false") ? `${c} | boolean` : c;
+      r.push(`${o}?: ${s}`);
     }
   }
   return r.length === 0 ? "Record<string, never>" : `{ ${r.join("; ")} }`;
 }
-function Ue(e) {
-  return function(r, n) {
-    let o = r._exportName;
-    o || (o = E(r.name), r.name[0] && T(r.name[0]) && (o = x(o)));
-    const c = Fe(r._runtime);
-    return `    export const ${o}: (props?: ${c}) => string;`;
+function Pe(e) {
+  return function(r, o) {
+    let n = r._exportName;
+    n || (n = D(r.name), r.name[0] && F(r.name[0]) && (n = $(n)));
+    const i = De(r._runtime), c = `${$(n)}Props`;
+    return `    export type ${c} = ${i};
+    export const ${n}: (props?: ${c}) => string;`;
   };
 }
-function Le(e) {
+function Ue(e) {
   return e.filter(
     (t) => S(t) && !!t._exportName
   );
 }
-function Pe(e) {
-  return function(r, n) {
-    const o = Le(r.children), c = r.recipes.length > 0, s = o.length > 0, a = [
+function ke(e) {
+  return function(r, o) {
+    const n = Ue(r.children), i = r.recipes.length > 0, c = n.length > 0, a = [
       "// Auto-generated by @styleframe/plugin - DO NOT EDIT",
       "",
       'declare module "virtual:styleframe" {',
@@ -583,42 +592,42 @@ function Pe(e) {
       "    /** Returns the global styleframe instance from styleframe.config.ts */",
       "    export function styleframe(): Styleframe;"
     ];
-    if (c) {
+    if (i) {
       a.push("");
-      const u = r.recipes.map((i) => e(i, n)).filter(Boolean);
-      a.push(...u);
+      const s = r.recipes.map((u) => e(u, o)).filter(Boolean);
+      a.push(...s);
     }
-    if (s) {
+    if (c) {
       a.push("");
-      const u = o.map((i) => e(i, n)).filter(Boolean);
-      a.push(...u);
+      const s = n.map((u) => e(u, o)).filter(Boolean);
+      a.push(...s);
     }
     return a.push("}"), a.push(""), a.push('declare module "virtual:styleframe.css" {'), a.push("    const css: string;"), a.push("    export default css;"), a.push("}"), a.push(""), a.join(`
 `);
   };
 }
-function Ie(e) {
-  return function(r, n) {
+function Le(e) {
+  return function(r, o) {
     return r._exportName ? `    export const ${r._exportName}: string;` : "";
   };
 }
-function R(e, t) {
-  const r = Pe(R), n = Ue(), o = Ie();
+function x(e, t) {
+  const r = ke(x), o = Pe(), n = Le();
   switch (!0) {
     case Array.isArray(e):
-      return e.map((c) => R(c, t)).join(`
+      return e.map((i) => x(i, t)).join(`
 `);
-    case N(e):
+    case O(e):
       return r(e, t);
-    case _(e):
-      return n(e, t);
-    case S(e):
+    case w(e):
       return o(e, t);
+    case S(e):
+      return n(e, t);
     default:
       return "";
   }
 }
-function Me(e) {
+function Ie(e) {
   const t = Math.floor(Math.random() * 100);
   e.root.children.push({
     type: "selector",
@@ -643,7 +652,7 @@ function Me(e) {
     }
   });
 }
-function $(e, t = "") {
+function R(e, t = "") {
   return {
     name: e,
     content: t
@@ -651,50 +660,52 @@ function $(e, t = "") {
 }
 async function Ve(e, {
   type: t = "all",
-  consumers: r = { css: y, ts: j, dts: R }
+  treeshake: r = !1,
+  scanner: o = !1,
+  consumers: n = { css: b, ts: N, dts: x }
 } = {}) {
-  const n = { files: [] }, o = e.options;
+  const i = { files: [] }, c = e.options, a = { treeshake: r, scanner: o };
   if (Ee(e)) {
-    const c = await De(e);
-    (!c.valid || c.instanceId !== e.id) && Me(e);
+    const s = await Fe(e);
+    (!s.valid || s.instanceId !== e.id) && Ie(e);
   }
   if (t === "all" || t === "css") {
-    const c = $(
+    const s = R(
       "index.css",
-      r.css(e.root, o)
+      n.css(e.root, c, a)
     );
-    n.files.push(c);
+    i.files.push(s);
   }
   if (t === "all" || t === "ts") {
-    const c = $(
+    const s = R(
       "index.ts",
-      r.ts(e.root, o)
+      n.ts(e.root, c)
     );
-    n.files.push(c);
+    i.files.push(s);
   }
   if (t === "dts") {
-    const c = $(
+    const s = R(
       "index.d.ts",
-      r.dts(e.root, o)
+      n.dts(e.root, c)
     );
-    n.files.push(c);
+    i.files.push(s);
   }
-  return n;
+  return i;
 }
 export {
-  ke as DEFAULT_INDENT,
-  P as STATEMENT_AT_RULES,
+  Me as DEFAULT_INDENT,
+  L as STATEMENT_AT_RULES,
   I as STATEMENT_OR_BLOCK_AT_RULES,
   ie as addIndentToLine,
-  y as consumeCSS,
-  j as consumeTS,
-  $ as createFile,
+  b as consumeCSS,
+  N as consumeTS,
+  R as createFile,
   Y as defaultThemeSelectorFn,
-  Q as defaultUtilitySelectorFn,
-  w as defaultVariableNameFn,
+  T as defaultUtilitySelectorFn,
+  B as defaultVariableNameFn,
   ae as indentLines,
-  T as isUppercase,
-  E as toCamelCase,
+  F as isUppercase,
+  D as toCamelCase,
   le as toKebabCase,
   Ve as transpile
 };

package/dist/transpiler.umd.cjs

@@ -1,24 +1,25 @@
-(function(p,j){typeof exports=="object"&&typeof module<"u"?j(exports):typeof define=="function"&&define.amd?define(["exports"],j):(p=typeof globalThis<"u"?globalThis:p||self,j(p.transpiler={}))})(this,(function(p){"use strict";const B=["charset","import","namespace"],F=["layer"];function H(e){return typeof e=="object"&&e!==null}function b(e,t){return H(e)&&"type"in e&&e.type===t}function Q(e){return b(e,"variable")}function J(e){return b(e,"reference")}function C(e){return b(e,"selector")}function Z(e){return b(e,"at-rule")}function W(e){return b(e,"utility")}function G(e){return b(e,"css")}function Y(e){return b(e,"theme")}function T(e){return b(e,"root")}function D(e){return b(e,"recipe")}const L=({name:e,value:t,modifiers:r})=>`_${[...r,e,...t==="default"?[]:[t]].filter(Boolean).join(":")}`;function U(e){return e.charAt(0).toUpperCase()+e.slice(1)}function X(e){return`.${e.replace(/[[\].#()%,:/]/g,"\\$&")}`}function A(e){if(e instanceof Buffer)return Buffer.from(e);const t=e.constructor;return new t(e.buffer.slice(0),e.byteOffset,e.byteLength/e.BYTES_PER_ELEMENT||1)}function ee(e){if(e=e||{},e.circular)return te(e);const t=new Map;if(t.set(Date,s=>new Date(s)),t.set(Map,(s,a)=>new Map(n(Array.from(s),a))),t.set(Set,(s,a)=>new Set(n(Array.from(s),a))),e.constructorHandlers)for(const s of e.constructorHandlers)t.set(s[0],s[1]);let r;return e.proto?c:o;function n(s,a){const u=Object.keys(s),i=Array.from({length:u.length});for(let f=0;f<u.length;f++){const l=u[f],m=s[l];typeof m!="object"||m===null?i[l]=m:m.constructor!==Object&&(r=t.get(m.constructor))?i[l]=r(m,a):ArrayBuffer.isView(m)?i[l]=A(m):i[l]=a(m)}return i}function o(s){if(typeof s!="object"||s===null)return s;if(Array.isArray(s))return n(s,o);if(s.constructor!==Object&&(r=t.get(s.constructor)))return r(s,o);const a={};for(const u in s){if(Object.hasOwnProperty.call(s,u)===!1)continue;const i=s[u];typeof i!="object"||i===null?a[u]=i:i.constructor!==Object&&(r=t.get(i.constructor))?a[u]=r(i,o):ArrayBuffer.isView(i)?a[u]=A(i):a[u]=o(i)}return a}function c(s){if(typeof s!="object"||s===null)return s;if(Array.isArray(s))return n(s,c);if(s.constructor!==Object&&(r=t.get(s.constructor)))return r(s,c);const a={};for(const u in s){const i=s[u];typeof i!="object"||i===null?a[u]=i:i.constructor!==Object&&(r=t.get(i.constructor))?a[u]=r(i,c):ArrayBuffer.isView(i)?a[u]=A(i):a[u]=c(i)}return a}}function te(e){const t=[],r=[],n=new Map;if(n.set(Date,u=>new Date(u)),n.set(Map,(u,i)=>new Map(c(Array.from(u),i))),n.set(Set,(u,i)=>new Set(c(Array.from(u),i))),e.constructorHandlers)for(const u of e.constructorHandlers)n.set(u[0],u[1]);let o;return e.proto?a:s;function c(u,i){const f=Object.keys(u),l=Array.from({length:f.length});for(let m=0;m<f.length;m++){const y=f[m],d=u[y];if(typeof d!="object"||d===null)l[y]=d;else if(d.constructor!==Object&&(o=n.get(d.constructor)))l[y]=o(d,i);else if(ArrayBuffer.isView(d))l[y]=A(d);else{const g=t.indexOf(d);g!==-1?l[y]=r[g]:l[y]=i(d)}}return l}function s(u){if(typeof u!="object"||u===null)return u;if(Array.isArray(u))return c(u,s);if(u.constructor!==Object&&(o=n.get(u.constructor)))return o(u,s);const i={};t.push(u),r.push(i);for(const f in u){if(Object.hasOwnProperty.call(u,f)===!1)continue;const l=u[f];if(typeof l!="object"||l===null)i[f]=l;else if(l.constructor!==Object&&(o=n.get(l.constructor)))i[f]=o(l,s);else if(ArrayBuffer.isView(l))i[f]=A(l);else{const m=t.indexOf(l);m!==-1?i[f]=r[m]:i[f]=s(l)}}return t.pop(),r.pop(),i}function a(u){if(typeof u!="object"||u===null)return u;if(Array.isArray(u))return c(u,a);if(u.constructor!==Object&&(o=n.get(u.constructor)))return o(u,a);const i={};t.push(u),r.push(i);for(const f in u){const l=u[f];if(typeof l!="object"||l===null)i[f]=l;else if(l.constructor!==Object&&(o=n.get(l.constructor)))i[f]=o(l,a);else if(ArrayBuffer.isView(l))i[f]=A(l);else{const m=t.indexOf(l);m!==-1?i[f]=r[m]:i[f]=a(l)}}return t.pop(),r.pop(),i}}ee();function re(e,t=8){const r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let n="";for(let o=0;o<t;o++){const c=Math.floor(Math.random()*r.length);n+=r[c]}return e?`${e}${n}`:n}const I=({name:e})=>`.${e}-theme, [data-theme="${e}"]`,N=({name:e})=>e.replace(/^\.+|\.+$/g,"").replace(/\.+/g,"--");function ne(e,t){return`@${e}${t?" ":""}${t}`}const oe=/\d/,ue=["-","_","/","."];function ce(e=""){if(!oe.test(e))return e!==e.toLowerCase()}function P(e,t){const r=ue,n=[];if(!e||typeof e!="string")return n;let o="",c,s;for(const a of e){const u=r.includes(a);if(u===!0){n.push(o),o="",c=void 0;continue}const i=ce(a);if(s===!1){if(c===!1&&i===!0){n.push(o),o=a,c=i;continue}if(c===!0&&i===!1&&o.length>1){const f=o.at(-1);n.push(o.slice(0,Math.max(0,o.length-1))),o=f+a,c=i;continue}}o+=a,c=i,s=u}return n.push(o),n}function se(e){return e?e[0].toUpperCase()+e.slice(1):""}function ie(e){return e?e[0].toLowerCase()+e.slice(1):""}function ae(e,t){return e?(Array.isArray(e)?e:P(e)).map(r=>se(r)).join(""):""}function le(e,t){return ie(ae(e||""))}function fe(e,t){return e?(Array.isArray(e)?e:P(e)).map(r=>r.toLowerCase()).join("-"):""}function M(e){return`	${e}`}function x(e){return e.split(`
-`).map(t=>M(t)).join(`
-`)}function _(e){return e===e.toUpperCase()}function O(e){return le(e)}function k(e){return fe(e)}function me(e){return k(e)}function V(e,t){return`${e.startsWith("--")?e:me(e)}: ${t};`}function pe(e){return`{${e.length>0?`
-`:""}${e.map(t=>`${x(`${t}`)}
-`).join("")}}`}function K(e){return`--${(e.startsWith("--")?e.slice(2):e).replace(/[^a-zA-Z0-9_\-\u0080-\uFFFF]/g,"-")||"unknown-variable"}`}function de(e,t){return V(K(e),t)}function ye(e,t){return`var(${K(e)}${t?`, ${t}`:""})`}function q(e,t){return`${e} ${pe(t)}`}function he(e){return function(r,n){return Object.entries(r).map(([o,c])=>V(o,e(c,n)))}}function z(e){return function(r,n){const c=(n.variables?.name??N)({name:r.name});return de(c,e(r.value,n))}}function v(e){const t=z(e),r=he(e);return function(o,c,s){const{variables:a,declarations:u,children:i}=c,f=o===":root",l=(a??[]).map(S=>t(S,s)),m=r(u??{},s),y=(i??[]).map(S=>e(S,s)),d=l.length>0,g=m.length>0,w=y.length>0;return f?`${d||g?q(o,[...l,...d&&g?[""]:[],...m]):""}${w&&(d||g)?`
+(function(p,$){typeof exports=="object"&&typeof module<"u"?$(exports):typeof define=="function"&&define.amd?define(["exports"],$):(p=typeof globalThis<"u"?globalThis:p||self,$(p.transpiler={}))})(this,(function(p){"use strict";const L=["charset","import","namespace"],U=["layer"];function Q(e){return typeof e=="object"&&e!==null}function S(e,t){return Q(e)&&"type"in e&&e.type===t}function J(e){return S(e,"variable")}function Z(e){return S(e,"reference")}function C(e){return S(e,"selector")}function W(e){return S(e,"at-rule")}function G(e){return S(e,"utility")}function Y(e){return S(e,"css")}function X(e){return S(e,"theme")}function _(e){return S(e,"root")}function P(e){return S(e,"recipe")}const E=({name:e,value:t,modifiers:r})=>`_${[...r,e,...t==="default"?[]:[t]].filter(Boolean).join(":")}`;function j(e){return e.charAt(0).toUpperCase()+e.slice(1)}function ee(e){return`.${e.replace(/[[\].#()%,:/]/g,"\\$&")}`}function A(e){if(e instanceof Buffer)return Buffer.from(e);const t=e.constructor;return new t(e.buffer.slice(0),e.byteOffset,e.byteLength/e.BYTES_PER_ELEMENT||1)}function te(e){if(e=e||{},e.circular)return re(e);const t=new Map;if(t.set(Date,s=>new Date(s)),t.set(Map,(s,a)=>new Map(o(Array.from(s),a))),t.set(Set,(s,a)=>new Set(o(Array.from(s),a))),e.constructorHandlers)for(const s of e.constructorHandlers)t.set(s[0],s[1]);let r;return e.proto?i:n;function o(s,a){const c=Object.keys(s),u=Array.from({length:c.length});for(let f=0;f<c.length;f++){const l=c[f],m=s[l];typeof m!="object"||m===null?u[l]=m:m.constructor!==Object&&(r=t.get(m.constructor))?u[l]=r(m,a):ArrayBuffer.isView(m)?u[l]=A(m):u[l]=a(m)}return u}function n(s){if(typeof s!="object"||s===null)return s;if(Array.isArray(s))return o(s,n);if(s.constructor!==Object&&(r=t.get(s.constructor)))return r(s,n);const a={};for(const c in s){if(Object.hasOwnProperty.call(s,c)===!1)continue;const u=s[c];typeof u!="object"||u===null?a[c]=u:u.constructor!==Object&&(r=t.get(u.constructor))?a[c]=r(u,n):ArrayBuffer.isView(u)?a[c]=A(u):a[c]=n(u)}return a}function i(s){if(typeof s!="object"||s===null)return s;if(Array.isArray(s))return o(s,i);if(s.constructor!==Object&&(r=t.get(s.constructor)))return r(s,i);const a={};for(const c in s){const u=s[c];typeof u!="object"||u===null?a[c]=u:u.constructor!==Object&&(r=t.get(u.constructor))?a[c]=r(u,i):ArrayBuffer.isView(u)?a[c]=A(u):a[c]=i(u)}return a}}function re(e){const t=[],r=[],o=new Map;if(o.set(Date,c=>new Date(c)),o.set(Map,(c,u)=>new Map(i(Array.from(c),u))),o.set(Set,(c,u)=>new Set(i(Array.from(c),u))),e.constructorHandlers)for(const c of e.constructorHandlers)o.set(c[0],c[1]);let n;return e.proto?a:s;function i(c,u){const f=Object.keys(c),l=Array.from({length:f.length});for(let m=0;m<f.length;m++){const h=f[m],y=c[h];if(typeof y!="object"||y===null)l[h]=y;else if(y.constructor!==Object&&(n=o.get(y.constructor)))l[h]=n(y,u);else if(ArrayBuffer.isView(y))l[h]=A(y);else{const g=t.indexOf(y);g!==-1?l[h]=r[g]:l[h]=u(y)}}return l}function s(c){if(typeof c!="object"||c===null)return c;if(Array.isArray(c))return i(c,s);if(c.constructor!==Object&&(n=o.get(c.constructor)))return n(c,s);const u={};t.push(c),r.push(u);for(const f in c){if(Object.hasOwnProperty.call(c,f)===!1)continue;const l=c[f];if(typeof l!="object"||l===null)u[f]=l;else if(l.constructor!==Object&&(n=o.get(l.constructor)))u[f]=n(l,s);else if(ArrayBuffer.isView(l))u[f]=A(l);else{const m=t.indexOf(l);m!==-1?u[f]=r[m]:u[f]=s(l)}}return t.pop(),r.pop(),u}function a(c){if(typeof c!="object"||c===null)return c;if(Array.isArray(c))return i(c,a);if(c.constructor!==Object&&(n=o.get(c.constructor)))return n(c,a);const u={};t.push(c),r.push(u);for(const f in c){const l=c[f];if(typeof l!="object"||l===null)u[f]=l;else if(l.constructor!==Object&&(n=o.get(l.constructor)))u[f]=n(l,a);else if(ArrayBuffer.isView(l))u[f]=A(l);else{const m=t.indexOf(l);m!==-1?u[f]=r[m]:u[f]=a(l)}}return t.pop(),r.pop(),u}}te();function ne(e,t=8){const r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let o="";for(let n=0;n<t;n++){const i=Math.floor(Math.random()*r.length);o+=r[i]}return e?`${e}${o}`:o}const I=({name:e})=>`.${e}-theme, [data-theme="${e}"]`,O=({name:e})=>e.replace(/^\.+|\.+$/g,"").replace(/\.+/g,"--");function oe(e,t){return`@${e}${t?" ":""}${t}`}const ce=/\d/,se=["-","_","/","."];function ue(e=""){if(!ce.test(e))return e!==e.toLowerCase()}function k(e,t){const r=se,o=[];if(!e||typeof e!="string")return o;let n="",i,s;for(const a of e){const c=r.includes(a);if(c===!0){o.push(n),n="",i=void 0;continue}const u=ue(a);if(s===!1){if(i===!1&&u===!0){o.push(n),n=a,i=u;continue}if(i===!0&&u===!1&&n.length>1){const f=n.at(-1);o.push(n.slice(0,Math.max(0,n.length-1))),n=f+a,i=u;continue}}n+=a,i=u,s=c}return o.push(n),o}function ie(e){return e?e[0].toUpperCase()+e.slice(1):""}function ae(e){return e?e[0].toLowerCase()+e.slice(1):""}function le(e,t){return e?(Array.isArray(e)?e:k(e)).map(r=>ie(r)).join(""):""}function fe(e,t){return ae(le(e||""))}function me(e,t){return e?(Array.isArray(e)?e:k(e)).map(r=>r.toLowerCase()).join("-"):""}function x(e){return`	${e}`}function M(e){return e.split(`
+`).map(t=>x(t)).join(`
+`)}function F(e){return e===e.toUpperCase()}function w(e){return fe(e)}function V(e){return me(e)}function pe(e){return V(e)}function K(e,t){return`${e.startsWith("--")?e:pe(e)}: ${t};`}function de(e){return`{${e.length>0?`
+`:""}${e.map(t=>`${M(`${t}`)}
+`).join("")}}`}function q(e){return`--${(e.startsWith("--")?e.slice(2):e).replace(/[^a-zA-Z0-9_\-\u0080-\uFFFF]/g,"-")||"unknown-variable"}`}function ye(e,t){return K(q(e),t)}function he(e,t){return`var(${q(e)}${t?`, ${t}`:""})`}function z(e,t){return`${e} ${de(t)}`}function be(e){return function(r,o){return Object.entries(r).map(([n,i])=>K(n,e(i,o)))}}function H(e){return function(r,o){const i=(o.variables?.name??O)({name:r.name});return ye(i,e(r.value,o))}}function v(e){const t=H(e),r=be(e);return function(n,i,s){const{variables:a,declarations:c,children:u}=i,f=n===":root",l=(a??[]).map(d=>t(d,s)),m=r(c??{},s),h=(u??[]).map(d=>e(d,s)),y=l.length>0,g=m.length>0,N=h.length>0;return f?`${y||g?z(n,[...l,...y&&g?[""]:[],...m]):""}${N&&(y||g)?`
 
-`:""}${y.join(`
+`:""}${h.join(`
 
-`)}`:q(o,[...l,...d&&(w||g)?[""]:[],...m,...g&&w?[""]:[],...y.flatMap((S,Ke)=>Ke===y.length-1?[S]:[S,""])])}}function be(e){const t=v(e);return function(n,o){const c=B.includes(n.identifier),s=F.includes(n.identifier),a=Object.keys(n.declarations).length>0,u=n.variables.length>0,i=n.children.length>0,f=ne(n.identifier,n.rule);return c||s&&!(a||u||i)?`${f};`:t(f,n,o)}}function ge(e){return function(r,n){return r.value.map(o=>e(o,n)).join("").trim()}}function Ae(e){return function(r,n){return r!=null?`${r}`:""}}function Se(e){return function(r,n){const c=(n.variables?.name??N)({name:r.name});return ye(c,r.fallback?e(r.fallback,n):void 0)}}function Ce(e){const t=v(e);return function(n,o){return n.themes.reduce((c,s)=>(c.push(e(s,o)),c),[t(":root",n,o)]).join(`
+`)}`:z(n,[...l,...y&&(N||g)?[""]:[],...m,...g&&N?[""]:[],...h.flatMap((d,D)=>D===h.length-1?[d]:[d,""])])}}function ge(e){const t=v(e);return function(o,n){const i=L.includes(o.identifier),s=U.includes(o.identifier),a=Object.keys(o.declarations).length>0,c=o.variables.length>0,u=o.children.length>0,f=oe(o.identifier,o.rule);return i||s&&!(a||c||u)?`${f};`:t(f,o,n)}}function Se(e){return function(r,o){return r.value.map(n=>e(n,o)).join("").trim()}}function Ae(e){return function(r,o){return r!=null?`${r}`:""}}function Ce(e){return function(r,o){const i=(o.variables?.name??O)({name:r.name});return he(i,r.fallback?e(r.fallback,o):void 0)}}function ve(e){const t=v(e);return function(o,n,i){const s=i?.treeshake??!1,a=i?.scanner??!1,c=o._usage.variables,u=d=>!s||c.has(d.name),f=d=>s?{...d,variables:d.variables.filter(u)}:d,l=s&&a,m=o._usage.utilities,h=d=>d.type!=="utility"||!l?!0:m.has(E({name:d.name,value:d.value,modifiers:d.modifiers})),y=f(o),g=l?{...y,children:y.children.filter(h)}:y;return o.themes.map(f).reduce((d,D)=>(d.push(e(D,n)),d),[t(":root",g,n)]).join(`
 
-`)}}function ve(e){const t=v(e);return function(n,o){return t(n.query,n,o)}}function je(e){const t=v(e);return function(n,o){const s=(o.themes?.selector??I)({name:n.name});return t(s,n,o)}}function $e(e){const t=v(e);return function(n,o){const c=[],a=(o.utilities?.selector??L)({name:n.name,value:n.value,modifiers:n.modifiers}),u=X(a);return c.push(t(u,n,o)),c.join(`
+`)}}function $e(e){const t=v(e);return function(o,n){return t(o.query,o,n)}}function je(e){const t=v(e);return function(o,n){const s=(n.themes?.selector??I)({name:o.name});return t(s,o,n)}}function Re(e){const t=v(e);return function(o,n){const i=[],a=(n.utilities?.selector??E)({name:o.name,value:o.value,modifiers:o.modifiers}),c=ee(a);return i.push(t(c,o,n)),i.join(`
 
-`)}}function h(e,t){const r=Ce(h),n=ve(h),o=$e(h),c=be(h),s=je(h),a=z(h),u=Se(h),i=ge(h),f=Ae();switch(!0){case C(e):return n(e,t);case W(e):return o(e,t);case Z(e):return c(e,t);case T(e):return r(e,t);case Y(e):return s(e,t);case Q(e):return a(e,t);case J(e):return u(e,t);case G(e):return i(e,t);default:return f(e,t)}}function Re(e){return function(r,n){let o=r._exportName;o||(o=O(r.name),r.name[0]&&_(r.name[0])&&(o=U(o)));const c=`${o}Recipe`,s=r._runtime??{};return`const ${c} = ${JSON.stringify(s,null,4)} as const satisfies RecipeRuntime;
+`)}}function b(e,t,r){const o=ve(b),n=$e(b),i=Re(b),s=ge(b),a=je(b),c=H(b),u=Ce(b),f=Se(b),l=Ae();switch(!0){case C(e):return n(e,t);case G(e):return i(e,t);case W(e):return s(e,t);case _(e):return o(e,t,r);case X(e):return a(e,t);case J(e):return c(e,t);case Z(e):return u(e,t);case Y(e):return f(e,t);default:return l(e,t)}}function Te(e){return function(r,o){let n=r._exportName;n||(n=w(r.name),r.name[0]&&F(r.name[0])&&(n=j(n)));const i=`${n}Recipe`,s=r._runtime??{},a=`${j(n)}Props`;return`const ${i} = ${JSON.stringify(s,null,4)} as const satisfies RecipeRuntime;
 
-export const ${o} = createRecipe("${r.name}", ${c});
-`}}function Te(e){return e.filter(t=>C(t)&&!!t._exportName)}function Ne(e){return function(r,n){const o=Te(r.children),c=r.recipes.length>0,s=o.length>0;if(!c&&!s)return"";const a=[];return c&&(a.push(`import { createRecipe } from '@styleframe/runtime';
-import type { RecipeRuntime } from '@styleframe/runtime';
-`),a.push(e(r.recipes,n))),s&&a.push(e(o,n)),a.join(`
-`)}}function _e(e){return function(r,n){return r._exportName?`export const ${r._exportName} = ${JSON.stringify(r.query)};
-`:""}}function $(e,t){const r=Ne($),n=Re(),o=_e();switch(!0){case Array.isArray(e):return e.map(c=>$(c,t)).join(`
-`);case T(e):return r(e,t);case D(e):return n(e,t);case C(e):return o(e,t);default:return""}}const Oe=`-----BEGIN PUBLIC KEY-----
+export type ${a} = RecipeVariantProps<typeof ${i}>;
+export const ${n} = createRecipe("${r.name}", ${i});
+`}}function Ne(e){return e.filter(t=>C(t)&&!!t._exportName)}function _e(e){return function(r,o){const n=Ne(r.children),i=r.recipes.length>0,s=n.length>0;if(!i&&!s)return"";const a=[];return i&&(a.push(`import { createRecipe } from '@styleframe/runtime';
+import type { RecipeRuntime, RecipeVariantProps } from '@styleframe/runtime';
+`),a.push(e(r.recipes,o))),s&&a.push(e(n,o)),a.join(`
+`)}}function Ee(e){return function(r,o){return r._exportName?`export const ${r._exportName} = ${JSON.stringify(r.query)};
+`:""}}function R(e,t){const r=_e(R),o=Te(),n=Ee();switch(!0){case Array.isArray(e):return e.map(i=>R(i,t)).join(`
+`);case _(e):return r(e,t);case P(e):return o(e,t);case C(e):return n(e,t);default:return""}}const Oe=`-----BEGIN PUBLIC KEY-----
 MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAs7zAFssgxOMPeo80iig4
 qSSshgNOLnW1gd4tPUrsezndaUrAKlsAys6XD8kuF+bBEIR0uFNSgKlqINLjWM1n
 BiTUzCctodyRaq6/tyFSoPLD35iblkwtfxKPM42lAJZsyTu9qoBr8MJyXmhDLuqA
@@ -26,6 +27,7 @@ dQ8di7mQHz+mCy96jQR4lFSDfHMgl27qaAh5VboTBRxgZliN8D5Fl590QkS94wAj
 hC7NbH+hPcGc/qIaZSjZfyZeBIZS74qJkrzjEA7/pukROD8UQUrQ512HHZ6XlgMn
 4bWT2K9CpWbbhsKFTecCHuxlmPkFJNMuvAb/LdP08BSnpntlyAJcQeBrna2qBen+
 GwIDAQAB
------END PUBLIC KEY-----`,Ee="__licenseRequired",we="__licenseValidated";async function Be(e){const t=e.replace(/-----BEGIN PUBLIC KEY-----/,"").replace(/-----END PUBLIC KEY-----/,"").replace(/\s/g,""),r=Uint8Array.from(atob(t),n=>n.charCodeAt(0));return await crypto.subtle.importKey("spki",r,{name:"RSASSA-PKCS1-v1_5",hash:"SHA-256"},!0,["verify"])}async function Fe({payload:e,signature:t}){const r=new TextEncoder().encode(e),n=Uint8Array.from(atob(t),c=>c.charCodeAt(0)),o=await Be(Oe);if(!await crypto.subtle.verify({name:"RSASSA-PKCS1-v1_5"},o,n,r))throw new Error("License validation failed: Invalid signature detected. The license may have been modified or corrupted.");return JSON.parse(e)}function De(e){return Object.prototype.hasOwnProperty.call(e,Ee)}async function Le(e){const t=Object.getOwnPropertyDescriptor(e,we);if(!t?.value)return{key:"",instanceId:"",environment:"",valid:!1};const r=t.value;if(typeof r!="object"||r===null||!("payload"in r)||!("signature"in r)||typeof r.payload!="string"||typeof r.signature!="string")return{key:"",instanceId:"",environment:"",valid:!1};try{return await Fe(r)}catch{return{key:"",instanceId:"",environment:"",valid:!1}}}function Ue(e){const t=e?.variants;if(!t||Object.keys(t).length===0)return"Record<string, never>";const r=[];for(const[n,o]of Object.entries(t)){if(!o)continue;const c=Object.keys(o);if(c.length>0){const s=c.map(i=>`"${i}"`).join(" | "),u=c.includes("true")&&c.includes("false")?`${s} | boolean`:s;r.push(`${n}?: ${u}`)}}return r.length===0?"Record<string, never>":`{ ${r.join("; ")} }`}function Ie(e){return function(r,n){let o=r._exportName;o||(o=O(r.name),r.name[0]&&_(r.name[0])&&(o=U(o)));const c=Ue(r._runtime);return`    export const ${o}: (props?: ${c}) => string;`}}function Pe(e){return e.filter(t=>C(t)&&!!t._exportName)}function Me(e){return function(r,n){const o=Pe(r.children),c=r.recipes.length>0,s=o.length>0,a=["// Auto-generated by @styleframe/plugin - DO NOT EDIT","",'declare module "virtual:styleframe" {','    import type { Styleframe } from "@styleframe/core";',"","    /** Returns the global styleframe instance from styleframe.config.ts */","    export function styleframe(): Styleframe;"];if(c){a.push("");const u=r.recipes.map(i=>e(i,n)).filter(Boolean);a.push(...u)}if(s){a.push("");const u=o.map(i=>e(i,n)).filter(Boolean);a.push(...u)}return a.push("}"),a.push(""),a.push('declare module "virtual:styleframe.css" {'),a.push("    const css: string;"),a.push("    export default css;"),a.push("}"),a.push(""),a.join(`
-`)}}function xe(e){return function(r,n){return r._exportName?`    export const ${r._exportName}: string;`:""}}function E(e,t){const r=Me(E),n=Ie(),o=xe();switch(!0){case Array.isArray(e):return e.map(c=>E(c,t)).join(`
-`);case T(e):return r(e,t);case D(e):return n(e,t);case C(e):return o(e,t);default:return""}}function ke(e){const t=Math.floor(Math.random()*100);e.root.children.push({type:"selector",id:re("sel-"),query:`html:nth-of-type(${t}n+1)::after`,variables:[],children:[],declarations:{content:'"Styleframe Pro: Development Mode – License required for production use"',zIndex:99999,position:"fixed",display:"block !important",opacity:"1 !important",bottom:0,left:0,background:"rgba(0, 0, 0, 0.5)",color:"white",fontSize:"12px",lineHeight:"1",padding:"0.5rem",fontFamily:"sans-serif"}})}function R(e,t=""){return{name:e,content:t}}async function Ve(e,{type:t="all",consumers:r={css:h,ts:$,dts:E}}={}){const n={files:[]},o=e.options;if(De(e)){const c=await Le(e);(!c.valid||c.instanceId!==e.id)&&ke(e)}if(t==="all"||t==="css"){const c=R("index.css",r.css(e.root,o));n.files.push(c)}if(t==="all"||t==="ts"){const c=R("index.ts",r.ts(e.root,o));n.files.push(c)}if(t==="dts"){const c=R("index.d.ts",r.dts(e.root,o));n.files.push(c)}return n}p.DEFAULT_INDENT="	",p.STATEMENT_AT_RULES=B,p.STATEMENT_OR_BLOCK_AT_RULES=F,p.addIndentToLine=M,p.consumeCSS=h,p.consumeTS=$,p.createFile=R,p.defaultThemeSelectorFn=I,p.defaultUtilitySelectorFn=L,p.defaultVariableNameFn=N,p.indentLines=x,p.isUppercase=_,p.toCamelCase=O,p.toKebabCase=k,p.transpile=Ve,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
+-----END PUBLIC KEY-----`,Fe="__licenseRequired",we="__licenseValidated";async function Be(e){const t=e.replace(/-----BEGIN PUBLIC KEY-----/,"").replace(/-----END PUBLIC KEY-----/,"").replace(/\s/g,""),r=Uint8Array.from(atob(t),o=>o.charCodeAt(0));return await crypto.subtle.importKey("spki",r,{name:"RSASSA-PKCS1-v1_5",hash:"SHA-256"},!0,["verify"])}async function De({payload:e,signature:t}){const r=new TextEncoder().encode(e),o=Uint8Array.from(atob(t),i=>i.charCodeAt(0)),n=await Be(Oe);if(!await crypto.subtle.verify({name:"RSASSA-PKCS1-v1_5"},n,o,r))throw new Error("License validation failed: Invalid signature detected. The license may have been modified or corrupted.");return JSON.parse(e)}function Le(e){return Object.prototype.hasOwnProperty.call(e,Fe)}async function Ue(e){const t=Object.getOwnPropertyDescriptor(e,we);if(!t?.value)return{key:"",instanceId:"",environment:"",valid:!1};const r=t.value;if(typeof r!="object"||r===null||!("payload"in r)||!("signature"in r)||typeof r.payload!="string"||typeof r.signature!="string")return{key:"",instanceId:"",environment:"",valid:!1};try{return await De(r)}catch{return{key:"",instanceId:"",environment:"",valid:!1}}}function Pe(e){const t=e?.variants;if(!t||Object.keys(t).length===0)return"Record<string, never>";const r=[];for(const[o,n]of Object.entries(t)){if(!n)continue;const i=Object.keys(n);if(i.length>0){const s=i.map(u=>`"${u}"`).join(" | "),c=i.includes("true")&&i.includes("false")?`${s} | boolean`:s;r.push(`${o}?: ${c}`)}}return r.length===0?"Record<string, never>":`{ ${r.join("; ")} }`}function Ie(e){return function(r,o){let n=r._exportName;n||(n=w(r.name),r.name[0]&&F(r.name[0])&&(n=j(n)));const i=Pe(r._runtime),s=`${j(n)}Props`;return`    export type ${s} = ${i};
+    export const ${n}: (props?: ${s}) => string;`}}function ke(e){return e.filter(t=>C(t)&&!!t._exportName)}function xe(e){return function(r,o){const n=ke(r.children),i=r.recipes.length>0,s=n.length>0,a=["// Auto-generated by @styleframe/plugin - DO NOT EDIT","",'declare module "virtual:styleframe" {','    import type { Styleframe } from "@styleframe/core";',"","    /** Returns the global styleframe instance from styleframe.config.ts */","    export function styleframe(): Styleframe;"];if(i){a.push("");const c=r.recipes.map(u=>e(u,o)).filter(Boolean);a.push(...c)}if(s){a.push("");const c=n.map(u=>e(u,o)).filter(Boolean);a.push(...c)}return a.push("}"),a.push(""),a.push('declare module "virtual:styleframe.css" {'),a.push("    const css: string;"),a.push("    export default css;"),a.push("}"),a.push(""),a.join(`
+`)}}function Me(e){return function(r,o){return r._exportName?`    export const ${r._exportName}: string;`:""}}function B(e,t){const r=xe(B),o=Ie(),n=Me();switch(!0){case Array.isArray(e):return e.map(i=>B(i,t)).join(`
+`);case _(e):return r(e,t);case P(e):return o(e,t);case C(e):return n(e,t);default:return""}}function Ve(e){const t=Math.floor(Math.random()*100);e.root.children.push({type:"selector",id:ne("sel-"),query:`html:nth-of-type(${t}n+1)::after`,variables:[],children:[],declarations:{content:'"Styleframe Pro: Development Mode – License required for production use"',zIndex:99999,position:"fixed",display:"block !important",opacity:"1 !important",bottom:0,left:0,background:"rgba(0, 0, 0, 0.5)",color:"white",fontSize:"12px",lineHeight:"1",padding:"0.5rem",fontFamily:"sans-serif"}})}function T(e,t=""){return{name:e,content:t}}async function Ke(e,{type:t="all",treeshake:r=!1,scanner:o=!1,consumers:n={css:b,ts:R,dts:B}}={}){const i={files:[]},s=e.options,a={treeshake:r,scanner:o};if(Le(e)){const c=await Ue(e);(!c.valid||c.instanceId!==e.id)&&Ve(e)}if(t==="all"||t==="css"){const c=T("index.css",n.css(e.root,s,a));i.files.push(c)}if(t==="all"||t==="ts"){const c=T("index.ts",n.ts(e.root,s));i.files.push(c)}if(t==="dts"){const c=T("index.d.ts",n.dts(e.root,s));i.files.push(c)}return i}p.DEFAULT_INDENT="	",p.STATEMENT_AT_RULES=L,p.STATEMENT_OR_BLOCK_AT_RULES=U,p.addIndentToLine=x,p.consumeCSS=b,p.consumeTS=R,p.createFile=T,p.defaultThemeSelectorFn=I,p.defaultUtilitySelectorFn=E,p.defaultVariableNameFn=O,p.indentLines=M,p.isUppercase=F,p.toCamelCase=w,p.toKebabCase=V,p.transpile=Ke,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@styleframe/transpiler",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "type": "module",
   "types": "./dist/transpiler.d.ts",
   "module": "./dist/transpiler.js",
@@ -22,13 +22,13 @@
     "scule": "^1.3.0"
   },
   "peerDependencies": {
-    "@styleframe/core": "^3.3.0",
+    "@styleframe/core": "^3.5.0",
     "@styleframe/license": "^2.0.2"
   },
   "devDependencies": {
     "@styleframe/config-typescript": "^3.0.0",
     "@styleframe/config-vite": "^3.0.0",
-    "@styleframe/core": "^3.3.0",
+    "@styleframe/core": "^3.5.0",
     "@styleframe/license": "^2.0.2",
     "@vitest/coverage-v8": "^3.2.4",
     "typescript": "^5.8.3",