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

package/parse-styles-BBJ3PWyV.js

@@ -0,0 +1,514 @@
+import { d as dashCase } from "./dash-case-DblXvymC.js";
+import { d as defineViewportClamp } from "./viewport-clamp-K553uXu3.js";
+const parseValueModifiers = (modifiers) => (value) => {
+  if (typeof value !== "string") return void 0;
+  if (!modifiers) return void 0;
+  let transformed = value;
+  const additionalCss = [];
+  Object.values(modifiers).forEach((modifier) => {
+    const { pattern, transform } = modifier;
+    transformed = transformed.replace(pattern, (match) => {
+      const { value: _value, css } = transform(match);
+      if (css) additionalCss.push(css);
+      return _value;
+    });
+  });
+  return { transformed, additionalCss };
+};
+const parseValueTokens = (tokenNames) => (value) => {
+  if (typeof value !== "string") return void 0;
+  const hasToken = /\{[^{}]+\}/g.test(value);
+  if (!hasToken) return void 0;
+  const transformed = value.replace(/\{([^{}]+)\}/g, (...args) => {
+    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})`;
+  });
+  return { transformed };
+};
+const parseVariableTokens = parseValueTokens();
+const pxProperties = [
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "min-width",
+  /.*width.*/,
+  /^[^line]*height.*/,
+  // Exclude line-height
+  /padding.*/,
+  /margin.*/,
+  /border.*/,
+  /inset.*/,
+  /.*radius.*/,
+  /.*spacing.*/,
+  /.*gap.*/,
+  /.*indent.*/,
+  /.*offset.*/,
+  /.*size.*/,
+  /.*thickness.*/,
+  /.*font-size.*/
+];
+const addUnit = (key, value, config) => {
+  const isPxProperty = pxProperties.some((pxProperty) => {
+    return typeof pxProperty === "string" ? pxProperty === key : pxProperty.test(key);
+  });
+  if (isPxProperty) {
+    const unit = (config == null ? void 0 : config.defaultUnit) || "px";
+    const isClamp = unit.startsWith("viewport-clamp:");
+    if (isClamp) {
+      try {
+        const screenSize = unit.split(":")[1];
+        const viewportClamp = defineViewportClamp({
+          screenSize: parseInt(screenSize)
+        });
+        return viewportClamp(Number(value));
+      } catch (error) {
+        console.error(error);
+        throw new Error(`Invalid viewport-clamp value: ${unit}`);
+      }
+    }
+    return `${value}${unit}`;
+  }
+  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 (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 isRichTemplateNode = (node) => {
+  if (!node || typeof node !== "object") return false;
+  if (Array.isArray(node)) return false;
+  const keys = Object.keys(node);
+  return keys.includes("base") || keys.includes("variants");
+};
+const parseTemplateCallSite = (value) => {
+  if (typeof value === "string") {
+    const [rawPath, rawQuery] = value.split("@", 2);
+    const path = rawPath.split(".").filter(Boolean);
+    if (!path.length) return void 0;
+    const variants = {};
+    if (rawQuery) {
+      for (const segment of rawQuery.split("&")) {
+        if (!segment) continue;
+        const eq = segment.indexOf("=");
+        if (eq === -1) {
+          variants[segment.trim()] = true;
+        } else {
+          const axis = segment.slice(0, eq).trim();
+          const raw = segment.slice(eq + 1).trim();
+          if (!axis) continue;
+          if (raw === "true") variants[axis] = true;
+          else if (raw === "false") variants[axis] = false;
+          else variants[axis] = raw;
+        }
+      }
+    }
+    return { path, variants };
+  }
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    const obj = value;
+    const name = obj["name"];
+    if (typeof name !== "string") return void 0;
+    const path = name.split(".").filter(Boolean);
+    if (!path.length) return void 0;
+    const variants = {};
+    for (const [k, v] of Object.entries(obj)) {
+      if (k === "name") continue;
+      if (typeof v === "string" || typeof v === "boolean") variants[k] = v;
+    }
+    return { path, variants };
+  }
+  return void 0;
+};
+const normalizeAxisValue = (v) => {
+  if (v === void 0) return void 0;
+  return typeof v === "boolean" ? String(v) : v;
+};
+const buildPathStack = (root, path) => {
+  const stack = [{ node: root, isRich: isRichTemplateNode(root) }];
+  let cursor = root;
+  for (const segment of path) {
+    if (cursor == null || typeof cursor !== "object") return void 0;
+    const next = cursor[segment];
+    if (next === void 0) return void 0;
+    stack.push({ node: next, isRich: isRichTemplateNode(next) });
+    cursor = next;
+  }
+  return stack;
+};
+const pathHasRichNode = (root, path) => {
+  const stack = buildPathStack(root, path);
+  if (!stack) return false;
+  return stack.some((entry) => entry.isRich);
+};
+const matchesAll = (entry, effective) => {
+  for (const [axis, raw] of Object.entries(entry)) {
+    if (axis === "css") continue;
+    if (effective[axis] !== normalizeAxisValue(raw)) return false;
+  }
+  return true;
+};
+const matchesAny = (entry, effective) => {
+  let any = false;
+  for (const [axis, raw] of Object.entries(entry)) {
+    if (axis === "css") continue;
+    any = true;
+    if (effective[axis] === normalizeAxisValue(raw)) return true;
+  }
+  return !any;
+};
+const resolveRichTemplate = (root, path, callSiteVariants, templateName) => {
+  var _a, _b, _c, _d;
+  const stack = buildPathStack(root, path);
+  if (!stack) return void 0;
+  const rich = stack.map((entry) => {
+    if (entry.isRich) return entry.node;
+    if (entry.node && typeof entry.node === "object" && !Array.isArray(entry.node)) {
+      const onlyChildKeys = Object.keys(entry.node).every((k) => entry.node[k] && typeof entry.node[k] === "object" && !isRichTemplateNode(entry.node[k]));
+      return onlyChildKeys ? {} : { base: entry.node };
+    }
+    return {};
+  });
+  const declaredAxes = /* @__PURE__ */ new Set();
+  for (const r of rich) {
+    if (r.variants) for (const k of Object.keys(r.variants)) declaredAxes.add(k);
+  }
+  for (const r of rich) {
+    if (r.defaultVariants) for (const k of Object.keys(r.defaultVariants)) declaredAxes.add(k);
+  }
+  const effective = {};
+  for (const axis of declaredAxes) {
+    if (axis in callSiteVariants) {
+      effective[axis] = normalizeAxisValue(callSiteVariants[axis]);
+      continue;
+    }
+    for (let i = rich.length - 1; i >= 0; i--) {
+      const d = (_a = rich[i].defaultVariants) == null ? void 0 : _a[axis];
+      if (d !== void 0) {
+        effective[axis] = normalizeAxisValue(d);
+        break;
+      }
+    }
+  }
+  for (const [axis, raw] of Object.entries(callSiteVariants)) {
+    if (!declaredAxes.has(axis)) {
+      console.warn(`Template "${templateName}" path "${path.join(".")}" has no variant axis "${axis}"; ignored.`);
+      continue;
+    }
+    const wanted = normalizeAxisValue(raw);
+    let found = false;
+    for (const r of rich) {
+      if (((_b = r.variants) == null ? void 0 : _b[axis]) && wanted !== void 0 && wanted in r.variants[axis]) {
+        found = true;
+        break;
+      }
+    }
+    if (!found && wanted !== void 0) {
+      const anyBundle = rich.some((r) => r.variants && axis in r.variants);
+      if (anyBundle) {
+        console.warn(`Template "${templateName}" axis "${axis}" has no value "${wanted}" on path "${path.join(".")}"; ignored.`);
+      }
+    }
+  }
+  const acc = {};
+  for (const r of rich) {
+    if (r.base) Object.assign(acc, r.base);
+  }
+  for (const axis of Object.keys(effective)) {
+    const value = effective[axis];
+    if (value === void 0) continue;
+    for (let i = rich.length - 1; i >= 0; i--) {
+      const bundle = (_d = (_c = rich[i].variants) == null ? void 0 : _c[axis]) == null ? void 0 : _d[value];
+      if (bundle) {
+        Object.assign(acc, bundle);
+        break;
+      }
+    }
+  }
+  for (const r of rich) {
+    if (r.compoundVariants) {
+      for (const entry of r.compoundVariants) {
+        if (matchesAll(entry, effective) && entry.css) Object.assign(acc, entry.css);
+      }
+    }
+    if (r.anyOfVariants) {
+      for (const entry of r.anyOfVariants) {
+        if (matchesAny(entry, effective) && entry.css) Object.assign(acc, entry.css);
+      }
+    }
+  }
+  return acc;
+};
+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") {
+      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 {
+        const [name, path] = config.templatePaths[_key].split(";;");
+        const functions = await import(
+          /* webpackIgnore: true */
+          /* @vite-ignore */
+          path
+        );
+        const isSaltyConfig = path.includes("salty.config");
+        const values = isSaltyConfig ? functions[name].templates : functions[name];
+        const template = isSaltyConfig ? values[_key] : values.params[_key];
+        if (values && typeof template === "function") {
+          const templateStyles = await template(value);
+          const [result] = await parseStyles(templateStyles, "");
+          return result;
+        }
+      } catch (error) {
+        console.error(`Error loading template "${_key}" from path "${config.templatePaths[_key]}"`, error);
+        return void 0;
+      }
+    }
+    if ((config == null ? void 0 : config.templates) && config.templates[_key]) {
+      if (omitTemplates) return void 0;
+      const root = config.templates[_key];
+      const callSite = parseTemplateCallSite(value);
+      if (callSite) {
+        const { path, variants } = callSite;
+        const hasCallSiteVariants = Object.keys(variants).length > 0;
+        if (hasCallSiteVariants || pathHasRichNode(root, path)) {
+          const resolved2 = resolveRichTemplate(root, path, variants, _key);
+          if (resolved2) {
+            const [result] = await parseStyles(resolved2, "");
+            return result;
+          }
+          console.warn(`Template "${_key}" with path of "${path.join(".")}" was not found in config!`);
+          return void 0;
+        }
+        const templateStyles = path.reduce((acc, key2) => acc == null ? void 0 : acc[key2], root);
+        if (templateStyles) {
+          const [result] = await parseStyles(templateStyles, "");
+          return result;
+        }
+        console.warn(`Template "${_key}" with path of "${path.join(".")}" was not found in config!`);
+        return void 0;
+      }
+      console.warn(`Template "${_key}" received an unsupported call-site value.`);
+      return void 0;
+    }
+    const isVariantArrayKey = _key === "compoundVariants" || _key === "anyOfVariants";
+    if (!isVariantArrayKey && 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);
+        for (const [prop, conditions] of variantEntries) {
+          if (!conditions) continue;
+          const entries2 = Object.entries(conditions);
+          for (const [val, styles2] of entries2) {
+            if (!styles2) continue;
+            const scope2 = `${currentScope}.${prop}-${val}`;
+            const results2 = await parseStyles(styles2, scope2, config);
+            results2.forEach((res) => cssStyles.add(res));
+          }
+        }
+        return void 0;
+      }
+      if (_key === "compoundVariants") {
+        for (const variant of value) {
+          const { css: css2, ...rest } = variant;
+          const scope2 = Object.entries(rest).reduce((acc, [prop, val]) => {
+            return `${acc}.${prop}-${val}`;
+          }, currentScope);
+          const results2 = await parseStyles(css2, scope2, config);
+          results2.forEach((res) => cssStyles.add(res));
+        }
+        return void 0;
+      }
+      if (_key === "anyOfVariants") {
+        for (const variant of value) {
+          const { css: css2, ...rest } = variant;
+          const scopes = Object.entries(rest).map(([prop, val]) => {
+            return `.${prop}-${val}`;
+          });
+          const scope2 = `${currentScope}:where(${scopes.join(", ")})`;
+          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;
+      }
+      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 (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);
+  };
+  const promises = entries.map(processStyleEntry);
+  const { modifiers } = config || {};
+  const afterFunctions = [parseValueTokens(), parseValueModifiers(modifiers)];
+  const resolved = await Promise.all(promises).then((styles2) => {
+    return Promise.all(
+      styles2.map((str) => {
+        return afterFunctions.reduce(async (acc, fn) => {
+          const current = await acc;
+          if (!current) return current;
+          const result = await fn(current);
+          if (!result) return current;
+          const { transformed, additionalCss } = result;
+          let before = "";
+          if (additionalCss) {
+            for (const css2 of additionalCss) {
+              before += await parseAndJoinStyles(css2, "");
+            }
+          }
+          return `${before}${transformed}`;
+        }, Promise.resolve(str));
+      })
+    );
+  });
+  const mapped = resolved.filter((value) => value !== void 0).join("\n	");
+  if (!mapped.trim()) return Array.from(cssStyles);
+  const css = currentScope ? `${currentScope} {
+	${mapped}
+}` : mapped;
+  const alreadyExists = cssStyles.has(css);
+  if (alreadyExists) return Array.from(cssStyles);
+  return [css, ...cssStyles];
+};
+const parseAndJoinStyles = async (styles, currentClass, config, omitTemplates = false) => {
+  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,
+  parseTemplateCallSite as b,
+  parseVariableTokens as c,
+  parseValueModifiers as d,
+  parseValueTokens as e,
+  isRichTemplateNode as i,
+  parseAndJoinStyles as p,
+  reportParserIssue as r
+};