@salty-css/core 0.1.0-refactor-add-additional-paths-to-config-cache.1 → 0.1.0

package/compiler/salty-compiler.cjs

@@ -5,17 +5,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const esbuild = require("esbuild");
 const path = require("path");
-const logger = require("../logger-7xz0pyAz.cjs");
+const winston = require("winston");
 const promises = require("fs/promises");
 const fs = require("fs");
 const child_process = require("child_process");
 const compiler_helpers = require("./helpers.cjs");
+const toHash = require("../to-hash-DT2ImSPA.cjs");
 const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
-const dashCase = require("../dash-case-DIwKaYgE.cjs");
-const toHash = require("../to-hash-C05Y906F.cjs");
-const parseStyles = require("../parse-styles-C54MOrPg.cjs");
+const module$1 = require("module");
+const parseStyles = require("../parse-styles-BbI-2wdn.cjs");
 const css_merge = require("../css/merge.cjs");
-require("../css/dynamic-styles.cjs");
 const compiler_getFiles = require("./get-files.cjs");
 const parsers_index = require("../parsers/index.cjs");
 const console = require("console");
@@ -37,6 +36,62 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const esbuild__namespace = /* @__PURE__ */ _interopNamespaceDefault(esbuild);
+const logger = winston.createLogger({
+  level: "debug",
+  format: winston.format.combine(winston.format.colorize(), winston.format.cli()),
+  transports: [new winston.transports.Console({})]
+});
+const logError = (message) => {
+  logger.error(message);
+};
+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);
+};
+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) };
+};
 const readPackageJsonModule = async (dirname) => {
   const packageJsonContent = await compiler_getFiles.getPackageJson(dirname);
   if (!packageJsonContent) return void 0;
@@ -161,14 +216,6 @@ class SaltyCompiler {
       this.cache.destDir = destDir;
       return destDir;
     });
