@mochi-css/config 3.0.0 → 3.1.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import path from "path";
 import fs from "fs";
 import { createJiti } from "jiti";
-import clsx from "clsx";
+import { shortHash } from "@mochi-css/core";
 import * as SWC from "@swc/core";
 
 //#region src/merge.ts
@@ -126,20 +126,51 @@ const fileFilter = ({ filter }, { filePath }) => {
 function makeFilePipeline() {
 	return new FilteredTransformationPipeline(fileFilter);
 }
-var AnalysisHookCollector = class {
+var SourceTransformCollector = class {
 	hooks = [];
 	register(hook) {
 		this.hooks.push(hook);
 	}
-	getHooks() {
+	getAll() {
 		return [...this.hooks];
 	}
 };
+var StageCollector = class {
+	stageList = [];
+	register(stage) {
+		this.stageList.push(stage);
+	}
+	getAll() {
+		return [...this.stageList];
+	}
+};
+var EmitHookCollector = class {
+	hooks = [];
+	register(hook) {
+		this.hooks.push(hook);
+	}
+	getAll() {
+		return [...this.hooks];
+	}
+};
+var CleanupCollector = class {
+	fns = [];
+	register(fn) {
+		this.fns.push(fn);
+	}
+	runAll() {
+		for (const fn of this.fns) fn();
+	}
+};
 var FullContext = class {
-	sourceTransform = makeFilePipeline();
-	analysisTransform = new AnalysisHookCollector();
-	getAnalysisHooks() {
-		return this.analysisTransform.getHooks();
+	filePreProcess = makeFilePipeline();
+	sourceTransforms = new SourceTransformCollector();
+	stages = new StageCollector();
+	emitHooks = new EmitHookCollector();
+	cleanup = new CleanupCollector();
+	onDiagnostic;
+	constructor(onDiagnostic) {
+		this.onDiagnostic = onDiagnostic;
 	}
 };
 
@@ -152,7 +183,6 @@ 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,
@@ -180,213 +210,15 @@ async function loadConfig(cwd) {
 	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 clsx(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) {
+function collectCallsBySymbol(ast, symbolNames) {
 	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({
+			if (callee.type === "Identifier" && symbolNames.has(callee.value) || callee.type === "MemberExpression" && callee.property.type === "Identifier" && symbolNames.has(callee.property.value)) results.push({
 				call: expr,
 				varName
 			});
@@ -406,22 +238,23 @@ function collectStyledCalls(ast) {
 	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.
+* Transforms source code to inject stable `s-` class IDs into every call matching
+* one of the given symbol names. Idempotent: skips calls that already have an `s-`
+* string as the last argument.
 */
-function transformStyledIds(source, filePath) {
-	if (!source.includes("styled")) return source;
+function transformCallIds(source, filePath, symbolNames) {
+	if (![...symbolNames].some((name) => source.includes(name))) return source;
 	let ast;
 	try {
 		ast = SWC.parseSync(source, {
 			syntax: "typescript",
-			tsx: filePath.endsWith(".tsx"),
+			tsx: filePath.endsWith(".tsx") || filePath.endsWith(".jsx"),
 			target: "es2022"
 		});
 	} catch {
 		return source;
 	}
-	const calls = collectStyledCalls(ast);
+	const calls = collectCallsBySymbol(ast, symbolNames);
 	if (calls.length === 0) return source;
 	const toInject = calls.filter((entry) => {
 		const args = entry.call.arguments;
@@ -435,7 +268,9 @@ function transformStyledIds(source, filePath) {
 	let searchFrom = 0;
 	const callsWithOffset = [];
 	for (const entry of sortedAsc) {
-		const idx = source.indexOf("styled(", searchFrom);
+		const symbolName = entry.call.callee.type === "Identifier" ? entry.call.callee.value : entry.call.callee.type === "MemberExpression" && entry.call.callee.property.type === "Identifier" ? entry.call.callee.property.value : null;
+		if (!symbolName) continue;
+		const idx = source.indexOf(symbolName + "(", searchFrom);
 		if (idx < 0) continue;
 		if (callsWithOffset.length === 0) {
 			const callee = entry.call.callee;
@@ -473,28 +308,45 @@ function hasStableId(call) {
 	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.
+* Returns a MochiPlugin that injects stable `s-` class IDs into every call expression
+* matched by the given extractors.
+* - Registers a `filePreProcess` transformation for runtime source injection (Vite/Next `transform` hook).
+* - Registers a `sourceTransforms` hook for CSS extraction via direct AST mutation,
+*   using data from the extractor pipeline stages (`extractedCallExpressions`).
 */
-function styledIdPlugin() {
+function styledIdPlugin(extractors) {
+	const symbolNames = new Set(extractors.map((e) => e.symbolName));
 	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}'`
+			context.filePreProcess.registerTransformation((source, { filePath }) => transformCallIds(source, filePath, symbolNames), { filter: "*.{ts,tsx,js,jsx}" });
+			context.sourceTransforms.register((index) => {
+				for (const [filePath, fileInfo] of index.files) {
+					const callToVarName = /* @__PURE__ */ new Map();
+					for (const binding of fileInfo.moduleBindings.values()) {
+						if (binding.declarator.type !== "variable") continue;
+						const init = binding.declarator.declarator.init;
+						if (init?.type === "CallExpression") callToVarName.set(init, binding.identifier.value);
+					}
+					let fallbackIdx = 0;
+					for (const extractor of extractors) {
+						const calls = fileInfo.extractedCallExpressions.get(extractor) ?? [];
+						for (const call of calls) {
+							if (hasStableId(call)) continue;
+							const varName = callToVarName.get(call) ?? String(fallbackIdx++);
+							const id = "s-" + shortHash(filePath + ":" + varName);
+							call.arguments.push({
+								spread: void 0,
+								expression: {
+									type: "StringLiteral",
+									span: DUMMY_SPAN,
+									value: id,
+									raw: `'${id}'`
+								}
+							});
 						}
-					});
-				});
+					}
+				}
 			});
 		}
 	};