@salty-css/core 0.1.0-alpha.2 → 0.1.0-alpha.21

package/factories/index.js

@@ -1,5 +1,131 @@
+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 { d as dashCase } from "../dash-case-DblXvymC.js";
+import { t as toHash } from "../to-hash-DAN2LcHK.js";
 import { media } from "../css/media.js";
 import { T, a, d } from "../define-templates-CVhhgPnd.js";
+const FONT_FORMAT_BY_EXTENSION = {
+  woff2: "woff2",
+  woff: "woff",
+  ttf: "truetype",
+  otf: "opentype",
+  eot: "embedded-opentype",
+  svg: "svg",
+  ttc: "collection"
+};
+const detectFontFormat = (url) => {
+  const cleaned = url.split("?")[0].split("#")[0];
+  const dot = cleaned.lastIndexOf(".");
+  if (dot === -1) return void 0;
+  const ext = cleaned.slice(dot + 1).toLowerCase();
+  return FONT_FORMAT_BY_EXTENSION[ext];
+};
+const toFontSrc = (entry) => {
+  if (typeof entry === "string") return { url: entry, format: detectFontFormat(entry) };
+  return entry;
+};
+const normalizeSources = (src) => {
+  if (Array.isArray(src)) return src.map(toFontSrc);
+  return [toFontSrc(src)];
+};
+const normalizeVariable = (variable) => {
+  const trimmed = variable.trim();
+  const stripped = trimmed.replace(/^--/, "");
+  if (!stripped) throw new Error(`defineFont: invalid \`variable\` value "${variable}".`);
+  return `--${dashCase(stripped)}`;
+};
+const deriveVariable = (options) => {
+  const hashSource = [options.name, options.fallback, "variants" in options ? options.variants : void 0, "import" in options ? options.import : void 0];
+  return `--font-${dashCase(options.name)}-${toHash(hashSource, 6)}`;
+};
+const quoteFamily = (name) => {
+  if (/^["'].*["']$/.test(name)) return name;
+  if (/\s/.test(name)) return `"${name}"`;
+  return name;
+};
+const buildFontFamilyValue = (name, fallback) => {
+  const head = quoteFamily(name);
+  if (!fallback || fallback.length === 0) return head;
+  return [head, ...fallback].join(", ");
+};
+const formatSrc = (src) => {
+  const parts = [`url("${src.url}")`];
+  if (src.format) parts.push(`format("${src.format}")`);
+  if (src.tech) parts.push(`tech(${src.tech})`);
+  return parts.join(" ");
+};
+const variantToFontFace = (name, variant, defaultDisplay) => {
+  const sources = normalizeSources(variant.src);
+  if (sources.length === 0) {
+    throw new Error(`defineFont(${name}): variant must declare at least one \`src\`.`);
+  }
+  const lines = [`font-family: ${quoteFamily(name)};`, `src: ${sources.map(formatSrc).join(", ")};`, `font-display: ${variant.display ?? defaultDisplay};`];
+  if (variant.weight !== void 0) lines.push(`font-weight: ${variant.weight};`);
+  if (variant.style !== void 0) lines.push(`font-style: ${variant.style};`);
+  if (variant.stretch !== void 0) lines.push(`font-stretch: ${variant.stretch};`);
+  if (variant.unicodeRange !== void 0) lines.push(`unicode-range: ${variant.unicodeRange};`);
+  if (variant.ascentOverride !== void 0) lines.push(`ascent-override: ${variant.ascentOverride};`);
+  if (variant.descentOverride !== void 0) lines.push(`descent-override: ${variant.descentOverride};`);
+  if (variant.lineGapOverride !== void 0) lines.push(`line-gap-override: ${variant.lineGapOverride};`);
+  if (variant.sizeAdjust !== void 0) lines.push(`size-adjust: ${variant.sizeAdjust};`);
+  return `@font-face { ${lines.join(" ")} }`;
+};
+class FontFactory {
+  constructor(_options) {
+    __publicField(this, "variable");
+    __publicField(this, "fontFamily");
+    __publicField(this, "className");
+    this._options = _options;
+    if (!_options || !_options.name) {
+      throw new Error("defineFont: `name` is required.");
+    }
+    if ("variants" in _options && "import" in _options && _options.import !== void 0 && _options.variants !== void 0) {
+      throw new Error("defineFont: provide either `variants` or `import`, not both.");
+    }
+    if (!("variants" in _options && _options.variants) && !("import" in _options && _options.import)) {
+      throw new Error("defineFont: must provide either `variants` or `import`.");
+    }
+    this.variable = _options.variable ? normalizeVariable(_options.variable) : deriveVariable(_options);
+    this.fontFamily = buildFontFamilyValue(_options.name, _options.fallback);
+    this.className = `font-${dashCase(_options.name)}`;
+  }
+  get isDefineFont() {
+    return true;
+  }
+  /** Acts as a string equal to the resolved font-family value. */
+  toString() {
+    return this.fontFamily;
+  }
+  /** Inline-style helper: spread onto a React `style` prop. */
+  get style() {
+    return {
+      fontFamily: this.fontFamily,
+      [this.variable]: this.fontFamily
+    };
+  }
+  /** Build the CSS pieces written to `_fonts.css`. */
+  _toCss() {
+    const imports = [];
+    const blocks = [];
+    if ("import" in this._options && this._options.import) {
+      imports.push(`@import url("${this._options.import}");`);
+    } else if ("variants" in this._options && this._options.variants) {
+      const display = this._options.display ?? "swap";
+      for (const variant of this._options.variants) {
+        blocks.push(variantToFontFace(this._options.name, variant, display));
+      }
+    }
+    blocks.push(
+      `:root { ${this.variable}: ${this.fontFamily}; }`,
+      `.${this.className} { ${this.variable}: ${this.fontFamily}; font-family: var(${this.variable}); }`
+    );
+    return { imports, body: blocks.join(" ") };
+  }
+}
+const defineFont = (options) => {
+  return new FontFactory(options);
+};
 class GlobalStylesFactory {
   constructor(_current) {
     this._current = _current;
@@ -26,10 +152,12 @@ const defineVariables = (variables) => {
   return new VariablesFactory(variables);
 };
 export {
+  FontFactory,
   GlobalStylesFactory,
   T as TemplateFactory,
   a as TemplatesFactory,
   VariablesFactory,
+  defineFont,
   defineGlobalStyles,
   defineMediaQuery,
   d as defineTemplates,

package/generators/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classNameGenerator = require("../class-name-generator-B2Pb2obX.cjs");
+const classNameGenerator = require("../class-name-generator-DVuPkyrS.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-YeSQe_Ik.js";
-import { C } from "../class-name-generator-YeSQe_Ik.js";
+import { S as StylesGenerator } from "../class-name-generator-DkByUzHU.js";
+import { C } from "../class-name-generator-DkByUzHU.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-B2Pb2obX.cjs");
+const classNameGenerator = require("../class-name-generator-DVuPkyrS.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-YeSQe_Ik.js";
+import { C as ClassNameGenerator } from "../class-name-generator-DkByUzHU.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.2",
+  "version": "0.1.0-alpha.21",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -87,6 +87,10 @@
       "import": "./css/merge.js",
       "require": "./css/merge.cjs"
     },
+    "./css/dynamic-styles": {
+      "import": "./css/dynamic-styles.js",
+      "require": "./css/dynamic-styles.cjs"
+    },
     "./helpers": {
       "import": "./helpers/index.js",
       "require": "./helpers/index.cjs"

package/{parse-styles-CA3TP5n1.cjs → parse-styles-CX1WjafO.cjs}

@@ -21,7 +21,7 @@ const parseValueTokens = (tokenNames) => (value) => {
   const hasToken = /\{[^{}]+\}/g.test(value);
   if (!hasToken) return void 0;
   const transformed = value.replace(/\{([^{}]+)\}/g, (...args) => {
-    const variable = dashCase.dashCase(args[1].replaceAll(".", "-"));
+    const variable = dashCase.dashCase(args[1].trim().replaceAll(".", "-"));
     if (tokenNames && !tokenNames.includes(variable)) console.warn(`Token ${variable} might not exist`);
     if (variable.startsWith("-")) return `-${variable}`;
     return `var(--${variable})`;
@@ -75,22 +75,44 @@ const addUnit = (key, value, config) => {
   return `${value}`;
 };
 const vendorPrefixes = ["Webkit", "Moz", "ms", "O"];
+const isVendorPrefixed = (key) => {
+  return vendorPrefixes.some((prefix) => {
+    if (!key.startsWith(prefix)) return false;
+    const next = key.charAt(prefix.length);
+    return next >= "A" && next <= "Z";
+  });
+};
 const propertyNameCheck = (key) => {
   if (key.startsWith("-")) return key;
-  if (vendorPrefixes.some((prefix) => key.startsWith(prefix))) return `-${dashCase.dashCase(key)}`;
+  if (isVendorPrefixed(key)) return `-${dashCase.dashCase(key)}`;
   return dashCase.dashCase(key);
 };
+const reportParserIssue = (strict, message) => {
+  if (strict === true) throw new Error(`[salty-css] ${message}`);
+  if (strict === "warn") console.warn(`[salty-css] ${message}`);
+};
+const pseudoTypoRegex = /^&(hover|focus(-(visible|within))?|active|visited|checked|disabled|enabled|empty|target|first-child|last-child|first-of-type|last-of-type|placeholder|placeholder-shown|root)\b/;
+const templateLiteralLeftoverRegex = /\$\{[^}]+\}/;
+const bareAtRuleRegex = /^@(media|supports|container|layer)\s*$/;
 const parseStyles = async (styles, currentScope = "", config, omitTemplates = false) => {
   if (!styles) throw new Error("No styles provided to parseStyles function!");
   const cssStyles = /* @__PURE__ */ new Set();
   const entries = Object.entries(styles);
+  const strict = config == null ? void 0 : config.strict;
   const processStyleEntry = async ([key, value]) => {
     var _a, _b;
     const _key = key.trim().replace(/^\?+/g, "");
     const propertyName = propertyNameCheck(_key);
     const toString = (val, eol = ";") => `${propertyName}:${val}${eol}`;
     const context = { scope: currentScope, config };
-    if (typeof value === "function") return processStyleEntry([key, value(context)]);
+    if (typeof value === "function") {
+      try {
+        return await processStyleEntry([key, value(context)]);
+      } catch (error) {
+        reportParserIssue(strict, `Function value for "${_key}" threw: ${(error == null ? void 0 : error.message) ?? error}`);
+        return void 0;
+      }
+    }
     if (value instanceof Promise) return processStyleEntry([key, await value]);
     if ((config == null ? void 0 : config.templates) && ((_a = config.templatePaths) == null ? void 0 : _a[_key])) {
       try {
@@ -124,9 +146,14 @@ const parseStyles = async (styles, currentScope = "", config, omitTemplates = fa
       console.warn(`Template "${_key}" with path of "${value}" was not found in config!`);
       return void 0;
     }
+    if (Array.isArray(value)) {
+      if (value.length === 0) return void 0;
+      return processStyleEntry([key, value.join(", ")]);
+    }
     if (typeof value === "object") {
       if (!value) return void 0;
       if (value.isColor) return toString(value.toString());
+      if (value.isDefineFont) return toString(value.toString());
       if (_key === "defaultVariants") return void 0;
       if (_key === "variants") {
         const variantEntries = Object.entries(value);
@@ -160,31 +187,62 @@ const parseStyles = async (styles, currentScope = "", config, omitTemplates = fa
             return `.${prop}-${val}`;
           });
           const scope2 = `${currentScope}:where(${scopes.join(", ")})`;
-          console.log(`Union variant scope: ${scope2}`);
           const results2 = await parseStyles(css2, scope2, config);
           results2.forEach((res) => cssStyles.add(res));
         }
         return void 0;
       }
       if (_key.startsWith("@")) {
+        if (bareAtRuleRegex.test(_key)) reportParserIssue(strict, `At-rule "${_key}" is missing its condition (e.g. "@media (min-width: 600px)").`);
         const mediaQuery = ((_b = config == null ? void 0 : config.mediaQueries) == null ? void 0 : _b[_key]) || _key;
         const results2 = await parseAndJoinStyles(value, currentScope, config);
         const query = `${mediaQuery} { ${results2} }`;
         cssStyles.add(query);
         return void 0;
       }
-      const scope = key.includes("&") ? _key.replaceAll("&", currentScope) : _key.startsWith(":") ? `${currentScope}${_key}` : `${currentScope} ${_key}`;
+      if (Object.keys(value).length === 0) return void 0;
+      if (pseudoTypoRegex.test(_key)) {
+        reportParserIssue(strict, `Selector "${_key}" looks like a missing-colon typo (did you mean "&:${_key.slice(1)}"?).`);
+      }
+      const scope = combineSelectors(currentScope, _key);
       const results = await parseStyles(value, scope, config);
       results.forEach((result) => cssStyles.add(result));
       return void 0;
     }
+    if (_key.startsWith("$")) {
+      reportParserIssue(strict, `Property key "${_key}" looks like a SCSS variable — Salty does not support those.`);
+      return void 0;
+    }
+    if (_key.includes(":")) {
+      reportParserIssue(strict, `Property key "${_key}" contains a colon — did you accidentally paste a whole declaration as a key?`);
+      return void 0;
+    }
+    if (value === void 0 || value === null) {
+      reportParserIssue(strict, `Property "${_key}" has a ${value === void 0 ? "undefined" : "null"} value — skipping.`);
+      return void 0;
+    }
+    if (typeof value === "boolean") {
+      reportParserIssue(strict, `Property "${_key}" has a boolean value (${value}) — skipping.`);
+      return void 0;
+    }
+    if (value === "") return void 0;
     if (typeof value === "number") {
+      if (!Number.isFinite(value)) {
+        reportParserIssue(strict, `Property "${_key}" has a non-finite numeric value (${value}) — skipping.`);
+        return void 0;
+      }
       const withUnit = addUnit(propertyName, value, config);
       return toString(withUnit);
     }
     if (typeof value !== "string") {
-      if ("toString" in value) value = value.toString();
-      else throw new Error(`Invalid value type for property ${propertyName}`);
+      if (value && typeof value === "object" && "toString" in value) value = value.toString();
+      else {
+        reportParserIssue(strict, `Property "${_key}" has an unsupported value type (${typeof value}) — skipping.`);
+        return void 0;
+      }
+    }
+    if (typeof value === "string" && templateLiteralLeftoverRegex.test(value)) {
+      reportParserIssue(strict, `Property "${_key}" value "${value}" contains an unresolved \`\${...}\` — did you forget to interpolate?`);
     }
     return toString(value);
   };
@@ -224,8 +282,49 @@ const parseAndJoinStyles = async (styles, currentClass, config, omitTemplates =
   const css = await parseStyles(styles, currentClass, config, omitTemplates);
   return css.join("\n");
 };
+const splitTopLevelCommas = (selector) => {
+  const parts = [];
+  let depth = 0;
+  let buf = "";
+  for (const ch of selector) {
+    if (ch === "(" || ch === "[") depth++;
+    else if (ch === ")" || ch === "]") depth = Math.max(0, depth - 1);
+    if (ch === "," && depth === 0) {
+      const trimmed2 = buf.trim();
+      if (trimmed2) parts.push(trimmed2);
+      buf = "";
+    } else {
+      buf += ch;
+    }
+  }
+  const trimmed = buf.trim();
+  if (trimmed) parts.push(trimmed);
+  return parts;
+};
+const joinSelector = (parent, child) => {
+  if (child.includes("&")) return child.replaceAll("&", parent);
+  if (child.startsWith(":")) return `${parent}${child}`;
+  return `${parent} ${child}`;
+};
+const combineSelectors = (currentScope, key) => {
+  if (!currentScope) return key;
+  const parents = splitTopLevelCommas(currentScope);
+  const children = splitTopLevelCommas(key);
+  if (!children.length) return currentScope;
+  if (parents.length <= 1 && children.length <= 1) {
+    return joinSelector(parents[0] ?? currentScope, children[0]);
+  }
+  const combos = [];
+  for (const p of parents) {
+    for (const c of children) {
+      combos.push(joinSelector(p, c));
+    }
+  }
+  return combos.join(", ");
+};
 exports.parseAndJoinStyles = parseAndJoinStyles;
 exports.parseStyles = parseStyles;
 exports.parseValueModifiers = parseValueModifiers;
 exports.parseValueTokens = parseValueTokens;
 exports.parseVariableTokens = parseVariableTokens;
+exports.reportParserIssue = reportParserIssue;

package/{parse-styles-BTIoYnBr.js → parse-styles-DIqJjXF3.js}

@@ -20,7 +20,7 @@ const parseValueTokens = (tokenNames) => (value) => {
   const hasToken = /\{[^{}]+\}/g.test(value);
   if (!hasToken) return void 0;
   const transformed = value.replace(/\{([^{}]+)\}/g, (...args) => {
-    const variable = dashCase(args[1].replaceAll(".", "-"));
+    const variable = dashCase(args[1].trim().replaceAll(".", "-"));
     if (tokenNames && !tokenNames.includes(variable)) console.warn(`Token ${variable} might not exist`);
     if (variable.startsWith("-")) return `-${variable}`;
     return `var(--${variable})`;
@@ -74,22 +74,44 @@ const addUnit = (key, value, config) => {
   return `${value}`;
 };
 const vendorPrefixes = ["Webkit", "Moz", "ms", "O"];
+const isVendorPrefixed = (key) => {
+  return vendorPrefixes.some((prefix) => {
+    if (!key.startsWith(prefix)) return false;
+    const next = key.charAt(prefix.length);
+    return next >= "A" && next <= "Z";
+  });
+};
 const propertyNameCheck = (key) => {
   if (key.startsWith("-")) return key;
-  if (vendorPrefixes.some((prefix) => key.startsWith(prefix))) return `-${dashCase(key)}`;
+  if (isVendorPrefixed(key)) return `-${dashCase(key)}`;
   return dashCase(key);
 };
+const reportParserIssue = (strict, message) => {
+  if (strict === true) throw new Error(`[salty-css] ${message}`);
+  if (strict === "warn") console.warn(`[salty-css] ${message}`);
+};
+const pseudoTypoRegex = /^&(hover|focus(-(visible|within))?|active|visited|checked|disabled|enabled|empty|target|first-child|last-child|first-of-type|last-of-type|placeholder|placeholder-shown|root)\b/;
+const templateLiteralLeftoverRegex = /\$\{[^}]+\}/;
+const bareAtRuleRegex = /^@(media|supports|container|layer)\s*$/;
 const parseStyles = async (styles, currentScope = "", config, omitTemplates = false) => {
   if (!styles) throw new Error("No styles provided to parseStyles function!");
   const cssStyles = /* @__PURE__ */ new Set();
   const entries = Object.entries(styles);
+  const strict = config == null ? void 0 : config.strict;
   const processStyleEntry = async ([key, value]) => {
     var _a, _b;
     const _key = key.trim().replace(/^\?+/g, "");
     const propertyName = propertyNameCheck(_key);
     const toString = (val, eol = ";") => `${propertyName}:${val}${eol}`;
     const context = { scope: currentScope, config };
-    if (typeof value === "function") return processStyleEntry([key, value(context)]);
+    if (typeof value === "function") {
+      try {
+        return await processStyleEntry([key, value(context)]);
+      } catch (error) {
+        reportParserIssue(strict, `Function value for "${_key}" threw: ${(error == null ? void 0 : error.message) ?? error}`);
+        return void 0;
+      }
+    }
     if (value instanceof Promise) return processStyleEntry([key, await value]);
     if ((config == null ? void 0 : config.templates) && ((_a = config.templatePaths) == null ? void 0 : _a[_key])) {
       try {
@@ -123,9 +145,14 @@ const parseStyles = async (styles, currentScope = "", config, omitTemplates = fa
       console.warn(`Template "${_key}" with path of "${value}" was not found in config!`);
       return void 0;
     }
+    if (Array.isArray(value)) {
+      if (value.length === 0) return void 0;
+      return processStyleEntry([key, value.join(", ")]);
+    }
     if (typeof value === "object") {
       if (!value) return void 0;
       if (value.isColor) return toString(value.toString());
+      if (value.isDefineFont) return toString(value.toString());
       if (_key === "defaultVariants") return void 0;
       if (_key === "variants") {
         const variantEntries = Object.entries(value);
@@ -159,31 +186,62 @@ const parseStyles = async (styles, currentScope = "", config, omitTemplates = fa
             return `.${prop}-${val}`;
           });
           const scope2 = `${currentScope}:where(${scopes.join(", ")})`;
-          console.log(`Union variant scope: ${scope2}`);
           const results2 = await parseStyles(css2, scope2, config);
           results2.forEach((res) => cssStyles.add(res));
         }
         return void 0;
       }
       if (_key.startsWith("@")) {
+        if (bareAtRuleRegex.test(_key)) reportParserIssue(strict, `At-rule "${_key}" is missing its condition (e.g. "@media (min-width: 600px)").`);
         const mediaQuery = ((_b = config == null ? void 0 : config.mediaQueries) == null ? void 0 : _b[_key]) || _key;
         const results2 = await parseAndJoinStyles(value, currentScope, config);
         const query = `${mediaQuery} { ${results2} }`;
         cssStyles.add(query);
         return void 0;
       }
-      const scope = key.includes("&") ? _key.replaceAll("&", currentScope) : _key.startsWith(":") ? `${currentScope}${_key}` : `${currentScope} ${_key}`;
+      if (Object.keys(value).length === 0) return void 0;
+      if (pseudoTypoRegex.test(_key)) {
+        reportParserIssue(strict, `Selector "${_key}" looks like a missing-colon typo (did you mean "&:${_key.slice(1)}"?).`);
+      }
+      const scope = combineSelectors(currentScope, _key);
       const results = await parseStyles(value, scope, config);
       results.forEach((result) => cssStyles.add(result));
       return void 0;
     }
+    if (_key.startsWith("$")) {
+      reportParserIssue(strict, `Property key "${_key}" looks like a SCSS variable — Salty does not support those.`);
+      return void 0;
+    }
+    if (_key.includes(":")) {
+      reportParserIssue(strict, `Property key "${_key}" contains a colon — did you accidentally paste a whole declaration as a key?`);
+      return void 0;
+    }
+    if (value === void 0 || value === null) {
+      reportParserIssue(strict, `Property "${_key}" has a ${value === void 0 ? "undefined" : "null"} value — skipping.`);
+      return void 0;
+    }
+    if (typeof value === "boolean") {
+      reportParserIssue(strict, `Property "${_key}" has a boolean value (${value}) — skipping.`);
+      return void 0;
+    }
+    if (value === "") return void 0;
     if (typeof value === "number") {
+      if (!Number.isFinite(value)) {
+        reportParserIssue(strict, `Property "${_key}" has a non-finite numeric value (${value}) — skipping.`);
+        return void 0;
+      }
       const withUnit = addUnit(propertyName, value, config);
       return toString(withUnit);
     }
     if (typeof value !== "string") {
-      if ("toString" in value) value = value.toString();
-      else throw new Error(`Invalid value type for property ${propertyName}`);
+      if (value && typeof value === "object" && "toString" in value) value = value.toString();
+      else {
+        reportParserIssue(strict, `Property "${_key}" has an unsupported value type (${typeof value}) — skipping.`);
+        return void 0;
+      }
+    }
+    if (typeof value === "string" && templateLiteralLeftoverRegex.test(value)) {
+      reportParserIssue(strict, `Property "${_key}" value "${value}" contains an unresolved \`\${...}\` — did you forget to interpolate?`);
     }
     return toString(value);
   };
@@ -223,10 +281,51 @@ const parseAndJoinStyles = async (styles, currentClass, config, omitTemplates =
   const css = await parseStyles(styles, currentClass, config, omitTemplates);
   return css.join("\n");
 };
+const splitTopLevelCommas = (selector) => {
+  const parts = [];
+  let depth = 0;
+  let buf = "";
+  for (const ch of selector) {
+    if (ch === "(" || ch === "[") depth++;
+    else if (ch === ")" || ch === "]") depth = Math.max(0, depth - 1);
+    if (ch === "," && depth === 0) {
+      const trimmed2 = buf.trim();
+      if (trimmed2) parts.push(trimmed2);
+      buf = "";
+    } else {
+      buf += ch;
+    }
+  }
+  const trimmed = buf.trim();
+  if (trimmed) parts.push(trimmed);
+  return parts;
+};
+const joinSelector = (parent, child) => {
+  if (child.includes("&")) return child.replaceAll("&", parent);
+  if (child.startsWith(":")) return `${parent}${child}`;
+  return `${parent} ${child}`;
+};
+const combineSelectors = (currentScope, key) => {
+  if (!currentScope) return key;
+  const parents = splitTopLevelCommas(currentScope);
+  const children = splitTopLevelCommas(key);
+  if (!children.length) return currentScope;
+  if (parents.length <= 1 && children.length <= 1) {
+    return joinSelector(parents[0] ?? currentScope, children[0]);
+  }
+  const combos = [];
+  for (const p of parents) {
+    for (const c of children) {
+      combos.push(joinSelector(p, c));
+    }
+  }
+  return combos.join(", ");
+};
 export {
   parseStyles as a,
   parseVariableTokens as b,
   parseValueModifiers as c,
   parseValueTokens as d,
-  parseAndJoinStyles as p
+  parseAndJoinStyles as p,
+  reportParserIssue as r
 };

package/parsers/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-CA3TP5n1.cjs");
+const parseStyles = require("../parse-styles-CX1WjafO.cjs");
 const dashCase = require("../dash-case-DIwKaYgE.cjs");
 const toHash = require("../to-hash-C05Y906F.cjs");
 const parseTemplates = async (obj, path = []) => {
@@ -52,6 +52,7 @@ exports.parseStyles = parseStyles.parseStyles;
 exports.parseValueModifiers = parseStyles.parseValueModifiers;
 exports.parseValueTokens = parseStyles.parseValueTokens;
 exports.parseVariableTokens = parseStyles.parseVariableTokens;
+exports.reportParserIssue = parseStyles.reportParserIssue;
 exports.getTemplateKeys = getTemplateKeys;
 exports.getTemplateTokens = getTemplateTokens;
 exports.getTemplateTypes = getTemplateTypes;

package/parsers/index.d.ts

@@ -3,3 +3,4 @@ export * from './parse-styles';
 export * from './parse-templates';
 export * from './parse-tokens';
 export * from './parser-types';
+export * from './strict';

package/parsers/index.js

@@ -1,5 +1,5 @@
-import { p as parseAndJoinStyles } from "../parse-styles-BTIoYnBr.js";
-import { a, c, d, b } from "../parse-styles-BTIoYnBr.js";
+import { p as parseAndJoinStyles } from "../parse-styles-DIqJjXF3.js";
+import { a, c, d, b, r } from "../parse-styles-DIqJjXF3.js";
 import { d as dashCase } from "../dash-case-DblXvymC.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
 const parseTemplates = async (obj, path = []) => {
@@ -55,5 +55,6 @@ export {
   parseTemplates,
   c as parseValueModifiers,
   d as parseValueTokens,
-  b as parseVariableTokens
+  b as parseVariableTokens,
+  r as reportParserIssue
 };

package/parsers/parser-regexes.d.ts

@@ -0,0 +1,3 @@
+export declare const pseudoTypoRegex: RegExp;
+export declare const templateLiteralLeftoverRegex: RegExp;
+export declare const bareAtRuleRegex: RegExp;

package/parsers/strict.d.ts

@@ -0,0 +1,2 @@
+export type StrictMode = boolean | 'warn' | undefined;
+export declare const reportParserIssue: (strict: StrictMode, message: string) => void;

package/runtime/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-CA3TP5n1.cjs");
+const parseStyles = require("../parse-styles-CX1WjafO.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-BTIoYnBr.js";
+import { a as parseStyles } from "../parse-styles-DIqJjXF3.js";
 const defineRuntime = (config) => {
   const getDynamicStylesCss = async (styles, scope) => {
     const parsed = await parseStyles(styles, scope, config);

package/{salty.config-cqavVm2t.cjs → salty.config-DogY_sSQ.cjs}

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const salty_config = "import { defineConfig } from '@salty-css/core/config';\n\nexport const config = defineConfig({\n  // Add your custom config here\n  externalModules: ['react', 'react-dom']\n});\n";
+const salty_config = "import { defineConfig } from '@salty-css/core/config';\n\nexport const config = defineConfig({\n  strict: true,\n  externalModules: ['react', 'react-dom']\n});\n";
 exports.default = salty_config;

package/salty.config-GV37Q-D2.js

@@ -0,0 +1,4 @@
+const salty_config = "import { defineConfig } from '@salty-css/core/config';\n\nexport const config = defineConfig({\n  strict: true,\n  externalModules: ['react', 'react-dom']\n});\n";
+export {
+  salty_config as default
+};