-    /**
-     * Absolute path to the `config-cache.json` written during `generateCss()`.
-     * Plugins read this to copy the file into the production bundle output.
-     */
-    __publicField(this, "getConfigCachePath", async () => {
-      const destDir = await this.getDestDir();
-      return path.join(destDir, "cache/config-cache.json");
-    });
     __publicField(this, "generateConfig", async () => {
       const rcProject = await this.getRCProjectConfig(this.projectRootDir);
       const destDir = await this.getDestDir();
@@ -202,7 +249,8 @@ ${currentFile}`;
       }
     });
     __publicField(this, "getConfigCache", async () => {
-      const coreConfigDest = await this.getConfigCachePath();
+      const destDir = await this.getDestDir();
+      const coreConfigDest = path.join(destDir, "cache/config-cache.json");
       const contents = fs.readFileSync(coreConfigDest, "utf8");
       if (!contents) throw new Error("Could not find config cache file");
       return JSON.parse(contents);
@@ -220,8 +268,8 @@ ${currentFile}`;
     __publicField(this, "generateCss", async (clean = true) => {
       try {
         const start = Date.now();
-        if (this.isProduction) logger.logger.info("Generating CSS in production mode! 🔥");
-        else logger.logger.info("Generating CSS in development mode! 🚀");
+        if (this.isProduction) logger.info("Generating CSS in production mode! 🔥");
+        else logger.info("Generating CSS in development mode! 🚀");
         const globalCssFiles = [];
         const cssFiles = [];
         const destDir = await this.getDestDir();
@@ -233,6 +281,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();
@@ -342,13 +391,13 @@ ${currentFile}`;
             const cssContent2 = localCssFile.map((file) => `@import url('./${file}');`).join("\n");
             const hashName = toHash.toHash(src, 6);
             const parsedPath = path.parse(src);
-            const dasherized = dashCase.dashCase(parsedPath.name);
+            const dasherized = toHash.dashCase(parsedPath.name);
             const cssFile2 = path.join(destDir, `css/f_${dasherized}-${hashName}.css`);
             fs.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 globalCssFilenames = ["_imports.css", "_variables.css", "_reset.css", "_global.css", "_templates.css", "_fonts.css"];
         const importsWithData = globalCssFilenames.filter((file) => {
           try {
             const data = fs.readFileSync(path.join(destDir, "css", file), "utf8");
@@ -357,9 +406,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, fonts, l0, l1, l2, l3, l4, l5, l6, l7, l8;
 
 ${globalImports.join(
           "\n"
@@ -393,7 +445,7 @@ ${css}
         const end = Date.now();
         const time = end - start;
         const emoji = time < 200 ? "🔥" : time < 500 ? "🚀" : time < 1e3 ? "🎉" : time < 2e3 ? "🚗" : time < 5e3 ? "🤔" : "🥴";
-        logger.logger.info(`Generated CSS in ${time}ms! ${emoji}`);
+        logger.info(`Generated CSS in ${time}ms! ${emoji}`);
       } catch (e) {
         console.error(e);
       }
@@ -405,7 +457,9 @@ ${css}
         mediaQueries: [],
         globalStyles: [],
         variables: [],
-        templates: []
+        templates: [],
+        imports: [],
+        fonts: []
       };
       await Promise.all(
         [...configFiles].map(async (src) => {
@@ -415,6 +469,8 @@ ${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));
+            else if (value.isDefineFont) generationResults.fonts.push(value);
           });
         })
       );
@@ -433,10 +489,10 @@ ${css}
             if (typeof value2 === "function") return await parseVariable(await value2());
             if (typeof value2 === "object") return await parseVariables(value2, [...path2, key]);
             const dottedKey = dotCase(key);
-            const dashedKey = dashCase.dashCase(key);
+            const dashedKey = toHash.dashCase(key);
             const tsName = [...path2, dottedKey].join(".");
             variableTokens.add(`"${tsName}"`);
-            const cssName = [...path2.map(dashCase.dashCase), dashedKey].join("-");
+            const cssName = [...path2.map(toHash.dashCase), dashedKey].join("-");
             const result = parseStyles.parseVariableTokens(value2);
             if (!result) return `--${cssName}: ${value2};`;
             return `--${cssName}: ${result.transformed};`;
@@ -511,32 +567,85 @@ ${css}
       const templates = css_merge.mergeObjects(config.templates, generationResults.templates);
       const templateStylesString = await parsers_index.parseTemplates(templates);
       const templateTokens = parsers_index.getTemplateTypes(templates);
+      const templateVariantMaps = parsers_index.getTemplateVariantMaps(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]));
+      const fontsStylesPath = path.join(destDir, "css/_fonts.css");
+      if (generationResults.fonts.length === 0) {
+        fs.writeFileSync(fontsStylesPath, "");
+      } else {
+        const fontImports = [];
+        const fontBodies = [];
+        for (const font of generationResults.fonts) {
+          const { imports, body } = font._toCss();
+          fontImports.push(...imports);
+          fontBodies.push(body);
+        }
+        const importBlock = fontImports.length ? `${fontImports.join("\n")}
+
+` : "";
+        fs.writeFileSync(fontsStylesPath, `${importBlock}@layer fonts { ${fontBodies.join(" ")} }`);
+      }
       const tsTokensPath = path.join(destDir, "types/css-tokens.d.ts");
       const tsVariableTokens = [...variableTokens].join("|");
+      const pascal = (str) => str.split(/[.\-_]/).filter(Boolean).map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+      const templateVariantMapEntries = Object.entries(templateVariantMaps);
+      const hasVariantMaps = templateVariantMapEntries.some(([, pathMap]) => Object.keys(pathMap).length > 0);
+      const tsTemplateVariantMap = hasVariantMaps ? `type TemplateVariantTokens = {
+        ${templateVariantMapEntries.filter(([, pathMap]) => Object.keys(pathMap).length > 0).map(([templateKey, pathMap]) => {
+        const pathEntries = Object.entries(pathMap).map(
+          ([dotPath, axes]) => `'${dotPath}': { ${Object.entries(axes).map(([axis, valueType]) => `${axis}?: ${valueType}`).join("; ")} }`
+        ).join(";\n          ");
+        return `${templateKey}: {
+          ${pathEntries}
+        }`;
+      }).join(";\n        ")}
+      }` : `type TemplateVariantTokens = Record<string, Record<string, Record<string, never>>>;`;
+      const tsTemplateVariantAliases = templateVariantMapEntries.flatMap(
+        ([templateKey, pathMap]) => Object.keys(pathMap).map((dotPath) => `type ${pascal(templateKey)}${pascal(dotPath)}Variants = TemplateVariantTokens['${templateKey}']['${dotPath}'];`)
+      ).join("\n      ");
       const tsTokensTypes = `
       // Variable types
-      type VariableTokens = ${tsVariableTokens || `''`}; 
+      type VariableTokens = ${tsVariableTokens || `''`};
       type PropertyValueToken = \`{\${VariableTokens}}\`;
-    
+
       // Template types
       type TemplateTokens = {
-        ${Object.entries(templateTokens).map(([key, value]) => `${key}?: ${value}`).join("\n")}
+        ${Object.entries(templateTokens).map(([key, value]) => {
+        if (!value || value === "any") return `${key}?: ${value || "any"}`;
+        return `${key}?: ${value} | \`\${${value}}@\${string}\``;
+      }).join("\n")}
       }
-    
+
+      // Template variant types (per docs/template-variants-spec.md §7)
+      ${tsTemplateVariantMap}
+      ${tsTemplateVariantAliases}
+
       // Media query types
       type MediaQueryKeys = ${mediaQueryKeys || `''`};
       `;
       fs.writeFileSync(tsTokensPath, tsTokensTypes);
-      const configCachePath = await this.getConfigCachePath();
+      const configCachePath = path.join(destDir, "cache/config-cache.json");
       fs.writeFileSync(configCachePath, JSON.stringify(configCacheContent, null, 2));
-      const corePackageRoot = compiler_helpers.getCorePackageRoot();
-      const configCacheSecondaryPath = path.join(corePackageRoot, "cache/config-cache.json");
-      fs.writeFileSync(configCacheSecondaryPath, JSON.stringify(configCacheContent, null, 2));
     });
     __publicField(this, "compileSaltyFile", async (sourceFilePath, outputDirectory) => {
       const hashedName = toHash.toHash(sourceFilePath);
@@ -665,7 +774,7 @@ ${newContent}
             const cssContent = cssFiles.flat().map((file2) => `@import url('./${file2}');`).join("\n");
             const hashName = toHash.toHash(file, 6);
             const parsedPath = path.parse(file);
-            const dasherized = dashCase.dashCase(parsedPath.name);
+            const dasherized = toHash.dashCase(parsedPath.name);
             const cssFile = path.join(destDir, `css/f_${dasherized}-${hashName}.css`);
             fs.writeFileSync(cssFile, cssContent || `/* Empty file */`);
           }
@@ -706,3 +815,5 @@ ${newContent}
   }
 }
 exports.SaltyCompiler = SaltyCompiler;
+exports.logError = logError;
+exports.logger = logger;

package/compiler/salty-compiler.d.ts

@@ -26,11 +26,6 @@ export declare class SaltyCompiler {
      * Caches the result to avoid redundant computations.
      */
     getDestDir: () => Promise<string>;
-    /**
-     * Absolute path to the `config-cache.json` written during `generateCss()`.
-     * Plugins read this to copy the file into the production bundle output.
-     */
-    getConfigCachePath: () => Promise<string>;
     private generateConfig;
     private addConfigCache;
     private getConfigCache;
@@ -49,6 +44,8 @@ export declare class SaltyCompiler {
                 isGlobalDefine?: boolean;
                 isDefineVariables?: boolean;
                 isDefineTemplates?: boolean;
+                isDefineImport?: boolean;
+                isDefineFont?: boolean;
                 isKeyframes?: boolean;
                 animationName?: string;
                 css?: Promise<string>;

package/compiler/salty-compiler.js

@@ -2,30 +2,85 @@ 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 * as esbuild from "esbuild";
-import { join, parse } from "path";
-import { l as logger } from "../logger-hHmCwThj.js";
+import { resolve, dirname, relative, join, basename, parse } from "path";
+import { createLogger, transports, format } from "winston";
 import { readFile } from "fs/promises";
-import { readFileSync, existsSync, mkdirSync, statSync, readdirSync, writeFileSync } from "fs";
+import { existsSync, mkdirSync, copyFileSync, readFileSync, statSync, readdirSync, writeFileSync } from "fs";
 import { execSync } from "child_process";
-import { isSaltyFile, resolveExportValue, getCorePackageRoot, saltyFileExtensions } from "./helpers.js";
+import { isSaltyFile, resolveExportValue, saltyFileExtensions } from "./helpers.js";
+import { t as toHash, d as dashCase } from "../to-hash-DSoCPs8D.js";
 import { d as defineTemplates } from "../define-templates-CVhhgPnd.js";
-import { d as dashCase } from "../dash-case-DblXvymC.js";
-import { t as toHash } from "../to-hash-DAN2LcHK.js";
-import { p as parseAndJoinStyles, b as parseVariableTokens } from "../parse-styles-CLMTHo2H.js";
+import { createRequire } from "module";
+import { p as parseAndJoinStyles, c as parseVariableTokens } from "../parse-styles-BgVqQAni.js";
 import { mergeObjects, mergeFactories } from "../css/merge.js";
-import "../css/dynamic-styles.js";
 import { getPackageJson } from "./get-files.js";
-import { parseTemplates, getTemplateTypes } from "../parsers/index.js";
+import { parseTemplates, getTemplateTypes, getTemplateVariantMaps } from "../parsers/index.js";
 import console from "console";
-const readPackageJsonModule = async (dirname) => {
-  const packageJsonContent = await getPackageJson(dirname);
+const logger = createLogger({
+  level: "debug",
+  format: format.combine(format.colorize(), format.cli()),
+  transports: [new transports.Console({})]
+});
+const logError = (message) => {
+  logger.error(message);
+};
+const EXTERNAL_URL = /^(?:[a-z][a-z0-9+.-]*:)?\/\//i;
+const normaliseSpec = (spec) => {
+  if (typeof spec === "string") return { url: spec };
+  return spec;
+};
+const ensureRelativePrefix = (path) => {
+  if (path.startsWith(".") || path.startsWith("/")) return path;
+  return `./${path}`;
+};
+const toPosix = (path) => path.split("\\").join("/");
+const defaultResolveModule = (specifier, sourceFile) => {
+  return createRequire(sourceFile).resolve(specifier);
+};
+const defaultCopyAsset = (from, to) => {
+  const dir = dirname(to);
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+  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 = resolve(dirname(sourceFile), url);
+    const fromImportsFile = relative(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(absolute, 6);
+  const fileName = `${hash}-${basename(absolute)}`;
+  const destPath = join(destDir, "imports", fileName);
+  copyAsset(absolute, destPath);
+  return { rule: buildRule(`../imports/${fileName}`, opts) };
+};
+const readPackageJsonModule = async (dirname2) => {
+  const packageJsonContent = await getPackageJson(dirname2);
   if (!packageJsonContent) return void 0;
   return packageJsonContent.type;
 };
 let cachedModuleType;
-const detectCurrentModuleType = async (dirname) => {
+const detectCurrentModuleType = async (dirname2) => {
   if (cachedModuleType) return cachedModuleType;
-  const packageJsonModule = await readPackageJsonModule(dirname);
+  const packageJsonModule = await readPackageJsonModule(dirname2);
   if (packageJsonModule === "module") cachedModuleType = "esm";
   else if (packageJsonModule === "commonjs") cachedModuleType = "cjs";
   else if (import.meta.url.endsWith(".cjs")) cachedModuleType = "cjs";
@@ -114,10 +169,10 @@ class SaltyCompiler {
      * Get the project configuration from the .saltyrc.json file based on the current directory.
      * If no specific project configuration is found, it falls back to the default project.
      */
-    __publicField(this, "getRCProjectConfig", async (dirname) => {
+    __publicField(this, "getRCProjectConfig", async (dirname2) => {
       var _a, _b;
-      const rcFile = await this.readRCFile(dirname);
-      const projectConfig = (_a = rcFile.projects) == null ? void 0 : _a.find((project) => dirname.endsWith(project.dir || ""));
+      const rcFile = await this.readRCFile(dirname2);
+      const projectConfig = (_a = rcFile.projects) == null ? void 0 : _a.find((project) => dirname2.endsWith(project.dir || ""));
       if (!projectConfig) return (_b = rcFile.projects) == null ? void 0 : _b.find((project) => project.dir === rcFile.defaultProject);
       return projectConfig;
     });
@@ -141,14 +196,6 @@ class SaltyCompiler {
       this.cache.destDir = destDir;
       return destDir;
     });
-    /**
-     * Absolute path to the `config-cache.json` written during `generateCss()`.
-     * Plugins read this to copy the file into the production bundle output.
-     */
-    __publicField(this, "getConfigCachePath", async () => {
-      const destDir = await this.getDestDir();
-      return join(destDir, "cache/config-cache.json");
-    });
     __publicField(this, "generateConfig", async () => {
       const rcProject = await this.getRCProjectConfig(this.projectRootDir);
       const destDir = await this.getDestDir();
@@ -182,7 +229,8 @@ ${currentFile}`;
       }
     });
     __publicField(this, "getConfigCache", async () => {
-      const coreConfigDest = await this.getConfigCachePath();
+      const destDir = await this.getDestDir();
+      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);
@@ -213,6 +261,7 @@ ${currentFile}`;
           mkdirSync(join(destDir, "types"));
           mkdirSync(join(destDir, "js"));
           mkdirSync(join(destDir, "cache"));
+          mkdirSync(join(destDir, "imports"));
         };
         if (clean) clearDistDir();
         const files = /* @__PURE__ */ new Set();
@@ -328,7 +377,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", "_fonts.css"];
         const importsWithData = globalCssFilenames.filter((file) => {
           try {
             const data = readFileSync(join(destDir, "css", file), "utf8");
@@ -337,9 +386,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, fonts, l0, l1, l2, l3, l4, l5, l6, l7, l8;
 
 ${globalImports.join(
           "\n"
@@ -385,7 +437,9 @@ ${css}
         mediaQueries: [],
         globalStyles: [],
         variables: [],
-        templates: []
+        templates: [],
+        imports: [],
+        fonts: []
       };
       await Promise.all(
         [...configFiles].map(async (src) => {
@@ -395,6 +449,8 @@ ${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));
+            else if (value.isDefineFont) generationResults.fonts.push(value);
           });
         })
       );
@@ -491,32 +547,85 @@ ${css}
       const templates = mergeObjects(config.templates, generationResults.templates);
       const templateStylesString = await parseTemplates(templates);
       const templateTokens = getTemplateTypes(templates);
+      const templateVariantMaps = getTemplateVariantMaps(templates);
       writeFileSync(templateStylesPath, `@layer templates { ${templateStylesString} }`);
       configCacheContent.templates = templates;
+      const importsPath = 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}`);
+          }
+        }
+      }
+      writeFileSync(importsPath, importRules.join("\n"));
       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 fontsStylesPath = join(destDir, "css/_fonts.css");
