@salty-css/core 0.0.1-alpha.300 → 0.0.1-alpha.301

package/bin/main.js

@@ -1,263 +1,444 @@
-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 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-CituHO0U.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-C6VJ-qaY.js";
-const st = (u) => new Promise((v, k) => {
-  gt(u, ($) => {
-    if ($) return k($);
-    v();
+import { Command } from "commander";
+import { existsSync, watch } from "fs";
+import { mkdir, readFile, writeFile } from "fs/promises";
+import { join, relative, parse, format } from "path";
+import { render } from "ejs";
+import { l as logger, a as logError, generateCss, isSaltyFile, generateFile } from "../compiler/index.js";
+import { p as pascalCase } from "../pascal-case-F3Usi5Wf.js";
+import { exec } from "child_process";
+import ora from "ora";
+import { c as checkShouldRestart } from "../should-restart-5jI-bzz0.js";
+const execAsync = (command) => {
+  return new Promise((resolve, reject) => {
+    exec(command, (error) => {
+      if (error) return reject(error);
+      resolve();
+    });
   });
-}), 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) {
+};
+const npmInstall = async (...packages) => {
+  const packageNames = packages.map((p) => p.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", ");
+  const spinner = ora(`Installing packages: ${packageNames}`).start();
+  const asString = packages.join(" ");
+  await execAsync(`npm install ${asString}`);
+  spinner.succeed(`Installed packages: ${packageNames}`);
+};
+const hasPrettierInstalled = () => {
+  return existsSync(join(process.cwd(), "node_modules", ".bin", "prettier"));
+};
+async function formatWithPrettier(filePath) {
   try {
-    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);
+    const hasPrettier = hasPrettierInstalled();
+    if (!hasPrettier) return;
+    await execAsync(`./node_modules/.bin/prettier --write "${filePath}"`);
+    logger.info(`Formatted ${filePath} with Prettier`);
+  } catch (error) {
+    logger.error(`Error formatting ${filePath} with Prettier:`, error);
   }
 }
-async function Jt() {
-  const u = new ot();
-  u.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
-  const v = {
+async function main() {
+  const program = new Command();
+  program.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
+  const files = {
     // Core files
-    "salty.config.ts": import("../salty.config-BhBY_oOk.js"),
-    "saltygen/index.css": import("../index-D_732b92.js"),
+    "salty.config.ts": import("../salty.config-DjosWdPw.js"),
+    "saltygen/index.css": import("../index-DKz1QXqs.js"),
     // React
-    "react/react-styled-file.ts": import("../react-styled-file-CGVf5n1B.js"),
-    "react/react-vanilla-file.ts": import("../react-vanilla-file-CCXbsjIb.js")
-  }, k = async (s, i) => {
-    const { default: d } = await v[s], l = lt(d, i);
-    return { fileName: s, content: l };
-  }, $ = async () => {
-    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;
-  }, nt = async (s, i = J) => {
-    typeof s == "object" && (s = JSON.stringify(s, null, 2)), await C(i, s);
-  }, X = async () => {
-    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 = (s) => {
-    const i = s === "." ? "" : s, d = process.cwd();
-    return a(d, i);
+    "react/react-styled-file.ts": import("../react-styled-file-B99mwk0w.js"),
+    "react/react-vanilla-file.ts": import("../react-vanilla-file-D9px70iK.js")
+  };
+  const readTemplate = async (fileName, options) => {
+    const { default: file } = await files[fileName];
+    const content = render(file, options);
+    return { fileName, content };
+  };
+  const readRCFile = async () => {
+    const rcPath = join(process.cwd(), ".saltyrc.json");
+    const rcContent = await readFile(rcPath, "utf-8").then(JSON.parse).catch(() => ({}));
+    return rcContent;
   };
-  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.");
-    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([k("salty.config.ts"), k("saltygen/index.css")]);
-    await q(o, { recursive: !0 });
-    const y = T.map(async ({ fileName: t, content: g }) => {
-      const c = a(o, t);
-      if (await S(c, "utf-8").catch(() => {
-      }) !== void 0) {
-        e.debug("File already exists: " + c);
+  const defaultPackageJsonPath = join(process.cwd(), "package.json");
+  const readPackageJson = async (filePath = defaultPackageJsonPath) => {
+    const packageJsonContent = await readFile(filePath, "utf-8").then(JSON.parse).catch(() => void 0);
+    if (!packageJsonContent) throw "Could not read package.json file!";
+    return packageJsonContent;
+  };
+  const updatePackageJson = async (content, filePath = defaultPackageJsonPath) => {
+    if (typeof content === "object") content = JSON.stringify(content, null, 2);
+    await writeFile(filePath, content);
+  };
+  const readThisPackageJson = async () => {
+    const packageJsonPath = new URL("../package.json", import.meta.url);
+    return readPackageJson(packageJsonPath);
+  };
+  const getDefaultProject = async () => {
+    const rcContent = await readRCFile();
+    return rcContent.defaultProject;
+  };
+  const defaultProject = await getDefaultProject();
+  const currentPackageJson = await readThisPackageJson();
+  const packages = {
+    core: `@salty-css/core@${currentPackageJson.version}`,
+    react: `@salty-css/react@${currentPackageJson.version}`,
+    eslintConfigCore: `@salty-css/eslint-config-core@${currentPackageJson.version}`,
+    vite: `@salty-css/vite@${currentPackageJson.version}`,
+    next: `@salty-css/next@${currentPackageJson.version}`
+  };
+  const resolveProjectDir = (dir) => {
+    const dirName = dir === "." ? "" : dir;
+    const rootDir = process.cwd();
+    const projectDir = join(rootDir, dirName);
+    return projectDir;
+  };
+  program.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(_dir = ".") {
+    const packageJson = await readPackageJson().catch(() => void 0);
+    if (!packageJson) return logError("Salty CSS project must be initialized in a directory with a package.json file.");
+    logger.info("Initializing a new Salty-CSS project!");
+    const { dir = _dir, cssFile, skipInstall } = this.opts();
+    if (!dir) return logError("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
+    if (!skipInstall) await npmInstall(packages.core, packages.react);
+    const rootDir = process.cwd();
+    const projectDir = resolveProjectDir(dir);
+    const projectFiles = await Promise.all([readTemplate("salty.config.ts"), readTemplate("saltygen/index.css")]);
+    await mkdir(projectDir, { recursive: true });
+    const writeFiles = projectFiles.map(async ({ fileName, content }) => {
+      const filePath = join(projectDir, fileName);
+      const existingContent = await readFile(filePath, "utf-8").catch(() => void 0);
+      if (existingContent !== void 0) {
+        logger.debug("File already exists: " + filePath);
         return;
       }
-      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(() => {
+      const additionalFolders = fileName.split("/").slice(0, -1).join("/");
+      if (additionalFolders) await mkdir(join(projectDir, additionalFolders), { recursive: true });
+      logger.info("Creating file: " + filePath);
+      await writeFile(filePath, content);
+      await formatWithPrettier(filePath);
     });
-    if (f === void 0) {
-      e.info("Creating file: " + m);
-      const g = JSON.stringify({
+    await Promise.all(writeFiles);
+    const relativeProjectPath = relative(rootDir, projectDir) || ".";
+    const saltyrcPath = join(rootDir, ".saltyrc.json");
+    const existingSaltyrc = await readFile(saltyrcPath, "utf-8").catch(() => void 0);
+    if (existingSaltyrc === void 0) {
+      logger.info("Creating file: " + saltyrcPath);
+      const rcContent = {
         $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,
+        defaultProject: relativeProjectPath,
         projects: [
           {
-            dir: w,
+            dir: relativeProjectPath,
             framework: "react"
           }
         ]
-      }, null, 2);
-      await C(m, g), await j(m);
+      };
+      const content = JSON.stringify(rcContent, null, 2);
+      await writeFile(saltyrcPath, content);
+      await formatWithPrettier(saltyrcPath);
     } else {
-      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 rcContent = JSON.parse(existingSaltyrc);
+      const projects = (rcContent == null ? void 0 : rcContent.projects) || [];
+      const projectIndex = projects.findIndex((p) => p.dir === relativeProjectPath);
+      if (projectIndex === -1) {
+        projects.push({ dir: relativeProjectPath, framework: "react" });
+        rcContent.projects = [...projects];
+        const content = JSON.stringify(rcContent, null, 2);
+        if (content !== existingSaltyrc) {
+          logger.info("Edit file: " + saltyrcPath);
+          await writeFile(saltyrcPath, content);
+          await formatWithPrettier(saltyrcPath);
+        }
       }
     }
-    const P = a(r, ".gitignore"), H = await S(P, "utf-8").catch(() => {
-    });
-    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 t of F)
-        for (const g of B)
-          for (const c of U) {
-            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, t, L, g + c);
-              if (await S(R, "utf-8").catch(() => {
-              }) !== void 0) return z(o, R);
+    const gitIgnorePath = join(rootDir, ".gitignore");
+    const gitIgnoreContent = await readFile(gitIgnorePath, "utf-8").catch(() => void 0);
+    if (gitIgnoreContent !== void 0) {
+      const alreadyIgnoresSaltygen = gitIgnoreContent.includes("saltygen");
+      if (!alreadyIgnoresSaltygen) {
+        logger.info("Edit file: " + gitIgnorePath);
+        await writeFile(gitIgnorePath, gitIgnoreContent + "\n\n# Salty-CSS\nsaltygen\n");
+      }
+    }
+    const cssFileFoldersToLookFor = ["src", "public", "assets", "styles", "css", "app"];
+    const secondLevelFolders = ["styles", "css", "app", "pages"];
+    const cssFilesToLookFor = ["index", "styles", "main", "app", "global", "globals"];
+    const cssFileExtensions = [".css", ".scss", ".sass"];
+    const getTargetCssFile = async () => {
+      if (cssFile) return cssFile;
+      for (const folder of cssFileFoldersToLookFor) {
+        for (const file of cssFilesToLookFor) {
+          for (const ext of cssFileExtensions) {
+            const filePath = join(projectDir, folder, file + ext);
+            const fileContent = await readFile(filePath, "utf-8").catch(() => void 0);
+            if (fileContent !== void 0) return relative(projectDir, filePath);
+            for (const secondLevelFolder of secondLevelFolders) {
+              const filePath2 = join(projectDir, folder, secondLevelFolder, file + ext);
+              const fileContent2 = await readFile(filePath2, "utf-8").catch(() => void 0);
+              if (fileContent2 !== void 0) return relative(projectDir, filePath2);
             }
           }
-    })();
-    if (D) {
-      const t = a(o, D), g = await S(t, "utf-8").catch(() => {
-      });
-      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
-      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")
-    }, x = Object.values(at).find((t) => Q(t));
-    if (x) {
-      p || await E(A.eslintConfigCore);
-      const t = await S(x, "utf-8").catch(() => {
-      });
-      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);
+      return void 0;
+    };
+    const targetCSSFile = await getTargetCssFile();
+    if (targetCSSFile) {
+      const cssFilePath = join(projectDir, targetCSSFile);
+      const cssFileContent = await readFile(cssFilePath, "utf-8").catch(() => void 0);
+      if (cssFileContent !== void 0) {
+        const alreadyImportsSaltygen = cssFileContent.includes("saltygen");
+        if (!alreadyImportsSaltygen) {
+          const cssFileFolder = join(cssFilePath, "..");
+          const relativePath = relative(cssFileFolder, join(projectDir, "saltygen/index.css"));
+          const importStatement = `@import '${relativePath}';`;
+          logger.info("Adding global import statement to CSS file: " + cssFilePath);
+          await writeFile(cssFilePath, importStatement + "\n" + cssFileContent);
+          await formatWithPrettier(cssFilePath);
+        }
+      }
+    } else {
+      logger.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");
+    }
+    const eslintConfigs = {
+      projectJs: join(projectDir, "eslint.config.js"),
+      rootJs: join(rootDir, "eslint.config.js"),
+      projectMjs: join(projectDir, "eslint.config.mjs"),
+      rootMjs: join(rootDir, "eslint.config.mjs"),
+      projectJson: join(projectDir, ".eslintrc.json"),
+      rootJson: join(rootDir, ".eslintrc.json")
+    };
+    const eslintConfigToUse = Object.values(eslintConfigs).find((path) => existsSync(path));
+    if (eslintConfigToUse) {
+      if (!skipInstall) await npmInstall(packages.eslintConfigCore);
+      const eslintConfigContent = await readFile(eslintConfigToUse, "utf-8").catch(() => void 0);
+      if (!eslintConfigContent) return logError("Could not read ESLint config file.");
+      const alreadyHasSaltyConfig = eslintConfigContent.includes("salty-css");
+      if (!alreadyHasSaltyConfig) {
+        logger.info("Edit file: " + eslintConfigToUse);
+        if (eslintConfigToUse.endsWith("js")) {
+          const importStatement = 'import saltyCss from "@salty-css/eslint-config-core/flat";';
+          let newContent = `${importStatement}
+${eslintConfigContent}`;
+          const isTsEslint = eslintConfigContent.includes("typescript-eslint");
+          if (isTsEslint) {
+            if (newContent.includes(".config(")) newContent = newContent.replace(".config(", ".config(saltyCss,");
+            else logger.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually.");
+          } else {
+            if (newContent.includes("export default [")) newContent = newContent.replace("export default [", "export default [ saltyCss,");
+            else if (newContent.includes("eslintConfig = [")) newContent = newContent.replace("eslintConfig = [", "eslintConfig = [ saltyCss,");
+            else logger.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually.");
+          }
+          await writeFile(eslintConfigToUse, newContent);
+          await formatWithPrettier(eslintConfigToUse);
         } else {
-          const c = JSON.parse(t);
-          c.extends || (c.extends = []), c.extends.push("@salty-css/core");
-          const n = JSON.stringify(c, null, 2);
-          await C(x, n), await j(x);
+          const eslintConfigJson = JSON.parse(eslintConfigContent);
+          if (!eslintConfigJson.extends) eslintConfigJson.extends = [];
+          eslintConfigJson.extends.push("@salty-css/core");
+          const modifiedEslintConfigContent = JSON.stringify(eslintConfigJson, null, 2);
+          await writeFile(eslintConfigToUse, modifiedEslintConfigContent);
+          await formatWithPrettier(eslintConfigToUse);
         }
+      }
     }
-    const W = a(o, "vite.config.ts"), V = await S(W, "utf-8").catch(() => {
-    });
-    if (V !== void 0 && !V.includes("saltyPlugin")) {
-      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}`), e.info("Adding Salty-CSS plugin to Vite config..."), await C(W, g + n), await j(W);
+    const viteConfigPath = join(projectDir, "vite.config.ts");
+    const viteConfigContent = await readFile(viteConfigPath, "utf-8").catch(() => void 0);
+    if (viteConfigContent !== void 0) {
+      const alreadyHasPlugin = viteConfigContent.includes("saltyPlugin");
+      if (!alreadyHasPlugin) {
+        logger.info("Edit file: " + viteConfigPath);
+        const pluginImport = "import { saltyPlugin } from '@salty-css/vite';\n";
+        const pluginConfig = "saltyPlugin(__dirname),";
+        const newContent = viteConfigContent.replace(/(plugins: \[)/, `$1
+  ${pluginConfig}`);
+        if (!skipInstall) await npmInstall(`-D ${packages.vite}`);
+        logger.info("Adding Salty-CSS plugin to Vite config...");
+        await writeFile(viteConfigPath, pluginImport + newContent);
+        await formatWithPrettier(viteConfigPath);
+      }
     }
-    const _ = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((t) => a(o, t)).find((t) => Q(t));
-    if (_) {
-      let t = await S(_, "utf-8").catch(() => {
-      });
-      if (t !== void 0 && !t.includes("withSaltyCss")) {
-        let c = !1;
-        /\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 ? (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 nextConfigFiles = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"];
+    const nextConfigPath = nextConfigFiles.map((file) => join(projectDir, file)).find((path) => existsSync(path));
+    if (nextConfigPath) {
+      let nextConfigContent = await readFile(nextConfigPath, "utf-8").catch(() => void 0);
+      if (nextConfigContent !== void 0) {
+        const alreadyHasPlugin = nextConfigContent.includes("withSaltyCss");
+        if (!alreadyHasPlugin) {
+          let saltyCssAppended = false;
+          const hasPluginsArray = /\splugins([^=]*)=[^[]\[/.test(nextConfigContent);
+          if (hasPluginsArray && !saltyCssAppended) {
+            nextConfigContent = nextConfigContent.replace(/\splugins([^=]*)=[^[]\[/, (_, config) => {
+              return ` plugins${config}= [withSaltyCss,`;
+            });
+            saltyCssAppended = true;
+          }
+          const useRequire = nextConfigContent.includes("module.exports");
+          const pluginImport = useRequire ? "const { withSaltyCss } = require('@salty-css/next');\n" : "import { withSaltyCss } from '@salty-css/next';\n";
+          if (useRequire && !saltyCssAppended) {
+            nextConfigContent = nextConfigContent.replace(/module.exports = ([^;]+)/, (_, config) => {
+              return `module.exports = withSaltyCss(${config})`;
+            });
+            saltyCssAppended = true;
+          } else if (!saltyCssAppended) {
+            nextConfigContent = nextConfigContent.replace(/export default ([^;]+)/, (_, config) => {
+              return `export default withSaltyCss(${config})`;
+            });
+          }
+          if (!skipInstall) await npmInstall(`-D ${packages.next}`);
+          logger.info("Adding Salty-CSS plugin to Next.js config...");
+          await writeFile(nextConfigPath, pluginImport + nextConfigContent);
+          await formatWithPrettier(nextConfigPath);
+        }
+      }
+    }
+    const packageJsonContent = await readPackageJson().catch(() => logError("Could not read package.json file.")).then((content) => {
+      if (!content.scripts) content.scripts = {};
+      if (content.scripts.prepare) {
+        const alreadyHasSaltyCss = content.scripts.prepare.includes("salty-css");
+        if (!alreadyHasSaltyCss) {
+          logger.info("Edit file: " + defaultPackageJsonPath);
+          content.scripts.prepare = content.scripts.prepare + " && npx salty-css build";
+        }
+      } else {
+        logger.info("Edit file: " + defaultPackageJsonPath);
+        content.scripts.prepare = "npx salty-css build";
       }
+      return content;
+    });
+    await updatePackageJson(packageJsonContent);
+    logger.info("Running the build to generate initial CSS...");
+    await generateCss(projectDir);
+    logger.info("🎉 Salty CSS project initialized successfully!");
+    logger.info("Next steps:");
+    logger.info("1. Configure variables and templates in `salty.config.ts`");
+    logger.info("2. Create a new component with `npx salty-css generate [component-name]`");
+    logger.info("3. Run `npx salty-css build` to generate the CSS");
+    logger.info("4. Read about the features in the documentation: https://salty-css.dev");
+    logger.info("5. Star the project on GitHub: https://github.com/margarita-form/salty-css ⭐");
+  });
+  program.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(_dir = defaultProject) {
+    logger.info("Building the Salty-CSS project...");
+    const { dir = _dir, watch: watch$1 } = this.opts();
+    if (!dir) return logError("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
+    const projectDir = resolveProjectDir(dir);
+    await generateCss(projectDir);
+    if (watch$1) {
+      logger.info("Watching for changes in the project directory...");
+      watch(projectDir, { recursive: true }, async (event, filePath) => {
+        const shouldRestart = await checkShouldRestart(filePath);
+        if (shouldRestart) {
+          await generateCss(projectDir, false, false);
+        } else {
+          const saltyFile = isSaltyFile(filePath);
+          if (saltyFile) await generateFile(projectDir, filePath);
+        }
+      });
     }
-    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 && (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);
-    }));
-  }), 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 = ct(m);
-    f.ext || (f.ext = ".ts"), f.name.endsWith(".css") || (f.name = f.name + ".css"), f.base = f.name + f.ext;
-    const P = et(f);
-    if (await S(P, "utf-8").catch(() => {
-    }) !== void 0) {
-      e.error("File already exists:", P);
+  });
+  program.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(_file, _dir = defaultProject) {
+    const { file = _file, dir = _dir, tag, name, className, reactComponent = false } = this.opts();
+    if (!file) return logError("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");
+    if (!dir) return logError("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
+    const projectDir = resolveProjectDir(dir);
+    const additionalFolders = file.split("/").slice(0, -1).join("/");
+    if (additionalFolders) await mkdir(join(projectDir, additionalFolders), { recursive: true });
+    const filePath = join(projectDir, file);
+    const parsedFilePath = parse(filePath);
+    if (!parsedFilePath.ext) {
+      parsedFilePath.ext = ".ts";
+    }
+    if (!parsedFilePath.name.endsWith(".css")) {
+      parsedFilePath.name = parsedFilePath.name + ".css";
+    }
+    parsedFilePath.base = parsedFilePath.name + parsedFilePath.ext;
+    const formattedStyledFilePath = format(parsedFilePath);
+    const alreadyExists = await readFile(formattedStyledFilePath, "utf-8").catch(() => void 0);
+    if (alreadyExists !== void 0) {
+      logger.error("File already exists:", formattedStyledFilePath);
       return;
     }
-    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: 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 = et(f);
-      e.info("Generating a new file: " + D), await C(D, tt), await j(D);
+    let styledComponentName = pascalCase(name || parsedFilePath.base.replace(/\.css\.\w+$/, ""));
+    if (reactComponent) {
+      const componentName = styledComponentName + "Component";
+      styledComponentName = styledComponentName + "Wrapper";
+      const fileName = parsedFilePath.base.replace(/\.css\.\w+$/, "");
+      const { content: reactContent } = await readTemplate("react/react-vanilla-file.ts", { tag, componentName, styledComponentName, className, fileName });
+      parsedFilePath.name = fileName.replace(/\.css$/, "");
+      parsedFilePath.ext = ".tsx";
+      parsedFilePath.base = parsedFilePath.name + parsedFilePath.ext;
+      const formattedReactFilePath = format(parsedFilePath);
+      logger.info("Generating a new file: " + formattedReactFilePath);
+      await writeFile(formattedReactFilePath, reactContent);
+      await formatWithPrettier(formattedReactFilePath);
     }
-    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 { content } = await readTemplate("react/react-styled-file.ts", { tag, name: styledComponentName, className });
+    logger.info("Generating a new file: " + formattedStyledFilePath);
+    await writeFile(formattedStyledFilePath, content);
+    await formatWithPrettier(formattedStyledFilePath);
   });
-  const Z = async () => {
-    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: " + s
-    );
+  const getSaltyCssPackages = async () => {
+    const packageJSONPath = join(process.cwd(), "package.json");
+    const packageJson = await readPackageJson(packageJSONPath).catch((err) => logError(err));
+    if (!packageJson) return logError("Could not read package.json file.");
+    const allDependencies = { ...packageJson.dependencies, ...packageJson.devDependencies };
+    const saltyCssPackages = Object.entries(allDependencies).filter(([name]) => name === "salty-css" || name.startsWith("@salty-css/"));
+    if (!saltyCssPackages.length) {
+      return logError(
+        "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + packageJSONPath
+      );
+    }
+    return saltyCssPackages;
   };
-  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 ? (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(/^\^/, "");
-      e.info(`Updated to all Salty CSS packages successfully to ${w}`);
-    } else
-      for (const [y, w] of Object.entries(o)) {
-        const m = y.replace(/^\^/, "");
-        e.info(`Updated to ${m}: ${w.join(", ")}`);
+  program.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).", false).action(async function(_version = "latest") {
+    const { legacyPeerDeps, version = _version } = this.opts();
+    const saltyCssPackages = await getSaltyCssPackages();
+    if (!saltyCssPackages) return logError("Could not update Salty-CSS packages as any were found in package.json.");
+    const packagesToUpdate = saltyCssPackages.map(([name]) => {
+      if (version === "@") return `${name}@${currentPackageJson.version}`;
+      return `${name}@${version.replace(/^@/, "")}`;
+    });
+    if (legacyPeerDeps) {
+      logger.warn("Using legacy peer dependencies to update packages.");
+      await npmInstall(...packagesToUpdate, "--legacy-peer-deps");
+    } else {
+      await npmInstall(...packagesToUpdate);
+    }
+    const updatedPackages = await getSaltyCssPackages();
+    if (!updatedPackages) return logError("Something went wrong while reading the updated packages.");
+    const mappedByVersions = updatedPackages.reduce((acc, [name, version2]) => {
+      if (!acc[version2]) acc[version2] = [];
+      acc[version2].push(name);
+      return acc;
+    }, {});
+    const versionsCount = Object.keys(mappedByVersions).length;
+    if (versionsCount === 1) {
+      const version2 = Object.keys(mappedByVersions)[0];
+      const versionString = version2.replace(/^\^/, "");
+      logger.info(`Updated to all Salty CSS packages successfully to ${versionString}`);
+    } else {
+      for (const [version2, names] of Object.entries(mappedByVersions)) {
+        const versionString = version2.replace(/^\^/, "");
+        logger.info(`Updated to ${versionString}: ${names.join(", ")}`);
       }
-  }), 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/"));
-    if (!p.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: " + i
+    }
+  });
+  program.option("-v, --version", "Show the current version of Salty-CSS.").action(async function() {
+    const currentPackageJson2 = await readThisPackageJson();
+    logger.info("CLI is running: " + currentPackageJson2.version);
+    const packageJSONPath = join(process.cwd(), "package.json");
+    const packageJson = await readPackageJson(packageJSONPath).catch((err) => logError(err));
+    if (!packageJson) return;
+    const allDependencies = { ...packageJson.dependencies, ...packageJson.devDependencies };
+    const saltyCssPackages = Object.keys(allDependencies).filter((dep) => dep === "salty-css" || dep.startsWith("@salty-css/"));
+    if (!saltyCssPackages.length) {
+      return logError(
+        "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + packageJSONPath
       );
-    for (const r of p)
-      e.info(`${r}: ${l[r]}`);
-  }), u.parseAsync(process.argv);
+    }
+    for (const dep of saltyCssPackages) {
+      logger.info(`${dep}: ${allDependencies[dep]}`);
+    }
+  });
+  program.parseAsync(process.argv);
 }
 export {
-  Jt as main
+  main
 };