@salty-css/core 0.1.0-alpha.9 → 0.1.0-feat-define-import.0

package/bin/main.js

@@ -9,6 +9,7 @@ import { exec } from "child_process";
 import ora from "ora";
 import { p as pascalCase } from "../pascal-case-F3Usi5Wf.js";
 import ejs from "ejs";
+import { createInterface } from "readline/promises";
 const defaultPackageJsonPath = join(process.cwd(), "package.json");
 const readPackageJson = async (filePath = defaultPackageJsonPath) => {
   const content = await readFile(filePath, "utf-8").then(JSON.parse).catch(() => void 0);
@@ -138,17 +139,21 @@ const buildContext = async (opts) => {
     packageJson,
     rcFile,
     cliVersion: cliPackageJson.version || "0.0.0",
-    skipInstall: !!opts.skipInstall
+    skipInstall: !!opts.skipInstall,
+    yes: !!opts.yes
   };
 };
 const registerBuildCommand = (program, defaultProject) => {
-  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) {
+  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.").option("--mode <mode>", 'Build mode: "production" or "development". Defaults to NODE_ENV-based detection.').action(async function(_dir = defaultProject) {
     logger.info("Building the Salty-CSS project...");
-    const { dir = _dir, watch: watch$1 } = this.opts();
+    const { dir = _dir, watch: watch$1, mode } = this.opts();
+    if (mode !== void 0 && mode !== "production" && mode !== "development") {
+      return logError(`Invalid --mode "${mode}". Expected "production" or "development".`);
+    }
     const resolved = dir ?? await getDefaultProject();
     if (!resolved) return logError("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
     const projectDir = resolveProjectDir(resolved);
-    const compiler = new SaltyCompiler(projectDir);
+    const compiler = new SaltyCompiler(projectDir, { mode });
     await compiler.generateCss();
     if (watch$1) {
       logger.info("Watching for changes in the project directory...");
@@ -222,7 +227,7 @@ const getFramework = (name) => {
   return frameworksByName[name];
 };
 const templateLoaders = {
-  "salty.config.ts": () => import("../salty.config-DjosWdPw.js"),
+  "salty.config.ts": () => import("../salty.config-GV37Q-D2.js"),
   "saltygen/index.css": () => import("../index-DKz1QXqs.js"),
   "react/styled-file.ts": () => import("../styled-file-Cda3EeR6.js"),
   "react/vanilla-file.ts": () => import("../vanilla-file-1kOqbCIM.js"),
@@ -290,6 +295,52 @@ const registerGenerateCommand = (program, defaultProject) => {
     await formatWithPrettier(formattedStyledFilePath);
   });
 };
+const formatPackageForDisplay = (spec) => {
+  const trimmed = spec.trim();
+  if (trimmed.startsWith("-D ")) return `${trimmed.slice(3).trim()} (dev)`;
+  return trimmed;
+};
+const renderPackageList = (packages) => {
+  return packages.map((p) => `  + ${formatPackageForDisplay(p)}`).join("\n");
+};
+const confirmInstall = async (packages, yes, options = {}) => {
+  if (yes) return;
+  if (packages.length === 0) return;
+  const input = options.input ?? process.stdin;
+  const output = options.output ?? process.stdout;
+  const isTTY = options.isTTY ?? process.stdin.isTTY ?? false;
+  if (!isTTY) {
+    throw new Error("Cannot prompt for install confirmation: stdin is not a TTY. Re-run with --yes to install the listed packages without prompting.");
+  }
+  output.write(`The following packages will be installed:
+${renderPackageList(packages)}
+`);
+  const rl = createInterface({ input, output, terminal: false });
+  try {
+    const answer = (await rl.question("Proceed? (y/N) ")).trim().toLowerCase();
+    if (answer !== "y" && answer !== "yes") {
+      throw new Error("Install cancelled by user.");
+    }
+  } finally {
+    rl.close();
+  }
+};
+const confirmYesNo = async (question, options = {}) => {
+  if (options.yes) return true;
+  const input = options.input ?? process.stdin;
+  const output = options.output ?? process.stdout;
+  const isTTY = options.isTTY ?? process.stdin.isTTY ?? false;
+  if (!isTTY) return false;
+  const suffix = options.defaultYes ? "(Y/n)" : "(y/N)";
+  const rl = createInterface({ input, output, terminal: false });
+  try {
+    const answer = (await rl.question(`${question} ${suffix} `)).trim().toLowerCase();
+    if (answer === "") return !!options.defaultYes;
+    return answer === "y" || answer === "yes";
+  } finally {
+    rl.close();
+  }
+};
 const CSS_FILE_FOLDERS = ["src", "public", "assets", "styles", "css", "app"];
 const CSS_SECOND_LEVEL_FOLDERS = ["styles", "css", "app", "pages"];
 const CSS_FILE_NAMES = ["index", "styles", "main", "app", "global", "globals"];
@@ -336,17 +387,22 @@ const editAstroConfig = (existing) => {
 const astroIntegration = {
   name: "astro",
   detect: (ctx) => findAstroConfig(ctx.projectDir),
-  apply: async (ctx, configPath) => {
+  plan: async (ctx, configPath) => {
     const existing = await readFile(configPath, "utf-8").catch(() => void 0);
-    if (existing === void 0) return { changed: false };
+    if (existing === void 0) return null;
     const result = editAstroConfig(existing);
     if (result.warning) logger.warn(result.warning);
-    if (result.content === null) return { changed: false };
-    if (!ctx.skipInstall) await npmInstall(`-D ${astroPackage(ctx.cliVersion)}`);
-    logger.info("Adding Salty-CSS integration to Astro config: " + configPath);
-    await writeFile(configPath, result.content);
-    await formatWithPrettier(configPath);
-    return { changed: true };
+    if (result.content === null) return null;
+    const newContent = result.content;
+    return {
+      packages: [`-D ${astroPackage(ctx.cliVersion)}`],
+      execute: async () => {
+        logger.info("Adding Salty-CSS integration to Astro config: " + configPath);
+        await writeFile(configPath, newContent);
+        await formatWithPrettier(configPath);
+        return { changed: true };
+      }
+    };
   }
 };
 const ESLINT_CONFIG_CANDIDATES = [
@@ -405,20 +461,25 @@ const eslintIntegration = {
     const candidates = eslintConfigCandidates(ctx.projectDir, ctx.cwd);
     return candidates.find((p) => existsSync(p)) ?? null;
   },
-  apply: async (ctx, configPath) => {
+  plan: async (ctx, configPath) => {
     const existing = await readFile(configPath, "utf-8").catch(() => void 0);
     if (existing === void 0) {
       logger.error("Could not read ESLint config file.");
-      return { changed: false };
+      return null;
     }
-    if (!ctx.skipInstall) await npmInstall(corePackages.eslintConfigCore(ctx.cliVersion));
     const result = editEslintConfig(existing, configPath.endsWith("js"));
     if (result.warning) logger.warn(result.warning);
-    if (result.content === null) return { changed: false };
-    logger.info("Edit file: " + configPath);
-    await writeFile(configPath, result.content);
-    await formatWithPrettier(configPath);
-    return { changed: true };
+    if (result.content === null) return null;
+    const newContent = result.content;
+    return {
+      packages: [corePackages.eslintConfigCore(ctx.cliVersion)],
+      execute: async () => {
+        logger.info("Edit file: " + configPath);
+        await writeFile(configPath, newContent);
+        await formatWithPrettier(configPath);
+        return { changed: true };
+      }
+    };
   }
 };
 const nextConfigFiles = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"];
@@ -448,16 +509,20 @@ const nextIntegration = {
     const found = nextConfigFiles.map((file) => join(ctx.projectDir, file)).find((p) => existsSync(p));
     return found ?? null;
   },
-  apply: async (ctx, configPath) => {
+  plan: async (ctx, configPath) => {
     const existing = await readFile(configPath, "utf-8").catch(() => void 0);
-    if (existing === void 0) return { changed: false };
+    if (existing === void 0) return null;
     const { content } = editNextConfig(existing);
-    if (content === null) return { changed: false };
-    if (!ctx.skipInstall) await npmInstall(`-D ${nextPackage(ctx.cliVersion)}`);
-    logger.info("Adding Salty-CSS plugin to Next.js config...");
-    await writeFile(configPath, content);
-    await formatWithPrettier(configPath);
-    return { changed: true };
+    if (content === null) return null;
+    return {
+      packages: [`-D ${nextPackage(ctx.cliVersion)}`],
+      execute: async () => {
+        logger.info("Adding Salty-CSS plugin to Next.js config...");
+        await writeFile(configPath, content);
+        await formatWithPrettier(configPath);
+        return { changed: true };
+      }
+    };
   }
 };
 const vitePackage = (version) => `@salty-css/vite@${version}`;
@@ -475,27 +540,40 @@ const viteIntegration = {
     const path = join(ctx.projectDir, "vite.config.ts");
     return existsSync(path) ? path : null;
   },
-  apply: async (ctx, configPath) => {
+  plan: async (ctx, configPath) => {
     const existing = await readFile(configPath, "utf-8").catch(() => void 0);
-    if (existing === void 0) return { changed: false };
+    if (existing === void 0) return null;
     const { content } = editViteConfig(existing);
-    if (content === null) return { changed: false };
-    logger.info("Edit file: " + configPath);
-    if (!ctx.skipInstall) await npmInstall(`-D ${vitePackage(ctx.cliVersion)}`);
-    logger.info("Adding Salty-CSS plugin to Vite config...");
-    await writeFile(configPath, content);
-    await formatWithPrettier(configPath);
-    return { changed: true };
+    if (content === null) return null;
+    return {
+      packages: [`-D ${vitePackage(ctx.cliVersion)}`],
+      execute: async () => {
+        logger.info("Edit file: " + configPath);
+        logger.info("Adding Salty-CSS plugin to Vite config...");
+        await writeFile(configPath, content);
+        await formatWithPrettier(configPath);
+        return { changed: true };
+      }
+    };
   }
 };
 const buildIntegrationRegistry = [eslintIntegration, viteIntegration, nextIntegration, astroIntegration];
-const detectAndApplyIntegrations = async (ctx) => {
-  const results = [];
+const planIntegrations = async (ctx) => {
+  const planned = [];
   for (const integration of buildIntegrationRegistry) {
     const configPath = await integration.detect(ctx);
     if (!configPath) continue;
-    const result = await integration.apply(ctx, configPath);
-    results.push({ name: integration.name, configPath, changed: result.changed });
+    const plan = await integration.plan(ctx, configPath);
+    if (!plan) continue;
+    planned.push({ name: integration.name, configPath, plan });
+  }
+  return planned;
+};
+const applyIntegrationPlans = async (planned) => {
+  const results = [];
+  for (const { name, configPath, plan } of planned) {
+    const result = await plan.execute();
+    results.push({ name, configPath, changed: result.changed });
   }
   return results;
 };
@@ -546,17 +624,24 @@ const wirePrepareScript = async () => {
   await updatePackageJson(next);
 };
 const registerInitCommand = (program) => {
-  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 = ".") {
+  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.").option("-y, --yes", "Skip the install confirmation prompt.").action(async function(_dir = ".") {
     try {
       const opts = this.opts();
       const dir = opts.dir ?? _dir;
       if (!dir) return logError("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
-      const ctx = await buildContext({ dir, skipInstall: opts.skipInstall });
+      const ctx = await buildContext({ dir, skipInstall: opts.skipInstall, yes: opts.yes });
       logger.info("Initializing a new Salty-CSS project!");
       const framework = await detectFramework(ctx);
       logger.info(`Detected framework: ${framework.name}`);
+      const plannedIntegrations = await planIntegrations(ctx);
       if (!ctx.skipInstall) {
-        await npmInstall(corePackages.core(ctx.cliVersion), framework.runtimePackage(ctx.cliVersion));
+        const packages = [
+          corePackages.core(ctx.cliVersion),
+          framework.runtimePackage(ctx.cliVersion),
+          ...plannedIntegrations.flatMap((p) => p.plan.packages)
+        ];
+        await confirmInstall(packages, ctx.yes);
+        await npmInstall(...packages);
       }
       const projectFiles = await Promise.all([readTemplate("salty.config.ts"), readTemplate("saltygen/index.css")]);
       await mkdir(ctx.projectDir, { recursive: true });
@@ -564,7 +649,7 @@ const registerInitCommand = (program) => {
       await writeProjectToRc(ctx.cwd, ctx.relativeProjectPath, framework);
       await ensureGitignoreSaltygen(ctx.cwd);
       await importSaltygenIntoCss(ctx.projectDir, opts.cssFile);
-      await detectAndApplyIntegrations(ctx);
+      await applyIntegrationPlans(plannedIntegrations);
       await wirePrepareScript();
       logger.info("Running the build to generate initial CSS...");
       const compiler = new SaltyCompiler(ctx.projectDir);
@@ -595,8 +680,8 @@ const getSaltyCssPackages = async () => {
   return saltyCssPackages;
 };
 const registerUpdateCommand = (program) => {
-  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();
+  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).option("-y, --yes", "Skip confirmation prompts (install and rebuild).").option("-d, --dir <dir>", "Project directory to rebuild after updating.").action(async function(_version = "latest") {
+    const { legacyPeerDeps, version = _version, yes = false, dir } = this.opts();
     const saltyCssPackages = await getSaltyCssPackages();
     if (!saltyCssPackages) return logError("Could not update Salty-CSS packages as any were found in package.json.");
     const cli = await readThisPackageJson();
@@ -604,6 +689,11 @@ const registerUpdateCommand = (program) => {
       if (version === "@") return `${name}@${cli.version}`;
       return `${name}@${version.replace(/^@/, "")}`;
     });
+    try {
+      await confirmInstall(packagesToUpdate, yes);
+    } catch (err) {
+      return logError(err instanceof Error ? err.message : String(err));
+    }
     if (legacyPeerDeps) {
       logger.warn("Using legacy peer dependencies to update packages.");
       await npmInstall(...packagesToUpdate, "--legacy-peer-deps");
@@ -626,6 +716,17 @@ const registerUpdateCommand = (program) => {
         logger.info(`Updated to ${v.replace(/^\^/, "")}: ${names.join(", ")}`);
       }
     }
+    const project = dir ?? await getDefaultProject();
+    if (!project) {
+      logger.warn("Skipping rebuild: no project directory configured. Run `salty-css build [dir]` manually.");
+      return;
+    }
+    const shouldRebuild = await confirmYesNo("Rebuild Salty CSS now?", { yes });
+    if (!shouldRebuild) return;
+    const projectDir = resolveProjectDir(project);
+    logger.info("Rebuilding Salty-CSS project...");
+    await new SaltyCompiler(projectDir).generateCss();
+    logger.info("Rebuild complete.");
   });
 };
 const registerVersionOption = (program) => {

package/{class-name-generator-YeSQe_Ik.js → class-name-generator-CMWY5KTJ.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { p as parseAndJoinStyles } from "./parse-styles-BTIoYnBr.js";
+import { p as parseAndJoinStyles } from "./parse-styles-CLMTHo2H.js";
 import { d as dashCase } from "./dash-case-DblXvymC.js";
 import { t as toHash } from "./to-hash-DAN2LcHK.js";
 class StylesGenerator {

package/{class-name-generator-B2Pb2obX.cjs → class-name-generator-DB5aQwC_.cjs}

@@ -2,7 +2,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-const parseStyles = require("./parse-styles-CA3TP5n1.cjs");
+const parseStyles = require("./parse-styles-C54MOrPg.cjs");
 const dashCase = require("./dash-case-DIwKaYgE.cjs");
 const toHash = require("./to-hash-C05Y906F.cjs");
 class StylesGenerator {

package/compiler/resolve-import.d.ts

@@ -0,0 +1,17 @@
+import { ImportSpec } from '../factories/define-import';
+export interface ResolveImportOptions {
+    /**
+     * Override for node_modules resolution. Receives the bare specifier (with any leading `~` already
+     * stripped) and the source file path of the salty file that called `defineImport`. Must return the
+     * absolute filesystem path of the resolved CSS file. Defaults to `createRequire(sourceFile).resolve`.
+     */
+    resolveModule?: (specifier: string, sourceFile: string) => string;
+    /**
+     * Override for copying resolved node_modules CSS into `<destDir>/imports/`. Receives the absolute
+     * source and destination paths. Defaults to `copyFileSync`.
+     */
+    copyAsset?: (from: string, to: string) => void;
+}
+export declare const resolveImport: (spec: ImportSpec, sourceFile: string, destDir: string, options?: ResolveImportOptions) => {
+    rule: string;
+};

package/compiler/salty-compiler.cjs

@@ -11,14 +11,14 @@ const fs = require("fs");
 const child_process = require("child_process");
 const compiler_helpers = require("./helpers.cjs");
 const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
-const dashCase = require("../dash-case-DIwKaYgE.cjs");
+const module$1 = require("module");
 const toHash = require("../to-hash-C05Y906F.cjs");
-const parseStyles = require("../parse-styles-CA3TP5n1.cjs");
+const dashCase = require("../dash-case-DIwKaYgE.cjs");
+const parseStyles = require("../parse-styles-C54MOrPg.cjs");
 const css_merge = require("../css/merge.cjs");
 const parsers_index = require("../parsers/index.cjs");
-const compiler_getFiles = require("./get-files.cjs");
+const moduleType = require("../util/module-type");
 const console = require("console");
-var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -44,19 +44,53 @@ const logger = winston.createLogger({
 const logError = (message) => {
   logger.error(message);
 };
-const readPackageJsonModule = async (dirname) => {
-  const packageJsonContent = await compiler_getFiles.getPackageJson(dirname);
-  if (!packageJsonContent) return void 0;
-  return packageJsonContent.type;
+const EXTERNAL_URL = /^(?:[a-z][a-z0-9+.-]*:)?\/\//i;
+const normaliseSpec = (spec) => {
+  if (typeof spec === "string") return { url: spec };
+  return spec;
+};
+const ensureRelativePrefix = (path2) => {
+  if (path2.startsWith(".") || path2.startsWith("/")) return path2;
+  return `./${path2}`;
+};
+const toPosix = (path2) => path2.split("\\").join("/");
+const defaultResolveModule = (specifier, sourceFile) => {
+  return module$1.createRequire(sourceFile).resolve(specifier);
 };
-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 ((typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("compiler/salty-compiler.cjs", document.baseURI).href).endsWith(".cjs")) cachedModuleType = "cjs";
-  return cachedModuleType || "esm";
+const defaultCopyAsset = (from, to) => {
+  const dir = path.dirname(to);
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  fs.copyFileSync(from, to);
+};
+const buildRule = (url, { media, supports }) => {
+  let rule = `@import url('${url}')`;
+  if (supports) rule += ` supports(${supports})`;
+  if (media) rule += ` ${media}`;
+  return `${rule};`;
+};
+const resolveImport = (spec, sourceFile, destDir, options = {}) => {
+  const opts = normaliseSpec(spec);
+  const { url } = opts;
+  const resolveModule = options.resolveModule ?? defaultResolveModule;
+  const copyAsset = options.copyAsset ?? defaultCopyAsset;
+  if (EXTERNAL_URL.test(url)) {
+    return { rule: buildRule(url, opts) };
+  }
+  if (url.startsWith("/")) {
+    return { rule: buildRule(url, opts) };
+  }
+  if (url.startsWith("./") || url.startsWith("../")) {
+    const absolute2 = path.resolve(path.dirname(sourceFile), url);
+    const fromImportsFile = path.relative(path.join(destDir, "css"), absolute2);
+    return { rule: buildRule(ensureRelativePrefix(toPosix(fromImportsFile)), opts) };
+  }
+  const specifier = url.startsWith("~") ? url.slice(1) : url;
+  const absolute = resolveModule(specifier, sourceFile);
+  const hash = toHash.toHash(absolute, 6);
+  const fileName = `${hash}-${path.basename(absolute)}`;
+  const destPath = path.join(destDir, "imports", fileName);
+  copyAsset(absolute, destPath);
+  return { rule: buildRule(`../imports/${fileName}`, opts) };
 };
 function dotCase(str) {
   if (!str) return "";
@@ -111,7 +145,7 @@ const saltyReset = {
   }
 };
 class SaltyCompiler {
-  constructor(projectRootDir) {
+  constructor(projectRootDir, options = {}) {
     __publicField(this, "importFile", (path2) => {
       const now = Date.now();
       return import(
@@ -173,7 +207,7 @@ class SaltyCompiler {
       const destDir = await this.getDestDir();
       const coreConfigPath = path.join(this.projectRootDir, (rcProject == null ? void 0 : rcProject.configDir) || "", "salty.config.ts");
       const coreConfigDest = path.join(destDir, "salty.config.js");
-      const moduleType = await detectCurrentModuleType(this.projectRootDir);
+      const moduleType$1 = await moduleType.detectCurrentModuleType(this.projectRootDir);
       const externalModules = this.getExternalModules(coreConfigPath);
       await esbuild__namespace.build({
         entryPoints: [coreConfigPath],
@@ -181,7 +215,7 @@ class SaltyCompiler {
         treeShaking: true,
         bundle: true,
         outfile: coreConfigDest,
-        format: moduleType,
+        format: moduleType$1,
         external: externalModules
       });
       const { config } = await this.importFile(coreConfigDest);
@@ -233,6 +267,7 @@ ${currentFile}`;
           fs.mkdirSync(path.join(destDir, "types"));
           fs.mkdirSync(path.join(destDir, "js"));
           fs.mkdirSync(path.join(destDir, "cache"));
+          fs.mkdirSync(path.join(destDir, "imports"));
         };
         if (clean) clearDistDir();
         const files = /* @__PURE__ */ new Set();
@@ -348,7 +383,7 @@ ${currentFile}`;
           });
         }
         const otherGlobalCssFiles = globalCssFiles.map((file) => `@import url('./css/${file}');`).join("\n");
-        const globalCssFilenames = ["_variables.css", "_reset.css", "_global.css", "_templates.css"];
+        const globalCssFilenames = ["_imports.css", "_variables.css", "_reset.css", "_global.css", "_templates.css"];
         const importsWithData = globalCssFilenames.filter((file) => {
           try {
             const data = fs.readFileSync(path.join(destDir, "css", file), "utf8");
@@ -357,9 +392,12 @@ ${currentFile}`;
             return false;
           }
         });
-        const globalImports = importsWithData.map((file) => `@import url('./css/${file}');`);
+        const globalImports = importsWithData.map((file) => {
+          const layerSuffix = file === "_imports.css" ? " layer(imports)" : "";
+          return `@import url('./css/${file}')${layerSuffix};`;
+        });
         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;
+        let cssContent = `${generatorText}@layer imports, reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
 
 ${globalImports.join(
           "\n"
@@ -405,7 +443,8 @@ ${css}
         mediaQueries: [],
         globalStyles: [],
         variables: [],
-        templates: []
+        templates: [],
+        imports: []
       };
       await Promise.all(
         [...configFiles].map(async (src) => {
@@ -415,6 +454,7 @@ ${css}
             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}`));
+            else if (value.isDefineImport) generationResults.imports.push(value._setPath(src));
           });
         })
       );
@@ -513,6 +553,22 @@ ${css}
       const templateTokens = parsers_index.getTemplateTypes(templates);
       fs.writeFileSync(templateStylesPath, `@layer templates { ${templateStylesString} }`);
       configCacheContent.templates = templates;
+      const importsPath = path.join(destDir, "css/_imports.css");
+      const importRules = [];
+      for (const factory of generationResults.imports) {
+        const sourceFile = factory._path;
+        if (!sourceFile) continue;
+        for (const spec of factory._current) {
+          try {
+            const { rule } = resolveImport(spec, sourceFile, destDir);
+            importRules.push(rule);
+          } catch (e) {
+            const url = typeof spec === "string" ? spec : spec.url;
+            logger.error(`Failed to resolve defineImport(${JSON.stringify(url)}) from ${sourceFile}: ${e.message}`);
+          }
+        }
+      }
+      fs.writeFileSync(importsPath, importRules.join("\n"));
       const configTemplateFactories = config.templates ? [defineTemplates.defineTemplates(config.templates)._setPath(`config;;${configPath}`)] : [];
       const templateFactories = css_merge.mergeFactories(generationResults.templates, configTemplateFactories);
       configCacheContent.templatePaths = Object.fromEntries(Object.entries(templateFactories).map(([key, faktory]) => [key, faktory._path]));
@@ -546,11 +602,12 @@ ${css}
       let currentFile = fs.readFileSync(sourceFilePath, "utf8");
       currentFile = this.replaceStyledTag(currentFile);
       currentFile = this.addConfigCache(currentFile);
-      const outputFilePath = path.join(outputDirectory, "js", hashedName + ".js");
+      const currentFileHash = toHash.toHash(currentFile);
+      const outputFilePath = path.join(outputDirectory, "js", `${hashedName}-${currentFileHash}.js`);
       const rcProject = await this.getRCProjectConfig(this.projectRootDir);
       const coreConfigPath = path.join(this.projectRootDir, (rcProject == null ? void 0 : rcProject.configDir) || "", "salty.config.ts");
       const externalModules = this.getExternalModules(coreConfigPath);
-      const moduleType = await detectCurrentModuleType(this.projectRootDir);
+      const moduleType$1 = await moduleType.detectCurrentModuleType(this.projectRootDir);
       await esbuild__namespace.build({
         stdin: {
           contents: currentFile,
@@ -562,7 +619,7 @@ ${css}
         treeShaking: true,
         bundle: true,
         outfile: outputFilePath,
-        format: moduleType,
+        format: moduleType$1,
         target: ["node20"],
         keepNames: true,
         external: externalModules,
@@ -690,11 +747,13 @@ ${newContent}
       });
     });
     this.projectRootDir = projectRootDir;
+    this.options = options;
     if (typeof process === "undefined") {
       throw new Error("SaltyServer can only be used in a Node.js environment.");
     }
   }
   get isProduction() {
+    if (this.options.mode) return this.options.mode === "production";
     try {
       return process.env["NODE_ENV"] !== "development";
     } catch {

package/compiler/salty-compiler.d.ts

@@ -1,9 +1,14 @@
 import { CachedConfig, SaltyConfig } from '../config';
+export type SaltyCompilerMode = 'production' | 'development';
+export interface SaltyCompilerOptions {
+    mode?: SaltyCompilerMode;
+}
 export declare class SaltyCompiler {
     projectRootDir: string;
+    private options;
     importFile: (path: string) => Promise<any>;
     private cache;
-    constructor(projectRootDir: string);
+    constructor(projectRootDir: string, options?: SaltyCompilerOptions);
     get isProduction(): boolean;
     /**
      * Locate and read the .saltyrc.json file starting from the current directory and moving up the directory tree.
@@ -39,6 +44,7 @@ export declare class SaltyCompiler {
                 isGlobalDefine?: boolean;
                 isDefineVariables?: boolean;
                 isDefineTemplates?: boolean;
+                isDefineImport?: boolean;
                 isKeyframes?: boolean;
                 animationName?: string;
                 css?: Promise<string>;