@salty-css/core 0.0.1-alpha.13 → 0.0.1-alpha.130

package/index-XN7f6bdr.js

@@ -0,0 +1,305 @@
+import * as X from "esbuild";
+import { execSync as ce } from "child_process";
+import { t as H, d as R } from "./dash-case-DBThphLm.js";
+import { join as o, parse as I } from "path";
+import { existsSync as Z, writeFileSync as S, mkdirSync as O, readFileSync as J, statSync as ie, readdirSync as le } from "fs";
+import { readFile as pe, writeFile as fe } from "fs/promises";
+import { p as U, a as de, b as ue, c as ge } from "./parse-templates-BuKrl3n7.js";
+import { createLogger as me, format as A, transports as ye } from "winston";
+const Y = (e) => {
+  if (!e || e === "/") throw new Error("Could not find package.json file");
+  const t = o(e, "package.json");
+  return Z(t) ? t : Y(o(e, ".."));
+}, he = async (e) => {
+  const t = Y(e);
+  return await pe(t, "utf-8").then(JSON.parse).catch(() => {
+  });
+}, be = async (e) => {
+  const t = await he(e);
+  if (t)
+    return t.type;
+};
+let v;
+const Q = async (e) => {
+  if (v) return v;
+  const t = await be(e);
+  return t === "module" ? v = "esm" : (t === "commonjs" || import.meta.url.endsWith(".cjs")) && (v = "cjs"), v || "esm";
+}, z = me({
+  level: "debug",
+  format: A.combine(A.colorize(), A.cli()),
+  transports: [new ye.Console({})]
+}), Me = (e) => {
+  z.error(e);
+};
+function ee(e) {
+  return e ? typeof e != "string" ? ee(String(e)) : e.replace(/[\s-]/g, ".").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (t, a) => (a > 0 ? "." : "") + t.toLowerCase()) : "";
+}
+const $e = {
+  /** Set box model to border-box */
+  "*, *::before, *::after": {
+    boxSizing: "border-box"
+  },
+  /** Remove default margin and padding */
+  "*": {
+    margin: 0
+  },
+  /** Remove adjust font properties */
+  html: {
+    lineHeight: 1.15,
+    textSizeAdjust: "100%",
+    WebkitFontSmoothing: "antialiased"
+  },
+  /** Make media elements responsive */
+  "img, picture, video, canvas, svg": {
+    display: "block",
+    maxWidth: "100%"
+  },
+  /** Avoid overflow of text */
+  "p, h1, h2, h3, h4, h5, h6": {
+    overflowWrap: "break-word"
+  },
+  /** Improve text wrapping */
+  p: {
+    textWrap: "pretty"
+  },
+  "h1, h2, h3, h4, h5, h6": {
+    textWrap: "balance"
+  },
+  /** Improve button line height */
+  button: {
+    lineHeight: "1em"
+  },
+  /** Improve form elements */
+  "input, optgroup, select, textarea": {
+    fontFamily: "inherit",
+    fontSize: "100%",
+    lineHeight: "1.15em"
+  }
+}, B = {
+  externalModules: []
+}, te = (e) => {
+  if (B.externalModules.length > 0) return B.externalModules;
+  const t = o(e, "salty.config.ts"), r = J(t, "utf8").match(/externalModules:\s?\[(.*)\]/);
+  if (!r) return [];
+  const l = r[1].split(",").map((s) => s.replace(/['"`]/g, "").trim());
+  return B.externalModules = l, l;
+}, W = (e) => o(e, "./saltygen"), Se = ["salty", "css", "styles", "styled"], we = (e = []) => new RegExp(`\\.(${[...Se, ...e].join("|")})\\.`), G = (e, t = []) => we(t).test(e), Fe = async (e) => {
+  const t = W(e), a = o(e, "salty.config.ts"), r = o(t, "salty.config.js"), l = await Q(e), s = te(e);
+  await X.build({
+    entryPoints: [a],
+    minify: !0,
+    treeShaking: !0,
+    bundle: !0,
+    outfile: r,
+    format: l,
+    external: s
+  });
+  const g = Date.now(), { config: m } = await import(`${r}?t=${g}`);
+  return m;
+}, xe = async (e) => {
+  const t = await Fe(e), a = /* @__PURE__ */ new Set(), r = (i, f = []) => i ? Object.entries(i).flatMap(([y, d]) => {
+    if (!d) return;
+    if (typeof d == "object") return r(d, [...f, y]);
+    const V = ee(y), _ = R(y), D = [...f, V].join(".");
+    a.add(`"${D}"`);
+    const x = [...f.map(R), _].join("-"), { result: C } = ge(d);
+    return `--${x}: ${C};`;
+  }) : [], l = (i) => i ? Object.entries(i).flatMap(([f, y]) => {
+    const d = r(y);
+    return f === "base" ? d.join("") : `${f} { ${d.join("")} }`;
+  }) : [], s = (i) => i ? Object.entries(i).flatMap(([f, y]) => Object.entries(y).flatMap(([d, V]) => {
+    const _ = r(V, [f]), D = `.${f}-${d}, [data-${f}="${d}"]`, x = _.join("");
+    return `${D} { ${x} }`;
+  })) : [], g = r(t.variables), m = l(t.responsiveVariables), w = s(t.conditionalVariables), n = W(e), p = o(n, "css/_variables.css"), h = `:root { ${g.join("")} ${m.join("")} } ${w.join("")}`;
+  S(p, h);
+  const F = o(n, "css/_global.css"), j = U(t.global, "");
+  S(F, `@layer global { ${j} }`);
+  const b = o(n, "css/_reset.css"), u = t.reset === "none" ? {} : typeof t.reset == "object" ? t.reset : $e, k = U(u, "");
+  S(b, `@layer reset { ${k} }`);
+  const c = o(n, "css/_templates.css"), $ = de(t.templates), N = ue(t.templates);
+  S(c, $);
+  const T = o(n, "types/css-tokens.d.ts"), M = `
+  // Variable types
+  type VariableTokens = ${[...a].join("|")}; 
+  type PropertyValueToken = \`{\${VariableTokens}}\`;
+
+  // Template types
+  type TemplateTokens = {
+    ${Object.entries(N).map(([i, f]) => `${i}?: ${f}`).join(`
+`)}
+  }
+  `;
+  S(T, M);
+}, K = async (e, t, a) => {
+  const r = H(t), l = o(a, "./temp");
+  Z(l) || O(l);
+  const s = I(t);
+  let g = J(t, "utf8");
+  g = g.replace(/styled\([^"'`{,]+,/g, "styled('div',");
+  const m = o(a, "js", r + ".js"), w = te(e), n = await Q(e);
+  await X.build({
+    stdin: {
+      contents: g,
+      sourcefile: s.base,
+      resolveDir: s.dir,
+      loader: "tsx"
+    },
+    minify: !1,
+    treeShaking: !0,
+    bundle: !0,
+    outfile: m,
+    format: n,
+    target: ["node20"],
+    keepNames: !0,
+    external: w,
+    packages: "external"
+  });
+  const p = Date.now();
+  return await import(`${m}?t=${p}`);
+}, L = async (e) => {
+  const t = W(e), a = o(t, "salty.config.js"), { config: r } = await import(a);
+  return r;
+}, se = () => {
+  try {
+    return process.env.NODE_ENV === "production";
+  } catch {
+    return !1;
+  }
+}, ve = async (e, t = se()) => {
+  try {
+    const a = Date.now();
+    t ? z.info("Generating CSS in production mode! 🔥") : z.info("Generating CSS in development mode! 🚀");
+    const r = [], l = [], s = W(e), g = o(s, "index.css");
+    (() => {
+      Z(s) && ce("rm -rf " + s), O(s), O(o(s, "css")), O(o(s, "types"));
+    })(), await xe(e);
+    const w = await L(e);
+    async function n(c, $) {
+      const N = ["node_modules", "saltygen"], T = ie(c);
+      if (T.isDirectory()) {
+        const E = le(c);
+        if (N.some((i) => c.includes(i))) return;
+        await Promise.all(E.map((i) => n(o(c, i), o($, i))));
+      } else if (T.isFile() && G(c)) {
+        const M = await K(e, c, s), i = [];
+        Object.entries(M).forEach(([D, x]) => {
+          if (x.isKeyframes && x.css) {
+            const q = `a_${x.animationName}.css`, re = `css/${q}`, ae = o(s, re);
+            r.push(q), S(ae, x.css);
+            return;
+          }
+          if (!x.generator) return;
+          const C = x.generator._withBuildContext({
+            name: D,
+            config: w,
+            prod: t
+          });
+          l[C.priority] || (l[C.priority] = []), l[C.priority].push(C.cssFileName), i.push(C.cssFileName);
+          const ne = `css/${C.cssFileName}`, oe = o(s, ne);
+          S(oe, C.css);
+        });
+        const f = i.map((D) => `@import url('./${D}');`).join(`
+`), y = H(c, 6), d = I(c), V = R(d.name), _ = o(s, `css/f_${V}-${y}.css`);
+        S(_, f);
+      }
+    }
+    await n(e, s);
+    const p = r.map((c) => `@import url('./css/${c}');`).join(`
+`);
+    let b = `@layer reset, global, l0, l1, l2, l3, l4, l5, l6, l7, l8;
+
+${["_variables.css", "_reset.css", "_global.css", "_templates.css"].filter((c) => {
+      try {
+        return J(o(s, "css", c), "utf8").length > 0;
+      } catch {
+        return !1;
+      }
+    }).map((c) => `@import url('./css/${c}');`).join(`
+`)}
+${p}`;
+    if (w.importStrategy !== "component") {
+      const c = l.flat().map(($) => `@import url('./css/${$}');`).join(`
+`);
+      b += c;
+    }
+    S(g, b);
+    const u = Date.now() - a, k = u < 200 ? "🔥" : u < 500 ? "🚀" : u < 1e3 ? "🎉" : u < 2e3 ? "🚗" : u < 5e3 ? "🤔" : "🥴";
+    z.info(`Generated CSS in ${u}ms! ${k}`);
+  } catch (a) {
+    console.error(a);
+  }
+}, Ee = async (e, t) => {
+  try {
+    const a = [], r = o(e, "./saltygen"), l = o(r, "index.css");
+    if (G(t)) {
+      const g = await L(e), m = await K(e, t, r);
+      Object.entries(m).forEach(([F, j]) => {
+        if (!j.generator) return;
+        const b = j.generator._withBuildContext({
+          name: F,
+          config: g
+        }), P = `css/${b.cssFileName}`, u = o(r, P);
+        a.push(b.cssFileName), S(u, b.css);
+      });
+      const w = J(l, "utf8").split(`
+`), n = a.map((F) => `@import url('../saltygen/css/${F}');`), h = [.../* @__PURE__ */ new Set([...w, ...n])].join(`
+`);
+      S(l, h);
+    }
+  } catch (a) {
+    console.error(a);
+  }
+}, Ve = async (e, t, a = se()) => {
+  try {
+    const r = o(e, "./saltygen");
+    if (G(t)) {
+      const s = J(t, "utf8");
+      s.replace(/^(?!export\s)const\s.*/gm, (p) => `export ${p}`) !== s && await fe(t, s);
+      const m = await L(e), w = await K(e, t, r);
+      let n = s;
+      if (Object.entries(w).forEach(([p, h]) => {
+        var y;
+        if (h.isKeyframes || !h.generator) return;
+        const F = h.generator._withBuildContext({
+          name: p,
+          config: m,
+          prod: a
+        }), j = new RegExp(`\\s${p}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(s);
+        if (!j) return console.error("Could not find the original declaration");
+        const b = (y = j.at(1)) == null ? void 0 : y.trim(), P = new RegExp(`\\s${p}[=\\s]+styled\\(`, "g").exec(n);
+        if (!P) return console.error("Could not find the original declaration");
+        const { index: u } = P;
+        let k = !1;
+        const c = setTimeout(() => k = !0, 5e3);
+        let $ = 0, N = !1, T = 0;
+        for (; !N && !k; ) {
+          const d = n[u + $];
+          d === "(" && T++, d === ")" && T--, T === 0 && d === ")" && (N = !0), $ > n.length && (k = !0), $++;
+        }
+        if (!k) clearTimeout(c);
+        else throw new Error("Failed to find the end of the styled call and timed out");
+        const E = u + $, M = n.slice(u, E), i = n, f = ` ${p} = styled(${b}, "${F.classNames}", ${JSON.stringify(F.props)});`;
+        n = n.replace(M, f), i === n && console.error("Minimize file failed to change content", { name: p, tagName: b });
+      }), m.importStrategy === "component") {
+        const p = H(t, 6), h = I(t);
+        n = `import '../../saltygen/css/${`f_${R(h.name)}-${p}.css`}';
+${n}`;
+      }
+      return n = n.replace("{ styled }", "{ styledClient as styled }"), n = n.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), n;
+    }
+  } catch (r) {
+    console.error("Error in minimizeFile:", r);
+  }
+};
+export {
+  Me as a,
+  we as b,
+  xe as c,
+  K as d,
+  Ee as e,
+  ve as g,
+  G as i,
+  z as l,
+  Ve as m,
+  Se as s
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/core",
-  "version": "0.0.1-alpha.13",
+  "version": "0.0.1-alpha.130",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -10,7 +10,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://github.com/margarita-form/salty-css",
+  "description": "Core library for Salty CSS. Will be used by other Salty CSS libraries and plugins.",
+  "homepage": "https://salty-css.dev/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/margarita-form/salty-css.git"
+  },
   "bugs": {
     "url": "https://github.com/margarita-form/salty-css/issues"
   },
@@ -23,11 +28,18 @@
     "name": "core"
   },
   "peerDependencies": {
+    "commander": ">=12.x",
+    "ejs": ">=3.x",
     "esbuild": ">=0.21.x",
+    "ora": ">=8.x",
     "react": ">=18.x || >=19.x",
     "winston": ">=3.x"
   },
   "exports": {
+    "./bin/main": {
+      "import": "./bin/main.js",
+      "require": "./bin/main.cjs"
+    },
     "./compiler": {
       "import": "./compiler/index.js",
       "require": "./compiler/index.cjs"
@@ -52,5 +64,11 @@
       "import": "./util/index.js",
       "require": "./util/index.cjs"
     }
+  },
+  "bin": {
+    "salty": "./bin/index.js",
+    "salty-css": "./bin/index.js",
+    "salty-css-cjs": "./bin/index.cjs",
+    "@salty-css/core": "./bin/index.js"
   }
 }

package/parse-templates-BuKrl3n7.js

@@ -0,0 +1,100 @@
+import { d as O } from "./dash-case-DBThphLm.js";
+const N = (t, e) => {
+  if (typeof t != "string") return { result: t };
+  if (!e) return { result: t };
+  const s = [];
+  return Object.values(e).forEach((n) => {
+    const { pattern: o, transform: i } = n;
+    t = t.replace(o, (d) => {
+      const { value: c, css: j } = i(d);
+      return j && s.push(j), c;
+    });
+  }), { result: t, additionalCss: s };
+}, P = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${O(n[1].replaceAll(".", "-"))})`) } : { result: t }, a = (t, e, s, n) => {
+  if (!t) return "";
+  const o = [], i = Object.entries(t).reduce((c, [j, r]) => {
+    const f = j.trim();
+    if (typeof r == "function" && (r = r()), typeof r == "object") {
+      if (!r) return c;
+      if (f === "variants")
+        return Object.entries(r).forEach(([p, u]) => {
+          u && Object.entries(u).forEach(([m, b]) => {
+            if (!b) return;
+            const y = `${e}.${p}-${m}`, l = a(b, y, s);
+            o.push(l);
+          });
+        }), c;
+      if (f === "defaultVariants")
+        return c;
+      if (f === "compoundVariants")
+        return r.forEach((p) => {
+          const { css: u, ...m } = p, b = Object.entries(m).reduce((l, [w, W]) => `${l}.${w}-${W}`, e), y = a(u, b, s);
+          o.push(y);
+        }), c;
+      if (f.startsWith("@")) {
+        const p = a(r, e, s), u = `${f} {
+ ${p.replace(`
+`, `
+ `)}
+}`;
+        return o.push(u), c;
+      }
+      const $ = j.includes("&") ? f.replace("&", e) : f.startsWith(":") ? `${e}${f}` : `${e} ${f}`, h = a(r, $, s);
+      return o.push(h), c;
+    }
+    if (n != null && n.templates && n.templates[f]) {
+      const h = r.split(".").reduce((p, u) => p[u], n.templates[f]);
+      if (h) {
+        const p = a(h, "");
+        return `${c}${p}`;
+      }
+      return console.warn(`Template "${f}" with path of "${r}" was not found in config!`), c;
+    }
+    const S = f.startsWith("-") ? f : O(f), g = ($, h = ";") => c = `${c}${$}${h}`, T = ($) => g(`${S}:${$}`);
+    if (typeof r == "number") return T(r);
+    if (typeof r != "string")
+      if ("toString" in r) r = r.toString();
+      else return c;
+    const { modifiers: V } = n || {}, k = function* () {
+      yield P(r), yield N(r, V);
+    }();
+    for (const { result: $, additionalCss: h = [] } of k)
+      r = $, h.forEach((p) => {
+        const u = a(p, "");
+        g(u, "");
+      });
+    return T(r);
+  }, "");
+  if (!i) return o.join(`
+`);
+  if (!e) return i;
+  let d = "";
+  return s !== void 0 ? d = `@layer l${s} { ${e} { ${i} } }` : d = `${e} { ${i} }`, [d, ...o].join(`
+`);
+}, _ = (t, e = []) => {
+  if (!t) return "";
+  const s = [], n = {};
+  if (Object.entries(t).forEach(([o, i]) => {
+    if (typeof i == "object") {
+      if (!i) return;
+      const d = o.trim(), c = _(i, [...e, d]);
+      s.push(c);
+    } else
+      n[o] = i;
+  }), Object.keys(n).length) {
+    const o = e.map(O).join("-"), i = a(n, `.${o}`);
+    s.push(i);
+  }
+  return s.join(`
+`);
+}, A = (t) => Object.keys(t), K = (t) => Object.entries(t).reduce((e, [s, n]) => (typeof n == "object" && (e[s] = E(n).map((o) => `"${o}"`).join(" | ")), e), {}), E = (t, e = "", s = /* @__PURE__ */ new Set()) => t ? (Object.entries(t).forEach(([n, o]) => {
+  const i = e ? `${e}.${n}` : n;
+  return typeof o == "object" ? E(o, i, s) : s.add(e);
+}), [...s]) : [];
+export {
+  _ as a,
+  K as b,
+  P as c,
+  A as g,
+  a as p
+};

package/parse-templates-DIOn-gO_.cjs

@@ -0,0 +1,8 @@
+"use strict";const T=require("./dash-case-BJEkFEGQ.cjs"),N=(t,e)=>{if(typeof t!="string")return{result:t};if(!e)return{result:t};const r=[];return Object.values(e).forEach(n=>{const{pattern:o,transform:i}=n;t=t.replace(o,d=>{const{value:c,css:j}=i(d);return j&&r.push(j),c})}),{result:t,additionalCss:r}},S=t=>typeof t!="string"?{result:t}:/\{[^{}]+\}/g.test(t)?{result:t.replace(/\{([^{}]+)\}/g,(...n)=>`var(--${T.dashCase(n[1].replaceAll(".","-"))})`)}:{result:t},a=(t,e,r,n)=>{if(!t)return"";const o=[],i=Object.entries(t).reduce((c,[j,s])=>{const p=j.trim();if(typeof s=="function"&&(s=s()),typeof s=="object"){if(!s)return c;if(p==="variants")return Object.entries(s).forEach(([f,u])=>{u&&Object.entries(u).forEach(([l,m])=>{if(!m)return;const y=`${e}.${f}-${l}`,b=a(m,y,r);o.push(b)})}),c;if(p==="defaultVariants")return c;if(p==="compoundVariants")return s.forEach(f=>{const{css:u,...l}=f,m=Object.entries(l).reduce((b,[q,K])=>`${b}.${q}-${K}`,e),y=a(u,m,r);o.push(y)}),c;if(p.startsWith("@")){const f=a(s,e,r),u=`${p} {
+ ${f.replace(`
+`,`
+ `)}
+}`;return o.push(u),c}const $=j.includes("&")?p.replace("&",e):p.startsWith(":")?`${e}${p}`:`${e} ${p}`,h=a(s,$,r);return o.push(h),c}if(n!=null&&n.templates&&n.templates[p]){const h=s.split(".").reduce((f,u)=>f[u],n.templates[p]);if(h){const f=a(h,"");return`${c}${f}`}return console.warn(`Template "${p}" with path of "${s}" was not found in config!`),c}const k=p.startsWith("-")?p:T.dashCase(p),O=($,h=";")=>c=`${c}${$}${h}`,g=$=>O(`${k}:${$}`);if(typeof s=="number")return g(s);if(typeof s!="string")if("toString"in s)s=s.toString();else return c;const{modifiers:w}=n||{},W=function*(){yield S(s),yield N(s,w)}();for(const{result:$,additionalCss:h=[]}of W)s=$,h.forEach(f=>{const u=a(f,"");O(u,"")});return g(s)},"");if(!i)return o.join(`
+`);if(!e)return i;let d="";return r!==void 0?d=`@layer l${r} { ${e} { ${i} } }`:d=`${e} { ${i} }`,[d,...o].join(`
+`)},E=(t,e=[])=>{if(!t)return"";const r=[],n={};if(Object.entries(t).forEach(([o,i])=>{if(typeof i=="object"){if(!i)return;const d=o.trim(),c=E(i,[...e,d]);r.push(c)}else n[o]=i}),Object.keys(n).length){const o=e.map(T.dashCase).join("-"),i=a(n,`.${o}`);r.push(i)}return r.join(`
+`)},P=t=>Object.keys(t),_=t=>Object.entries(t).reduce((e,[r,n])=>(typeof n=="object"&&(e[r]=V(n).map(o=>`"${o}"`).join(" | ")),e),{}),V=(t,e="",r=new Set)=>t?(Object.entries(t).forEach(([n,o])=>{const i=e?`${e}.${n}`:n;return typeof o=="object"?V(o,i,r):r.add(e)}),[...r]):[];exports.getTemplateKeys=P;exports.getTemplateTypes=_;exports.parseStyles=a;exports.parseTemplates=E;exports.parseValueTokens=S;

package/pascal-case-BQpR5PdN.js

@@ -0,0 +1,6 @@
+function p(e) {
+  return e ? typeof e != "string" ? p(String(e)) : e.replace(/\s/g, "-").replace(/[-_]([a-z0-9])/g, (a) => a[1].toUpperCase()).replace(/^[a-z]/, (a) => a.toUpperCase()) : "";
+}
+export {
+  p
+};

package/pascal-case-iWoaJWwT.cjs

@@ -0,0 +1 @@
+"use strict";function r(e){return e?typeof e!="string"?r(String(e)):e.replace(/\s/g,"-").replace(/[-_]([a-z0-9])/g,a=>a[1].toUpperCase()).replace(/^[a-z]/,a=>a.toUpperCase()):""}exports.pascalCase=r;

package/react-styled-file-CGVf5n1B.js

@@ -0,0 +1,11 @@
+const e = `import { styled } from "@salty-css/react/styled";
+
+export const <%- name %> = styled('<%- tag %>', {
+  <% if(className) { %>className: '<%- className %>',<% } %>
+  base: {
+    // Add your styles here
+  }
+})`;
+export {
+  e as default
+};

package/react-styled-file-Dkubsz-U.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`import { styled } from "@salty-css/react/styled";
+
+export const <%- name %> = styled('<%- tag %>', {
+  <% if(className) { %>className: '<%- className %>',<% } %>
+  base: {
+    // Add your styles here
+  }
+})`;exports.default=e;

package/react-vanilla-file-CCXbsjIb.js

@@ -0,0 +1,18 @@
+const n = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
+
+interface <%- componentName %>Props {
+  text?: string;
+}
+
+export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName %>Props) => {
+  return (
+    <<%- styledComponentName %>>
+      {text}
+    </<%- styledComponentName %>>
+  );
+};
+
+export default <%- componentName %>;`;
+export {
+  n as default
+};

package/react-vanilla-file-CG_WJLam.cjs

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`import { <%- styledComponentName %> } from "./<%- fileName %>.css";
+
+interface <%- componentName %>Props {
+  text?: string;
+}
+
+export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName %>Props) => {
+  return (
+    <<%- styledComponentName %>>
+      {text}
+    </<%- styledComponentName %>>
+  );
+};
+
+export default <%- componentName %>;`;exports.default=e;

package/salty.config-BhBY_oOk.js

@@ -0,0 +1,10 @@
+const n = `import { defineConfig } from '@salty-css/core/config';
+
+export const config = defineConfig({
+  // Add your custom config here
+  externalModules: ['react', 'react-dom']
+});
+`;
+export {
+  n as default
+};

package/salty.config-Dk6ZcCxI.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`import { defineConfig } from '@salty-css/core/config';
+
+export const config = defineConfig({
+  // Add your custom config here
+  externalModules: ['react', 'react-dom']
+});
+`;exports.default=e;

package/templates/salty-reset.d.ts

@@ -0,0 +1,2 @@
+import { GlobalStyles } from '../config/config-types';
+export declare const saltyReset: GlobalStyles;

package/types/index.d.ts

@@ -1,32 +1,40 @@
-import { AllHTMLAttributes, ReactDOM, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { StyleComponentGenerator } from '../generator';
-import { OrString } from './util-types';
+import { NeverObj, OrAny, OrString } from './util-types';
+import type * as CSS from 'csstype';
 export type CreateElementProps = {
     extend?: Tag<any>;
     children?: ReactNode;
     className?: string;
     element?: string;
-    passVariantProps?: boolean;
-    style?: any;
+    passProps?: boolean | string | string[];
+    style?: CssProperties | {
+        [key: string]: PropertyValueToken | NeverObj;
+    };
     /** 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;
+    (props: OrAny | PROPS): ReactNode;
     generator?: StyleComponentGenerator;
 };
-export type Tag<PROPS extends StyledComponentProps> = OrString | keyof ReactDOM | FnComponent<PROPS>;
-export type CompoundVariant = {
-    [key: PropertyKey]: any;
-    css: CssStyles;
+export type Tag<PROPS extends StyledComponentProps> = OrString | keyof HTMLElementTagNameMap | FnComponent<PROPS>;
+type CSSPropertyValueFunction = (params?: any) => any;
+export type CssProperties = {
+    [key in keyof CSS.Properties]: CSS.Properties[key] | PropertyValueToken | CSSPropertyValueFunction | NeverObj;
 };
-type InvalidVariantKeys = keyof AllHTMLAttributes<HTMLElement>;
-type StyleKeys = keyof Required<AllHTMLAttributes<HTMLElement>>['style'];
-export type StyleValue<K extends string> = K extends StyleKeys ? Required<AllHTMLAttributes<HTMLElement>>['style'][K] : never;
+type CssPropertyKeys = keyof CssProperties;
+export type StyleValue<K extends string> = K extends CssPropertyKeys ? CssProperties[K] : never;
+type InvalidVariantKeys = '' | 'css';
 type VariantOptions = {
     [key in InvalidVariantKeys]?: never;
 };
+export type CompoundVariant = {
+    [key: PropertyKey]: string | boolean | undefined;
+} | {
+    css: CssStyles;
+};
 type Variants = {
     variants?: VariantOptions & {
         [key: PropertyKey]: {
@@ -38,25 +46,44 @@ type Variants = {
     };
     compoundVariants?: CompoundVariant[];
 };
-type VariantPropValue<T> = T extends 'true' ? 'true' | true : T;
-export type VariantProps<STYLES extends StyledParams> = STYLES['variants'] extends undefined ? {} : {
-    [K in keyof STYLES['variants']]?: VariantPropValue<keyof STYLES['variants'][K]> | '';
+type BooleanVariantValue = 'true' | 'false' | boolean;
+type VariantPropValue<T> = T extends 'true' ? BooleanVariantValue : T extends 'false' ? BooleanVariantValue : T extends boolean ? BooleanVariantValue : T | '';
+type PickType<T, K extends AllKeys<T>> = T extends {
+    [k in K]?: any;
+} ? T[K] : undefined;
+type AllKeys<T> = T extends any ? keyof T : never;
+export type Merge<T> = {
+    [k in AllKeys<T>]?: PickType<T, k>;
 };
-export type ParentComponentProps<TAG extends Tag<any>> = TAG extends (props: infer P) => ReactNode ? P : unknown;
-export type CssRuntimeValues = {
-    cssValues?: Record<string, unknown>;
+export type VariantProps<STYLES extends StyledParams, B = STYLES['variants'] extends undefined ? object : STYLES['variants'], C = STYLES['compoundVariants'] extends CompoundVariant[] ? Merge<STYLES['compoundVariants'][number]> : object> = Merge<{
+    [K in keyof B]?: K extends 'css' ? never : VariantPropValue<keyof B[K]>;
+} | {
+    [K in keyof C]?: K extends 'css' ? never : VariantPropValue<C[K]>;
+}>;
+type CssValuePropKey = `props-${string}`;
+export type ValueProps = {
+    [key: CssValuePropKey]: string;
 };
+export type ParentComponentProps<TAG extends Tag<any>> = TAG extends (props: infer P) => ReactNode ? P : object;
 type StylePropertyValue = Record<never, never> & unknown;
 export type CssStyles = {
-    [key in StyleKeys | OrString]?: StyleValue<key> | StylePropertyValue | PropertyValueToken | CssStyles;
+    [key in OrString]?: CssProperties | StylePropertyValue | PropertyValueToken | TemplateTokens | CssStyles;
 };
 export type Styles = CssStyles & Variants;
 export interface GeneratorOptions {
     className?: string;
     displayName?: string;
     element?: string;
+    passProps?: boolean | string | string[];
+    defaultProps?: Record<PropertyKey, unknown>;
 }
+interface Base extends CssProperties, CssStyles, CssPseudos, TemplateTokens {
+}
+type Pseudos = CSS.Pseudos | `&${CSS.Pseudos}`;
+type CssPseudos = {
+    [P in Pseudos]?: Base;
+};
 export interface StyledParams extends GeneratorOptions, Variants {
-    base?: CssStyles;
+    base?: Base;
 }
 export {};