@mochi-css/config 3.0.0

package/dist/index.js

@@ -0,0 +1,540 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let path = require("path");
+path = __toESM(path);
+let fs = require("fs");
+fs = __toESM(fs);
+let jiti = require("jiti");
+jiti = __toESM(jiti);
+let clsx = require("clsx");
+clsx = __toESM(clsx);
+let __swc_core = require("@swc/core");
+__swc_core = __toESM(__swc_core);
+
+//#region src/merge.ts
+function mergeArrays(a, b) {
+	if (a !== void 0 && b !== void 0) return a.concat(b);
+	return a ?? b;
+}
+function mergeCallbacks(a, b) {
+	if (a !== void 0 && b !== void 0) return (...args) => {
+		a(...args);
+		b(...args);
+	};
+	return a ?? b;
+}
+
+//#endregion
+//#region src/plugin/TransformationPipeline.ts
+var TransformationPipeline = class {
+	transformations = [];
+	registerTransformation(transformation) {
+		this.transformations.push(transformation);
+	}
+	async transform(value, ...args) {
+		let ret = value;
+		for (const transformation of this.transformations) ret = await transformation(ret, ...args);
+		return ret;
+	}
+	getTransformations() {
+		return [...this.transformations];
+	}
+};
+function makePipeline(transformations) {
+	const ret = new TransformationPipeline();
+	for (const transformation of transformations) ret.registerTransformation(transformation);
+	return ret;
+}
+var FilteredTransformationPipeline = class {
+	transformations = [];
+	constructor(filter) {
+		this.filter = filter;
+	}
+	registerTransformation(transformation, data) {
+		this.transformations.push({
+			fn: transformation,
+			ctx: data
+		});
+	}
+	async transform(value, ...args) {
+		let ret = value;
+		for (const transformation of this.transformations) {
+			if (!this.filter(transformation.ctx, ...args)) continue;
+			ret = await transformation.fn(ret, ...args);
+		}
+		return ret;
+	}
+	getTransformations() {
+		return [...this.transformations];
+	}
+};
+
+//#endregion
+//#region src/plugin/globEx.ts
+function escapeRegexLiteral(s) {
+	return s.replace(/[.+^${}()|[\]\\]/g, "\\$&");
+}
+function globToRegexBody(pattern) {
+	let result = "";
+	let i = 0;
+	while (i < pattern.length) {
+		const char = pattern.charAt(i);
+		if (char === "*" && pattern.charAt(i + 1) === "*") {
+			result += ".*";
+			i += 2;
+			if (pattern.charAt(i) === "/") i++;
+		} else if (char === "*") {
+			result += "[^/]*";
+			i++;
+		} else if (char === "?") {
+			result += "[^/]";
+			i++;
+		} else if (char === "{") {
+			const end = pattern.indexOf("}", i);
+			if (end !== -1) {
+				const alts = pattern.slice(i + 1, end).split(",").map(escapeRegexLiteral);
+				result += `(${alts.join("|")})`;
+				i = end + 1;
+			} else {
+				result += "\\{";
+				i++;
+			}
+		} else {
+			result += /[.+^$|()[\]\\]/.test(char) ? `\\${char}` : char;
+			i++;
+		}
+	}
+	return result;
+}
+/**
+* Converts a Turbopack loader filter glob pattern to a RegExp.
+* - No `/` in pattern → matches filename only (anchored to last path segment)
+* - Contains `/` → matches against the full project-relative path
+*/
+function globExToRegex(pattern) {
+	const isPathPattern = pattern.includes("/");
+	const body = globToRegexBody(pattern);
+	return isPathPattern ? new RegExp(body) : /* @__PURE__ */ new RegExp(`(?:^|/)${body}$`);
+}
+
+//#endregion
+//#region src/plugin/Context.ts
+const fileFilterRegexCache = /* @__PURE__ */ new Map();
+function getRegexForFilter(filter) {
+	let regex = fileFilterRegexCache.get(filter);
+	if (regex) return regex;
+	regex = globExToRegex(filter);
+	fileFilterRegexCache.set(filter, regex);
+	return regex;
+}
+const fileFilter = ({ filter }, { filePath }) => {
+	return filter === void 0 || getRegexForFilter(filter).test(filePath);
+};
+function makeFilePipeline() {
+	return new FilteredTransformationPipeline(fileFilter);
+}
+var AnalysisHookCollector = class {
+	hooks = [];
+	register(hook) {
+		this.hooks.push(hook);
+	}
+	getHooks() {
+		return [...this.hooks];
+	}
+};
+var FullContext = class {
+	sourceTransform = makeFilePipeline();
+	analysisTransform = new AnalysisHookCollector();
+	getAnalysisHooks() {
+		return this.analysisTransform.getHooks();
+	}
+};
+
+//#endregion
+//#region src/config/index.ts
+function defineConfig(config) {
+	return config;
+}
+async function resolveConfig(fileConfig, inlineConfig, defaults) {
+	const plugins = mergeArrays(fileConfig.plugins, inlineConfig?.plugins) ?? defaults?.plugins ?? [];
+	const resolved = {
+		roots: mergeArrays(fileConfig.roots, inlineConfig?.roots) ?? defaults?.roots ?? [],
+		extractors: mergeArrays(fileConfig.extractors, inlineConfig?.extractors) ?? defaults?.extractors ?? [],
+		splitCss: inlineConfig?.splitCss ?? fileConfig.splitCss ?? defaults?.splitCss ?? false,
+		onDiagnostic: mergeCallbacks(fileConfig.onDiagnostic, inlineConfig?.onDiagnostic),
+		plugins,
+		tmpDir: inlineConfig?.tmpDir ?? fileConfig.tmpDir ?? defaults?.tmpDir,
+		debug: inlineConfig?.debug ?? fileConfig.debug ?? defaults?.debug
+	};
+	return await makePipeline(plugins.map((plugin) => plugin.onConfigResolved).filter((c) => c !== void 0)).transform(resolved);
+}
+const configName = "mochi.config";
+const CONFIG_FILE_NAMES = [
+	"mts",
+	"cts",
+	"ts",
+	"mjs",
+	"cjs",
+	"js"
+].map((ext) => `${configName}.${ext}`);
+async function loadConfig(cwd) {
+	const dir = cwd ?? process.cwd();
+	const configFile = CONFIG_FILE_NAMES.map((name) => path.default.resolve(dir, name)).find((p) => fs.default.existsSync(p));
+	if (!configFile) return {};
+	const mod = await (0, jiti.createJiti)(require("url").pathToFileURL(__filename).href).import(configFile);
+	const config = mod != null && typeof mod === "object" && "default" in mod ? mod.default : mod;
+	if (config == null || typeof config !== "object") return {};
+	return config;
+}
+
+//#endregion
+//#region ../vanilla/dist/index.mjs
+/**
+* Hashing utilities for generating short, deterministic class names.
+* Uses djb2 algorithm for fast string hashing.
+* @module hash
+*/
+/** Characters used for base-62 encoding (css-name safe variant of base-64) */
+const hashBase = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_";
+const base = 64;
+/**
+* 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
+*/
+function numberToBase62(num, maxLength) {
+	let out = "";
+	while (num > 0 && out.length < (maxLength ?? Infinity)) {
+		out = hashBase[num % base] + out;
+		num = Math.floor(num / base);
+	}
+	return out.length > 0 ? out : "0";
+}
+/**
+* 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"
+*/
+function shortHash(input, length = 8) {
+	let h = 5381;
+	for (let i = 0; i < input.length; i++) h = h * 33 ^ input.charCodeAt(i);
+	h >>>= 0;
+	return numberToBase62(h, length);
+}
+const MOCHI_CSS_TYPEOF = Symbol.for("mochi-css.MochiCSS");
+/**
+* Runtime representation of a CSS style definition with variant support.
+* Holds generated class names and provides methods to compute the final
+* className string based on selected variants.
+*
+* @template V - The variant definitions type mapping variant names to their options
+*
+* @example
+* const styles = MochiCSS.from(new CSSObject({
+*   color: 'blue',
+*   variants: { size: { small: { fontSize: 12 }, large: { fontSize: 18 } } }
+* }))
+* styles.variant({ size: 'large' }) // Returns combined class names
+*/
+var MochiCSS = class MochiCSS$1 {
+	$$typeof = MOCHI_CSS_TYPEOF;
+	/**
+	* Creates a new MochiCSS instance.
+	* @param classNames - Base class names to always include
+	* @param variantClassNames - Mapping of variant names to option class names
+	* @param defaultVariants - Default variant selections when not specified
+	*/
+	constructor(classNames, variantClassNames, defaultVariants) {
+		this.classNames = classNames;
+		this.variantClassNames = variantClassNames;
+		this.defaultVariants = defaultVariants;
+	}
+	/**
+	* 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 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()];
+		}));
+	}
+	/**
+	* 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
+	* @param object - The compiled CSSObject to extract from
+	* @returns A new MochiCSS instance with the extracted class names
+	*/
+	static from(object) {
+		return new MochiCSS$1([object.mainBlock.className], Object.fromEntries(Object.entries(object.variantBlocks).map(([key, variantOptions]) => {
+			return [key, Object.fromEntries(Object.entries(variantOptions).map(([optionKey, block]) => {
+				return [optionKey, block.className];
+			}))];
+		})), object.variantDefaults);
+	}
+};
+/**
+* Creates a CSS style definition.
+* The primary API for defining styles in Mochi-CSS.
+*
+* @template V - Tuple of variant definition types
+* @param props - One or more style objects or existing MochiCSS instances to merge
+* @returns A MochiCSS instance with all styles and variants combined
+*
+* @example
+* // Simple usage
+* const button = css({ padding: 8, borderRadius: 4 })
+*
+* @example
+* // With variants
+* const button = css({
+*   padding: 8,
+*   variants: {
+*     size: {
+*       small: { padding: 4 },
+*       large: { padding: 16 }
+*     }
+*   },
+*   defaultVariants: { size: 'small' }
+* })
+* button.variant({ size: 'large' }) // Get class names for large size
+*
+* @example
+* // Merging multiple styles
+* const combined = css(baseStyles, additionalStyles)
+*/
+const emptyMochiCSS = new MochiCSS([], {}, {});
+/**
+* Wraps a condition in parentheses if not already wrapped.
+*/
+function wrapParens(condition) {
+	const trimmed = condition.trim();
+	if (trimmed.startsWith("(") && trimmed.endsWith(")")) return trimmed;
+	return `(${trimmed})`;
+}
+function mediaFn(condition) {
+	return `@media ${wrapParens(condition)}`;
+}
+mediaFn.and = function(...conditions) {
+	return `@media ${conditions.map(wrapParens).join(" and ")}`;
+};
+mediaFn.or = function(...conditions) {
+	return `@media ${conditions.map(wrapParens).join(", ")}`;
+};
+Object.defineProperties(mediaFn, {
+	dark: {
+		get: () => "@media (prefers-color-scheme: dark)",
+		enumerable: true
+	},
+	light: {
+		get: () => "@media (prefers-color-scheme: light)",
+		enumerable: true
+	},
+	motion: {
+		get: () => "@media (prefers-reduced-motion: no-preference)",
+		enumerable: true
+	},
+	print: {
+		get: () => "@media print",
+		enumerable: true
+	}
+});
+function containerFn(condition) {
+	return `@container ${wrapParens(condition)}`;
+}
+containerFn.named = function(name, condition) {
+	return `@container ${name} ${wrapParens(condition)}`;
+};
+function supportsFn(condition) {
+	return `@supports ${wrapParens(condition)}`;
+}
+supportsFn.not = function(condition) {
+	return `@supports not ${wrapParens(condition)}`;
+};
+supportsFn.and = function(...conditions) {
+	return `@supports ${conditions.map(wrapParens).join(" and ")}`;
+};
+supportsFn.or = function(...conditions) {
+	return `@supports ${conditions.map(wrapParens).join(" or ")}`;
+};
+
+//#endregion
+//#region src/styledIdTransform.ts
+const STABLE_ID_RE = /^s-[0-9A-Za-z_-]+$/;
+function collectStyledCalls(ast) {
+	const results = [];
+	function visitExpr(expr, varName) {
+		if (expr.type === "CallExpression") {
+			const callee = expr.callee;
+			if (callee.type === "Identifier" && callee.value === "styled" || callee.type === "MemberExpression" && callee.property.type === "Identifier" && callee.property.value === "styled") results.push({
+				call: expr,
+				varName
+			});
+			for (const arg of expr.arguments) visitExpr(arg.expression, null);
+		}
+	}
+	for (const item of ast.body) if (item.type === "VariableDeclaration") for (const d of item.declarations) {
+		const name = d.id.type === "Identifier" ? d.id.value : null;
+		if (d.init) visitExpr(d.init, name);
+	}
+	else if (item.type === "ExportDeclaration" && item.declaration.type === "VariableDeclaration") for (const d of item.declaration.declarations) {
+		const name = d.id.type === "Identifier" ? d.id.value : null;
+		if (d.init) visitExpr(d.init, name);
+	}
+	else if (item.type === "ExpressionStatement") visitExpr(item.expression, null);
+	else if (item.type === "ExportDefaultExpression") visitExpr(item.expression, "default");
+	return results;
+}
+/**
+* Transforms source code to inject stable `s-` class IDs into every `styled()` call.
+* Idempotent: skips calls that already have an `s-` string as the last argument.
+*/
+function transformStyledIds(source, filePath) {
+	if (!source.includes("styled")) return source;
+	let ast;
+	try {
+		ast = __swc_core.parseSync(source, {
+			syntax: "typescript",
+			tsx: filePath.endsWith(".tsx"),
+			target: "es2022"
+		});
+	} catch {
+		return source;
+	}
+	const calls = collectStyledCalls(ast);
+	if (calls.length === 0) return source;
+	const toInject = calls.filter((entry) => {
+		const args = entry.call.arguments;
+		if (args.length === 0) return true;
+		const last = args[args.length - 1];
+		return !(last?.expression.type === "StringLiteral" && STABLE_ID_RE.test(last.expression.value));
+	});
+	if (toInject.length === 0) return source;
+	const sortedAsc = [...toInject].sort((a, b) => a.call.span.start - b.call.span.start);
+	let sourceGlobalBase = 0;
+	let searchFrom = 0;
+	const callsWithOffset = [];
+	for (const entry of sortedAsc) {
+		const idx = source.indexOf("styled(", searchFrom);
+		if (idx < 0) continue;
+		if (callsWithOffset.length === 0) {
+			const callee = entry.call.callee;
+			sourceGlobalBase = (callee.type === "Identifier" ? callee.span.start : callee.property.span.start) - idx;
+		}
+		callsWithOffset.push({
+			entry,
+			offset: entry.call.span.end - sourceGlobalBase - 1
+		});
+		searchFrom = idx + 1;
+	}
+	callsWithOffset.sort((a, b) => b.offset - a.offset);
+	let result = source;
+	callsWithOffset.forEach(({ entry, offset }, i) => {
+		const sortIdx = callsWithOffset.length - 1 - i;
+		const varName = entry.varName ?? String(sortIdx);
+		const id = "s-" + shortHash(filePath + ":" + varName);
+		if (offset < 0 || offset >= result.length || result[offset] !== ")") return;
+		result = result.slice(0, offset) + `, '${id}'` + result.slice(offset);
+	});
+	return result;
+}
+
+//#endregion
+//#region src/styledIdPlugin.ts
+const DUMMY_SPAN = {
+	start: 0,
+	end: 0,
+	ctxt: 0
+};
+function hasStableId(call) {
+	const args = call.arguments;
+	if (args.length === 0) return false;
+	const last = args[args.length - 1];
+	return last?.expression.type === "StringLiteral" && STABLE_ID_RE.test(last.expression.value);
+}
+/**
+* Returns a MochiPlugin that injects stable `s-` class IDs into every `styled()` call.
+* - Registers a `sourceTransform` for runtime source injection (Vite/Next `transform` hook).
+* - Registers an `analysisTransform` for CSS extraction via direct AST mutation.
+*/
+function styledIdPlugin() {
+	return {
+		name: "mochi-styled-ids",
+		onLoad(context) {
+			context.sourceTransform.registerTransformation((source, { filePath }) => transformStyledIds(source, filePath), { filter: "*.{ts,tsx,js,jsx}" });
+			context.analysisTransform.register((index) => {
+				for (const [filePath, fileInfo] of index.files) collectStyledCalls(fileInfo.ast).filter(({ call }) => !hasStableId(call)).forEach(({ call, varName }, i) => {
+					const id = "s-" + shortHash(filePath + ":" + (varName ?? String(i)));
+					call.arguments.push({
+						spread: void 0,
+						expression: {
+							type: "StringLiteral",
+							span: DUMMY_SPAN,
+							value: id,
+							raw: `'${id}'`
+						}
+					});
+				});
+			});
+		}
+	};
+}
+
+//#endregion
+exports.FullContext = FullContext;
+exports.TransformationPipeline = TransformationPipeline;
+exports.defineConfig = defineConfig;
+exports.loadConfig = loadConfig;
+exports.mergeArrays = mergeArrays;
+exports.mergeCallbacks = mergeCallbacks;
+exports.resolveConfig = resolveConfig;
+exports.styledIdPlugin = styledIdPlugin;
+//# sourceMappingURL=index.js.map