@salty-css/core 0.0.1-alpha.45 → 0.0.1-alpha.47

package/bin/main.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("commander"),M=require("fs"),i=require("fs/promises"),t=require("path"),X=require("ejs"),Y=require("../compiler/index.cjs"),Z=require("../pascal-case-iWoaJWwT.cjs"),q=require("winston"),ee=require("child_process"),te=require("ora");var R=typeof document<"u"?document.currentScript:null;const o=q.createLogger({level:"debug",format:q.format.combine(q.format.colorize(),q.format.cli()),transports:[new q.transports.Console({})]}),C=r=>{o.error(r)},W=r=>new Promise((u,w)=>{ee.exec(r,j=>{if(j)return w(j);u()})}),F=async(...r)=>{const u=r.map(x=>x.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),w=te(`Installing packages: ${u}`).start(),j=r.join(" ");await W(`npm install ${j}`),w.succeed(`Installed packages: ${u}`)},ie=()=>M.existsSync(t.join(process.cwd(),"node_modules",".bin","prettier"));async function J(r){try{if(!ie())return;await W(`./node_modules/.bin/prettier --write "${r}"`),o.info(`Formatted ${r} with Prettier`)}catch(u){o.error(`Error formatting ${r} with Prettier:`,u)}}async function ne(){const r=new Q.Command;r.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const u={"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"))},w=async(s,c)=>{const{default:l}=await u[s],f=X.render(l,c);return{fileName:s,content:f}},j=async()=>{const s=t.join(process.cwd(),".saltyrc");return await i.readFile(s,"utf-8").then(JSON.parse).catch(()=>({}))},x=async(s=t.join(process.cwd(),"package.json"))=>{const c=await i.readFile(s,"utf-8").then(JSON.parse).catch(()=>{});if(!c)throw"Could not read package.json file!";return c},B=async()=>{const s=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:R&&R.tagName.toUpperCase()==="SCRIPT"&&R.src||new URL("bin/main.cjs",document.baseURI).href);return x(s)},z=await(async()=>(await j()).defaultProject)(),v=await B(),k={core:`@salty-css/core@${v.version}`,react:`@salty-css/react@${v.version}`,eslintPluginCore:`@salty-css/eslint-plugin-core@${v.version}`,vite:`@salty-css/vite@${v.version}`,next:`@salty-css/next@${v.version}`},U=s=>{const c=s==="."?"":s,l=process.cwd();return t.join(l,c)};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(s="."){if(!await x().catch(()=>{}))return C("Salty CSS project must be initialized in a directory with a package.json file.");o.info("Initializing a new Salty-CSS project!");const{dir:l=s,cssFile:f,skipInstall:g}=this.opts();if(!l)return C("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");g||(await F(k.core,k.react),await F(`-D ${k.eslintPluginCore}`));const m=process.cwd(),n=U(l),N=await Promise.all([w("salty.config.ts"),w("saltygen/index.css")]);await i.mkdir(n,{recursive:!0});const _=N.map(async({fileName:e,content:p})=>{const a=t.join(n,e);if(await i.readFile(a,"utf-8").catch(()=>{})!==void 0){o.debug("File already exists: "+a);return}const S=e.split("/").slice(0,-1).join("/");S&&await i.mkdir(t.join(n,S),{recursive:!0}),o.info("Creating file: "+a),await i.writeFile(a,p),await J(a)});await Promise.all(_);const b=t.relative(m,n)||".",d=t.join(m,".saltyrc"),y=await i.readFile(d,"utf-8").catch(()=>{});if(y===void 0){o.info("Creating file: "+d);const p=JSON.stringify({defaultProject:b,projects:[b]},null,2);await i.writeFile(d,p)}else{o.info("Edit file: "+d);const e=JSON.parse(y),p=new Set((e==null?void 0:e.projects)||[]);p.add(b),e.projects=[...p];const a=JSON.stringify(e,null,2);await i.writeFile(d,a)}const A=t.join(m,".gitignore"),$=await i.readFile(A,"utf-8").catch(()=>{});$!==void 0&&($.includes("saltygen")||(o.info("Edit file: "+A),await i.writeFile(A,$+`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("commander"),W=require("fs"),i=require("fs/promises"),t=require("path"),X=require("ejs"),Y=require("../compiler/index.cjs"),Z=require("../pascal-case-iWoaJWwT.cjs"),N=require("winston"),ee=require("child_process"),te=require("ora");var R=typeof document<"u"?document.currentScript:null;const s=N.createLogger({level:"debug",format:N.format.combine(N.format.colorize(),N.format.cli()),transports:[new N.transports.Console({})]}),h=a=>{s.error(a)},B=a=>new Promise((m,j)=>{ee.exec(a,P=>{if(P)return j(P);m()})}),b=async(...a)=>{const m=a.map(F=>F.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),j=te(`Installing packages: ${m}`).start(),P=a.join(" ");await B(`npm install ${P}`),j.succeed(`Installed packages: ${m}`)},ne=()=>W.existsSync(t.join(process.cwd(),"node_modules",".bin","prettier"));async function _(a){try{if(!ne())return;await B(`./node_modules/.bin/prettier --write "${a}"`),s.info(`Formatted ${a} with Prettier`)}catch(m){s.error(`Error formatting ${a} with Prettier:`,m)}}async function ie(){const a=new Q.Command;a.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const m={"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"))},j=async(n,r)=>{const{default:o}=await m[n],u=X.render(o,r);return{fileName:n,content:u}},P=async()=>{const n=t.join(process.cwd(),".saltyrc");return await i.readFile(n,"utf-8").then(JSON.parse).catch(()=>({}))},F=async(n=t.join(process.cwd(),"package.json"))=>{const r=await i.readFile(n,"utf-8").then(JSON.parse).catch(()=>{});if(!r)throw"Could not read package.json file!";return r},z=async()=>{const n=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:R&&R.tagName.toUpperCase()==="SCRIPT"&&R.src||new URL("bin/main.cjs",document.baseURI).href);return F(n)},H=await(async()=>(await P()).defaultProject)(),k=await z(),$={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}`},U=n=>{const r=n==="."?"":n,o=process.cwd();return t.join(o,r)};a.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="."){if(!await F().catch(()=>{}))return h("Salty CSS project must be initialized in a directory with a package.json file.");s.info("Initializing a new Salty-CSS project!");const{dir:o=n,cssFile:u,skipInstall:g}=this.opts();if(!o)return h("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");g||(await b($.core,$.react),await b(`-D ${$.eslintPluginCore}`));const f=process.cwd(),l=U(o),C=await Promise.all([j("salty.config.ts"),j("saltygen/index.css")]);await i.mkdir(l,{recursive:!0});const y=C.map(async({fileName:e,content:p})=>{const c=t.join(l,e);if(await i.readFile(c,"utf-8").catch(()=>{})!==void 0){s.debug("File already exists: "+c);return}const v=e.split("/").slice(0,-1).join("/");v&&await i.mkdir(t.join(l,v),{recursive:!0}),s.info("Creating file: "+c),await i.writeFile(c,p),await _(c)});await Promise.all(y);const D=t.relative(f,l)||".",d=t.join(f,".saltyrc"),w=await i.readFile(d,"utf-8").catch(()=>{});if(w===void 0){s.info("Creating file: "+d);const p=JSON.stringify({defaultProject:D,projects:[D]},null,2);await i.writeFile(d,p)}else{s.info("Edit file: "+d);const e=JSON.parse(w),p=new Set((e==null?void 0:e.projects)||[]);p.add(D),e.projects=[...p];const c=JSON.stringify(e,null,2);await i.writeFile(d,c)}const A=t.join(f,".gitignore"),I=await i.readFile(A,"utf-8").catch(()=>{});I!==void 0&&(I.includes("saltygen")||(s.info("Edit file: "+A),await i.writeFile(A,I+`
 
 # Salty-CSS
 saltygen
-`)));const E=["src","public","assets","styles","css","app"],G=["styles","css","app","pages"],V=["index","styles","main","global","globals"],K=[".css",".scss",".sass"],H=await(async()=>{if(f)return f;for(const e of E)for(const p of V)for(const a of K){const h=t.join(n,e,p+a);if(await i.readFile(h,"utf-8").catch(()=>{})!==void 0)return t.relative(n,h);for(const D of G){const I=t.join(n,e,D,p+a);if(await i.readFile(I,"utf-8").catch(()=>{})!==void 0)return t.relative(n,I)}}})();if(H){const e=t.join(n,H),p=await i.readFile(e,"utf-8").catch(()=>{});if(p!==void 0&&!p.includes("saltygen")){const h=t.join(e,".."),D=`@import '${t.relative(h,t.join(n,"saltygen/index.css"))}';`;o.info("Adding global import statement to CSS file: "+e),await i.writeFile(e,D+`
-`+p),await J(e)}}else o.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");const T=t.join(n,"vite.config.ts"),O=await i.readFile(T,"utf-8").catch(()=>{});if(O!==void 0&&!O.includes("saltyPlugin")){o.info("Edit file: "+T);const p=`import { saltyPlugin } from '@salty-css/vite';
-`,h=O.replace(/(plugins: \[)/,`$1
-  saltyPlugin(__dirname),`);g||await F(`-D ${k.vite}`),o.info("Adding Salty-CSS plugin to Vite config..."),await i.writeFile(T,p+h),await J(T)}const L=["next.config.js","next.config.cjs","next.config.ts","next.config.mjs"].map(e=>t.join(n,e)).find(e=>M.existsSync(e));if(L){let e=await i.readFile(L,"utf-8").catch(()=>{});if(e!==void 0&&!e.includes("withSaltyCss")){let a=!1;/\splugins([^=]*)=[^[]\[/.test(e)&&!a&&(e=e.replace(/\splugins([^=]*)=[^[]\[/,(I,P)=>` plugins${P}= [withSaltyCss,`),a=!0);const S=e.includes("module.exports"),D=S?`const { withSaltyCss } = require('@salty-css/next');
+`)));const O=["src","public","assets","styles","css","app"],G=["styles","css","app","pages"],V=["index","styles","main","global","globals"],K=[".css",".scss",".sass"],M=await(async()=>{if(u)return u;for(const e of O)for(const p of V)for(const c of K){const S=t.join(l,e,p+c);if(await i.readFile(S,"utf-8").catch(()=>{})!==void 0)return t.relative(l,S);for(const J of G){const q=t.join(l,e,J,p+c);if(await i.readFile(q,"utf-8").catch(()=>{})!==void 0)return t.relative(l,q)}}})();if(M){const e=t.join(l,M),p=await i.readFile(e,"utf-8").catch(()=>{});if(p!==void 0&&!p.includes("saltygen")){const S=t.join(e,".."),J=`@import '${t.relative(S,t.join(l,"saltygen/index.css"))}';`;s.info("Adding global import statement to CSS file: "+e),await i.writeFile(e,J+`
+`+p),await _(e)}}else s.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");const L=t.join(l,"vite.config.ts"),E=await i.readFile(L,"utf-8").catch(()=>{});if(E!==void 0&&!E.includes("saltyPlugin")){s.info("Edit file: "+L);const p=`import { saltyPlugin } from '@salty-css/vite';
+`,S=E.replace(/(plugins: \[)/,`$1
+  saltyPlugin(__dirname),`);g||await b(`-D ${$.vite}`),s.info("Adding Salty-CSS plugin to Vite config..."),await i.writeFile(L,p+S),await _(L)}const T=["next.config.js","next.config.cjs","next.config.ts","next.config.mjs"].map(e=>t.join(l,e)).find(e=>W.existsSync(e));if(T){let e=await i.readFile(T,"utf-8").catch(()=>{});if(e!==void 0&&!e.includes("withSaltyCss")){let c=!1;/\splugins([^=]*)=[^[]\[/.test(e)&&!c&&(e=e.replace(/\splugins([^=]*)=[^[]\[/,(q,x)=>` plugins${x}= [withSaltyCss,`),c=!0);const v=e.includes("module.exports"),J=v?`const { withSaltyCss } = require('@salty-css/next');
 `:`import { withSaltyCss } from '@salty-css/next';
-`;S&&!a?(e=e.replace(/module.exports = ([^;]+)/,(I,P)=>`module.exports = withSaltyCss(${P})`),a=!0):a||(e=e.replace(/export default ([^;]+)/,(I,P)=>`export default withSaltyCss(${P})`)),g||await F(`-D ${k.next}`),o.info("Adding Salty-CSS plugin to Next.js config..."),await i.writeFile(L,D+e),await J(L)}}}),r.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>","Project directory to build the project in.").action(async function(s=z){o.info("Building the Salty-CSS project...");const{dir:c=s}=this.opts();if(!c)return C("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");const l=U(c);await Y.generateCss(l)}),r.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.").action(async function(s,c=z){const{file:l=s,dir:f=c,tag:g,name:m,className:n}=this.opts();if(!l)return C("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");if(!f)return C("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");const N=U(f),_=l.split("/").slice(0,-1).join("/");_&&await i.mkdir(t.join(N,_),{recursive:!0});const b=t.join(N,l),d=t.parse(b);d.ext||(d.ext=".ts"),d.name.endsWith(".css")||(d.name=d.name+".css"),d.base=d.name+d.ext;const y=t.format(d);if(await i.readFile(y,"utf-8").catch(()=>{})!==void 0){o.error("File already exists:",y);return}o.info("Generating a new file: "+y);const $=Z.pascalCase(m||d.base.replace(/\.css\.\w+$/,"")),{content:E}=await w("react/react-styled-file.ts",{tag:g,name:$,className:n});await i.writeFile(y,E),await J(y)}),r.command("update").alias("up").description("Update Salty-CSS packages to the latest version.").option("--legacy-peer-deps <legacyPeerDeps>","Use legacy peer dependencies (not recommended).",!1).action(async function(){const{legacyPeerDeps:s}=this.opts(),c=t.join(process.cwd(),"package.json"),l=await x(c).catch(n=>C(n));if(!l)return;const f={...l.dependencies,...l.devDependencies},g=Object.keys(f).filter(n=>n==="salty-css"||n.startsWith("@salty-css/"));if(!g.length)return C("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+c);const m=g.map(n=>`${n}@${v.version}`);s?(o.warn("Using legacy peer dependencies to update packages."),await F(...m,"--legacy-peer-deps")):await F(...m),o.info("Salty-CSS packages updated successfully!")}),r.parseAsync(process.argv)}exports.main=ne;
+`;v&&!c?(e=e.replace(/module.exports = ([^;]+)/,(q,x)=>`module.exports = withSaltyCss(${x})`),c=!0):c||(e=e.replace(/export default ([^;]+)/,(q,x)=>`export default withSaltyCss(${x})`)),g||await b(`-D ${$.next}`),s.info("Adding Salty-CSS plugin to Next.js config..."),await i.writeFile(T,J+e),await _(T)}}}),a.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>","Project directory to build the project in.").action(async function(n=H){s.info("Building the Salty-CSS project...");const{dir:r=n}=this.opts();if(!r)return h("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");const o=U(r);await Y.generateCss(o)}),a.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.").action(async function(n,r=H){const{file:o=n,dir:u=r,tag:g,name:f,className:l}=this.opts();if(!o)return h("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");if(!u)return h("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");const C=U(u),y=o.split("/").slice(0,-1).join("/");y&&await i.mkdir(t.join(C,y),{recursive:!0});const D=t.join(C,o),d=t.parse(D);d.ext||(d.ext=".ts"),d.name.endsWith(".css")||(d.name=d.name+".css"),d.base=d.name+d.ext;const w=t.format(d);if(await i.readFile(w,"utf-8").catch(()=>{})!==void 0){s.error("File already exists:",w);return}s.info("Generating a new file: "+w);const I=Z.pascalCase(f||d.base.replace(/\.css\.\w+$/,"")),{content:O}=await j("react/react-styled-file.ts",{tag:g,name:I,className:l});await i.writeFile(w,O),await _(w)}),a.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:r,version:o=n}=this.opts(),u=t.join(process.cwd(),"package.json"),g=await F(u).catch(y=>h(y));if(!g)return;const f={...g.dependencies,...g.devDependencies},l=Object.keys(f).filter(y=>y==="salty-css"||y.startsWith("@salty-css/"));if(!l.length)return h("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+u);const C=l.map(y=>o==="@"?`${y}@${k.version}`:`${y}@${o.replace(/^@/,"")}`);r?(s.warn("Using legacy peer dependencies to update packages."),await b(...C,"--legacy-peer-deps")):await b(...C),s.info("Salty-CSS packages updated successfully!")}),a.command("version").alias("v").description("Show the current version of Salty-CSS.").action(async function(){const n=await z();s.info("CLI is running:",n.version);const r=t.join(process.cwd(),"package.json"),o=await F(r).catch(f=>h(f));if(!o)return;const u={...o.dependencies,...o.devDependencies},g=Object.keys(u).filter(f=>f==="salty-css"||f.startsWith("@salty-css/"));if(!g.length)return h("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+r);for(const f of g)s.info(f,u[f])}),a.parseAsync(process.argv)}exports.main=ie;

