@pikacss/integration 0.0.45 → 0.0.47

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import { SourceMap } from "magic-string";
 export * from "@pikacss/core";
 
 //#region src/eventHook.d.ts
-type EventHookListener<EventPayload> = (payload: EventPayload) => void | Promise<void>;
+type EventHookListener<EventPayload> = (payload: EventPayload) => void;
 interface EventHook<EventPayload> {
   listeners: Set<EventHookListener<EventPayload>>;
   trigger: (payload: EventPayload) => void;
@@ -33,32 +33,36 @@ interface IntegrationContextOptions {
   };
   configOrPath: EngineConfig | string | Nullish;
   fnName: string;
-  transformedFormat: 'string' | 'array' | 'inline';
+  transformedFormat: 'string' | 'array';
   tsCodegen: false | string;
   cssCodegen: string;
   autoCreateConfig: boolean;
 }
+type LoadedConfigResult = {
+  config: EngineConfig;
+  file: null;
+  content: null;
+} | {
+  config: null;
+  file: null;
+  content: null;
+} | {
+  config: EngineConfig;
+  file: string;
+  content: string;
+};
 interface IntegrationContext {
   cwd: string;
   currentPackageName: string;
   fnName: string;
-  transformedFormat: 'string' | 'array' | 'inline';
+  transformedFormat: 'string' | 'array';
   cssCodegenFilepath: string;
   tsCodegenFilepath: string | Nullish;
   hasVue: boolean;
   resolvedConfig: EngineConfig | Nullish;
   resolvedConfigPath: string | Nullish;
   resolvedConfigContent: string | Nullish;
-  loadConfig: () => Promise<{
-    config: EngineConfig;
-    file: null;
-  } | {
-    config: null;
-    file: null;
-  } | {
-    config: EngineConfig;
-    file: string;
-  }>;
+  loadConfig: () => Promise<LoadedConfigResult>;
   usages: Map<string, UsageRecord[]>;
   hooks: {
     styleUpdated: ReturnType<typeof createEventHook<void>>;
@@ -85,4 +89,4 @@ interface IntegrationContext {
 //#region src/ctx.d.ts
 declare function createCtx(options: IntegrationContextOptions): IntegrationContext;
 //#endregion
-export { FnUtils, IntegrationContext, IntegrationContextOptions, UsageRecord, createCtx };
+export { FnUtils, IntegrationContext, IntegrationContextOptions, LoadedConfigResult, UsageRecord, createCtx };

package/dist/index.mjs

@@ -35,21 +35,37 @@ function createEventHook() {
 
 //#endregion
 //#region src/tsCodegen.ts
+function formatUnionType(parts) {
+	return parts.length > 0 ? parts.join(" | ") : "never";
+}
 function formatUnionStringType(list) {
-	return list.length > 0 ? list.map((i) => JSON.stringify(i)).join(" | ") : "never";
+	return formatUnionType(list.map((i) => JSON.stringify(i)));
+}
+function formatAutocompleteUnion(literals, patterns) {
+	return formatUnionType([...Array.from(literals, (value) => JSON.stringify(value)), ...patterns == null ? [] : [...patterns]]);
+}
+function formatAutocompleteValueMap(keys, entries, patternEntries, formatValue) {
+	const mergedKeys = new Set(keys);
+	for (const key of entries.keys()) mergedKeys.add(key);
+	for (const key of patternEntries.keys()) mergedKeys.add(key);
+	return mergedKeys.size > 0 ? `{ ${Array.from(mergedKeys, (key) => `${JSON.stringify(key)}: ${formatValue(entries.get(key) || [], patternEntries.get(key) || [])}`).join(", ")} }` : "never";
 }
 function generateAutocomplete(ctx) {
 	const autocomplete = ctx.engine.config.autocomplete;
+	const patterns = autocomplete.patterns ?? {
+		selectors: /* @__PURE__ */ new Set(),
+		styleItemStrings: /* @__PURE__ */ new Set(),
+		properties: /* @__PURE__ */ new Map(),
+		cssProperties: /* @__PURE__ */ new Map()
+	};
 	const { layers } = ctx.engine.config;
 	const layerNames = sortLayerNames(layers);
 	return [
 		"export type Autocomplete = DefineAutocomplete<{",
-		`  Selector: ${formatUnionStringType([...autocomplete.selectors])}`,
-		`  StyleItemString: ${formatUnionStringType([...autocomplete.styleItemStrings])}`,
-		`  ExtraProperty: ${formatUnionStringType([...autocomplete.extraProperties])}`,
-		`  ExtraCssProperty: ${formatUnionStringType([...autocomplete.extraCssProperties])}`,
-		`  PropertiesValue: { ${Array.from(autocomplete.properties.entries(), ([k, v]) => `${JSON.stringify(k)}: ${v.length > 0 ? v.join(" | ") : "never"}`).join(", ")} }`,
-		`  CssPropertiesValue: { ${Array.from(autocomplete.cssProperties.entries(), ([k, v]) => `${JSON.stringify(k)}: ${formatUnionStringType(v)}`).join(", ")} }`,
+		`  Selector: ${formatAutocompleteUnion(autocomplete.selectors, patterns.selectors)}`,
+		`  StyleItemString: ${formatAutocompleteUnion(autocomplete.styleItemStrings, patterns.styleItemStrings)}`,
+		`  PropertyValue: ${formatAutocompleteValueMap(autocomplete.extraProperties, autocomplete.properties, patterns.properties, (values, patterns) => formatUnionType([...values, ...patterns]))}`,
+		`  CSSPropertyValue: ${formatAutocompleteValueMap(autocomplete.extraCssProperties, autocomplete.cssProperties, patterns.cssProperties, (values, patterns) => formatAutocompleteUnion(values, patterns))}`,
 		`  Layer: ${formatUnionStringType(layerNames)}`,
 		"}>",
 		""
@@ -57,15 +73,10 @@ function generateAutocomplete(ctx) {
 }
 function generateStyleFn(ctx) {
 	const { transformedFormat } = ctx;
-	const lines = [
-		"type StyleFn_Array = (...params: StyleItem[]) => string[]",
-		"type StyleFn_String = (...params: StyleItem[]) => string",
-		"type StyleFn_Inline = (...params: StyleItem[]) => void"
-	];
+	const lines = ["type StyleFn_Array = (...params: StyleItem[]) => string[]", "type StyleFn_String = (...params: StyleItem[]) => string"];
 	if (transformedFormat === "array") lines.push("type StyleFn_Normal = StyleFn_Array");
 	else if (transformedFormat === "string") lines.push("type StyleFn_Normal = StyleFn_String");
-	else if (transformedFormat === "inline") lines.push("type StyleFn_Normal = StyleFn_Inline");
-	lines.push("type StyleFn = StyleFn_Normal & {", "  str: StyleFn_String", "  arr: StyleFn_Array", "  inl: StyleFn_Inline", "}", `type StyleFnWithPreview = PreviewOverloads<StyleFn_Normal>[\'fn\'] & {`, `  str: PreviewOverloads<StyleFn_String>[\'fn\']`, `  arr: PreviewOverloads<StyleFn_Array>[\'fn\']`, `  inl: PreviewOverloads<StyleFn_Inline>[\'fn\']`, "}", "");
+	lines.push("type StyleFn = StyleFn_Normal & {", "  str: StyleFn_String", "  arr: StyleFn_Array", "}", `type StyleFnWithPreview = PreviewOverloads<StyleFn_Normal>[\'fn\'] & {`, `  str: PreviewOverloads<StyleFn_String>[\'fn\']`, `  arr: PreviewOverloads<StyleFn_Array>[\'fn\']`, "}", "");
 	return lines;
 }
 function generateGlobalDeclaration(ctx) {
@@ -132,7 +143,7 @@ async function generateOverloadContent(ctx) {
 		} catch {}
 	}
 	return [
-		"interface PreviewOverloads<StyleFn extends (StyleFn_Array | StyleFn_String | StyleFn_Inline)> {",
+		"interface PreviewOverloads<StyleFn extends (StyleFn_Array | StyleFn_String)> {",
 		...fnsLines,
 		"  /**",
 		"   * PikaCSS Preview",
@@ -153,7 +164,7 @@ async function generateTsCodegenContent(ctx) {
 		"  interface PikaAugment {",
 		"    Autocomplete: Autocomplete",
 		"    Selector: Autocomplete['Selector'] | CSSSelector",
-		"    CSSProperty: Autocomplete['ExtraCssProperty'] | CSSProperty",
+		"    CSSProperty: ([Autocomplete['CSSPropertyValue']] extends [never] ? never : Extract<keyof Autocomplete['CSSPropertyValue'], string>) | CSSProperty",
 		"    Properties: Properties",
 		"    StyleDefinition: StyleDefinition",
 		"    StyleItem: StyleItem",
@@ -172,6 +183,36 @@ async function generateTsCodegenContent(ctx) {
 
 //#endregion
 //#region src/ctx.ts
+function createConfigScaffoldContent({ currentPackageName, resolvedConfigPath, tsCodegenFilepath }) {
+	const relativeTsCodegenFilepath = tsCodegenFilepath == null ? null : `./${relative(dirname(resolvedConfigPath), tsCodegenFilepath)}`;
+	return [
+		...relativeTsCodegenFilepath == null ? [] : [`/// <reference path="${relativeTsCodegenFilepath}" />`],
+		`import { defineEngineConfig } from '${currentPackageName}'`,
+		"",
+		"export default defineEngineConfig({",
+		"  // Add your PikaCSS engine config here",
+		"})"
+	].join("\n");
+}
+async function writeGeneratedFile(filepath, content) {
+	await mkdir(dirname(filepath), { recursive: true }).catch(() => {});
+	await writeFile(filepath, content);
+}
+async function evaluateConfigModule(resolvedConfigPath) {
+	log.info(`Using config file: ${resolvedConfigPath}`);
+	const { createJiti } = await import("jiti");
+	const jiti = createJiti(import.meta.url, { interopDefault: true });
+	const content = await readFile(resolvedConfigPath, "utf-8");
+	const config = (await jiti.evalModule(content, {
+		id: resolvedConfigPath,
+		forceTranspile: true
+	})).default;
+	return {
+		config: klona(config),
+		file: resolvedConfigPath,
+		content
+	};
+}
 function usePaths({ cwd: _cwd, cssCodegen, tsCodegen }) {
 	const cwd = signal(_cwd);
 	return {
@@ -194,6 +235,20 @@ function useConfig({ cwd, tsCodegenFilepath, currentPackageName, autoCreateConfi
 		for await (const entry of stream) return join(_cwd, entry);
 		return null;
 	}
+	async function ensureConfigPath(candidatePath) {
+		if (candidatePath != null) return candidatePath;
+		if (autoCreateConfig === false) {
+			log.warn("Config file not found and autoCreateConfig is false");
+			return null;
+		}
+		const resolvedConfigPath = specificConfigPath() ?? join(cwd(), "pika.config.js");
+		await writeGeneratedFile(resolvedConfigPath, createConfigScaffoldContent({
+			currentPackageName,
+			resolvedConfigPath,
+			tsCodegenFilepath: tsCodegenFilepath()
+		}));
+		return resolvedConfigPath;
+	}
 	const inlineConfig = typeof configOrPath === "object" ? configOrPath : null;
 	async function _loadConfig() {
 		try {
@@ -206,43 +261,13 @@ function useConfig({ cwd, tsCodegenFilepath, currentPackageName, autoCreateConfi
 					content: null
 				};
 			}
-			let resolvedConfigPath = await findFirstExistingConfigPath();
-			const _cwd = cwd();
-			if (resolvedConfigPath == null) {
-				if (autoCreateConfig === false) {
-					log.warn("Config file not found and autoCreateConfig is false");
-					return {
-						config: null,
-						file: null,
-						content: null
-					};
-				}
-				resolvedConfigPath = join(_cwd, specificConfigPath() ?? "pika.config.js");
-				await mkdir(dirname(resolvedConfigPath), { recursive: true }).catch(() => {});
-				const _tsCodegenFilepath = tsCodegenFilepath();
-				const relativeTsCodegenFilepath = _tsCodegenFilepath == null ? null : `./${relative(dirname(resolvedConfigPath), _tsCodegenFilepath)}`;
-				await writeFile(resolvedConfigPath, [
-					...relativeTsCodegenFilepath == null ? [] : [`/// <reference path="${relativeTsCodegenFilepath}" />`],
-					`import { defineEngineConfig } from '${currentPackageName}'`,
-					"",
-					"export default defineEngineConfig({",
-					"  // Add your PikaCSS engine config here",
-					"})"
-				].join("\n"));
-			}
-			log.info(`Using config file: ${resolvedConfigPath}`);
-			const { createJiti } = await import("jiti");
-			const jiti = createJiti(import.meta.url, { interopDefault: true });
-			const content = await readFile(resolvedConfigPath, "utf-8");
-			const config = (await jiti.evalModule(content, {
-				id: resolvedConfigPath,
-				forceTranspile: true
-			})).default;
-			return {
-				config: klona(config),
-				file: resolvedConfigPath,
-				content
+			const resolvedConfigPath = await ensureConfigPath(await findFirstExistingConfigPath());
+			if (resolvedConfigPath == null) return {
+				config: null,
+				file: null,
+				content: null
 			};
+			return await evaluateConfigModule(resolvedConfigPath);
 		} catch (error) {
 			log.error(`Failed to load config file: ${error.message}`, error);
 			return {
@@ -309,6 +334,46 @@ function useTransform({ cwd, cssCodegenFilepath, tsCodegenFilepath, scan, fnName
 		};
 	}
 	const fnUtils = createFnUtils(fnName);
+	function findTemplateExpressionEnd(code, start) {
+		let end = start;
+		let depth = 1;
+		let inString = false;
+		let isEscaped = false;
+		while (depth > 0 && end < code.length - 1) {
+			end++;
+			const char = code[end];
+			if (isEscaped) {
+				isEscaped = false;
+				continue;
+			}
+			if (char === "\\") {
+				isEscaped = true;
+				continue;
+			}
+			if (inString !== false) {
+				if (char === inString) inString = false;
+				else if (inString === "`" && char === "$" && code[end + 1] === "{") {
+					const nestedExpressionEnd = findTemplateExpressionEnd(code, end + 1);
+					if (nestedExpressionEnd === -1) return -1;
+					end = nestedExpressionEnd;
+				}
+				continue;
+			}
+			if (char === "{") depth++;
+			else if (char === "}") depth--;
+			else if (char === "'" || char === "\"" || char === "`") inString = char;
+			else if (char === "/" && code[end + 1] === "/") {
+				const lineEnd = code.indexOf("\n", end);
+				if (lineEnd === -1) return -1;
+				end = lineEnd;
+			} else if (char === "/" && code[end + 1] === "*") {
+				const commentEnd = code.indexOf("*/", end + 2);
+				if (commentEnd === -1) return -1;
+				end = commentEnd + 1;
+			}
+		}
+		return depth === 0 ? end : -1;
+	}
 	function findFunctionCalls(code) {
 		const RE = fnUtils.RE;
 		const result = [];
@@ -334,8 +399,12 @@ function useTransform({ cwd, cssCodegenFilepath, tsCodegenFilepath, scan, fnName
 				if (inString !== false) {
 					if (char === inString) inString = false;
 					else if (inString === "`" && char === "$" && code[end + 1] === "{") {
-						end++;
-						depth++;
+						const templateExpressionEnd = findTemplateExpressionEnd(code, end + 1);
+						if (templateExpressionEnd === -1) {
+							log.warn(`Malformed template literal expression in function call at position ${start}`);
+							break;
+						}
+						end = templateExpressionEnd;
 					}
 					continue;
 				}
@@ -395,7 +464,7 @@ function useTransform({ cwd, cssCodegenFilepath, tsCodegenFilepath, scan, fnName
 				};
 				usageList.push(usage);
 				let transformedContent;
-				if (fnUtils.isNormal(fnCall.fnName)) transformedContent = transformedFormat === "array" ? `[${names.map((n) => `'${n}'`).join(", ")}]` : transformedFormat === "string" ? `'${names.join(" ")}'` : names.join(" ");
+				if (fnUtils.isNormal(fnCall.fnName)) transformedContent = transformedFormat === "array" ? `[${names.map((n) => `'${n}'`).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 throw new Error(`Unexpected function name: ${fnCall.fnName}`);
@@ -514,18 +583,16 @@ function createCtx(options) {
 			await ctx.setupPromise;
 			const content = await ctx.getCssCodegenContent();
 			if (content == null) return;
-			await mkdir(dirname(ctx.cssCodegenFilepath), { recursive: true }).catch(() => {});
 			log.debug(`Writing CSS code generation file: ${ctx.cssCodegenFilepath}`);
-			await writeFile(ctx.cssCodegenFilepath, content);
+			await writeGeneratedFile(ctx.cssCodegenFilepath, content);
 		},
 		writeTsCodegenFile: async () => {
 			await ctx.setupPromise;
 			if (ctx.tsCodegenFilepath == null) return;
 			const content = await ctx.getTsCodegenContent();
 			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);
+			await writeGeneratedFile(ctx.tsCodegenFilepath, content);
 		},
 		fullyCssCodegen: async () => {
 			await ctx.setupPromise;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pikacss/integration",
   "type": "module",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "author": "DevilTea <ch19980814@gmail.com>",
   "license": "MIT",
   "repository": {
@@ -44,7 +44,7 @@
     "micromatch": "^4.0.8",
     "pathe": "^2.0.3",
     "perfect-debounce": "^2.1.0",
-    "@pikacss/core": "0.0.45"
+    "@pikacss/core": "0.0.47"
   },
   "devDependencies": {
     "@types/micromatch": "^4.0.10"