@pikacss/integration 0.0.13 → 0.0.15

package/dist/index.cjs

@@ -41,23 +41,23 @@ function formatUnionStringType(list) {
 function generateAutocomplete(ctx) {
   const autocomplete = ctx.engine.config.autocomplete;
   return [
-    "export interface Autocomplete extends _Autocomplete {",
+    "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]) => `'${k}': ${v.join(" | ")}`).join(",")} }`,
     `  CssPropertiesValue: { ${Array.from(autocomplete.cssProperties.entries(), ([k, v]) => `'${k}': ${formatUnionStringType(v)}`).join(",")} }`,
-    "}",
+    "}>",
     ""
   ];
 }
 function generateStyleFn(ctx) {
   const { transformedFormat } = ctx;
   const lines = [
-    "type StyleFn_Array = (...params: StyleItem<Autocomplete>[]) => string[]",
-    "type StyleFn_String = (...params: StyleItem<Autocomplete>[]) => string",
-    "type StyleFn_Inline = (...params: StyleItem<Autocomplete>[]) => void"
+    "type StyleFn_Array = (...params: StyleItem[]) => string[]",
+    "type StyleFn_String = (...params: StyleItem[]) => string",
+    "type StyleFn_Inline = (...params: StyleItem[]) => void"
   ];
   if (transformedFormat === "array")
     lines.push("type StyleFn_Normal = StyleFn_Array");
@@ -118,7 +118,7 @@ function generateVueDeclaration(ctx) {
     ""
   ];
 }
-async function generateOverloadContent(ctx) {
+function generateOverloadContent(ctx) {
   const paramsLines = [];
   const fnsLines = [];
   const usages = [...ctx.usages.values()].flat();
@@ -153,22 +153,28 @@ async function generateOverloadContent(ctx) {
     ...paramsLines
   ];
 }
-async function generateTsCodegenContent(ctx) {
+function generateTsCodegenContent(ctx) {
   const lines = [
     `// Auto-generated by ${ctx.currentPackageName}`,
-    `import type { Autocomplete as _Autocomplete, StyleItem } from '${ctx.currentPackageName}'`,
-    `import { createDefineEngineConfigFn } from '${ctx.currentPackageName}'`,
+    `import type { CSSProperty, CSSSelectors, DefineAutocomplete, Properties, StyleDefinition, StyleItem } from '${ctx.currentPackageName}'`,
+    "",
+    `declare module '${ctx.currentPackageName}' {`,
+    "  interface PikaAugment {",
+    "    Autocomplete: Autocomplete",
+    "    Selector: Autocomplete['Selector'] | CSSSelectors",
+    "    CSSProperty: Autocomplete['ExtraCssProperty'] | CSSProperty",
+    "    Properties: Properties",
+    "    StyleDefinition: StyleDefinition",
+    "    StyleItem: StyleItem",
+    "  }",
+    "}",
     ""
   ];
   lines.push(...generateAutocomplete(ctx));
-  lines.push(
-    "export const defineEngineConfig: ReturnType<typeof createDefineEngineConfigFn<Autocomplete>> = createDefineEngineConfigFn<Autocomplete>()",
-    ""
-  );
   lines.push(...generateStyleFn(ctx));
   lines.push(...generateGlobalDeclaration(ctx));
   lines.push(...generateVueDeclaration(ctx));
-  lines.push(...await generateOverloadContent(ctx));
+  lines.push(...generateOverloadContent(ctx));
   return lines.join("\n");
 }
 
@@ -273,9 +279,10 @@ async function createCtx(options) {
         resolvedConfigPath = configSources[0];
         await promises.mkdir(pathe.dirname(resolvedConfigPath), { recursive: true }).catch(() => {
         });
-        const from = tsCodegenFilepath == null ? currentPackageName : `./${pathe.relative(pathe.dirname(resolvedConfigPath), tsCodegenFilepath)}`;
+        const relativeTsCodegenFilepath = tsCodegenFilepath == null ? null : `./${pathe.relative(pathe.dirname(resolvedConfigPath), tsCodegenFilepath)}`;
         await promises.writeFile(resolvedConfigPath, [
-          `import { defineEngineConfig } from '${from}'`,
+          ...relativeTsCodegenFilepath == null ? [] : [`/// <reference path="${relativeTsCodegenFilepath}" />`],
+          `import { defineEngineConfig } from '${currentPackageName}'`,
           "",
           "export default defineEngineConfig({",
           "  // Add your PikaCSS engine config here",
@@ -291,16 +298,6 @@ async function createCtx(options) {
     },
     init: async () => {
       ctx.isReady = false;
-      await promises.mkdir(pathe.dirname(devCssFilepath), { recursive: true }).catch(() => {
-      });
-      const isDevCssFileExists = await promises.stat(devCssFilepath).then((stat2) => stat2.isFile()).catch(() => false);
-      if (isDevCssFileExists === false)
-        await promises.writeFile(devCssFilepath, "");
-      if (tsCodegenFilepath != null) {
-        await promises.mkdir(pathe.dirname(tsCodegenFilepath), { recursive: true }).catch(() => {
-        });
-        await promises.writeFile(tsCodegenFilepath, "export function defineEngineConfig(config: any) { return config }");
-      }
       ctx.usages.clear();
       const { config, file } = await ctx.loadConfig().catch((error) => {
         core.warn(`Failed to load config file:  ${error.message}`, error);
@@ -319,6 +316,20 @@ async function createCtx(options) {
         atomicStyleAdded: () => ctx.hooks.styleUpdated.trigger(),
         autocompleteConfigUpdated: () => ctx.hooks.tsCodegenUpdated.trigger()
       });
+      await promises.mkdir(pathe.dirname(devCssFilepath), { recursive: true }).catch(() => {
+      });
+      const isDevCssFileExists = await promises.stat(devCssFilepath).then((stat2) => stat2.isFile()).catch(() => false);
+      if (isDevCssFileExists === false)
+        await promises.writeFile(devCssFilepath, "");
+      if (tsCodegenFilepath != null) {
+        await promises.mkdir(pathe.dirname(tsCodegenFilepath), { recursive: true }).catch(() => {
+        });
+        const isGenTsFileExists = await promises.stat(tsCodegenFilepath).then((stat2) => stat2.isFile()).catch(() => false);
+        if (isGenTsFileExists === false) {
+          const content = await generateTsCodegenContent(ctx);
+          await promises.writeFile(tsCodegenFilepath, content);
+        }
+      }
       ctx.isReady = true;
     },
     isReady: false,
@@ -335,7 +346,6 @@ async function createCtx(options) {
         if (functionCalls.length === 0)
           return;
         const usages = [];
-        ctx.usages.set(id, usages);
         const transformed = new MagicString__default(code);
         for (const fnCall of functionCalls) {
           const functionCallStr = fnCall.snippet;
@@ -347,7 +357,6 @@ async function createCtx(options) {
             params: args
           };
           usages.push(usage);
-          ctx.hooks.tsCodegenUpdated.trigger();
           let transformedContent;
           if (ctx.fnUtils.isNormal(fnCall.fnName)) {
             transformedContent = ctx.transformedFormat === "array" ? `[${names.map((n) => `'${n}'`).join(", ")}]` : ctx.transformedFormat === "string" ? `'${names.join(" ")}'` : names.join(" ");
@@ -362,6 +371,9 @@ async function createCtx(options) {
           }
           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 })
@@ -371,7 +383,7 @@ async function createCtx(options) {
         return void 0;
       }
     },
-    writeDevCssFile: async () => {
+    writeDevCssFile: () => {
       if (ctx.isReady === false)
         return;
       const atomicStyleIds = [...new Set([...ctx.usages.values()].flatMap((i) => [...new Set(i.flatMap((i2) => i2.atomicStyleIds))]))];
@@ -380,13 +392,13 @@ async function createCtx(options) {
         ctx.engine.renderPreflights(true),
         ctx.engine.renderAtomicStyles(true, { atomicStyleIds })
       ].join("\n").trim();
-      await promises.writeFile(ctx.devCssFilepath, css);
+      node_fs.writeFileSync(ctx.devCssFilepath, css);
     },
-    writeTsCodegenFile: async () => {
+    writeTsCodegenFile: () => {
       if (ctx.isReady === false || ctx.tsCodegenFilepath == null)
         return;
-      const content = await generateTsCodegenContent(ctx);
-      await promises.writeFile(ctx.tsCodegenFilepath, content);
+      const content = generateTsCodegenContent(ctx);
+      node_fs.writeFileSync(ctx.tsCodegenFilepath, content);
     }
   };
   await ctx.init();

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { EngineConfig, Engine } from '@pikacss/core';
+import { EngineConfig, Nullish, Engine } from '@pikacss/core';
 export * from '@pikacss/core';
 import { SourceMap } from 'magic-string';
 
@@ -30,7 +30,7 @@ interface IntegrationContext {
     fnUtils: FnUtils;
     transformedFormat: 'string' | 'array' | 'inline';
     devCssFilepath: string;
-    tsCodegenFilepath: string | null;
+    tsCodegenFilepath: string | Nullish;
     hasVue: boolean;
     usages: Map<string, UsageRecord[]>;
     hooks: {
@@ -50,20 +50,20 @@ interface IntegrationContext {
     init: () => Promise<any>;
     isReady: boolean;
     configSources: string[];
-    resolvedConfigPath: string | null;
+    resolvedConfigPath: string | Nullish;
     engine: Engine;
     transform: (code: string, id: string) => Promise<{
         code: string;
         map: SourceMap;
-    } | undefined>;
-    writeDevCssFile: () => Promise<void>;
-    writeTsCodegenFile: () => Promise<void>;
+    } | Nullish>;
+    writeDevCssFile: () => void;
+    writeTsCodegenFile: () => void;
 }
 interface IntegrationContextOptions {
     cwd: string;
     currentPackageName: string;
     target: string[];
-    configOrPath: EngineConfig | string | null | undefined;
+    configOrPath: EngineConfig | string | Nullish;
     fnName: string;
     transformedFormat: 'string' | 'array' | 'inline';
     tsCodegen: false | string;

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { EngineConfig, Engine } from '@pikacss/core';
+import { EngineConfig, Nullish, Engine } from '@pikacss/core';
 export * from '@pikacss/core';
 import { SourceMap } from 'magic-string';
 
@@ -30,7 +30,7 @@ interface IntegrationContext {
     fnUtils: FnUtils;
     transformedFormat: 'string' | 'array' | 'inline';
     devCssFilepath: string;
-    tsCodegenFilepath: string | null;
+    tsCodegenFilepath: string | Nullish;
     hasVue: boolean;
     usages: Map<string, UsageRecord[]>;
     hooks: {
@@ -50,20 +50,20 @@ interface IntegrationContext {
     init: () => Promise<any>;
     isReady: boolean;
     configSources: string[];
-    resolvedConfigPath: string | null;
+    resolvedConfigPath: string | Nullish;
     engine: Engine;
     transform: (code: string, id: string) => Promise<{
         code: string;
         map: SourceMap;
-    } | undefined>;
-    writeDevCssFile: () => Promise<void>;
-    writeTsCodegenFile: () => Promise<void>;
+    } | Nullish>;
+    writeDevCssFile: () => void;
+    writeTsCodegenFile: () => void;
 }
 interface IntegrationContextOptions {
     cwd: string;
     currentPackageName: string;
     target: string[];
-    configOrPath: EngineConfig | string | null | undefined;
+    configOrPath: EngineConfig | string | Nullish;
     fnName: string;
     transformedFormat: 'string' | 'array' | 'inline';
     tsCodegen: false | string;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { EngineConfig, Engine } from '@pikacss/core';
+import { EngineConfig, Nullish, Engine } from '@pikacss/core';
 export * from '@pikacss/core';
 import { SourceMap } from 'magic-string';
 
@@ -30,7 +30,7 @@ interface IntegrationContext {
     fnUtils: FnUtils;
     transformedFormat: 'string' | 'array' | 'inline';
     devCssFilepath: string;
-    tsCodegenFilepath: string | null;
+    tsCodegenFilepath: string | Nullish;
     hasVue: boolean;
     usages: Map<string, UsageRecord[]>;
     hooks: {
@@ -50,20 +50,20 @@ interface IntegrationContext {
     init: () => Promise<any>;
     isReady: boolean;
     configSources: string[];
-    resolvedConfigPath: string | null;
+    resolvedConfigPath: string | Nullish;
     engine: Engine;
     transform: (code: string, id: string) => Promise<{
         code: string;
         map: SourceMap;
-    } | undefined>;
-    writeDevCssFile: () => Promise<void>;
-    writeTsCodegenFile: () => Promise<void>;
+    } | Nullish>;
+    writeDevCssFile: () => void;
+    writeTsCodegenFile: () => void;
 }
 interface IntegrationContextOptions {
     cwd: string;
     currentPackageName: string;
     target: string[];
-    configOrPath: EngineConfig | string | null | undefined;
+    configOrPath: EngineConfig | string | Nullish;
     fnName: string;
     transformedFormat: 'string' | 'array' | 'inline';
     tsCodegen: false | string;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { statSync } from 'node:fs';
-import { writeFile, mkdir, stat } from 'node:fs/promises';
+import { writeFileSync, statSync } from 'node:fs';
+import { mkdir, stat, writeFile } from 'node:fs/promises';
 import { setWarnFn, warn, createEngine } from '@pikacss/core';
 export * from '@pikacss/core';
 import { createJiti } from 'jiti';
@@ -35,23 +35,23 @@ function formatUnionStringType(list) {
 function generateAutocomplete(ctx) {
   const autocomplete = ctx.engine.config.autocomplete;
   return [
-    "export interface Autocomplete extends _Autocomplete {",
+    "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]) => `'${k}': ${v.join(" | ")}`).join(",")} }`,
     `  CssPropertiesValue: { ${Array.from(autocomplete.cssProperties.entries(), ([k, v]) => `'${k}': ${formatUnionStringType(v)}`).join(",")} }`,
-    "}",
+    "}>",
     ""
   ];
 }
 function generateStyleFn(ctx) {
   const { transformedFormat } = ctx;
   const lines = [
-    "type StyleFn_Array = (...params: StyleItem<Autocomplete>[]) => string[]",
-    "type StyleFn_String = (...params: StyleItem<Autocomplete>[]) => string",
-    "type StyleFn_Inline = (...params: StyleItem<Autocomplete>[]) => void"
+    "type StyleFn_Array = (...params: StyleItem[]) => string[]",
+    "type StyleFn_String = (...params: StyleItem[]) => string",
+    "type StyleFn_Inline = (...params: StyleItem[]) => void"
   ];
   if (transformedFormat === "array")
     lines.push("type StyleFn_Normal = StyleFn_Array");
@@ -112,7 +112,7 @@ function generateVueDeclaration(ctx) {
     ""
   ];
 }
-async function generateOverloadContent(ctx) {
+function generateOverloadContent(ctx) {
   const paramsLines = [];
   const fnsLines = [];
   const usages = [...ctx.usages.values()].flat();
@@ -147,22 +147,28 @@ async function generateOverloadContent(ctx) {
     ...paramsLines
   ];
 }
-async function generateTsCodegenContent(ctx) {
+function generateTsCodegenContent(ctx) {
   const lines = [
     `// Auto-generated by ${ctx.currentPackageName}`,
-    `import type { Autocomplete as _Autocomplete, StyleItem } from '${ctx.currentPackageName}'`,
-    `import { createDefineEngineConfigFn } from '${ctx.currentPackageName}'`,
+    `import type { CSSProperty, CSSSelectors, DefineAutocomplete, Properties, StyleDefinition, StyleItem } from '${ctx.currentPackageName}'`,
+    "",
+    `declare module '${ctx.currentPackageName}' {`,
+    "  interface PikaAugment {",
+    "    Autocomplete: Autocomplete",
+    "    Selector: Autocomplete['Selector'] | CSSSelectors",
+    "    CSSProperty: Autocomplete['ExtraCssProperty'] | CSSProperty",
+    "    Properties: Properties",
+    "    StyleDefinition: StyleDefinition",
+    "    StyleItem: StyleItem",
+    "  }",
+    "}",
     ""
   ];
   lines.push(...generateAutocomplete(ctx));
-  lines.push(
-    "export const defineEngineConfig: ReturnType<typeof createDefineEngineConfigFn<Autocomplete>> = createDefineEngineConfigFn<Autocomplete>()",
-    ""
-  );
   lines.push(...generateStyleFn(ctx));
   lines.push(...generateGlobalDeclaration(ctx));
   lines.push(...generateVueDeclaration(ctx));
-  lines.push(...await generateOverloadContent(ctx));
+  lines.push(...generateOverloadContent(ctx));
   return lines.join("\n");
 }
 
@@ -267,9 +273,10 @@ async function createCtx(options) {
         resolvedConfigPath = configSources[0];
         await mkdir(dirname(resolvedConfigPath), { recursive: true }).catch(() => {
         });
-        const from = tsCodegenFilepath == null ? currentPackageName : `./${relative(dirname(resolvedConfigPath), tsCodegenFilepath)}`;
+        const relativeTsCodegenFilepath = tsCodegenFilepath == null ? null : `./${relative(dirname(resolvedConfigPath), tsCodegenFilepath)}`;
         await writeFile(resolvedConfigPath, [
-          `import { defineEngineConfig } from '${from}'`,
+          ...relativeTsCodegenFilepath == null ? [] : [`/// <reference path="${relativeTsCodegenFilepath}" />`],
+          `import { defineEngineConfig } from '${currentPackageName}'`,
           "",
           "export default defineEngineConfig({",
           "  // Add your PikaCSS engine config here",
@@ -285,16 +292,6 @@ async function createCtx(options) {
     },
     init: async () => {
       ctx.isReady = false;
-      await mkdir(dirname(devCssFilepath), { recursive: true }).catch(() => {
-      });
-      const isDevCssFileExists = await stat(devCssFilepath).then((stat2) => stat2.isFile()).catch(() => false);
-      if (isDevCssFileExists === false)
-        await writeFile(devCssFilepath, "");
-      if (tsCodegenFilepath != null) {
-        await mkdir(dirname(tsCodegenFilepath), { recursive: true }).catch(() => {
-        });
-        await writeFile(tsCodegenFilepath, "export function defineEngineConfig(config: any) { return config }");
-      }
       ctx.usages.clear();
       const { config, file } = await ctx.loadConfig().catch((error) => {
         warn(`Failed to load config file:  ${error.message}`, error);
@@ -313,6 +310,20 @@ async function createCtx(options) {
         atomicStyleAdded: () => ctx.hooks.styleUpdated.trigger(),
         autocompleteConfigUpdated: () => ctx.hooks.tsCodegenUpdated.trigger()
       });
+      await mkdir(dirname(devCssFilepath), { recursive: true }).catch(() => {
+      });
+      const isDevCssFileExists = await stat(devCssFilepath).then((stat2) => stat2.isFile()).catch(() => false);
+      if (isDevCssFileExists === false)
+        await writeFile(devCssFilepath, "");
+      if (tsCodegenFilepath != null) {
+        await mkdir(dirname(tsCodegenFilepath), { recursive: true }).catch(() => {
+        });
+        const isGenTsFileExists = await stat(tsCodegenFilepath).then((stat2) => stat2.isFile()).catch(() => false);
+        if (isGenTsFileExists === false) {
+          const content = await generateTsCodegenContent(ctx);
+          await writeFile(tsCodegenFilepath, content);
+        }
+      }
       ctx.isReady = true;
     },
     isReady: false,
@@ -329,7 +340,6 @@ async function createCtx(options) {
         if (functionCalls.length === 0)
           return;
         const usages = [];
-        ctx.usages.set(id, usages);
         const transformed = new MagicString(code);
         for (const fnCall of functionCalls) {
           const functionCallStr = fnCall.snippet;
@@ -341,7 +351,6 @@ async function createCtx(options) {
             params: args
           };
           usages.push(usage);
-          ctx.hooks.tsCodegenUpdated.trigger();
           let transformedContent;
           if (ctx.fnUtils.isNormal(fnCall.fnName)) {
             transformedContent = ctx.transformedFormat === "array" ? `[${names.map((n) => `'${n}'`).join(", ")}]` : ctx.transformedFormat === "string" ? `'${names.join(" ")}'` : names.join(" ");
@@ -356,6 +365,9 @@ async function createCtx(options) {
           }
           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 })
@@ -365,7 +377,7 @@ async function createCtx(options) {
         return void 0;
       }
     },
-    writeDevCssFile: async () => {
+    writeDevCssFile: () => {
       if (ctx.isReady === false)
         return;
       const atomicStyleIds = [...new Set([...ctx.usages.values()].flatMap((i) => [...new Set(i.flatMap((i2) => i2.atomicStyleIds))]))];
@@ -374,13 +386,13 @@ async function createCtx(options) {
         ctx.engine.renderPreflights(true),
         ctx.engine.renderAtomicStyles(true, { atomicStyleIds })
       ].join("\n").trim();
-      await writeFile(ctx.devCssFilepath, css);
+      writeFileSync(ctx.devCssFilepath, css);
     },
-    writeTsCodegenFile: async () => {
+    writeTsCodegenFile: () => {
       if (ctx.isReady === false || ctx.tsCodegenFilepath == null)
         return;
-      const content = await generateTsCodegenContent(ctx);
-      await writeFile(ctx.tsCodegenFilepath, content);
+      const content = generateTsCodegenContent(ctx);
+      writeFileSync(ctx.tsCodegenFilepath, content);
     }
   };
   await ctx.init();

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.13",
+  "version": "0.0.15",
   "author": "DevilTea <ch19980814@gmail.com>",
   "license": "MIT",
   "repository": {
@@ -40,7 +40,7 @@
     "magic-string": "^0.30.12",
     "micromatch": "^4.0.8",
     "pathe": "^2.0.3",
-    "@pikacss/core": "0.0.13"
+    "@pikacss/core": "0.0.15"
   },
   "devDependencies": {
     "@types/micromatch": "^4.0.9"