@salty-css/core 0.1.0-alpha.9 → 0.1.0-feat-define-import.0

package/compiler/salty-compiler.js

@@ -2,19 +2,20 @@ 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 { join, parse } from "path";
+import { resolve, dirname, relative, join, basename, parse } from "path";
 import { createLogger, transports, format } from "winston";
 import { readFile } from "fs/promises";
-import { readFileSync, existsSync, mkdirSync, statSync, readdirSync, writeFileSync } from "fs";
+import { existsSync, mkdirSync, copyFileSync, readFileSync, 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 { d as dashCase } from "../dash-case-DblXvymC.js";
+import { createRequire } from "module";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
-import { p as parseAndJoinStyles, b as parseVariableTokens } from "../parse-styles-BTIoYnBr.js";
+import { d as dashCase } from "../dash-case-DblXvymC.js";
+import { p as parseAndJoinStyles, b as parseVariableTokens } from "../parse-styles-CLMTHo2H.js";
 import { mergeObjects, mergeFactories } from "../css/merge.js";
 import { parseTemplates, getTemplateTypes } from "../parsers/index.js";
-import { getPackageJson } from "./get-files.js";
+import { detectCurrentModuleType } from "../util/module-type";
 import console from "console";
 const logger = createLogger({
   level: "debug",
@@ -24,19 +25,53 @@ const logger = createLogger({
 const logError = (message) => {
   logger.error(message);
 };
-const readPackageJsonModule = async (dirname) => {
-  const packageJsonContent = await getPackageJson(dirname);
-  if (!packageJsonContent) return void 0;
-  return packageJsonContent.type;
+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);
 };
-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";
+const defaultCopyAsset = (from, to) => {
+  const dir = dirname(to);
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+  copyFileSync(from, to);
+};
+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) };
 };
 function dotCase(str) {
   if (!str) return "";
@@ -91,7 +126,7 @@ const saltyReset = {
   }
 };
 class SaltyCompiler {
-  constructor(projectRootDir) {
+  constructor(projectRootDir, options = {}) {
     __publicField(this, "importFile", (path) => {
       const now = Date.now();
       return import(
@@ -121,10 +156,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 (dirname) => {
+    __publicField(this, "getRCProjectConfig", async (dirname2) => {
       var _a, _b;
-      const rcFile = await this.readRCFile(dirname);
-      const projectConfig = (_a = rcFile.projects) == null ? void 0 : _a.find((project) => dirname.endsWith(project.dir || ""));
+      const rcFile = await this.readRCFile(dirname2);
+      const projectConfig = (_a = rcFile.projects) == null ? void 0 : _a.find((project) => dirname2.endsWith(project.dir || ""));
       if (!projectConfig) return (_b = rcFile.projects) == null ? void 0 : _b.find((project) => project.dir === rcFile.defaultProject);
       return projectConfig;
     });
@@ -213,6 +248,7 @@ ${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();
@@ -328,7 +364,7 @@ ${currentFile}`;
           });
         }
         const otherGlobalCssFiles = globalCssFiles.map((file) => `@import url('./css/${file}');`).join("\n");
-        const globalCssFilenames = ["_variables.css", "_reset.css", "_global.css", "_templates.css"];
+        const globalCssFilenames = ["_imports.css", "_variables.css", "_reset.css", "_global.css", "_templates.css"];
         const importsWithData = globalCssFilenames.filter((file) => {
           try {
             const data = readFileSync(join(destDir, "css", file), "utf8");
@@ -337,9 +373,12 @@ ${currentFile}`;
             return false;
           }
         });
-        const globalImports = importsWithData.map((file) => `@import url('./css/${file}');`);
+        const globalImports = importsWithData.map((file) => {
+          const layerSuffix = file === "_imports.css" ? " layer(imports)" : "";
+          return `@import url('./css/${file}')${layerSuffix};`;
+        });
         const generatorText = "/*!\n * Generated with Salty CSS (https://salty-css.dev)\n * Do not edit this file directly\n */\n";
-        let cssContent = `${generatorText}@layer reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
+        let cssContent = `${generatorText}@layer imports, reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
 
 ${globalImports.join(
           "\n"
@@ -385,7 +424,8 @@ ${css}
         mediaQueries: [],
         globalStyles: [],
         variables: [],
-        templates: []
+        templates: [],
+        imports: []
       };
       await Promise.all(
         [...configFiles].map(async (src) => {
@@ -395,6 +435,7 @@ ${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));
           });
         })
       );
@@ -493,6 +534,22 @@ ${css}
       const templateTokens = getTemplateTypes(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]));
@@ -526,7 +583,8 @@ ${css}
       let currentFile = readFileSync(sourceFilePath, "utf8");
       currentFile = this.replaceStyledTag(currentFile);
       currentFile = this.addConfigCache(currentFile);
-      const outputFilePath = join(outputDirectory, "js", hashedName + ".js");
+      const currentFileHash = toHash(currentFile);
+      const outputFilePath = join(outputDirectory, "js", `${hashedName}-${currentFileHash}.js`);
       const rcProject = await this.getRCProjectConfig(this.projectRootDir);
       const coreConfigPath = join(this.projectRootDir, (rcProject == null ? void 0 : rcProject.configDir) || "", "salty.config.ts");
       const externalModules = this.getExternalModules(coreConfigPath);
@@ -670,11 +728,13 @@ ${newContent}
       });
     });
     this.projectRootDir = projectRootDir;
