@mochi-css/vanilla 3.0.0 → 4.0.0

package/dist/config/index.mjs

@@ -0,0 +1,284 @@
+import { a as GlobalCssObject, c as KeyframesObject, d as isMochiCSS, f as mergeMochiCss, l as MochiCSS, p as CSSObject } from "../src-CJmAtVxm.mjs";
+import { createExtractorsPlugin } from "@mochi-css/plugins";
+import { getErrorMessage } from "@mochi-css/builder";
+import { styledIdPlugin } from "@mochi-css/config";
+
+//#region src/config/VanillaCssGenerator.ts
+const emptySpan = {
+	start: 0,
+	end: 0,
+	ctxt: 0
+};
+function strLit(value) {
+	return {
+		type: "StringLiteral",
+		span: emptySpan,
+		value,
+		raw: void 0
+	};
+}
+function arrExpr(elements) {
+	return {
+		type: "ArrayExpression",
+		span: emptySpan,
+		elements: elements.map((e) => ({ expression: e }))
+	};
+}
+function objExpr(properties) {
+	return {
+		type: "ObjectExpression",
+		span: emptySpan,
+		properties: properties.map(([key, value]) => ({
+			type: "KeyValueProperty",
+			key: strLit(key),
+			value
+		}))
+	};
+}
+function mochiCssNode(instance) {
+	const classNamesNode = arrExpr(instance.classNames.map(strLit));
+	const variantClassNamesNode = objExpr(Object.entries(instance.variantClassNames).map(([varKey, opts]) => [varKey, objExpr(Object.entries(opts).map(([optKey, cls]) => [optKey, strLit(cls)]))]));
+	const defaultVariantsNode = objExpr(Object.entries(instance.defaultVariants).filter(([, v]) => v != null).map(([k, v]) => [k, strLit(String(v))]));
+	return {
+		type: "NewExpression",
+		span: emptySpan,
+		ctxt: 0,
+		callee: {
+			type: "Identifier",
+			span: emptySpan,
+			ctxt: 0,
+			value: "MochiCSS",
+			optional: false
+		},
+		arguments: [
+			{ expression: classNamesNode },
+			{ expression: variantClassNamesNode },
+			{ expression: defaultVariantsNode }
+		]
+	};
+}
+var VanillaCssGenerator = class {
+	collectedStyles = [];
+	generatedMochiCss = [];
+	constructor(onDiagnostic) {
+		this.onDiagnostic = onDiagnostic;
+	}
+	collectArgs(source, args) {
+		const validArgs = [];
+		let stableId;
+		for (const arg of args) {
+			if (typeof arg === "string") {
+				stableId = arg;
+				continue;
+			}
+			if (arg == null || typeof arg !== "object") {
+				this.onDiagnostic?.({
+					code: "MOCHI_INVALID_STYLE_ARG",
+					message: `Expected style object, got ${arg === null ? "null" : typeof arg}`,
+					severity: "warning",
+					file: source
+				});
+				continue;
+			}
+			if (isMochiCSS(arg)) continue;
+			validArgs.push(arg);
+		}
+		if (validArgs.length > 0) this.collectedStyles.push({
+			source,
+			args: validArgs,
+			stableId
+		});
+	}
+	async generateStyles() {
+		this.generatedMochiCss = [];
+		const filesCss = /* @__PURE__ */ new Map();
+		for (const { source, args, stableId } of this.collectedStyles) {
+			let css = filesCss.get(source);
+			if (!css) {
+				css = /* @__PURE__ */ new Set();
+				filesCss.set(source, css);
+			}
+			const mochiInstances = [];
+			for (const style of args) try {
+				const cssObj = new CSSObject(style, stableId);
+				css.add(cssObj.asCssString());
+				mochiInstances.push(MochiCSS.from(cssObj));
+			} catch (err) {
+				const message = getErrorMessage(err);
+				this.onDiagnostic?.({
+					code: "MOCHI_STYLE_GENERATION",
+					message: `Failed to generate CSS: ${message}`,
+					severity: "warning",
+					file: source
+				});
+			}
+			if (mochiInstances.length > 0) this.generatedMochiCss.push({
+				source,
+				instance: mergeMochiCss(mochiInstances)
+			});
+		}
+		const files = {};
+		for (const [source, css] of filesCss) files[source] = [...css.values()].sort().join("\n\n");
+		return { files };
+	}
+	getArgReplacements() {
+		return this.generatedMochiCss.map(({ source, instance }) => ({
+			source,
+			expression: mochiCssNode(instance)
+		}));
+	}
+};
+
+//#endregion
+//#region src/config/VanillaCssExtractor.ts
+var VanillaCssExtractor = class {
+	importPath;
+	symbolName;
+	constructor(importPath, symbolName, extractor) {
+		this.extractor = extractor;
+		this.importPath = importPath;
+		this.symbolName = symbolName;
+	}
+	extractStaticArgs(call) {
+		return this.extractor(call);
+	}
+	startGeneration(onDiagnostic) {
+		return new VanillaCssGenerator(onDiagnostic);
+	}
+};
+const mochiCssFunctionExtractor = new VanillaCssExtractor("@mochi-css/vanilla", "css", (call) => call.arguments.map((a) => a.expression));
+
+//#endregion
+//#region src/config/VanillaKeyframesGenerator.ts
+var VanillaKeyframesGenerator = class {
+	collectedStyles = [];
+	constructor(onDiagnostic) {
+		this.onDiagnostic = onDiagnostic;
+	}
+	collectArgs(source, args) {
+		if (args.length === 0 || args[0] == null || typeof args[0] !== "object") {
+			this.onDiagnostic?.({
+				code: "MOCHI_INVALID_STYLE_ARG",
+				message: `Expected keyframe stops object, got ${args[0] === null ? "null" : typeof args[0]}`,
+				severity: "warning",
+				file: source
+			});
+			return;
+		}
+		this.collectedStyles.push({
+			source,
+			stops: args[0]
+		});
+	}
+	async generateStyles() {
+		const filesCss = /* @__PURE__ */ new Map();
+		for (const { source, stops } of this.collectedStyles) {
+			let css = filesCss.get(source);
+			if (!css) {
+				css = /* @__PURE__ */ new Set();
+				filesCss.set(source, css);
+			}
+			try {
+				const obj = new KeyframesObject(stops);
+				css.add(obj.asCssString());
+			} catch (err) {
+				const message = getErrorMessage(err);
+				this.onDiagnostic?.({
+					code: "MOCHI_STYLE_GENERATION",
+					message: `Failed to generate keyframes CSS: ${message}`,
+					severity: "warning",
+					file: source
+				});
+			}
+		}
+		const files = {};
+		for (const [source, css] of filesCss) files[source] = [...css.values()].sort().join("\n\n");
+		return { files };
+	}
+};
+
+//#endregion
+//#region src/config/VanillaKeyframesExtractor.ts
+var VanillaKeyframesExtractor = class {
+	importPath = "@mochi-css/vanilla";
+	symbolName = "keyframes";
+	extractStaticArgs(call) {
+		return call.arguments.slice(0, 1).map((a) => a.expression);
+	}
+	startGeneration(onDiagnostic) {
+		return new VanillaKeyframesGenerator(onDiagnostic);
+	}
+};
+const mochiKeyframesFunctionExtractor = new VanillaKeyframesExtractor();
+
+//#endregion
+//#region src/config/VanillaGlobalCssGenerator.ts
+var VanillaGlobalCssGenerator = class {
+	collectedStyles = [];
+	constructor(onDiagnostic) {
+		this.onDiagnostic = onDiagnostic;
+	}
+	collectArgs(source, args) {
+		if (args.length === 0 || args[0] == null || typeof args[0] !== "object") {
+			this.onDiagnostic?.({
+				code: "MOCHI_INVALID_STYLE_ARG",
+				message: `Expected global CSS styles object, got ${args[0] === null ? "null" : typeof args[0]}`,
+				severity: "warning",
+				file: source
+			});
+			return;
+		}
+		this.collectedStyles.push({
+			source,
+			styles: args[0]
+		});
+	}
+	async generateStyles() {
+		const allCss = /* @__PURE__ */ new Set();
+		for (const { source, styles } of this.collectedStyles) try {
+			const obj = new GlobalCssObject(styles);
+			allCss.add(obj.asCssString());
+		} catch (err) {
+			const message = getErrorMessage(err);
+			this.onDiagnostic?.({
+				code: "MOCHI_STYLE_GENERATION",
+				message: `Failed to generate global CSS: ${message}`,
+				severity: "warning",
+				file: source
+			});
+		}
+		return { global: [...allCss].sort().join("\n\n") };
+	}
+};
+
+//#endregion
+//#region src/config/VanillaGlobalCssExtractor.ts
+var VanillaGlobalCssExtractor = class {
+	importPath = "@mochi-css/vanilla";
+	symbolName = "globalCss";
+	extractStaticArgs(call) {
+		return call.arguments.slice(0, 1).map((a) => a.expression);
+	}
+	startGeneration(onDiagnostic) {
+		return new VanillaGlobalCssGenerator(onDiagnostic);
+	}
+};
+const mochiGlobalCssFunctionExtractor = new VanillaGlobalCssExtractor();
+
+//#endregion
+//#region src/config/index.ts
+const defaultVanillaExtractors = [
+	mochiCssFunctionExtractor,
+	mochiKeyframesFunctionExtractor,
+	mochiGlobalCssFunctionExtractor
+];
+function defineConfig(config) {
+	const { extractors = [],...rest } = config;
+	return {
+		...rest,
+		plugins: [createExtractorsPlugin([...defaultVanillaExtractors, ...extractors]), ...rest.plugins ?? []]
+	};
+}
+
+//#endregion
+export { VanillaCssExtractor, VanillaCssGenerator, VanillaGlobalCssExtractor, VanillaGlobalCssGenerator, VanillaKeyframesExtractor, VanillaKeyframesGenerator, defineConfig, mochiCssFunctionExtractor, mochiGlobalCssFunctionExtractor, mochiKeyframesFunctionExtractor, styledIdPlugin };

