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

package/compiler/index.js

@@ -1,174 +1,756 @@
-import * as I from "esbuild";
-import { execSync as H } from "child_process";
-import { t as T, d as R } from "../dash-case-DMQMcCO6.js";
-import { join as o } from "path";
-import { writeFileSync as $, existsSync as K, mkdirSync as V, statSync as z, readdirSync as G, readFileSync as M } from "fs";
-import { writeFile as J } from "fs/promises";
-import { p as q, a as A, b as L } from "../parse-templates-D4p3pgQR.js";
-const N = (s) => o(s, "./saltygen"), U = ["salty", "css", "styles", "styled"], W = (s = []) => new RegExp(`\\.(${[...U, ...s].join("|")})\\.`), v = (s, e = []) => W(e).test(s), X = async (s) => {
-  const e = N(s), n = o(s, "salty.config.ts"), t = o(e, "salty.config.js");
-  await I.build({
-    entryPoints: [n],
-    minify: !0,
-    treeShaking: !0,
-    bundle: !0,
-    outfile: t,
-    format: "esm",
-    external: ["react"]
+import * as esbuild from "esbuild";
+import { execSync } from "child_process";
+import { Script } from "vm";
+import { t as toHash, d as dashCase } from "../dash-case-NMk0mXyT.js";
+import { join, parse } from "path";
+import { existsSync, mkdirSync, statSync, readdirSync, readFileSync, writeFileSync } from "fs";
+import { readFile } from "fs/promises";
+import { p as parseAndJoinStyles, a as parseVariableTokens } from "../parse-styles-CqBQc3eQ.js";
+import { parseTemplates, getTemplateTypes } from "../parsers/index.js";
+import { createLogger, transports, format } from "winston";
+import { mergeObjects, mergeFactories } from "../css/merge.js";
+import { d as defineTemplates } from "../define-templates-CVhhgPnd.js";
+import ts from "typescript";
+import { r as resolveExportValue, g as getCorePackageRoot } from "../helpers-DM2fbDDz.js";
+const getPackageJsonPath = (dirname) => {
+  if (!dirname || dirname === "/") throw new Error("Could not find package.json file");
+  const packageJsonPath = join(dirname, "package.json");
+  if (!existsSync(packageJsonPath)) return getPackageJsonPath(join(dirname, ".."));
+  return packageJsonPath;
+};
+const getPackageJson = async (dirname) => {
+  const packageJsonPath = getPackageJsonPath(dirname);
+  const packageJsonContent = await readFile(packageJsonPath, "utf-8").then(JSON.parse).catch(() => void 0);
+  return packageJsonContent;
+};
+const readPackageJsonModule = async (dirname) => {
+  const packageJsonContent = await getPackageJson(dirname);
+  if (!packageJsonContent) return void 0;
+  return packageJsonContent.type;
+};
+let cachedModuleType;
+const detectCurrentModuleType = async (dirname) => {
+  if (cachedModuleType) return cachedModuleType;
+  const packageJsonModule = await readPackageJsonModule(dirname);
+  if (packageJsonModule === "module") cachedModuleType = "esm";
+  else if (packageJsonModule === "commonjs") cachedModuleType = "cjs";
+  else if (import.meta.url.endsWith(".cjs")) cachedModuleType = "cjs";
+  return cachedModuleType || "esm";
+};
+const logger = createLogger({
+  level: "debug",
+  format: format.combine(format.colorize(), format.cli()),
+  transports: [new transports.Console({})]
+});
+const logError = (message) => {
+  logger.error(message);
+};
+function dotCase(str) {
+  if (!str) return "";
+  if (typeof str !== "string") return dotCase(String(str));
+  return str.replace(/[^\d\w]/g, ".");
+}
+const saltyReset = {
+  /** Set box model to border-box */
+  "*, *::before, *::after": {
+    boxSizing: "border-box"
+  },
+  /** Remove default margin and padding */
+  "*": {
+    margin: 0
+  },
+  /** Remove adjust font properties */
+  html: {
+    lineHeight: 1.15,
+    textSizeAdjust: "100%",
+    WebkitFontSmoothing: "antialiased"
+  },
+  /** Make media elements responsive */
+  "img, picture, video, canvas, svg": {
+    display: "block",
+    maxWidth: "100%"
+  },
+  /** Avoid overflow of text */
+  "p, h1, h2, h3, h4, h5, h6": {
+    overflowWrap: "break-word"
+  },
+  /** Improve text wrapping */
+  p: {
+    textWrap: "pretty"
+  },
+  "h1, h2, h3, h4, h5, h6": {
+    textWrap: "balance"
+  },
+  /** Improve link color */
+  a: {
+    color: "currentColor"
+  },
+  /** Improve button line height */
+  button: {
+    lineHeight: "1em",
+    color: "currentColor"
+  },
+  /** Improve form elements */
+  "input, optgroup, select, textarea": {
+    fontFamily: "inherit",
+    fontSize: "100%",
+    lineHeight: "1.15em"
+  }
+};
+const getFunctionRange = (contents, name) => {
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error("Timeout"));
+    }, 100);
+    const sourceFile = ts.createSourceFile("temp.ts", contents, ts.ScriptTarget.Latest, true);
+    function visit(node) {
+      if (ts.isVariableDeclaration(node) && node.name.getText() === name) {
+        const start = node.getStart();
+        const end = node.getEnd();
+        clearTimeout(timeout);
+        resolve([start, end]);
+      }
+      node.forEachChild(visit);
+    }
+    visit(sourceFile);
   });
