@salty-css/core 0.0.1-alpha.7 → 0.0.1-alpha.70

package/compiler/index.js

@@ -1,180 +1,196 @@
-import * as M from "esbuild";
-import * as N from "winston";
-import { execSync as z } from "child_process";
-import { toHash as T, dashCase as I } from "../util/index.js";
+import * as z from "esbuild";
+import { execSync as q } from "child_process";
+import { t as v, d as _ } from "../dash-case-DMQMcCO6.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 { writeFile as L } from "fs/promises";
-import { p as q, a as A, b as U } from "../parse-templates-BOSK0Tb6.js";
-const ot = N.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"], O = (s) => new RegExp(`\\.(${W.join("|")})\\.`).test(s), X = async (s) => {
-  const e = k(s), n = o(s, "salty-config.ts"), t = o(e, "salty-config.js");
-  await M.build({
+import { writeFileSync as F, existsSync as A, mkdirSync as E, statSync as L, readdirSync as U, readFileSync as M } from "fs";
+import { writeFile as X } from "fs/promises";
+import { p as Y, a as Z, b as Q } from "../parse-templates-DUUSaubj.js";
+const W = () => import.meta.url.endsWith(".cjs") ? "cjs" : "esm", V = {
+  externalModules: []
+}, H = (t) => {
+  if (V.externalModules.length > 0) return V.externalModules;
+  const e = o(t, "salty.config.ts"), s = M(e, "utf8").match(/externalModules:\s?\[(.*)\]/);
+  if (!s) return [];
+  const a = s[1].split(",").map((w) => w.replace(/['"`]/g, "").trim());
+  return V.externalModules = a, a;
+}, N = (t) => o(t, "./saltygen"), tt = ["salty", "css", "styles", "styled"], st = (t = []) => new RegExp(`\\.(${[...tt, ...t].join("|")})\\.`), O = (t, e = []) => st(e).test(t), et = async (t) => {
+  const e = N(t), n = o(t, "salty.config.ts"), s = o(e, "salty.config.js"), a = W(), w = H(t);
+  await z.build({
     entryPoints: [n],
     minify: !0,
     treeShaking: !0,
     bundle: !0,
-    outfile: t,
-    format: "esm",
-    external: ["react"]
+    outfile: s,
+    format: a,
+    external: w
   });
-  const c = Date.now(), { config: S } = await import(`${t}?t=${c}`);
-  return S;
-}, Y = async (s) => {
-  const e = await X(s), n = /* @__PURE__ */ new Set(), t = (m, l = []) => m ? Object.entries(m).flatMap(([p, i]) => {
-    if (!i) return;
-    if (typeof i == "object") return t(i, [...l, p]);
-    const C = [...l, p].join(".");
+  const f = Date.now(), { config: y } = await import(`${s}?t=${f}`);
+  return y;
+}, nt = async (t) => {
+  const e = await et(t), n = /* @__PURE__ */ new Set(), s = (i, l = []) => i ? Object.entries(i).flatMap(([m, p]) => {
+    if (!p) return;
+    if (typeof p == "object") return s(p, [...l, m]);
+    const C = [...l, m].join(".");
     n.add(`"${C}"`);
-    const D = [...l.map(I), I(p)].join("-"), { result: P } = U(i);
-    return `--${D}: ${P};`;
-  }) : [], c = (m) => m ? Object.entries(m).flatMap(([l, p]) => {
-    const i = t(p);
-    return l === "base" ? i.join("") : `${l} { ${i.join("")} }`;
-  }) : [], S = (m) => m ? Object.entries(m).flatMap(([l, p]) => Object.entries(p).flatMap(([i, C]) => {
-    const D = t(C, [l]), P = `.${l}-${i}, [data-${l}="${i}"]`, V = D.join("");
-    return `${P} { ${V} }`;
-  })) : [], d = t(e.variables), w = c(e.responsiveVariables), a = S(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"), j = q(e.global, "");
-  $(g, j);
-  const F = o(b, "css/templates.css"), x = A(e.templates);
-  $(F, x);
-}, E = async (s, e) => {
-  const n = T(s), t = o(e, "js", n + ".js");
-  await M.build({
-    entryPoints: [s],
+    const d = [...l.map(_), _(m)].join("-"), { result: h } = Q(p);
+    return `--${d}: ${h};`;
+  }) : [], a = (i) => i ? Object.entries(i).flatMap(([l, m]) => {
+    const p = s(m);
+    return l === "base" ? p.join("") : `${l} { ${p.join("")} }`;
+  }) : [], w = (i) => i ? Object.entries(i).flatMap(([l, m]) => Object.entries(m).flatMap(([p, C]) => {
+    const d = s(C, [l]), h = `.${l}-${p}, [data-${l}="${p}"]`, k = d.join("");
+    return `${h} { ${k} }`;
+  })) : [], f = s(e.variables), y = a(e.responsiveVariables), r = w(e.conditionalVariables), S = N(t), $ = o(S, "css/variables.css"), D = `:root { ${f.join("")} ${y.join("")} } ${r.join("")}`;
+  F($, D);
+  const g = o(S, "types/css-tokens.d.ts"), u = `type VariableTokens = ${[...n].join("|") || '""'}; type PropertyValueToken = \`{\${VariableTokens}}\``;
+  F(g, u);
+  const j = o(S, "css/global.css"), x = Y(e.global, "");
+  F(j, x);
+  const b = o(S, "css/templates.css"), T = Z(e.templates);
+  F(b, T);
+}, R = async (t, e, n) => {
+  const s = v(e), a = o(n, "js", s + ".js"), w = W(), f = H(t);
+  await z.build({
+    entryPoints: [e],
     minify: !0,
     treeShaking: !0,
     bundle: !0,
-    outfile: t,
-    format: "esm",
+    outfile: a,
+    format: w,
     target: ["es2022"],
     keepNames: !0,
-    external: ["react"]
+    external: f
   });
-  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);
-  return t;
-}, rt = async (s) => {
+  const y = Date.now();
+  return await import(`${a}?t=${y}`);
+}, B = async (t) => {
+  const e = N(t), n = o(e, "salty.config.js"), { config: s } = await import(n);
+  return s;
+}, pt = async (t) => {
   try {
-    const e = [], n = [], t = k(s), c = o(t, "index.css");
+    const e = [], n = [], s = N(t), a = o(s, "index.css");
     (() => {
-      H(t) && z("rm -rf " + t), v(t), v(o(t, "css")), v(o(t, "types"));
-    })(), await Y(s);
-    const d = await R(s);
-    async function w(r, f) {
-      const h = J(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), j = [];
-        Object.entries(g).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);
+      A(s) && q("rm -rf " + s), E(s), E(o(s, "css")), E(o(s, "types"));
+    })(), await nt(t);
+    const f = await B(t);
+    async function y(c, u) {
+      const j = ["node_modules", "saltygen"], x = L(c);
+      if (x.isDirectory()) {
+        const b = U(c);
+        if (j.some((i) => c.includes(i))) return;
+        await Promise.all(b.map((i) => y(o(c, i), o(u, i))));
+      } else if (x.isFile() && O(c)) {
+        const T = await R(t, c, s), i = [];
+        Object.entries(T).forEach(([C, d]) => {
+          if (d.isKeyframes && d.css) {
+            const I = `${d.animationName}.css`, G = `css/${I}`, J = o(s, G);
+            e.push(I), F(J, d.css);
             return;
           }
-          if (!p.generator) return;
-          const i = p.generator._withBuildContext({
-            name: l,
-            config: d
-          }), C = `${i.hash}-${i.priority}.css`;
-          n[i.priority] || (n[i.priority] = []), n[i.priority].push(C), j.push(C);
-          const D = `css/${C}`, P = o(t, D);
-          $(P, i.css);
+          if (!d.generator) return;
+          const h = d.generator._withBuildContext({
+            name: C,
+            config: f
+          }), k = `${h.hash}-${h.priority}.css`;
+          n[h.priority] || (n[h.priority] = []), n[h.priority].push(k), i.push(k);
+          const P = `css/${k}`, K = o(s, P);
+          F(K, h.css);
         });
-        const F = j.map((l) => `@import url('./${l}');`).join(`
-`), x = T(r, 6), m = o(t, `css/${x}.css`);
-        $(m, F);
+        const l = i.map((C) => `@import url('./${C}');`).join(`
+`), m = v(c, 6), p = o(s, `css/${m}.css`);
+        F(p, l);
       }
     }
-    await w(s, t);
-    const a = e.map((r) => `@import url('./css/${r}');`).join(`
+    await y(t, s);
+    const r = e.map((c) => `@import url('./css/${c}');`).join(`
 `);
-    let y = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
+    let g = `@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(`
+${["variables.css", "global.css", "templates.css"].filter((c) => {
+      try {
+        return M(o(s, "css", c), "utf8").length > 0;
+      } catch {
+        return !1;
+      }
+    }).map((c) => `@import url('./css/${c}');`).join(`
 `)}
-${a}`;
-    if (d.importStrategy !== "component") {
-      const r = n.flat().map((f) => `@import url('./css/${f}');`).join(`
+${r}`;
+    if (f.importStrategy !== "component") {
+      const c = n.flat().map((u) => `@import url('./css/${u}');`).join(`
 `);
-      y += r;
+      g += c;
     }
-    $(c, y);
+    F(a, g);
   } catch (e) {
     console.error(e);
   }
-}, it = async (s, e) => {
+}, ft = async (t, e) => {
   try {
-    const n = [], t = o(s, "./saltygen"), c = o(t, "index.css");
+    const n = [], s = o(t, "./saltygen"), a = o(s, "index.css");
     if (O(e)) {
-      const d = await R(s), w = await E(e, t);
-      Object.entries(w).forEach(([f, h]) => {
-        if (!h.generator) return;
-        const u = h.generator._withBuildContext({
-          name: f,
-          config: d
-        }), g = `${u.hash}-${u.priority}.css`, j = `css/${g}`, F = o(t, j);
-        n.push(g), $(F, u.css);
+      const f = await B(t), y = await R(t, e, s);
+      Object.entries(y).forEach(([g, c]) => {
+        if (!c.generator) return;
+        const u = c.generator._withBuildContext({
+          name: g,
+          config: f
+        }), j = `${u.hash}-${u.priority}.css`, x = `css/${j}`, b = o(s, x);
+        n.push(j), F(b, u.css);
       });
-      const a = _(c, "utf8").split(`
-`), b = n.map((f) => `@import url('../saltygen/css/${f}');`), r = [.../* @__PURE__ */ new Set([...a, ...b])].join(`
+      const r = M(a, "utf8").split(`
+`), S = n.map((g) => `@import url('../saltygen/css/${g}');`), D = [.../* @__PURE__ */ new Set([...r, ...S])].join(`
 `);
-      $(c, r);
+      F(a, D);
     }
   } catch (n) {
     console.error(n);
   }
-}, ct = async (s, e) => {
+}, ut = async (t, e) => {
   try {
-    const n = o(s, "./saltygen");
+    const n = o(t, "./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);
-      let a = c;
-      Object.entries(w).forEach(([y, r]) => {
-        var m;
-        if (r.isKeyframes) {
-          console.log("value", r);
-          return;
+      const a = M(e, "utf8");
+      a.replace(/^(?!export\s)const\s.*/gm, ($) => `export ${$}`) !== a && await X(e, a);
+      const f = await B(t), y = await R(t, e, n);
+      let r = a;
+      Object.entries(y).forEach(([$, D]) => {
+        var k;
+        if (D.isKeyframes || !D.generator) return;
+        const g = D.generator._withBuildContext({
+          name: $,
+          config: f
+        }), c = new RegExp(`\\s${$}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(a);
+        if (!c) return console.error("Could not find the original declaration");
+        const u = (k = c.at(1)) == null ? void 0 : k.trim(), j = new RegExp(`\\s${$}[=\\s]+styled\\(`, "g").exec(r);
+        if (!j) return console.error("Could not find the original declaration");
+        const { index: x } = j;
+        let b = !1;
+        const T = setTimeout(() => b = !0, 5e3);
+        let i = 0, l = !1, m = 0;
+        for (; !l && !b; ) {
+          const P = r[x + i];
+          P === "(" && m++, P === ")" && m--, m === 0 && P === ")" && (l = !0), i > r.length && (b = !0), i++;
         }
-        if (!r.generator) return;
-        const f = r.generator._withBuildContext({
-          name: y,
-          config: d
-        }), h = new RegExp(`${y}[=\\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: j } = f.props, F = `${y} = styled(${u}, "${f.classNames}", "${f._callerName}", ${JSON.stringify(g)}, ${JSON.stringify(
-          j
-        )});`, x = new RegExp(`${y}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`, "g");
-        a = a.replace(x, F);
+        if (!b) clearTimeout(T);
+        else throw new Error("Failed to find the end of the styled call and timed out");
+        const p = x + i, C = r.slice(x, p), d = r, h = ` ${$} = styled(${u}, "${g.classNames}", "${g._callerName}", ${JSON.stringify(g.props)});`;
+        r = r.replace(C, h), d === r && console.error("Minimize file failed to change content", { name: $, tagName: u });
       });
-      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;
+      const S = v(e, 6);
+      return f.importStrategy === "component" && (r = `import '../../saltygen/css/${S}.css';
+${r}`), r = r.replace("{ styled }", "{ styledClient as styled }"), r = r.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), r;
     }
   } catch (n) {
-    console.error(n);
+    console.error("Error in minimizeFile:", n);
   }
 };
 export {
-  E as compileSaltyFile,
-  rt as generateCss,
-  it as generateFile,
-  Y as generateVariables,
+  R as compileSaltyFile,
+  nt as generateConfigStyles,
+  pt as generateCss,
+  ft as generateFile,
   O as isSaltyFile,
-  ot as logger,
-  ct as minimizeFile
+  ut as minimizeFile,
+  tt as saltyFileExtensions,
+  st as saltyFileRegExp
 };

package/config/config-types.d.ts

@@ -1,7 +1,6 @@
 import { CssStyles } from '../types';
-type CssTemplate = CssStyles | {
-    [key: PropertyKey]: CssTemplate;
-};
+import { OrString } from '../types/util-types';
+export type GlobalStyles = Record<string, CssStyles>;
 export type CssVariables = Record<string, unknown>;
 export interface CssResponsiveVariables {
     [key: string]: CssVariables;
@@ -11,6 +10,9 @@ export interface CssConditionalVariables {
         [key: PropertyKey]: CssVariables;
     };
 }
+type CssTemplate = CssStyles | {
+    [key: PropertyKey]: CssTemplate;
+};
 export interface CssTemplates {
     [key: PropertyKey]: {
         [key: PropertyKey]: CssTemplate;
@@ -30,11 +32,11 @@ export interface SaltyConfig {
      * - `root` will import the css file from the root of the project.
      * - `component` will import the css file from the component's directory.
      */
-    importStrategy: 'root' | 'component';
+    importStrategy?: 'root' | 'component';
     /**
      * Base variables that can be used in all styles as they are applied globally to :root.
      */
-    variables: CssVariables;
+    variables?: CssVariables;
     /**
      * Variables that are defined for different media queries.
      */
@@ -46,7 +48,7 @@ export interface SaltyConfig {
     /**
      * The global styles that are imported in the root of the project.
      */
-    global: CssStyles;
+    global?: GlobalStyles;
     /**
      * The templates that can be used in styles to create reusable css.
      */
@@ -55,5 +57,9 @@ export interface SaltyConfig {
      * The modifiers that can transform css values.
      */
     modifiers?: CssModifiers;
+    /**
+     * Define modules that should not be bundled when generating the css file. This improves the performance of the css generation and can help with issues relared to external packages being imported in an environment that does not support them.
+     */
+    externalModules?: ('react' | 'react-dom' | OrString)[];
 }
 export {};

package/dash-case-DKzpenwY.cjs

@@ -0,0 +1 @@
+"use strict";const n=e=>String.fromCharCode(e+(e>25?39:97)),i=(e,r)=>{let t="",a;for(a=Math.abs(e);a>52;a=a/52|0)t=n(a%52)+t;return t=n(a%52)+t,t.length<r?t=t.padStart(r,"a"):t.length>r&&(t=t.slice(-r)),t},o=(e,r)=>{let t=r.length;for(;t;)e=e*33^r.charCodeAt(--t);return e},c=(e,r=3)=>{const t=o(5381,JSON.stringify(e))>>>0;return i(t,r)};function s(e){return e?typeof e!="string"?s(String(e)):e.replace(/\s/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(r,t)=>(t>0?"-":"")+r.toLowerCase()):""}exports.dashCase=s;exports.toHash=c;

package/dash-case-DMQMcCO6.js

@@ -0,0 +1,19 @@
+const n = (e) => String.fromCharCode(e + (e > 25 ? 39 : 97)), o = (e, r) => {
+  let t = "", a;
+  for (a = Math.abs(e); a > 52; a = a / 52 | 0) t = n(a % 52) + t;
+  return t = n(a % 52) + t, t.length < r ? t = t.padStart(r, "a") : t.length > r && (t = t.slice(-r)), t;
+}, i = (e, r) => {
+  let t = r.length;
+  for (; t; ) e = e * 33 ^ r.charCodeAt(--t);
+  return e;
+}, c = (e, r = 3) => {
+  const t = i(5381, JSON.stringify(e)) >>> 0;
+  return o(t, r);
+};
+function s(e) {
+  return e ? typeof e != "string" ? s(String(e)) : e.replace(/\s/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (r, t) => (t > 0 ? "-" : "") + r.toLowerCase()) : "";
+}
+export {
+  s as d,
+  c as t
+};

package/generator/index.cjs

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

package/generator/index.js

@@ -1,18 +1,23 @@
-import { toHash as a } from "../util/index.js";
-import { g as n, p as o } from "../parse-templates-BOSK0Tb6.js";
-class p {
-  constructor(t, s, e) {
-    this.tagName = t, this.styles = s, this.options = e;
+var h = Object.defineProperty;
+var m = (e, t, s) => t in e ? h(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var c = (e, t, s) => m(e, typeof t != "symbol" ? t + "" : t, s);
+import { t as l } from "../dash-case-DMQMcCO6.js";
+import { g, p as u } from "../parse-templates-DUUSaubj.js";
+class d {
+  constructor(t, s) {
+    c(this, "_callerName");
+    c(this, "_context");
+    this.tagName = t, this.params = s;
   }
   get hash() {
-    return a(this.styles);
+    return l(this.params.base || this.params);
   }
   get priority() {
     var t;
-    return typeof this.tagName == "function" ? (((t = this.tagName.generator) == null ? void 0 : t.priority) || 0) + 1 : 0;
+    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.options;
+    const t = [this.hash], { className: s } = this.params;
     return s && t.push(s), t.join(" ");
   }
   get cssClassName() {
@@ -23,29 +28,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 ? g(this._context.config.templates) : [];
   }
   get css() {
-    var t;
-    return o(this.styles, `.${this.cssClassName}`, this.priority, (t = this._context) == null ? void 0 : t.config);
+    var a;
+    const { base: t = {}, variants: s = {}, compoundVariants: r = [] } = this.params, i = { ...t, variants: s, compoundVariants: r };
+    return u(i, `.${this.cssClassName}`, this.priority, (a = this._context) == null ? void 0 : a.config);
   }
   get props() {
-    const { element: t } = this.options, s = this.styles.variants ? Object.keys(this.styles.variants).map((e) => {
-      var r;
-      const i = (r = this.styles.defaultVariants) == null ? void 0 : r[e];
-      return i !== void 0 ? `${e}=${String(i)}` : e;
-    }) : void 0;
-    return {
+    const { element: t } = this.params, s = this.params.variants ? Object.keys(this.params.variants).map((a) => {
+      var n;
+      const o = (n = this.params.defaultVariants) == null ? void 0 : n[a];
+      return o !== void 0 ? `${a}=${String(o)}` : a;
+    }) : void 0, r = /* @__PURE__ */ new Set([]), i = /\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));
+    return i && i.forEach((a, o, n) => {
+      const p = n.at(1);
+      p && r.add(p);
+    }), {
       element: t,
-      variantKeys: s
+      variantKeys: s,
+      propValueKeys: [...r]
     };
   }
   _withBuildContext(t) {
     this._context = t;
-    const { name: s, config: e } = t;
+    const { name: s, config: r } = t;
     return this._callerName = s, this;
   }
 }
 export {
-  p as StyleComponentGenerator
+  d as StyleComponentGenerator
 };

package/generator/style-generator.d.ts

@@ -1,14 +1,18 @@
-import { GeneratorOptions, Styles, Tag } from '../types';
+import { StyledParams, Tag } from '../types';
+export interface GeneratorProps {
+    element?: string;
+    variantKeys?: string[];
+    propValueKeys?: string[];
+}
 export declare class StyleComponentGenerator {
     tagName: Tag<any>;
-    styles: Styles;
-    private options;
+    params: StyledParams;
     _callerName: string | undefined;
     _context: {
         name: string;
         config: any;
     } | undefined;
-    constructor(tagName: Tag<any>, styles: Styles, options: GeneratorOptions);
+    constructor(tagName: Tag<any>, params: StyledParams);
     get hash(): string;
     get priority(): number;
     get classNames(): string;
@@ -16,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/index-84Wroia-.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="/* Empty */";exports.default=e;

package/index-D_732b92.js

@@ -0,0 +1,4 @@
+const t = "/* Empty */";
+export {
+  t as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/core",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.70",
   "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"
   },
@@ -19,13 +24,22 @@
     "!**/*.tsbuildinfo"
   ],
   "nx": {
+    "sourceRoot": "libs/core/src",
     "name": "core"
   },
   "peerDependencies": {
-    "clsx": ">=2.x",
+    "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"
@@ -50,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"
   }
 }