+      if (generationResults.fonts.length === 0) {
+        writeFileSync(fontsStylesPath, "");
+      } else {
+        const fontImports = [];
+        const fontBodies = [];
+        for (const font of generationResults.fonts) {
+          const { imports, body } = font._toCss();
+          fontImports.push(...imports);
+          fontBodies.push(body);
+        }
+        const importBlock = fontImports.length ? `${fontImports.join("\n")}
+
+` : "";
+        writeFileSync(fontsStylesPath, `${importBlock}@layer fonts { ${fontBodies.join(" ")} }`);
+      }
       const tsTokensPath = join(destDir, "types/css-tokens.d.ts");
       const tsVariableTokens = [...variableTokens].join("|");
+      const pascal = (str) => str.split(/[.\-_]/).filter(Boolean).map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+      const templateVariantMapEntries = Object.entries(templateVariantMaps);
+      const hasVariantMaps = templateVariantMapEntries.some(([, pathMap]) => Object.keys(pathMap).length > 0);
+      const tsTemplateVariantMap = hasVariantMaps ? `type TemplateVariantTokens = {
+        ${templateVariantMapEntries.filter(([, pathMap]) => Object.keys(pathMap).length > 0).map(([templateKey, pathMap]) => {
+        const pathEntries = Object.entries(pathMap).map(
+          ([dotPath, axes]) => `'${dotPath}': { ${Object.entries(axes).map(([axis, valueType]) => `${axis}?: ${valueType}`).join("; ")} }`
+        ).join(";\n          ");
+        return `${templateKey}: {
+          ${pathEntries}
+        }`;
+      }).join(";\n        ")}
+      }` : `type TemplateVariantTokens = Record<string, Record<string, Record<string, never>>>;`;
+      const tsTemplateVariantAliases = templateVariantMapEntries.flatMap(
+        ([templateKey, pathMap]) => Object.keys(pathMap).map((dotPath) => `type ${pascal(templateKey)}${pascal(dotPath)}Variants = TemplateVariantTokens['${templateKey}']['${dotPath}'];`)
+      ).join("\n      ");
       const tsTokensTypes = `
       // Variable types
-      type VariableTokens = ${tsVariableTokens || `''`}; 
+      type VariableTokens = ${tsVariableTokens || `''`};
       type PropertyValueToken = \`{\${VariableTokens}}\`;
-    
+
       // Template types
       type TemplateTokens = {
-        ${Object.entries(templateTokens).map(([key, value]) => `${key}?: ${value}`).join("\n")}
+        ${Object.entries(templateTokens).map(([key, value]) => {
+        if (!value || value === "any") return `${key}?: ${value || "any"}`;
+        return `${key}?: ${value} | \`\${${value}}@\${string}\``;
+      }).join("\n")}
       }
