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

package/bin/package-json.d.ts

@@ -0,0 +1,21 @@
+import { PathLike } from 'fs';
+export declare const defaultPackageJsonPath: string;
+export interface PackageJson {
+    name?: string;
+    version?: string;
+    scripts?: Record<string, string>;
+    dependencies?: Record<string, string>;
+    devDependencies?: Record<string, string>;
+    [key: string]: unknown;
+}
+export declare const readPackageJson: (filePath?: PathLike) => Promise<PackageJson>;
+export declare const updatePackageJson: (content: string | object, filePath?: PathLike) => Promise<void>;
+export declare const readThisPackageJson: () => Promise<PackageJson>;
+export declare const corePackages: {
+    core: (version: string) => string;
+    eslintConfigCore: (version: string) => string;
+};
+export declare const addPrepareScript: (pkg: PackageJson) => {
+    changed: boolean;
+    pkg: PackageJson;
+};

package/bin/saltyrc.d.ts

@@ -0,0 +1,31 @@
+import { RCFile } from '../types/cli-types';
+import { FrameworkAdapter } from './frameworks';
+export declare const SALTYRC_FILENAME = ".saltyrc.json";
+export declare const SALTYRC_SCHEMA = "./node_modules/@salty-css/core/.saltyrc.schema.json";
+export declare const SALTYRC_INFO = "This file is used to define projects and their configurations for Salty CSS cli. Do not delete, modify or add this file to .gitignore.";
+export interface ProjectEntry {
+    dir: string;
+    framework: string;
+    [key: string]: unknown;
+}
+export declare const saltyrcPath: (rootDir?: string) => string;
+export declare const readRc: (rootDir?: string) => Promise<RCFile>;
+export declare const readRawRc: (rootDir?: string) => Promise<string | undefined>;
+export declare const getDefaultProject: (rootDir?: string) => Promise<string | undefined>;
+/**
+ * Pure transform: returns the new saltyrc content for an upsert. Does not touch the filesystem.
+ * - If `existingRaw` is undefined, returns a fresh file with the project as the only entry.
+ * - If the project entry already exists, returns the same content (no-op).
+ * - Otherwise appends the new entry and returns updated content.
+ */
+export declare const upsertProjectInRc: (existingRaw: string | undefined, relativeProjectPath: string, framework: FrameworkAdapter) => {
+    content: string;
+    changed: boolean;
+    created: boolean;
+};
+/**
+ * Writes the saltyrc file, creating or updating the project entry for the given dir.
+ * Returns true when a write occurred.
+ */
+export declare const writeProjectToRc: (cwd: string, relativeProjectPath: string, framework: FrameworkAdapter) => Promise<boolean>;
+export declare const getProjectFramework: (rc: RCFile, relativeProjectPath: string) => string | undefined;

package/bin/templates.d.ts

@@ -0,0 +1,14 @@
+declare const templateLoaders: {
+    readonly 'salty.config.ts': () => Promise<any>;
+    readonly 'saltygen/index.css': () => Promise<any>;
+    readonly 'react/styled-file.ts': () => Promise<any>;
+    readonly 'react/vanilla-file.ts': () => Promise<any>;
+    readonly 'astro/styled-file.ts': () => Promise<any>;
+    readonly 'astro/component.astro': () => Promise<any>;
+};
+export type TemplateKey = keyof typeof templateLoaders;
+export declare const readTemplate: <T extends object>(key: TemplateKey, options?: T) => Promise<{
+    fileName: "salty.config.ts" | "saltygen/index.css" | "react/styled-file.ts" | "react/vanilla-file.ts" | "astro/styled-file.ts" | "astro/component.astro";
+    content: string;
+}>;
+export {};