-  const c = Date.now(), { config: S } = await import(`${t}?t=${c}`);
-  return S;
-}, Y = async (s) => {
-  const e = await X(s), n = /* @__PURE__ */ new Set(), t = (u, l = []) => u ? Object.entries(u).flatMap(([p, r]) => {
-    if (!r) return;
-    if (typeof r == "object") return t(r, [...l, p]);
-    const x = [...l, p].join(".");
-    n.add(`"${x}"`);
-    const C = [...l.map(R), R(p)].join("-"), { result: D } = L(r);
-    return `--${C}: ${D};`;
-  }) : [], c = (u) => u ? Object.entries(u).flatMap(([l, p]) => {
-    const r = t(p);
-    return l === "base" ? r.join("") : `${l} { ${r.join("")} }`;
-  }) : [], S = (u) => u ? Object.entries(u).flatMap(([l, p]) => Object.entries(p).flatMap(([r, x]) => {
-    const C = t(x, [l]), D = `.${l}-${r}, [data-${l}="${r}"]`, P = C.join("");
-    return `${D} { ${P} }`;
-  })) : [], d = t(e.variables), w = c(e.responsiveVariables), a = S(e.conditionalVariables), b = N(s), f = o(b, "css/variables.css"), i = `:root { ${d.join("")} ${w.join("")} } ${a.join("")}`;
-  $(f, i);
-  const y = o(b, "types/css-tokens.d.ts"), m = `type VariableTokens = ${[...n].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;
-  $(y, m);
-  const g = o(b, "css/global.css"), F = q(e.global, "");
-  $(g, F);
-  const j = o(b, "css/templates.css"), k = A(e.templates);
-  $(j, k);
-}, E = async (s, e) => {
-  const n = T(s), t = o(e, "js", n + ".js");
-  await I.build({
-    entryPoints: [s],
-    minify: !0,
-    treeShaking: !0,
-    bundle: !0,
-    outfile: t,
-    format: "esm",
-    target: ["es2022"],
-    keepNames: !0,
-    external: ["react"]
+};
+const cache = {
+  externalModules: [],
+  rcFile: void 0,
+  destDir: void 0
+};
+const getExternalModules = (coreConfigPath) => {
+  if (cache.externalModules.length > 0) return cache.externalModules;
+  const content = readFileSync(coreConfigPath, "utf8");
+  const match = content.match(/externalModules:\s?\[(.*)\]/);
+  if (!match) return [];
+  const externalModules = match[1].split(",").map((d) => d.replace(/['"`]/g, "").trim());
+  cache.externalModules = externalModules;
+  return externalModules;
+};
+const getDestDir = async (dirname) => {
+  if (cache.destDir) return cache.destDir;
+  const projectConfig = await getRCProjectConfig(dirname);
+  const destDir = join(dirname, (projectConfig == null ? void 0 : projectConfig.saltygenDir) || "saltygen");
+  cache.destDir = destDir;
+  return destDir;
+};
+const saltyFileExtensions = ["salty", "css", "styles", "styled"];
+const saltyFileRegExp = (additional = []) => new RegExp(`\\.(${[...saltyFileExtensions, ...additional].join("|")})\\.`);
+const isSaltyFile = (file, additional = []) => saltyFileRegExp(additional).test(file);
+const readRCFile = async (currentDir) => {
+  if (cache.rcFile) return cache.rcFile;
+  if (currentDir === "/") throw new Error("Could not find .saltyrc.json file");
+  const rcPath = join(currentDir, ".saltyrc.json");
+  const rcContent = await readFile(rcPath, "utf-8").then(JSON.parse).catch(() => void 0);
+  if (!rcContent) return readRCFile(join(currentDir, ".."));
+  cache.rcFile = rcContent;
+  return rcContent;
+};
+const getRCProjectConfig = async (dirname) => {
+  var _a, _b;
+  const rcFile = await readRCFile(dirname);
+  const projectConfig = (_a = rcFile.projects) == null ? void 0 : _a.find((project) => dirname.endsWith(project.dir || ""));
+  if (!projectConfig) return (_b = rcFile.projects) == null ? void 0 : _b.find((project) => project.dir === rcFile.defaultProject);
+  return projectConfig;
+};
+const generateConfig = async (dirname) => {
+  const rcProject = await getRCProjectConfig(dirname);
+  const destDir = await getDestDir(dirname);
+  const coreConfigPath = join(dirname, (rcProject == null ? void 0 : rcProject.configDir) || "", "salty.config.ts");
+  const coreConfigDest = join(destDir, "salty.config.js");
+  await detectCurrentModuleType(dirname);
+  const externalModules = getExternalModules(coreConfigPath);
+  await esbuild.build({
+    entryPoints: [coreConfigPath],
+    minify: true,
+    treeShaking: true,
+    bundle: true,
+    outfile: coreConfigDest,
+    format: "cjs",
+    external: externalModules
   });
-  const c = Date.now();
-  return await import(`${t}?t=${c}`);
-}, O = async (s) => {
-  const e = N(s), n = o(e, "salty.config.js"), { config: t } = await import(n);
-  return t;
-}, ot = async (s) => {
+  const raw = await readFile(coreConfigDest, "utf8");
+  const scriptReal = new Script(raw);
+  const context = { module: { exports: {} } };
+  scriptReal.runInNewContext(context);
+  const { config } = context.module.exports;
+  return {
+    config,
+    path: coreConfigDest
+  };
+};
+const generateConfigStyles = async (dirname, configFiles) => {
+  var _a, _b;
+  const destDir = await getDestDir(dirname);
+  const generationResults = {
+    mediaQueries: [],
+    globalStyles: [],
+    variables: [],
+    templates: []
+  };
+  await Promise.all(
+    [...configFiles].map(async (src) => {
+      const { contents, outputFilePath } = await compileSaltyFile(dirname, src, destDir);
+      Object.entries(contents).forEach(([name, value]) => {
+        if (value.isMedia) generationResults.mediaQueries.push([name, value]);
+        else if (value.isGlobalDefine) generationResults.globalStyles.push(value);
+        else if (value.isDefineVariables) generationResults.variables.push(value);
+        else if (value.isDefineTemplates) generationResults.templates.push(value._setPath(`${name};;${outputFilePath}`));
+      });
+    })
+  );
+  const { config, path: configPath } = await generateConfig(dirname);
+  const configCacheContent = { ...config };
+  const { mediaQueries } = generationResults;
+  configCacheContent.mediaQueries = Object.fromEntries(mediaQueries.map(([name, value]) => [`@${name}`, value]));
+  const mediaQueryKeys = mediaQueries.map(([name]) => `'@${name}'`).join(" | ");
+  const variableTokens = /* @__PURE__ */ new Set();
+  const parseVariables = async (obj, path = []) => {
+    if (!obj) return [];
+    const promises = Object.entries(obj).map(async ([key, value]) => {
+      const parseVariable = async (value2) => {
+        if (!value2) return void 0;
+        if (value2 instanceof Promise) return await parseVariable(await value2);
+        if (typeof value2 === "function") return await parseVariable(await value2());
+        if (typeof value2 === "object") return await parseVariables(value2, [...path, key]);
+        const dottedKey = dotCase(key);
+        const dashedKey = dashCase(key);
+        const tsName = [...path, dottedKey].join(".");
+        variableTokens.add(`"${tsName}"`);
+        const cssName = [...path.map(dashCase), dashedKey].join("-");
+        const result = parseVariableTokens(value2);
+        if (!result) return `--${cssName}: ${value2};`;
+        return `--${cssName}: ${result.transformed};`;
+      };
+      return await parseVariable(value);
+    });
+    const results = await Promise.all(promises);
+    return results.flat();
+  };
+  const parseResponsiveVariables = async (obj) => {
+    if (!obj) return [];
+    const promises = Object.entries(obj).map(async ([mediaQuery, values]) => {
+      const variables = await parseVariables(values);
+      if (mediaQuery === "base") return variables.join("");
+      if (configCacheContent.mediaQueries[mediaQuery]) {
+        const mediaQueryValue = configCacheContent.mediaQueries[mediaQuery];
+        return `${mediaQueryValue} { ${variables.join("")} }`;
+      }
+      return `${mediaQuery} { ${variables.join("")} }`;
+    });
+    const results = await Promise.all(promises);
+    return results.flat();
+  };
+  const parseConditionalVariables = async (obj) => {
+    if (!obj) return [];
+    const promises = Object.entries(obj).map(async ([property, conditions]) => {
+      const promises2 = Object.entries(conditions).map(async ([condition, values]) => {
+        const variables = await parseVariables(values, [property]);
+        const conditionScope = `.${property}-${condition}, [data-${property}="${condition}"]`;
+        const combined = variables.join("");
+        return `${conditionScope} { ${combined} }`;
+      });
+      const result = await Promise.all(promises2);
+      return result.flat();
+    });
+    const results = await Promise.all(promises);
+    return results.flat();
+  };
+  const getStaticVariables = (variables = {}) => {
+    return { ...variables, responsive: void 0, conditional: void 0 };
+  };
+  const getGeneratedVariables = (type) => {
+    return generationResults.variables.map((factory) => {
+      if (type === "static") return getStaticVariables(factory._current);
+      return factory._current[type];
+    });
+  };
+  const _staticVariables = mergeObjects(getStaticVariables(config.variables), getGeneratedVariables("static"));
+  const staticVariables = await parseVariables(_staticVariables);
+  const _responsiveVariables = mergeObjects((_a = config.variables) == null ? void 0 : _a.responsive, getGeneratedVariables("responsive"));
+  const responsiveVariables = await parseResponsiveVariables(_responsiveVariables);
+  const _conditionalVariables = mergeObjects((_b = config.variables) == null ? void 0 : _b.conditional, getGeneratedVariables("conditional"));
+  const conditionalVariables = await parseConditionalVariables(_conditionalVariables);
+  const variablesPath = join(destDir, "css/_variables.css");
+  const variablesCss = `:root { ${staticVariables.join("")} ${responsiveVariables.join("")} } ${conditionalVariables.join("")}`;
+  writeFileSync(variablesPath, variablesCss);
+  configCacheContent.staticVariables = _staticVariables;
+  const globalStylesPath = join(destDir, "css/_global.css");
+  const mergedGlobalStyles = mergeObjects(config.global, generationResults.globalStyles);
+  const globalStylesString = await parseAndJoinStyles(mergedGlobalStyles, "");
+  writeFileSync(globalStylesPath, `@layer global { ${globalStylesString} }`);
+  const resetStylesPath = join(destDir, "css/_reset.css");
+  const getResetStyles = () => {
+    if (config.reset === "none") return {};
+    if (typeof config.reset === "object") return config.reset;
+    return saltyReset;
+  };
+  const resetStyles = getResetStyles();
+  const resetStylesString = await parseAndJoinStyles(resetStyles, "");
+  writeFileSync(resetStylesPath, `@layer reset { ${resetStylesString} }`);
+  const templateStylesPath = join(destDir, "css/_templates.css");
+  const templates = mergeObjects(config.templates, generationResults.templates);
+  const templateStylesString = await parseTemplates(templates);
+  const templateTokens = getTemplateTypes(templates);
+  writeFileSync(templateStylesPath, `@layer templates { ${templateStylesString} }`);
+  configCacheContent.templates = templates;
+  const configTemplateFactories = config.templates ? [defineTemplates(config.templates)._setPath(`config;;${configPath}`)] : [];
+  const templateFactories = mergeFactories(generationResults.templates, configTemplateFactories);
+  configCacheContent.templatePaths = Object.fromEntries(Object.entries(templateFactories).map(([key, faktory]) => [key, faktory._path]));
+  const tsTokensPath = join(destDir, "types/css-tokens.d.ts");
+  const tsVariableTokens = [...variableTokens].join("|");
+  const tsTokensTypes = `
+  // Variable types
+  type VariableTokens = ${tsVariableTokens || `''`}; 
+  type PropertyValueToken = \`{\${VariableTokens}}\`;
+
+  // Template types
+  type TemplateTokens = {
+    ${Object.entries(templateTokens).map(([key, value]) => `${key}?: ${value}`).join("\n")}
+  }
+
+  // Media query types
+  type MediaQueryKeys = ${mediaQueryKeys || `''`};
+  `;
+  writeFileSync(tsTokensPath, tsTokensTypes);
+  const configCachePath = join(destDir, "cache/config-cache.json");
+  writeFileSync(configCachePath, JSON.stringify(configCacheContent, null, 2));
+  const corePackageRoot = getCorePackageRoot();
+  const configCacheSecondaryPath = join(corePackageRoot, "cache/config-cache.json");
+  writeFileSync(configCacheSecondaryPath, JSON.stringify(configCacheContent, null, 2));
+};
+const replaceStyledTag = (currentFile) => {
+  return currentFile.replace(/styled\(([^"'`{,]+),/g, (match, tag) => {
+    const isString = /^['"`]/.test(tag);
+    if (isString) return match;
+    const isImportedRegExp = new RegExp(`import[^;]*${tag}[,\\s{][^;]*from\\s?([^{};]+);`);
+    const isImported = isImportedRegExp.test(currentFile);
+    if (!isImported) return match;
+    const importResult = isImportedRegExp.exec(currentFile);
+    if (importResult) {
+      const importPath = importResult.at(1);
+      const isSaltyImport = saltyFileExtensions.some((ext) => importPath == null ? void 0 : importPath.includes(ext));
+      if (isSaltyImport) return match;
+    }
+    return "styled('div',";
+  });
+};
+const addConfigCache = (currentFile, dirname) => {
+  try {
+    const saltyCachedConfig = readFileSync(join(dirname, "saltygen/cache/config-cache.json"), "utf8");
+    if (!saltyCachedConfig) return `globalThis.saltyConfig = {};
+
+${currentFile}`;
+    return `globalThis.saltyConfig = ${saltyCachedConfig};
+
+${currentFile}`;
+  } catch {
+    return currentFile;
+  }
+};
+const compileSaltyFile = async (dirname, sourceFilePath, outputDirectory) => {
+  const hashedName = toHash(sourceFilePath);
+  const tempDir = join(outputDirectory, "./temp");
+  if (!existsSync(tempDir)) mkdirSync(tempDir);
+  const parsed = parse(sourceFilePath);
+  let currentFile = readFileSync(sourceFilePath, "utf8");
+  currentFile = replaceStyledTag(currentFile);
+  currentFile = addConfigCache(currentFile, dirname);
+  const outputFilePath = join(outputDirectory, "js", hashedName + ".js");
+  const rcProject = await getRCProjectConfig(dirname);
+  const coreConfigPath = join(dirname, (rcProject == null ? void 0 : rcProject.configDir) || "", "salty.config.ts");
+  const externalModules = getExternalModules(coreConfigPath);
+  await detectCurrentModuleType(dirname);
+  await esbuild.build({
+    stdin: {
+      contents: currentFile,
+      sourcefile: parsed.base,
+      resolveDir: parsed.dir,
+      loader: "tsx"
+    },
+    minify: false,
+    treeShaking: true,
+    bundle: true,
+    outfile: outputFilePath,
+    format: "cjs",
+    target: ["node20"],
+    keepNames: true,
+    external: externalModules,
+    packages: "external",
+    plugins: [
+      {
+        name: "test",
+        setup: (build) => {
+          build.onLoad({ filter: /.*\.css|salty|styles|styled\.ts/ }, (args) => {
+            const original = readFileSync(args.path, "utf8");
+            const modified = replaceStyledTag(original);
+            return { contents: modified, loader: "ts" };
+          });
+        }
+      }
+    ]
+  });
+  const context = { module: { exports: {} } };
+  const raw = await readFile(outputFilePath, "utf8");
+  new Script(raw).runInNewContext(context);
+  return {
+    contents: context.module.exports,
+    outputFilePath
+  };
+};
+const getConfigCache = async (dirname) => {
+  const destDir = await getDestDir(dirname);
+  const coreConfigDest = join(destDir, "cache/config-cache.json");
+  const contents = readFileSync(coreConfigDest, "utf8");
+  if (!contents) throw new Error("Could not find config cache file");
+  return JSON.parse(contents);
+};
+const getConfig = async (dirname) => {
+  const cached = await getConfigCache(dirname);
+  const destDir = await getDestDir(dirname);
+  const coreConfigDest = join(destDir, "salty.config.js");
+  const context = { module: { exports: {} } };
+  const raw = await readFile(coreConfigDest, "utf8");
+  new Script(raw).runInNewContext(context);
+  const { config } = context.module.exports;
+  return mergeObjects(config, cached);
+};
+const isProduction = () => {
+  try {
+    return process.env["NODE_ENV"] === "production";
+  } catch {
+    return false;
+  }
+};
+const generateCss = async (dirname, prod = isProduction(), clean = true) => {
   try {
-    const e = [], n = [], t = N(s), c = o(t, "index.css");
-    (() => {
-      K(t) && H("rm -rf " + t), V(t), V(o(t, "css")), V(o(t, "types"));
-    })(), await Y(s);
-    const d = await O(s);
-    async function w(i, y) {
-      const h = z(i);
-      if (h.isDirectory()) {
-        const m = G(i);
-        await Promise.all(m.map((g) => w(o(i, g), o(y, g))));
-      } else if (h.isFile() && v(i)) {
-        const g = await E(i, t), F = [];
-        Object.entries(g).forEach(([l, p]) => {
-          if (p.isKeyframes && p.css) {
-            const P = `${p.animationName}.css`, _ = `css/${P}`, B = o(t, _);
-            e.push(P), $(B, p.css);
-            return;
+    const start = Date.now();
+    if (prod) logger.info("Generating CSS in production mode! 🔥");
+    else logger.info("Generating CSS in development mode! 🚀");
+    const globalCssFiles = [];
+    const cssFiles = [];
+    const destDir = await getDestDir(dirname);
+    const cssFile = join(destDir, "index.css");
+    const clearDistDir = () => {
+      if (existsSync(destDir)) execSync("rm -rf " + destDir);
+      mkdirSync(destDir, { recursive: true });
+      mkdirSync(join(destDir, "css"));
+      mkdirSync(join(destDir, "types"));
+      mkdirSync(join(destDir, "js"));
+      mkdirSync(join(destDir, "cache"));
+    };
+    if (clean) clearDistDir();
+    const files = /* @__PURE__ */ new Set();
+    const configFiles = /* @__PURE__ */ new Set();
+    async function collectFiles(src) {
+      const foldersToSkip = ["node_modules", "saltygen"];
+      const stats = statSync(src);
+      if (stats.isDirectory()) {
+        const files2 = readdirSync(src);
+        const shouldSkip = foldersToSkip.some((folder) => src.includes(folder));
+        if (shouldSkip) return;
+        await Promise.all(files2.map((file) => collectFiles(join(src, file))));
+      } else if (stats.isFile()) {
+        const validFile = isSaltyFile(src);
+        if (validFile) {
+          files.add(src);
+          const contents = readFileSync(src, "utf8");
+          const hasDefineFunction = /define[\w\d]+\(/.test(contents);
+          if (hasDefineFunction) configFiles.add(src);
+        }
+      }
+    }
+    await collectFiles(dirname);
+    await generateConfigStyles(dirname, configFiles);
+    const generationResults = {
+      keyframes: [],
+      components: [],
+      classNames: []
+    };
+    await Promise.all(
+      [...files].map(async (src) => {
+        const { contents } = await compileSaltyFile(dirname, src, destDir);
+        for (let [name, value] of Object.entries(contents)) {
+          const resolved = await resolveExportValue(value, 1);
+          if (resolved.isKeyframes) {
+            generationResults.keyframes.push({
+              value: resolved,
+              src,
+              name
+            });
+          } else if (resolved.isClassName) {
+            generationResults.classNames.push({
+              ...value,
+              src,
+              name
+            });
+          } else if (resolved.generator) {
+            generationResults.components.push({
+              ...value,
+              src,
+              name
+            });
           }
-          if (!p.generator) return;
-          const r = p.generator._withBuildContext({
-            name: l,
-            config: d
-          }), x = `${r.hash}-${r.priority}.css`;
-          n[r.priority] || (n[r.priority] = []), n[r.priority].push(x), F.push(x);
-          const C = `css/${x}`, D = o(t, C);
-          $(D, r.css);
-        });
-        const j = F.map((l) => `@import url('./${l}');`).join(`
-`), k = T(i, 6), u = o(t, `css/${k}.css`);
-        $(u, j);
+        }
+      })
+    );
+    const config = await getConfig(dirname);
+    for (const keyframes of generationResults.keyframes) {
+      const { value } = keyframes;
+      const fileName = `a_${value.animationName}.css`;
+      const filePath = `css/${fileName}`;
+      const cssPath = join(destDir, filePath);
+      globalCssFiles.push(fileName);
+      writeFileSync(cssPath, value.css);
+    }
+    const localCssFiles = {};
+    for (const componentResult of generationResults.components) {
+      const { src, name } = componentResult;
+      if (!localCssFiles[src]) localCssFiles[src] = [];
+      const generator = componentResult.generator._withBuildContext({
+        callerName: name,
+        isProduction: prod,
+        config
+      });
+      if (!cssFiles[generator.priority]) cssFiles[generator.priority] = [];
+      const styles = await generator.css;
+      if (!styles) continue;
+      cssFiles[generator.priority].push(generator.cssFileName);
+      const filePath = `css/${generator.cssFileName}`;
+      const cssPath = join(destDir, filePath);
+      writeFileSync(cssPath, styles);
+      if (config.importStrategy === "component") {
+        localCssFiles[src].push(generator.cssFileName);
       }
     }
-    await w(s, t);
-    const a = e.map((i) => `@import url('./css/${i}');`).join(`
-`);
-    let f = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
+    for (const classNameResult of generationResults.classNames) {
+      const { src, name } = classNameResult;
+      if (!localCssFiles[src]) localCssFiles[src] = [];
+      const generator = classNameResult.generator._withBuildContext({
+        callerName: name,
+        isProduction: prod,
+        config
+      });
+      const styles = await generator.css;
+      if (!styles) continue;
+      if (!cssFiles[generator.priority]) cssFiles[generator.priority] = [];
+      cssFiles[generator.priority].push(generator.cssFileName);
+      const filePath = `css/${generator.cssFileName}`;
+      const cssPath = join(destDir, filePath);
+      writeFileSync(cssPath, styles);
+      if (config.importStrategy === "component") {
+        localCssFiles[src].push(generator.cssFileName);
+      }
+    }
+    if (config.importStrategy === "component") {
+      Object.entries(localCssFiles).forEach(([src, localCssFile]) => {
+        const cssContent2 = localCssFile.map((file) => `@import url('./${file}');`).join("\n");
+        const hashName = toHash(src, 6);
+        const parsedPath = parse(src);
+        const dasherized = dashCase(parsedPath.name);
+        const cssFile2 = join(destDir, `css/f_${dasherized}-${hashName}.css`);
+        writeFileSync(cssFile2, cssContent2 || `/* Empty file */`);
+      });
+    }
+    const otherGlobalCssFiles = globalCssFiles.map((file) => `@import url('./css/${file}');`).join("\n");
+    const globalCssFilenames = ["_variables.css", "_reset.css", "_global.css", "_templates.css"];
+    const importsWithData = globalCssFilenames.filter((file) => {
+      try {
+        const data = readFileSync(join(destDir, "css", file), "utf8");
+        return data.length > 0;
+      } catch {
+        return false;
+      }
+    });
+    const globalImports = importsWithData.map((file) => `@import url('./css/${file}');`);
+    const generatorText = "/*!\n * Generated with Salty CSS (https://salty-css.dev)\n * Do not edit this file directly\n */\n";
+    let cssContent = `${generatorText}@layer reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
 
-${["@import url('./css/variables.css');", "@import url('./css/global.css');", "@import url('./css/templates.css');"].join(`
-`)}
-${a}`;
-    if (d.importStrategy !== "component") {
-      const i = n.flat().map((y) => `@import url('./css/${y}');`).join(`
-`);
-      f += i;
+${globalImports.join(
+      "\n"
+    )}
+${otherGlobalCssFiles}`;
+    if (config.importStrategy !== "component") {
+      const mergedContent = cssFiles.reduce((acc, val, layer) => {
+        const layerContent = val.reduce((layerAcc, file) => {
+          var _a;
+          const filepath = join(destDir, "css", file);
+          const css = readFileSync(filepath, "utf8");
+          const filepathHash = ((_a = /.*-([^-]+)-\d+.css/.exec(file)) == null ? void 0 : _a.at(1)) || toHash(filepath, 6);
+          if (layerAcc.includes(filepathHash)) return layerAcc;
+          return `${layerAcc}
+/*start:${filepathHash}-${file}*/
+${css}
+/*end:${filepathHash}*/
+`;
+        }, "");
+        const layerFileName = `l_${layer}.css`;
+        const layerFilePath = join(destDir, "css", layerFileName);
+        const layerContentWithLayer = `@layer l${layer} { ${layerContent}
+ }`;
+        writeFileSync(layerFilePath, layerContentWithLayer);
+        return `${acc}
+@import url('./css/${layerFileName}');`;
+      }, "");
+      cssContent += mergedContent;
     }
-    $(c, f);
+    writeFileSync(cssFile, cssContent);
+    const end = Date.now();
+    const time = end - start;
+    const emoji = time < 200 ? "🔥" : time < 500 ? "🚀" : time < 1e3 ? "🎉" : time < 2e3 ? "🚗" : time < 5e3 ? "🤔" : "🥴";
+    logger.info(`Generated CSS in ${time}ms! ${emoji}`);
   } catch (e) {
     console.error(e);
   }
-}, it = async (s, e) => {
+};
+const generateFile = async (dirname, file, prod = isProduction()) => {
   try {
-    const n = [], t = o(s, "./saltygen"), c = o(t, "index.css");
-    if (v(e)) {
-      const d = await O(s), w = await E(e, t);
-      Object.entries(w).forEach(([y, h]) => {
-        if (!h.generator) return;
-        const m = h.generator._withBuildContext({
-          name: y,
-          config: d
-        }), g = `${m.hash}-${m.priority}.css`, F = `css/${g}`, j = o(t, F);
-        n.push(g), $(j, m.css);
-      });
-      const a = M(c, "utf8").split(`
-`), b = n.map((y) => `@import url('../saltygen/css/${y}');`), i = [.../* @__PURE__ */ new Set([...a, ...b])].join(`
-`);
-      $(c, i);
+    const destDir = await getDestDir(dirname);
+    const validFile = isSaltyFile(file);
+    if (validFile) {
+      const cssFiles = [];
+      const config = await getConfig(dirname);
+      const { contents } = await compileSaltyFile(dirname, file, destDir);
+      for (const [name, value] of Object.entries(contents)) {
+        const resolved = await resolveExportValue(value, 1);
+        if (resolved.isKeyframes && resolved.css) {
+          const fileName = `a_${resolved.animationName}.css`;
+          const filePath2 = `css/${fileName}`;
+          const cssPath2 = join(destDir, filePath2);
+          writeFileSync(cssPath2, await resolved.css);
+          continue;
+        }
+        if (resolved.isClassName) {
+          const generator2 = resolved.generator._withBuildContext({
+            callerName: name,
+            isProduction: prod,
+            config
+          });
+          const styles2 = await generator2.css;
+          if (!styles2) continue;
+          if (!cssFiles[generator2.priority]) cssFiles[generator2.priority] = [];
+          cssFiles[generator2.priority].push(generator2.cssFileName);
+          const filePath2 = `css/${generator2.cssFileName}`;
+          const cssPath2 = join(destDir, filePath2);
+          writeFileSync(cssPath2, styles2);
+          continue;
+        }
+        if (!resolved.generator) continue;
+        const generator = resolved.generator._withBuildContext({
+          callerName: name,
+          isProduction: prod,
+          config
+        });
+        const styles = await generator.css;
+        if (!styles) continue;
+        const filePath = `css/${generator.cssFileName}`;
+        const cssPath = join(destDir, filePath);
+        writeFileSync(cssPath, styles);
+        if (!cssFiles[generator.priority]) cssFiles[generator.priority] = [];
+        cssFiles[generator.priority].push(generator.cssFileName);
+      }
+      if (config.importStrategy !== "component") {
+        cssFiles.forEach((val, layer) => {
+          const layerFileName = `l_${layer}.css`;
+          const layerFilePath = join(destDir, "css", layerFileName);
+          let currentLayerFileContent = readFileSync(layerFilePath, "utf8");
+          val.forEach((file2) => {
+            var _a;
+            const filepath = join(destDir, "css", file2);
+            const filepathHash = ((_a = /.*-([^-]+)-\d+.css/.exec(file2)) == null ? void 0 : _a.at(1)) || toHash(filepath, 6);
+            const found = currentLayerFileContent.includes(filepathHash);
+            if (!found) {
+              const css = readFileSync(filepath, "utf8");
+              const newContent = `/*start:${filepathHash}-${file2}*/
+${css}
+/*end:${filepathHash}*/
+`;
+              currentLayerFileContent = `${currentLayerFileContent.replace(/\}$/, "")}
+${newContent}
+}`;
+            }
+          });
+          writeFileSync(layerFilePath, currentLayerFileContent);
+        });
+      } else {
+        const cssContent = cssFiles.flat().map((file2) => `@import url('./${file2}');`).join("\n");
+        const hashName = toHash(file, 6);
+        const parsedPath = parse(file);
+        const dasherized = dashCase(parsedPath.name);
+        const cssFile = join(destDir, `css/f_${dasherized}-${hashName}.css`);
+        writeFileSync(cssFile, cssContent || `/* Empty file */`);
+      }
     }
-  } catch (n) {
-    console.error(n);
+  } catch (e) {
+    console.error(e);
   }
-}, rt = async (s, e) => {
+};
+const minimizeFile = async (dirname, file, prod = isProduction()) => {
+  var _a, _b;
   try {
-    const n = o(s, "./saltygen");
-    if (v(e)) {
-      const c = M(e, "utf8");
-      c.replace(/^(?!export\s)const\s.*/gm, (f) => `export ${f}`) !== c && await J(e, c);
-      const d = await O(s), w = await E(e, n);
-      let a = c;
-      Object.entries(w).forEach(([f, i]) => {
-        var j;
-        if (i.isKeyframes) {
-          console.log("value", i);
-          return;
+    const destDir = await getDestDir(dirname);
+    const validFile = isSaltyFile(file);
+    if (validFile) {
+      const original = readFileSync(file, "utf8");
+      const config = await getConfig(dirname);
+      const { contents } = await compileSaltyFile(dirname, file, destDir);
+      let current = original;
+      for (const [name, value] of Object.entries(contents)) {
+        const resolved = await resolveExportValue(value, 1);
+        if (resolved.isKeyframes) continue;
+        if (!resolved.generator) continue;
+        const generator = resolved.generator._withBuildContext({
+          callerName: name,
+          isProduction: prod,
+          config
+        });
+        const [start, end] = await getFunctionRange(current, name);
+        const range = current.slice(start, end);
+        if (resolved.isClassName) {
+          const copy = current;
+          const clientVersion = ` ${name} = className("${generator.classNames}")`;
+          current = current.replace(range, clientVersion);
+          if (copy === current) console.error("Minimize file failed to change content", { name });
         }
-        if (!i.generator) return;
-        const y = i.generator._withBuildContext({
-          name: f,
-          config: d
-        }), h = new RegExp(`${f}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(c);
-        if (!h)
-          return console.error("Could not find the original declaration");
-        const m = (j = h.at(1)) == null ? void 0 : j.trim(), g = `${f} = styled(${m}, "${y.classNames}", "${y._callerName}", ${JSON.stringify(y.props)});`, F = new RegExp(`${f}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`, "g");
-        a = a.replace(F, g);
-      });
-      const b = T(e, 6);
-      return d.importStrategy === "component" && (a = `import '../../saltygen/css/${b}.css';
-${a}`), a = a.replace("{ styled }", "{ styledClient as styled }"), a = a.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), a;
+        if (range.includes("styled")) {
+          const tagName = (_b = (_a = /styled\(([^,]+),/.exec(range)) == null ? void 0 : _a.at(1)) == null ? void 0 : _b.trim();
+          const copy = current;
+          const clientVersion = ` ${name} = styled(${tagName}, "${generator.classNames}", ${JSON.stringify(generator.clientProps)})`;
+          current = current.replace(range, clientVersion);
+          if (copy === current) console.error("Minimize file failed to change content", { name, tagName });
+        }
+      }
+      if (config.importStrategy === "component") {
+        const fileHash = toHash(file, 6);
+        const parsed = parse(file);
+        const dasherized = dashCase(parsed.name);
+        const cssFileName = `f_${dasherized}-${fileHash}.css`;
+        current = `import '../../saltygen/css/${cssFileName}';
+${current}`;
+      }
+      current = current.replace(`@salty-css/react/class-name`, `@salty-css/react/class-name-client`);
+      current = current.replace(`{ styled }`, `{ styledClient as styled }`);
+      current = current.replace(`@salty-css/react/styled`, `@salty-css/react/styled-client`);
+      return current;
     }
-  } catch (n) {
-    console.error(n);
+  } catch (e) {
+    console.error("Error in minimizeFile:", e);
   }
+  return void 0;
 };
 export {
-  E as compileSaltyFile,
-  Y as generateConfigStyles,
-  ot as generateCss,
-  it as generateFile,
-  v as isSaltyFile,
-  rt as minimizeFile,
-  U as saltyFileExtensions,
-  W as saltyFileRegExp
+  logError as a,
+  compileSaltyFile,
+  generateConfigStyles,
+  generateCss,
+  generateFile,
+  getConfig,
+  getDestDir,
+  isSaltyFile,
+  logger as l,
+  minimizeFile,
+  saltyFileExtensions,
+  saltyFileRegExp
 };