+    this.options = options;
     if (typeof process === "undefined") {
       throw new Error("SaltyServer can only be used in a Node.js environment.");
     }
   }
   get isProduction() {
+    if (this.options.mode) return this.options.mode === "production";
     try {
       return process.env["NODE_ENV"] !== "development";
     } catch {

package/config/index.cjs

@@ -6,8 +6,10 @@ 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,15 +1,17 @@
-import { GlobalStylesFactory, VariablesFactory, defineGlobalStyles, defineMediaQuery, defineVariables } from "../factories/index.js";
+import { GlobalStylesFactory, ImportFactory, VariablesFactory, defineGlobalStyles, defineImport, 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-CA3TP5n1.cjs");
+const parseStyles = require("../parse-styles-C54MOrPg.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-BTIoYnBr.js";
+import { a as parseStyles } from "../parse-styles-CLMTHo2H.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-CA3TP5n1.cjs");
+const parseStyles = require("../parse-styles-C54MOrPg.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-BTIoYnBr.js";
+import { p as parseAndJoinStyles } from "../parse-styles-CLMTHo2H.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
 const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
   const modifyKeyframes = async (params = {}) => {

package/factories/define-import.d.ts

@@ -0,0 +1,14 @@
+export interface ImportSpecOptions {
+    url: string;
+    media?: string;
+    supports?: string;
+}
+export type ImportSpec = string | ImportSpecOptions;
+export declare class ImportFactory {
+    _current: ImportSpec[];
+    _path?: string;
+    constructor(_current: ImportSpec[]);
+    get isDefineImport(): boolean;
+    _setPath(path: string): this;
+}
+export declare const defineImport: (...specs: ImportSpec[]) => ImportFactory;

package/factories/index.cjs

@@ -1,4 +1,7 @@
 "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");
@@ -13,6 +16,20 @@ 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);
 };
@@ -31,7 +48,9 @@ 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;

package/factories/index.d.ts

@@ -1,4 +1,5 @@
 export * from './define-global-styles';
+export * from './define-import';
 export * from './define-media-query';
 export * from './define-variables';
 export * from './define-templates';

package/factories/index.js

@@ -1,3 +1,6 @@
+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 { media } from "../css/media.js";
 import { T, a, d } from "../define-templates-CVhhgPnd.js";
 class GlobalStylesFactory {
@@ -11,6 +14,20 @@ 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(media);
 };
@@ -27,10 +44,12 @@ const defineVariables = (variables) => {
 };
 export {
   GlobalStylesFactory,
+  ImportFactory,
   T as TemplateFactory,
   a as TemplatesFactory,
   VariablesFactory,
   defineGlobalStyles,
+  defineImport,
   defineMediaQuery,
   d as defineTemplates,
   defineVariables

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-DB5aQwC_.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-CMWY5KTJ.js";
+import { C } from "../class-name-generator-CMWY5KTJ.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-DB5aQwC_.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-CMWY5KTJ.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.9",
+  "version": "0.1.0-feat-define-import.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",

package/{parse-styles-CA3TP5n1.cjs → parse-styles-C54MOrPg.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,6 +146,11 @@ const parseStyles = async (styles, currentScope = "", config, omitTemplates = fa
       console.warn(`Template "${_key}" with path of "${value}" was not found in config!`);
       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());
@@ -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;