@salty-css/core 0.1.0-alpha.28 → 0.1.0-alpha.30

package/{class-name-generator-zQ8zLbPI.js → class-name-generator-B0WkxoIg.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-CtA-RKqt.js";
+import { p as parseAndJoinStyles, b as parseTemplateCallSite } from "./parse-styles-BBJ3PWyV.js";
 import { d as dashCase } from "./dash-case-DblXvymC.js";
 import { t as toHash } from "./to-hash-DAN2LcHK.js";
 class StylesGenerator {
@@ -50,7 +50,22 @@ class StylesGenerator {
     if (!(config == null ? void 0 : config.templates) || !this.params.base || this.priority > 0) return [];
     const templateKeys = Object.keys(config.templates);
     return Object.entries(this.params.base).reduce((acc, [key, value]) => {
-      if (templateKeys.includes(key)) acc.push("t_" + toHash(dashCase(`${key}-${value}`), 4));
+      if (!templateKeys.includes(key)) return acc;
+      const callSite = parseTemplateCallSite(value);
+      if (!callSite || callSite.path.length === 0) return acc;
+      const { path, variants } = callSite;
+      const cumulative = [];
+      for (const part of path) {
+        cumulative.push(part);
+        const baseClassName = dashCase(`${key}-${cumulative.join(".")}`);
+        acc.push("t_" + toHash(baseClassName, 4));
+        for (const [axis, axisValue] of Object.entries(variants)) {
+          if (axisValue === false || axisValue === void 0) continue;
+          const valueSuffix = axisValue === true ? "" : `-${dashCase(String(axisValue))}`;
+          const variantClassName = `${baseClassName}-${dashCase(axis)}${valueSuffix}`;
+          acc.push("tv_" + toHash(variantClassName, 4));
+        }
+      }
       return acc;
     }, []);
   }

package/{class-name-generator-DZcz_NT4.cjs → class-name-generator-BEOEMEKX.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-BFoV7HiL.cjs");
+const parseStyles = require("./parse-styles-lOMGe_c5.cjs");
 const dashCase = require("./dash-case-DIwKaYgE.cjs");
 const toHash = require("./to-hash-C05Y906F.cjs");
 class StylesGenerator {
@@ -51,7 +51,22 @@ class StylesGenerator {
     if (!(config == null ? void 0 : config.templates) || !this.params.base || this.priority > 0) return [];
     const templateKeys = Object.keys(config.templates);
     return Object.entries(this.params.base).reduce((acc, [key, value]) => {
-      if (templateKeys.includes(key)) acc.push("t_" + toHash.toHash(dashCase.dashCase(`${key}-${value}`), 4));
+      if (!templateKeys.includes(key)) return acc;
+      const callSite = parseStyles.parseTemplateCallSite(value);
+      if (!callSite || callSite.path.length === 0) return acc;
+      const { path, variants } = callSite;
+      const cumulative = [];
+      for (const part of path) {
+        cumulative.push(part);
+        const baseClassName = dashCase.dashCase(`${key}-${cumulative.join(".")}`);
+        acc.push("t_" + toHash.toHash(baseClassName, 4));
+        for (const [axis, axisValue] of Object.entries(variants)) {
+          if (axisValue === false || axisValue === void 0) continue;
+          const valueSuffix = axisValue === true ? "" : `-${dashCase.dashCase(String(axisValue))}`;
+          const variantClassName = `${baseClassName}-${dashCase.dashCase(axis)}${valueSuffix}`;
+          acc.push("tv_" + toHash.toHash(variantClassName, 4));
+        }
+      }
       return acc;
     }, []);
   }

package/compiler/salty-compiler.cjs

@@ -14,7 +14,7 @@ const dashCase = require("../dash-case-DIwKaYgE.cjs");
 const toHash = require("../to-hash-C05Y906F.cjs");
 const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
 const module$1 = require("module");
-const parseStyles = require("../parse-styles-BFoV7HiL.cjs");
+const parseStyles = require("../parse-styles-lOMGe_c5.cjs");
 const css_merge = require("../css/merge.cjs");
 const parsers_index = require("../parsers/index.cjs");
 const moduleType = require("../util/module-type");
@@ -607,9 +607,7 @@ ${css}
       }).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}'];`
-        )
+        ([templateKey, pathMap]) => Object.keys(pathMap).map((dotPath) => `type ${pascal(templateKey)}${pascal(dotPath)}Variants = TemplateVariantTokens['${templateKey}']['${dotPath}'];`)
       ).join("\n      ");
       const tsTokensTypes = `
       // Variable types
@@ -618,7 +616,10 @@ ${css}
 
       // 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)

package/compiler/salty-compiler.js

@@ -12,7 +12,7 @@ import { d as dashCase } from "../dash-case-DblXvymC.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
 import { d as defineTemplates } from "../define-templates-CVhhgPnd.js";
 import { createRequire } from "module";
-import { p as parseAndJoinStyles, b as parseVariableTokens } from "../parse-styles-CtA-RKqt.js";
+import { p as parseAndJoinStyles, c as parseVariableTokens } from "../parse-styles-BBJ3PWyV.js";
 import { mergeObjects, mergeFactories } from "../css/merge.js";
 import { parseTemplates, getTemplateTypes, getTemplateVariantMaps } from "../parsers/index.js";
 import { detectCurrentModuleType } from "../util/module-type";
@@ -588,9 +588,7 @@ ${css}
       }).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}'];`