package/{class-name-generator-YeSQe_Ik.js → class-name-generator-BKMSRP7N.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { p as parseAndJoinStyles } from "./parse-styles-BTIoYnBr.js";
+import { p as parseAndJoinStyles } from "./parse-styles-g4NPgqhh.js";
 import { d as dashCase } from "./dash-case-DblXvymC.js";
 import { t as toHash } from "./to-hash-DAN2LcHK.js";
 class StylesGenerator {

package/{class-name-generator-B2Pb2obX.cjs → class-name-generator-CYgwnxnZ.cjs}

@@ -2,7 +2,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-const parseStyles = require("./parse-styles-CA3TP5n1.cjs");
+const parseStyles = require("./parse-styles-DWQ4UQCp.cjs");
 const dashCase = require("./dash-case-DIwKaYgE.cjs");
 const toHash = require("./to-hash-C05Y906F.cjs");
 class StylesGenerator {

package/compiler/salty-compiler.cjs

@@ -13,10 +13,10 @@ const compiler_helpers = require("./helpers.cjs");
 const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
 const dashCase = require("../dash-case-DIwKaYgE.cjs");
 const toHash = require("../to-hash-C05Y906F.cjs");
-const parseStyles = require("../parse-styles-CA3TP5n1.cjs");
+const parseStyles = require("../parse-styles-DWQ4UQCp.cjs");
 const css_merge = require("../css/merge.cjs");
-const compiler_getFiles = require("./get-files.cjs");
 const parsers_index = require("../parsers/index.cjs");
+const compiler_getFiles = require("./get-files.cjs");
 const console = require("console");
 var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 function _interopNamespaceDefault(e) {
@@ -111,7 +111,7 @@ const saltyReset = {
   }
 };
 class SaltyCompiler {
-  constructor(projectRootDir) {
+  constructor(projectRootDir, options = {}) {
     __publicField(this, "importFile", (path2) => {
       const now = Date.now();
       return import(
@@ -546,7 +546,8 @@ ${css}
       let currentFile = fs.readFileSync(sourceFilePath, "utf8");
       currentFile = this.replaceStyledTag(currentFile);
       currentFile = this.addConfigCache(currentFile);
-      const outputFilePath = path.join(outputDirectory, "js", hashedName + ".js");
+      const currentFileHash = toHash.toHash(currentFile);
+      const outputFilePath = path.join(outputDirectory, "js", `${hashedName}-${currentFileHash}.js`);
       const rcProject = await this.getRCProjectConfig(this.projectRootDir);
       const coreConfigPath = path.join(this.projectRootDir, (rcProject == null ? void 0 : rcProject.configDir) || "", "salty.config.ts");
       const externalModules = this.getExternalModules(coreConfigPath);
@@ -690,11 +691,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/compiler/salty-compiler.d.ts

@@ -1,9 +1,14 @@
 import { CachedConfig, SaltyConfig } from '../config';
+export type SaltyCompilerMode = 'production' | 'development';
+export interface SaltyCompilerOptions {
+    mode?: SaltyCompilerMode;
+}
 export declare class SaltyCompiler {
     projectRootDir: string;
+    private options;
     importFile: (path: string) => Promise<any>;
     private cache;
-    constructor(projectRootDir: string);
+    constructor(projectRootDir: string, options?: SaltyCompilerOptions);
     get isProduction(): boolean;
     /**
      * Locate and read the .saltyrc.json file starting from the current directory and moving up the directory tree.

package/compiler/salty-compiler.js

@@ -11,10 +11,10 @@ import { isSaltyFile, resolveExportValue, getCorePackageRoot, saltyFileExtension
 import { d as defineTemplates } from "../define-templates-CVhhgPnd.js";
 import { d as dashCase } from "../dash-case-DblXvymC.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
-import { p as parseAndJoinStyles, b as parseVariableTokens } from "../parse-styles-BTIoYnBr.js";
+import { p as parseAndJoinStyles, b as parseVariableTokens } from "../parse-styles-g4NPgqhh.js";
 import { mergeObjects, mergeFactories } from "../css/merge.js";
-import { getPackageJson } from "./get-files.js";
 import { parseTemplates, getTemplateTypes } from "../parsers/index.js";
+import { getPackageJson } from "./get-files.js";
 import console from "console";
 const logger = createLogger({
   level: "debug",
@@ -91,7 +91,7 @@ const saltyReset = {
   }
 };
 class SaltyCompiler {
-  constructor(projectRootDir) {
+  constructor(projectRootDir, options = {}) {
     __publicField(this, "importFile", (path) => {
       const now = Date.now();
       return import(
@@ -526,7 +526,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 +671,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/css/dynamic-styles.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const parseStyles = require("../parse-styles-DWQ4UQCp.cjs");
+const toHash = require("../to-hash-C05Y906F.cjs");
+const cache_resolveDynamicConfigCache = require("../cache/resolve-dynamic-config-cache.cjs");
+const getDynamicStylesClassName = (styles) => {
+  return toHash.toHash(styles);
+};
+const getDynamicStylesCss = async (styles, scope) => {
+  const config = await cache_resolveDynamicConfigCache.resolveDynamicConfigCache();
+  const parsed = await parseStyles.parseStyles(styles, scope, config);
+  return parsed.join("\n");
+};
+exports.getDynamicStylesClassName = getDynamicStylesClassName;
+exports.getDynamicStylesCss = getDynamicStylesCss;

package/css/dynamic-styles.d.ts

@@ -0,0 +1,10 @@
+import { BaseStyles } from '../types';
+/**
+ * Create a hash of the dynamic styles that then can be used as scope.
+ */
+export declare const getDynamicStylesClassName: (styles: BaseStyles) => string;
+/**
+ * Add any dynamic styles to your app with a custom scope.
+ * Note: this works only with server components.
+ */
+export declare const getDynamicStylesCss: (styles: BaseStyles, scope?: string) => Promise<string>;

package/css/dynamic-styles.js

@@ -0,0 +1,15 @@
+import { a as parseStyles } from "../parse-styles-g4NPgqhh.js";
+import { t as toHash } from "../to-hash-DAN2LcHK.js";
+import { resolveDynamicConfigCache } from "../cache/resolve-dynamic-config-cache.js";
+const getDynamicStylesClassName = (styles) => {
+  return toHash(styles);
+};
+const getDynamicStylesCss = async (styles, scope) => {
+  const config = await resolveDynamicConfigCache();
+  const parsed = await parseStyles(styles, scope, config);
+  return parsed.join("\n");
+};
+export {
+  getDynamicStylesClassName,
+  getDynamicStylesCss
+};

package/css/index.cjs

@@ -4,9 +4,12 @@ const css_keyframes = require("./keyframes.cjs");
 const css_media = require("./media.cjs");
 const css_token = require("./token.cjs");
 const css_merge = require("./merge.cjs");
+const css_dynamicStyles = require("./dynamic-styles.cjs");
 exports.keyframes = css_keyframes.keyframes;
 exports.MediaQueryFactory = css_media.MediaQueryFactory;
 exports.media = css_media.media;
 exports.token = css_token.token;
 exports.mergeFactories = css_merge.mergeFactories;
 exports.mergeObjects = css_merge.mergeObjects;
+exports.getDynamicStylesClassName = css_dynamicStyles.getDynamicStylesClassName;
+exports.getDynamicStylesCss = css_dynamicStyles.getDynamicStylesCss;

package/css/index.d.ts

@@ -2,3 +2,4 @@ export * from './keyframes';
 export * from './media';
 export * from './token';
 export * from './merge';
+export * from './dynamic-styles';

package/css/index.js

@@ -2,8 +2,11 @@ import { keyframes } from "./keyframes.js";
 import { MediaQueryFactory, media } from "./media.js";
 import { token } from "./token.js";
 import { mergeFactories, mergeObjects } from "./merge.js";
+import { getDynamicStylesClassName, getDynamicStylesCss } from "./dynamic-styles.js";
 export {
   MediaQueryFactory,
+  getDynamicStylesClassName,
+  getDynamicStylesCss,
   keyframes,
   media,
   mergeFactories,

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-DWQ4UQCp.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-g4NPgqhh.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
 const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
   const modifyKeyframes = async (params = {}) => {

package/generators/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classNameGenerator = require("../class-name-generator-B2Pb2obX.cjs");
+const classNameGenerator = require("../class-name-generator-CYgwnxnZ.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-BKMSRP7N.js";
+import { C } from "../class-name-generator-BKMSRP7N.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-CYgwnxnZ.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-BKMSRP7N.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.20",
   "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-DWQ4UQCp.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,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());
@@ -160,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);
   };
@@ -224,8 +281,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;