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

package/{parse-styles-BTIoYnBr.js → parse-styles-g4NPgqhh.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,6 +145,10 @@ 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());
@@ -159,31 +185,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 +280,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-DWQ4UQCp.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-g4NPgqhh.js";
+import { a, c, d, b, r } from "../parse-styles-g4NPgqhh.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-DWQ4UQCp.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-g4NPgqhh.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
+};

package/styled-file-BzmB9_Ez.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styledFile = `import { styled } from "@salty-css/astro/styled";
+
+export const <%- name %> = styled('<%- tag %>', {
+  <% if(className) { %>className: '<%- className %>',<% } %>
+  base: {
+    // Add your styles here
+  }
+})
+`;
+exports.default = styledFile;

package/{react-styled-file-U02jek-B.cjs → styled-file-CPd_rTW2.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const reactStyledFile = `import { styled } from "@salty-css/react/styled";
+const styledFile = `import { styled } from "@salty-css/react/styled";
 
 export const <%- name %> = styled('<%- tag %>', {
   <% if(className) { %>className: '<%- className %>',<% } %>
@@ -8,4 +8,4 @@ export const <%- name %> = styled('<%- tag %>', {
     // Add your styles here
   }
 })`;
-exports.default = reactStyledFile;
+exports.default = styledFile;

package/{react-styled-file-B99mwk0w.js → styled-file-Cda3EeR6.js}

@@ -1,4 +1,4 @@
-const reactStyledFile = `import { styled } from "@salty-css/react/styled";
+const styledFile = `import { styled } from "@salty-css/react/styled";
 
 export const <%- name %> = styled('<%- tag %>', {
   <% if(className) { %>className: '<%- className %>',<% } %>
@@ -7,5 +7,5 @@ export const <%- name %> = styled('<%- tag %>', {
   }
 })`;
 export {
-  reactStyledFile as default
+  styledFile as default
 };

package/styled-file-DLcgYmGN.js

@@ -0,0 +1,12 @@
+const styledFile = `import { styled } from "@salty-css/astro/styled";
+
+export const <%- name %> = styled('<%- tag %>', {
+  <% if(className) { %>className: '<%- className %>',<% } %>
+  base: {
+    // Add your styles here
+  }
+})
+`;
+export {
+  styledFile as default
+};

package/types/config-types.d.ts

@@ -68,6 +68,14 @@ export interface SaltyConfig {
      * Define modules that should not be bundled when generating the css file. This improves the performance of the css generation and can help with issues relared to external packages being imported in an environment that does not support them.
      */
     externalModules?: ('react' | 'react-dom' | OrString)[];
+    /**
+     * Controls how the parser reacts to suspicious or malformed input
+     * (typos, invalid value types, malformed selectors, etc.).
+     * - `true` — throw on issues (recommended for new projects)
+     * - `'warn'` — log a warning and continue
+     * - `false` / undefined — silent, behave like prior versions
+     */
+    strict?: boolean | 'warn';
     /**
      * default unit for px based properties when providing a number value. Default is 'px'.
      */
@@ -78,6 +86,7 @@ export interface CachedConfig {
     staticVariables: Record<string, any>;
     mediaQueries: Record<string, string>;
     modifiers?: CssModifiers;
+    strict?: boolean | 'warn';
     templatePaths: {
         [key: string]: string;
     };

package/{react-vanilla-file-D9px70iK.js → vanilla-file-1kOqbCIM.js}

@@ -1,4 +1,4 @@
-const reactVanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
+const vanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
 
 interface <%- componentName %>Props {
   text?: string;
@@ -14,5 +14,5 @@ export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName
 
 export default <%- componentName %>;`;
 export {
-  reactVanillaFile as default
+  vanillaFile as default
 };

package/{react-vanilla-file-Bj6XC8GS.cjs → vanilla-file-r0fp2q_m.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const reactVanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
+const vanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
 
 interface <%- componentName %>Props {
   text?: string;
@@ -15,4 +15,4 @@ export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName
 };
 
 export default <%- componentName %>;`;
-exports.default = reactVanillaFile;
+exports.default = vanillaFile;

package/salty.config-DjosWdPw.js

@@ -1,4 +0,0 @@
-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";
-export {
-  salty_config as default
-};