@salty-css/core 0.1.0-alpha.33 → 0.1.0-alpha.35

package/README.md

@@ -617,6 +617,8 @@ And note: steps 2 & 3 are just to show how get new components up and running, st
 - **Next.js 15:** In `next.config.ts` add import for salty plugin `import { withSaltyCss } from '@salty-css/next';` and then add `withSaltyCss` to wrap your nextConfig export like so `export default withSaltyCss(nextConfig);`
 - **Next.js 14 and older:** In `next.config.js` add import for salty plugin `const { withSaltyCss } = require('@salty-css/next');` and then add `withSaltyCss` to wrap your nextConfig export like so `module.exports = withSaltyCss(nextConfig);`
 
+Both Webpack and Turbopack are supported. `withSaltyCss` auto-detects which bundler Next.js is using (`next dev --turbopack` sets `process.env.TURBOPACK=1`), so no extra config is required. To force a specific bundler, pass `{ bundler: 'webpack' | 'turbopack' }` as the second argument.
+
 4. Make sure that `salty.config.ts` and `next.config.ts` are in the same folder!
 5. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
 6. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.

package/{class-name-generator-B0WkxoIg.js → class-name-generator-CUEoPowv.js}

@@ -1,9 +1,8 @@
 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, b as parseTemplateCallSite } from "./parse-styles-BBJ3PWyV.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 parseTemplateCallSite } from "./parse-styles-BgVqQAni.js";
