@salty-css/core 0.0.1-alpha.11 → 0.0.1-alpha.111

package/index-BNP4ADSL.cjs

@@ -0,0 +1,21 @@
+"use strict";const te=require("esbuild"),se=require("child_process"),N=require("./dash-case-DKzpenwY.cjs"),o=require("path"),a=require("fs"),H=require("fs/promises"),O=require("./parse-templates-C1-wQz7G.cjs"),M=require("winston");var q=typeof document<"u"?document.currentScript:null;function ne(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const U=ne(te),G=e=>{if(!e||e==="/")throw new Error("Could not find package.json file");const t=o.join(e,"package.json");return a.existsSync(t)?t:G(o.join(e,".."))},oe=async e=>{const t=G(e);return await H.readFile(t,"utf-8").then(JSON.parse).catch(()=>{})},ie=async e=>{const t=await oe(e);if(t)return t.type};let v;const L=async e=>{if(v)return v;const t=await ie(e);return t==="module"?v="esm":(t==="commonjs"||(typeof document>"u"?require("url").pathToFileURL(__filename).href:q&&q.tagName.toUpperCase()==="SCRIPT"&&q.src||new URL("index-BNP4ADSL.cjs",document.baseURI).href).endsWith(".cjs"))&&(v="cjs"),v||"esm"},V=M.createLogger({level:"debug",format:M.format.combine(M.format.colorize(),M.format.cli()),transports:[new M.transports.Console({})]}),re=e=>{V.error(e)},I={externalModules:[]},W=e=>{if(I.externalModules.length>0)return I.externalModules;const t=o.join(e,"salty.config.ts"),s=a.readFileSync(t,"utf8").match(/externalModules:\s?\[(.*)\]/);if(!s)return[];const i=s[1].split(",").map(p=>p.replace(/['"`]/g,"").trim());return I.externalModules=i,i},R=e=>o.join(e,"./saltygen"),K=["salty","css","styles","styled"],A=(e=[])=>new RegExp(`\\.(${[...K,...e].join("|")})\\.`),_=(e,t=[])=>A(t).test(e),ce=async e=>{const t=R(e),n=o.join(e,"salty.config.ts"),s=o.join(t,"salty.config.js"),i=await L(e),p=W(e);await U.build({entryPoints:[n],minify:!0,treeShaking:!0,bundle:!0,outfile:s,format:i,external:p});const S=Date.now(),{config:f}=await import(`${s}?t=${S}`);return f},X=async e=>{const t=await ce(e),n=new Set,s=(l,u=[])=>l?Object.entries(l).flatMap(([g,d])=>{if(!d)return;if(typeof d=="object")return s(d,[...u,g]);const C=[...u,g].join(".");n.add(`"${C}"`);const h=[...u.map(N.dashCase),N.dashCase(g)].join("-"),{result:j}=O.parseValueTokens(d);return`--${h}: ${j};`}):[],i=l=>l?Object.entries(l).flatMap(([u,g])=>{const d=s(g);return u==="base"?d.join(""):`${u} { ${d.join("")} }`}):[],p=l=>l?Object.entries(l).flatMap(([u,g])=>Object.entries(g).flatMap(([d,C])=>{const h=s(C,[u]),j=`.${u}-${d}, [data-${u}="${d}"]`,T=h.join("");return`${j} { ${T} }`})):[],S=s(t.variables),f=i(t.responsiveVariables),b=p(t.conditionalVariables),r=R(e),P=o.join(r,"css/variables.css"),y=`:root { ${S.join("")} ${f.join("")} } ${b.join("")}`;a.writeFileSync(P,y);const w=o.join(r,"css/global.css"),F=O.parseStyles(t.global,"");a.writeFileSync(w,F);const c=o.join(r,"css/templates.css"),m=O.parseTemplates(t.templates),x=O.getTemplateTypes(t.templates);a.writeFileSync(c,m);const $=o.join(r,"types/css-tokens.d.ts"),D=`
+  // Variable types
+  type VariableTokens = ${[...n].join("|")}; 
+  type PropertyValueToken = \`{\${VariableTokens}}\`;
+
+  // Template types
+  type TemplateTokens = {
+    ${Object.entries(x).map(([l,u])=>`${l}?: ${u}`).join(`
+`)}
+  }
+  `;a.writeFileSync($,D)},J=async(e,t,n)=>{const s=N.toHash(t),i=o.join(n,"./temp");a.existsSync(i)||a.mkdirSync(i);const p=o.parse(t);let S=a.readFileSync(t,"utf8");S=S.replace(/styled\([^"'`{,]+,/g,"styled('div',");const f=o.join(n,"js",s+".js"),b=W(e),r=await L(e);await U.build({stdin:{contents:S,sourcefile:p.base,resolveDir:p.dir,loader:"ts"},minify:!1,treeShaking:!0,bundle:!0,outfile:f,format:r,target:["node20"],keepNames:!0,external:b,packages:"external"});const P=Date.now();return await import(`${f}?t=${P}`)},z=async e=>{const t=R(e),n=o.join(t,"salty.config.js"),{config:s}=await import(n);return s},Y=()=>{try{return process.env.NODE_ENV==="production"}catch{return!1}},ae=async(e,t=Y())=>{try{t?V.info("Generating CSS in production mode! 🔥"):V.info("Generating CSS in development mode! 🚀");const n=[],s=[],i=R(e),p=o.join(i,"index.css");(()=>{a.existsSync(i)&&se.execSync("rm -rf "+i),a.mkdirSync(i),a.mkdirSync(o.join(i,"css")),a.mkdirSync(o.join(i,"types"))})(),await X(e);const f=await z(e);async function b(c,m){const x=["node_modules","saltygen"],$=a.statSync(c);if($.isDirectory()){const k=a.readdirSync(c);if(x.some(l=>c.includes(l)))return;await Promise.all(k.map(l=>b(o.join(c,l),o.join(m,l))))}else if($.isFile()&&_(c)){const D=await J(e,c,i),l=[];Object.entries(D).forEach(([C,h])=>{if(h.isKeyframes&&h.css){const B=`${h.animationName}.css`,Q=`css/${B}`,ee=o.join(i,Q);n.push(B),a.writeFileSync(ee,h.css);return}if(!h.generator)return;const j=h.generator._withBuildContext({name:C,config:f,prod:t}),T=`${j.hash}-${j.priority}.css`;s[j.priority]||(s[j.priority]=[]),s[j.priority].push(T),l.push(T);const E=`css/${T}`,Z=o.join(i,E);a.writeFileSync(Z,j.css)});const u=l.map(C=>`@import url('./${C}');`).join(`
+`),g=N.toHash(c,6),d=o.join(i,`css/${g}.css`);a.writeFileSync(d,u)}}await b(e,i);const r=n.map(c=>`@import url('./css/${c}');`).join(`
+`);let F=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
+
+${["variables.css","global.css","templates.css"].filter(c=>{try{return a.readFileSync(o.join(i,"css",c),"utf8").length>0}catch{return!1}}).map(c=>`@import url('./css/${c}');`).join(`
+`)}
+${r}`;if(f.importStrategy!=="component"){const c=s.flat().map(m=>`@import url('./css/${m}');`).join(`
+`);F+=c}a.writeFileSync(p,F)}catch(n){console.error(n)}},le=async(e,t)=>{try{const n=[],s=o.join(e,"./saltygen"),i=o.join(s,"index.css");if(_(t)){const S=await z(e),f=await J(e,t,s);Object.entries(f).forEach(([w,F])=>{if(!F.generator)return;const c=F.generator._withBuildContext({name:w,config:S}),m=`${c.hash}-${c.priority}.css`,x=`css/${m}`,$=o.join(s,x);n.push(m),a.writeFileSync($,c.css)});const b=a.readFileSync(i,"utf8").split(`
+`),r=n.map(w=>`@import url('../saltygen/css/${w}');`),y=[...new Set([...b,...r])].join(`
+`);a.writeFileSync(i,y)}}catch(n){console.error(n)}},pe=async(e,t,n=Y())=>{try{const s=o.join(e,"./saltygen");if(_(t)){const p=a.readFileSync(t,"utf8");p.replace(/^(?!export\s)const\s.*/gm,y=>`export ${y}`)!==p&&await H.writeFile(t,p);const f=await z(e),b=await J(e,t,s);let r=p;Object.entries(b).forEach(([y,w])=>{var T;if(w.isKeyframes||!w.generator)return;const F=w.generator._withBuildContext({name:y,config:f,prod:n}),c=new RegExp(`\\s${y}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(p);if(!c)return console.error("Could not find the original declaration");const m=(T=c.at(1))==null?void 0:T.trim(),x=new RegExp(`\\s${y}[=\\s]+styled\\(`,"g").exec(r);if(!x)return console.error("Could not find the original declaration");const{index:$}=x;let k=!1;const D=setTimeout(()=>k=!0,5e3);let l=0,u=!1,g=0;for(;!u&&!k;){const E=r[$+l];E==="("&&g++,E===")"&&g--,g===0&&E===")"&&(u=!0),l>r.length&&(k=!0),l++}if(!k)clearTimeout(D);else throw new Error("Failed to find the end of the styled call and timed out");const d=$+l,C=r.slice($,d),h=r,j=` ${y} = styled(${m}, "${F.classNames}", ${JSON.stringify(F.props)});`;r=r.replace(C,j),h===r&&console.error("Minimize file failed to change content",{name:y,tagName:m})});const P=N.toHash(t,6);return f.importStrategy==="component"&&(r=`import '../../saltygen/css/${P}.css';
+${r}`),r=r.replace("{ styled }","{ styledClient as styled }"),r=r.replace("@salty-css/react/styled","@salty-css/react/styled-client"),r}}catch(s){console.error("Error in minimizeFile:",s)}};exports.compileSaltyFile=J;exports.generateConfigStyles=X;exports.generateCss=ae;exports.generateFile=le;exports.isSaltyFile=_;exports.logError=re;exports.logger=V;exports.minimizeFile=pe;exports.saltyFileExtensions=K;exports.saltyFileRegExp=A;

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.11",
+  "version": "0.0.1-alpha.111",
   "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,12 +28,18 @@
     "name": "core"
   },
   "peerDependencies": {
-    "esbuild": "0.21.x",
-    "eslint": "^9.x",
-    "react": "^18.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"
@@ -53,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-BNINfXOG.js

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

package/parse-templates-C1-wQz7G.cjs

@@ -0,0 +1,8 @@
+"use strict";const T=require("./dash-case-DKzpenwY.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/types/index.d.ts

@@ -1,32 +1,39 @@
-import { AllHTMLAttributes, ReactDOM, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { StyleComponentGenerator } from '../generator';
-import { OrString } from './util-types';
+import { 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;
+    passVariantProps?: boolean | string | string[];
+    style?: CssProperties & {
+        [key: string]: OrAny | PropertyValueToken;
+    };
     /** 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;
+type CssProperties = {
+    [key in keyof CSS.Properties]: CSS.Properties[key] | PropertyValueToken | CSSPropertyValueFunction;
 };
-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 = '';
 type VariantOptions = {
     [key in InvalidVariantKeys]?: never;
 };
+export type CompoundVariant = {
+    [key: PropertyKey]: any;
+    css: CssStyles;
+};
 type Variants = {
     variants?: VariantOptions & {
         [key: PropertyKey]: {
@@ -38,17 +45,19 @@ type Variants = {
     };
     compoundVariants?: CompoundVariant[];
 };
-type VariantPropValue<T> = T extends 'true' ? 'true' | true : T;
-export type VariantProps<STYLES extends StyledParams> = STYLES['variants'] extends undefined ? {} : {
+type BooleanVariantValue = 'true' | 'false' | boolean;
+type VariantPropValue<T> = T extends 'true' ? BooleanVariantValue : T extends 'false' ? BooleanVariantValue : T;
+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 : 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 {
@@ -56,7 +65,13 @@ export interface GeneratorOptions {
     displayName?: string;
     element?: string;
 }
+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 {};

package/util/camel-case.d.ts

@@ -0,0 +1 @@
+export declare function camelCase(str: PropertyKey): string;

package/util/index.cjs

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

package/util/index.d.ts

@@ -1,2 +1,4 @@
+export * from './camel-case';
 export * from './dash-case';
+export * from './pascal-case';
 export * from './to-hash';

package/util/index.js

@@ -1,19 +1,11 @@
-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;
-}, s = (e, r = 3) => {
-  const t = i(5381, JSON.stringify(e)) >>> 0;
-  return o(t, r);
-};
-function c(e) {
-  return e ? typeof e != "string" ? String(e) : e.replace(/\s/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (r, t) => (t > 0 ? "-" : "") + r.toLowerCase()) : "";
+import { d as o, t as s } from "../dash-case-DMQMcCO6.js";
+import { p as f } from "../pascal-case-BQpR5PdN.js";
+function r(e) {
+  return e ? typeof e != "string" ? r(String(e)) : e.replace(/\s/g, "-").replace(/-([a-z])/g, (a) => a[1].toUpperCase()) : "";
 }
 export {
-  c as dashCase,
+  r as camelCase,
+  o as dashCase,
+  f as pascalCase,
   s as toHash
 };

package/util/module-type.d.ts

@@ -0,0 +1 @@
+export declare const detectCurrentModuleType: (dirname: string) => Promise<"esm" | "cjs">;

package/util/pascal-case.d.ts

@@ -0,0 +1 @@
+export declare function pascalCase(str: PropertyKey): string;

package/eslint/index.cjs

@@ -1 +0,0 @@
-"use strict";const l=require("../compiler/index.cjs"),c={meta:{type:"problem",docs:{description:"Ensure `variants` are not nested inside `base` in styled calls",category:"Errors",recommended:!0},messages:{nestedVariants:"`variants` should not be nested inside `base`."}},create(r){return l.isSaltyFile(r.filename)?{CallExpression:o=>{try{const{callee:s,arguments:d}=o;if(!(s.type==="Identifier"&&s.name==="styled"))return;const t=d[0];if(!t||!(t.type==="ObjectExpression"))return;const n=t.properties.find(e=>e.type==="Property"&&e.key.type==="Identifier"&&e.key.name==="base");if(!n)return;const{value:a}=n;if(!(a.type==="ObjectExpression"))return;const i=a.properties.find(e=>e.type==="Property"&&e.key.type==="Identifier"&&e.key.name==="variants");if(!i)return;r.report({node:i,messageId:"nestedVariants"})}catch(s){console.log("ESlint error",s);return}}}:{}}},y={rules:{"no-variants-in-base":c}};module.exports=y;

package/eslint/index.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    rules: {
-        'no-variants-in-base': import("eslint").Rule.RuleModule;
-    };
-};
-export default _default;

package/eslint/index.js

@@ -1,48 +0,0 @@
-import { isSaltyFile as l } from "../compiler/index.js";
-const y = {
-  meta: {
-    type: "problem",
-    docs: {
-      description: "Ensure `variants` are not nested inside `base` in styled calls",
-      category: "Errors",
-      recommended: !0
-    },
-    messages: {
-      nestedVariants: "`variants` should not be nested inside `base`."
-    }
-  },
-  create(r) {
-    return l(r.filename) ? {
-      CallExpression: (o) => {
-        try {
-          const { callee: s, arguments: d } = o;
-          if (!(s.type === "Identifier" && s.name === "styled")) return;
-          const t = d[0];
-          if (!t || !(t.type === "ObjectExpression")) return;
-          const n = t.properties.find((e) => e.type === "Property" && e.key.type === "Identifier" && e.key.name === "base");
-          if (!n) return;
-          const { value: a } = n;
-          if (!(a.type === "ObjectExpression")) return;
-          const i = a.properties.find(
-            (e) => e.type === "Property" && e.key.type === "Identifier" && e.key.name === "variants"
-          );
-          if (!i) return;
-          r.report({
-            node: i,
-            messageId: "nestedVariants"
-          });
-        } catch (s) {
-          console.log("ESlint error", s);
-          return;
-        }
-      }
-    } : {};
-  }
-}, b = {
-  rules: {
-    "no-variants-in-base": y
-  }
-};
-export {
-  b as default
-};

package/eslint/rules/no-variants-in-base.d.ts

@@ -1,2 +0,0 @@
-import { Rule } from 'eslint';
-export declare const noVariantsInBase: Rule.RuleModule;

package/parse-templates-BOSK0Tb6.js

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

package/parse-templates-BY1Xai-_.cjs

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