@salty-css/core 0.0.1-alpha.60 → 0.0.1-alpha.62

package/bin/main.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("commander"),G=require("fs"),s=require("fs/promises"),n=require("path"),ee=require("ejs"),te=require("../compiler/index.cjs"),ie=require("../pascal-case-iWoaJWwT.cjs"),_=require("winston"),ne=require("child_process"),se=require("ora");var H=typeof document<"u"?document.currentScript:null;const t=_.createLogger({level:"debug",format:_.format.combine(_.format.colorize(),_.format.cli()),transports:[new _.transports.Console({})]}),m=r=>{t.error(r)},B=r=>new Promise((h,C)=>{ne.exec(r,P=>{if(P)return C(P);h()})}),b=async(...r)=>{const h=r.map(F=>F.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),C=se(`Installing packages: ${h}`).start(),P=r.join(" ");await B(`npm install ${P}`),C.succeed(`Installed packages: ${h}`)},ae=()=>G.existsSync(n.join(process.cwd(),"node_modules",".bin","prettier"));async function A(r){try{if(!ae())return;await B(`./node_modules/.bin/prettier --write "${r}"`),t.info(`Formatted ${r} with Prettier`)}catch(h){t.error(`Error formatting ${r} with Prettier:`,h)}}async function oe(){const r=new Z.Command;r.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const h={"salty.config.ts":Promise.resolve().then(()=>require("../salty.config-BupieCfE.cjs")),"saltygen/index.css":Promise.resolve().then(()=>require("../index-84Wroia-.cjs")),"react/react-styled-file.ts":Promise.resolve().then(()=>require("../react-styled-file-Dkubsz-U.cjs"))},C=async(i,a)=>{const{default:o}=await h[i],u=ee.render(o,a);return{fileName:i,content:u}},P=async()=>{const i=n.join(process.cwd(),".saltyrc");return await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>({}))},F=n.join(process.cwd(),"package.json"),$=async(i=F)=>{const a=await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>{});if(!a)throw"Could not read package.json file!";return a},V=async(i,a=F)=>{typeof i=="object"&&(i=JSON.stringify(i,null,2)),await s.writeFile(a,i)},z=async()=>{const i=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:H&&H.tagName.toUpperCase()==="SCRIPT"&&H.src||new URL("bin/main.cjs",document.baseURI).href);return $(i)},M=await(async()=>(await P()).defaultProject)(),k=await z(),J={core:`@salty-css/core@${k.version}`,react:`@salty-css/react@${k.version}`,eslintPluginCore:`@salty-css/eslint-plugin-core@${k.version}`,vite:`@salty-css/vite@${k.version}`,next:`@salty-css/next@${k.version}`},T=i=>{const a=i==="."?"":i,o=process.cwd();return n.join(o,a)};r.command("init [directory]").description("Initialize a new Salty-CSS project.").option("-d, --dir <dir>","Project directory to initialize the project in.").option("--css-file <css-file>","Existing CSS file where to import the generated CSS. Path must be relative to the given project directory.").option("--skip-install","Skip installing dependencies.").action(async function(i="."){if(!await $().catch(()=>{}))return m("Salty CSS project must be initialized in a directory with a package.json file.");t.info("Initializing a new Salty-CSS project!");const{dir:o=i,cssFile:u,skipInstall:g}=this.opts();if(!o)return m("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");g||(await b(J.core,J.react),await b(`-D ${J.eslintPluginCore}`));const f=process.cwd(),l=T(o),j=await Promise.all([C("salty.config.ts"),C("saltygen/index.css")]);await s.mkdir(l,{recursive:!0});const y=j.map(async({fileName:e,content:d})=>{const c=n.join(l,e);if(await s.readFile(c,"utf-8").catch(()=>{})!==void 0){t.debug("File already exists: "+c);return}const v=e.split("/").slice(0,-1).join("/");v&&await s.mkdir(n.join(l,v),{recursive:!0}),t.info("Creating file: "+c),await s.writeFile(c,d),await A(c)});await Promise.all(y);const D=n.relative(f,l)||".",p=n.join(f,".saltyrc"),w=await s.readFile(p,"utf-8").catch(()=>{});if(w===void 0){t.info("Creating file: "+p);const d=JSON.stringify({defaultProject:D,projects:[D]},null,2);await s.writeFile(p,d)}else{t.info("Edit file: "+p);const e=JSON.parse(w),d=new Set((e==null?void 0:e.projects)||[]);d.add(D),e.projects=[...d];const c=JSON.stringify(e,null,2);await s.writeFile(p,c)}const E=n.join(f,".gitignore"),I=await s.readFile(E,"utf-8").catch(()=>{});I!==void 0&&(I.includes("saltygen")||(t.info("Edit file: "+E),await s.writeFile(E,I+`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("commander"),G=require("fs"),s=require("fs/promises"),n=require("path"),ee=require("ejs"),te=require("../compiler/index.cjs"),ie=require("../pascal-case-iWoaJWwT.cjs"),_=require("winston"),ne=require("child_process"),se=require("ora");var H=typeof document<"u"?document.currentScript:null;const t=_.createLogger({level:"debug",format:_.format.combine(_.format.colorize(),_.format.cli()),transports:[new _.transports.Console({})]}),m=r=>{t.error(r)},B=r=>new Promise((h,C)=>{ne.exec(r,P=>{if(P)return C(P);h()})}),b=async(...r)=>{const h=r.map(F=>F.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),C=se(`Installing packages: ${h}`).start(),P=r.join(" ");await B(`npm install ${P}`),C.succeed(`Installed packages: ${h}`)},ae=()=>G.existsSync(n.join(process.cwd(),"node_modules",".bin","prettier"));async function A(r){try{if(!ae())return;await B(`./node_modules/.bin/prettier --write "${r}"`),t.info(`Formatted ${r} with Prettier`)}catch(h){t.error(`Error formatting ${r} with Prettier:`,h)}}async function oe(){const r=new Z.Command;r.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const h={"salty.config.ts":Promise.resolve().then(()=>require("../salty.config-Dk6ZcCxI.cjs")),"saltygen/index.css":Promise.resolve().then(()=>require("../index-84Wroia-.cjs")),"react/react-styled-file.ts":Promise.resolve().then(()=>require("../react-styled-file-Dkubsz-U.cjs"))},C=async(i,a)=>{const{default:o}=await h[i],u=ee.render(o,a);return{fileName:i,content:u}},P=async()=>{const i=n.join(process.cwd(),".saltyrc");return await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>({}))},F=n.join(process.cwd(),"package.json"),$=async(i=F)=>{const a=await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>{});if(!a)throw"Could not read package.json file!";return a},V=async(i,a=F)=>{typeof i=="object"&&(i=JSON.stringify(i,null,2)),await s.writeFile(a,i)},z=async()=>{const i=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:H&&H.tagName.toUpperCase()==="SCRIPT"&&H.src||new URL("bin/main.cjs",document.baseURI).href);return $(i)},M=await(async()=>(await P()).defaultProject)(),k=await z(),J={core:`@salty-css/core@${k.version}`,react:`@salty-css/react@${k.version}`,eslintPluginCore:`@salty-css/eslint-plugin-core@${k.version}`,vite:`@salty-css/vite@${k.version}`,next:`@salty-css/next@${k.version}`},T=i=>{const a=i==="."?"":i,o=process.cwd();return n.join(o,a)};r.command("init [directory]").description("Initialize a new Salty-CSS project.").option("-d, --dir <dir>","Project directory to initialize the project in.").option("--css-file <css-file>","Existing CSS file where to import the generated CSS. Path must be relative to the given project directory.").option("--skip-install","Skip installing dependencies.").action(async function(i="."){if(!await $().catch(()=>{}))return m("Salty CSS project must be initialized in a directory with a package.json file.");t.info("Initializing a new Salty-CSS project!");const{dir:o=i,cssFile:u,skipInstall:g}=this.opts();if(!o)return m("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");g||(await b(J.core,J.react),await b(`-D ${J.eslintPluginCore}`));const f=process.cwd(),l=T(o),j=await Promise.all([C("salty.config.ts"),C("saltygen/index.css")]);await s.mkdir(l,{recursive:!0});const y=j.map(async({fileName:e,content:d})=>{const c=n.join(l,e);if(await s.readFile(c,"utf-8").catch(()=>{})!==void 0){t.debug("File already exists: "+c);return}const v=e.split("/").slice(0,-1).join("/");v&&await s.mkdir(n.join(l,v),{recursive:!0}),t.info("Creating file: "+c),await s.writeFile(c,d),await A(c)});await Promise.all(y);const D=n.relative(f,l)||".",p=n.join(f,".saltyrc"),w=await s.readFile(p,"utf-8").catch(()=>{});if(w===void 0){t.info("Creating file: "+p);const d=JSON.stringify({defaultProject:D,projects:[D]},null,2);await s.writeFile(p,d)}else{t.info("Edit file: "+p);const e=JSON.parse(w),d=new Set((e==null?void 0:e.projects)||[]);d.add(D),e.projects=[...d];const c=JSON.stringify(e,null,2);await s.writeFile(p,c)}const E=n.join(f,".gitignore"),I=await s.readFile(E,"utf-8").catch(()=>{});I!==void 0&&(I.includes("saltygen")||(t.info("Edit file: "+E),await s.writeFile(E,I+`
 
 # Salty-CSS
 saltygen

package/bin/main.js

@@ -36,7 +36,7 @@ async function xt() {
   o.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
   const h = {
     // Core files
-    "salty.config.ts": import("../salty.config-D9ANEDiH.js"),
+    "salty.config.ts": import("../salty.config-BhBY_oOk.js"),
     "saltygen/index.css": import("../index-D_732b92.js"),
     // React
     "react/react-styled-file.ts": import("../react-styled-file-CGVf5n1B.js")

package/compiler/index.cjs

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

package/compiler/index.d.ts

@@ -3,7 +3,7 @@ export declare const saltyFileExtensions: string[];
 export declare const saltyFileRegExp: (additional?: string[]) => RegExp;
 export declare const isSaltyFile: (file: string, additional?: string[]) => boolean;
 export declare const generateConfigStyles: (dirname: string) => Promise<void>;
-export declare const compileSaltyFile: (sourceFilePath: string, outputDirectory: string) => Promise<{
+export declare const compileSaltyFile: (dirname: string, sourceFilePath: string, outputDirectory: string) => Promise<{
     [key: string]: {
         generator: StyleComponentGenerator;
         isKeyframes?: boolean;

package/compiler/index.js

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

package/config/config-types.d.ts

@@ -1,4 +1,5 @@
 import { CssStyles } from '../types';
+import { OrString } from '../types/util-types';
 type CssTemplate = CssStyles | {
     [key: PropertyKey]: CssTemplate;
 };
@@ -55,5 +56,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/package.json

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

package/{salty.config-D9ANEDiH.js → salty.config-BhBY_oOk.js}

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

package/{salty.config-BupieCfE.cjs → salty.config-Dk6ZcCxI.cjs}

@@ -1,6 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=`import { defineConfig } from '@salty-css/core/config';
+"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=o;
+`;exports.default=e;