@salty-css/core 0.0.1-alpha.253 → 0.0.1-alpha.255

package/README.md

@@ -242,7 +242,7 @@ Example usage:
 styled('span', {
   base: {
     // Use of static font family variable
-    fontFamily: '{colors.fontFamily.heading}',
+    fontFamily: '{fontFamily.heading}',
     // Use of responsive font size variable
     fontSize: '{fontSize.heading.regular}',
     // Use of conditional theme text color variable

package/bin/main.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("commander"),A=require("fs"),s=require("fs/promises"),n=require("path"),ne=require("ejs"),e=require("../index-Bh0Rdc9S.cjs"),ie=require("../pascal-case-iWoaJWwT.cjs"),se=require("child_process"),oe=require("ora"),ae=require("../should-restart-Crlwi2VJ.cjs");var G=typeof document<"u"?document.currentScript:null;const X=y=>new Promise((C,P)=>{se.exec(y,x=>{if(x)return P(x);C()})}),I=async(...y)=>{const C=y.map(b=>b.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),P=oe(`Installing packages: ${C}`).start(),x=y.join(" ");await X(`npm install ${x}`),P.succeed(`Installed packages: ${C}`)},re=()=>A.existsSync(n.join(process.cwd(),"node_modules",".bin","prettier"));async function S(y){try{if(!re())return;await X(`./node_modules/.bin/prettier --write "${y}"`),e.logger.info(`Formatted ${y} with Prettier`)}catch(C){e.logger.error(`Error formatting ${y} with Prettier:`,C)}}async function ce(){const y=new te.Command;y.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const C={"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")),"react/react-vanilla-file.ts":Promise.resolve().then(()=>require("../react-vanilla-file-CG_WJLam.cjs"))},P=async(i,a)=>{const{default:f}=await C[i],d=ne.render(f,a);return{fileName:i,content:d}},x=async()=>{const i=n.join(process.cwd(),".saltyrc.json");return await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>({}))},b=n.join(process.cwd(),"package.json"),N=async(i=b)=>{const a=await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>{});if(!a)throw"Could not read package.json file!";return a},Y=async(i,a=b)=>{typeof i=="object"&&(i=JSON.stringify(i,null,2)),await s.writeFile(a,i)},B=async()=>{const i=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:G&&G.tagName.toUpperCase()==="SCRIPT"&&G.src||new URL("bin/main.cjs",document.baseURI).href);return N(i)},V=await(async()=>(await x()).defaultProject)(),$=await B(),D={core:`@salty-css/core@${$.version}`,react:`@salty-css/react@${$.version}`,eslintConfigCore:`@salty-css/eslint-config-core@${$.version}`,vite:`@salty-css/vite@${$.version}`,next:`@salty-css/next@${$.version}`},H=i=>{const a=i==="."?"":i,f=process.cwd();return n.join(f,a)};y.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 N().catch(()=>{}))return e.logError("Salty CSS project must be initialized in a directory with a package.json file.");e.logger.info("Initializing a new Salty-CSS project!");const{dir:f=i,cssFile:d,skipInstall:p}=this.opts();if(!f)return e.logError("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");p||await I(D.core,D.react);const c=process.cwd(),r=H(f),q=await Promise.all([P("salty.config.ts"),P("saltygen/index.css")]);await s.mkdir(r,{recursive:!0});const m=q.map(async({fileName:t,content:u})=>{const l=n.join(r,t);if(await s.readFile(l,"utf-8").catch(()=>{})!==void 0){e.logger.debug("File already exists: "+l);return}const k=t.split("/").slice(0,-1).join("/");k&&await s.mkdir(n.join(r,k),{recursive:!0}),e.logger.info("Creating file: "+l),await s.writeFile(l,u),await S(l)});await Promise.all(m);const w=n.relative(c,r)||".",h=n.join(c,".saltyrc.json"),g=await s.readFile(h,"utf-8").catch(()=>{});if(g===void 0){e.logger.info("Creating file: "+h);const u=JSON.stringify({$schema:"./node_modules/@salty-css/core/.saltyrc.schema.json",info:"This file is used to define projects and their configurations for Salty CSS cli. Do not delete, modify or add this file to .gitignore.",defaultProject:w,projects:[{dir:w,framework:"react"}]},null,2);await s.writeFile(h,u),await S(h)}else{const t=JSON.parse(g),u=(t==null?void 0:t.projects)||[];if(u.findIndex(o=>o.dir===w)===-1){u.push({dir:w,framework:"react"}),t.projects=[...u];const o=JSON.stringify(t,null,2);o!==g&&(e.logger.info("Edit file: "+h),await s.writeFile(h,o),await S(h))}}const j=n.join(c,".gitignore"),T=await s.readFile(j,"utf-8").catch(()=>{});T!==void 0&&(T.includes("saltygen")||(e.logger.info("Edit file: "+j),await s.writeFile(j,T+`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("commander"),A=require("fs"),s=require("fs/promises"),n=require("path"),ne=require("ejs"),e=require("../index-oCwSpzG5.cjs"),ie=require("../pascal-case-iWoaJWwT.cjs"),se=require("child_process"),oe=require("ora"),ae=require("../should-restart-HvsS0CW1.cjs");var G=typeof document<"u"?document.currentScript:null;const X=y=>new Promise((C,v)=>{se.exec(y,x=>{if(x)return v(x);C()})}),I=async(...y)=>{const C=y.map(b=>b.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),v=oe(`Installing packages: ${C}`).start(),x=y.join(" ");await X(`npm install ${x}`),v.succeed(`Installed packages: ${C}`)},re=()=>A.existsSync(n.join(process.cwd(),"node_modules",".bin","prettier"));async function S(y){try{if(!re())return;await X(`./node_modules/.bin/prettier --write "${y}"`),e.logger.info(`Formatted ${y} with Prettier`)}catch(C){e.logger.error(`Error formatting ${y} with Prettier:`,C)}}async function ce(){const y=new te.Command;y.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const C={"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")),"react/react-vanilla-file.ts":Promise.resolve().then(()=>require("../react-vanilla-file-CG_WJLam.cjs"))},v=async(i,a)=>{const{default:g}=await C[i],d=ne.render(g,a);return{fileName:i,content:d}},x=async()=>{const i=n.join(process.cwd(),".saltyrc.json");return await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>({}))},b=n.join(process.cwd(),"package.json"),N=async(i=b)=>{const a=await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>{});if(!a)throw"Could not read package.json file!";return a},Y=async(i,a=b)=>{typeof i=="object"&&(i=JSON.stringify(i,null,2)),await s.writeFile(a,i)},B=async()=>{const i=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:G&&G.tagName.toUpperCase()==="SCRIPT"&&G.src||new URL("bin/main.cjs",document.baseURI).href);return N(i)},V=await(async()=>(await x()).defaultProject)(),$=await B(),D={core:`@salty-css/core@${$.version}`,react:`@salty-css/react@${$.version}`,eslintConfigCore:`@salty-css/eslint-config-core@${$.version}`,vite:`@salty-css/vite@${$.version}`,next:`@salty-css/next@${$.version}`},H=i=>{const a=i==="."?"":i,g=process.cwd();return n.join(g,a)};y.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 N().catch(()=>{}))return e.logError("Salty CSS project must be initialized in a directory with a package.json file.");e.logger.info("Initializing a new Salty-CSS project!");const{dir:g=i,cssFile:d,skipInstall:p}=this.opts();if(!g)return e.logError("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");p||await I(D.core,D.react);const c=process.cwd(),r=H(g),q=await Promise.all([v("salty.config.ts"),v("saltygen/index.css")]);await s.mkdir(r,{recursive:!0});const m=q.map(async({fileName:t,content:u})=>{const l=n.join(r,t);if(await s.readFile(l,"utf-8").catch(()=>{})!==void 0){e.logger.debug("File already exists: "+l);return}const k=t.split("/").slice(0,-1).join("/");k&&await s.mkdir(n.join(r,k),{recursive:!0}),e.logger.info("Creating file: "+l),await s.writeFile(l,u),await S(l)});await Promise.all(m);const w=n.relative(c,r)||".",h=n.join(c,".saltyrc.json"),f=await s.readFile(h,"utf-8").catch(()=>{});if(f===void 0){e.logger.info("Creating file: "+h);const u=JSON.stringify({$schema:"./node_modules/@salty-css/core/.saltyrc.schema.json",info:"This file is used to define projects and their configurations for Salty CSS cli. Do not delete, modify or add this file to .gitignore.",defaultProject:w,projects:[{dir:w,framework:"react"}]},null,2);await s.writeFile(h,u),await S(h)}else{const t=JSON.parse(f),u=(t==null?void 0:t.projects)||[];if(u.findIndex(o=>o.dir===w)===-1){u.push({dir:w,framework:"react"}),t.projects=[...u];const o=JSON.stringify(t,null,2);o!==f&&(e.logger.info("Edit file: "+h),await s.writeFile(h,o),await S(h))}}const j=n.join(c,".gitignore"),T=await s.readFile(j,"utf-8").catch(()=>{});T!==void 0&&(T.includes("saltygen")||(e.logger.info("Edit file: "+j),await s.writeFile(j,T+`
 
 # Salty-CSS
 saltygen
 `)));const F=["src","public","assets","styles","css","app"],W=["styles","css","app","pages"],M=["index","styles","main","app","global","globals"],U=[".css",".scss",".sass"],E=await(async()=>{if(d)return d;for(const t of F)for(const u of M)for(const l of U){const o=n.join(r,t,u+l);if(await s.readFile(o,"utf-8").catch(()=>{})!==void 0)return n.relative(r,o);for(const O of W){const R=n.join(r,t,O,u+l);if(await s.readFile(R,"utf-8").catch(()=>{})!==void 0)return n.relative(r,R)}}})();if(E){const t=n.join(r,E),u=await s.readFile(t,"utf-8").catch(()=>{});if(u!==void 0&&!u.includes("saltygen")){const o=n.join(t,".."),O=`@import '${n.relative(o,n.join(r,"saltygen/index.css"))}';`;e.logger.info("Adding global import statement to CSS file: "+t),await s.writeFile(t,O+`
-`+u),await S(t)}}else e.logger.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");const Z={projectJs:n.join(r,"eslint.config.js"),rootJs:n.join(c,"eslint.config.js"),projectMjs:n.join(r,"eslint.config.mjs"),rootMjs:n.join(c,"eslint.config.mjs"),projectJson:n.join(r,".eslintrc.json"),rootJson:n.join(c,".eslintrc.json")},v=Object.values(Z).find(t=>A.existsSync(t));if(v){p||await I(D.eslintConfigCore);const t=await s.readFile(v,"utf-8").catch(()=>{});if(!t)return e.logError("Could not read ESLint config file.");if(!t.includes("salty-css"))if(e.logger.info("Edit file: "+v),v.endsWith("js")){let o=`import saltyCss from "@salty-css/eslint-config-core/flat";
-${t}`;t.includes("typescript-eslint")?o.includes(".config(")?o=o.replace(".config(",".config(saltyCss,"):e.logger.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."):o.includes("export default [")?o=o.replace("export default [","export default [ saltyCss,"):o.includes("eslintConfig = [")?o=o.replace("eslintConfig = [","eslintConfig = [ saltyCss,"):e.logger.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."),await s.writeFile(v,o),await S(v)}else{const l=JSON.parse(t);l.extends||(l.extends=[]),l.extends.push("@salty-css/core");const o=JSON.stringify(l,null,2);await s.writeFile(v,o),await S(v)}}const L=n.join(r,"vite.config.ts"),z=await s.readFile(L,"utf-8").catch(()=>{});if(z!==void 0&&!z.includes("saltyPlugin")){e.logger.info("Edit file: "+L);const u=`import { saltyPlugin } from '@salty-css/vite';
+`+u),await S(t)}}else e.logger.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");const Z={projectJs:n.join(r,"eslint.config.js"),rootJs:n.join(c,"eslint.config.js"),projectMjs:n.join(r,"eslint.config.mjs"),rootMjs:n.join(c,"eslint.config.mjs"),projectJson:n.join(r,".eslintrc.json"),rootJson:n.join(c,".eslintrc.json")},P=Object.values(Z).find(t=>A.existsSync(t));if(P){p||await I(D.eslintConfigCore);const t=await s.readFile(P,"utf-8").catch(()=>{});if(!t)return e.logError("Could not read ESLint config file.");if(!t.includes("salty-css"))if(e.logger.info("Edit file: "+P),P.endsWith("js")){let o=`import saltyCss from "@salty-css/eslint-config-core/flat";
+${t}`;t.includes("typescript-eslint")?o.includes(".config(")?o=o.replace(".config(",".config(saltyCss,"):e.logger.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."):o.includes("export default [")?o=o.replace("export default [","export default [ saltyCss,"):o.includes("eslintConfig = [")?o=o.replace("eslintConfig = [","eslintConfig = [ saltyCss,"):e.logger.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."),await s.writeFile(P,o),await S(P)}else{const l=JSON.parse(t);l.extends||(l.extends=[]),l.extends.push("@salty-css/core");const o=JSON.stringify(l,null,2);await s.writeFile(P,o),await S(P)}}const L=n.join(r,"vite.config.ts"),z=await s.readFile(L,"utf-8").catch(()=>{});if(z!==void 0&&!z.includes("saltyPlugin")){e.logger.info("Edit file: "+L);const u=`import { saltyPlugin } from '@salty-css/vite';
 `,o=z.replace(/(plugins: \[)/,`$1
   saltyPlugin(__dirname),`);p||await I(`-D ${D.vite}`),e.logger.info("Adding Salty-CSS plugin to Vite config..."),await s.writeFile(L,u+o),await S(L)}const _=["next.config.js","next.config.cjs","next.config.ts","next.config.mjs"].map(t=>n.join(r,t)).find(t=>A.existsSync(t));if(_){let t=await s.readFile(_,"utf-8").catch(()=>{});if(t!==void 0&&!t.includes("withSaltyCss")){let l=!1;/\splugins([^=]*)=[^[]\[/.test(t)&&!l&&(t=t.replace(/\splugins([^=]*)=[^[]\[/,(R,J)=>` plugins${J}= [withSaltyCss,`),l=!0);const k=t.includes("module.exports"),O=k?`const { withSaltyCss } = require('@salty-css/next');
 `:`import { withSaltyCss } from '@salty-css/next';
-`;k&&!l?(t=t.replace(/module.exports = ([^;]+)/,(R,J)=>`module.exports = withSaltyCss(${J})`),l=!0):l||(t=t.replace(/export default ([^;]+)/,(R,J)=>`export default withSaltyCss(${J})`)),p||await I(`-D ${D.next}`),e.logger.info("Adding Salty-CSS plugin to Next.js config..."),await s.writeFile(_,O+t),await S(_)}}const ee=await N().catch(()=>e.logError("Could not read package.json file.")).then(t=>(t.scripts||(t.scripts={}),t.scripts.prepare?t.scripts.prepare.includes("salty-css")||(e.logger.info("Edit file: "+b),t.scripts.prepare=t.scripts.prepare+" && npx salty-css build"):(e.logger.info("Edit file: "+b),t.scripts.prepare="npx salty-css build"),t));await Y(ee),e.logger.info("Running the build to generate initial CSS..."),await e.generateCss(r),e.logger.info("🎉 Salty CSS project initialized successfully!"),e.logger.info("Next steps:"),e.logger.info("1. Configure variables and templates in `salty.config.ts`"),e.logger.info("2. Create a new component with `npx salty-css generate [component-name]`"),e.logger.info("3. Run `npx salty-css build` to generate the CSS"),e.logger.info("4. Read about the features in the documentation: https://salty-css.dev"),e.logger.info("5. Star the project on GitHub: https://github.com/margarita-form/salty-css ⭐")}),y.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>","Project directory to build the project in.").option("--watch","Watch for changes and rebuild the project.").action(async function(i=V){e.logger.info("Building the Salty-CSS project...");const{dir:a=i,watch:f}=this.opts();if(!a)return e.logError("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");const d=H(a);await e.generateCss(d),f&&(e.logger.info("Watching for changes in the project directory..."),A.watch(d,{recursive:!0},async(p,c)=>{await ae.checkShouldRestart(c)?await e.generateCss(d,!1,!1):e.isSaltyFile(c)&&await e.generateFile(d,c)}))}),y.command("generate [file] [directory]").alias("g").description("Generate a new component file.").option("-f, --file <file>","File to generate.").option("-d, --dir <dir>","Project directory to generate the file in.").option("-t, --tag <tag>","HTML tag of the component.","div").option("-n, --name <name>","Name of the component.").option("-c, --className <className>","CSS class of the component.").option("-r, --reactComponent","Generate a React component as well.").action(async function(i,a=V){const{file:f=i,dir:d=a,tag:p,name:c,className:r,reactComponent:q=!1}=this.opts();if(!f)return e.logError("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");if(!d)return e.logError("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");const m=H(d),w=f.split("/").slice(0,-1).join("/");w&&await s.mkdir(n.join(m,w),{recursive:!0});const h=n.join(m,f),g=n.parse(h);g.ext||(g.ext=".ts"),g.name.endsWith(".css")||(g.name=g.name+".css"),g.base=g.name+g.ext;const j=n.format(g);if(await s.readFile(j,"utf-8").catch(()=>{})!==void 0){e.logger.error("File already exists:",j);return}let F=ie.pascalCase(c||g.base.replace(/\.css\.\w+$/,""));if(q){const M=F+"Component";F=F+"Wrapper";const U=g.base.replace(/\.css\.\w+$/,""),{content:Q}=await P("react/react-vanilla-file.ts",{tag:p,componentName:M,styledComponentName:F,className:r,fileName:U});g.name=U.replace(/\.css$/,""),g.ext=".tsx",g.base=g.name+g.ext;const E=n.format(g);e.logger.info("Generating a new file: "+E),await s.writeFile(E,Q),await S(E)}const{content:W}=await P("react/react-styled-file.ts",{tag:p,name:F,className:r});e.logger.info("Generating a new file: "+j),await s.writeFile(j,W),await S(j)});const K=async()=>{const i=n.join(process.cwd(),"package.json"),a=await N(i).catch(p=>e.logError(p));if(!a)return e.logError("Could not read package.json file.");const f={...a.dependencies,...a.devDependencies},d=Object.entries(f).filter(([p])=>p==="salty-css"||p.startsWith("@salty-css/"));return d.length?d:e.logError("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+i)};y.command("update [version]").alias("up").description("Update Salty-CSS packages to the latest or specified version.").option("-v, --version <version>","Version to update to.").option("--legacy-peer-deps <legacyPeerDeps>","Use legacy peer dependencies (not recommended).",!1).action(async function(i="latest"){const{legacyPeerDeps:a,version:f=i}=this.opts(),d=await K();if(!d)return e.logError("Could not update Salty-CSS packages as any were found in package.json.");const p=d.map(([m])=>f==="@"?`${m}@${$.version}`:`${m}@${f.replace(/^@/,"")}`);a?(e.logger.warn("Using legacy peer dependencies to update packages."),await I(...p,"--legacy-peer-deps")):await I(...p);const c=await K();if(!c)return e.logError("Something went wrong while reading the updated packages.");const r=c.reduce((m,[w,h])=>(m[h]||(m[h]=[]),m[h].push(w),m),{});if(Object.keys(r).length===1){const w=Object.keys(r)[0].replace(/^\^/,"");e.logger.info(`Updated to all Salty CSS packages successfully to ${w}`)}else for(const[m,w]of Object.entries(r)){const h=m.replace(/^\^/,"");e.logger.info(`Updated to ${h}: ${w.join(", ")}`)}}),y.option("-v, --version","Show the current version of Salty-CSS.").action(async function(){const i=await B();e.logger.info("CLI is running: "+i.version);const a=n.join(process.cwd(),"package.json"),f=await N(a).catch(c=>e.logError(c));if(!f)return;const d={...f.dependencies,...f.devDependencies},p=Object.keys(d).filter(c=>c==="salty-css"||c.startsWith("@salty-css/"));if(!p.length)return e.logError("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+a);for(const c of p)e.logger.info(`${c}: ${d[c]}`)}),y.parseAsync(process.argv)}exports.main=ce;
+`;k&&!l?(t=t.replace(/module.exports = ([^;]+)/,(R,J)=>`module.exports = withSaltyCss(${J})`),l=!0):l||(t=t.replace(/export default ([^;]+)/,(R,J)=>`export default withSaltyCss(${J})`)),p||await I(`-D ${D.next}`),e.logger.info("Adding Salty-CSS plugin to Next.js config..."),await s.writeFile(_,O+t),await S(_)}}const ee=await N().catch(()=>e.logError("Could not read package.json file.")).then(t=>(t.scripts||(t.scripts={}),t.scripts.prepare?t.scripts.prepare.includes("salty-css")||(e.logger.info("Edit file: "+b),t.scripts.prepare=t.scripts.prepare+" && npx salty-css build"):(e.logger.info("Edit file: "+b),t.scripts.prepare="npx salty-css build"),t));await Y(ee),e.logger.info("Running the build to generate initial CSS..."),await e.generateCss(r),e.logger.info("🎉 Salty CSS project initialized successfully!"),e.logger.info("Next steps:"),e.logger.info("1. Configure variables and templates in `salty.config.ts`"),e.logger.info("2. Create a new component with `npx salty-css generate [component-name]`"),e.logger.info("3. Run `npx salty-css build` to generate the CSS"),e.logger.info("4. Read about the features in the documentation: https://salty-css.dev"),e.logger.info("5. Star the project on GitHub: https://github.com/margarita-form/salty-css ⭐")}),y.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>","Project directory to build the project in.").option("--watch","Watch for changes and rebuild the project.").action(async function(i=V){e.logger.info("Building the Salty-CSS project...");const{dir:a=i,watch:g}=this.opts();if(!a)return e.logError("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");const d=H(a);await e.generateCss(d),g&&(e.logger.info("Watching for changes in the project directory..."),A.watch(d,{recursive:!0},async(p,c)=>{await ae.checkShouldRestart(c)?await e.generateCss(d,!1,!1):e.isSaltyFile(c)&&await e.generateFile(d,c)}))}),y.command("generate [file] [directory]").alias("g").description("Generate a new component file.").option("-f, --file <file>","File to generate.").option("-d, --dir <dir>","Project directory to generate the file in.").option("-t, --tag <tag>","HTML tag of the component.","div").option("-n, --name <name>","Name of the component.").option("-c, --className <className>","CSS class of the component.").option("-r, --reactComponent","Generate a React component as well.").action(async function(i,a=V){const{file:g=i,dir:d=a,tag:p,name:c,className:r,reactComponent:q=!1}=this.opts();if(!g)return e.logError("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");if(!d)return e.logError("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");const m=H(d),w=g.split("/").slice(0,-1).join("/");w&&await s.mkdir(n.join(m,w),{recursive:!0});const h=n.join(m,g),f=n.parse(h);f.ext||(f.ext=".ts"),f.name.endsWith(".css")||(f.name=f.name+".css"),f.base=f.name+f.ext;const j=n.format(f);if(await s.readFile(j,"utf-8").catch(()=>{})!==void 0){e.logger.error("File already exists:",j);return}let F=ie.pascalCase(c||f.base.replace(/\.css\.\w+$/,""));if(q){const M=F+"Component";F=F+"Wrapper";const U=f.base.replace(/\.css\.\w+$/,""),{content:Q}=await v("react/react-vanilla-file.ts",{tag:p,componentName:M,styledComponentName:F,className:r,fileName:U});f.name=U.replace(/\.css$/,""),f.ext=".tsx",f.base=f.name+f.ext;const E=n.format(f);e.logger.info("Generating a new file: "+E),await s.writeFile(E,Q),await S(E)}const{content:W}=await v("react/react-styled-file.ts",{tag:p,name:F,className:r});e.logger.info("Generating a new file: "+j),await s.writeFile(j,W),await S(j)});const K=async()=>{const i=n.join(process.cwd(),"package.json"),a=await N(i).catch(p=>e.logError(p));if(!a)return e.logError("Could not read package.json file.");const g={...a.dependencies,...a.devDependencies},d=Object.entries(g).filter(([p])=>p==="salty-css"||p.startsWith("@salty-css/"));return d.length?d:e.logError("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+i)};y.command("update [version]").alias("up").description("Update Salty-CSS packages to the latest or specified version.").option("-v, --version <version>","Version to update to.").option("--legacy-peer-deps <legacyPeerDeps>","Use legacy peer dependencies (not recommended).",!1).action(async function(i="latest"){const{legacyPeerDeps:a,version:g=i}=this.opts(),d=await K();if(!d)return e.logError("Could not update Salty-CSS packages as any were found in package.json.");const p=d.map(([m])=>g==="@"?`${m}@${$.version}`:`${m}@${g.replace(/^@/,"")}`);a?(e.logger.warn("Using legacy peer dependencies to update packages."),await I(...p,"--legacy-peer-deps")):await I(...p);const c=await K();if(!c)return e.logError("Something went wrong while reading the updated packages.");const r=c.reduce((m,[w,h])=>(m[h]||(m[h]=[]),m[h].push(w),m),{});if(Object.keys(r).length===1){const w=Object.keys(r)[0].replace(/^\^/,"");e.logger.info(`Updated to all Salty CSS packages successfully to ${w}`)}else for(const[m,w]of Object.entries(r)){const h=m.replace(/^\^/,"");e.logger.info(`Updated to ${h}: ${w.join(", ")}`)}}),y.option("-v, --version","Show the current version of Salty-CSS.").action(async function(){const i=await B();e.logger.info("CLI is running: "+i.version);const a=n.join(process.cwd(),"package.json"),g=await N(a).catch(c=>e.logError(c));if(!g)return;const d={...g.dependencies,...g.devDependencies},p=Object.keys(d).filter(c=>c==="salty-css"||c.startsWith("@salty-css/"));if(!p.length)return e.logError("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+a);for(const c of p)e.logger.info(`${c}: ${d[c]}`)}),y.parseAsync(process.argv)}exports.main=ce;

package/bin/main.js

@@ -1,91 +1,91 @@
-import { Command as oe } from "commander";
-import { existsSync as Q, watch as re } from "fs";
+import { Command as ot } from "commander";
+import { existsSync as Q, watch as rt } from "fs";
 import { mkdir as q, readFile as S, writeFile as C } from "fs/promises";
-import { join as a, relative as z, parse as ce, format as te } from "path";
-import { render as le } from "ejs";
-import { l as t, a as h, g as K, i as de, b as fe } from "../index-D_yT1YG2.js";
-import { p as pe } from "../pascal-case-BQpR5PdN.js";
-import { exec as ue } from "child_process";
-import ge from "ora";
-import { c as ye } from "../should-restart-tiWPsnY8.js";
-const ne = (g) => new Promise((P, x) => {
-  ue(g, ($) => {
-    if ($) return x($);
-    P();
+import { join as a, relative as z, parse as ct, format as et } from "path";
+import { render as lt } from "ejs";
+import { l as e, a as h, g as K, i as dt, b as ft } from "../index-aCAHSJBW.js";
+import { p as pt } from "../pascal-case-BQpR5PdN.js";
+import { exec as gt } from "child_process";
+import ut from "ora";
+import { c as yt } from "../should-restart-D2s1tQrI.js";
+const st = (u) => new Promise((v, k) => {
+  gt(u, ($) => {
+    if ($) return k($);
+    v();
   });
-}), E = async (...g) => {
-  const P = g.map((J) => J.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), x = ge(`Installing packages: ${P}`).start(), $ = g.join(" ");
-  await ne(`npm install ${$}`), x.succeed(`Installed packages: ${P}`);
-}, me = () => Q(a(process.cwd(), "node_modules", ".bin", "prettier"));
-async function j(g) {
+}), E = async (...u) => {
+  const v = u.map((J) => J.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), k = ut(`Installing packages: ${v}`).start(), $ = u.join(" ");
+  await st(`npm install ${$}`), k.succeed(`Installed packages: ${v}`);
+}, mt = () => Q(a(process.cwd(), "node_modules", ".bin", "prettier"));
+async function j(u) {
   try {
-    if (!me()) return;
-    await ne(`./node_modules/.bin/prettier --write "${g}"`), t.info(`Formatted ${g} with Prettier`);
-  } catch (P) {
-    t.error(`Error formatting ${g} with Prettier:`, P);
+    if (!mt()) return;
+    await st(`./node_modules/.bin/prettier --write "${u}"`), e.info(`Formatted ${u} with Prettier`);
+  } catch (v) {
+    e.error(`Error formatting ${u} with Prettier:`, v);
   }
 }
-async function Je() {
-  const g = new oe();
-  g.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
-  const P = {
+async function Jt() {
+  const u = new ot();
+  u.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
+  const v = {
     // Core files
     "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"),
     "react/react-vanilla-file.ts": import("../react-vanilla-file-CCXbsjIb.js")
-  }, x = async (n, i) => {
-    const { default: d } = await P[n], l = le(d, i);
-    return { fileName: n, content: l };
+  }, k = async (s, i) => {
+    const { default: d } = await v[s], l = lt(d, i);
+    return { fileName: s, content: l };
   }, $ = async () => {
-    const n = a(process.cwd(), ".saltyrc.json");
-    return await S(n, "utf-8").then(JSON.parse).catch(() => ({}));
-  }, J = a(process.cwd(), "package.json"), O = async (n = J) => {
-    const i = await S(n, "utf-8").then(JSON.parse).catch(() => {
+    const s = a(process.cwd(), ".saltyrc.json");
+    return await S(s, "utf-8").then(JSON.parse).catch(() => ({}));
+  }, J = a(process.cwd(), "package.json"), O = async (s = J) => {
+    const i = await S(s, "utf-8").then(JSON.parse).catch(() => {
     });
     if (!i) throw "Could not read package.json file!";
     return i;
-  }, se = async (n, i = J) => {
-    typeof n == "object" && (n = JSON.stringify(n, null, 2)), await C(i, n);
+  }, nt = async (s, i = J) => {
+    typeof s == "object" && (s = JSON.stringify(s, null, 2)), await C(i, s);
   }, X = async () => {
-    const n = new URL("../package.json", import.meta.url);
-    return O(n);
+    const s = new URL("../package.json", import.meta.url);
+    return O(s);
   }, Y = await (async () => (await $()).defaultProject)(), N = await X(), A = {
     core: `@salty-css/core@${N.version}`,
     react: `@salty-css/react@${N.version}`,
     eslintConfigCore: `@salty-css/eslint-config-core@${N.version}`,
     vite: `@salty-css/vite@${N.version}`,
     next: `@salty-css/next@${N.version}`
-  }, G = (n) => {
-    const i = n === "." ? "" : n, d = process.cwd();
+  }, G = (s) => {
+    const i = s === "." ? "" : s, d = process.cwd();
     return a(d, i);
   };
-  g.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(n = ".") {
+  u.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(s = ".") {
     if (!await O().catch(() => {
     })) return h("Salty CSS project must be initialized in a directory with a package.json file.");
-    t.info("Initializing a new Salty-CSS project!");
-    const { dir: d = n, cssFile: l, skipInstall: p } = this.opts();
+    e.info("Initializing a new Salty-CSS project!");
+    const { dir: d = s, cssFile: l, skipInstall: p } = this.opts();
     if (!d) return h("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
     p || await E(A.core, A.react);
-    const r = process.cwd(), o = G(d), T = await Promise.all([x("salty.config.ts"), x("saltygen/index.css")]);
+    const r = process.cwd(), o = G(d), T = await Promise.all([k("salty.config.ts"), k("saltygen/index.css")]);
     await q(o, { recursive: !0 });
-    const y = T.map(async ({ fileName: e, content: u }) => {
-      const c = a(o, e);
+    const y = T.map(async ({ fileName: t, content: g }) => {
+      const c = a(o, t);
       if (await S(c, "utf-8").catch(() => {
       }) !== void 0) {
-        t.debug("File already exists: " + c);
+        e.debug("File already exists: " + c);
         return;
       }
-      const b = e.split("/").slice(0, -1).join("/");
-      b && await q(a(o, b), { recursive: !0 }), t.info("Creating file: " + c), await C(c, u), await j(c);
+      const b = t.split("/").slice(0, -1).join("/");
+      b && await q(a(o, b), { recursive: !0 }), e.info("Creating file: " + c), await C(c, g), await j(c);
     });
     await Promise.all(y);
     const w = z(r, o) || ".", m = a(r, ".saltyrc.json"), f = await S(m, "utf-8").catch(() => {
     });
     if (f === void 0) {
-      t.info("Creating file: " + m);
-      const u = JSON.stringify({
+      e.info("Creating file: " + m);
+      const g = JSON.stringify({
         $schema: "./node_modules/@salty-css/core/.saltyrc.schema.json",
         info: "This file is used to define projects and their configurations for Salty CSS cli. Do not delete, modify or add this file to .gitignore.",
         defaultProject: w,
@@ -96,157 +96,157 @@ async function Je() {
           }
         ]
       }, null, 2);
-      await C(m, u), await j(m);
+      await C(m, g), await j(m);
     } else {
-      const e = JSON.parse(f), u = (e == null ? void 0 : e.projects) || [];
-      if (u.findIndex((s) => s.dir === w) === -1) {
-        u.push({ dir: w, framework: "react" }), e.projects = [...u];
-        const s = JSON.stringify(e, null, 2);
-        s !== f && (t.info("Edit file: " + m), await C(m, s), await j(m));
+      const t = JSON.parse(f), g = (t == null ? void 0 : t.projects) || [];
+      if (g.findIndex((n) => n.dir === w) === -1) {
+        g.push({ dir: w, framework: "react" }), t.projects = [...g];
+        const n = JSON.stringify(t, null, 2);
+        n !== f && (e.info("Edit file: " + m), await C(m, n), await j(m));
       }
     }
-    const k = a(r, ".gitignore"), H = await S(k, "utf-8").catch(() => {
+    const P = a(r, ".gitignore"), H = await S(P, "utf-8").catch(() => {
     });
-    H !== void 0 && (H.includes("saltygen") || (t.info("Edit file: " + k), await C(k, H + `
+    H !== void 0 && (H.includes("saltygen") || (e.info("Edit file: " + P), await C(P, H + `
 
 # Salty-CSS
 saltygen
 `)));
     const F = ["src", "public", "assets", "styles", "css", "app"], M = ["styles", "css", "app", "pages"], B = ["index", "styles", "main", "app", "global", "globals"], U = [".css", ".scss", ".sass"], D = await (async () => {
       if (l) return l;
-      for (const e of F)
-        for (const u of B)
+      for (const t of F)
+        for (const g of B)
           for (const c of U) {
-            const s = a(o, e, u + c);
-            if (await S(s, "utf-8").catch(() => {
-            }) !== void 0) return z(o, s);
+            const n = a(o, t, g + c);
+            if (await S(n, "utf-8").catch(() => {
+            }) !== void 0) return z(o, n);
             for (const L of M) {
-              const R = a(o, e, L, u + c);
+              const R = a(o, t, L, g + c);
               if (await S(R, "utf-8").catch(() => {
               }) !== void 0) return z(o, R);
             }
           }
     })();
     if (D) {
-      const e = a(o, D), u = await S(e, "utf-8").catch(() => {
+      const t = a(o, D), g = await S(t, "utf-8").catch(() => {
       });
-      if (u !== void 0 && !u.includes("saltygen")) {
-        const s = a(e, ".."), L = `@import '${z(s, a(o, "saltygen/index.css"))}';`;
-        t.info("Adding global import statement to CSS file: " + e), await C(e, L + `
-` + u), await j(e);
+      if (g !== void 0 && !g.includes("saltygen")) {
+        const n = a(t, ".."), L = `@import '${z(n, a(o, "saltygen/index.css"))}';`;
+        e.info("Adding global import statement to CSS file: " + t), await C(t, L + `
+` + g), await j(t);
       }
     } else
-      t.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");
-    const ae = {
+      e.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");
+    const at = {
       projectJs: a(o, "eslint.config.js"),
       rootJs: a(r, "eslint.config.js"),
       projectMjs: a(o, "eslint.config.mjs"),
       rootMjs: a(r, "eslint.config.mjs"),
       projectJson: a(o, ".eslintrc.json"),
       rootJson: a(r, ".eslintrc.json")
-    }, v = Object.values(ae).find((e) => Q(e));
-    if (v) {
+    }, x = Object.values(at).find((t) => Q(t));
+    if (x) {
       p || await E(A.eslintConfigCore);
-      const e = await S(v, "utf-8").catch(() => {
+      const t = await S(x, "utf-8").catch(() => {
       });
-      if (!e) return h("Could not read ESLint config file.");
-      if (!e.includes("salty-css"))
-        if (t.info("Edit file: " + v), v.endsWith("js")) {
-          let s = `import saltyCss from "@salty-css/eslint-config-core/flat";
-${e}`;
-          e.includes("typescript-eslint") ? s.includes(".config(") ? s = s.replace(".config(", ".config(saltyCss,") : t.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually.") : s.includes("export default [") ? s = s.replace("export default [", "export default [ saltyCss,") : s.includes("eslintConfig = [") ? s = s.replace("eslintConfig = [", "eslintConfig = [ saltyCss,") : t.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."), await C(v, s), await j(v);
+      if (!t) return h("Could not read ESLint config file.");
+      if (!t.includes("salty-css"))
+        if (e.info("Edit file: " + x), x.endsWith("js")) {
+          let n = `import saltyCss from "@salty-css/eslint-config-core/flat";
+${t}`;
+          t.includes("typescript-eslint") ? n.includes(".config(") ? n = n.replace(".config(", ".config(saltyCss,") : e.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually.") : n.includes("export default [") ? n = n.replace("export default [", "export default [ saltyCss,") : n.includes("eslintConfig = [") ? n = n.replace("eslintConfig = [", "eslintConfig = [ saltyCss,") : e.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."), await C(x, n), await j(x);
         } else {
-          const c = JSON.parse(e);
+          const c = JSON.parse(t);
           c.extends || (c.extends = []), c.extends.push("@salty-css/core");
-          const s = JSON.stringify(c, null, 2);
-          await C(v, s), await j(v);
+          const n = JSON.stringify(c, null, 2);
+          await C(x, n), await j(x);
         }
     }
     const W = a(o, "vite.config.ts"), V = await S(W, "utf-8").catch(() => {
     });
     if (V !== void 0 && !V.includes("saltyPlugin")) {
-      t.info("Edit file: " + W);
-      const u = `import { saltyPlugin } from '@salty-css/vite';
-`, s = V.replace(/(plugins: \[)/, `$1
+      e.info("Edit file: " + W);
+      const g = `import { saltyPlugin } from '@salty-css/vite';
+`, n = V.replace(/(plugins: \[)/, `$1
   saltyPlugin(__dirname),`);
-      p || await E(`-D ${A.vite}`), t.info("Adding Salty-CSS plugin to Vite config..."), await C(W, u + s), await j(W);
+      p || await E(`-D ${A.vite}`), e.info("Adding Salty-CSS plugin to Vite config..."), await C(W, g + n), await j(W);
     }
-    const _ = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((e) => a(o, e)).find((e) => Q(e));
+    const _ = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((t) => a(o, t)).find((t) => Q(t));
     if (_) {
-      let e = await S(_, "utf-8").catch(() => {
+      let t = await S(_, "utf-8").catch(() => {
       });
-      if (e !== void 0 && !e.includes("withSaltyCss")) {
+      if (t !== void 0 && !t.includes("withSaltyCss")) {
         let c = !1;
-        /\splugins([^=]*)=[^[]\[/.test(e) && !c && (e = e.replace(/\splugins([^=]*)=[^[]\[/, (R, I) => ` plugins${I}= [withSaltyCss,`), c = !0);
-        const b = e.includes("module.exports"), L = b ? `const { withSaltyCss } = require('@salty-css/next');
+        /\splugins([^=]*)=[^[]\[/.test(t) && !c && (t = t.replace(/\splugins([^=]*)=[^[]\[/, (R, I) => ` plugins${I}= [withSaltyCss,`), c = !0);
+        const b = t.includes("module.exports"), L = b ? `const { withSaltyCss } = require('@salty-css/next');
 ` : `import { withSaltyCss } from '@salty-css/next';
 `;
-        b && !c ? (e = e.replace(/module.exports = ([^;]+)/, (R, I) => `module.exports = withSaltyCss(${I})`), c = !0) : c || (e = e.replace(/export default ([^;]+)/, (R, I) => `export default withSaltyCss(${I})`)), p || await E(`-D ${A.next}`), t.info("Adding Salty-CSS plugin to Next.js config..."), await C(_, L + e), await j(_);
+        b && !c ? (t = t.replace(/module.exports = ([^;]+)/, (R, I) => `module.exports = withSaltyCss(${I})`), c = !0) : c || (t = t.replace(/export default ([^;]+)/, (R, I) => `export default withSaltyCss(${I})`)), p || await E(`-D ${A.next}`), e.info("Adding Salty-CSS plugin to Next.js config..."), await C(_, L + t), await j(_);
       }
     }
-    const ie = await O().catch(() => h("Could not read package.json file.")).then((e) => (e.scripts || (e.scripts = {}), e.scripts.prepare ? e.scripts.prepare.includes("salty-css") || (t.info("Edit file: " + J), e.scripts.prepare = e.scripts.prepare + " && npx salty-css build") : (t.info("Edit file: " + J), e.scripts.prepare = "npx salty-css build"), e));
-    await se(ie), t.info("Running the build to generate initial CSS..."), await K(o), t.info("🎉 Salty CSS project initialized successfully!"), t.info("Next steps:"), t.info("1. Configure variables and templates in `salty.config.ts`"), t.info("2. Create a new component with `npx salty-css generate [component-name]`"), t.info("3. Run `npx salty-css build` to generate the CSS"), t.info("4. Read about the features in the documentation: https://salty-css.dev"), t.info("5. Star the project on GitHub: https://github.com/margarita-form/salty-css ⭐");
-  }), g.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>", "Project directory to build the project in.").option("--watch", "Watch for changes and rebuild the project.").action(async function(n = Y) {
-    t.info("Building the Salty-CSS project...");
-    const { dir: i = n, watch: d } = this.opts();
+    const it = await O().catch(() => h("Could not read package.json file.")).then((t) => (t.scripts || (t.scripts = {}), t.scripts.prepare ? t.scripts.prepare.includes("salty-css") || (e.info("Edit file: " + J), t.scripts.prepare = t.scripts.prepare + " && npx salty-css build") : (e.info("Edit file: " + J), t.scripts.prepare = "npx salty-css build"), t));
+    await nt(it), e.info("Running the build to generate initial CSS..."), await K(o), e.info("🎉 Salty CSS project initialized successfully!"), e.info("Next steps:"), e.info("1. Configure variables and templates in `salty.config.ts`"), e.info("2. Create a new component with `npx salty-css generate [component-name]`"), e.info("3. Run `npx salty-css build` to generate the CSS"), e.info("4. Read about the features in the documentation: https://salty-css.dev"), e.info("5. Star the project on GitHub: https://github.com/margarita-form/salty-css ⭐");
+  }), u.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>", "Project directory to build the project in.").option("--watch", "Watch for changes and rebuild the project.").action(async function(s = Y) {
+    e.info("Building the Salty-CSS project...");
+    const { dir: i = s, watch: d } = this.opts();
     if (!i) return h("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
     const l = G(i);
-    await K(l), d && (t.info("Watching for changes in the project directory..."), re(l, { recursive: !0 }, async (p, r) => {
-      await ye(r) ? await K(l, !1, !1) : de(r) && await fe(l, r);
+    await K(l), d && (e.info("Watching for changes in the project directory..."), rt(l, { recursive: !0 }, async (p, r) => {
+      await yt(r) ? await K(l, !1, !1) : dt(r) && await ft(l, r);
     }));
-  }), g.command("generate [file] [directory]").alias("g").description("Generate a new component file.").option("-f, --file <file>", "File to generate.").option("-d, --dir <dir>", "Project directory to generate the file in.").option("-t, --tag <tag>", "HTML tag of the component.", "div").option("-n, --name <name>", "Name of the component.").option("-c, --className <className>", "CSS class of the component.").option("-r, --reactComponent", "Generate a React component as well.").action(async function(n, i = Y) {
-    const { file: d = n, dir: l = i, tag: p, name: r, className: o, reactComponent: T = !1 } = this.opts();
+  }), u.command("generate [file] [directory]").alias("g").description("Generate a new component file.").option("-f, --file <file>", "File to generate.").option("-d, --dir <dir>", "Project directory to generate the file in.").option("-t, --tag <tag>", "HTML tag of the component.", "div").option("-n, --name <name>", "Name of the component.").option("-c, --className <className>", "CSS class of the component.").option("-r, --reactComponent", "Generate a React component as well.").action(async function(s, i = Y) {
+    const { file: d = s, dir: l = i, tag: p, name: r, className: o, reactComponent: T = !1 } = this.opts();
     if (!d) return h("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");
     if (!l) return h("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
     const y = G(l), w = d.split("/").slice(0, -1).join("/");
     w && await q(a(y, w), { recursive: !0 });
-    const m = a(y, d), f = ce(m);
+    const m = a(y, d), f = ct(m);
     f.ext || (f.ext = ".ts"), f.name.endsWith(".css") || (f.name = f.name + ".css"), f.base = f.name + f.ext;
-    const k = te(f);
-    if (await S(k, "utf-8").catch(() => {
+    const P = et(f);
+    if (await S(P, "utf-8").catch(() => {
     }) !== void 0) {
-      t.error("File already exists:", k);
+      e.error("File already exists:", P);
       return;
     }
-    let F = pe(r || f.base.replace(/\.css\.\w+$/, ""));
+    let F = pt(r || f.base.replace(/\.css\.\w+$/, ""));
     if (T) {
       const B = F + "Component";
       F = F + "Wrapper";
-      const U = f.base.replace(/\.css\.\w+$/, ""), { content: ee } = await x("react/react-vanilla-file.ts", { tag: p, componentName: B, styledComponentName: F, className: o, fileName: U });
+      const U = f.base.replace(/\.css\.\w+$/, ""), { content: tt } = await k("react/react-vanilla-file.ts", { tag: p, componentName: B, styledComponentName: F, className: o, fileName: U });
       f.name = U.replace(/\.css$/, ""), f.ext = ".tsx", f.base = f.name + f.ext;
-      const D = te(f);
-      t.info("Generating a new file: " + D), await C(D, ee), await j(D);
+      const D = et(f);
+      e.info("Generating a new file: " + D), await C(D, tt), await j(D);
     }
-    const { content: M } = await x("react/react-styled-file.ts", { tag: p, name: F, className: o });
-    t.info("Generating a new file: " + k), await C(k, M), await j(k);
+    const { content: M } = await k("react/react-styled-file.ts", { tag: p, name: F, className: o });
+    e.info("Generating a new file: " + P), await C(P, M), await j(P);
   });
   const Z = async () => {
-    const n = a(process.cwd(), "package.json"), i = await O(n).catch((p) => h(p));
+    const s = a(process.cwd(), "package.json"), i = await O(s).catch((p) => h(p));
     if (!i) return h("Could not read package.json file.");
     const d = { ...i.dependencies, ...i.devDependencies }, l = Object.entries(d).filter(([p]) => p === "salty-css" || p.startsWith("@salty-css/"));
     return l.length ? l : h(
-      "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + n
+      "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + s
     );
   };
-  g.command("update [version]").alias("up").description("Update Salty-CSS packages to the latest or specified version.").option("-v, --version <version>", "Version to update to.").option("--legacy-peer-deps <legacyPeerDeps>", "Use legacy peer dependencies (not recommended).", !1).action(async function(n = "latest") {
-    const { legacyPeerDeps: i, version: d = n } = this.opts(), l = await Z();
+  u.command("update [version]").alias("up").description("Update Salty-CSS packages to the latest or specified version.").option("-v, --version <version>", "Version to update to.").option("--legacy-peer-deps <legacyPeerDeps>", "Use legacy peer dependencies (not recommended).", !1).action(async function(s = "latest") {
+    const { legacyPeerDeps: i, version: d = s } = this.opts(), l = await Z();
     if (!l) return h("Could not update Salty-CSS packages as any were found in package.json.");
     const p = l.map(([y]) => d === "@" ? `${y}@${N.version}` : `${y}@${d.replace(/^@/, "")}`);
-    i ? (t.warn("Using legacy peer dependencies to update packages."), await E(...p, "--legacy-peer-deps")) : await E(...p);
+    i ? (e.warn("Using legacy peer dependencies to update packages."), await E(...p, "--legacy-peer-deps")) : await E(...p);
     const r = await Z();
     if (!r) return h("Something went wrong while reading the updated packages.");
     const o = r.reduce((y, [w, m]) => (y[m] || (y[m] = []), y[m].push(w), y), {});
     if (Object.keys(o).length === 1) {
       const w = Object.keys(o)[0].replace(/^\^/, "");
-      t.info(`Updated to all Salty CSS packages successfully to ${w}`);
+      e.info(`Updated to all Salty CSS packages successfully to ${w}`);
     } else
       for (const [y, w] of Object.entries(o)) {
         const m = y.replace(/^\^/, "");
-        t.info(`Updated to ${m}: ${w.join(", ")}`);
+        e.info(`Updated to ${m}: ${w.join(", ")}`);
       }
-  }), g.option("-v, --version", "Show the current version of Salty-CSS.").action(async function() {
-    const n = await X();
-    t.info("CLI is running: " + n.version);
+  }), u.option("-v, --version", "Show the current version of Salty-CSS.").action(async function() {
+    const s = await X();
+    e.info("CLI is running: " + s.version);
     const i = a(process.cwd(), "package.json"), d = await O(i).catch((r) => h(r));
     if (!d) return;
     const l = { ...d.dependencies, ...d.devDependencies }, p = Object.keys(l).filter((r) => r === "salty-css" || r.startsWith("@salty-css/"));
@@ -255,9 +255,9 @@ ${e}`;
         "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + i
       );
     for (const r of p)
-      t.info(`${r}: ${l[r]}`);
-  }), g.parseAsync(process.argv);
+      e.info(`${r}: ${l[r]}`);
+  }), u.parseAsync(process.argv);
 }
 export {
-  Je as main
+  Jt as main
 };

package/compiler/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("esbuild");require("child_process");require("../dash-case-BJEkFEGQ.cjs");require("path");require("fs");require("fs/promises");require("../parse-styles-bvJ5u1by.cjs");const e=require("../index-Bh0Rdc9S.cjs");require("../css/merge.cjs");require("../define-templates-Cunsb_Tr.cjs");exports.compileSaltyFile=e.compileSaltyFile;exports.generateConfigStyles=e.generateConfigStyles;exports.generateCss=e.generateCss;exports.generateFile=e.generateFile;exports.isSaltyFile=e.isSaltyFile;exports.minimizeFile=e.minimizeFile;exports.saltyFileExtensions=e.saltyFileExtensions;exports.saltyFileRegExp=e.saltyFileRegExp;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("esbuild");require("child_process");require("../dash-case-BJEkFEGQ.cjs");require("path");require("fs");require("fs/promises");require("../parse-styles-BT4aa1vH.cjs");const e=require("../index-oCwSpzG5.cjs");require("../css/merge.cjs");require("../define-templates-Cunsb_Tr.cjs");exports.compileSaltyFile=e.compileSaltyFile;exports.generateConfigStyles=e.generateConfigStyles;exports.generateCss=e.generateCss;exports.generateFile=e.generateFile;exports.isSaltyFile=e.isSaltyFile;exports.minimizeFile=e.minimizeFile;exports.saltyFileExtensions=e.saltyFileExtensions;exports.saltyFileRegExp=e.saltyFileRegExp;

package/compiler/index.js

@@ -4,8 +4,8 @@ import "../dash-case-DBThphLm.js";
 import "path";
 import "fs";
 import "fs/promises";
-import "../parse-styles-BBLk1gXe.js";
-import { e as g, d as F, g as y, b as x, i as S, m as c, s as f, c as C } from "../index-D_yT1YG2.js";
+import "../parse-styles-DkygSsSC.js";
+import { e as g, d as F, g as y, b as x, i as S, m as c, s as f, c as C } from "../index-aCAHSJBW.js";
 import "../css/merge.js";
 import "../define-templates-4A2yHcMF.js";
 export {

package/css/keyframes.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../parse-styles-bvJ5u1by.cjs"),w=require("../dash-case-BJEkFEGQ.cjs"),C=async({animationName:l,params:u,appendInitialStyles:y,...t})=>{const n=l||w.toHash(t),r=async(s={})=>{const{duration:e="500ms",easing:o="ease-in-out",delay:i="0s",iterationCount:S="1",direction:p="normal",fillMode:g="forwards",playState:b="running"}={...u,...s},a=`${n} ${e} ${o} ${i} ${S} ${p} ${g} ${b}`;if(!y)return a;const c=t.from||t["0%"];if(!c)return a;const j=await m.parseAndJoinStyles(c,"");return`${a};${j}`},$=Object.entries(t).map(async([s,e])=>{if(!e)return"";const o=await m.parseAndJoinStyles(e,"");return`${typeof s=="number"?`${s}%`:s}{${o}}`}),d=(await Promise.all($)).join(""),f=`@keyframes ${n} {${d}}`;return Object.assign(r,{toString:r,isKeyframes:!0,animationName:n,css:f,keyframes:t}),r};exports.keyframes=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../parse-styles-BT4aa1vH.cjs"),w=require("../dash-case-BJEkFEGQ.cjs"),C=async({animationName:l,params:u,appendInitialStyles:y,...t})=>{const n=l||w.toHash(t),r=async(s={})=>{const{duration:e="500ms",easing:o="ease-in-out",delay:i="0s",iterationCount:S="1",direction:p="normal",fillMode:g="forwards",playState:b="running"}={...u,...s},a=`${n} ${e} ${o} ${i} ${S} ${p} ${g} ${b}`;if(!y)return a;const c=t.from||t["0%"];if(!c)return a;const j=await m.parseAndJoinStyles(c,"");return`${a};${j}`},$=Object.entries(t).map(async([s,e])=>{if(!e)return"";const o=await m.parseAndJoinStyles(e,"");return`${typeof s=="number"?`${s}%`:s}{${o}}`}),d=(await Promise.all($)).join(""),f=`@keyframes ${n} {${d}}`;return Object.assign(r,{toString:r,isKeyframes:!0,animationName:n,css:f,keyframes:t}),r};exports.keyframes=C;

package/css/keyframes.js

@@ -1,4 +1,4 @@
-import { p as m } from "../parse-styles-BBLk1gXe.js";
+import { p as m } from "../parse-styles-DkygSsSC.js";
 import { t as j } from "../dash-case-DBThphLm.js";
 const v = async ({ animationName: $, params: f, appendInitialStyles: l, ...t }) => {
   const r = $ || j(t), o = async (n = {}) => {

package/generators/index.cjs

@@ -1 +1 @@
-"use strict";var C=Object.defineProperty;var N=(a,s,t)=>s in a?C(a,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[s]=t;var m=(a,s,t)=>N(a,typeof s!="symbol"?s+"":s,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("../parse-styles-bvJ5u1by.cjs"),o=require("../dash-case-BJEkFEGQ.cjs");class y{constructor(s){m(this,"buildContext",{});this.params=s}get priority(){return 0}get isRoot(){return this.priority===0}get hash(){const{base:s,variants:t,compoundVariants:e}=this.params;return o.toHash({base:s,variants:t,compoundVariants:e})}get cssClassName(){return this.hash}get classNames(){const s=new Set([this.cssClassName]),{className:t}=this.params;return typeof t=="string"&&s.add(t),typeof t=="object"&&t.forEach(e=>s.add(e)),this.getTemplateClasses().forEach(e=>s.add(e)),this.buildContext.classNames&&this.buildContext.classNames.forEach(e=>s.add(e)),[...s].join(" ")}get cssFileName(){const{callerName:s}=this.buildContext;return s?`cl_${o.dashCase(s)}-${this.hash}.css`:`${this.hash}.css`}get css(){const{base:s={},variants:t={},compoundVariants:e=[]}=this.params,{config:i}=this.buildContext,n={...s,variants:t,compoundVariants:e};return S.parseAndJoinStyles(n,`.${this.cssClassName}`,i,this.isRoot)}getTemplateClasses(s=this.buildContext.config){if(!(s!=null&&s.templates)||!this.params.base||this.priority>0)return[];const t=Object.keys(s.templates);return Object.entries(this.params.base).reduce((e,[i,n])=>(t.includes(i)&&e.push("t_"+o.toHash(o.dashCase(`${i}-${n}`),4)),e),[])}_withBuildContext(s){return this.buildContext=s,this}}class x extends y{constructor(s){super(s),this._params=s}}class v extends y{constructor(s,t){super(t),this.tagName=s,this._params=t}get priority(){var s;return this.params.priority?this.params.priority:typeof this.tagName=="function"||typeof this.tagName=="object"?(((s=this.tagName.generator)==null?void 0:s.priority)||0)+1:0}get clientProps(){const{element:s,variants:t={},compoundVariants:e=[],defaultVariants:i={},defaultProps:n={},passProps:d}=this.params,{callerName:f,isProduction:b}=this.buildContext,h=new Set([]),l=r=>{const c=i[r];c!==void 0?h.add(`${r}=${String(c)}`):h.add(r)};Object.keys(t).forEach(l),e.map(r=>Object.keys(r).forEach(l));const p=new Set([]);if(this.params.base){const r=JSON.stringify(this.params.base).match(/\{-?props\.([^}]+)\}/gi);r&&r.forEach(c=>{const u=c.replace(/\{(?:-)?props\.([^}]+)\}/gi,"$1"),g=o.dashCase(u);u&&p.add(g)})}return{element:s,variantKeys:[...h],propValueKeys:[...p],passProps:d,defaultProps:n,attr:{"data-component-name":b?void 0:f}}}}exports.ClassNameGenerator=x;exports.StyledGenerator=v;
+"use strict";var C=Object.defineProperty;var N=(a,s,t)=>s in a?C(a,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[s]=t;var m=(a,s,t)=>N(a,typeof s!="symbol"?s+"":s,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("../parse-styles-BT4aa1vH.cjs"),n=require("../dash-case-BJEkFEGQ.cjs");class y{constructor(s){m(this,"buildContext",{});this.params=s}get priority(){return 0}get isRoot(){return this.priority===0}get hash(){const{base:s,variants:t,compoundVariants:e}=this.params;return n.toHash({base:s,variants:t,compoundVariants:e})}get cssClassName(){return this.hash}get classNames(){const s=new Set([this.cssClassName]),{className:t}=this.params;return typeof t=="string"&&s.add(t),typeof t=="object"&&t.forEach(e=>s.add(e)),this.getTemplateClasses().forEach(e=>s.add(e)),this.buildContext.classNames&&this.buildContext.classNames.forEach(e=>s.add(e)),[...s].join(" ")}get cssFileName(){const{callerName:s}=this.buildContext;return s?`cl_${n.dashCase(s)}-${this.hash}.css`:`${this.hash}.css`}get css(){const{base:s={},variants:t={},compoundVariants:e=[]}=this.params,{config:i}=this.buildContext,o={...s,variants:t,compoundVariants:e};return S.parseAndJoinStyles(o,`.${this.cssClassName}`,i,this.isRoot)}getTemplateClasses(s=this.buildContext.config){if(!(s!=null&&s.templates)||!this.params.base||this.priority>0)return[];const t=Object.keys(s.templates);return Object.entries(this.params.base).reduce((e,[i,o])=>(t.includes(i)&&e.push("t_"+n.toHash(n.dashCase(`${i}-${o}`),4)),e),[])}_withBuildContext(s){return this.buildContext=s,this}}class v extends y{constructor(s){super(s),this._params=s}}class x extends y{constructor(s,t){super(t),this.tagName=s,this._params=t}get priority(){var s;return this.params.priority?this.params.priority:typeof this.tagName=="function"||typeof this.tagName=="object"?(((s=this.tagName.generator)==null?void 0:s.priority)||0)+1:0}get clientProps(){const{element:s,variants:t={},compoundVariants:e=[],defaultVariants:i={},defaultProps:o={},passProps:d}=this.params,{callerName:f,isProduction:b}=this.buildContext,h=new Set([]),l=r=>{const c=i[r];c!==void 0?h.add(`${r}=${String(c)}`):h.add(r)};Object.keys(t).forEach(l),e.map(r=>Object.keys(r).forEach(l));const p=new Set([]);if(this.params.base){const r=JSON.stringify(this.params.base).match(/\{-?props\.([^}]+)\}/gi);r&&r.forEach(c=>{const u=c.replace(/\{(?:-)?props\.([^}]+)\}/gi,"$1"),g=n.dashCase(u);u&&p.add(g)})}return{element:s,variantKeys:[...h],propValueKeys:[...p],passProps:d,defaultProps:o,attr:{"data-component-name":b?void 0:f}}}}exports.ClassNameGenerator=v;exports.StyledGenerator=x;