package/dist/index.d.mts

@@ -1,4 +1,5 @@
-import { ObsoleteProperties, Properties } from "csstype";
+import { ObsoleteProperties, Properties, PropertiesHyphen } from "csstype";
+import { numberToBase62, shortHash } from "@mochi-css/core";
 
 //#region src/values/index.d.ts
 type CssVar = `--${string}`;
@@ -274,7 +275,6 @@ declare const propertyUnits: {
   readonly interestDelay: "ms";
   readonly interestDelayEnd: "ms";
   readonly interestDelayStart: "ms";
-  readonly itemFlow: "px";
   readonly left: "px";
   readonly letterSpacing: "px";
   readonly lineHeight: "px";
@@ -414,12 +414,12 @@ declare const propertyUnits: {
   readonly textSizeAdjust: "%";
   readonly textUnderlineOffset: "px";
   readonly timelineTrigger: "px";
-  readonly timelineTriggerExitRange: "px";
-  readonly timelineTriggerExitRangeEnd: "px";
-  readonly timelineTriggerExitRangeStart: "px";
-  readonly timelineTriggerRange: "px";
-  readonly timelineTriggerRangeEnd: "px";
-  readonly timelineTriggerRangeStart: "px";
+  readonly timelineTriggerActivationRange: "px";
+  readonly timelineTriggerActivationRangeEnd: "px";
+  readonly timelineTriggerActivationRangeStart: "px";
+  readonly timelineTriggerActiveRange: "px";
+  readonly timelineTriggerActiveRangeEnd: "px";
+  readonly timelineTriggerActiveRangeStart: "px";
   readonly top: "px";
   readonly transformOrigin: "px";
   readonly transition: "ms";
@@ -650,7 +650,7 @@ declare class CSSObject<V extends AllVariants = DefaultVariants> {
   }: MochiCSSProps<V>, className?: string);
   /**
    * Serializes the entire CSS object to a CSS string.
-   * Outputs main block first, then all variant blocks in sorted order.
+   * Outputs the main block first, then all variant blocks in sorted order.
    * @returns Complete CSS string ready for injection into a stylesheet
    */
   asCssString(): string;
@@ -737,7 +737,11 @@ declare class MochiKeyframes {
 declare function keyframes(stops: KeyframeStops): MochiKeyframes;
 //#endregion
 //#region src/globalCssObject.d.ts
-type GlobalCssStyles = Record<string, StyleProps>;
+/** CSS properties accepting both camelCase and kebab-case names with permissive string values */
+type GlobalCssProperties = { [K in keyof (Properties & PropertiesHyphen)]?: string | number } & Record<string, unknown>;
+type GlobalCssStyles = {
+  [selector: string]: GlobalCssProperties | GlobalCssStyles;
+};
 /**
  * CSS object model for global (non-scoped) styles.
  * Accepts a map of CSS selectors to style objects and serializes them
@@ -811,28 +815,4 @@ interface SupportsHelper {
 /** Helper for constructing `@supports` at-rule keys. */
 declare const supports: SupportsHelper;
 //#endregion
-//#region src/hash.d.ts
-/**
- * Hashing utilities for generating short, deterministic class names.
- * Uses djb2 algorithm for fast string hashing.
- * @module hash
- */
-/**
- * Converts a number to a base-62 string representation.
- * @param num - The number to convert
- * @param maxLength - Optional maximum length of the output string
- * @returns Base-62 encoded string representation of the number
- */
-declare function numberToBase62(num: number, maxLength?: number): string;
-/**
- * Generates a short hash string from input using the djb2 algorithm.
- * Used to create unique, deterministic CSS class names from style content.
- * @param input - The string to hash
- * @param length - Maximum length of the hash output (default: 8)
- * @returns A short, css-safe hash string
- * @example
- * shortHash("color: red;") // Returns something like "A1b2C3d4"
- */
-declare function shortHash(input: string, length?: number): string;
-//#endregion
-export { AllVariants, type AtRuleKey, CSSObject, CompoundVariant, CssLike, CssLikeObject, CssObjectBlock, CssObjectSubBlock, CssVar, CssVarVal, DefaultVariants, GlobalCssObject, type GlobalCssStyles, type KeyframeStops, KeyframesObject, MergeCSSVariants, MochiCSS, MochiCSSProps, MochiKeyframes, MochiSelector, RefineVariants, type StyleProps, Token, VariantProps, camelToKebab, container, createToken, css, cssFromProps, globalCss, isAtRuleKey, isMochiCSS, kebabToCamel, keyframes, media, mergeMochiCss, numberToBase62, shortHash, supports };
+export { AllVariants, type AtRuleKey, CSSObject, CompoundVariant, CssLike, CssLikeObject, CssObjectBlock, CssObjectSubBlock, CssVar, CssVarVal, DefaultVariants, GlobalCssObject, GlobalCssProperties, type GlobalCssStyles, type KeyframeStops, KeyframesObject, MergeCSSVariants, MochiCSS, MochiCSSProps, MochiKeyframes, MochiSelector, RefineVariantType, RefineVariants, type StyleProps, Token, VariantProps, camelToKebab, container, createToken, css, cssFromProps, globalCss, isAtRuleKey, isMochiCSS, kebabToCamel, keyframes, media, mergeMochiCss, numberToBase62, shortHash, supports };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { ObsoleteProperties, Properties } from "csstype";
+import { ObsoleteProperties, Properties, PropertiesHyphen } from "csstype";
+import { numberToBase62, shortHash } from "@mochi-css/core";
 
 //#region src/values/index.d.ts
 type CssVar = `--${string}`;
@@ -274,7 +275,6 @@ declare const propertyUnits: {
   readonly interestDelay: "ms";
   readonly interestDelayEnd: "ms";
   readonly interestDelayStart: "ms";
-  readonly itemFlow: "px";
   readonly left: "px";
   readonly letterSpacing: "px";
   readonly lineHeight: "px";
@@ -414,12 +414,12 @@ declare const propertyUnits: {
   readonly textSizeAdjust: "%";
   readonly textUnderlineOffset: "px";
   readonly timelineTrigger: "px";
-  readonly timelineTriggerExitRange: "px";
-  readonly timelineTriggerExitRangeEnd: "px";
-  readonly timelineTriggerExitRangeStart: "px";
-  readonly timelineTriggerRange: "px";
-  readonly timelineTriggerRangeEnd: "px";
-  readonly timelineTriggerRangeStart: "px";
+  readonly timelineTriggerActivationRange: "px";
+  readonly timelineTriggerActivationRangeEnd: "px";
+  readonly timelineTriggerActivationRangeStart: "px";
+  readonly timelineTriggerActiveRange: "px";
+  readonly timelineTriggerActiveRangeEnd: "px";
+  readonly timelineTriggerActiveRangeStart: "px";
   readonly top: "px";
   readonly transformOrigin: "px";
   readonly transition: "ms";
@@ -650,7 +650,7 @@ declare class CSSObject<V extends AllVariants = DefaultVariants> {
   }: MochiCSSProps<V>, className?: string);
   /**
    * Serializes the entire CSS object to a CSS string.
-   * Outputs main block first, then all variant blocks in sorted order.
+   * Outputs the main block first, then all variant blocks in sorted order.
    * @returns Complete CSS string ready for injection into a stylesheet
    */
   asCssString(): string;
@@ -737,7 +737,11 @@ declare class MochiKeyframes {
 declare function keyframes(stops: KeyframeStops): MochiKeyframes;
 //#endregion
 //#region src/globalCssObject.d.ts
-type GlobalCssStyles = Record<string, StyleProps>;
+/** CSS properties accepting both camelCase and kebab-case names with permissive string values */
+type GlobalCssProperties = { [K in keyof (Properties & PropertiesHyphen)]?: string | number } & Record<string, unknown>;
+type GlobalCssStyles = {
+  [selector: string]: GlobalCssProperties | GlobalCssStyles;
+};
 /**
  * CSS object model for global (non-scoped) styles.
  * Accepts a map of CSS selectors to style objects and serializes them
@@ -811,29 +815,5 @@ interface SupportsHelper {
 /** Helper for constructing `@supports` at-rule keys. */
 declare const supports: SupportsHelper;
 //#endregion
-//#region src/hash.d.ts
-/**
- * Hashing utilities for generating short, deterministic class names.
- * Uses djb2 algorithm for fast string hashing.
- * @module hash
- */
-/**
- * Converts a number to a base-62 string representation.
- * @param num - The number to convert
- * @param maxLength - Optional maximum length of the output string
- * @returns Base-62 encoded string representation of the number
- */
-declare function numberToBase62(num: number, maxLength?: number): string;
-/**
- * Generates a short hash string from input using the djb2 algorithm.
- * Used to create unique, deterministic CSS class names from style content.
- * @param input - The string to hash
- * @param length - Maximum length of the hash output (default: 8)
- * @returns A short, css-safe hash string
- * @example
- * shortHash("color: red;") // Returns something like "A1b2C3d4"
- */
-declare function shortHash(input: string, length?: number): string;
-//#endregion
-export { AllVariants, type AtRuleKey, CSSObject, CompoundVariant, CssLike, CssLikeObject, CssObjectBlock, CssObjectSubBlock, CssVar, CssVarVal, DefaultVariants, GlobalCssObject, type GlobalCssStyles, type KeyframeStops, KeyframesObject, MergeCSSVariants, MochiCSS, MochiCSSProps, MochiKeyframes, MochiSelector, RefineVariants, type StyleProps, Token, VariantProps, camelToKebab, container, createToken, css, cssFromProps, globalCss, isAtRuleKey, isMochiCSS, kebabToCamel, keyframes, media, mergeMochiCss, numberToBase62, shortHash, supports };
+export { AllVariants, type AtRuleKey, CSSObject, CompoundVariant, CssLike, CssLikeObject, CssObjectBlock, CssObjectSubBlock, CssVar, CssVarVal, DefaultVariants, GlobalCssObject, GlobalCssProperties, type GlobalCssStyles, type KeyframeStops, KeyframesObject, MergeCSSVariants, MochiCSS, MochiCSSProps, MochiKeyframes, MochiSelector, RefineVariantType, RefineVariants, type StyleProps, Token, VariantProps, camelToKebab, container, createToken, css, cssFromProps, globalCss, isAtRuleKey, isMochiCSS, kebabToCamel, keyframes, media, mergeMochiCss, numberToBase62, shortHash, supports };
 //# sourceMappingURL=index.d.ts.map