@salty-css/core 0.1.0-feat-define-import.0 → 0.1.0-feat-template-variants.0

package/README.md

@@ -57,7 +57,6 @@ To get help with problems, [Join Salty CSS Discord server](https://discord.gg/R6
 - [defineVariables](#variables) - create CSS variables (tokens) that can be used in any styling function
 - [defineMediaQuery](#media-queries) - create CSS media queries and use them in any styling function
 - [defineTemplates](#templates) - create reusable templates that can be applied when same styles are used over and over again
-- [defineImport](#importing-additional-css) - pull in external CSS files (relative, public, node_modules, or URL)
 - [keyframes](#keyframes-animations) - create CSS keyframes animation that can be used and imported in any styling function
 
 ### Styling helpers & utility
@@ -320,49 +319,6 @@ Example usage:
 styled('div', { base: { textStyle: 'headline.large', card: '20px' } });
 ```
 
-## Importing additional CSS
-
-Use `defineImport` to pull in CSS that lives outside of Salty's authoring API — a reset stylesheet from npm, a Google Fonts URL, an asset in your app's `public/` folder, or a sibling `.css` file. The compiler turns each spec into an `@import` rule in the generated `saltygen/index.css`, so the imported stylesheets travel with the rest of your build.
-
-```ts
-// /styles/imports.css.ts
-import { defineImport } from '@salty-css/core/factories';
-
-export default defineImport(
-  // Relative to this file
-  './reset.css',
-  // From node_modules (bare specifier — same as Vite / native CSS @import)
-  'modern-normalize/modern-normalize.css',
-  // From node_modules (~ prefix — same resolver, webpack-style)
-  '~normalize.css/normalize.css',
-  // From your app's public/ folder (served at the host root)
-  '/fonts/inter.css',
-  // External URL
-  'https://fonts.googleapis.com/css2?family=Inter&display=swap',
-  // Object form — attach media or supports() conditions
-  { url: './print.css', media: 'print' },
-  { url: './p3.css', supports: 'color(display-p3 1 1 1)' }
-);
-```
-
-Path resolution:
-
-| Pattern                     | Behaviour                                                                                |
-| --------------------------- | ---------------------------------------------------------------------------------------- |
-| `http://`, `https://`, `//` | Emitted verbatim                                                                         |
-| Starts with `/`             | Public-folder URL — emitted verbatim, the browser resolves it against your host          |
-| Starts with `./` or `../`   | Resolved at build time relative to the file that called `defineImport`                   |
-| `~package/file.css`         | Stripped of the leading `~`, then resolved from `node_modules` and copied into the build |
-| `package/file.css` (bare)   | Same `node_modules` resolution as the `~` form                                           |
-
-All imports are placed inside a new `imports` cascade layer that sits **before** `reset`, `global`, `templates`, and your component styles. This means your own styles always win over third-party CSS you pull in — which is what most teams expect when they drop in something like `modern-normalize`.
-
-The full layer order in the generated `index.css` is:
-
-```css
-@layer imports, reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
-```
-
 ## Keyframes animations
 
 ```ts

package/{class-name-generator-CMWY5KTJ.js → class-name-generator-Bk5QMTEg.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-CLMTHo2H.js";
+import { p as parseAndJoinStyles } from "./parse-styles-DSyVPjDG.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-DB5aQwC_.cjs → class-name-generator-DtC44Fgz.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-C54MOrPg.cjs");
+const parseStyles = require("./parse-styles-DxyVq07D.cjs");
 const dashCase = require("./dash-case-DIwKaYgE.cjs");
 const toHash = require("./to-hash-C05Y906F.cjs");
 class StylesGenerator {

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 module$1 = require("module");
-const toHash = require("../to-hash-C05Y906F.cjs");
 const dashCase = require("../dash-case-DIwKaYgE.cjs");
-const parseStyles = require("../parse-styles-C54MOrPg.cjs");
+const toHash = require("../to-hash-C05Y906F.cjs");
+const parseStyles = require("../parse-styles-DxyVq07D.cjs");
 const css_merge = require("../css/merge.cjs");
 const parsers_index = require("../parsers/index.cjs");
-const moduleType = require("../util/module-type");
+const compiler_getFiles = require("./get-files.cjs");
 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,53 +44,19 @@ const logger = winston.createLogger({
 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 readPackageJsonModule = async (dirname) => {
+  const packageJsonContent = await compiler_getFiles.getPackageJson(dirname);
+  if (!packageJsonContent) return void 0;
+  return packageJsonContent.type;
 };
-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) };
+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";
 };
 function dotCase(str) {
   if (!str) return "";
@@ -207,7 +173,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$1 = await moduleType.detectCurrentModuleType(this.projectRootDir);
+      const moduleType = await detectCurrentModuleType(this.projectRootDir);
       const externalModules = this.getExternalModules(coreConfigPath);
       await esbuild__namespace.build({
         entryPoints: [coreConfigPath],
@@ -215,7 +181,7 @@ class SaltyCompiler {
         treeShaking: true,
         bundle: true,
         outfile: coreConfigDest,
-        format: moduleType$1,
+        format: moduleType,
         external: externalModules
       });
       const { config } = await this.importFile(coreConfigDest);
@@ -267,7 +233,6 @@ ${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();
@@ -383,7 +348,7 @@ ${currentFile}`;
           });
         }
         const otherGlobalCssFiles = globalCssFiles.map((file) => `@import url('./css/${file}');`).join("\n");
-        const globalCssFilenames = ["_imports.css", "_variables.css", "_reset.css", "_global.css", "_templates.css"];
+        const globalCssFilenames = ["_variables.css", "_reset.css", "_global.css", "_templates.css"];
         const importsWithData = globalCssFilenames.filter((file) => {
           try {
             const data = fs.readFileSync(path.join(destDir, "css", file), "utf8");
@@ -392,12 +357,9 @@ ${currentFile}`;
             return false;
           }
         });
-        const globalImports = importsWithData.map((file) => {
-          const layerSuffix = file === "_imports.css" ? " layer(imports)" : "";
-          return `@import url('./css/${file}')${layerSuffix};`;
-        });
+        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 imports, reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
+        let cssContent = `${generatorText}@layer reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
 
 ${globalImports.join(
           "\n"
@@ -443,8 +405,7 @@ ${css}
         mediaQueries: [],
         globalStyles: [],
         variables: [],
-        templates: [],
-        imports: []
+        templates: []
       };
       await Promise.all(
         [...configFiles].map(async (src) => {
@@ -454,7 +415,6 @@ ${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));
           });
         })
       );
@@ -551,39 +511,46 @@ ${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 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")}
       }
-    
+
+      // Template variant types (per docs/template-variants-spec.md §7)
+      ${tsTemplateVariantMap}
+      ${tsTemplateVariantAliases}
+
       // Media query types
       type MediaQueryKeys = ${mediaQueryKeys || `''`};
       `;
@@ -607,7 +574,7 @@ ${css}
       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$1 = await moduleType.detectCurrentModuleType(this.projectRootDir);
+      const moduleType = await detectCurrentModuleType(this.projectRootDir);
       await esbuild__namespace.build({
         stdin: {
           contents: currentFile,
@@ -619,7 +586,7 @@ ${css}
         treeShaking: true,
         bundle: true,
         outfile: outputFilePath,
-        format: moduleType$1,
+        format: moduleType,
         target: ["node20"],
         keepNames: true,
         external: externalModules,

package/compiler/salty-compiler.d.ts

@@ -44,7 +44,6 @@ export declare class SaltyCompiler {
                 isGlobalDefine?: boolean;
                 isDefineVariables?: boolean;
                 isDefineTemplates?: boolean;
-                isDefineImport?: boolean;
                 isKeyframes?: boolean;
                 animationName?: string;
                 css?: Promise<string>;

package/compiler/salty-compiler.js

@@ -2,20 +2,19 @@ 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 { resolve, dirname, relative, join, basename, parse } from "path";
+import { join, parse } from "path";
 import { createLogger, transports, format } from "winston";
 import { readFile } from "fs/promises";
-import { existsSync, mkdirSync, copyFileSync, readFileSync, statSync, readdirSync, writeFileSync } from "fs";
+import { readFileSync, existsSync, mkdirSync, statSync, readdirSync, writeFileSync } from "fs";
 import { execSync } from "child_process";
 import { isSaltyFile, resolveExportValue, getCorePackageRoot, saltyFileExtensions } from "./helpers.js";
 import { d as defineTemplates } from "../define-templates-CVhhgPnd.js";
-import { createRequire } from "module";
-import { t as toHash } from "../to-hash-DAN2LcHK.js";
 import { d as dashCase } from "../dash-case-DblXvymC.js";
-import { p as parseAndJoinStyles, b as parseVariableTokens } from "../parse-styles-CLMTHo2H.js";
+import { t as toHash } from "../to-hash-DAN2LcHK.js";
+import { p as parseAndJoinStyles, b as parseVariableTokens } from "../parse-styles-DSyVPjDG.js";
 import { mergeObjects, mergeFactories } from "../css/merge.js";
-import { parseTemplates, getTemplateTypes } from "../parsers/index.js";
-import { detectCurrentModuleType } from "../util/module-type";
+import { parseTemplates, getTemplateTypes, getTemplateVariantMaps } from "../parsers/index.js";
+import { getPackageJson } from "./get-files.js";
 import console from "console";
 const logger = createLogger({
   level: "debug",
@@ -25,53 +24,19 @@ const logger = createLogger({
 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 readPackageJsonModule = async (dirname) => {
+  const packageJsonContent = await getPackageJson(dirname);
+  if (!packageJsonContent) return void 0;
+  return packageJsonContent.type;
 };
-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) };
+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";
 };
 function dotCase(str) {
   if (!str) return "";
@@ -156,10 +121,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 (dirname2) => {
+    __publicField(this, "getRCProjectConfig", async (dirname) => {
       var _a, _b;
-      const rcFile = await this.readRCFile(dirname2);
-      const projectConfig = (_a = rcFile.projects) == null ? void 0 : _a.find((project) => dirname2.endsWith(project.dir || ""));
+      const rcFile = await this.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;
     });
@@ -248,7 +213,6 @@ ${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();
@@ -364,7 +328,7 @@ ${currentFile}`;
           });
         }
         const otherGlobalCssFiles = globalCssFiles.map((file) => `@import url('./css/${file}');`).join("\n");
-        const globalCssFilenames = ["_imports.css", "_variables.css", "_reset.css", "_global.css", "_templates.css"];
+        const globalCssFilenames = ["_variables.css", "_reset.css", "_global.css", "_templates.css"];
         const importsWithData = globalCssFilenames.filter((file) => {
           try {
             const data = readFileSync(join(destDir, "css", file), "utf8");
@@ -373,12 +337,9 @@ ${currentFile}`;
             return false;
           }
         });
-        const globalImports = importsWithData.map((file) => {
-          const layerSuffix = file === "_imports.css" ? " layer(imports)" : "";
-          return `@import url('./css/${file}')${layerSuffix};`;
-        });
+        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 imports, reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
+        let cssContent = `${generatorText}@layer reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
 
 ${globalImports.join(
           "\n"
@@ -424,8 +385,7 @@ ${css}
         mediaQueries: [],
         globalStyles: [],
         variables: [],
-        templates: [],
-        imports: []
+        templates: []
       };
       await Promise.all(
         [...configFiles].map(async (src) => {
@@ -435,7 +395,6 @@ ${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));
           });
         })
       );
@@ -532,39 +491,46 @@ ${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 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")}
       }
-    
+
+      // Template variant types (per docs/template-variants-spec.md §7)
+      ${tsTemplateVariantMap}
+      ${tsTemplateVariantAliases}
+
       // Media query types
       type MediaQueryKeys = ${mediaQueryKeys || `''`};
       `;

package/config/index.cjs

@@ -6,10 +6,8 @@ const defineConfig = (config) => {
   return config;
 };
 exports.GlobalStylesFactory = factories_index.GlobalStylesFactory;
-exports.ImportFactory = factories_index.ImportFactory;
 exports.VariablesFactory = factories_index.VariablesFactory;
 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,17 +1,15 @@
-import { GlobalStylesFactory, ImportFactory, VariablesFactory, defineGlobalStyles, defineImport, defineMediaQuery, defineVariables } from "../factories/index.js";
+import { GlobalStylesFactory, VariablesFactory, defineGlobalStyles, defineMediaQuery, defineVariables } from "../factories/index.js";
 import { T, a, d } from "../define-templates-CVhhgPnd.js";
 const defineConfig = (config) => {
   return config;
 };
 export {
   GlobalStylesFactory,
-  ImportFactory,
   T as TemplateFactory,
   a as TemplatesFactory,
   VariablesFactory,
   defineConfig,
   defineGlobalStyles,
-  defineImport,
   defineMediaQuery,
   d as defineTemplates,
   defineVariables

package/css/dynamic-styles.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-C54MOrPg.cjs");
+const parseStyles = require("../parse-styles-DxyVq07D.cjs");
 const toHash = require("../to-hash-C05Y906F.cjs");
 const cache_resolveDynamicConfigCache = require("../cache/resolve-dynamic-config-cache.cjs");
 const getDynamicStylesClassName = (styles) => {

package/css/dynamic-styles.js

@@ -1,4 +1,4 @@
-import { a as parseStyles } from "../parse-styles-CLMTHo2H.js";
+import { a as parseStyles } from "../parse-styles-DSyVPjDG.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
 import { resolveDynamicConfigCache } from "../cache/resolve-dynamic-config-cache.js";
 const getDynamicStylesClassName = (styles) => {

package/css/keyframes.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-C54MOrPg.cjs");
+const parseStyles = require("../parse-styles-DxyVq07D.cjs");
 const toHash = require("../to-hash-C05Y906F.cjs");
 const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
   const modifyKeyframes = async (params = {}) => {

package/css/keyframes.js

@@ -1,4 +1,4 @@
-import { p as parseAndJoinStyles } from "../parse-styles-CLMTHo2H.js";
+import { p as parseAndJoinStyles } from "../parse-styles-DSyVPjDG.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
 const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
   const modifyKeyframes = async (params = {}) => {

package/factories/index.cjs

@@ -1,7 +1,4 @@
 "use strict";
-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);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const css_media = require("../css/media.cjs");
 const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
@@ -16,20 +13,6 @@ class GlobalStylesFactory {
 const defineGlobalStyles = (styles) => {
   return new GlobalStylesFactory(styles);
 };
-class ImportFactory {
-  constructor(_current) {
-    __publicField(this, "_path");
-    this._current = _current;
-  }
-  get isDefineImport() {
-    return true;
-  }
-  _setPath(path) {
-    this._path = path;
-    return this;
-  }
-}
-const defineImport = (...specs) => new ImportFactory(specs);
 const defineMediaQuery = (mediaFactory) => {
   return mediaFactory(css_media.media);
 };
@@ -48,9 +31,7 @@ exports.TemplateFactory = defineTemplates.TemplateFactory;
 exports.TemplatesFactory = defineTemplates.TemplatesFactory;
 exports.defineTemplates = defineTemplates.defineTemplates;
 exports.GlobalStylesFactory = GlobalStylesFactory;
-exports.ImportFactory = ImportFactory;
 exports.VariablesFactory = VariablesFactory;
 exports.defineGlobalStyles = defineGlobalStyles;
-exports.defineImport = defineImport;
 exports.defineMediaQuery = defineMediaQuery;
 exports.defineVariables = defineVariables;