package/bin/main.js

@@ -1,108 +1,108 @@
 import { Command as Y } from "commander";
 import { existsSync as G } from "fs";
-import { mkdir as R, readFile as p, writeFile as w } from "fs/promises";
-import { join as o, relative as O, parse as Z, format as tt } from "path";
+import { mkdir as W, readFile as m, writeFile as C } from "fs/promises";
+import { join as i, relative as _, parse as Z, format as tt } from "path";
 import { render as et } from "ejs";
 import { generateCss as nt } from "../compiler/index.js";
-import { p as it } from "../pascal-case-BQpR5PdN.js";
-import { createLogger as st, format as W, transports as ot } from "winston";
+import { p as st } from "../pascal-case-BQpR5PdN.js";
+import { createLogger as it, format as M, transports as ot } from "winston";
 import { exec as at } from "child_process";
 import rt from "ora";
-const i = st({
+const n = it({
   level: "debug",
-  format: W.combine(W.colorize(), W.cli()),
+  format: M.combine(M.colorize(), M.cli()),
   transports: [new ot.Console({})]
-}), P = (a) => {
-  i.error(a);
-}, M = (a) => new Promise((g, S) => {
-  at(a, (v) => {
-    if (v) return S(v);
-    g();
+}), h = (o) => {
+  n.error(o);
+}, V = (o) => new Promise((y, v) => {
+  at(o, (k) => {
+    if (k) return v(k);
+    y();
   });
-}), k = async (...a) => {
-  const g = a.map((F) => F.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), S = rt(`Installing packages: ${g}`).start(), v = a.join(" ");
-  await M(`npm install ${v}`), S.succeed(`Installed packages: ${g}`);
-}, ct = () => G(o(process.cwd(), "node_modules", ".bin", "prettier"));
-async function A(a) {
+}), b = async (...o) => {
+  const y = o.map((x) => x.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), v = rt(`Installing packages: ${y}`).start(), k = o.join(" ");
+  await V(`npm install ${k}`), v.succeed(`Installed packages: ${y}`);
+}, ct = () => G(i(process.cwd(), "node_modules", ".bin", "prettier"));
+async function E(o) {
   try {
     if (!ct()) return;
-    await M(`./node_modules/.bin/prettier --write "${a}"`), i.info(`Formatted ${a} with Prettier`);
-  } catch (g) {
-    i.error(`Error formatting ${a} with Prettier:`, g);
+    await V(`./node_modules/.bin/prettier --write "${o}"`), n.info(`Formatted ${o} with Prettier`);
+  } catch (y) {
+    n.error(`Error formatting ${o} with Prettier:`, y);
   }
 }
-async function vt() {
-  const a = new Y();
-  a.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
-  const g = {
+async function Pt() {
+  const o = new Y();
+  o.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
+  const y = {
     // Core files
     "salty.config.ts": import("../salty.config-D9ANEDiH.js"),
     "saltygen/index.css": import("../index-D_732b92.js"),
     // React
     "react/react-styled-file.ts": import("../react-styled-file-CGVf5n1B.js")
-  }, S = async (n, r) => {
-    const { default: c } = await g[n], f = et(c, r);
-    return { fileName: n, content: f };
-  }, v = async () => {
-    const n = o(process.cwd(), ".saltyrc");
-    return await p(n, "utf-8").then(JSON.parse).catch(() => ({}));
-  }, F = async (n = o(process.cwd(), "package.json")) => {
-    const r = await p(n, "utf-8").then(JSON.parse).catch(() => {
+  }, v = async (e, a) => {
+    const { default: s } = await y[e], f = et(s, a);
+    return { fileName: e, content: f };
+  }, k = async () => {
+    const e = i(process.cwd(), ".saltyrc");
+    return await m(e, "utf-8").then(JSON.parse).catch(() => ({}));
+  }, x = async (e = i(process.cwd(), "package.json")) => {
+    const a = await m(e, "utf-8").then(JSON.parse).catch(() => {
     });
-    if (!r) throw "Could not read package.json file!";
-    return r;
-  }, V = async () => {
-    const n = new URL("../package.json", import.meta.url);
-    return F(n);
-  }, q = await (async () => (await v()).defaultProject)(), j = await V(), $ = {
-    core: `@salty-css/core@${j.version}`,
-    react: `@salty-css/react@${j.version}`,
-    eslintPluginCore: `@salty-css/eslint-plugin-core@${j.version}`,
-    vite: `@salty-css/vite@${j.version}`,
-    next: `@salty-css/next@${j.version}`
-  }, U = (n) => {
-    const r = n === "." ? "" : n, c = process.cwd();
-    return o(c, r);
+    if (!a) throw "Could not read package.json file!";
+    return a;
+  }, R = async () => {
+    const e = new URL("../package.json", import.meta.url);
+    return x(e);
+  }, q = await (async () => (await k()).defaultProject)(), F = await R(), D = {
+    core: `@salty-css/core@${F.version}`,
+    react: `@salty-css/react@${F.version}`,
+    eslintPluginCore: `@salty-css/eslint-plugin-core@${F.version}`,
+    vite: `@salty-css/vite@${F.version}`,
+    next: `@salty-css/next@${F.version}`
+  }, U = (e) => {
+    const a = e === "." ? "" : e, s = process.cwd();
+    return i(s, a);
   };
-  a.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 = ".") {
-    if (!await F().catch(() => {
-    })) return P("Salty CSS project must be initialized in a directory with a package.json file.");
-    i.info("Initializing a new Salty-CSS project!");
-    const { dir: c = n, cssFile: f, skipInstall: u } = this.opts();
-    if (!c) return P("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
-    u || (await k($.core, $.react), await k(`-D ${$.eslintPluginCore}`));
-    const m = process.cwd(), e = U(c), N = await Promise.all([S("salty.config.ts"), S("saltygen/index.css")]);
-    await R(e, { recursive: !0 });
-    const E = N.map(async ({ fileName: t, content: d }) => {
-      const s = o(e, t);
-      if (await p(s, "utf-8").catch(() => {
+  o.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(e = ".") {
+    if (!await x().catch(() => {
+    })) return h("Salty CSS project must be initialized in a directory with a package.json file.");
+    n.info("Initializing a new Salty-CSS project!");
+    const { dir: s = e, cssFile: f, skipInstall: g } = this.opts();
+    if (!s) return h("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
+    g || (await b(D.core, D.react), await b(`-D ${D.eslintPluginCore}`));
+    const p = process.cwd(), c = U(s), P = await Promise.all([v("salty.config.ts"), v("saltygen/index.css")]);
+    await W(c, { recursive: !0 });
+    const u = P.map(async ({ fileName: t, content: d }) => {
+      const r = i(c, t);
+      if (await m(r, "utf-8").catch(() => {
       }) !== void 0) {
-        i.debug("File already exists: " + s);
+        n.debug("File already exists: " + r);
         return;
       }
-      const C = t.split("/").slice(0, -1).join("/");
-      C && await R(o(e, C), { recursive: !0 }), i.info("Creating file: " + s), await w(s, d), await A(s);
+      const j = t.split("/").slice(0, -1).join("/");
+      j && await W(i(c, j), { recursive: !0 }), n.info("Creating file: " + r), await C(r, d), await E(r);
     });
-    await Promise.all(E);
-    const b = O(m, e) || ".", l = o(m, ".saltyrc"), y = await p(l, "utf-8").catch(() => {
+    await Promise.all(u);
+    const I = _(p, c) || ".", l = i(p, ".saltyrc"), w = await m(l, "utf-8").catch(() => {
     });
-    if (y === void 0) {
-      i.info("Creating file: " + l);
+    if (w === void 0) {
+      n.info("Creating file: " + l);
       const d = JSON.stringify({
-        defaultProject: b,
-        projects: [b]
+        defaultProject: I,
+        projects: [I]
       }, null, 2);
-      await w(l, d);
+      await C(l, d);
     } else {
-      i.info("Edit file: " + l);
-      const t = JSON.parse(y), d = new Set((t == null ? void 0 : t.projects) || []);
-      d.add(b), t.projects = [...d];
-      const s = JSON.stringify(t, null, 2);
-      await w(l, s);
+      n.info("Edit file: " + l);
+      const t = JSON.parse(w), d = new Set((t == null ? void 0 : t.projects) || []);
+      d.add(I), t.projects = [...d];
+      const r = JSON.stringify(t, null, 2);
+      await C(l, r);
     }
-    const L = o(m, ".gitignore"), D = await p(L, "utf-8").catch(() => {
+    const L = i(p, ".gitignore"), J = await m(L, "utf-8").catch(() => {
     });
-    D !== void 0 && (D.includes("saltygen") || (i.info("Edit file: " + L), await w(L, D + `
+    J !== void 0 && (J.includes("saltygen") || (n.info("Edit file: " + L), await C(L, J + `
 
 # Salty-CSS
 saltygen
@@ -111,84 +111,96 @@ saltygen
       if (f) return f;
       for (const t of z)
         for (const d of Q)
-          for (const s of X) {
-            const h = o(e, t, d + s);
-            if (await p(h, "utf-8").catch(() => {
-            }) !== void 0) return O(e, h);
-            for (const I of K) {
-              const J = o(e, t, I, d + s);
-              if (await p(J, "utf-8").catch(() => {
-              }) !== void 0) return O(e, J);
+          for (const r of X) {
+            const S = i(c, t, d + r);
+            if (await m(S, "utf-8").catch(() => {
+            }) !== void 0) return _(c, S);
+            for (const N of K) {
+              const A = i(c, t, N, d + r);
+              if (await m(A, "utf-8").catch(() => {
+              }) !== void 0) return _(c, A);
             }
           }
     })();
     if (B) {
-      const t = o(e, B), d = await p(t, "utf-8").catch(() => {
+      const t = i(c, B), d = await m(t, "utf-8").catch(() => {
       });
       if (d !== void 0 && !d.includes("saltygen")) {
-        const h = o(t, ".."), I = `@import '${O(h, o(e, "saltygen/index.css"))}';`;
-        i.info("Adding global import statement to CSS file: " + t), await w(t, I + `
-` + d), await A(t);
+        const S = i(t, ".."), N = `@import '${_(S, i(c, "saltygen/index.css"))}';`;
+        n.info("Adding global import statement to CSS file: " + t), await C(t, N + `
+` + d), await E(t);
       }
     } else
-      i.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");
-    const T = o(e, "vite.config.ts"), H = await p(T, "utf-8").catch(() => {
+      n.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");
+    const O = i(c, "vite.config.ts"), H = await m(O, "utf-8").catch(() => {
     });
     if (H !== void 0 && !H.includes("saltyPlugin")) {
-      i.info("Edit file: " + T);
+      n.info("Edit file: " + O);
       const d = `import { saltyPlugin } from '@salty-css/vite';
-`, h = H.replace(/(plugins: \[)/, `$1
+`, S = H.replace(/(plugins: \[)/, `$1
   saltyPlugin(__dirname),`);
-      u || await k(`-D ${$.vite}`), i.info("Adding Salty-CSS plugin to Vite config..."), await w(T, d + h), await A(T);
+      g || await b(`-D ${D.vite}`), n.info("Adding Salty-CSS plugin to Vite config..."), await C(O, d + S), await E(O);
     }
-    const _ = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((t) => o(e, t)).find((t) => G(t));
-    if (_) {
-      let t = await p(_, "utf-8").catch(() => {
+    const T = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((t) => i(c, t)).find((t) => G(t));
+    if (T) {
+      let t = await m(T, "utf-8").catch(() => {
       });
       if (t !== void 0 && !t.includes("withSaltyCss")) {
-        let s = !1;
-        /\splugins([^=]*)=[^[]\[/.test(t) && !s && (t = t.replace(/\splugins([^=]*)=[^[]\[/, (J, x) => ` plugins${x}= [withSaltyCss,`), s = !0);
-        const C = t.includes("module.exports"), I = C ? `const { withSaltyCss } = require('@salty-css/next');
+        let r = !1;
+        /\splugins([^=]*)=[^[]\[/.test(t) && !r && (t = t.replace(/\splugins([^=]*)=[^[]\[/, (A, $) => ` plugins${$}= [withSaltyCss,`), r = !0);
+        const j = t.includes("module.exports"), N = j ? `const { withSaltyCss } = require('@salty-css/next');
 ` : `import { withSaltyCss } from '@salty-css/next';
 `;
-        C && !s ? (t = t.replace(/module.exports = ([^;]+)/, (J, x) => `module.exports = withSaltyCss(${x})`), s = !0) : s || (t = t.replace(/export default ([^;]+)/, (J, x) => `export default withSaltyCss(${x})`)), u || await k(`-D ${$.next}`), i.info("Adding Salty-CSS plugin to Next.js config..."), await w(_, I + t), await A(_);
+        j && !r ? (t = t.replace(/module.exports = ([^;]+)/, (A, $) => `module.exports = withSaltyCss(${$})`), r = !0) : r || (t = t.replace(/export default ([^;]+)/, (A, $) => `export default withSaltyCss(${$})`)), g || await b(`-D ${D.next}`), n.info("Adding Salty-CSS plugin to Next.js config..."), await C(T, N + t), await E(T);
       }
     }
-  }), a.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>", "Project directory to build the project in.").action(async function(n = q) {
-    i.info("Building the Salty-CSS project...");
-    const { dir: r = n } = this.opts();
-    if (!r) return P("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
-    const c = U(r);
-    await nt(c);
-  }), a.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.").action(async function(n, r = q) {
-    const { file: c = n, dir: f = r, tag: u, name: m, className: e } = this.opts();
-    if (!c) return P("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");
-    if (!f) return P("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
-    const N = U(f), E = c.split("/").slice(0, -1).join("/");
-    E && await R(o(N, E), { recursive: !0 });
-    const b = o(N, c), l = Z(b);
+  }), o.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>", "Project directory to build the project in.").action(async function(e = q) {
+    n.info("Building the Salty-CSS project...");
+    const { dir: a = e } = this.opts();
+    if (!a) return h("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
+    const s = U(a);
+    await nt(s);
+  }), o.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.").action(async function(e, a = q) {
+    const { file: s = e, dir: f = a, tag: g, name: p, className: c } = this.opts();
+    if (!s) return h("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");
+    if (!f) return h("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
+    const P = U(f), u = s.split("/").slice(0, -1).join("/");
+    u && await W(i(P, u), { recursive: !0 });
+    const I = i(P, s), l = Z(I);
     l.ext || (l.ext = ".ts"), l.name.endsWith(".css") || (l.name = l.name + ".css"), l.base = l.name + l.ext;
-    const y = tt(l);
-    if (await p(y, "utf-8").catch(() => {
+    const w = tt(l);
+    if (await m(w, "utf-8").catch(() => {
     }) !== void 0) {
-      i.error("File already exists:", y);
+      n.error("File already exists:", w);
       return;
     }
-    i.info("Generating a new file: " + y);
-    const D = it(m || l.base.replace(/\.css\.\w+$/, "")), { content: z } = await S("react/react-styled-file.ts", { tag: u, name: D, className: e });
-    await w(y, z), await A(y);
-  }), a.command("update").alias("up").description("Update Salty-CSS packages to the latest version.").option("--legacy-peer-deps <legacyPeerDeps>", "Use legacy peer dependencies (not recommended).", !1).action(async function() {
-    const { legacyPeerDeps: n } = this.opts(), r = o(process.cwd(), "package.json"), c = await F(r).catch((e) => P(e));
-    if (!c) return;
-    const f = { ...c.dependencies, ...c.devDependencies }, u = Object.keys(f).filter((e) => e === "salty-css" || e.startsWith("@salty-css/"));
-    if (!u.length)
-      return P(
-        "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + r
+    n.info("Generating a new file: " + w);
+    const J = st(p || l.base.replace(/\.css\.\w+$/, "")), { content: z } = await v("react/react-styled-file.ts", { tag: g, name: J, className: c });
+    await C(w, z), await E(w);
+  }), o.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(e = "latest") {
+    const { legacyPeerDeps: a, version: s = e } = this.opts(), f = i(process.cwd(), "package.json"), g = await x(f).catch((u) => h(u));
+    if (!g) return;
+    const p = { ...g.dependencies, ...g.devDependencies }, c = Object.keys(p).filter((u) => u === "salty-css" || u.startsWith("@salty-css/"));
+    if (!c.length)
+      return h(
+        "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + f
       );
-    const m = u.map((e) => `${e}@${j.version}`);
-    n ? (i.warn("Using legacy peer dependencies to update packages."), await k(...m, "--legacy-peer-deps")) : await k(...m), i.info("Salty-CSS packages updated successfully!");
-  }), a.parseAsync(process.argv);
+    const P = c.map((u) => s === "@" ? `${u}@${F.version}` : `${u}@${s.replace(/^@/, "")}`);
+    a ? (n.warn("Using legacy peer dependencies to update packages."), await b(...P, "--legacy-peer-deps")) : await b(...P), n.info("Salty-CSS packages updated successfully!");
+  }), o.command("version").alias("v").description("Show the current version of Salty-CSS.").action(async function() {
+    const e = await R();
+    n.info("CLI is running:", e.version);
+    const a = i(process.cwd(), "package.json"), s = await x(a).catch((p) => h(p));
+    if (!s) return;
+    const f = { ...s.dependencies, ...s.devDependencies }, g = Object.keys(f).filter((p) => p === "salty-css" || p.startsWith("@salty-css/"));
+    if (!g.length)
+      return h(
+        "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 p of g)
+      n.info(p, f[p]);
+  }), o.parseAsync(process.argv);
 }
 export {
-  vt as main
+  Pt as main
 };

package/package.json

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

package/types/index.d.ts

@@ -1,6 +1,6 @@
 import { AllHTMLAttributes, ReactDOM, ReactNode } from 'react';
 import { StyleComponentGenerator } from '../generator';
-import { OrString } from './util-types';
+import { OrAny, OrString } from './util-types';
 export type CreateElementProps = {
     extend?: Tag<any>;
     children?: ReactNode;
@@ -13,7 +13,7 @@ export type CreateElementProps = {
 };
 export type StyledComponentProps = Record<string, unknown> & CreateElementProps;
 type FnComponent<PROPS extends StyledComponentProps> = {
-    (props: PROPS): ReactNode;
+    (props: OrAny | PROPS): ReactNode;
     generator?: StyleComponentGenerator;
 };
 export type Tag<PROPS extends StyledComponentProps> = OrString | keyof ReactDOM | FnComponent<PROPS>;
@@ -38,7 +38,8 @@ type Variants = {
     };
     compoundVariants?: CompoundVariant[];
 };
-type VariantPropValue<T> = T extends 'true' ? 'true' | true : T;
+type BooleanVariantValue = 'true' | 'false' | boolean;
+type VariantPropValue<T> = T extends 'true' ? BooleanVariantValue : T extends 'false' ? BooleanVariantValue : T;
 export type VariantProps<STYLES extends StyledParams> = STYLES['variants'] extends undefined ? object : {
     [K in keyof STYLES['variants']]?: VariantPropValue<keyof STYLES['variants'][K]> | '';
 };