@pikacss/integration 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -8,25 +8,11 @@ const localPkg = require('local-pkg');
8
8
  const MagicString = require('magic-string');
9
9
  const micromatch = require('micromatch');
10
10
  const pathe = require('pathe');
11
- const prettier = require('prettier');
12
11
 
13
12
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
14
13
 
15
- function _interopNamespaceCompat(e) {
16
- if (e && typeof e === 'object' && 'default' in e) return e;
17
- const n = Object.create(null);
18
- if (e) {
19
- for (const k in e) {
20
- n[k] = e[k];
21
- }
22
- }
23
- n.default = e;
24
- return n;
25
- }
26
-
27
14
  const MagicString__default = /*#__PURE__*/_interopDefaultCompat(MagicString);
28
15
  const micromatch__default = /*#__PURE__*/_interopDefaultCompat(micromatch);
29
- const prettier__namespace = /*#__PURE__*/_interopNamespaceCompat(prettier);
30
16
 
31
17
  function createEventHook() {
32
18
  const listeners = /* @__PURE__ */ new Set();
@@ -80,11 +66,6 @@ function generateStyleFn(ctx) {
80
66
  else if (transformedFormat === "inline")
81
67
  lines.push("type StyleFn_Normal = StyleFn_Inline");
82
68
  lines.push(
83
- "type StyleFn = StyleFn_Normal & {",
84
- " str: StyleFn_String",
85
- " arr: StyleFn_Array",
86
- " inl: StyleFn_Inline",
87
- "}",
88
69
  `type StyleFnWithPreview = PreviewOverloads<StyleFn_Normal>['fn'] & {`,
89
70
  ` str: PreviewOverloads<StyleFn_String>['fn']`,
90
71
  ` arr: PreviewOverloads<StyleFn_Array>['fn']`,
@@ -101,12 +82,7 @@ function generateGlobalDeclaration(ctx) {
101
82
  " /**",
102
83
  " * PikaCSS",
103
84
  " */",
104
- ` const ${fnName}: StyleFn`,
105
- "",
106
- " /**",
107
- " * PikaCSS Preview",
108
- " */",
109
- ` const ${fnName}p: StyleFnWithPreview`,
85
+ ` const ${fnName}: StyleFnWithPreview`,
110
86
  "}",
111
87
  ""
112
88
  ];
@@ -121,12 +97,7 @@ function generateVueDeclaration(ctx) {
121
97
  " /**",
122
98
  " * PikaCSS",
123
99
  " */",
124
- ` ${fnName}: StyleFn`,
125
- "",
126
- " /**",
127
- " * PikaCSS Preview",
128
- " */",
129
- ` ${fnName}p: StyleFnWithPreview`,
100
+ ` ${fnName}: StyleFnWithPreview`,
130
101
  " }",
131
102
  "}",
132
103
  ""
@@ -145,7 +116,7 @@ async function generateOverloadContent(ctx) {
145
116
  " * ### PikaCSS Preview",
146
117
  " * ```css",
147
118
  // CSS Lines
148
- ...(await prettier__namespace.format(await ctx.engine.renderPreviewStyles(...usage.params), { parser: "css" })).split("\n").map((line) => ` * \u200E${line.replace(/^(\s*)/, "$1\u200E")}`),
119
+ ...ctx.engine.renderAtomicStyles(true, { atomicStyleIds: usage.atomicStyleIds, isPreview: true }).trim().split("\n").map((line) => ` * \u200E${line.replace(/^(\s*)/, "$1\u200E")}`),
149
120
  " * ```",
150
121
  " */",
151
122
  ` fn(...params: [${usage.params.map((_, index) => `p${index}: P${i}_${index}`).join(", ")}]): ReturnType<StyleFn>`
@@ -218,20 +189,14 @@ function createFnUtils(fnName) {
218
189
  normal: /* @__PURE__ */ new Set([fnName]),
219
190
  forceString: /* @__PURE__ */ new Set([`${fnName}.str`, `${fnName}['str']`, `${fnName}["str"]`, `${fnName}[\`str\`]`]),
220
191
  forceArray: /* @__PURE__ */ new Set([`${fnName}.arr`, `${fnName}['arr']`, `${fnName}["arr"]`, `${fnName}[\`arr\`]`]),
221
- forceInline: /* @__PURE__ */ new Set([`${fnName}.inl`, `${fnName}['inl']`, `${fnName}["inl"]`, `${fnName}[\`inl\`]`]),
222
- // preview
223
- normalPreview: /* @__PURE__ */ new Set([`${fnName}p`]),
224
- forceStringPreview: /* @__PURE__ */ new Set([`${fnName}p.str`, `${fnName}p['str']`, `${fnName}p["str"]`, `${fnName}p[\`str\`]`]),
225
- forceArrayPreview: /* @__PURE__ */ new Set([`${fnName}p.arr`, `${fnName}p['arr']`, `${fnName}p["arr"]`, `${fnName}p[\`arr\`]`]),
226
- forceInlinePreview: /* @__PURE__ */ new Set([`${fnName}p.inl`, `${fnName}p['inl']`, `${fnName}p["inl"]`, `${fnName}p[\`inl\`]`])
192
+ forceInline: /* @__PURE__ */ new Set([`${fnName}.inl`, `${fnName}['inl']`, `${fnName}["inl"]`, `${fnName}[\`inl\`]`])
227
193
  };
228
194
  const RE = new RegExp(`\\b(${Object.values(available).flatMap((s) => [...s].map((f) => `(${f.replace(ESCAPE_REPLACE_RE, "\\$&")})`)).join("|")})\\(`, "g");
229
195
  return {
230
- isNormal: (fnName2) => available.normal.has(fnName2) || available.normalPreview.has(fnName2),
231
- isForceString: (fnName2) => available.forceString.has(fnName2) || available.forceStringPreview.has(fnName2),
232
- isForceArray: (fnName2) => available.forceArray.has(fnName2) || available.forceArrayPreview.has(fnName2),
233
- isForceInline: (fnName2) => available.forceInline.has(fnName2) || available.forceInlinePreview.has(fnName2),
234
- isPreview: (fnName2) => available.normalPreview.has(fnName2) || available.forceStringPreview.has(fnName2) || available.forceArrayPreview.has(fnName2) || available.forceInlinePreview.has(fnName2),
196
+ isNormal: (fnName2) => available.normal.has(fnName2),
197
+ isForceString: (fnName2) => available.forceString.has(fnName2),
198
+ isForceArray: (fnName2) => available.forceArray.has(fnName2),
199
+ isForceInline: (fnName2) => available.forceInline.has(fnName2),
235
200
  RE
236
201
  };
237
202
  }
@@ -327,7 +292,7 @@ async function createCtx(options) {
327
292
  ctx.engine.config.plugins.unshift({
328
293
  name: "@pikacss/integration:dev",
329
294
  preflightUpdated: () => ctx.hooks.styleUpdated.trigger(),
330
- atomicRuleAdded: () => ctx.hooks.styleUpdated.trigger(),
295
+ atomicStyleAdded: () => ctx.hooks.styleUpdated.trigger(),
331
296
  autocompleteConfigUpdated: () => ctx.hooks.tsCodegenUpdated.trigger()
332
297
  });
333
298
  ctx.isReady = true;
@@ -352,11 +317,12 @@ async function createCtx(options) {
352
317
  const functionCallStr = fnCall.snippet;
353
318
  const argsStr = `[${functionCallStr.slice(fnCall.fnName.length + 1, -1)}]`;
354
319
  const args = new Function(`return ${argsStr}`)();
320
+ const names = await ctx.engine.use(...args);
355
321
  const usage = {
322
+ atomicStyleIds: names,
356
323
  params: args
357
324
  };
358
325
  usages.push(usage);
359
- const names = await ctx.engine.use(...args);
360
326
  ctx.hooks.tsCodegenUpdated.trigger();
361
327
  let transformedContent;
362
328
  if (ctx.fnUtils.isNormal(fnCall.fnName)) {
@@ -384,24 +350,12 @@ async function createCtx(options) {
384
350
  writeDevCssFile: async () => {
385
351
  if (ctx.isReady === false)
386
352
  return;
387
- let rawCss = "";
388
- let css = "";
389
- try {
390
- rawCss = ctx.engine.renderStyles();
391
- css = await prettier__namespace.format([
392
- `/* Auto-generated by ${ctx.currentPackageName} */`,
393
- rawCss
394
- ].join("\n"), { parser: "css" });
395
- } catch (error) {
396
- console.warn(`[${ctx.currentPackageName}] Failed to generate CSS: ${ctx.devCssFilepath}`);
397
- css = [
398
- `/* ${error.message.split("\n")[0]}`,
399
- "",
400
- rawCss,
401
- "",
402
- "*/"
403
- ].join("\n");
404
- }
353
+ const atomicStyleIds = [...new Set([...ctx.usages.values()].flatMap((i) => [...new Set(i.flatMap((i2) => i2.atomicStyleIds))]))];
354
+ const css = [
355
+ `/* Auto-generated by ${ctx.currentPackageName} */`,
356
+ ctx.engine.renderPreflights(true),
357
+ ctx.engine.renderAtomicStyles(true, { atomicStyleIds })
358
+ ].join("\n").trim();
405
359
  await promises.writeFile(ctx.devCssFilepath, css);
406
360
  },
407
361
  writeTsCodegenFile: async () => {
package/dist/index.d.cts CHANGED
@@ -12,6 +12,7 @@ interface EventHook<EventPayload> {
12
12
  declare function createEventHook<EventPayload>(): EventHook<EventPayload>;
13
13
 
14
14
  interface UsageRecord {
15
+ atomicStyleIds: string[];
15
16
  params: Parameters<Engine['use']>;
16
17
  }
17
18
  interface FnUtils {
@@ -19,7 +20,6 @@ interface FnUtils {
19
20
  isForceString: (fnName: string) => boolean;
20
21
  isForceArray: (fnName: string) => boolean;
21
22
  isForceInline: (fnName: string) => boolean;
22
- isPreview: (fnName: string) => boolean;
23
23
  RE: RegExp;
24
24
  }
25
25
  interface IntegrationContext {
package/dist/index.d.mts CHANGED
@@ -12,6 +12,7 @@ interface EventHook<EventPayload> {
12
12
  declare function createEventHook<EventPayload>(): EventHook<EventPayload>;
13
13
 
14
14
  interface UsageRecord {
15
+ atomicStyleIds: string[];
15
16
  params: Parameters<Engine['use']>;
16
17
  }
17
18
  interface FnUtils {
@@ -19,7 +20,6 @@ interface FnUtils {
19
20
  isForceString: (fnName: string) => boolean;
20
21
  isForceArray: (fnName: string) => boolean;
21
22
  isForceInline: (fnName: string) => boolean;
22
- isPreview: (fnName: string) => boolean;
23
23
  RE: RegExp;
24
24
  }
25
25
  interface IntegrationContext {
package/dist/index.d.ts CHANGED
@@ -12,6 +12,7 @@ interface EventHook<EventPayload> {
12
12
  declare function createEventHook<EventPayload>(): EventHook<EventPayload>;
13
13
 
14
14
  interface UsageRecord {
15
+ atomicStyleIds: string[];
15
16
  params: Parameters<Engine['use']>;
16
17
  }
17
18
  interface FnUtils {
@@ -19,7 +20,6 @@ interface FnUtils {
19
20
  isForceString: (fnName: string) => boolean;
20
21
  isForceArray: (fnName: string) => boolean;
21
22
  isForceInline: (fnName: string) => boolean;
22
- isPreview: (fnName: string) => boolean;
23
23
  RE: RegExp;
24
24
  }
25
25
  interface IntegrationContext {
package/dist/index.mjs CHANGED
@@ -7,7 +7,6 @@ import { isPackageExists } from 'local-pkg';
7
7
  import MagicString from 'magic-string';
8
8
  import micromatch from 'micromatch';
9
9
  import { isAbsolute, resolve, join, dirname, relative } from 'pathe';
10
- import * as prettier from 'prettier';
11
10
 
12
11
  function createEventHook() {
13
12
  const listeners = /* @__PURE__ */ new Set();
@@ -61,11 +60,6 @@ function generateStyleFn(ctx) {
61
60
  else if (transformedFormat === "inline")
62
61
  lines.push("type StyleFn_Normal = StyleFn_Inline");
63
62
  lines.push(
64
- "type StyleFn = StyleFn_Normal & {",
65
- " str: StyleFn_String",
66
- " arr: StyleFn_Array",
67
- " inl: StyleFn_Inline",
68
- "}",
69
63
  `type StyleFnWithPreview = PreviewOverloads<StyleFn_Normal>['fn'] & {`,
70
64
  ` str: PreviewOverloads<StyleFn_String>['fn']`,
71
65
  ` arr: PreviewOverloads<StyleFn_Array>['fn']`,
@@ -82,12 +76,7 @@ function generateGlobalDeclaration(ctx) {
82
76
  " /**",
83
77
  " * PikaCSS",
84
78
  " */",
85
- ` const ${fnName}: StyleFn`,
86
- "",
87
- " /**",
88
- " * PikaCSS Preview",
89
- " */",
90
- ` const ${fnName}p: StyleFnWithPreview`,
79
+ ` const ${fnName}: StyleFnWithPreview`,
91
80
  "}",
92
81
  ""
93
82
  ];
@@ -102,12 +91,7 @@ function generateVueDeclaration(ctx) {
102
91
  " /**",
103
92
  " * PikaCSS",
104
93
  " */",
105
- ` ${fnName}: StyleFn`,
106
- "",
107
- " /**",
108
- " * PikaCSS Preview",
109
- " */",
110
- ` ${fnName}p: StyleFnWithPreview`,
94
+ ` ${fnName}: StyleFnWithPreview`,
111
95
  " }",
112
96
  "}",
113
97
  ""
@@ -126,7 +110,7 @@ async function generateOverloadContent(ctx) {
126
110
  " * ### PikaCSS Preview",
127
111
  " * ```css",
128
112
  // CSS Lines
129
- ...(await prettier.format(await ctx.engine.renderPreviewStyles(...usage.params), { parser: "css" })).split("\n").map((line) => ` * \u200E${line.replace(/^(\s*)/, "$1\u200E")}`),
113
+ ...ctx.engine.renderAtomicStyles(true, { atomicStyleIds: usage.atomicStyleIds, isPreview: true }).trim().split("\n").map((line) => ` * \u200E${line.replace(/^(\s*)/, "$1\u200E")}`),
130
114
  " * ```",
131
115
  " */",
132
116
  ` fn(...params: [${usage.params.map((_, index) => `p${index}: P${i}_${index}`).join(", ")}]): ReturnType<StyleFn>`
@@ -199,20 +183,14 @@ function createFnUtils(fnName) {
199
183
  normal: /* @__PURE__ */ new Set([fnName]),
200
184
  forceString: /* @__PURE__ */ new Set([`${fnName}.str`, `${fnName}['str']`, `${fnName}["str"]`, `${fnName}[\`str\`]`]),
201
185
  forceArray: /* @__PURE__ */ new Set([`${fnName}.arr`, `${fnName}['arr']`, `${fnName}["arr"]`, `${fnName}[\`arr\`]`]),
202
- forceInline: /* @__PURE__ */ new Set([`${fnName}.inl`, `${fnName}['inl']`, `${fnName}["inl"]`, `${fnName}[\`inl\`]`]),
203
- // preview
204
- normalPreview: /* @__PURE__ */ new Set([`${fnName}p`]),
205
- forceStringPreview: /* @__PURE__ */ new Set([`${fnName}p.str`, `${fnName}p['str']`, `${fnName}p["str"]`, `${fnName}p[\`str\`]`]),
206
- forceArrayPreview: /* @__PURE__ */ new Set([`${fnName}p.arr`, `${fnName}p['arr']`, `${fnName}p["arr"]`, `${fnName}p[\`arr\`]`]),
207
- forceInlinePreview: /* @__PURE__ */ new Set([`${fnName}p.inl`, `${fnName}p['inl']`, `${fnName}p["inl"]`, `${fnName}p[\`inl\`]`])
186
+ forceInline: /* @__PURE__ */ new Set([`${fnName}.inl`, `${fnName}['inl']`, `${fnName}["inl"]`, `${fnName}[\`inl\`]`])
208
187
  };
209
188
  const RE = new RegExp(`\\b(${Object.values(available).flatMap((s) => [...s].map((f) => `(${f.replace(ESCAPE_REPLACE_RE, "\\$&")})`)).join("|")})\\(`, "g");
210
189
  return {
211
- isNormal: (fnName2) => available.normal.has(fnName2) || available.normalPreview.has(fnName2),
212
- isForceString: (fnName2) => available.forceString.has(fnName2) || available.forceStringPreview.has(fnName2),
213
- isForceArray: (fnName2) => available.forceArray.has(fnName2) || available.forceArrayPreview.has(fnName2),
214
- isForceInline: (fnName2) => available.forceInline.has(fnName2) || available.forceInlinePreview.has(fnName2),
215
- isPreview: (fnName2) => available.normalPreview.has(fnName2) || available.forceStringPreview.has(fnName2) || available.forceArrayPreview.has(fnName2) || available.forceInlinePreview.has(fnName2),
190
+ isNormal: (fnName2) => available.normal.has(fnName2),
191
+ isForceString: (fnName2) => available.forceString.has(fnName2),
192
+ isForceArray: (fnName2) => available.forceArray.has(fnName2),
193
+ isForceInline: (fnName2) => available.forceInline.has(fnName2),
216
194
  RE
217
195
  };
218
196
  }
@@ -308,7 +286,7 @@ async function createCtx(options) {
308
286
  ctx.engine.config.plugins.unshift({
309
287
  name: "@pikacss/integration:dev",
310
288
  preflightUpdated: () => ctx.hooks.styleUpdated.trigger(),
311
- atomicRuleAdded: () => ctx.hooks.styleUpdated.trigger(),
289
+ atomicStyleAdded: () => ctx.hooks.styleUpdated.trigger(),
312
290
  autocompleteConfigUpdated: () => ctx.hooks.tsCodegenUpdated.trigger()
313
291
  });
314
292
  ctx.isReady = true;
@@ -333,11 +311,12 @@ async function createCtx(options) {
333
311
  const functionCallStr = fnCall.snippet;
334
312
  const argsStr = `[${functionCallStr.slice(fnCall.fnName.length + 1, -1)}]`;
335
313
  const args = new Function(`return ${argsStr}`)();
314
+ const names = await ctx.engine.use(...args);
336
315
  const usage = {
316
+ atomicStyleIds: names,
337
317
  params: args
338
318
  };
339
319
  usages.push(usage);
340
- const names = await ctx.engine.use(...args);
341
320
  ctx.hooks.tsCodegenUpdated.trigger();
342
321
  let transformedContent;
343
322
  if (ctx.fnUtils.isNormal(fnCall.fnName)) {
@@ -365,24 +344,12 @@ async function createCtx(options) {
365
344
  writeDevCssFile: async () => {
366
345
  if (ctx.isReady === false)
367
346
  return;
368
- let rawCss = "";
369
- let css = "";
370
- try {
371
- rawCss = ctx.engine.renderStyles();
372
- css = await prettier.format([
373
- `/* Auto-generated by ${ctx.currentPackageName} */`,
374
- rawCss
375
- ].join("\n"), { parser: "css" });
376
- } catch (error) {
377
- console.warn(`[${ctx.currentPackageName}] Failed to generate CSS: ${ctx.devCssFilepath}`);
378
- css = [
379
- `/* ${error.message.split("\n")[0]}`,
380
- "",
381
- rawCss,
382
- "",
383
- "*/"
384
- ].join("\n");
385
- }
347
+ const atomicStyleIds = [...new Set([...ctx.usages.values()].flatMap((i) => [...new Set(i.flatMap((i2) => i2.atomicStyleIds))]))];
348
+ const css = [
349
+ `/* Auto-generated by ${ctx.currentPackageName} */`,
350
+ ctx.engine.renderPreflights(true),
351
+ ctx.engine.renderAtomicStyles(true, { atomicStyleIds })
352
+ ].join("\n").trim();
386
353
  await writeFile(ctx.devCssFilepath, css);
387
354
  },
388
355
  writeTsCodegenFile: async () => {
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
7
- "version": "0.0.9",
7
+ "version": "0.0.10",
8
8
  "author": "DevilTea <ch19980814@gmail.com>",
9
9
  "license": "MIT",
10
10
  "repository": {
@@ -40,8 +40,7 @@
40
40
  "magic-string": "^0.30.12",
41
41
  "micromatch": "^4.0.8",
42
42
  "pathe": "^2.0.3",
43
- "prettier": "^3.2.5",
44
- "@pikacss/core": "0.0.9"
43
+ "@pikacss/core": "0.0.10"
45
44
  },
46
45
  "devDependencies": {
47
46
  "@types/micromatch": "^4.0.9"