+import { t as toHash, d as dashCase } from "./to-hash-DSoCPs8D.js";
 class StylesGenerator {
   constructor(params) {
     __publicField(this, "buildContext", {});

package/{class-name-generator-BEOEMEKX.cjs → class-name-generator-MtPkBfM_.cjs}

@@ -2,9 +2,8 @@
 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-lOMGe_c5.cjs");
-const dashCase = require("./dash-case-DIwKaYgE.cjs");
-const toHash = require("./to-hash-C05Y906F.cjs");
+const parseStyles = require("./parse-styles-BbI-2wdn.cjs");
+const toHash = require("./to-hash-DT2ImSPA.cjs");
 class StylesGenerator {
   constructor(params) {
     __publicField(this, "buildContext", {});
@@ -35,7 +34,7 @@ class StylesGenerator {
   get cssFileName() {
     const { callerName } = this.buildContext;
     if (callerName) {
-      const dasherized = dashCase.dashCase(callerName);
+      const dasherized = toHash.dashCase(callerName);
       return `cl_${dasherized}-${this.hash}.css`;
     }
     return `${this.hash}.css`;
@@ -58,12 +57,12 @@ class StylesGenerator {
       const cumulative = [];
       for (const part of path) {
         cumulative.push(part);
-        const baseClassName = dashCase.dashCase(`${key}-${cumulative.join(".")}`);
+        const baseClassName = toHash.dashCase(`${key}-${cumulative.join(".")}`);
         acc.push("t_" + toHash.toHash(baseClassName, 4));
         for (const [axis, axisValue] of Object.entries(variants)) {
           if (axisValue === false || axisValue === void 0) continue;
-          const valueSuffix = axisValue === true ? "" : `-${dashCase.dashCase(String(axisValue))}`;
-          const variantClassName = `${baseClassName}-${dashCase.dashCase(axis)}${valueSuffix}`;
+          const valueSuffix = axisValue === true ? "" : `-${toHash.dashCase(String(axisValue))}`;
+          const variantClassName = `${baseClassName}-${toHash.dashCase(axis)}${valueSuffix}`;
           acc.push("tv_" + toHash.toHash(variantClassName, 4));
         }
       }

package/compiler/helpers.cjs

@@ -16,11 +16,15 @@ const resolveExportValue = async (value, maxLevel = 10, _level = 0) => {
   return value;
 };
 const saltyFileExtensions = ["salty", "css", "styles", "styled"];
+const tsFileExtensions = ["ts", "tsx", "js", "jsx", "mjs", "cjs"];
 const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-const saltyFileRegExp = (additional = []) => new RegExp(`\\.(${[...saltyFileExtensions, ...additional].map(escapeRegExp).join("|")})\\.`);
+const saltyFileRegExp = (additional = []) => {
+  return new RegExp(`\\.(${[...saltyFileExtensions, ...additional].map(escapeRegExp).join("|")})\\.(${tsFileExtensions.map(escapeRegExp).join("|")})$`);
+};
 const isSaltyFile = (file, additional = []) => saltyFileRegExp(additional).test(file);
 exports.getCorePackageRoot = getCorePackageRoot;
 exports.isSaltyFile = isSaltyFile;
 exports.resolveExportValue = resolveExportValue;
 exports.saltyFileExtensions = saltyFileExtensions;
 exports.saltyFileRegExp = saltyFileRegExp;
+exports.tsFileExtensions = tsFileExtensions;

package/compiler/helpers.d.ts

@@ -1,5 +1,6 @@
 export declare const getCorePackageRoot: () => string;
 export declare const resolveExportValue: <T>(value: unknown, maxLevel?: number, _level?: number) => Promise<T>;
 export declare const saltyFileExtensions: string[];
+export declare const tsFileExtensions: string[];
 export declare const saltyFileRegExp: (additional?: string[]) => RegExp;
 export declare const isSaltyFile: (file: string, additional?: string[]) => boolean;

package/compiler/helpers.js

@@ -13,13 +13,17 @@ const resolveExportValue = async (value, maxLevel = 10, _level = 0) => {
   return value;
 };
 const saltyFileExtensions = ["salty", "css", "styles", "styled"];
+const tsFileExtensions = ["ts", "tsx", "js", "jsx", "mjs", "cjs"];
 const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-const saltyFileRegExp = (additional = []) => new RegExp(`\\.(${[...saltyFileExtensions, ...additional].map(escapeRegExp).join("|")})\\.`);
+const saltyFileRegExp = (additional = []) => {
+  return new RegExp(`\\.(${[...saltyFileExtensions, ...additional].map(escapeRegExp).join("|")})\\.(${tsFileExtensions.map(escapeRegExp).join("|")})$`);
+};
 const isSaltyFile = (file, additional = []) => saltyFileRegExp(additional).test(file);
 export {
   getCorePackageRoot,
   isSaltyFile,
   resolveExportValue,
   saltyFileExtensions,
-  saltyFileRegExp
+  saltyFileRegExp,
+  tsFileExtensions
 };

package/compiler/salty-compiler.cjs

@@ -10,14 +10,13 @@ const promises = require("fs/promises");
 const fs = require("fs");
 const child_process = require("child_process");
 const compiler_helpers = require("./helpers.cjs");
-const dashCase = require("../dash-case-DIwKaYgE.cjs");
-const toHash = require("../to-hash-C05Y906F.cjs");
+const toHash = require("../to-hash-DT2ImSPA.cjs");
 const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
 const module$1 = require("module");
-const parseStyles = require("../parse-styles-lOMGe_c5.cjs");
+const parseStyles = require("../parse-styles-BbI-2wdn.cjs");
 const css_merge = require("../css/merge.cjs");
-const parsers_index = require("../parsers/index.cjs");
 const compiler_getFiles = require("./get-files.cjs");
+const parsers_index = require("../parsers/index.cjs");
 const console = require("console");
 var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 function _interopNamespaceDefault(e) {
@@ -392,7 +391,7 @@ ${currentFile}`;
             const cssContent2 = localCssFile.map((file) => `@import url('./${file}');`).join("\n");
             const hashName = toHash.toHash(src, 6);
             const parsedPath = path.parse(src);
-            const dasherized = dashCase.dashCase(parsedPath.name);
+            const dasherized = toHash.dashCase(parsedPath.name);
             const cssFile2 = path.join(destDir, `css/f_${dasherized}-${hashName}.css`);
             fs.writeFileSync(cssFile2, cssContent2 || `/* Empty file */`);
           });
@@ -490,10 +489,10 @@ ${css}
             if (typeof value2 === "function") return await parseVariable(await value2());
             if (typeof value2 === "object") return await parseVariables(value2, [...path2, key]);
             const dottedKey = dotCase(key);
-            const dashedKey = dashCase.dashCase(key);
+            const dashedKey = toHash.dashCase(key);
             const tsName = [...path2, dottedKey].join(".");
             variableTokens.add(`"${tsName}"`);
-            const cssName = [...path2.map(dashCase.dashCase), dashedKey].join("-");
+            const cssName = [...path2.map(toHash.dashCase), dashedKey].join("-");
             const result = parseStyles.parseVariableTokens(value2);
             if (!result) return `--${cssName}: ${value2};`;
             return `--${cssName}: ${result.transformed};`;
@@ -647,9 +646,6 @@ ${css}
       fs.writeFileSync(tsTokensPath, tsTokensTypes);
       const configCachePath = path.join(destDir, "cache/config-cache.json");
       fs.writeFileSync(configCachePath, JSON.stringify(configCacheContent, null, 2));
-      const corePackageRoot = compiler_helpers.getCorePackageRoot();
-      const configCacheSecondaryPath = path.join(corePackageRoot, "cache/config-cache.json");
-      fs.writeFileSync(configCacheSecondaryPath, JSON.stringify(configCacheContent, null, 2));
     });
     __publicField(this, "compileSaltyFile", async (sourceFilePath, outputDirectory) => {
       const hashedName = toHash.toHash(sourceFilePath);
@@ -778,7 +774,7 @@ ${newContent}
             const cssContent = cssFiles.flat().map((file2) => `@import url('./${file2}');`).join("\n");
             const hashName = toHash.toHash(file, 6);
             const parsedPath = path.parse(file);
-            const dasherized = dashCase.dashCase(parsedPath.name);
+            const dasherized = toHash.dashCase(parsedPath.name);
             const cssFile = path.join(destDir, `css/f_${dasherized}-${hashName}.css`);
             fs.writeFileSync(cssFile, cssContent || `/* Empty file */`);
           }

package/compiler/salty-compiler.js

@@ -7,15 +7,14 @@ import { createLogger, transports, format } from "winston";
 import { readFile } from "fs/promises";
 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 dashCase } from "../dash-case-DblXvymC.js";
-import { t as toHash } from "../to-hash-DAN2LcHK.js";
+import { isSaltyFile, resolveExportValue, saltyFileExtensions } from "./helpers.js";
+import { t as toHash, d as dashCase } from "../to-hash-DSoCPs8D.js";
 import { d as defineTemplates } from "../define-templates-CVhhgPnd.js";
 import { createRequire } from "module";
-import { p as parseAndJoinStyles, c as parseVariableTokens } from "../parse-styles-BBJ3PWyV.js";
+import { p as parseAndJoinStyles, c as parseVariableTokens } from "../parse-styles-BgVqQAni.js";
 import { mergeObjects, mergeFactories } from "../css/merge.js";
-import { parseTemplates, getTemplateTypes, getTemplateVariantMaps } from "../parsers/index.js";
 import { getPackageJson } from "./get-files.js";
+import { parseTemplates, getTemplateTypes, getTemplateVariantMaps } from "../parsers/index.js";
 import console from "console";
 const logger = createLogger({
   level: "debug",
@@ -627,9 +626,6 @@ ${css}
       writeFileSync(tsTokensPath, tsTokensTypes);
       const configCachePath = join(destDir, "cache/config-cache.json");
       writeFileSync(configCachePath, JSON.stringify(configCacheContent, null, 2));
-      const corePackageRoot = getCorePackageRoot();
-      const configCacheSecondaryPath = join(corePackageRoot, "cache/config-cache.json");
-      writeFileSync(configCacheSecondaryPath, JSON.stringify(configCacheContent, null, 2));
     });
     __publicField(this, "compileSaltyFile", async (sourceFilePath, outputDirectory) => {
       const hashedName = toHash(sourceFilePath);

package/css/index.cjs

@@ -4,12 +4,9 @@ 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,4 +2,3 @@ export * from './keyframes';
 export * from './media';
 export * from './token';
 export * from './merge';
-export * from './dynamic-styles';

package/css/index.js

@@ -2,11 +2,8 @@ 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,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-lOMGe_c5.cjs");
-const toHash = require("../to-hash-C05Y906F.cjs");
+const parseStyles = require("../parse-styles-BbI-2wdn.cjs");
+const toHash = require("../to-hash-DT2ImSPA.cjs");
 const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
   const modifyKeyframes = async (params = {}) => {
     const animationName = _name || toHash.toHash(keyframes2);

package/css/keyframes.js

@@ -1,5 +1,5 @@
-import { p as parseAndJoinStyles } from "../parse-styles-BBJ3PWyV.js";
-import { t as toHash } from "../to-hash-DAN2LcHK.js";
+import { p as parseAndJoinStyles } from "../parse-styles-BgVqQAni.js";
+import { t as toHash } from "../to-hash-DSoCPs8D.js";
 const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
   const modifyKeyframes = async (params = {}) => {
     const animationName = _name || toHash(keyframes2);

package/factories/index.cjs

@@ -3,8 +3,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);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dashCase = require("../dash-case-DIwKaYgE.cjs");
-const toHash = require("../to-hash-C05Y906F.cjs");
+const toHash = require("../to-hash-DT2ImSPA.cjs");
 const css_media = require("../css/media.cjs");
 const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
 const FONT_FORMAT_BY_EXTENSION = {
@@ -35,11 +34,11 @@ const normalizeVariable = (variable) => {
   const trimmed = variable.trim();
   const stripped = trimmed.replace(/^--/, "");
   if (!stripped) throw new Error(`defineFont: invalid \`variable\` value "${variable}".`);
-  return `--${dashCase.dashCase(stripped)}`;
+  return `--${toHash.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.dashCase(options.name)}-${toHash.toHash(hashSource, 6)}`;
+  return `--font-${toHash.dashCase(options.name)}-${toHash.toHash(hashSource, 6)}`;
 };
 const quoteFamily = (name) => {
   if (/^["'].*["']$/.test(name)) return name;
@@ -90,7 +89,7 @@ class FontFactory {
     }
     this.variable = _options.variable ? normalizeVariable(_options.variable) : deriveVariable(_options);
     this.fontFamily = buildFontFamilyValue(_options.name, _options.fallback);
-    this.className = `font-${dashCase.dashCase(_options.name)}`;
+    this.className = `font-${toHash.dashCase(_options.name)}`;
   }
   get isDefineFont() {
     return true;

package/factories/index.js

@@ -1,8 +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 { d as dashCase } from "../dash-case-DblXvymC.js";
-import { t as toHash } from "../to-hash-DAN2LcHK.js";
+import { d as dashCase, t as toHash } from "../to-hash-DSoCPs8D.js";
 import { media } from "../css/media.js";
 import { T, a, d } from "../define-templates-CVhhgPnd.js";
 const FONT_FORMAT_BY_EXTENSION = {

package/generators/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classNameGenerator = require("../class-name-generator-BEOEMEKX.cjs");
-const dashCase = require("../dash-case-DIwKaYgE.cjs");
+const classNameGenerator = require("../class-name-generator-MtPkBfM_.cjs");
+const toHash = require("../to-hash-DT2ImSPA.cjs");
 class StyledGenerator extends classNameGenerator.StylesGenerator {
   constructor(tagName, _params) {
     super(_params);
@@ -35,7 +35,7 @@ class StyledGenerator extends classNameGenerator.StylesGenerator {
       if (matches) {
         matches.forEach((match) => {
           const value = match.replace(/\{(?:-)?props\.([^}]+)\}/gi, "$1");
-          const dashed = dashCase.dashCase(value);
+          const dashed = toHash.dashCase(value);
           if (value) propValueKeys.add(dashed);
         });
       }

package/generators/index.js

@@ -1,6 +1,6 @@
-import { S as StylesGenerator } from "../class-name-generator-B0WkxoIg.js";
-import { C } from "../class-name-generator-B0WkxoIg.js";
-import { d as dashCase } from "../dash-case-DblXvymC.js";
+import { S as StylesGenerator } from "../class-name-generator-CUEoPowv.js";
+import { C } from "../class-name-generator-CUEoPowv.js";
+import { d as dashCase } from "../to-hash-DSoCPs8D.js";
 class StyledGenerator extends StylesGenerator {
   constructor(tagName, _params) {
     super(_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-BEOEMEKX.cjs");
+const classNameGenerator = require("../class-name-generator-MtPkBfM_.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-B0WkxoIg.js";
+import { C as ClassNameGenerator } from "../class-name-generator-CUEoPowv.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.33",
+  "version": "0.1.0-alpha.35",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -87,10 +87,6 @@
       "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"
@@ -119,10 +115,6 @@
       "import": "./server/index.js",
       "require": "./server/index.cjs"
     },
-    "./cache/resolve-dynamic-config-cache": {
-      "import": "./cache/resolve-dynamic-config-cache.js",
-      "require": "./cache/resolve-dynamic-config-cache.cjs"
-    },
     "./instances/classname-instance": {
       "import": "./instances/classname-instance.js",
       "require": "./instances/classname-instance.cjs"

package/{parse-styles-lOMGe_c5.cjs → parse-styles-BbI-2wdn.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-const dashCase = require("./dash-case-DIwKaYgE.cjs");
+const toHash = require("./to-hash-DT2ImSPA.cjs");
 const viewportClamp = require("./viewport-clamp-CEmzmcSj.cjs");
 const parseValueModifiers = (modifiers) => (value) => {
   if (typeof value !== "string") return void 0;
@@ -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].trim().replaceAll(".", "-"));
+    const variable = toHash.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})`;
@@ -84,8 +84,8 @@ const isVendorPrefixed = (key) => {
 };
 const propertyNameCheck = (key) => {
   if (key.startsWith("-")) return key;
-  if (isVendorPrefixed(key)) return `-${dashCase.dashCase(key)}`;
-  return dashCase.dashCase(key);
+  if (isVendorPrefixed(key)) return `-${toHash.dashCase(key)}`;
+  return toHash.dashCase(key);
 };
 const reportParserIssue = (strict, message) => {
   if (strict === true) throw new Error(`[salty-css] ${message}`);
@@ -94,6 +94,7 @@ const reportParserIssue = (strict, 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 keyframesAtRuleRegex = /^@(?:-(?:webkit|moz|o|ms)-)?keyframes\b/;
 const isRichTemplateNode = (node) => {
   if (!node || typeof node !== "object") return false;
   if (Array.isArray(node)) return false;
@@ -375,8 +376,9 @@ const parseStyles = async (styles, currentScope = "", config, omitTemplates = fa
       }
       if (_key.startsWith("@")) {
         if (bareAtRuleRegex.test(_key)) reportParserIssue(strict, `At-rule "${_key}" is missing its condition (e.g. "@media (min-width: 600px)").`);
+        const innerScope = keyframesAtRuleRegex.test(_key) ? "" : currentScope;
         const mediaQuery = ((_b = config == null ? void 0 : config.mediaQueries) == null ? void 0 : _b[_key]) || _key;
-        const results2 = await parseAndJoinStyles(value, currentScope, config);
+        const results2 = await parseAndJoinStyles(value, innerScope, config);
         const query = `${mediaQuery} { ${results2} }`;
         cssStyles.add(query);
         return void 0;

package/{parse-styles-BBJ3PWyV.js → parse-styles-BgVqQAni.js}

@@ -1,4 +1,4 @@
-import { d as dashCase } from "./dash-case-DblXvymC.js";
+import { d as dashCase } from "./to-hash-DSoCPs8D.js";
 import { d as defineViewportClamp } from "./viewport-clamp-K553uXu3.js";
 const parseValueModifiers = (modifiers) => (value) => {
   if (typeof value !== "string") return void 0;
@@ -93,6 +93,7 @@ const reportParserIssue = (strict, 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 keyframesAtRuleRegex = /^@(?:-(?:webkit|moz|o|ms)-)?keyframes\b/;
 const isRichTemplateNode = (node) => {
   if (!node || typeof node !== "object") return false;
   if (Array.isArray(node)) return false;
@@ -374,8 +375,9 @@ const parseStyles = async (styles, currentScope = "", config, omitTemplates = fa
       }
       if (_key.startsWith("@")) {
         if (bareAtRuleRegex.test(_key)) reportParserIssue(strict, `At-rule "${_key}" is missing its condition (e.g. "@media (min-width: 600px)").`);
+        const innerScope = keyframesAtRuleRegex.test(_key) ? "" : currentScope;
         const mediaQuery = ((_b = config == null ? void 0 : config.mediaQueries) == null ? void 0 : _b[_key]) || _key;
-        const results2 = await parseAndJoinStyles(value, currentScope, config);
+        const results2 = await parseAndJoinStyles(value, innerScope, config);
         const query = `${mediaQuery} { ${results2} }`;
         cssStyles.add(query);
         return void 0;

package/parsers/index.cjs

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-lOMGe_c5.cjs");
-const dashCase = require("../dash-case-DIwKaYgE.cjs");
-const toHash = require("../to-hash-C05Y906F.cjs");
+const parseStyles = require("../parse-styles-BbI-2wdn.cjs");
+const toHash = require("../to-hash-DT2ImSPA.cjs");
 const RICH_META_KEYS = /* @__PURE__ */ new Set(["base", "variants", "defaultVariants", "compoundVariants", "anyOfVariants"]);
 const isChildEntry = (key, value) => {
   if (RICH_META_KEYS.has(key)) return false;
@@ -13,7 +12,7 @@ const parseTemplates = async (obj, path = []) => {
   const classes = [];
   if (parseStyles.isRichTemplateNode(obj)) {
     const rich = obj;
-    const baseClassName = path.map((p) => dashCase.dashCase(String(p))).join("-");
+    const baseClassName = path.map((p) => toHash.dashCase(String(p))).join("-");
     if (rich.base) {
       const hashClass = "t_" + toHash.toHash(baseClassName, 4);
       const result = await parseStyles.parseAndJoinStyles(rich.base, `.${baseClassName}, .${hashClass}`);
@@ -24,7 +23,7 @@ const parseTemplates = async (obj, path = []) => {
         if (!valueMap || typeof valueMap !== "object") continue;
         for (const [value, styles] of Object.entries(valueMap)) {
           if (!styles || typeof styles !== "object") continue;
-          const variantClassName = `${baseClassName}-${dashCase.dashCase(axis)}-${dashCase.dashCase(value)}`;
+          const variantClassName = `${baseClassName}-${toHash.dashCase(axis)}-${toHash.dashCase(value)}`;
           const variantHashClass = "tv_" + toHash.toHash(variantClassName, 4);
           const result = await parseStyles.parseAndJoinStyles(styles, `.${variantClassName}, .${variantHashClass}`);
           classes.push(result);
@@ -50,7 +49,7 @@ const parseTemplates = async (obj, path = []) => {
     }
   }
   if (Object.keys(levelStyles).length) {
-    const className = path.map((p) => dashCase.dashCase(String(p))).join("-");
+    const className = path.map((p) => toHash.dashCase(String(p))).join("-");
     const hashClass = "t_" + toHash.toHash(className, 4);
     const result = await parseStyles.parseAndJoinStyles(levelStyles, `.${className}, .${hashClass}`);
     classes.push(result);

package/parsers/index.js

@@ -1,7 +1,6 @@
-import { i as isRichTemplateNode, p as parseAndJoinStyles } from "../parse-styles-BBJ3PWyV.js";
-import { a, d, e, c, r } from "../parse-styles-BBJ3PWyV.js";
-import { d as dashCase } from "../dash-case-DblXvymC.js";
-import { t as toHash } from "../to-hash-DAN2LcHK.js";
+import { i as isRichTemplateNode, p as parseAndJoinStyles } from "../parse-styles-BgVqQAni.js";
+import { a, d, e, c, r } from "../parse-styles-BgVqQAni.js";
+import { d as dashCase, t as toHash } from "../to-hash-DSoCPs8D.js";
 const RICH_META_KEYS = /* @__PURE__ */ new Set(["base", "variants", "defaultVariants", "compoundVariants", "anyOfVariants"]);
 const isChildEntry = (key, value) => {
   if (RICH_META_KEYS.has(key)) return false;

package/parsers/parser-regexes.d.ts

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

package/runtime/index.cjs

@@ -1,11 +1,24 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-lOMGe_c5.cjs");
+const parseStyles = require("../parse-styles-BbI-2wdn.cjs");
+const toHash = require("../to-hash-DT2ImSPA.cjs");
 const defineRuntime = (config) => {
-  const getDynamicStylesCss = async (styles, scope) => {
+  const className = (styles) => toHash.toHash(styles);
+  const css = async (styles, scope) => {
     const parsed = await parseStyles.parseStyles(styles, scope, config);
     return parsed.join("\n");
   };
-  return { getDynamicStylesCss };
+  const resolve = async (styles, scope) => {
+    const _className = className(styles);
+    const _css = await css(styles, scope || `.${_className}`);
+    return { className: _className, css: _css };
+  };
+  return {
+    className,
+    css,
+    resolve,
+    /** @deprecated Use `css` instead. Kept as an alias for backward compatibility with the standalone `getDynamicStylesCss` helper. */
+    getDynamicStylesCss: css
+  };
 };
 exports.defineRuntime = defineRuntime;

package/runtime/index.d.ts

@@ -2,6 +2,13 @@ import { CachedConfig, SaltyConfig } from '../config';
 import { BaseStyles } from '../types';
 type Config = Partial<SaltyConfig & CachedConfig>;
 export declare const defineRuntime: (config: Config) => {
+    className: (styles: BaseStyles) => string;
+    css: (styles: BaseStyles, scope?: string) => Promise<string>;
+    resolve: (styles: BaseStyles, scope?: string) => Promise<{
+        className: string;
+        css: string;
+    }>;
+    /** @deprecated Use `css` instead. Kept as an alias for backward compatibility with the standalone `getDynamicStylesCss` helper. */
     getDynamicStylesCss: (styles: BaseStyles, scope?: string) => Promise<string>;
 };
 export {};

package/runtime/index.js

@@ -1,10 +1,23 @@
-import { a as parseStyles } from "../parse-styles-BBJ3PWyV.js";
+import { a as parseStyles } from "../parse-styles-BgVqQAni.js";
+import { t as toHash } from "../to-hash-DSoCPs8D.js";
 const defineRuntime = (config) => {
-  const getDynamicStylesCss = async (styles, scope) => {
+  const className = (styles) => toHash(styles);
+  const css = async (styles, scope) => {
     const parsed = await parseStyles(styles, scope, config);
     return parsed.join("\n");
   };
-  return { getDynamicStylesCss };
+  const resolve = async (styles, scope) => {
+    const _className = className(styles);
+    const _css = await css(styles, scope || `.${_className}`);
+    return { className: _className, css: _css };
+  };
+  return {
+    className,
+    css,
+    resolve,
+    /** @deprecated Use `css` instead. Kept as an alias for backward compatibility with the standalone `getDynamicStylesCss` helper. */
+    getDynamicStylesCss: css
+  };
 };
 export {
   defineRuntime

package/{to-hash-DAN2LcHK.js → to-hash-DSoCPs8D.js}

@@ -1,3 +1,10 @@
+function dashCase(str) {
+  if (!str) return "";
+  if (typeof str !== "string") return dashCase(String(str));
+  return str.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (s, i) => {
+    return (i > 0 ? "-" : "") + s.toLowerCase();
+  });
+}
 const toAlphabeticChar = (code) => String.fromCharCode(code + (code > 25 ? 39 : 97));
 const toAlphabeticName = (code, length) => {
   let name = "";
@@ -21,5 +28,6 @@ const toHash = (value, length = 5) => {
   return toAlphabeticName(numericHash, length);
 };
 export {
+  dashCase as d,
   toHash as t
 };

package/{to-hash-C05Y906F.cjs → to-hash-DT2ImSPA.cjs}

@@ -1,4 +1,11 @@
 "use strict";
+function dashCase(str) {
+  if (!str) return "";
+  if (typeof str !== "string") return dashCase(String(str));
+  return str.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (s, i) => {
+    return (i > 0 ? "-" : "") + s.toLowerCase();
+  });
+}
 const toAlphabeticChar = (code) => String.fromCharCode(code + (code > 25 ? 39 : 97));
 const toAlphabeticName = (code, length) => {
   let name = "";
@@ -21,4 +28,5 @@ const toHash = (value, length = 5) => {
   const numericHash = toPhash(5381, JSON.stringify(value)) >>> 0;
   return toAlphabeticName(numericHash, length);
 };
+exports.dashCase = dashCase;
 exports.toHash = toHash;

package/util/index.cjs

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dashCase = require("../dash-case-DIwKaYgE.cjs");
+const toHash = require("../to-hash-DT2ImSPA.cjs");
 const pascalCase = require("../pascal-case-By_l58S-.cjs");
-const toHash = require("../to-hash-C05Y906F.cjs");
 function camelCase(str) {
   if (!str) return "";
   if (typeof str !== "string") return camelCase(String(str));
   return str.replace(/\s/g, "-").replace(/-([a-z])/g, (g) => g[1].toUpperCase());
 }
-exports.dashCase = dashCase.dashCase;
-exports.pascalCase = pascalCase.pascalCase;
+exports.dashCase = toHash.dashCase;
 exports.toHash = toHash.toHash;
+exports.pascalCase = pascalCase.pascalCase;
 exports.camelCase = camelCase;

package/util/index.js

@@ -1,6 +1,5 @@
-import { d } from "../dash-case-DblXvymC.js";
+import { d, t } from "../to-hash-DSoCPs8D.js";
 import { p } from "../pascal-case-F3Usi5Wf.js";
-import { t } from "../to-hash-DAN2LcHK.js";
 function camelCase(str) {
   if (!str) return "";
   if (typeof str !== "string") return camelCase(String(str));

package/util/module-type.d.ts

@@ -1 +1 @@
-export declare const detectCurrentModuleType: (dirname: string) => Promise<"esm" | "cjs">;
+export declare const detectCurrentModuleType: (dirname: string) => Promise<"cjs" | "esm">;

package/cache/resolve-dynamic-config-cache.cjs

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const promises = require("fs/promises");
-const path = require("path");
-const resolveDynamicConfigCache = async () => {
-  const currentDir = process.cwd();
-  const filename = "config-cache.json";
-  const patterns = ["", "saltygen", "src", "src/saltygen", "cache", "src/cache", "saltygen/cache", "src/saltygen/cache"];
-  let contents = "";
-  for (const pattern of patterns) {
-    const potentialPath = path.join(currentDir, pattern, filename);
-    try {
-      contents = await promises.readFile(potentialPath, "utf8");
-      break;
-    } catch {
-    }
-  }
-  if (!contents) {
-    console.warn(`Could not find config cache file (${filename}) in any of the expected locations.`);
-    return {};
-  }
-  return JSON.parse(contents);
-};
-exports.resolveDynamicConfigCache = resolveDynamicConfigCache;

package/cache/resolve-dynamic-config-cache.d.ts

@@ -1 +0,0 @@
-export declare const resolveDynamicConfigCache: () => Promise<any>;

package/cache/resolve-dynamic-config-cache.js

@@ -1,24 +0,0 @@
-import { readFile } from "fs/promises";
-import { join } from "path";
-const resolveDynamicConfigCache = async () => {
-  const currentDir = process.cwd();
-  const filename = "config-cache.json";
-  const patterns = ["", "saltygen", "src", "src/saltygen", "cache", "src/cache", "saltygen/cache", "src/saltygen/cache"];
-  let contents = "";
-  for (const pattern of patterns) {
-    const potentialPath = join(currentDir, pattern, filename);
-    try {
-      contents = await readFile(potentialPath, "utf8");
-      break;
-    } catch {
-    }
-  }
-  if (!contents) {
-    console.warn(`Could not find config cache file (${filename}) in any of the expected locations.`);
-    return {};
-  }
-  return JSON.parse(contents);
-};
-export {
-  resolveDynamicConfigCache
-};

package/css/dynamic-styles.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-lOMGe_c5.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

@@ -1,10 +0,0 @@
-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

@@ -1,15 +0,0 @@
-import { a as parseStyles } from "../parse-styles-BBJ3PWyV.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/dash-case-DIwKaYgE.cjs

@@ -1,9 +0,0 @@
-"use strict";
-function dashCase(str) {
-  if (!str) return "";
-  if (typeof str !== "string") return dashCase(String(str));
-  return str.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (s, i) => {
-    return (i > 0 ? "-" : "") + s.toLowerCase();
-  });
-}
-exports.dashCase = dashCase;

package/dash-case-DblXvymC.js

@@ -1,10 +0,0 @@
-function dashCase(str) {
-  if (!str) return "";
-  if (typeof str !== "string") return dashCase(String(str));
-  return str.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (s, i) => {
-    return (i > 0 ? "-" : "") + s.toLowerCase();
-  });
-}
-export {
-  dashCase as d
-};