@salty-css/core 0.0.1-alpha.12 → 0.0.1-alpha.14

package/compiler/index.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("esbuild"),J=require("winston"),G=require("child_process"),N=require("../util/index.cjs"),o=require("path"),r=require("fs"),L=require("fs/promises"),_=require("../parse-templates-BY1Xai-_.cjs");function q(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const e=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(s,n,e.get?e:{enumerable:!0,get:()=>t[n]})}}return s.default=t,Object.freeze(s)}const R=q(K),k=q(J),A=k.createLogger({level:"info",format:k.format.combine(k.format.colorize(),k.format.cli()),transports:[new k.transports.Console({})]}),v=t=>o.join(t,"./saltygen"),M=["salty","css","styles","styled"],z=(t=[])=>new RegExp(`\\.(${[...M,...t].join("|")})\\.`),T=(t,s=[])=>z(s).test(t),U=async t=>{const s=v(t),n=o.join(t,"salty-config.ts"),e=o.join(s,"salty-config.js");await R.build({entryPoints:[n],minify:!0,treeShaking:!0,bundle:!0,outfile:e,format:"esm",external:["react"]});const a=Date.now(),{config:h}=await import(`${e}?t=${a}`);return h},H=async t=>{const s=await U(t),n=new Set,e=(f,p=[])=>f?Object.entries(f).flatMap(([y,c])=>{if(!c)return;if(typeof c=="object")return e(c,[...p,y]);const x=[...p,y].join(".");n.add(`"${x}"`);const D=[...p.map(N.dashCase),N.dashCase(y)].join("-"),{result:P}=_.parseValueTokens(c);return`--${D}: ${P};`}):[],a=f=>f?Object.entries(f).flatMap(([p,y])=>{const c=e(y);return p==="base"?c.join(""):`${p} { ${c.join("")} }`}):[],h=f=>f?Object.entries(f).flatMap(([p,y])=>Object.entries(y).flatMap(([c,x])=>{const D=e(x,[p]),P=`.${p}-${c}, [data-${p}="${c}"]`,O=D.join("");return`${P} { ${O} }`})):[],b=e(s.variables),w=a(s.responsiveVariables),l=h(s.conditionalVariables),j=v(t),u=o.join(j,"css/variables.css"),i=`:root { ${b.join("")} ${w.join("")} } ${l.join("")}`;r.writeFileSync(u,i);const g=o.join(j,"types/css-tokens.d.ts"),d=`type VariableTokens = ${[...n].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;r.writeFileSync(g,d);const m=o.join(j,"css/global.css"),S=_.parseStyles(s.global,"");r.writeFileSync(m,S);const F=o.join(j,"css/templates.css"),C=_.parseTemplates(s.templates);r.writeFileSync(F,C)},V=async(t,s)=>{const n=N.toHash(t),e=o.join(s,"js",n+".js");await R.build({entryPoints:[t],minify:!0,treeShaking:!0,bundle:!0,outfile:e,format:"esm",target:["es2022"],keepNames:!0,external:["react"]});const a=Date.now();return await import(`${e}?t=${a}`)},E=async t=>{const s=v(t),n=o.join(s,"salty-config.js"),{config:e}=await import(n);return e},W=async t=>{try{const s=[],n=[],e=v(t),a=o.join(e,"index.css");(()=>{r.existsSync(e)&&G.execSync("rm -rf "+e),r.mkdirSync(e),r.mkdirSync(o.join(e,"css")),r.mkdirSync(o.join(e,"types"))})(),await H(t);const b=await E(t);async function w(i,g){const $=r.statSync(i);if($.isDirectory()){const d=r.readdirSync(i);await Promise.all(d.map(m=>w(o.join(i,m),o.join(g,m))))}else if($.isFile()&&T(i)){const m=await V(i,e),S=[];Object.entries(m).forEach(([p,y])=>{if(y.isKeyframes&&y.css){const O=`${y.animationName}.css`,I=`css/${O}`,B=o.join(e,I);s.push(O),r.writeFileSync(B,y.css);return}if(!y.generator)return;const c=y.generator._withBuildContext({name:p,config:b}),x=`${c.hash}-${c.priority}.css`;n[c.priority]||(n[c.priority]=[]),n[c.priority].push(x),S.push(x);const D=`css/${x}`,P=o.join(e,D);r.writeFileSync(P,c.css)});const F=S.map(p=>`@import url('./${p}');`).join(`
-`),C=N.toHash(i,6),f=o.join(e,`css/${C}.css`);r.writeFileSync(f,F)}}await w(t,e);const l=s.map(i=>`@import url('./css/${i}');`).join(`
-`);let u=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("esbuild"),G=require("winston"),J=require("child_process"),k=require("../util/index.cjs"),o=require("path"),r=require("fs"),L=require("fs/promises"),_=require("../parse-templates-BY1Xai-_.cjs");function q(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const e=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(s,n,e.get?e:{enumerable:!0,get:()=>t[n]})}}return s.default=t,Object.freeze(s)}const R=q(K),P=q(G),A=P.createLogger({level:"info",format:P.format.combine(P.format.colorize(),P.format.cli()),transports:[new P.transports.Console({})]}),O=t=>o.join(t,"./saltygen"),M=["salty","css","styles","styled"],z=(t=[])=>new RegExp(`\\.(${[...M,...t].join("|")})\\.`),T=(t,s=[])=>z(s).test(t),U=async t=>{const s=O(t),n=o.join(t,"salty-config.ts"),e=o.join(s,"salty-config.js");await R.build({entryPoints:[n],minify:!0,treeShaking:!0,bundle:!0,outfile:e,format:"esm",external:["react"]});const a=Date.now(),{config:S}=await import(`${e}?t=${a}`);return S},H=async t=>{const s=await U(t),n=new Set,e=(d,p=[])=>d?Object.entries(d).flatMap(([y,c])=>{if(!c)return;if(typeof c=="object")return e(c,[...p,y]);const x=[...p,y].join(".");n.add(`"${x}"`);const C=[...p.map(k.dashCase),k.dashCase(y)].join("-"),{result:D}=_.parseValueTokens(c);return`--${C}: ${D};`}):[],a=d=>d?Object.entries(d).flatMap(([p,y])=>{const c=e(y);return p==="base"?c.join(""):`${p} { ${c.join("")} }`}):[],S=d=>d?Object.entries(d).flatMap(([p,y])=>Object.entries(y).flatMap(([c,x])=>{const C=e(x,[p]),D=`.${p}-${c}, [data-${p}="${c}"]`,N=C.join("");return`${D} { ${N} }`})):[],b=e(s.variables),w=a(s.responsiveVariables),l=S(s.conditionalVariables),j=O(t),f=o.join(j,"css/variables.css"),i=`:root { ${b.join("")} ${w.join("")} } ${l.join("")}`;r.writeFileSync(f,i);const g=o.join(j,"types/css-tokens.d.ts"),m=`type VariableTokens = ${[...n].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;r.writeFileSync(g,m);const u=o.join(j,"css/global.css"),h=_.parseStyles(s.global,"");r.writeFileSync(u,h);const F=o.join(j,"css/templates.css"),v=_.parseTemplates(s.templates);r.writeFileSync(F,v)},V=async(t,s)=>{const n=k.toHash(t),e=o.join(s,"js",n+".js");await R.build({entryPoints:[t],minify:!0,treeShaking:!0,bundle:!0,outfile:e,format:"esm",target:["es2022"],keepNames:!0,external:["react"]});const a=Date.now();return await import(`${e}?t=${a}`)},E=async t=>{const s=O(t),n=o.join(s,"salty-config.js"),{config:e}=await import(n);return e},W=async t=>{try{const s=[],n=[],e=O(t),a=o.join(e,"index.css");(()=>{r.existsSync(e)&&J.execSync("rm -rf "+e),r.mkdirSync(e),r.mkdirSync(o.join(e,"css")),r.mkdirSync(o.join(e,"types"))})(),await H(t);const b=await E(t);async function w(i,g){const $=r.statSync(i);if($.isDirectory()){const m=r.readdirSync(i);await Promise.all(m.map(u=>w(o.join(i,u),o.join(g,u))))}else if($.isFile()&&T(i)){const u=await V(i,e),h=[];Object.entries(u).forEach(([p,y])=>{if(y.isKeyframes&&y.css){const N=`${y.animationName}.css`,I=`css/${N}`,B=o.join(e,I);s.push(N),r.writeFileSync(B,y.css);return}if(!y.generator)return;const c=y.generator._withBuildContext({name:p,config:b}),x=`${c.hash}-${c.priority}.css`;n[c.priority]||(n[c.priority]=[]),n[c.priority].push(x),h.push(x);const C=`css/${x}`,D=o.join(e,C);r.writeFileSync(D,c.css)});const F=h.map(p=>`@import url('./${p}');`).join(`
+`),v=k.toHash(i,6),d=o.join(e,`css/${v}.css`);r.writeFileSync(d,F)}}await w(t,e);const l=s.map(i=>`@import url('./css/${i}');`).join(`
+`);let f=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
 
 ${["@import url('./css/variables.css');","@import url('./css/global.css');","@import url('./css/templates.css');"].join(`
 `)}
 ${l}`;if(b.importStrategy!=="component"){const i=n.flat().map(g=>`@import url('./css/${g}');`).join(`
-`);u+=i}r.writeFileSync(a,u)}catch(s){console.error(s)}},X=async(t,s)=>{try{const n=[],e=o.join(t,"./saltygen"),a=o.join(e,"index.css");if(T(s)){const b=await E(t),w=await V(s,e);Object.entries(w).forEach(([g,$])=>{if(!$.generator)return;const d=$.generator._withBuildContext({name:g,config:b}),m=`${d.hash}-${d.priority}.css`,S=`css/${m}`,F=o.join(e,S);n.push(m),r.writeFileSync(F,d.css)});const l=r.readFileSync(a,"utf8").split(`
+`);f+=i}r.writeFileSync(a,f)}catch(s){console.error(s)}},X=async(t,s)=>{try{const n=[],e=o.join(t,"./saltygen"),a=o.join(e,"index.css");if(T(s)){const b=await E(t),w=await V(s,e);Object.entries(w).forEach(([g,$])=>{if(!$.generator)return;const m=$.generator._withBuildContext({name:g,config:b}),u=`${m.hash}-${m.priority}.css`,h=`css/${u}`,F=o.join(e,h);n.push(u),r.writeFileSync(F,m.css)});const l=r.readFileSync(a,"utf8").split(`
 `),j=n.map(g=>`@import url('../saltygen/css/${g}');`),i=[...new Set([...l,...j])].join(`
-`);r.writeFileSync(a,i)}}catch(n){console.error(n)}},Y=async(t,s)=>{try{const n=o.join(t,"./saltygen");if(T(s)){let a=r.readFileSync(s,"utf8");a.replace(/^(?!export\s)const\s.*/gm,u=>`export ${u}`)!==a&&await L.writeFile(s,a);const b=await E(t),w=await V(s,n);let l=a;Object.entries(w).forEach(([u,i])=>{var f;if(i.isKeyframes){console.log("value",i);return}if(!i.generator)return;const g=i.generator._withBuildContext({name:u,config:b}),$=new RegExp(`${u}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(a);if(!$)return console.error("Could not find the original declaration");const d=(f=$.at(1))==null?void 0:f.trim(),{element:m,variantKeys:S}=g.props,F=`${u} = styled(${d}, "${g.classNames}", "${g._callerName}", ${JSON.stringify(m)}, ${JSON.stringify(S)});`,C=new RegExp(`${u}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`,"g");l=l.replace(C,F)});const j=N.toHash(s,6);return b.importStrategy==="component"&&(l=`import '../../saltygen/css/${j}.css';
+`);r.writeFileSync(a,i)}}catch(n){console.error(n)}},Y=async(t,s)=>{try{const n=o.join(t,"./saltygen");if(T(s)){const a=r.readFileSync(s,"utf8");a.replace(/^(?!export\s)const\s.*/gm,f=>`export ${f}`)!==a&&await L.writeFile(s,a);const b=await E(t),w=await V(s,n);let l=a;Object.entries(w).forEach(([f,i])=>{var F;if(i.isKeyframes){console.log("value",i);return}if(!i.generator)return;const g=i.generator._withBuildContext({name:f,config:b}),$=new RegExp(`${f}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(a);if(!$)return console.error("Could not find the original declaration");const m=(F=$.at(1))==null?void 0:F.trim(),u=`${f} = styled(${m}, "${g.classNames}", "${g._callerName}", ${JSON.stringify(g.props)});`,h=new RegExp(`${f}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`,"g");l=l.replace(h,u)});const j=k.toHash(s,6);return b.importStrategy==="component"&&(l=`import '../../saltygen/css/${j}.css';
 ${l}`),l=l.replace("{ styled }","{ styledClient as styled }"),l=l.replace("@salty-css/react/styled","@salty-css/react/styled-client"),l}}catch(n){console.error(n)}};exports.compileSaltyFile=V;exports.generateCss=W;exports.generateFile=X;exports.generateVariables=H;exports.isSaltyFile=T;exports.logger=A;exports.minimizeFile=Y;exports.saltyFileExtensions=M;exports.saltyFileRegExp=z;

package/compiler/index.js

@@ -1,19 +1,19 @@
 import * as M from "esbuild";
-import * as N from "winston";
-import { execSync as z } from "child_process";
+import * as P from "winston";
+import { execSync as H } from "child_process";
 import { toHash as T, dashCase as I } from "../util/index.js";
-import { join as o } from "path";
-import { writeFileSync as $, existsSync as H, mkdirSync as v, statSync as J, readdirSync as G, readFileSync as _ } from "fs";
+import { join as n } from "path";
+import { writeFileSync as $, existsSync as K, mkdirSync as v, statSync as G, readdirSync as J, readFileSync as _ } from "fs";
 import { writeFile as L } from "fs/promises";
 import { p as q, a as A, b as U } from "../parse-templates-BOSK0Tb6.js";
-const rt = N.createLogger({
+const rt = P.createLogger({
   level: "info",
-  format: N.format.combine(N.format.colorize(), N.format.cli()),
-  transports: [new N.transports.Console({})]
-}), k = (s) => o(s, "./saltygen"), W = ["salty", "css", "styles", "styled"], X = (s = []) => new RegExp(`\\.(${[...W, ...s].join("|")})\\.`), O = (s, e = []) => X(e).test(s), Y = async (s) => {
-  const e = k(s), n = o(s, "salty-config.ts"), t = o(e, "salty-config.js");
+  format: P.format.combine(P.format.colorize(), P.format.cli()),
+  transports: [new P.transports.Console({})]
+}), V = (s) => n(s, "./saltygen"), W = ["salty", "css", "styles", "styled"], X = (s = []) => new RegExp(`\\.(${[...W, ...s].join("|")})\\.`), E = (s, e = []) => X(e).test(s), Y = async (s) => {
+  const e = V(s), o = n(s, "salty-config.ts"), t = n(e, "salty-config.js");
   await M.build({
-    entryPoints: [n],
+    entryPoints: [o],
     minify: !0,
     treeShaking: !0,
     bundle: !0,
@@ -21,32 +21,32 @@ const rt = N.createLogger({
     format: "esm",
     external: ["react"]
   });
-  const c = Date.now(), { config: j } = await import(`${t}?t=${c}`);
-  return j;
+  const c = Date.now(), { config: S } = await import(`${t}?t=${c}`);
+  return S;
 }, Z = async (s) => {
-  const e = await Y(s), n = /* @__PURE__ */ new Set(), t = (m, l = []) => m ? Object.entries(m).flatMap(([p, i]) => {
+  const e = await Y(s), o = /* @__PURE__ */ new Set(), t = (u, l = []) => u ? Object.entries(u).flatMap(([p, i]) => {
     if (!i) return;
     if (typeof i == "object") return t(i, [...l, p]);
     const x = [...l, p].join(".");
-    n.add(`"${x}"`);
-    const D = [...l.map(I), I(p)].join("-"), { result: P } = U(i);
-    return `--${D}: ${P};`;
-  }) : [], c = (m) => m ? Object.entries(m).flatMap(([l, p]) => {
+    o.add(`"${x}"`);
+    const C = [...l.map(I), I(p)].join("-"), { result: D } = U(i);
+    return `--${C}: ${D};`;
+  }) : [], c = (u) => u ? Object.entries(u).flatMap(([l, p]) => {
     const i = t(p);
     return l === "base" ? i.join("") : `${l} { ${i.join("")} }`;
-  }) : [], j = (m) => m ? Object.entries(m).flatMap(([l, p]) => Object.entries(p).flatMap(([i, x]) => {
-    const D = t(x, [l]), P = `.${l}-${i}, [data-${l}="${i}"]`, V = D.join("");
-    return `${P} { ${V} }`;
-  })) : [], d = t(e.variables), w = c(e.responsiveVariables), a = j(e.conditionalVariables), b = k(s), y = o(b, "css/variables.css"), r = `:root { ${d.join("")} ${w.join("")} } ${a.join("")}`;
-  $(y, r);
-  const f = o(b, "types/css-tokens.d.ts"), u = `type VariableTokens = ${[...n].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;
-  $(f, u);
-  const g = o(b, "css/global.css"), F = q(e.global, "");
-  $(g, F);
-  const S = o(b, "css/templates.css"), C = A(e.templates);
-  $(S, C);
-}, E = async (s, e) => {
-  const n = T(s), t = o(e, "js", n + ".js");
+  }) : [], S = (u) => u ? Object.entries(u).flatMap(([l, p]) => Object.entries(p).flatMap(([i, x]) => {
+    const C = t(x, [l]), D = `.${l}-${i}, [data-${l}="${i}"]`, N = C.join("");
+    return `${D} { ${N} }`;
+  })) : [], d = t(e.variables), w = c(e.responsiveVariables), a = S(e.conditionalVariables), b = V(s), m = n(b, "css/variables.css"), r = `:root { ${d.join("")} ${w.join("")} } ${a.join("")}`;
+  $(m, r);
+  const f = n(b, "types/css-tokens.d.ts"), g = `type VariableTokens = ${[...o].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;
+  $(f, g);
+  const y = n(b, "css/global.css"), F = q(e.global, "");
+  $(y, F);
+  const j = n(b, "css/templates.css"), k = A(e.templates);
+  $(j, k);
+}, O = async (s, e) => {
+  const o = T(s), t = n(e, "js", o + ".js");
   await M.build({
     entryPoints: [s],
     minify: !0,
@@ -61,26 +61,26 @@ const rt = N.createLogger({
   const c = Date.now();
   return await import(`${t}?t=${c}`);
 }, R = async (s) => {
-  const e = k(s), n = o(e, "salty-config.js"), { config: t } = await import(n);
+  const e = V(s), o = n(e, "salty-config.js"), { config: t } = await import(o);
   return t;
 }, it = async (s) => {
   try {
-    const e = [], n = [], t = k(s), c = o(t, "index.css");
+    const e = [], o = [], t = V(s), c = n(t, "index.css");
     (() => {
-      H(t) && z("rm -rf " + t), v(t), v(o(t, "css")), v(o(t, "types"));
+      K(t) && H("rm -rf " + t), v(t), v(n(t, "css")), v(n(t, "types"));
     })(), await Z(s);
     const d = await R(s);
     async function w(r, f) {
-      const h = J(r);
+      const h = G(r);
       if (h.isDirectory()) {
-        const u = G(r);
-        await Promise.all(u.map((g) => w(o(r, g), o(f, g))));
-      } else if (h.isFile() && O(r)) {
-        const g = await E(r, t), F = [];
-        Object.entries(g).forEach(([l, p]) => {
+        const g = J(r);
+        await Promise.all(g.map((y) => w(n(r, y), n(f, y))));
+      } else if (h.isFile() && E(r)) {
+        const y = await O(r, t), F = [];
+        Object.entries(y).forEach(([l, p]) => {
           if (p.isKeyframes && p.css) {
-            const V = `${p.animationName}.css`, B = `css/${V}`, K = o(t, B);
-            e.push(V), $(K, p.css);
+            const N = `${p.animationName}.css`, B = `css/${N}`, z = n(t, B);
+            e.push(N), $(z, p.css);
             return;
           }
           if (!p.generator) return;
@@ -88,93 +88,91 @@ const rt = N.createLogger({
             name: l,
             config: d
           }), x = `${i.hash}-${i.priority}.css`;
-          n[i.priority] || (n[i.priority] = []), n[i.priority].push(x), F.push(x);
-          const D = `css/${x}`, P = o(t, D);
-          $(P, i.css);
+          o[i.priority] || (o[i.priority] = []), o[i.priority].push(x), F.push(x);
+          const C = `css/${x}`, D = n(t, C);
+          $(D, i.css);
         });
-        const S = F.map((l) => `@import url('./${l}');`).join(`
-`), C = T(r, 6), m = o(t, `css/${C}.css`);
-        $(m, S);
+        const j = F.map((l) => `@import url('./${l}');`).join(`
+`), k = T(r, 6), u = n(t, `css/${k}.css`);
+        $(u, j);
       }
     }
     await w(s, t);
     const a = e.map((r) => `@import url('./css/${r}');`).join(`
 `);
-    let y = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
+    let m = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
 
 ${["@import url('./css/variables.css');", "@import url('./css/global.css');", "@import url('./css/templates.css');"].join(`
 `)}
 ${a}`;
     if (d.importStrategy !== "component") {
-      const r = n.flat().map((f) => `@import url('./css/${f}');`).join(`
+      const r = o.flat().map((f) => `@import url('./css/${f}');`).join(`
 `);
-      y += r;
+      m += r;
     }
-    $(c, y);
+    $(c, m);
   } catch (e) {
     console.error(e);
   }
 }, ct = async (s, e) => {
   try {
-    const n = [], t = o(s, "./saltygen"), c = o(t, "index.css");
-    if (O(e)) {
-      const d = await R(s), w = await E(e, t);
+    const o = [], t = n(s, "./saltygen"), c = n(t, "index.css");
+    if (E(e)) {
+      const d = await R(s), w = await O(e, t);
       Object.entries(w).forEach(([f, h]) => {
         if (!h.generator) return;
-        const u = h.generator._withBuildContext({
+        const g = h.generator._withBuildContext({
           name: f,
           config: d
-        }), g = `${u.hash}-${u.priority}.css`, F = `css/${g}`, S = o(t, F);
-        n.push(g), $(S, u.css);
+        }), y = `${g.hash}-${g.priority}.css`, F = `css/${y}`, j = n(t, F);
+        o.push(y), $(j, g.css);
       });
       const a = _(c, "utf8").split(`
-`), b = n.map((f) => `@import url('../saltygen/css/${f}');`), r = [.../* @__PURE__ */ new Set([...a, ...b])].join(`
+`), b = o.map((f) => `@import url('../saltygen/css/${f}');`), r = [.../* @__PURE__ */ new Set([...a, ...b])].join(`
 `);
       $(c, r);
     }
-  } catch (n) {
-    console.error(n);
+  } catch (o) {
+    console.error(o);
   }
 }, at = async (s, e) => {
   try {
-    const n = o(s, "./saltygen");
-    if (O(e)) {
-      let c = _(e, "utf8");
-      c.replace(/^(?!export\s)const\s.*/gm, (y) => `export ${y}`) !== c && await L(e, c);
-      const d = await R(s), w = await E(e, n);
+    const o = n(s, "./saltygen");
+    if (E(e)) {
+      const c = _(e, "utf8");
+      c.replace(/^(?!export\s)const\s.*/gm, (m) => `export ${m}`) !== c && await L(e, c);
+      const d = await R(s), w = await O(e, o);
       let a = c;
-      Object.entries(w).forEach(([y, r]) => {
-        var m;
+      Object.entries(w).forEach(([m, r]) => {
+        var j;
         if (r.isKeyframes) {
           console.log("value", r);
           return;
         }
         if (!r.generator) return;
         const f = r.generator._withBuildContext({
-          name: y,
+          name: m,
           config: d
-        }), h = new RegExp(`${y}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(c);
+        }), h = new RegExp(`${m}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(c);
         if (!h)
           return console.error("Could not find the original declaration");
-        const u = (m = h.at(1)) == null ? void 0 : m.trim(), { element: g, variantKeys: F } = f.props, S = `${y} = styled(${u}, "${f.classNames}", "${f._callerName}", ${JSON.stringify(g)}, ${JSON.stringify(
-          F
-        )});`, C = new RegExp(`${y}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`, "g");
-        a = a.replace(C, S);
+        const g = (j = h.at(1)) == null ? void 0 : j.trim(), y = `${m} = styled(${g}, "${f.classNames}", "${f._callerName}", ${JSON.stringify(f.props)});`, F = new RegExp(`${m}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`, "g");
+        a = a.replace(F, y);
       });
       const b = T(e, 6);
       return d.importStrategy === "component" && (a = `import '../../saltygen/css/${b}.css';
 ${a}`), a = a.replace("{ styled }", "{ styledClient as styled }"), a = a.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), a;
     }
-  } catch (n) {
-    console.error(n);
+  } catch (o) {
+    console.error(o);
   }
 };
 export {
-  E as compileSaltyFile,
+  O as compileSaltyFile,
   it as generateCss,
   ct as generateFile,
   Z as generateVariables,
-  O as isSaltyFile,
+  E as isSaltyFile,
   rt as logger,
   at as minimizeFile,
   W as saltyFileExtensions,

package/generator/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../util/index.cjs"),i=require("../parse-templates-BY1Xai-_.cjs");class o{constructor(t,s){this.tagName=t,this.params=s}get hash(){return n.toHash(this.params.base||this.params)}get priority(){var t;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((t=this.tagName.generator)==null?void 0:t.priority)||0)+1:0}get classNames(){const t=[this.hash],{className:s}=this.params;return s&&t.push(s),t.join(" ")}get cssClassName(){return this.hash}get cssDisplayNameVar(){return`--${this.hash}-display-name: ${this._callerName};`}get templateKeys(){var t;return(t=this._context)!=null&&t.config.templates?i.getTemplateKeys(this._context.config.templates):[]}get css(){var a;const{base:t={},variants:s={},compoundVariants:e=[]}=this.params,r={...t,variants:s,compoundVariants:e};return i.parseStyles(r,`.${this.cssClassName}`,this.priority,(a=this._context)==null?void 0:a.config)}get props(){const{element:t}=this.params,s=this.params.variants?Object.keys(this.params.variants).map(e=>{var a;const r=(a=this.params.defaultVariants)==null?void 0:a[e];return r!==void 0?`${e}=${String(r)}`:e}):void 0;return{element:t,variantKeys:s}}_withBuildContext(t){this._context=t;const{name:s,config:e}=t;return this._callerName=s,this}}exports.StyleComponentGenerator=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../util/index.cjs"),c=require("../parse-templates-BY1Xai-_.cjs");class h{constructor(t,s){this.tagName=t,this.params=s}get hash(){return p.toHash(this.params.base||this.params)}get priority(){var t;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((t=this.tagName.generator)==null?void 0:t.priority)||0)+1:0}get classNames(){const t=[this.hash],{className:s}=this.params;return s&&t.push(s),t.join(" ")}get cssClassName(){return this.hash}get cssDisplayNameVar(){return`--${this.hash}-display-name: ${this._callerName};`}get templateKeys(){var t;return(t=this._context)!=null&&t.config.templates?c.getTemplateKeys(this._context.config.templates):[]}get css(){var e;const{base:t={},variants:s={},compoundVariants:a=[]}=this.params,r={...t,variants:s,compoundVariants:a};return c.parseStyles(r,`.${this.cssClassName}`,this.priority,(e=this._context)==null?void 0:e.config)}get props(){const{element:t}=this.params,s=this.params.variants?Object.keys(this.params.variants).map(e=>{var i;const n=(i=this.params.defaultVariants)==null?void 0:i[e];return n!==void 0?`${e}=${String(n)}`:e}):void 0,a=new Set([]),r=/\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));return r&&r.forEach((e,n,i)=>{const o=i.at(1);o&&a.add(o)}),{element:t,variantKeys:s,propValueKeys:[...a]}}_withBuildContext(t){this._context=t;const{name:s,config:a}=t;return this._callerName=s,this}}exports.StyleComponentGenerator=h;

package/generator/index.js

@@ -1,11 +1,11 @@
-import { toHash as i } from "../util/index.js";
-import { g as n, p as o } from "../parse-templates-BOSK0Tb6.js";
-class p {
+import { toHash as p } from "../util/index.js";
+import { g as c, p as h } from "../parse-templates-BOSK0Tb6.js";
+class u {
   constructor(t, s) {
     this.tagName = t, this.params = s;
   }
   get hash() {
-    return i(this.params.base || this.params);
+    return p(this.params.base || this.params);
   }
   get priority() {
     var t;
@@ -23,30 +23,34 @@ class p {
   }
   get templateKeys() {
     var t;
-    return (t = this._context) != null && t.config.templates ? n(this._context.config.templates) : [];
+    return (t = this._context) != null && t.config.templates ? c(this._context.config.templates) : [];
   }
   get css() {
-    var e;
-    const { base: t = {}, variants: s = {}, compoundVariants: a = [] } = this.params, r = { ...t, variants: s, compoundVariants: a };
-    return o(r, `.${this.cssClassName}`, this.priority, (e = this._context) == null ? void 0 : e.config);
+    var a;
+    const { base: t = {}, variants: s = {}, compoundVariants: e = [] } = this.params, r = { ...t, variants: s, compoundVariants: e };
+    return h(r, `.${this.cssClassName}`, this.priority, (a = this._context) == null ? void 0 : a.config);
   }
   get props() {
     const { element: t } = this.params, s = this.params.variants ? Object.keys(this.params.variants).map((a) => {
-      var e;
-      const r = (e = this.params.defaultVariants) == null ? void 0 : e[a];
-      return r !== void 0 ? `${a}=${String(r)}` : a;
-    }) : void 0;
-    return {
+      var i;
+      const n = (i = this.params.defaultVariants) == null ? void 0 : i[a];
+      return n !== void 0 ? `${a}=${String(n)}` : a;
+    }) : void 0, e = /* @__PURE__ */ new Set([]), r = /\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));
+    return r && r.forEach((a, n, i) => {
+      const o = i.at(1);
+      o && e.add(o);
+    }), {
       element: t,
-      variantKeys: s
+      variantKeys: s,
+      propValueKeys: [...e]
     };
   }
   _withBuildContext(t) {
     this._context = t;
-    const { name: s, config: a } = t;
+    const { name: s, config: e } = t;
     return this._callerName = s, this;
   }
 }
 export {
-  p as StyleComponentGenerator
+  u as StyleComponentGenerator
 };

package/generator/style-generator.d.ts

@@ -1,4 +1,9 @@
 import { StyledParams, Tag } from '../types';
+export interface GeneratorProps {
+    element?: string;
+    variantKeys?: string[];
+    propValueKeys?: string[];
+}
 export declare class StyleComponentGenerator {
     tagName: Tag<any>;
     params: StyledParams;
@@ -15,10 +20,7 @@ export declare class StyleComponentGenerator {
     get cssDisplayNameVar(): string;
     get templateKeys(): string[];
     get css(): string;
-    get props(): {
-        element: string | undefined;
-        variantKeys: string[] | undefined;
-    };
+    get props(): GeneratorProps;
     _withBuildContext(context: {
         name: string;
         config: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/core",
-  "version": "0.0.1-alpha.12",
+  "version": "0.0.1-alpha.14",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",

package/types/index.d.ts

@@ -11,7 +11,7 @@ export type CreateElementProps = {
     /** vks = Variant key set */
     _vks?: Set<string>;
 };
-export type StyledComponentProps = Record<string, unknown> & CreateElementProps & CssRuntimeValues;
+export type StyledComponentProps = Record<string, unknown> & CreateElementProps;
 type FnComponent<PROPS extends StyledComponentProps> = {
     (props: PROPS): ReactNode;
     generator?: StyleComponentGenerator;
@@ -39,13 +39,14 @@ type Variants = {
     compoundVariants?: CompoundVariant[];
 };
 type VariantPropValue<T> = T extends 'true' ? 'true' | true : T;
-export type VariantProps<STYLES extends StyledParams> = STYLES['variants'] extends undefined ? {} : {
+export type VariantProps<STYLES extends StyledParams> = STYLES['variants'] extends undefined ? object : {
     [K in keyof STYLES['variants']]?: VariantPropValue<keyof STYLES['variants'][K]> | '';
 };
-export type ParentComponentProps<TAG extends Tag<any>> = TAG extends (props: infer P) => ReactNode ? P : unknown;
-export type CssRuntimeValues = {
-    cssValues?: Record<string, unknown>;
+type CssValuePropKey = `props-${string}`;
+export type ValueProps = {
+    [key: CssValuePropKey]: string;
 };
+export type ParentComponentProps<TAG extends Tag<any>> = TAG extends (props: infer P) => ReactNode ? P : unknown;
 type StylePropertyValue = Record<never, never> & unknown;
 export type CssStyles = {
     [key in StyleKeys | OrString]?: StyleValue<key> | StylePropertyValue | PropertyValueToken | CssStyles;