@pandacss/generator 1.9.1 → 1.10.0
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 +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +79 -9
- package/dist/index.mjs +75 -5
- package/package.json +7 -7
package/dist/index.d.mts
CHANGED
|
@@ -49,7 +49,7 @@ declare class Generator extends Context {
|
|
|
49
49
|
*/
|
|
50
50
|
getSplitCssArtifacts: (sheet: Stylesheet) => SplitCssResult;
|
|
51
51
|
getSpec: () => SpecFile[];
|
|
52
|
-
getSpecOfType: <T extends SpecType>(type: T) => T extends "color-palette" ? SpecTypeMap[T] | undefined : SpecTypeMap[T];
|
|
52
|
+
getSpecOfType: <T extends SpecType>(type: T) => T extends "color-palette" | "themes" ? SpecTypeMap[T] | undefined : SpecTypeMap[T];
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -49,7 +49,7 @@ declare class Generator extends Context {
|
|
|
49
49
|
*/
|
|
50
50
|
getSplitCssArtifacts: (sheet: Stylesheet) => SplitCssResult;
|
|
51
51
|
getSpec: () => SpecFile[];
|
|
52
|
-
getSpecOfType: <T extends SpecType>(type: T) => T extends "color-palette" ? SpecTypeMap[T] | undefined : SpecTypeMap[T];
|
|
52
|
+
getSpecOfType: <T extends SpecType>(type: T) => T extends "color-palette" | "themes" ? SpecTypeMap[T] | undefined : SpecTypeMap[T];
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
/**
|
package/dist/index.js
CHANGED
|
@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
37
37
|
|
|
38
38
|
// src/generator.ts
|
|
39
39
|
var import_core5 = require("@pandacss/core");
|
|
40
|
-
var
|
|
40
|
+
var import_shared18 = require("@pandacss/shared");
|
|
41
41
|
var import_ts_pattern14 = require("ts-pattern");
|
|
42
42
|
|
|
43
43
|
// src/artifacts/setup-artifacts.ts
|
|
@@ -5080,6 +5080,8 @@ var parse = (str) => {
|
|
|
5080
5080
|
} catch (error) {
|
|
5081
5081
|
if (error instanceof import_postcss.CssSyntaxError) {
|
|
5082
5082
|
import_logger.logger.error("tokens:process", error.showSourceCode(true));
|
|
5083
|
+
} else {
|
|
5084
|
+
import_logger.logger.caughtError("tokens:process", "Failed to parse token CSS", error);
|
|
5083
5085
|
}
|
|
5084
5086
|
}
|
|
5085
5087
|
};
|
|
@@ -5664,8 +5666,8 @@ var generateParserCss = (ctx, decoder) => {
|
|
|
5664
5666
|
try {
|
|
5665
5667
|
const css = sheet.toCss({ minify });
|
|
5666
5668
|
return css;
|
|
5667
|
-
} catch (
|
|
5668
|
-
import_logger2.logger.
|
|
5669
|
+
} catch (error) {
|
|
5670
|
+
import_logger2.logger.caughtError("serializer:css", "Failed to serialize CSS", error);
|
|
5669
5671
|
return "";
|
|
5670
5672
|
}
|
|
5671
5673
|
};
|
|
@@ -6101,8 +6103,10 @@ var generateTextStylesSpec = (ctx) => {
|
|
|
6101
6103
|
return generateCompositionStyleSpec("text-styles", ctx.config.theme, ctx.config.jsxStyleProps);
|
|
6102
6104
|
};
|
|
6103
6105
|
|
|
6104
|
-
// src/spec/
|
|
6105
|
-
var
|
|
6106
|
+
// src/spec/themes.ts
|
|
6107
|
+
var import_shared16 = require("@pandacss/shared");
|
|
6108
|
+
|
|
6109
|
+
// src/spec/token-examples.ts
|
|
6106
6110
|
var CATEGORY_PROPERTY_MAP = {
|
|
6107
6111
|
colors: "color",
|
|
6108
6112
|
spacing: "padding",
|
|
@@ -6144,6 +6148,66 @@ var generateTokenExamples = (token, jsxStyleProps2 = "all") => {
|
|
|
6144
6148
|
}
|
|
6145
6149
|
return { functionExamples, tokenFunctionExamples, jsxExamples };
|
|
6146
6150
|
};
|
|
6151
|
+
|
|
6152
|
+
// src/spec/themes.ts
|
|
6153
|
+
var generateThemeTokenGroups = (ctx, themeName, filterFn) => {
|
|
6154
|
+
const jsxStyleProps2 = ctx.config.jsxStyleProps;
|
|
6155
|
+
const condName = "_theme" + (0, import_shared16.capitalize)(themeName);
|
|
6156
|
+
const themeTokens = ctx.tokens.allTokens.filter(
|
|
6157
|
+
(token) => token.extensions.isVirtual && token.extensions.theme === themeName && filterFn(token)
|
|
6158
|
+
);
|
|
6159
|
+
const byCategory = /* @__PURE__ */ new Map();
|
|
6160
|
+
for (const token of themeTokens) {
|
|
6161
|
+
const category = token.extensions.category;
|
|
6162
|
+
if (!category) continue;
|
|
6163
|
+
if (!byCategory.has(category)) byCategory.set(category, []);
|
|
6164
|
+
byCategory.get(category).push(token);
|
|
6165
|
+
}
|
|
6166
|
+
return Array.from(byCategory.entries()).map(([category, typeTokens]) => {
|
|
6167
|
+
if (!typeTokens.length) return null;
|
|
6168
|
+
const firstToken = typeTokens[0];
|
|
6169
|
+
const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
|
|
6170
|
+
const values = typeTokens.map((token) => {
|
|
6171
|
+
const conditions = [];
|
|
6172
|
+
(0, import_shared16.walkObject)(token.extensions.rawValue, (value, path) => {
|
|
6173
|
+
conditions.push({
|
|
6174
|
+
value,
|
|
6175
|
+
condition: path.map((p) => p === condName ? themeName : p.replace(/^_/, "")).join(".")
|
|
6176
|
+
});
|
|
6177
|
+
});
|
|
6178
|
+
return {
|
|
6179
|
+
name: token.extensions.prop || token.name,
|
|
6180
|
+
values: conditions,
|
|
6181
|
+
description: token.description,
|
|
6182
|
+
deprecated: token.deprecated,
|
|
6183
|
+
cssVar: token.extensions.varRef
|
|
6184
|
+
};
|
|
6185
|
+
});
|
|
6186
|
+
return {
|
|
6187
|
+
type: category,
|
|
6188
|
+
values,
|
|
6189
|
+
tokenFunctionExamples,
|
|
6190
|
+
functionExamples,
|
|
6191
|
+
jsxExamples
|
|
6192
|
+
};
|
|
6193
|
+
}).filter(Boolean);
|
|
6194
|
+
};
|
|
6195
|
+
var generateThemesSpec = (ctx) => {
|
|
6196
|
+
const themes = ctx.config.themes;
|
|
6197
|
+
if (!themes || Object.keys(themes).length === 0) return void 0;
|
|
6198
|
+
const data = Object.keys(themes).map((themeName) => {
|
|
6199
|
+
const tokens = generateThemeTokenGroups(ctx, themeName, (token) => !token.extensions.isSemantic);
|
|
6200
|
+
const semanticTokens = generateThemeTokenGroups(ctx, themeName, (token) => token.extensions.isSemantic);
|
|
6201
|
+
return { name: themeName, tokens, semanticTokens };
|
|
6202
|
+
});
|
|
6203
|
+
return {
|
|
6204
|
+
type: "themes",
|
|
6205
|
+
data
|
|
6206
|
+
};
|
|
6207
|
+
};
|
|
6208
|
+
|
|
6209
|
+
// src/spec/tokens.ts
|
|
6210
|
+
var import_shared17 = require("@pandacss/shared");
|
|
6147
6211
|
var generateTokensSpec = (ctx) => {
|
|
6148
6212
|
const jsxStyleProps2 = ctx.config.jsxStyleProps;
|
|
6149
6213
|
const groupedData = Array.from(ctx.tokens.view.categoryMap.entries()).map(([category, tokenMap]) => {
|
|
@@ -6184,7 +6248,7 @@ var generateSemanticTokensSpec = (ctx) => {
|
|
|
6184
6248
|
const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
|
|
6185
6249
|
const values = typeTokens.map((token) => {
|
|
6186
6250
|
const conditions = [];
|
|
6187
|
-
(0,
|
|
6251
|
+
(0, import_shared17.walkObject)(token.extensions.rawValue, (value, path) => {
|
|
6188
6252
|
conditions.push({ value, condition: path.map((p) => p.replace(/^_/, "")).join(".") });
|
|
6189
6253
|
});
|
|
6190
6254
|
return {
|
|
@@ -6219,7 +6283,7 @@ var Generator = class extends import_core5.Context {
|
|
|
6219
6283
|
};
|
|
6220
6284
|
appendCssOfType = (type, sheet) => {
|
|
6221
6285
|
(0, import_ts_pattern14.match)(type).with("preflight", () => generateResetCss(this, sheet)).with("tokens", () => generateTokenCss(this, sheet)).with("static", () => generateStaticCss(this, sheet)).with("global", () => generateGlobalCss(this, sheet)).with("keyframes", () => generateKeyframeCss(this, sheet)).otherwise(() => {
|
|
6222
|
-
throw new
|
|
6286
|
+
throw new import_shared18.PandaError(
|
|
6223
6287
|
"UNKNOWN_ARTIFACT",
|
|
6224
6288
|
`Unknown CSS artifact type: "${type}". Expected one of: preflight, tokens, static, global, keyframes`
|
|
6225
6289
|
);
|
|
@@ -6300,7 +6364,7 @@ var Generator = class extends import_core5.Context {
|
|
|
6300
6364
|
recipes.push({
|
|
6301
6365
|
type: "recipe",
|
|
6302
6366
|
name: recipeName,
|
|
6303
|
-
file: `${(0,
|
|
6367
|
+
file: `${(0, import_shared18.dashCase)(recipeName)}.css`,
|
|
6304
6368
|
code,
|
|
6305
6369
|
dir: "recipes"
|
|
6306
6370
|
});
|
|
@@ -6314,7 +6378,7 @@ var Generator = class extends import_core5.Context {
|
|
|
6314
6378
|
themes.push({
|
|
6315
6379
|
type: "theme",
|
|
6316
6380
|
name: themeName,
|
|
6317
|
-
file: `${(0,
|
|
6381
|
+
file: `${(0, import_shared18.dashCase)(themeName)}.css`,
|
|
6318
6382
|
code: `@layer ${layerNames.tokens} {
|
|
6319
6383
|
${css}
|
|
6320
6384
|
}`,
|
|
@@ -6356,6 +6420,10 @@ ${css}
|
|
|
6356
6420
|
if (colorPaletteSpec) {
|
|
6357
6421
|
specs.push(colorPaletteSpec);
|
|
6358
6422
|
}
|
|
6423
|
+
const themesSpec = generateThemesSpec(this);
|
|
6424
|
+
if (themesSpec) {
|
|
6425
|
+
specs.push(themesSpec);
|
|
6426
|
+
}
|
|
6359
6427
|
return specs;
|
|
6360
6428
|
};
|
|
6361
6429
|
getSpecOfType = (type) => {
|
|
@@ -6381,6 +6449,8 @@ ${css}
|
|
|
6381
6449
|
return generateAnimationStylesSpec(this);
|
|
6382
6450
|
case "color-palette":
|
|
6383
6451
|
return generateColorPaletteSpec(this) ?? void 0;
|
|
6452
|
+
case "themes":
|
|
6453
|
+
return generateThemesSpec(this) ?? void 0;
|
|
6384
6454
|
}
|
|
6385
6455
|
})();
|
|
6386
6456
|
return spec;
|
package/dist/index.mjs
CHANGED
|
@@ -5043,6 +5043,8 @@ var parse = (str) => {
|
|
|
5043
5043
|
} catch (error) {
|
|
5044
5044
|
if (error instanceof CssSyntaxError) {
|
|
5045
5045
|
logger.error("tokens:process", error.showSourceCode(true));
|
|
5046
|
+
} else {
|
|
5047
|
+
logger.caughtError("tokens:process", "Failed to parse token CSS", error);
|
|
5046
5048
|
}
|
|
5047
5049
|
}
|
|
5048
5050
|
};
|
|
@@ -5627,8 +5629,8 @@ var generateParserCss = (ctx, decoder) => {
|
|
|
5627
5629
|
try {
|
|
5628
5630
|
const css = sheet.toCss({ minify });
|
|
5629
5631
|
return css;
|
|
5630
|
-
} catch (
|
|
5631
|
-
logger2.
|
|
5632
|
+
} catch (error) {
|
|
5633
|
+
logger2.caughtError("serializer:css", "Failed to serialize CSS", error);
|
|
5632
5634
|
return "";
|
|
5633
5635
|
}
|
|
5634
5636
|
};
|
|
@@ -6064,8 +6066,10 @@ var generateTextStylesSpec = (ctx) => {
|
|
|
6064
6066
|
return generateCompositionStyleSpec("text-styles", ctx.config.theme, ctx.config.jsxStyleProps);
|
|
6065
6067
|
};
|
|
6066
6068
|
|
|
6067
|
-
// src/spec/
|
|
6068
|
-
import { walkObject as walkObject2 } from "@pandacss/shared";
|
|
6069
|
+
// src/spec/themes.ts
|
|
6070
|
+
import { capitalize as capitalize2, walkObject as walkObject2 } from "@pandacss/shared";
|
|
6071
|
+
|
|
6072
|
+
// src/spec/token-examples.ts
|
|
6069
6073
|
var CATEGORY_PROPERTY_MAP = {
|
|
6070
6074
|
colors: "color",
|
|
6071
6075
|
spacing: "padding",
|
|
@@ -6107,6 +6111,66 @@ var generateTokenExamples = (token, jsxStyleProps2 = "all") => {
|
|
|
6107
6111
|
}
|
|
6108
6112
|
return { functionExamples, tokenFunctionExamples, jsxExamples };
|
|
6109
6113
|
};
|
|
6114
|
+
|
|
6115
|
+
// src/spec/themes.ts
|
|
6116
|
+
var generateThemeTokenGroups = (ctx, themeName, filterFn) => {
|
|
6117
|
+
const jsxStyleProps2 = ctx.config.jsxStyleProps;
|
|
6118
|
+
const condName = "_theme" + capitalize2(themeName);
|
|
6119
|
+
const themeTokens = ctx.tokens.allTokens.filter(
|
|
6120
|
+
(token) => token.extensions.isVirtual && token.extensions.theme === themeName && filterFn(token)
|
|
6121
|
+
);
|
|
6122
|
+
const byCategory = /* @__PURE__ */ new Map();
|
|
6123
|
+
for (const token of themeTokens) {
|
|
6124
|
+
const category = token.extensions.category;
|
|
6125
|
+
if (!category) continue;
|
|
6126
|
+
if (!byCategory.has(category)) byCategory.set(category, []);
|
|
6127
|
+
byCategory.get(category).push(token);
|
|
6128
|
+
}
|
|
6129
|
+
return Array.from(byCategory.entries()).map(([category, typeTokens]) => {
|
|
6130
|
+
if (!typeTokens.length) return null;
|
|
6131
|
+
const firstToken = typeTokens[0];
|
|
6132
|
+
const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
|
|
6133
|
+
const values = typeTokens.map((token) => {
|
|
6134
|
+
const conditions = [];
|
|
6135
|
+
walkObject2(token.extensions.rawValue, (value, path) => {
|
|
6136
|
+
conditions.push({
|
|
6137
|
+
value,
|
|
6138
|
+
condition: path.map((p) => p === condName ? themeName : p.replace(/^_/, "")).join(".")
|
|
6139
|
+
});
|
|
6140
|
+
});
|
|
6141
|
+
return {
|
|
6142
|
+
name: token.extensions.prop || token.name,
|
|
6143
|
+
values: conditions,
|
|
6144
|
+
description: token.description,
|
|
6145
|
+
deprecated: token.deprecated,
|
|
6146
|
+
cssVar: token.extensions.varRef
|
|
6147
|
+
};
|
|
6148
|
+
});
|
|
6149
|
+
return {
|
|
6150
|
+
type: category,
|
|
6151
|
+
values,
|
|
6152
|
+
tokenFunctionExamples,
|
|
6153
|
+
functionExamples,
|
|
6154
|
+
jsxExamples
|
|
6155
|
+
};
|
|
6156
|
+
}).filter(Boolean);
|
|
6157
|
+
};
|
|
6158
|
+
var generateThemesSpec = (ctx) => {
|
|
6159
|
+
const themes = ctx.config.themes;
|
|
6160
|
+
if (!themes || Object.keys(themes).length === 0) return void 0;
|
|
6161
|
+
const data = Object.keys(themes).map((themeName) => {
|
|
6162
|
+
const tokens = generateThemeTokenGroups(ctx, themeName, (token) => !token.extensions.isSemantic);
|
|
6163
|
+
const semanticTokens = generateThemeTokenGroups(ctx, themeName, (token) => token.extensions.isSemantic);
|
|
6164
|
+
return { name: themeName, tokens, semanticTokens };
|
|
6165
|
+
});
|
|
6166
|
+
return {
|
|
6167
|
+
type: "themes",
|
|
6168
|
+
data
|
|
6169
|
+
};
|
|
6170
|
+
};
|
|
6171
|
+
|
|
6172
|
+
// src/spec/tokens.ts
|
|
6173
|
+
import { walkObject as walkObject3 } from "@pandacss/shared";
|
|
6110
6174
|
var generateTokensSpec = (ctx) => {
|
|
6111
6175
|
const jsxStyleProps2 = ctx.config.jsxStyleProps;
|
|
6112
6176
|
const groupedData = Array.from(ctx.tokens.view.categoryMap.entries()).map(([category, tokenMap]) => {
|
|
@@ -6147,7 +6211,7 @@ var generateSemanticTokensSpec = (ctx) => {
|
|
|
6147
6211
|
const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
|
|
6148
6212
|
const values = typeTokens.map((token) => {
|
|
6149
6213
|
const conditions = [];
|
|
6150
|
-
|
|
6214
|
+
walkObject3(token.extensions.rawValue, (value, path) => {
|
|
6151
6215
|
conditions.push({ value, condition: path.map((p) => p.replace(/^_/, "")).join(".") });
|
|
6152
6216
|
});
|
|
6153
6217
|
return {
|
|
@@ -6319,6 +6383,10 @@ ${css}
|
|
|
6319
6383
|
if (colorPaletteSpec) {
|
|
6320
6384
|
specs.push(colorPaletteSpec);
|
|
6321
6385
|
}
|
|
6386
|
+
const themesSpec = generateThemesSpec(this);
|
|
6387
|
+
if (themesSpec) {
|
|
6388
|
+
specs.push(themesSpec);
|
|
6389
|
+
}
|
|
6322
6390
|
return specs;
|
|
6323
6391
|
};
|
|
6324
6392
|
getSpecOfType = (type) => {
|
|
@@ -6344,6 +6412,8 @@ ${css}
|
|
|
6344
6412
|
return generateAnimationStylesSpec(this);
|
|
6345
6413
|
case "color-palette":
|
|
6346
6414
|
return generateColorPaletteSpec(this) ?? void 0;
|
|
6415
|
+
case "themes":
|
|
6416
|
+
return generateThemesSpec(this) ?? void 0;
|
|
6347
6417
|
}
|
|
6348
6418
|
})();
|
|
6349
6419
|
return spec;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pandacss/generator",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
4
|
"description": "The css generator for css panda",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -38,12 +38,12 @@
|
|
|
38
38
|
"pluralize": "8.0.0",
|
|
39
39
|
"postcss": "8.5.6",
|
|
40
40
|
"ts-pattern": "5.9.0",
|
|
41
|
-
"@pandacss/core": "1.
|
|
42
|
-
"@pandacss/is-valid-prop": "^1.
|
|
43
|
-
"@pandacss/logger": "1.
|
|
44
|
-
"@pandacss/shared": "1.
|
|
45
|
-
"@pandacss/token-dictionary": "1.
|
|
46
|
-
"@pandacss/types": "1.
|
|
41
|
+
"@pandacss/core": "1.10.0",
|
|
42
|
+
"@pandacss/is-valid-prop": "^1.10.0",
|
|
43
|
+
"@pandacss/logger": "1.10.0",
|
|
44
|
+
"@pandacss/shared": "1.10.0",
|
|
45
|
+
"@pandacss/token-dictionary": "1.10.0",
|
|
46
|
+
"@pandacss/types": "1.10.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@types/pluralize": "0.0.33"
|