@salty-css/core 0.0.1-alpha.30 → 0.0.1-alpha.32

package/README.md

@@ -1,15 +1,56 @@
-# Salty Css
+# Salty CSS - Kinda sweet but yet spicy CSS-in-JS library 🧂
 
-## Basic usage example with Button
+In the world of frontend dev is there anything saltier than CSS? Salty CSS is built to provide better developer experience for developers looking for performant and feature rich CSS-in-JS solutions.
 
-### Initial requirements
+## Features
 
-1. Add `saltyPlugin` to vite or webpack config from `@salty-css/vite` or `@salty-css/webpack`
-2. Create `salty.config.ts` to the root of your project
-3. Import global styles to any regular .css file from `saltygen/index.css` (does not exist during first run, cli command coming later)
-4. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
+- Build time compilation to achieve awesome runtime performance and minimal size
+- Next.js, React Server Components, Vite and Webpack support
+- Type safety with out of the box TypeScript and ESLint plugin
+- Advanced CSS variables configuration to allow smooth token usage
+- Style templates to create reusable styles easily
 
-### Code examples
+## Get started
+
+### Quick way of using `salty-css` CLI
+
+#### Initialize Salty CSS for a project
+
+In your repository run `npx salty-css init [directory]` which installs required salty-css packages to the current directory and creates project files to the provided directory. Directory can be left blank if you want files to be created to the current directory.
+
+#### Create components
+
+Components can be created with `npx salty-css generate [filePath]` which then creates a new Salty CSS component file to the specified path. Additional options like `--dir, --tag, --name and --className` are also supported. Read more about them with `npx salty-css generate --help`
+
+#### Build / Compile Salty CSS
+
+If you want to manually build your project that can be done by running `npx salty-css build [directory]`
+
+#### Update Salty CSS packages
+
+To ease the pain of package updates all Salty CSS packages can be updated with `npx salty-css update`
+
+### Manual work
+
+#### React
+
+1. Install related dependencies: `npm i @salty-css/core @salty-css/react`
+2. Create `salty.config.ts` to your app directory
+
+#### Vite
+
+1. First check the instructions for React
+2. For Vite support install `npm i -D @salty-css/vite`
+3. In `vite.config.ts` add import for salty plugin `import { saltyPlugin } from '@salty-css/vite';` and then add `saltyPlugin(__dirname)` to your vite configuration plugins
+4. Make sure that `salty.config.ts` and `vite.config.ts` are in the same folder!
+
+### Create components
+
+1. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
+
+## Code examples
+
+### Basic usage example with Button
 
 **Salty config**
 

package/bin/main.cjs

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

package/bin/main.js

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

package/package.json

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