@pandacss/parser 0.4.0 → 0.5.1
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.d.mts +78 -0
- package/dist/index.js +107 -58
- package/dist/index.mjs +109 -60
- package/package.json +8 -9
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import * as ts_morph from 'ts-morph';
|
|
2
|
+
import { ProjectOptions as ProjectOptions$1 } from 'ts-morph';
|
|
3
|
+
import { ResultItem, RecipeConfig, PandaHookable } from '@pandacss/types';
|
|
4
|
+
|
|
5
|
+
declare class ParserResult {
|
|
6
|
+
jsx: Set<ResultItem>;
|
|
7
|
+
css: Set<ResultItem>;
|
|
8
|
+
cva: Set<ResultItem>;
|
|
9
|
+
recipe: Map<string, Set<ResultItem>>;
|
|
10
|
+
pattern: Map<string, Set<ResultItem>>;
|
|
11
|
+
filePath: string | undefined;
|
|
12
|
+
set(name: 'cva' | 'css', result: ResultItem): void;
|
|
13
|
+
setCva(result: ResultItem): void;
|
|
14
|
+
setJsx(result: ResultItem): void;
|
|
15
|
+
setPattern(name: string, result: ResultItem): void;
|
|
16
|
+
setRecipe(name: string, result: ResultItem): void;
|
|
17
|
+
isEmpty(): boolean;
|
|
18
|
+
setFilePath(filePath: string): this;
|
|
19
|
+
toArray(): ResultItem[];
|
|
20
|
+
toJSON(): {
|
|
21
|
+
css: ResultItem[];
|
|
22
|
+
cva: ResultItem[];
|
|
23
|
+
recipe: {
|
|
24
|
+
[k: string]: ResultItem[];
|
|
25
|
+
};
|
|
26
|
+
pattern: {
|
|
27
|
+
[k: string]: ResultItem[];
|
|
28
|
+
};
|
|
29
|
+
jsx: ResultItem[];
|
|
30
|
+
};
|
|
31
|
+
merge(result: ParserResult): this;
|
|
32
|
+
static fromJSON(json: string): ParserResult;
|
|
33
|
+
}
|
|
34
|
+
declare const createParserResult: () => ParserResult;
|
|
35
|
+
|
|
36
|
+
type ParserPatternNode = {
|
|
37
|
+
name: string;
|
|
38
|
+
type: 'pattern';
|
|
39
|
+
props?: string[];
|
|
40
|
+
baseName: string;
|
|
41
|
+
};
|
|
42
|
+
type ParserRecipeNode = {
|
|
43
|
+
name: string;
|
|
44
|
+
type: 'recipe';
|
|
45
|
+
props: string[];
|
|
46
|
+
baseName: string;
|
|
47
|
+
jsx: RecipeConfig['jsx'];
|
|
48
|
+
};
|
|
49
|
+
type ParserNodeOptions = ParserPatternNode | ParserRecipeNode;
|
|
50
|
+
type ParserOptions = {
|
|
51
|
+
importMap: Record<'css' | 'recipe' | 'pattern' | 'jsx', string>;
|
|
52
|
+
jsx?: {
|
|
53
|
+
factory: string;
|
|
54
|
+
nodes: ParserNodeOptions[];
|
|
55
|
+
isStyleProp: (prop: string) => boolean;
|
|
56
|
+
};
|
|
57
|
+
getRecipeName: (tagName: string) => string;
|
|
58
|
+
getRecipeByName: (name: string) => RecipeConfig | undefined;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
type ProjectOptions = Partial<ProjectOptions$1> & {
|
|
62
|
+
readFile: (filePath: string) => string;
|
|
63
|
+
getFiles: () => string[];
|
|
64
|
+
hooks: PandaHookable;
|
|
65
|
+
parserOptions: ParserOptions;
|
|
66
|
+
};
|
|
67
|
+
declare const createProject: ({ getFiles, readFile, parserOptions, hooks, ...projectOptions }: ProjectOptions) => {
|
|
68
|
+
getSourceFile: (filePath: string) => ts_morph.SourceFile | undefined;
|
|
69
|
+
removeSourceFile: (filePath: string) => void;
|
|
70
|
+
createSourceFile: (filePath: string) => ts_morph.SourceFile;
|
|
71
|
+
addSourceFile: (filePath: string, content: string) => ts_morph.SourceFile;
|
|
72
|
+
parseSourceFile: (filePath: string) => ParserResult | undefined;
|
|
73
|
+
reloadSourceFile: (filePath: string) => ts_morph.FileSystemRefreshResult | undefined;
|
|
74
|
+
reloadSourceFiles: () => void;
|
|
75
|
+
};
|
|
76
|
+
type Project = ReturnType<typeof createProject>;
|
|
77
|
+
|
|
78
|
+
export { ParserResult, Project, ProjectOptions, createParserResult, createProject };
|
package/dist/index.js
CHANGED
|
@@ -97,7 +97,7 @@ function getImportDeclarations(file, options) {
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
// src/parser-result.ts
|
|
100
|
-
var ParserResult = class {
|
|
100
|
+
var ParserResult = class _ParserResult {
|
|
101
101
|
jsx = /* @__PURE__ */ new Set();
|
|
102
102
|
css = /* @__PURE__ */ new Set();
|
|
103
103
|
cva = /* @__PURE__ */ new Set();
|
|
@@ -162,7 +162,7 @@ var ParserResult = class {
|
|
|
162
162
|
}
|
|
163
163
|
static fromJSON(json) {
|
|
164
164
|
const data = JSON.parse(json);
|
|
165
|
-
const result = new
|
|
165
|
+
const result = new _ParserResult();
|
|
166
166
|
result.css = new Set(data.css);
|
|
167
167
|
result.cva = new Set(data.cva);
|
|
168
168
|
result.recipe = new Map(Object.entries(data.recipe));
|
|
@@ -175,6 +175,8 @@ var createParserResult = () => new ParserResult();
|
|
|
175
175
|
|
|
176
176
|
// src/parser.ts
|
|
177
177
|
var isNodeRecipe = (node) => node.type === "recipe";
|
|
178
|
+
var cvaProps = ["compoundVariants", "defaultVariants", "variants", "base"];
|
|
179
|
+
var isCva = (map) => cvaProps.some((prop) => map.has(prop));
|
|
178
180
|
function createImportMatcher(mod, values) {
|
|
179
181
|
const regex = values ? new RegExp(`^(${values.join("|")})$`) : /.*/;
|
|
180
182
|
return {
|
|
@@ -188,10 +190,10 @@ function createImportMatcher(mod, values) {
|
|
|
188
190
|
var combineResult = (unboxed) => {
|
|
189
191
|
return [...unboxed.conditions, unboxed.raw, ...unboxed.spreadConditions];
|
|
190
192
|
};
|
|
191
|
-
var fallback = (
|
|
193
|
+
var fallback = (box2) => ({
|
|
192
194
|
value: void 0,
|
|
193
|
-
getNode: () =>
|
|
194
|
-
getStack: () =>
|
|
195
|
+
getNode: () => box2.getNode(),
|
|
196
|
+
getStack: () => box2.getStack()
|
|
195
197
|
});
|
|
196
198
|
var defaultEnv = { preset: "NONE" };
|
|
197
199
|
function createParser(options) {
|
|
@@ -204,7 +206,7 @@ function createParser(options) {
|
|
|
204
206
|
if (jsx) {
|
|
205
207
|
importRegex.push(createImportMatcher(importMap.jsx, [jsx.factory, ...jsx.nodes.map((node) => node.name)]));
|
|
206
208
|
}
|
|
207
|
-
return function
|
|
209
|
+
return function parse2(sourceFile) {
|
|
208
210
|
if (!sourceFile)
|
|
209
211
|
return;
|
|
210
212
|
const filePath = sourceFile.getFilePath();
|
|
@@ -219,10 +221,11 @@ function createParser(options) {
|
|
|
219
221
|
imports.value.length ? `Found import { ${imports} } in ${filePath}` : `No import found in ${filePath}`
|
|
220
222
|
);
|
|
221
223
|
const [css] = importRegex;
|
|
224
|
+
const jsxFactoryAlias = jsx ? imports.getAlias(jsx.factory) : "styled";
|
|
222
225
|
const isValidPattern = imports.createMatch(importMap.pattern);
|
|
223
226
|
const isValidRecipe = imports.createMatch(importMap.recipe);
|
|
224
227
|
const isValidStyleFn = (name) => name === jsx?.factory;
|
|
225
|
-
const
|
|
228
|
+
const isFactory = (name) => Boolean(jsx && name.startsWith(jsxFactoryAlias));
|
|
226
229
|
const jsxPatternNodes = new RegExp(
|
|
227
230
|
`^(${jsx?.nodes.map((node) => node.type === "pattern" && node.name).join("|")})$`
|
|
228
231
|
);
|
|
@@ -273,11 +276,9 @@ function createParser(options) {
|
|
|
273
276
|
const matchTag = (0, import_shared2.memo)((tagName) => {
|
|
274
277
|
if (!tagName)
|
|
275
278
|
return false;
|
|
276
|
-
return components.has(tagName) || isUpperCase(tagName) || tagName
|
|
279
|
+
return components.has(tagName) || isUpperCase(tagName) || isFactory(tagName) || isJsxTagRecipe(tagName);
|
|
277
280
|
});
|
|
278
281
|
const matchTagProp = (0, import_shared2.memo)((tagName, propName) => {
|
|
279
|
-
if (propertiesMap.size === 0)
|
|
280
|
-
return true;
|
|
281
282
|
if (Boolean(components.get(tagName)?.has(propName)) || options.jsx?.isStyleProp(propName) || propertiesMap.has(propName))
|
|
282
283
|
return true;
|
|
283
284
|
if (isJsxTagRecipe(tagName)) {
|
|
@@ -289,7 +290,7 @@ function createParser(options) {
|
|
|
289
290
|
const matchFn = (0, import_shared2.memo)((fnName) => {
|
|
290
291
|
if (recipes.has(fnName) || patterns.has(fnName))
|
|
291
292
|
return true;
|
|
292
|
-
if (fnName === cvaAlias || fnName === cssAlias || fnName
|
|
293
|
+
if (fnName === cvaAlias || fnName === cssAlias || isFactory(fnName))
|
|
293
294
|
return true;
|
|
294
295
|
return functions.has(fnName);
|
|
295
296
|
});
|
|
@@ -309,68 +310,115 @@ function createParser(options) {
|
|
|
309
310
|
return true;
|
|
310
311
|
}
|
|
311
312
|
},
|
|
313
|
+
taggedTemplates: {
|
|
314
|
+
matchTaggedTemplate: (tag) => matchFn(tag.fnName)
|
|
315
|
+
},
|
|
312
316
|
getEvaluateOptions: (node) => ({ node, environment: defaultEnv }),
|
|
313
317
|
flags: { skipTraverseFiles: true }
|
|
314
318
|
});
|
|
315
319
|
measure();
|
|
316
320
|
extractResultByName.forEach((result, alias) => {
|
|
317
321
|
const name = imports.getName(alias);
|
|
318
|
-
import_logger.logger.debug(`ast:${name}`, {
|
|
322
|
+
import_logger.logger.debug(`ast:${name}`, name !== alias ? { kind: result.kind, alias } : { kind: result.kind });
|
|
319
323
|
if (result.kind === "function") {
|
|
320
324
|
(0, import_ts_pattern.match)(name).when(css.match, (name2) => {
|
|
321
325
|
result.queryList.forEach((query) => {
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
326
|
+
if (query.kind === "call-expression") {
|
|
327
|
+
collector.set(name2, {
|
|
328
|
+
name: name2,
|
|
329
|
+
box: query.box.value[0] ?? fallback(query.box),
|
|
330
|
+
data: combineResult((0, import_extractor.unbox)(query.box.value[0]))
|
|
331
|
+
});
|
|
332
|
+
} else if (query.kind === "tagged-template") {
|
|
333
|
+
const obj = (0, import_shared2.astish)(query.box.value);
|
|
334
|
+
collector.set(name2, {
|
|
335
|
+
name: name2,
|
|
336
|
+
box: query.box ?? fallback(query.box),
|
|
337
|
+
data: [obj]
|
|
338
|
+
});
|
|
339
|
+
}
|
|
327
340
|
});
|
|
328
341
|
}).when(isValidPattern, (name2) => {
|
|
329
342
|
result.queryList.forEach((query) => {
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
343
|
+
if (query.kind === "call-expression") {
|
|
344
|
+
collector.setPattern(name2, {
|
|
345
|
+
name: name2,
|
|
346
|
+
box: query.box.value[0] ?? fallback(query.box),
|
|
347
|
+
data: combineResult((0, import_extractor.unbox)(query.box.value[0]))
|
|
348
|
+
});
|
|
349
|
+
}
|
|
335
350
|
});
|
|
336
351
|
}).when(isValidRecipe, (name2) => {
|
|
337
352
|
result.queryList.forEach((query) => {
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
353
|
+
if (query.kind === "call-expression") {
|
|
354
|
+
collector.setRecipe(name2, {
|
|
355
|
+
name: name2,
|
|
356
|
+
box: query.box.value[0] ?? fallback(query.box),
|
|
357
|
+
data: combineResult((0, import_extractor.unbox)(query.box.value[0]))
|
|
358
|
+
});
|
|
359
|
+
}
|
|
343
360
|
});
|
|
344
361
|
}).when(isValidStyleFn, () => {
|
|
345
362
|
result.queryList.forEach((query) => {
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
363
|
+
if (query.kind === "call-expression" && query.box.value[1]) {
|
|
364
|
+
const map = query.box.value[1];
|
|
365
|
+
const result2 = {
|
|
366
|
+
name,
|
|
367
|
+
box: map ?? fallback(query.box),
|
|
368
|
+
data: combineResult((0, import_extractor.unbox)(map))
|
|
369
|
+
};
|
|
370
|
+
if (import_extractor.box.isMap(map) && isCva(map.value)) {
|
|
371
|
+
collector.setCva(result2);
|
|
372
|
+
} else {
|
|
373
|
+
collector.set("css", result2);
|
|
374
|
+
}
|
|
375
|
+
} else if (query.kind === "tagged-template") {
|
|
376
|
+
const obj = (0, import_shared2.astish)(query.box.value);
|
|
377
|
+
collector.set("css", {
|
|
378
|
+
name,
|
|
379
|
+
box: query.box ?? fallback(query.box),
|
|
380
|
+
data: [obj]
|
|
381
|
+
});
|
|
382
|
+
}
|
|
383
|
+
});
|
|
384
|
+
}).when(isFactory, (name2) => {
|
|
385
|
+
result.queryList.forEach((query) => {
|
|
386
|
+
if (query.kind === "call-expression") {
|
|
387
|
+
const map = query.box.value[0];
|
|
388
|
+
const result2 = {
|
|
389
|
+
name: name2,
|
|
390
|
+
box: map ?? fallback(query.box),
|
|
391
|
+
data: combineResult((0, import_extractor.unbox)(map))
|
|
392
|
+
};
|
|
393
|
+
if (import_extractor.box.isMap(map) && isCva(map.value)) {
|
|
394
|
+
collector.setCva(result2);
|
|
395
|
+
} else {
|
|
396
|
+
collector.set("css", result2);
|
|
397
|
+
}
|
|
398
|
+
} else if (query.kind === "tagged-template") {
|
|
399
|
+
const obj = (0, import_shared2.astish)(query.box.value);
|
|
400
|
+
collector.set("css", {
|
|
401
|
+
name: name2,
|
|
402
|
+
box: query.box ?? fallback(query.box),
|
|
403
|
+
data: [obj]
|
|
404
|
+
});
|
|
405
|
+
}
|
|
351
406
|
});
|
|
352
407
|
}).otherwise(() => {
|
|
353
408
|
});
|
|
354
409
|
} else if (result.kind === "component") {
|
|
355
410
|
result.queryList.forEach((query) => {
|
|
356
411
|
const data = combineResult((0, import_extractor.unbox)(query.box));
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
(name2) => {
|
|
361
|
-
collector.setJsx({ name: name2, box: query.box, type: "jsx-factory", data });
|
|
362
|
-
}
|
|
363
|
-
).when(
|
|
412
|
+
(0, import_ts_pattern.match)(name).when(isFactory, (name2) => {
|
|
413
|
+
collector.setJsx({ name: name2, box: query.box, type: "jsx-factory", data });
|
|
414
|
+
}).when(
|
|
364
415
|
(name2) => jsxPatternNodes.test(name2),
|
|
365
416
|
(name2) => {
|
|
366
417
|
collector.setPattern(name2, { type: "jsx-pattern", name: name2, box: query.box, data });
|
|
367
418
|
}
|
|
368
|
-
).when(
|
|
369
|
-
(name2)
|
|
370
|
-
|
|
371
|
-
collector.setRecipe(getRecipeName(name2), { type: "jsx-recipe", name: name2, box: query.box, data });
|
|
372
|
-
}
|
|
373
|
-
).otherwise(() => {
|
|
419
|
+
).when(isJsxTagRecipe, (name2) => {
|
|
420
|
+
collector.setRecipe(getRecipeName(name2), { type: "jsx-recipe", name: name2, box: query.box, data });
|
|
421
|
+
}).otherwise(() => {
|
|
374
422
|
collector.setJsx({ name, box: query.box, type: "jsx", data });
|
|
375
423
|
});
|
|
376
424
|
});
|
|
@@ -440,23 +488,24 @@ const render = ${fileStr.snip(templateStart, templateEnd).toString()}`
|
|
|
440
488
|
};
|
|
441
489
|
|
|
442
490
|
// src/svelte-to-tsx.ts
|
|
443
|
-
var svelte = __toESM(require("svelte/compiler"));
|
|
444
491
|
var import_magic_string2 = __toESM(require("magic-string"));
|
|
492
|
+
var regex_style_tags = /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi;
|
|
493
|
+
var regex_script_tags = /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
|
|
445
494
|
var svelteToTsx = (code) => {
|
|
446
495
|
try {
|
|
447
|
-
const
|
|
448
|
-
const
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
496
|
+
const scripts = [];
|
|
497
|
+
const original = new import_magic_string2.default(code);
|
|
498
|
+
let match2;
|
|
499
|
+
while ((match2 = regex_script_tags.exec(code)) != null) {
|
|
500
|
+
const [fullMatch, _attributesStr, scriptContent] = match2;
|
|
501
|
+
if (scriptContent) {
|
|
502
|
+
scripts.push(scriptContent);
|
|
503
|
+
original.remove(match2.index, match2.index + fullMatch.length);
|
|
504
|
+
}
|
|
452
505
|
}
|
|
453
|
-
const
|
|
454
|
-
const
|
|
455
|
-
|
|
456
|
-
const transformed = new import_magic_string2.default(
|
|
457
|
-
`${moduleContext + "\n"}${scriptContent + "\n"}
|
|
458
|
-
const render = <div>${templateContent}</div>`
|
|
459
|
-
);
|
|
506
|
+
const templateContent = original.toString().trimStart().replace(regex_style_tags, "").replace(regex_style_tags, "");
|
|
507
|
+
const transformed = `${scripts.join("")}
|
|
508
|
+
const render = <div>${templateContent}</div>`;
|
|
460
509
|
return transformed.toString().trim();
|
|
461
510
|
} catch (err) {
|
|
462
511
|
return "";
|
package/dist/index.mjs
CHANGED
|
@@ -3,9 +3,9 @@ import { Obj, pipe, tap } from "lil-fp";
|
|
|
3
3
|
import { Project as TsProject, ScriptKind } from "ts-morph";
|
|
4
4
|
|
|
5
5
|
// src/parser.ts
|
|
6
|
-
import { extract, unbox } from "@pandacss/extractor";
|
|
6
|
+
import { extract, unbox, box } from "@pandacss/extractor";
|
|
7
7
|
import { logger } from "@pandacss/logger";
|
|
8
|
-
import { memo as memo2 } from "@pandacss/shared";
|
|
8
|
+
import { astish, memo as memo2 } from "@pandacss/shared";
|
|
9
9
|
import { Node } from "ts-morph";
|
|
10
10
|
import { match } from "ts-pattern";
|
|
11
11
|
|
|
@@ -59,7 +59,7 @@ function getImportDeclarations(file, options) {
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
// src/parser-result.ts
|
|
62
|
-
var ParserResult = class {
|
|
62
|
+
var ParserResult = class _ParserResult {
|
|
63
63
|
jsx = /* @__PURE__ */ new Set();
|
|
64
64
|
css = /* @__PURE__ */ new Set();
|
|
65
65
|
cva = /* @__PURE__ */ new Set();
|
|
@@ -124,7 +124,7 @@ var ParserResult = class {
|
|
|
124
124
|
}
|
|
125
125
|
static fromJSON(json) {
|
|
126
126
|
const data = JSON.parse(json);
|
|
127
|
-
const result = new
|
|
127
|
+
const result = new _ParserResult();
|
|
128
128
|
result.css = new Set(data.css);
|
|
129
129
|
result.cva = new Set(data.cva);
|
|
130
130
|
result.recipe = new Map(Object.entries(data.recipe));
|
|
@@ -137,6 +137,8 @@ var createParserResult = () => new ParserResult();
|
|
|
137
137
|
|
|
138
138
|
// src/parser.ts
|
|
139
139
|
var isNodeRecipe = (node) => node.type === "recipe";
|
|
140
|
+
var cvaProps = ["compoundVariants", "defaultVariants", "variants", "base"];
|
|
141
|
+
var isCva = (map) => cvaProps.some((prop) => map.has(prop));
|
|
140
142
|
function createImportMatcher(mod, values) {
|
|
141
143
|
const regex = values ? new RegExp(`^(${values.join("|")})$`) : /.*/;
|
|
142
144
|
return {
|
|
@@ -150,10 +152,10 @@ function createImportMatcher(mod, values) {
|
|
|
150
152
|
var combineResult = (unboxed) => {
|
|
151
153
|
return [...unboxed.conditions, unboxed.raw, ...unboxed.spreadConditions];
|
|
152
154
|
};
|
|
153
|
-
var fallback = (
|
|
155
|
+
var fallback = (box2) => ({
|
|
154
156
|
value: void 0,
|
|
155
|
-
getNode: () =>
|
|
156
|
-
getStack: () =>
|
|
157
|
+
getNode: () => box2.getNode(),
|
|
158
|
+
getStack: () => box2.getStack()
|
|
157
159
|
});
|
|
158
160
|
var defaultEnv = { preset: "NONE" };
|
|
159
161
|
function createParser(options) {
|
|
@@ -166,7 +168,7 @@ function createParser(options) {
|
|
|
166
168
|
if (jsx) {
|
|
167
169
|
importRegex.push(createImportMatcher(importMap.jsx, [jsx.factory, ...jsx.nodes.map((node) => node.name)]));
|
|
168
170
|
}
|
|
169
|
-
return function
|
|
171
|
+
return function parse2(sourceFile) {
|
|
170
172
|
if (!sourceFile)
|
|
171
173
|
return;
|
|
172
174
|
const filePath = sourceFile.getFilePath();
|
|
@@ -181,10 +183,11 @@ function createParser(options) {
|
|
|
181
183
|
imports.value.length ? `Found import { ${imports} } in ${filePath}` : `No import found in ${filePath}`
|
|
182
184
|
);
|
|
183
185
|
const [css] = importRegex;
|
|
186
|
+
const jsxFactoryAlias = jsx ? imports.getAlias(jsx.factory) : "styled";
|
|
184
187
|
const isValidPattern = imports.createMatch(importMap.pattern);
|
|
185
188
|
const isValidRecipe = imports.createMatch(importMap.recipe);
|
|
186
189
|
const isValidStyleFn = (name) => name === jsx?.factory;
|
|
187
|
-
const
|
|
190
|
+
const isFactory = (name) => Boolean(jsx && name.startsWith(jsxFactoryAlias));
|
|
188
191
|
const jsxPatternNodes = new RegExp(
|
|
189
192
|
`^(${jsx?.nodes.map((node) => node.type === "pattern" && node.name).join("|")})$`
|
|
190
193
|
);
|
|
@@ -235,11 +238,9 @@ function createParser(options) {
|
|
|
235
238
|
const matchTag = memo2((tagName) => {
|
|
236
239
|
if (!tagName)
|
|
237
240
|
return false;
|
|
238
|
-
return components.has(tagName) || isUpperCase(tagName) || tagName
|
|
241
|
+
return components.has(tagName) || isUpperCase(tagName) || isFactory(tagName) || isJsxTagRecipe(tagName);
|
|
239
242
|
});
|
|
240
243
|
const matchTagProp = memo2((tagName, propName) => {
|
|
241
|
-
if (propertiesMap.size === 0)
|
|
242
|
-
return true;
|
|
243
244
|
if (Boolean(components.get(tagName)?.has(propName)) || options.jsx?.isStyleProp(propName) || propertiesMap.has(propName))
|
|
244
245
|
return true;
|
|
245
246
|
if (isJsxTagRecipe(tagName)) {
|
|
@@ -251,7 +252,7 @@ function createParser(options) {
|
|
|
251
252
|
const matchFn = memo2((fnName) => {
|
|
252
253
|
if (recipes.has(fnName) || patterns.has(fnName))
|
|
253
254
|
return true;
|
|
254
|
-
if (fnName === cvaAlias || fnName === cssAlias || fnName
|
|
255
|
+
if (fnName === cvaAlias || fnName === cssAlias || isFactory(fnName))
|
|
255
256
|
return true;
|
|
256
257
|
return functions.has(fnName);
|
|
257
258
|
});
|
|
@@ -271,68 +272,115 @@ function createParser(options) {
|
|
|
271
272
|
return true;
|
|
272
273
|
}
|
|
273
274
|
},
|
|
275
|
+
taggedTemplates: {
|
|
276
|
+
matchTaggedTemplate: (tag) => matchFn(tag.fnName)
|
|
277
|
+
},
|
|
274
278
|
getEvaluateOptions: (node) => ({ node, environment: defaultEnv }),
|
|
275
279
|
flags: { skipTraverseFiles: true }
|
|
276
280
|
});
|
|
277
281
|
measure();
|
|
278
282
|
extractResultByName.forEach((result, alias) => {
|
|
279
283
|
const name = imports.getName(alias);
|
|
280
|
-
logger.debug(`ast:${name}`, {
|
|
284
|
+
logger.debug(`ast:${name}`, name !== alias ? { kind: result.kind, alias } : { kind: result.kind });
|
|
281
285
|
if (result.kind === "function") {
|
|
282
286
|
match(name).when(css.match, (name2) => {
|
|
283
287
|
result.queryList.forEach((query) => {
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
288
|
+
if (query.kind === "call-expression") {
|
|
289
|
+
collector.set(name2, {
|
|
290
|
+
name: name2,
|
|
291
|
+
box: query.box.value[0] ?? fallback(query.box),
|
|
292
|
+
data: combineResult(unbox(query.box.value[0]))
|
|
293
|
+
});
|
|
294
|
+
} else if (query.kind === "tagged-template") {
|
|
295
|
+
const obj = astish(query.box.value);
|
|
296
|
+
collector.set(name2, {
|
|
297
|
+
name: name2,
|
|
298
|
+
box: query.box ?? fallback(query.box),
|
|
299
|
+
data: [obj]
|
|
300
|
+
});
|
|
301
|
+
}
|
|
289
302
|
});
|
|
290
303
|
}).when(isValidPattern, (name2) => {
|
|
291
304
|
result.queryList.forEach((query) => {
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
305
|
+
if (query.kind === "call-expression") {
|
|
306
|
+
collector.setPattern(name2, {
|
|
307
|
+
name: name2,
|
|
308
|
+
box: query.box.value[0] ?? fallback(query.box),
|
|
309
|
+
data: combineResult(unbox(query.box.value[0]))
|
|
310
|
+
});
|
|
311
|
+
}
|
|
297
312
|
});
|
|
298
313
|
}).when(isValidRecipe, (name2) => {
|
|
299
314
|
result.queryList.forEach((query) => {
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
315
|
+
if (query.kind === "call-expression") {
|
|
316
|
+
collector.setRecipe(name2, {
|
|
317
|
+
name: name2,
|
|
318
|
+
box: query.box.value[0] ?? fallback(query.box),
|
|
319
|
+
data: combineResult(unbox(query.box.value[0]))
|
|
320
|
+
});
|
|
321
|
+
}
|
|
305
322
|
});
|
|
306
323
|
}).when(isValidStyleFn, () => {
|
|
307
324
|
result.queryList.forEach((query) => {
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
325
|
+
if (query.kind === "call-expression" && query.box.value[1]) {
|
|
326
|
+
const map = query.box.value[1];
|
|
327
|
+
const result2 = {
|
|
328
|
+
name,
|
|
329
|
+
box: map ?? fallback(query.box),
|
|
330
|
+
data: combineResult(unbox(map))
|
|
331
|
+
};
|
|
332
|
+
if (box.isMap(map) && isCva(map.value)) {
|
|
333
|
+
collector.setCva(result2);
|
|
334
|
+
} else {
|
|
335
|
+
collector.set("css", result2);
|
|
336
|
+
}
|
|
337
|
+
} else if (query.kind === "tagged-template") {
|
|
338
|
+
const obj = astish(query.box.value);
|
|
339
|
+
collector.set("css", {
|
|
340
|
+
name,
|
|
341
|
+
box: query.box ?? fallback(query.box),
|
|
342
|
+
data: [obj]
|
|
343
|
+
});
|
|
344
|
+
}
|
|
345
|
+
});
|
|
346
|
+
}).when(isFactory, (name2) => {
|
|
347
|
+
result.queryList.forEach((query) => {
|
|
348
|
+
if (query.kind === "call-expression") {
|
|
349
|
+
const map = query.box.value[0];
|
|
350
|
+
const result2 = {
|
|
351
|
+
name: name2,
|
|
352
|
+
box: map ?? fallback(query.box),
|
|
353
|
+
data: combineResult(unbox(map))
|
|
354
|
+
};
|
|
355
|
+
if (box.isMap(map) && isCva(map.value)) {
|
|
356
|
+
collector.setCva(result2);
|
|
357
|
+
} else {
|
|
358
|
+
collector.set("css", result2);
|
|
359
|
+
}
|
|
360
|
+
} else if (query.kind === "tagged-template") {
|
|
361
|
+
const obj = astish(query.box.value);
|
|
362
|
+
collector.set("css", {
|
|
363
|
+
name: name2,
|
|
364
|
+
box: query.box ?? fallback(query.box),
|
|
365
|
+
data: [obj]
|
|
366
|
+
});
|
|
367
|
+
}
|
|
313
368
|
});
|
|
314
369
|
}).otherwise(() => {
|
|
315
370
|
});
|
|
316
371
|
} else if (result.kind === "component") {
|
|
317
372
|
result.queryList.forEach((query) => {
|
|
318
373
|
const data = combineResult(unbox(query.box));
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
(name2) => {
|
|
323
|
-
collector.setJsx({ name: name2, box: query.box, type: "jsx-factory", data });
|
|
324
|
-
}
|
|
325
|
-
).when(
|
|
374
|
+
match(name).when(isFactory, (name2) => {
|
|
375
|
+
collector.setJsx({ name: name2, box: query.box, type: "jsx-factory", data });
|
|
376
|
+
}).when(
|
|
326
377
|
(name2) => jsxPatternNodes.test(name2),
|
|
327
378
|
(name2) => {
|
|
328
379
|
collector.setPattern(name2, { type: "jsx-pattern", name: name2, box: query.box, data });
|
|
329
380
|
}
|
|
330
|
-
).when(
|
|
331
|
-
(name2)
|
|
332
|
-
|
|
333
|
-
collector.setRecipe(getRecipeName(name2), { type: "jsx-recipe", name: name2, box: query.box, data });
|
|
334
|
-
}
|
|
335
|
-
).otherwise(() => {
|
|
381
|
+
).when(isJsxTagRecipe, (name2) => {
|
|
382
|
+
collector.setRecipe(getRecipeName(name2), { type: "jsx-recipe", name: name2, box: query.box, data });
|
|
383
|
+
}).otherwise(() => {
|
|
336
384
|
collector.setJsx({ name, box: query.box, type: "jsx", data });
|
|
337
385
|
});
|
|
338
386
|
});
|
|
@@ -402,23 +450,24 @@ const render = ${fileStr.snip(templateStart, templateEnd).toString()}`
|
|
|
402
450
|
};
|
|
403
451
|
|
|
404
452
|
// src/svelte-to-tsx.ts
|
|
405
|
-
import * as svelte from "svelte/compiler";
|
|
406
453
|
import MagicString2 from "magic-string";
|
|
454
|
+
var regex_style_tags = /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi;
|
|
455
|
+
var regex_script_tags = /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
|
|
407
456
|
var svelteToTsx = (code) => {
|
|
408
457
|
try {
|
|
409
|
-
const
|
|
410
|
-
const
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
458
|
+
const scripts = [];
|
|
459
|
+
const original = new MagicString2(code);
|
|
460
|
+
let match2;
|
|
461
|
+
while ((match2 = regex_script_tags.exec(code)) != null) {
|
|
462
|
+
const [fullMatch, _attributesStr, scriptContent] = match2;
|
|
463
|
+
if (scriptContent) {
|
|
464
|
+
scripts.push(scriptContent);
|
|
465
|
+
original.remove(match2.index, match2.index + fullMatch.length);
|
|
466
|
+
}
|
|
414
467
|
}
|
|
415
|
-
const
|
|
416
|
-
const
|
|
417
|
-
|
|
418
|
-
const transformed = new MagicString2(
|
|
419
|
-
`${moduleContext + "\n"}${scriptContent + "\n"}
|
|
420
|
-
const render = <div>${templateContent}</div>`
|
|
421
|
-
);
|
|
468
|
+
const templateContent = original.toString().trimStart().replace(regex_style_tags, "").replace(regex_style_tags, "");
|
|
469
|
+
const transformed = `${scripts.join("")}
|
|
470
|
+
const render = <div>${templateContent}</div>`;
|
|
422
471
|
return transformed.toString().trim();
|
|
423
472
|
} catch (err) {
|
|
424
473
|
return "";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pandacss/parser",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "The static parser for panda css",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -14,19 +14,18 @@
|
|
|
14
14
|
"@vue/compiler-sfc": "^3.3.4",
|
|
15
15
|
"lil-fp": "1.4.5",
|
|
16
16
|
"magic-string": "^0.30.0",
|
|
17
|
-
"svelte": "^3.59.1",
|
|
18
17
|
"ts-morph": "18.0.0",
|
|
19
18
|
"ts-pattern": "4.3.0",
|
|
20
|
-
"@pandacss/extractor": "0.
|
|
21
|
-
"@pandacss/
|
|
22
|
-
"@pandacss/
|
|
23
|
-
"@pandacss/shared": "0.
|
|
24
|
-
"@pandacss/types": "0.
|
|
19
|
+
"@pandacss/extractor": "0.5.1",
|
|
20
|
+
"@pandacss/is-valid-prop": "0.5.1",
|
|
21
|
+
"@pandacss/logger": "0.5.1",
|
|
22
|
+
"@pandacss/shared": "0.5.1",
|
|
23
|
+
"@pandacss/types": "0.5.1"
|
|
25
24
|
},
|
|
26
25
|
"devDependencies": {
|
|
27
26
|
"hookable": "5.5.3",
|
|
28
|
-
"@pandacss/fixture": "0.
|
|
29
|
-
"@pandacss/generator": "0.
|
|
27
|
+
"@pandacss/fixture": "0.5.1",
|
|
28
|
+
"@pandacss/generator": "0.5.1"
|
|
30
29
|
},
|
|
31
30
|
"files": [
|
|
32
31
|
"dist"
|