@mochi-css/vanilla 2.1.0 → 3.0.0

package/dist/index.mjs

@@ -1,5 +1,4 @@
 import clsx from "clsx";
-import { createElement } from "react";
 
 //#region src/token.ts
 /**
@@ -1131,6 +1130,12 @@ const knownPropertyNames = new Set([
 //#endregion
 //#region src/props.ts
 /**
+* Converts a kebab-case string to camelCase.
+*/
+function kebabToCamel(str) {
+	return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+/**
 * Converts a camelCase string to kebab-case.
 */
 function camelToKebab(str) {
@@ -1471,12 +1476,13 @@ var CssObjectBlock = class {
 	subBlocks = [];
 	/**
 	* Creates a new CSS block from style properties.
-	* Generates a unique class name based on the content hash.
+	* Generates a unique class name based on the content hash, or uses the provided class name.
 	* @param styles - The style properties to compile
+	* @param className - Optional stable class name; if omitted, a content-hash-based name is generated
 	*/
-	constructor(styles) {
+	constructor(styles, className) {
 		const blocks = CssObjectSubBlock.fromProps(styles);
-		this.className = "c" + shortHash(blocks.map((b) => b.hash).join("+"));
+		this.className = className ?? "c" + shortHash(blocks.map((b) => b.hash).join("+"));
 		this.subBlocks = blocks;
 	}
 	/**
@@ -1524,9 +1530,14 @@ var CSSObject = class {
 	/**
 	* Creates a new CSSObject from style props.
 	* Compiles main styles and all variant options into CSS blocks.
+	* @param props - Base style props plus variant definitions
+	* @param props.variants - Named variant groups, each mapping variant values to style props
+	* @param props.defaultVariants - Default value for each variant when none is provided at runtime
+	* @param props.compoundVariants - Style props applied when a specific combination of variants is active
+	* @param className - Optional stable class name for the main block
 	*/
-	constructor({ variants, defaultVariants, compoundVariants,...props }) {
-		this.mainBlock = new CssObjectBlock(props);
+	constructor({ variants, defaultVariants, compoundVariants,...props }, className) {
+		this.mainBlock = new CssObjectBlock(props, className);
 		this.variantBlocks = {};
 		this.variantDefaults = defaultVariants ?? {};
 		this.compoundVariants = [];
@@ -1568,6 +1579,10 @@ var CSSObject = class {
 
 //#endregion
 //#region src/css.ts
+const MOCHI_CSS_TYPEOF = Symbol.for("mochi-css.MochiCSS");
+function isMochiCSS(value) {
+	return typeof value === "object" && value !== null && value["$$typeof"] === MOCHI_CSS_TYPEOF;
+}
 /**
 * Runtime representation of a CSS style definition with variant support.
 * Holds generated class names and provides methods to compute the final
@@ -1582,10 +1597,6 @@ var CSSObject = class {
 * }))
 * styles.variant({ size: 'large' }) // Returns combined class names
 */
-const MOCHI_CSS_TYPEOF = Symbol.for("mochi-css.MochiCSS");
-function isMochiCSS(value) {
-	return typeof value === "object" && value !== null && value["$$typeof"] === MOCHI_CSS_TYPEOF;
-}
 var MochiCSS = class MochiCSS {
 	$$typeof = MOCHI_CSS_TYPEOF;
 	/**
@@ -1621,6 +1632,16 @@ var MochiCSS = class MochiCSS {
 		}));
 	}
 	/**
+	* Returns the CSS selector for this style (e.g. `.abc123`).
+	* Useful for targeting this component from another style.
+	*/
+	get selector() {
+		return this.classNames.map((n) => `.${n}`).join();
+	}
+	toString() {
+		return this.selector;
+	}
+	/**
 	* Creates a MochiCSS instance from a CSSObject.
 	* Extracts class names from the compiled CSS blocks.
 	* @template V - The variant definitions type
@@ -1679,51 +1700,18 @@ function mergeMochiCss(instances) {
 function css(...props) {
 	const cssToMerge = [];
 	for (const p of props) {
-		if (p == null || typeof p !== "object") continue;
+		if (p == null) continue;
+		if (typeof p === "string") {
+			cssToMerge.push(new MochiCSS([p], {}, {}));
+			continue;
+		}
+		if (typeof p !== "object") continue;
 		if (p instanceof MochiCSS) cssToMerge.push(p);
 		else cssToMerge.push(MochiCSS.from(new CSSObject(p)));
 	}
 	return mergeMochiCss(cssToMerge);
 }
 
-//#endregion
-//#region src/styled.ts
-/**
-* Creates a styled React component with CSS-in-JS support and variant props.
-* Similar to styled-components or Stitches, but with zero runtime overhead.
-*
-* @template T - The base element type or component type
-* @template V - The variant definitions tuple type
-* @param target - The HTML element tag name or React component to style
-* @param props - One or more style objects with optional variants
-* @returns A React functional component with merged props and variant support
-*
-* @example
-* const Button = styled('button', {
-*   padding: 8,
-*   borderRadius: 4,
-*   variants: {
-*     size: {
-*       small: { padding: 4 },
-*       large: { padding: 16 }
-*     },
-*     variant: {
-*       primary: { backgroundColor: 'blue' },
-*       secondary: { backgroundColor: 'gray' }
-*     }
-*   }
-* })
-*
-* // Usage: <Button size="large" variant="primary">Click me</Button>
-*/
-function styled(target, ...props) {
-	const styles = css(...props);
-	return ({ className,...p }) => createElement(target, {
-		className: clsx(styles.variant(p), className),
-		...p
-	});
-}
-
 //#endregion
 //#region src/keyframesObject.ts
 var KeyframesObject = class KeyframesObject {
@@ -1870,4 +1858,4 @@ supportsFn.or = function(...conditions) {
 const supports = supportsFn;
 
 //#endregion
-export { CSSObject, CssObjectBlock, CssObjectSubBlock, GlobalCssObject, KeyframesObject, MochiCSS, MochiKeyframes, MochiSelector, Token, container, createToken, css, cssFromProps, globalCss, isAtRuleKey, isMochiCSS, keyframes, media, mergeMochiCss, styled, supports };
+export { CSSObject, CssObjectBlock, CssObjectSubBlock, GlobalCssObject, KeyframesObject, MochiCSS, MochiKeyframes, MochiSelector, Token, camelToKebab, container, createToken, css, cssFromProps, globalCss, isAtRuleKey, isMochiCSS, kebabToCamel, keyframes, media, mergeMochiCss, numberToBase62, shortHash, supports };