-    
+
+      // Template variant types (per docs/template-variants-spec.md §7)
+      ${tsTemplateVariantMap}
+      ${tsTemplateVariantAliases}
+
       // Media query types
       type MediaQueryKeys = ${mediaQueryKeys || `''`};
       `;
       writeFileSync(tsTokensPath, tsTokensTypes);
-      const configCachePath = await this.getConfigCachePath();
+      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));
     });
     __publicField(this, "compileSaltyFile", async (sourceFilePath, outputDirectory) => {
       const hashedName = toHash(sourceFilePath);
@@ -686,5 +795,7 @@ ${newContent}
   }
 }
 export {
-  SaltyCompiler
+  SaltyCompiler,
+  logError as a,
+  logger as l
 };

package/config/index.cjs

@@ -5,9 +5,13 @@ const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
 const defineConfig = (config) => {
   return config;
 };
+exports.FontFactory = factories_index.FontFactory;
 exports.GlobalStylesFactory = factories_index.GlobalStylesFactory;
+exports.ImportFactory = factories_index.ImportFactory;
 exports.VariablesFactory = factories_index.VariablesFactory;
+exports.defineFont = factories_index.defineFont;
 exports.defineGlobalStyles = factories_index.defineGlobalStyles;
+exports.defineImport = factories_index.defineImport;
 exports.defineMediaQuery = factories_index.defineMediaQuery;
 exports.defineVariables = factories_index.defineVariables;
 exports.TemplateFactory = defineTemplates.TemplateFactory;

package/config/index.js

@@ -1,15 +1,19 @@
-import { GlobalStylesFactory, VariablesFactory, defineGlobalStyles, defineMediaQuery, defineVariables } from "../factories/index.js";
+import { FontFactory, GlobalStylesFactory, ImportFactory, VariablesFactory, defineFont, defineGlobalStyles, defineImport, defineMediaQuery, defineVariables } from "../factories/index.js";
 import { T, a, d } from "../define-templates-CVhhgPnd.js";
 const defineConfig = (config) => {
   return config;
 };
 export {
+  FontFactory,
   GlobalStylesFactory,
+  ImportFactory,
   T as TemplateFactory,
   a as TemplatesFactory,
   VariablesFactory,
   defineConfig,
+  defineFont,
   defineGlobalStyles,
+  defineImport,
   defineMediaQuery,
   d as defineTemplates,
   defineVariables