@mochi-css/vanilla 0.1.0 → 1.0.1

package/dist/index.js

@@ -28,45 +28,6 @@ clsx = __toESM(clsx);
 let react = require("react");
 react = __toESM(react);
 
-//#region src/values/number.ts
-var NumericValue = class {
-	constructor(value, suffix) {
-		this.value = value;
-		this.suffix = suffix;
-	}
-	toString() {
-		return `${this.value}${this.suffix}`;
-	}
-};
-
-//#endregion
-//#region src/values/length.ts
-var PixelValue = class extends NumericValue {
-	constructor(value) {
-		super(value, "px");
-	}
-};
-var PercentValue = class extends NumericValue {
-	constructor(value) {
-		super(value, "%");
-	}
-};
-function asLength(value) {
-	switch (typeof value) {
-		case "number": return `${value}px`;
-		case "string": return value;
-		default: return asLength(value.value);
-	}
-}
-
-//#endregion
-//#region src/values/color.ts
-function asColor(value) {
-	if (typeof value === "string") return value;
-	return value.value;
-}
-
-//#endregion
 //#region src/token.ts
 /**
 * Represents a CSS custom property (design token) with type information.
@@ -119,77 +80,384 @@ function createToken(name) {
 	return new Token(name);
 }
 
+//#endregion
+//#region src/propertyUnits.generated.ts
+const propertyUnits = {
+	animation: "ms",
+	animationDelay: "ms",
+	animationDuration: "ms",
+	animationRange: "px",
+	animationRangeCenter: "px",
+	animationRangeEnd: "px",
+	animationRangeStart: "px",
+	background: "px",
+	backgroundPosition: "px",
+	backgroundPositionBlock: "px",
+	backgroundPositionInline: "px",
+	backgroundPositionX: "px",
+	backgroundPositionY: "px",
+	backgroundSize: "px",
+	backgroundTbd: "px",
+	baselineShift: "px",
+	blockSize: "px",
+	blockStep: "px",
+	blockStepSize: "px",
+	border: "px",
+	borderBlock: "px",
+	borderBlockClip: "px",
+	borderBlockEnd: "px",
+	borderBlockEndClip: "px",
+	borderBlockEndRadius: "px",
+	borderBlockEndWidth: "px",
+	borderBlockStart: "px",
+	borderBlockStartClip: "px",
+	borderBlockStartRadius: "px",
+	borderBlockStartWidth: "px",
+	borderBlockWidth: "px",
+	borderBottom: "px",
+	borderBottomClip: "px",
+	borderBottomLeftRadius: "px",
+	borderBottomRadius: "px",
+	borderBottomRightRadius: "px",
+	borderBottomWidth: "px",
+	borderClip: "px",
+	borderEndEndRadius: "px",
+	borderEndStartRadius: "px",
+	borderImage: "%",
+	borderImageOutset: "px",
+	borderImageSlice: "%",
+	borderImageWidth: "px",
+	borderInline: "px",
+	borderInlineClip: "px",
+	borderInlineEnd: "px",
+	borderInlineEndClip: "px",
+	borderInlineEndRadius: "px",
+	borderInlineEndWidth: "px",
+	borderInlineStart: "px",
+	borderInlineStartClip: "px",
+	borderInlineStartRadius: "px",
+	borderInlineStartWidth: "px",
+	borderInlineWidth: "px",
+	borderLeft: "px",
+	borderLeftClip: "px",
+	borderLeftRadius: "px",
+	borderLeftWidth: "px",
+	borderLimit: "px",
+	borderRadius: "px",
+	borderRight: "px",
+	borderRightClip: "px",
+	borderRightRadius: "px",
+	borderRightWidth: "px",
+	borderSpacing: "px",
+	borderStartEndRadius: "px",
+	borderStartStartRadius: "px",
+	borderTop: "px",
+	borderTopClip: "px",
+	borderTopLeftRadius: "px",
+	borderTopRadius: "px",
+	borderTopRightRadius: "px",
+	borderTopWidth: "px",
+	borderWidth: "px",
+	bottom: "px",
+	boxShadow: "px",
+	boxShadowBlur: "px",
+	boxShadowOffset: "px",
+	boxShadowSpread: "px",
+	columnGap: "px",
+	columnHeight: "px",
+	columnRule: "px",
+	columnRuleEdgeInset: "px",
+	columnRuleEdgeInsetEnd: "px",
+	columnRuleEdgeInsetStart: "px",
+	columnRuleInset: "px",
+	columnRuleInsetEnd: "px",
+	columnRuleInsetStart: "px",
+	columnRuleInteriorInset: "px",
+	columnRuleInteriorInsetEnd: "px",
+	columnRuleInteriorInsetStart: "px",
+	columnRuleWidth: "px",
+	columns: "px",
+	columnWidth: "px",
+	containIntrinsicBlockSize: "px",
+	containIntrinsicHeight: "px",
+	containIntrinsicInlineSize: "px",
+	containIntrinsicSize: "px",
+	containIntrinsicWidth: "px",
+	corner: "px",
+	cornerBlockEnd: "px",
+	cornerBlockStart: "px",
+	cornerBottom: "px",
+	cornerBottomLeft: "px",
+	cornerBottomRight: "px",
+	cornerEndEnd: "px",
+	cornerEndStart: "px",
+	cornerInlineEnd: "px",
+	cornerInlineStart: "px",
+	cornerLeft: "px",
+	cornerRight: "px",
+	cornerStartEnd: "px",
+	cornerStartStart: "px",
+	cornerTop: "px",
+	cornerTopLeft: "px",
+	cornerTopRight: "px",
+	cx: "px",
+	cy: "px",
+	fillOpacity: "%",
+	fillPosition: "px",
+	fillSize: "px",
+	flex: "px",
+	flexBasis: "px",
+	floatOffset: "px",
+	floodOpacity: "%",
+	flowTolerance: "px",
+	font: "deg",
+	fontSize: "px",
+	fontStretch: "%",
+	fontStyle: "deg",
+	fontWidth: "%",
+	gap: "px",
+	grid: "px",
+	gridAutoColumns: "px",
+	gridAutoRows: "px",
+	gridColumnGap: "px",
+	gridGap: "px",
+	gridRowGap: "px",
+	gridTemplate: "px",
+	gridTemplateColumns: "px",
+	gridTemplateRows: "px",
+	height: "px",
+	hyphenateLimitZone: "px",
+	imageOrientation: "deg",
+	imageResolution: "dppx",
+	initialLetterWrap: "px",
+	inlineSize: "px",
+	inset: "px",
+	insetBlock: "px",
+	insetBlockEnd: "px",
+	insetBlockStart: "px",
+	insetInline: "px",
+	insetInlineEnd: "px",
+	insetInlineStart: "px",
+	interestDelay: "ms",
+	interestDelayEnd: "ms",
+	interestDelayStart: "ms",
+	itemFlow: "px",
+	left: "px",
+	letterSpacing: "px",
+	lineHeight: "px",
+	lineHeightStep: "px",
+	linePadding: "px",
+	margin: "px",
+	marginBlock: "px",
+	marginBlockEnd: "px",
+	marginBlockStart: "px",
+	marginBottom: "px",
+	marginInline: "px",
+	marginInlineEnd: "px",
+	marginInlineStart: "px",
+	marginLeft: "px",
+	marginRight: "px",
+	marginTop: "px",
+	mask: "px",
+	maskBorder: "%",
+	maskBorderOutset: "px",
+	maskBorderSlice: "%",
+	maskBorderWidth: "px",
+	maskPosition: "px",
+	maskSize: "px",
+	maxBlockSize: "px",
+	maxHeight: "px",
+	maxInlineSize: "px",
+	maxWidth: "px",
+	minBlockSize: "px",
+	minHeight: "px",
+	minInlineSize: "px",
+	minWidth: "px",
+	objectPosition: "px",
+	offset: "px",
+	offsetAnchor: "px",
+	offsetDistance: "px",
+	offsetPosition: "px",
+	offsetRotate: "deg",
+	opacity: "%",
+	outline: "px",
+	outlineOffset: "px",
+	outlineWidth: "px",
+	overflowClipMargin: "px",
+	overflowClipMarginBlock: "px",
+	overflowClipMarginBlockEnd: "px",
+	overflowClipMarginBlockStart: "px",
+	overflowClipMarginBottom: "px",
+	overflowClipMarginInline: "px",
+	overflowClipMarginInlineEnd: "px",
+	overflowClipMarginInlineStart: "px",
+	overflowClipMarginLeft: "px",
+	overflowClipMarginRight: "px",
+	overflowClipMarginTop: "px",
+	padding: "px",
+	paddingBlock: "px",
+	paddingBlockEnd: "px",
+	paddingBlockStart: "px",
+	paddingBottom: "px",
+	paddingInline: "px",
+	paddingInlineEnd: "px",
+	paddingInlineStart: "px",
+	paddingLeft: "px",
+	paddingRight: "px",
+	paddingTop: "px",
+	pause: "ms",
+	pauseAfter: "ms",
+	pauseBefore: "ms",
+	perspective: "px",
+	perspectiveOrigin: "px",
+	r: "px",
+	rest: "ms",
+	restAfter: "ms",
+	restBefore: "ms",
+	right: "px",
+	rotate: "deg",
+	rowGap: "px",
+	rowRule: "px",
+	rowRuleEdgeInset: "px",
+	rowRuleEdgeInsetEnd: "px",
+	rowRuleEdgeInsetStart: "px",
+	rowRuleInset: "px",
+	rowRuleInsetEnd: "px",
+	rowRuleInsetStart: "px",
+	rowRuleInteriorInset: "px",
+	rowRuleInteriorInsetEnd: "px",
+	rowRuleInteriorInsetStart: "px",
+	rowRuleWidth: "px",
+	rule: "px",
+	ruleEdgeInset: "px",
+	ruleInset: "px",
+	ruleInsetEnd: "px",
+	ruleInsetStart: "px",
+	ruleInteriorInset: "px",
+	ruleWidth: "px",
+	rx: "px",
+	ry: "px",
+	scale: "%",
+	scrollMargin: "px",
+	scrollMarginBlock: "px",
+	scrollMarginBlockEnd: "px",
+	scrollMarginBlockStart: "px",
+	scrollMarginBottom: "px",
+	scrollMarginInline: "px",
+	scrollMarginInlineEnd: "px",
+	scrollMarginInlineStart: "px",
+	scrollMarginLeft: "px",
+	scrollMarginRight: "px",
+	scrollMarginTop: "px",
+	scrollPadding: "px",
+	scrollPaddingBlock: "px",
+	scrollPaddingBlockEnd: "px",
+	scrollPaddingBlockStart: "px",
+	scrollPaddingBottom: "px",
+	scrollPaddingInline: "px",
+	scrollPaddingInlineEnd: "px",
+	scrollPaddingInlineStart: "px",
+	scrollPaddingLeft: "px",
+	scrollPaddingRight: "px",
+	scrollPaddingTop: "px",
+	shapeImageThreshold: "%",
+	shapeMargin: "px",
+	shapePadding: "px",
+	stopOpacity: "%",
+	strokeDasharray: "px",
+	strokeDashcorner: "px",
+	strokeDashCorner: "px",
+	strokeDashoffset: "px",
+	strokeOpacity: "%",
+	strokePosition: "px",
+	strokeSize: "px",
+	strokeWidth: "px",
+	tabSize: "px",
+	textDecoration: "px",
+	textDecorationInset: "px",
+	textDecorationThickness: "px",
+	textIndent: "px",
+	textShadow: "px",
+	textSizeAdjust: "%",
+	textUnderlineOffset: "px",
+	timelineTrigger: "px",
+	timelineTriggerExitRange: "px",
+	timelineTriggerExitRangeEnd: "px",
+	timelineTriggerExitRangeStart: "px",
+	timelineTriggerRange: "px",
+	timelineTriggerRangeEnd: "px",
+	timelineTriggerRangeStart: "px",
+	top: "px",
+	transformOrigin: "px",
+	transition: "ms",
+	transitionDelay: "ms",
+	transitionDuration: "ms",
+	translate: "px",
+	verticalAlign: "px",
+	viewTimeline: "px",
+	viewTimelineInset: "px",
+	voiceDuration: "ms",
+	voicePitch: "Hz",
+	voiceRange: "Hz",
+	voiceRate: "%",
+	width: "px",
+	wordSpacing: "px",
+	x: "px",
+	y: "px",
+	zoom: "%"
+};
+
 //#endregion
 //#region src/props.ts
 /**
-* Converts a CSS-like value to its string representation.
-* Handles strings, numbers, and wrapped values with a `.value` property.
-* @param v - The value to convert
-* @returns The string representation of the value
+* Converts a kebab-case string to camelCase.
 */