-        )
+        ([templateKey, pathMap]) => Object.keys(pathMap).map((dotPath) => `type ${pascal(templateKey)}${pascal(dotPath)}Variants = TemplateVariantTokens['${templateKey}']['${dotPath}'];`)
       ).join("\n      ");
       const tsTokensTypes = `
       // Variable types
@@ -599,7 +597,10 @@ ${css}
 
       // 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)

package/css/dynamic-styles.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-BFoV7HiL.cjs");
+const parseStyles = require("../parse-styles-lOMGe_c5.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-CtA-RKqt.js";
+import { a as parseStyles } from "../parse-styles-BBJ3PWyV.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-BFoV7HiL.cjs");
+const parseStyles = require("../parse-styles-lOMGe_c5.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-CtA-RKqt.js";
+import { p as parseAndJoinStyles } from "../parse-styles-BBJ3PWyV.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
 const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
   const modifyKeyframes = async (params = {}) => {

package/generators/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classNameGenerator = require("../class-name-generator-DZcz_NT4.cjs");
+const classNameGenerator = require("../class-name-generator-BEOEMEKX.cjs");
 const dashCase = require("../dash-case-DIwKaYgE.cjs");
 class StyledGenerator extends classNameGenerator.StylesGenerator {
   constructor(tagName, _params) {

package/generators/index.js

@@ -1,5 +1,5 @@
-import { S as StylesGenerator } from "../class-name-generator-zQ8zLbPI.js";
-import { C } from "../class-name-generator-zQ8zLbPI.js";
+import { S as StylesGenerator } from "../class-name-generator-B0WkxoIg.js";
+import { C } from "../class-name-generator-B0WkxoIg.js";
 import { d as dashCase } from "../dash-case-DblXvymC.js";
 class StyledGenerator extends StylesGenerator {
   constructor(tagName, _params) {

package/instances/classname-instance.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classNameGenerator = require("../class-name-generator-DZcz_NT4.cjs");
+const classNameGenerator = require("../class-name-generator-BEOEMEKX.cjs");
 const classNameInstance = (params) => {
   const generator = new classNameGenerator.ClassNameGenerator(params);
   const createClass = (classNameStr) => {

package/instances/classname-instance.js

@@ -1,4 +1,4 @@
-import { C as ClassNameGenerator } from "../class-name-generator-zQ8zLbPI.js";
+import { C as ClassNameGenerator } from "../class-name-generator-B0WkxoIg.js";
 const classNameInstance = (params) => {
   const generator = new ClassNameGenerator(params);
   const createClass = (classNameStr) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/core",
-  "version": "0.1.0-alpha.28",
+  "version": "0.1.0-alpha.30",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",

package/{parse-styles-CtA-RKqt.js → parse-styles-BBJ3PWyV.js}

@@ -504,9 +504,10 @@ const combineSelectors = (currentScope, key) => {
 };
 export {
   parseStyles as a,
-  parseVariableTokens as b,
-  parseValueModifiers as c,
-  parseValueTokens as d,
+  parseTemplateCallSite as b,
+  parseVariableTokens as c,
+  parseValueModifiers as d,
+  parseValueTokens as e,
   isRichTemplateNode as i,
   parseAndJoinStyles as p,
   reportParserIssue as r

package/{parse-styles-BFoV7HiL.cjs → parse-styles-lOMGe_c5.cjs}

@@ -506,6 +506,7 @@ const combineSelectors = (currentScope, key) => {
 exports.isRichTemplateNode = isRichTemplateNode;
 exports.parseAndJoinStyles = parseAndJoinStyles;
 exports.parseStyles = parseStyles;
+exports.parseTemplateCallSite = parseTemplateCallSite;
 exports.parseValueModifiers = parseValueModifiers;
 exports.parseValueTokens = parseValueTokens;
 exports.parseVariableTokens = parseVariableTokens;

package/parsers/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-BFoV7HiL.cjs");
+const parseStyles = require("../parse-styles-lOMGe_c5.cjs");
 const dashCase = require("../dash-case-DIwKaYgE.cjs");
 const toHash = require("../to-hash-C05Y906F.cjs");
 const RICH_META_KEYS = /* @__PURE__ */ new Set(["base", "variants", "defaultVariants", "compoundVariants", "anyOfVariants"]);
@@ -13,12 +13,24 @@ const parseTemplates = async (obj, path = []) => {
   const classes = [];
   if (parseStyles.isRichTemplateNode(obj)) {
     const rich = obj;
+    const baseClassName = path.map((p) => dashCase.dashCase(String(p))).join("-");
     if (rich.base) {
-      const className = path.map((p) => dashCase.dashCase(String(p))).join("-");
-      const hashClass = "t_" + toHash.toHash(className, 4);
-      const result = await parseStyles.parseAndJoinStyles(rich.base, `.${className}, .${hashClass}`);
+      const hashClass = "t_" + toHash.toHash(baseClassName, 4);
+      const result = await parseStyles.parseAndJoinStyles(rich.base, `.${baseClassName}, .${hashClass}`);
       classes.push(result);
     }
+    if (rich.variants) {
+      for (const [axis, valueMap] of Object.entries(rich.variants)) {
+        if (!valueMap || typeof valueMap !== "object") continue;
+        for (const [value, styles] of Object.entries(valueMap)) {
+          if (!styles || typeof styles !== "object") continue;
+          const variantClassName = `${baseClassName}-${dashCase.dashCase(axis)}-${dashCase.dashCase(value)}`;
+          const variantHashClass = "tv_" + toHash.toHash(variantClassName, 4);
+          const result = await parseStyles.parseAndJoinStyles(styles, `.${variantClassName}, .${variantHashClass}`);
+          classes.push(result);
+        }
+      }
+    }
     for (const [key, value] of Object.entries(rich)) {
       if (!isChildEntry(key, value)) continue;
       const result = await parseTemplates(value, [...path, key.trim()]);

package/parsers/index.js

@@ -1,5 +1,5 @@
-import { i as isRichTemplateNode, p as parseAndJoinStyles } from "../parse-styles-CtA-RKqt.js";
-import { a, c, d, b, r } from "../parse-styles-CtA-RKqt.js";
+import { i as isRichTemplateNode, p as parseAndJoinStyles } from "../parse-styles-BBJ3PWyV.js";
+import { a, d, e, c, r } from "../parse-styles-BBJ3PWyV.js";
 import { d as dashCase } from "../dash-case-DblXvymC.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
 const RICH_META_KEYS = /* @__PURE__ */ new Set(["base", "variants", "defaultVariants", "compoundVariants", "anyOfVariants"]);
@@ -12,12 +12,24 @@ const parseTemplates = async (obj, path = []) => {
   const classes = [];
   if (isRichTemplateNode(obj)) {
     const rich = obj;
+    const baseClassName = path.map((p) => dashCase(String(p))).join("-");
     if (rich.base) {
-      const className = path.map((p) => dashCase(String(p))).join("-");
-      const hashClass = "t_" + toHash(className, 4);
-      const result = await parseAndJoinStyles(rich.base, `.${className}, .${hashClass}`);
+      const hashClass = "t_" + toHash(baseClassName, 4);
+      const result = await parseAndJoinStyles(rich.base, `.${baseClassName}, .${hashClass}`);
       classes.push(result);
     }
+    if (rich.variants) {
+      for (const [axis, valueMap] of Object.entries(rich.variants)) {
+        if (!valueMap || typeof valueMap !== "object") continue;
+        for (const [value, styles] of Object.entries(valueMap)) {
+          if (!styles || typeof styles !== "object") continue;
+          const variantClassName = `${baseClassName}-${dashCase(axis)}-${dashCase(value)}`;
+          const variantHashClass = "tv_" + toHash(variantClassName, 4);
+          const result = await parseAndJoinStyles(styles, `.${variantClassName}, .${variantHashClass}`);
+          classes.push(result);
+        }
+      }
+    }
     for (const [key, value] of Object.entries(rich)) {
       if (!isChildEntry(key, value)) continue;
       const result = await parseTemplates(value, [...path, key.trim()]);
@@ -130,8 +142,8 @@ export {
   parseAndJoinStyles,
   a as parseStyles,
   parseTemplates,
-  c as parseValueModifiers,
-  d as parseValueTokens,
-  b as parseVariableTokens,
+  d as parseValueModifiers,
+  e as parseValueTokens,
+  c as parseVariableTokens,
   r as reportParserIssue
 };

package/runtime/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-BFoV7HiL.cjs");
+const parseStyles = require("../parse-styles-lOMGe_c5.cjs");
 const defineRuntime = (config) => {
   const getDynamicStylesCss = async (styles, scope) => {
     const parsed = await parseStyles.parseStyles(styles, scope, config);

package/runtime/index.js

@@ -1,4 +1,4 @@
-import { a as parseStyles } from "../parse-styles-CtA-RKqt.js";
+import { a as parseStyles } from "../parse-styles-BBJ3PWyV.js";
 const defineRuntime = (config) => {
   const getDynamicStylesCss = async (styles, scope) => {
     const parsed = await parseStyles(styles, scope, config);