@pikacss/integration 0.0.33 → 0.0.35

package/dist/index.mjs

@@ -1,13 +1,12 @@
 import { statSync } from "node:fs";
-import { mkdir, writeFile } from "node:fs/promises";
-import { createEngine, defineEnginePlugin, setWarnFn, warn } from "@pikacss/core";
-import { createJiti } from "jiti";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { createEngine, defineEnginePlugin, log } from "@pikacss/core";
+import { computed, signal } from "alien-signals";
+import { globbyStream } from "globby";
 import { klona } from "klona";
 import { isPackageExists } from "local-pkg";
 import MagicString from "magic-string";
-import micromatch from "micromatch";
 import { dirname, isAbsolute, join, relative, resolve } from "pathe";
-import { debounce } from "perfect-debounce";
 
 export * from "@pikacss/core"
 
@@ -15,6 +14,7 @@ export * from "@pikacss/core"
 function createEventHook() {
 	const listeners = /* @__PURE__ */ new Set();
 	function trigger(payload) {
+		if (listeners.size === 0) return;
 		listeners.forEach((listener) => listener(payload));
 	}
 	function off(listener) {
@@ -103,9 +103,11 @@ function generateVueDeclaration(ctx) {
 	];
 }
 async function generateOverloadContent(ctx) {
+	log.debug("Generating TypeScript overload content");
 	const paramsLines = [];
 	const fnsLines = [];
 	const usages = [...ctx.usages.values()].flat();
+	log.debug(`Processing ${usages.length} style usages for overload generation`);
 	for (let i = 0; i < usages.length; i++) {
 		const usage = usages[i];
 		try {
@@ -139,6 +141,7 @@ async function generateOverloadContent(ctx) {
 	];
 }
 async function generateTsCodegenContent(ctx) {
+	log.debug("Generating TypeScript code generation content");
 	const lines = [
 		`// Auto-generated by ${ctx.currentPackageName}`,
 		`import type { CSSProperty, CSSSelectors, DefineAutocomplete, Properties, StyleDefinition, StyleItem } from \'${ctx.currentPackageName}\'`,
@@ -160,257 +163,389 @@ async function generateTsCodegenContent(ctx) {
 	lines.push(...generateGlobalDeclaration(ctx));
 	lines.push(...generateVueDeclaration(ctx));
 	lines.push(...await generateOverloadContent(ctx));
+	log.debug("TypeScript code generation content completed");
 	return lines.join("\n");
 }
 
 //#endregion
 //#region src/ctx.ts
-function findFunctionCalls(code, RE) {
-	const result = [];
-	let matched = RE.exec(code);
-	while (matched != null) {
-		const fnName = matched[1];
-		const start = matched.index;
-		let end = start + fnName.length;
-		let depth = 1;
-		let inString = false;
-		while (depth > 0) {
-			end++;
-			if (inString === false && code[end] === "(") depth++;
-			else if (inString === false && code[end] === ")") depth--;
-			else if (inString === false && (code[end] === "'" || code[end] === "\"")) inString = code[end];
-			else if (inString === code[end]) inString = false;
-		}
-		const snippet = code.slice(start, end + 1);
-		result.push({
-			fnName,
-			start,
-			end,
-			snippet
-		});
-		matched = RE.exec(code);
-	}
-	return result;
-}
-const ESCAPE_REPLACE_RE = /[.*+?^${}()|[\]\\/]/g;
-function createFnUtils(fnName) {
-	const available = {
-		normal: new Set([fnName]),
-		forceString: new Set([
-			`${fnName}.str`,
-			`${fnName}['str']`,
-			`${fnName}["str"]`,
-			`${fnName}[\`str\`]`
-		]),
-		forceArray: new Set([
-			`${fnName}.arr`,
-			`${fnName}['arr']`,
-			`${fnName}["arr"]`,
-			`${fnName}[\`arr\`]`
-		]),
-		forceInline: new Set([
-			`${fnName}.inl`,
-			`${fnName}['inl']`,
-			`${fnName}["inl"]`,
-			`${fnName}[\`inl\`]`
-		]),
-		normalPreview: new Set([`${fnName}p`]),
-		forceStringPreview: new Set([
-			`${fnName}p.str`,
-			`${fnName}p['str']`,
-			`${fnName}p["str"]`,
-			`${fnName}p[\`str\`]`
-		]),
-		forceArrayPreview: new Set([
-			`${fnName}p.arr`,
-			`${fnName}p['arr']`,
-			`${fnName}p["arr"]`,
-			`${fnName}p[\`arr\`]`
-		]),
-		forceInlinePreview: new Set([
-			`${fnName}p.inl`,
-			`${fnName}p['inl']`,
-			`${fnName}p["inl"]`,
-			`${fnName}p[\`inl\`]`
-		])
-	};
+function usePaths({ cwd: _cwd, cssCodegen, tsCodegen }) {
+	const cwd = signal(_cwd);
 	return {
-		isNormal: (fnName$1) => available.normal.has(fnName$1) || available.normalPreview.has(fnName$1),
-		isForceString: (fnName$1) => available.forceString.has(fnName$1) || available.forceStringPreview.has(fnName$1),
-		isForceArray: (fnName$1) => available.forceArray.has(fnName$1) || available.forceArrayPreview.has(fnName$1),
-		isForceInline: (fnName$1) => available.forceInline.has(fnName$1) || available.forceInlinePreview.has(fnName$1),
-		isPreview: (fnName$1) => available.normalPreview.has(fnName$1) || available.forceStringPreview.has(fnName$1) || available.forceArrayPreview.has(fnName$1) || available.forceInlinePreview.has(fnName$1),
-		RE: new RegExp(`\\b(${Object.values(available).flatMap((s) => [...s].map((f) => `(${f.replace(ESCAPE_REPLACE_RE, "\\$&")})`)).join("|")})\\(`, "g")
+		cwd,
+		cssCodegenFilepath: computed(() => isAbsolute(cssCodegen) ? resolve(cssCodegen) : join(cwd(), cssCodegen)),
+		tsCodegenFilepath: computed(() => tsCodegen === false ? null : isAbsolute(tsCodegen) ? resolve(tsCodegen) : join(cwd(), tsCodegen))
 	};
 }
-async function createCtx(options) {
-	const { cwd, currentPackageName, target, configOrPath, fnName, transformedFormat, tsCodegen, devCss, autoCreateConfig } = options;
-	setWarnFn((...args) => {
-		console.warn(`[${currentPackageName}]`, ...args);
+function useConfig({ cwd, tsCodegenFilepath, currentPackageName, autoCreateConfig, configOrPath, scan }) {
+	const RE_VALID_CONFIG_EXT = /\.(?:js|cjs|mjs|ts|cts|mts)$/;
+	const specificConfigPath = computed(() => {
+		if (typeof configOrPath === "string" && RE_VALID_CONFIG_EXT.test(configOrPath)) return isAbsolute(configOrPath) ? configOrPath : join(cwd(), configOrPath);
+		return null;
 	});
-	const devCssFilepath = isAbsolute(devCss) ? resolve(devCss) : join(cwd, devCss);
-	const tsCodegenFilepath = tsCodegen === false ? null : isAbsolute(tsCodegen) ? resolve(tsCodegen) : join(cwd, tsCodegen);
+	async function findFirstExistingConfigPath() {
+		const _cwd = cwd();
+		const _specificConfigPath = specificConfigPath();
+		if (_specificConfigPath != null && statSync(_specificConfigPath, { throwIfNoEntry: false })?.isFile()) return _specificConfigPath;
+		const stream = globbyStream("**/{pika,pikacss}.config.{js,cjs,mjs,ts,cts,mts}", { ignore: scan.exclude });
+		for await (const entry of stream) return join(_cwd, entry);
+		return null;
+	}
 	const inlineConfig = typeof configOrPath === "object" ? configOrPath : null;
-	const specificConfigPath = typeof configOrPath === "string" ? isAbsolute(configOrPath) ? configOrPath : join(cwd, configOrPath) : null;
-	const configSources = [...specificConfigPath == null ? [] : [specificConfigPath], ...["pika", "pikacss"].flatMap((name) => [
-		"js",
-		"ts",
-		"cjs",
-		"cts",
-		"mjs",
-		"mts"
-	].map((ext) => `${name}.config.${ext}`)).map((name) => join(cwd, name))];
-	const targetREs = target.map((t) => micromatch.makeRe(t));
-	const needToTransform = (id) => targetREs.some((re) => re.test(id));
-	const ctx = {
-		cwd,
-		currentPackageName,
-		fnName,
-		fnUtils: createFnUtils(fnName),
-		transformedFormat,
-		devCssFilepath,
-		tsCodegenFilepath,
-		hasVue: isPackageExists("vue", { paths: [cwd] }),
-		usages: /* @__PURE__ */ new Map(),
-		hooks: {
-			styleUpdated: createEventHook(),
-			tsCodegenUpdated: createEventHook()
-		},
-		loadConfig: async () => {
-			if (inlineConfig != null) return {
-				config: klona(inlineConfig),
-				file: null
-			};
-			let resolvedConfigPath = configSources.find((path) => {
-				const stat = statSync(path, { throwIfNoEntry: false });
-				return stat != null && stat.isFile();
-			});
-			if (resolvedConfigPath == null) {
-				if (autoCreateConfig === false) return {
-					config: null,
-					file: null
+	async function _loadConfig() {
+		try {
+			log.debug("Loading engine config");
+			if (inlineConfig != null) {
+				log.debug("Using inline config");
+				return {
+					config: klona(inlineConfig),
+					file: null,
+					content: null
 				};
-				resolvedConfigPath = configSources[0];
-				await mkdir(dirname(resolvedConfigPath), { recursive: true }).catch(() => {});
-				const relativeTsCodegenFilepath = tsCodegenFilepath == null ? null : `./${relative(dirname(resolvedConfigPath), tsCodegenFilepath)}`;
-				await writeFile(resolvedConfigPath, [
+			}
+			let resolvedConfigPath$1 = await findFirstExistingConfigPath();
+			const _cwd = cwd();
+			if (resolvedConfigPath$1 == null) {
+				if (autoCreateConfig === false) {
+					log.warn("Config file not found and autoCreateConfig is false");
+					return {
+						config: null,
+						file: null,
+						content: null
+					};
+				}
+				resolvedConfigPath$1 = join(_cwd, specificConfigPath() ?? "pika.config.js");
+				await mkdir(dirname(resolvedConfigPath$1), { recursive: true }).catch(() => {});
+				const _tsCodegenFilepath = tsCodegenFilepath();
+				const relativeTsCodegenFilepath = _tsCodegenFilepath == null ? null : `./${relative(dirname(resolvedConfigPath$1), _tsCodegenFilepath)}`;
+				await writeFile(resolvedConfigPath$1, [
+					...relativeTsCodegenFilepath == null ? [] : [`/// <reference path="${relativeTsCodegenFilepath}" />`],
 					`import { defineEngineConfig } from '${currentPackageName}'`,
-					...relativeTsCodegenFilepath == null ? [] : [`/** @type {import('${relativeTsCodegenFilepath}')} */`],
 					"",
 					"export default defineEngineConfig({",
 					"  // Add your PikaCSS engine config here",
 					"})"
 				].join("\n"));
 			}
-			const config = (await createJiti(cwd, {
-				fsCache: false,
-				moduleCache: false
-			}).import(resolvedConfigPath)).default;
+			log.info(`Using config file: ${resolvedConfigPath$1}`);
+			const { createJiti } = await import("jiti");
+			const jiti = createJiti(import.meta.url, { interopDefault: true });
+			const content = await readFile(resolvedConfigPath$1, "utf-8");
+			const config = (await jiti.evalModule(content, {
+				id: resolvedConfigPath$1,
+				forceTranspile: true
+			})).default;
 			return {
 				config: klona(config),
-				file: resolvedConfigPath
+				file: resolvedConfigPath$1,
+				content
 			};
-		},
-		init: debounce(async () => {
-			ctx.isReady = false;
-			ctx.usages.clear();
-			const { config, file } = await ctx.loadConfig().catch((error) => {
-				warn(`Failed to load config file:  ${error.message}`, error);
-				return {
-					config: null,
-					file: null
-				};
-			});
-			ctx.resolvedConfigPath = file;
-			const devPlugin = defineEnginePlugin({
-				name: "@pikacss/integration:dev",
-				preflightUpdated: () => ctx.hooks.styleUpdated.trigger(),
-				atomicStyleAdded: () => ctx.hooks.styleUpdated.trigger(),
-				autocompleteConfigUpdated: () => ctx.hooks.tsCodegenUpdated.trigger()
-			});
-			try {
-				const _config = config ?? {};
-				_config.plugins = _config.plugins ?? [];
-				_config.plugins.unshift(devPlugin);
-				ctx.engine = await createEngine(_config);
-			} catch (error) {
-				warn(`Failed to create engine: ${error.message}. Maybe the config file is invalid, falling back to default config.`, error);
-				ctx.engine = await createEngine({ plugins: [devPlugin] });
-			}
-			await mkdir(dirname(devCssFilepath), { recursive: true }).catch(() => {});
-			await writeFile(devCssFilepath, "");
-			if (tsCodegenFilepath != null) {
-				await mkdir(dirname(tsCodegenFilepath), { recursive: true }).catch(() => {});
-				await writeFile(tsCodegenFilepath, await generateTsCodegenContent(ctx));
+		} catch (error) {
+			log.error(`Failed to load config file: ${error.message}`, error);
+			return {
+				config: null,
+				file: null,
+				content: null
+			};
+		}
+	}
+	const resolvedConfig = signal(inlineConfig);
+	const resolvedConfigPath = signal(null);
+	const resolvedConfigContent = signal(null);
+	async function loadConfig() {
+		const result = await _loadConfig();
+		resolvedConfig(result.config);
+		resolvedConfigPath(result.file);
+		resolvedConfigContent(result.content);
+		return result;
+	}
+	return {
+		resolvedConfig,
+		resolvedConfigPath,
+		resolvedConfigContent,
+		loadConfig
+	};
+}
+function useTransform({ cwd, cssCodegenFilepath, tsCodegenFilepath, scan, fnName, usages, engine, transformedFormat, triggerStyleUpdated, triggerTsCodegenUpdated }) {
+	const ESCAPE_REPLACE_RE = /[.*+?^${}()|[\]\\/]/g;
+	function createFnUtils(fnName$1) {
+		const available = {
+			normal: new Set([fnName$1]),
+			forceString: new Set([
+				`${fnName$1}.str`,
+				`${fnName$1}['str']`,
+				`${fnName$1}["str"]`,
+				`${fnName$1}[\`str\`]`
+			]),
+			forceArray: new Set([
+				`${fnName$1}.arr`,
+				`${fnName$1}['arr']`,
+				`${fnName$1}["arr"]`,
+				`${fnName$1}[\`arr\`]`
+			]),
+			forceInline: new Set([
+				`${fnName$1}.inl`,
+				`${fnName$1}['inl']`,
+				`${fnName$1}["inl"]`,
+				`${fnName$1}[\`inl\`]`
+			]),
+			normalPreview: new Set([`${fnName$1}p`]),
+			forceStringPreview: new Set([
+				`${fnName$1}p.str`,
+				`${fnName$1}p['str']`,
+				`${fnName$1}p["str"]`,
+				`${fnName$1}p[\`str\`]`
+			]),
+			forceArrayPreview: new Set([
+				`${fnName$1}p.arr`,
+				`${fnName$1}p['arr']`,
+				`${fnName$1}p["arr"]`,
+				`${fnName$1}p[\`arr\`]`
+			]),
+			forceInlinePreview: new Set([
+				`${fnName$1}p.inl`,
+				`${fnName$1}p['inl']`,
+				`${fnName$1}p["inl"]`,
+				`${fnName$1}p[\`inl\`]`
+			])
+		};
+		return {
+			isNormal: (fnName$2) => available.normal.has(fnName$2) || available.normalPreview.has(fnName$2),
+			isForceString: (fnName$2) => available.forceString.has(fnName$2) || available.forceStringPreview.has(fnName$2),
+			isForceArray: (fnName$2) => available.forceArray.has(fnName$2) || available.forceArrayPreview.has(fnName$2),
+			isForceInline: (fnName$2) => available.forceInline.has(fnName$2) || available.forceInlinePreview.has(fnName$2),
+			isPreview: (fnName$2) => available.normalPreview.has(fnName$2) || available.forceStringPreview.has(fnName$2) || available.forceArrayPreview.has(fnName$2) || available.forceInlinePreview.has(fnName$2),
+			RE: new RegExp(`\\b(${Object.values(available).flatMap((s) => [...s].map((f) => `(${f.replace(ESCAPE_REPLACE_RE, "\\$&")})`)).join("|")})\\(`, "g")
+		};
+	}
+	const fnUtils = createFnUtils(fnName);
+	function findFunctionCalls(code) {
+		const RE = fnUtils.RE;
+		const result = [];
+		let matched = RE.exec(code);
+		while (matched != null) {
+			const fnName$1 = matched[1];
+			const start = matched.index;
+			let end = start + fnName$1.length;
+			let depth = 1;
+			let inString = false;
+			while (depth > 0) {
+				end++;
+				if (inString === false && code[end] === "(") depth++;
+				else if (inString === false && code[end] === ")") depth--;
+				else if (inString === false && (code[end] === "'" || code[end] === "\"")) inString = code[end];
+				else if (inString === code[end]) inString = false;
 			}
-			ctx.isReady = true;
-		}, 300),
-		isReady: false,
-		configSources,
-		resolvedConfigPath: null,
-		engine: null,
-		transform: async (code, id) => {
-			try {
-				if (ctx.isReady === false || !needToTransform(id)) return;
-				ctx.usages.delete(id);
-				const functionCalls = findFunctionCalls(code, ctx.fnUtils.RE);
-				if (functionCalls.length === 0) return;
-				const usages = [];
-				const transformed = new MagicString(code);
-				for (const fnCall of functionCalls) {
-					const argsStr = `[${fnCall.snippet.slice(fnCall.fnName.length + 1, -1)}]`;
-					const args = new Function(`return ${argsStr}`)();
-					const names = await ctx.engine.use(...args);
-					const usage = {
-						atomicStyleIds: names,
-						params: args
-					};
-					usages.push(usage);
-					let transformedContent;
-					if (ctx.fnUtils.isNormal(fnCall.fnName)) transformedContent = ctx.transformedFormat === "array" ? `[${names.map((n) => `'${n}'`).join(", ")}]` : ctx.transformedFormat === "string" ? `'${names.join(" ")}'` : names.join(" ");
-					else if (ctx.fnUtils.isForceString(fnCall.fnName)) transformedContent = `'${names.join(" ")}'`;
-					else if (ctx.fnUtils.isForceArray(fnCall.fnName)) transformedContent = `[${names.map((n) => `'${n}'`).join(", ")}]`;
-					else if (ctx.fnUtils.isForceInline(fnCall.fnName)) transformedContent = names.join(" ");
-					else throw new Error(`Unexpected function name: ${fnCall.fnName}`);
-					transformed.update(fnCall.start, fnCall.end + 1, transformedContent);
-				}
-				ctx.usages.set(id, usages);
-				ctx.hooks.styleUpdated.trigger();
-				ctx.hooks.tsCodegenUpdated.trigger();
-				return {
-					code: transformed.toString(),
-					map: transformed.generateMap({ hires: true })
+			const snippet = code.slice(start, end + 1);
+			result.push({
+				fnName: fnName$1,
+				start,
+				end,
+				snippet
+			});
+			matched = RE.exec(code);
+		}
+		return result;
+	}
+	async function transform(code, id) {
+		const _engine = engine();
+		if (_engine == null) return null;
+		try {
+			log.debug(`Transforming file: ${id}`);
+			usages.delete(id);
+			const functionCalls = findFunctionCalls(code);
+			if (functionCalls.length === 0) return;
+			log.debug(`Found ${functionCalls.length} style function calls in ${id}`);
+			const usageList = [];
+			const transformed = new MagicString(code);
+			for (const fnCall of functionCalls) {
+				const argsStr = `[${fnCall.snippet.slice(fnCall.fnName.length + 1, -1)}]`;
+				const args = new Function(`return ${argsStr}`)();
+				const names = await _engine.use(...args);
+				const usage = {
+					atomicStyleIds: names,
+					params: args
 				};
-			} catch (error) {
-				warn(`Failed to transform code: ${error.message}`, error);
-				return;
+				usageList.push(usage);
+				let transformedContent;
+				if (fnUtils.isNormal(fnCall.fnName)) transformedContent = transformedFormat === "array" ? `[${names.map((n) => `'${n}'`).join(", ")}]` : transformedFormat === "string" ? `'${names.join(" ")}'` : names.join(" ");
+				else if (fnUtils.isForceString(fnCall.fnName)) transformedContent = `'${names.join(" ")}'`;
+				else if (fnUtils.isForceArray(fnCall.fnName)) transformedContent = `[${names.map((n) => `'${n}'`).join(", ")}]`;
+				else if (fnUtils.isForceInline(fnCall.fnName)) transformedContent = names.join(" ");
+				else throw new Error(`Unexpected function name: ${fnCall.fnName}`);
+				transformed.update(fnCall.start, fnCall.end + 1, transformedContent);
 			}
+			usages.set(id, usageList);
+			triggerStyleUpdated();
+			triggerTsCodegenUpdated();
+			log.debug(`Transformed ${usageList.length} style usages in ${id}`);
+			return {
+				code: transformed.toString(),
+				map: transformed.generateMap({ hires: true })
+			};
+		} catch (error) {
+			log.error(`Failed to transform code (${join(cwd(), id)}): ${error.message}`, error);
+			return;
+		}
+	}
+	return {
+		transformFilter: {
+			include: scan.include,
+			exclude: [
+				...scan.exclude,
+				cssCodegenFilepath(),
+				...tsCodegenFilepath() ? [tsCodegenFilepath()] : []
+			]
+		},
+		transform
+	};
+}
+function createCtx(options) {
+	const { cwd, cssCodegenFilepath, tsCodegenFilepath } = usePaths(options);
+	const { resolvedConfig, resolvedConfigPath, resolvedConfigContent, loadConfig } = useConfig({
+		...options,
+		cwd,
+		tsCodegenFilepath
+	});
+	const usages = /* @__PURE__ */ new Map();
+	const engine = signal(null);
+	const hooks = {
+		styleUpdated: createEventHook(),
+		tsCodegenUpdated: createEventHook()
+	};
+	const { transformFilter, transform } = useTransform({
+		...options,
+		cwd,
+		cssCodegenFilepath,
+		tsCodegenFilepath,
+		usages,
+		engine,
+		triggerStyleUpdated: () => hooks.styleUpdated.trigger(),
+		triggerTsCodegenUpdated: () => hooks.tsCodegenUpdated.trigger()
+	});
+	const ctx = {
+		currentPackageName: options.currentPackageName,
+		fnName: options.fnName,
+		transformedFormat: options.transformedFormat,
+		get cwd() {
+			return cwd();
+		},
+		set cwd(v) {
+			cwd(v);
+		},
+		get cssCodegenFilepath() {
+			return cssCodegenFilepath();
 		},
-		getCssContent: async (isDev) => {
-			if (ctx.isReady === false) return null;
+		get tsCodegenFilepath() {
+			return tsCodegenFilepath();
+		},
+		get hasVue() {
+			return isPackageExists("vue", { paths: [cwd()] });
+		},
+		get resolvedConfig() {
+			return resolvedConfig();
+		},
+		get resolvedConfigPath() {
+			return resolvedConfigPath();
+		},
+		get resolvedConfigContent() {
+			return resolvedConfigContent();
+		},
+		loadConfig,
+		usages,
+		hooks,
+		get engine() {
+			const _engine = engine();
+			if (_engine == null) throw new Error("Engine is not initialized yet");
+			return _engine;
+		},
+		transformFilter,
+		transform: async (code, id) => {
+			await ctx.setupPromise;
+			return transform(code, id);
+		},
+		getCssCodegenContent: async () => {
+			await ctx.setupPromise;
+			log.debug("Generating CSS code");
 			const atomicStyleIds = [...new Set([...ctx.usages.values()].flatMap((i) => [...new Set(i.flatMap((i$1) => i$1.atomicStyleIds))]))];
+			log.debug(`Collecting ${atomicStyleIds.length} atomic style IDs`);
 			return [
 				`/* Auto-generated by ${ctx.currentPackageName} */`,
-				await ctx.engine.renderPreflights(isDev),
-				await ctx.engine.renderAtomicStyles(isDev, { atomicStyleIds })
+				await ctx.engine.renderPreflights(true),
+				await ctx.engine.renderAtomicStyles(true, { atomicStyleIds })
 			].join("\n").trim();
 		},
 		getTsCodegenContent: async () => {
-			if (ctx.isReady === false || ctx.tsCodegenFilepath == null) return null;
+			await ctx.setupPromise;
+			if (ctx.tsCodegenFilepath == null) return null;
 			return await generateTsCodegenContent(ctx);
 		},
-		writeDevCssFile: debounce(async () => {
-			const content = await ctx.getCssContent(true);
+		writeCssCodegenFile: async () => {
+			await ctx.setupPromise;
+			const content = await ctx.getCssCodegenContent();
 			if (content == null) return;
-			await writeFile(ctx.devCssFilepath, content);
-		}, 300),
-		writeTsCodegenFile: debounce(async () => {
+			await mkdir(dirname(ctx.cssCodegenFilepath), { recursive: true }).catch(() => {});
+			log.debug(`Writing CSS code generation file: ${ctx.cssCodegenFilepath}`);
+			await writeFile(ctx.cssCodegenFilepath, content);
+		},
+		writeTsCodegenFile: async () => {
+			await ctx.setupPromise;
+			if (ctx.tsCodegenFilepath == null) return;
 			const content = await ctx.getTsCodegenContent();
-			if (ctx.tsCodegenFilepath == null || content == null) return;
+			if (content == null) return;
+			await mkdir(dirname(ctx.tsCodegenFilepath), { recursive: true }).catch(() => {});
+			log.debug(`Writing TypeScript code generation file: ${ctx.tsCodegenFilepath}`);
 			await writeFile(ctx.tsCodegenFilepath, content);
-		}, 300)
+		},
+		fullyCssCodegen: async () => {
+			await ctx.setupPromise;
+			log.debug("Starting full CSS code generation scan");
+			const stream = globbyStream(options.scan.include, { ignore: options.scan.exclude });
+			let fileCount = 0;
+			const _cwd = cwd();
+			for await (const entry of stream) {
+				const code = await readFile(join(_cwd, entry), "utf-8");
+				await ctx.transform(code, entry);
+				fileCount++;
+			}
+			log.debug(`Scanned ${fileCount} files for style collection`);
+			await ctx.writeCssCodegenFile();
+		},
+		setupPromise: null,
+		setup: () => {
+			ctx.setupPromise = setup().catch((error) => {
+				log.error(`Failed to setup integration context: ${error.message}`, error);
+			}).then(() => {
+				ctx.setupPromise = null;
+			});
+			return ctx.setupPromise;
+		}
 	};
-	await ctx.init();
+	async function setup() {
+		log.debug("Setting up integration context");
+		usages.clear();
+		hooks.styleUpdated.listeners.clear();
+		hooks.tsCodegenUpdated.listeners.clear();
+		engine(null);
+		await loadConfig();
+		const devPlugin = defineEnginePlugin({
+			name: "@pikacss/integration:dev",
+			preflightUpdated: () => hooks.styleUpdated.trigger(),
+			atomicStyleAdded: () => hooks.styleUpdated.trigger(),
+			autocompleteConfigUpdated: () => hooks.tsCodegenUpdated.trigger()
+		});
+		try {
+			const config = resolvedConfig() ?? {};
+			config.plugins = config.plugins ?? [];
+			config.plugins.unshift(devPlugin);
+			log.debug("Creating engine with loaded/default config");
+			engine(await createEngine(config));
+		} catch (error) {
+			log.error(`Failed to create engine: ${error.message}. Falling back to default config.`, error);
+			engine(await createEngine({ plugins: [devPlugin] }));
+		}
+		log.debug("Integration context setup successfully");
+	}
 	return ctx;
 }