-function asEnum(v) {
-	if (typeof v === "string") return v;
-	if (typeof v === "number") return v.toString();
-	return v.value.toString();
+function kebabToCamel(str) {
+	return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+/**
+* Converts a camelCase string to kebab-case.
+*/
+function camelToKebab(str) {
+	return str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+}
+function getUnitForProperty(propertyName) {
+	return propertyName in propertyUnits ? propertyUnits[propertyName] : void 0;
 }
-const styles = {
-	borderBlockEndWidth: asLength,
-	borderBlockStartWidth: asLength,
-	borderBottomColor: asColor,
-	borderBottomLeftRadius: asLength,
-	borderBottomRightRadius: asLength,
-	borderBottomWidth: asLength,
-	borderEndEndRadius: asLength,
-	borderEndStartRadius: asLength,
-	borderInlineEndWidth: asLength,
-	borderInlineStartWidth: asLength,
-	borderLeftWidth: asLength,
-	borderRightWidth: asLength,
-	borderStartEndRadius: asLength,
-	borderStartStartRadius: asLength,
-	borderTopLeftRadius: asLength,
-	borderTopRightRadius: asLength,
-	borderTopWidth: asLength,
-	borderBlockWidth: asLength,
-	borderInlineWidth: asLength,
-	borderWidth: asLength,
-	gap: asLength,
-	height: asLength,
-	lineHeight: asLength,
-	marginBottom: asLength,
-	marginLeft: asLength,
-	marginRight: asLength,
-	marginTop: asLength,
-	paddingBottom: asLength,
-	paddingLeft: asLength,
-	paddingRight: asLength,
-	paddingTop: asLength,
-	width: asLength
-};
-/** Set of all known CSS property names in camelCase format */
-const knownPropertySet = new Set(known_css_properties.default.all.map(kebabToCamel));
 /**
-* Type guard that checks if a string starts with a specific prefix.
+* Converts a CSS-like value to its string representation.
+* For properties with known units, numbers are automatically suffixed.
 */
-function startsWith(value, prefix) {
-	return value.startsWith(prefix);
+function formatValue(value, propertyName, maxDepth = 10) {
+	if (maxDepth <= 0) return "";
+	if (typeof value === "string") return value;
+	if (typeof value === "number") {
+		const unit = getUnitForProperty(propertyName);
+		if (unit === "%") return `${value * 100}${unit}`;
+		if (value === 0) return "0";
+		return unit ? `${value}${unit}` : value.toString();
+	}
+	return formatValue(value.value, propertyName, maxDepth - 1);
 }
+const knownPropertySet = new Set(known_css_properties.default.all.map(kebabToCamel));
 /**
 * Checks if a property name is a CSS custom property (variable).
 */
 function isCssVariableName(key) {
-	return startsWith(key, "--");
+	return key.startsWith("--");
 }
 /**
 * Converts a CSS-like value to a string for use as a CSS variable value.
 * @param value - The value to convert (string, number, or wrapped value)
+* @param maxDepth - Maximum recursion depth for evaluating the value
 * @returns The string representation
 */
-function asVar(value) {
+function asVar(value, maxDepth = 10) {
+	if (maxDepth <= 0) return "";
 	switch (typeof value) {
 		case "string": return value;
-		case "number": return `${value}`;
-		default: return asVar(value.value);
+		case "number": return value.toString();
+		default: return asVar(value.value, maxDepth - 1);
 	}
 }
 /**
@@ -199,16 +467,14 @@ function isKnownPropertyName(key) {
 	return knownPropertySet.has(key);
 }
 /**
-* Converts a value to a CSS property string using the appropriate parser.
-* Uses specialized parsers for properties with unit requirements (lengths, colors).
+* Converts a value to a CSS property string.
+* Automatically appends units to numeric values for properties that require them.
 * @param value - The value to convert
 * @param key - The CSS property name
 * @returns The formatted CSS value string
 */
 function asKnownProp(value, key) {
-	const parser = key in styles ? styles[key] : void 0;
-	if (!parser) return asEnum(value);
-	return parser(value, key);
+	return formatValue(value, key);
 }
 /**
 * Checks if a key represents a nested CSS selector.
@@ -223,18 +489,6 @@ function isMediaSelector(key) {
 	return key.startsWith("@");
 }
 /**
-* Converts a camelCase string to kebab-case.
-*/
-function camelToKebab(str) {
-	return str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
-}
-/**
-* Converts a kebab-case string to camelCase.
-*/
-function kebabToCamel(str) {
-	return str.replace(/-[a-z]/g, (m) => m.substring(1).toUpperCase());
-}
-/**
 * Converts a SimpleStyleProps object to a CSS properties record.
 * Transforms camelCase property names to kebab-case and applies value converters.
 * @param props - The style properties object
@@ -475,11 +729,15 @@ var CssObjectSubBlock = class CssObjectSubBlock {
 				});
 				continue;
 			}
-			if (isMediaSelector(key)) propsToProcess.push({
-				key,
-				props: value,
-				selector: selector.wrap(key)
-			});
+			if (isMediaSelector(key)) {
+				propsToProcess.push({
+					key,
+					props: value,
+					selector: selector.wrap(key)
+				});
+				continue;
+			}
+			if (process.env["NODE_ENV"] !== "production") console.warn(`[mochi-css] Unknown style property "${key}" will be ignored`);
 		}
 		return [new CssObjectSubBlock(cssProps, selector), ...propsToProcess.toSorted(stringPropComparator("key")).flatMap(({ props: props$1, selector: selector$1 }) => CssObjectSubBlock.fromProps(props$1, selector$1))];
 	}
@@ -498,8 +756,8 @@ var CssObjectBlock = class {
 	* Generates a unique class name based on the content hash.
 	* @param styles - The style properties to compile
 	*/
-	constructor(styles$1) {
-		const blocks = CssObjectSubBlock.fromProps(styles$1);
+	constructor(styles) {
+		const blocks = CssObjectSubBlock.fromProps(styles);
 		this.className = "c" + shortHash(blocks.map((b) => b.hash).join("+"));
 		this.subBlocks = blocks;
 	}
@@ -543,22 +801,29 @@ var CSSObject = class {
 	variantBlocks;
 	/** Default variant selections */
 	variantDefaults;
+	/** Compound variant conditions and their parsed sub-blocks */
+	compoundVariants;
 	/**
 	* Creates a new CSSObject from style props.
 	* Compiles main styles and all variant options into CSS blocks.
-	* @param props - Style properties with optional variants and defaults
 	*/
-	constructor({ variants, defaultVariants,...props }) {
+	constructor({ variants, defaultVariants, compoundVariants,...props }) {
 		this.mainBlock = new CssObjectBlock(props);
 		this.variantBlocks = {};
-		this.variantDefaults = {};
-		if (!variants) return;
-		for (const variantGroupName in variants) {
+		this.variantDefaults = defaultVariants ?? {};
+		this.compoundVariants = [];
+		if (variants) for (const variantGroupName in variants) {
 			this.variantBlocks[variantGroupName] = {};
 			const variantGroup = variants[variantGroupName];
-			for (const variantItemName in variantGroup) this.variantBlocks[variantGroupName][variantItemName] = new CssObjectBlock(variantGroup[variantItemName]);
+			for (const variantItemName in variantGroup) this.variantBlocks[variantGroupName][variantItemName] = new CssObjectBlock(variantGroup[variantItemName] ?? {});
+		}
+		if (compoundVariants) for (const compound of compoundVariants) {
+			const { css: styles,...conditions } = compound;
+			this.compoundVariants.push({
+				conditions,
+				subBlocks: CssObjectSubBlock.fromProps(styles)
+			});
 		}
-		this.variantDefaults = defaultVariants;
 	}
 	/**
 	* Serializes the entire CSS object to a CSS string.
@@ -566,7 +831,17 @@ var CSSObject = class {
 	* @returns Complete CSS string ready for injection into a stylesheet
 	*/
 	asCssString() {
-		return [this.mainBlock.asCssString(this.mainBlock.selector), ...Object.entries(this.variantBlocks).toSorted(compareStringKey).flatMap(([_, b]) => Object.entries(b).toSorted(compareStringKey)).map(([_, b]) => b.asCssString(this.mainBlock.selector))].join("\n\n");
+		return [
+			this.mainBlock.asCssString(this.mainBlock.selector),
+			...Object.entries(this.variantBlocks).toSorted(compareStringKey).flatMap(([_, b]) => Object.entries(b).toSorted(compareStringKey)).map(([_, b]) => b.asCssString(this.mainBlock.selector)),
+			...this.compoundVariants.map(({ conditions, subBlocks }) => {
+				const variantSelectors = Object.entries(conditions).toSorted(compareStringKey).map(([variantName, optionName]) => {
+					return (this.variantBlocks[variantName]?.[optionName])?.selector ?? "";
+				}).filter(Boolean).join("");
+				const combinedSelector = `${this.mainBlock.selector}${variantSelectors}`;
+				return subBlocks.map((b) => b.asCssString(combinedSelector)).join("\n\n");
+			})
+		].join("\n\n");
 	}
 };
 
@@ -600,14 +875,23 @@ var MochiCSS = class MochiCSS {
 	}
 	/**
 	* Computes the final className string based on variant selections.
+	* Compound variants are handled purely via CSS combined selectors,
+	* so no runtime matching is needed here.
 	* @param props - Variant selections
 	* @returns Combined className string for use in components
 	*/
 	variant(props) {
 		const keys = new Set([...Object.keys(props), ...Object.keys(this.defaultVariants)].filter((k) => k in this.variantClassNames));
 		return (0, clsx.default)(this.classNames, ...keys.values().map((k) => {
-			const variantKey = (k in props ? props[k] : void 0) ?? this.defaultVariants[k];
-			return this.variantClassNames[k][`${variantKey}`];
+			const variantGroup = this.variantClassNames[k];
+			if (!variantGroup) return false;
+			const variantKey = ((k in props ? props[k] : void 0) ?? this.defaultVariants[k])?.toString();
+			if (variantKey == null) return false;
+			const selectedClassname = variantGroup[variantKey];
+			if (selectedClassname !== void 0) return selectedClassname;
+			const defaultKey = this.defaultVariants[k];
+			if (defaultKey == null) return false;
+			return variantGroup[defaultKey.toString()];
 		}));
 	}
 	/**
@@ -622,7 +906,7 @@ var MochiCSS = class MochiCSS {
 			return [key, Object.fromEntries(Object.entries(variantOptions).map(([optionKey, block]) => {
 				return [optionKey, block.className];
 			}))];
-		})), object.variantDefaults ?? {});
+		})), object.variantDefaults);
 	}
 };
 /**
@@ -655,11 +939,15 @@ var MochiCSS = class MochiCSS {
 * // Merging multiple styles
 * const combined = css(baseStyles, additionalStyles)
 */
+const emptyMochiCSS = new MochiCSS([], {}, {});
 function css(...props) {
-	const cssToMerge = props.map((p) => {
-		if (p instanceof MochiCSS) return p;
-		return MochiCSS.from(new CSSObject(p));
-	});
+	const cssToMerge = [];
+	for (const p of props) {
+		if (p == null || typeof p !== "object") continue;
+		if (p instanceof MochiCSS) cssToMerge.push(p);
+		else cssToMerge.push(MochiCSS.from(new CSSObject(p)));
+	}
+	if (cssToMerge.length === 0) return emptyMochiCSS;
 	return new MochiCSS(cssToMerge.flatMap((css$1) => css$1.classNames), cssToMerge.reduce((a, b) => Object.assign(a, b.variantClassNames), {}), cssToMerge.reduce((a, b) => Object.assign(a, b.defaultVariants), {}));
 }
 
@@ -694,27 +982,65 @@ function css(...props) {
 * // Usage: <Button size="large" variant="primary">Click me</Button>
 */
 function styled(target, ...props) {
-	const styles$1 = css(...props);
+	const styles = css(...props);
 	return ({ className,...p }) => (0, react.createElement)(target, {
-		className: (0, clsx.default)(styles$1.variant(p), className),
+		className: (0, clsx.default)(styles.variant(p), className),
 		...p
 	});
 }
 
+//#endregion
+//#region src/keyframesObject.ts
+var KeyframesObject = class KeyframesObject {
+	name;
+	body;
+	constructor(stops) {
+		this.body = KeyframesObject.generateBody(stops);
+		this.name = "kf" + shortHash(this.body);
+	}
+	asCssString() {
+		return `@keyframes ${this.name} {\n${this.body}\n}`;
+	}
+	static generateBody(stops) {
+		return Object.entries(stops).toSorted(compareStringKey).map(([stopKey, props]) => {
+			const cssProps = cssFromProps(props);
+			return `    ${stopKey} {\n${Object.entries(cssProps).toSorted(compareStringKey).map(([k, v]) => `        ${k}: ${v};`).join("\n")}\n    }`;
+		}).join("\n\n");
+	}
+};
+
+//#endregion
+//#region src/keyframes.ts
+var MochiKeyframes = class MochiKeyframes {
+	constructor(name) {
+		this.name = name;
+	}
+	toString() {
+		return this.name;
+	}
+	get value() {
+		return this.name;
+	}
+	static from(object) {
+		return new MochiKeyframes(object.name);
+	}
+};
+function keyframes(stops) {
+	return MochiKeyframes.from(new KeyframesObject(stops));
+}
+
 //#endregion
 exports.CSSObject = CSSObject;
 exports.CssObjectBlock = CssObjectBlock;
 exports.CssObjectSubBlock = CssObjectSubBlock;
+exports.KeyframesObject = KeyframesObject;
 exports.MochiCSS = MochiCSS;
+exports.MochiKeyframes = MochiKeyframes;
 exports.MochiSelector = MochiSelector;
-exports.NumericValue = NumericValue;
-exports.PercentValue = PercentValue;
-exports.PixelValue = PixelValue;
 exports.Token = Token;
-exports.asColor = asColor;
-exports.asLength = asLength;
 exports.createToken = createToken;
 exports.css = css;
 exports.cssFromProps = cssFromProps;
+exports.keyframes = keyframes;
 exports.styled = styled;
 //# sourceMappingURL=index.js.map