@pandacss/node 0.0.0-dev-20230204123646 → 0.0.0-dev-20230204225714
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.js +143 -124
- package/dist/index.mjs +143 -124
- package/package.json +12 -12
package/dist/index.mjs
CHANGED
|
@@ -35,16 +35,16 @@ function extractFiles(ctx) {
|
|
|
35
35
|
});
|
|
36
36
|
}
|
|
37
37
|
function extractGlobalCss(ctx) {
|
|
38
|
-
const
|
|
39
|
-
if (!
|
|
38
|
+
const css3 = ctx.getGlobalCss();
|
|
39
|
+
if (!css3)
|
|
40
40
|
return;
|
|
41
|
-
return ctx.chunks.write("system/global.css",
|
|
41
|
+
return ctx.chunks.write("system/global.css", css3);
|
|
42
42
|
}
|
|
43
43
|
function extractStaticCss(ctx) {
|
|
44
|
-
const
|
|
45
|
-
if (!
|
|
44
|
+
const css3 = ctx.getStaticCss();
|
|
45
|
+
if (!css3)
|
|
46
46
|
return;
|
|
47
|
-
return ctx.chunks.write("system/static.css",
|
|
47
|
+
return ctx.chunks.write("system/static.css", css3);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
// src/chunks.ts
|
|
@@ -52,6 +52,7 @@ async function extractChunks(ctx) {
|
|
|
52
52
|
const sheet = new Stylesheet(ctx.context(), {
|
|
53
53
|
content: [
|
|
54
54
|
"@layer reset, base, tokens, recipes, utilities;",
|
|
55
|
+
"@import './layout-grid.css';",
|
|
55
56
|
ctx.preflight && "@import './reset.css';",
|
|
56
57
|
!ctx.tokens.isEmpty && "@import './tokens/index.css';",
|
|
57
58
|
ctx.theme.keyframes && "@import './tokens/keyframes.css';"
|
|
@@ -60,15 +61,15 @@ async function extractChunks(ctx) {
|
|
|
60
61
|
const files = ctx.chunks.getFiles();
|
|
61
62
|
await Promise.all(
|
|
62
63
|
files.map(async (file) => {
|
|
63
|
-
const
|
|
64
|
-
sheet.append(
|
|
64
|
+
const css3 = await ctx.chunks.readFile(file);
|
|
65
|
+
sheet.append(css3);
|
|
65
66
|
})
|
|
66
67
|
);
|
|
67
68
|
return sheet.toCss({ minify: ctx.minify });
|
|
68
69
|
}
|
|
69
70
|
async function bundleChunks(ctx) {
|
|
70
|
-
const
|
|
71
|
-
await ctx.write(ctx.paths.root, [{ file: "styles.css", code:
|
|
71
|
+
const css3 = await extractChunks(ctx);
|
|
72
|
+
await ctx.write(ctx.paths.root, [{ file: "styles.css", code: css3 }]);
|
|
72
73
|
}
|
|
73
74
|
async function writeFileChunk(ctx, file) {
|
|
74
75
|
logger2.info("chunk:change", `File changed: ${file}`);
|
|
@@ -80,7 +81,7 @@ async function writeFileChunk(ctx, file) {
|
|
|
80
81
|
|
|
81
82
|
// src/generators/index.ts
|
|
82
83
|
import { readFileSync as readFileSync3 } from "fs";
|
|
83
|
-
import
|
|
84
|
+
import outdent24 from "outdent";
|
|
84
85
|
|
|
85
86
|
// src/generators/conditions.ts
|
|
86
87
|
import outdent from "outdent";
|
|
@@ -945,9 +946,45 @@ function generateLayoutGrid(ctx) {
|
|
|
945
946
|
return layoutGridMap[ctx.jsxFramework]();
|
|
946
947
|
}
|
|
947
948
|
|
|
949
|
+
// src/generators/layout-grid.ts
|
|
950
|
+
import { outdent as outdent17 } from "outdent";
|
|
951
|
+
var css = (v) => v[0];
|
|
952
|
+
var layoutGrid = css`
|
|
953
|
+
.panda-layout-grid {
|
|
954
|
+
display: grid;
|
|
955
|
+
gap: var(--gutter);
|
|
956
|
+
grid-template-columns: repeat(var(--count), 1fr);
|
|
957
|
+
height: 100%;
|
|
958
|
+
width: 100%;
|
|
959
|
+
position: absolute;
|
|
960
|
+
inset: 0;
|
|
961
|
+
pointer-events: none;
|
|
962
|
+
max-width: var(--max-width);
|
|
963
|
+
margin-inline: var(--margin-x);
|
|
964
|
+
padding-inline: var(--padding-x);
|
|
965
|
+
}
|
|
966
|
+
.panda-layout-grid__item {
|
|
967
|
+
display: flex;
|
|
968
|
+
--color: rgba(255, 0, 0, 0.1);
|
|
969
|
+
height: 100%;
|
|
970
|
+
}
|
|
971
|
+
.panda-layout-grid__item[data-variant='bg'] {
|
|
972
|
+
background: var(--color);
|
|
973
|
+
}
|
|
974
|
+
.panda-layout-grid__item[data-variant='outline'] {
|
|
975
|
+
border-inline: 1px solid var(--color);
|
|
976
|
+
}
|
|
977
|
+
`;
|
|
978
|
+
function generateLayoutGridCss() {
|
|
979
|
+
return outdent17`
|
|
980
|
+
@layer base {
|
|
981
|
+
${layoutGrid}
|
|
982
|
+
}`;
|
|
983
|
+
}
|
|
984
|
+
|
|
948
985
|
// src/generators/pattern.ts
|
|
949
986
|
import { capitalize, dashCase, unionType } from "@pandacss/shared";
|
|
950
|
-
import { outdent as
|
|
987
|
+
import { outdent as outdent18 } from "outdent";
|
|
951
988
|
import { stringify as stringify2 } from "javascript-stringify";
|
|
952
989
|
import { match as match4 } from "ts-pattern";
|
|
953
990
|
function generate4(ctx, name, pattern) {
|
|
@@ -955,7 +992,7 @@ function generate4(ctx, name, pattern) {
|
|
|
955
992
|
const { upperName, styleFn, blocklistType } = ctx.getPatternDetails(name, pattern);
|
|
956
993
|
return {
|
|
957
994
|
name: dashCase(name),
|
|
958
|
-
dts:
|
|
995
|
+
dts: outdent18`
|
|
959
996
|
import type { SystemStyleObject, ConditionalValue } from '../types'
|
|
960
997
|
import type { PropertyValue } from '../types/prop-type'
|
|
961
998
|
import type { Properties } from '../types/csstype'
|
|
@@ -979,7 +1016,7 @@ function generate4(ctx, name, pattern) {
|
|
|
979
1016
|
}).join("\n ")}
|
|
980
1017
|
}
|
|
981
1018
|
|
|
982
|
-
${strict ?
|
|
1019
|
+
${strict ? outdent18`export declare function ${name}(options: ${upperName}Properties): string` : outdent18`
|
|
983
1020
|
|
|
984
1021
|
type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
|
|
985
1022
|
|
|
@@ -988,7 +1025,7 @@ function generate4(ctx, name, pattern) {
|
|
|
988
1025
|
`}
|
|
989
1026
|
|
|
990
1027
|
`,
|
|
991
|
-
js:
|
|
1028
|
+
js: outdent18`
|
|
992
1029
|
${ctx.getImport("mapObject", "../helpers")}
|
|
993
1030
|
${ctx.getImport("css", "../css/index")}
|
|
994
1031
|
|
|
@@ -1027,11 +1064,11 @@ function generatePackageJSON(ctx) {
|
|
|
1027
1064
|
}
|
|
1028
1065
|
|
|
1029
1066
|
// src/generators/prop-types.ts
|
|
1030
|
-
import { outdent as
|
|
1067
|
+
import { outdent as outdent19 } from "outdent";
|
|
1031
1068
|
function generatePropTypes(utility, strict) {
|
|
1032
1069
|
const strictText = `${strict ? "" : " | NativeValue<T>"}`;
|
|
1033
1070
|
const result = [
|
|
1034
|
-
|
|
1071
|
+
outdent19`
|
|
1035
1072
|
import type { ConditionalValue } from './conditions';
|
|
1036
1073
|
import type { Properties as CSSProperties } from './csstype'
|
|
1037
1074
|
import type { Tokens } from './token'
|
|
@@ -1054,7 +1091,7 @@ function generatePropTypes(utility, strict) {
|
|
|
1054
1091
|
result.push(` ${key}: Shorthand<${JSON.stringify(value)}>;`);
|
|
1055
1092
|
});
|
|
1056
1093
|
result.push("}");
|
|
1057
|
-
return
|
|
1094
|
+
return outdent19`
|
|
1058
1095
|
${result.join("\n")}
|
|
1059
1096
|
|
|
1060
1097
|
export type PropertyValue<T extends string> = T extends keyof PropertyTypes
|
|
@@ -1067,14 +1104,14 @@ function generatePropTypes(utility, strict) {
|
|
|
1067
1104
|
|
|
1068
1105
|
// src/generators/recipe.ts
|
|
1069
1106
|
import { capitalize as capitalize2, unionType as unionType2 } from "@pandacss/shared";
|
|
1070
|
-
import { outdent as
|
|
1107
|
+
import { outdent as outdent20 } from "outdent";
|
|
1071
1108
|
function generateRecipes(ctx) {
|
|
1072
1109
|
const { recipes = {}, hash, hasRecipes, utility } = ctx;
|
|
1073
1110
|
const { separator } = utility;
|
|
1074
1111
|
if (!hasRecipes)
|
|
1075
1112
|
return;
|
|
1076
1113
|
const js = [
|
|
1077
|
-
|
|
1114
|
+
outdent20`
|
|
1078
1115
|
${ctx.getImport("createCss, withoutSpace, compact", "../helpers")}
|
|
1079
1116
|
|
|
1080
1117
|
const createRecipe = (name, defaultVariants) => {
|
|
@@ -1108,17 +1145,17 @@ function generateRecipes(ctx) {
|
|
|
1108
1145
|
`
|
|
1109
1146
|
];
|
|
1110
1147
|
const dts = [
|
|
1111
|
-
|
|
1148
|
+
outdent20`
|
|
1112
1149
|
import type { ConditionalValue } from '../types'
|
|
1113
1150
|
`
|
|
1114
1151
|
];
|
|
1115
1152
|
Object.values(recipes).forEach((recipe) => {
|
|
1116
1153
|
const { name, description, defaultVariants, variants } = recipe;
|
|
1117
|
-
js.push(
|
|
1154
|
+
js.push(outdent20`
|
|
1118
1155
|
export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})})
|
|
1119
1156
|
${name}.variants = ${JSON.stringify(Object.keys(variants ?? {}))}
|
|
1120
1157
|
`);
|
|
1121
|
-
dts.push(
|
|
1158
|
+
dts.push(outdent20`
|
|
1122
1159
|
export type ${capitalize2(name)}Variants = {
|
|
1123
1160
|
${Object.keys(variants ?? {}).map((key) => {
|
|
1124
1161
|
const value = variants[key];
|
|
@@ -1132,14 +1169,14 @@ function generateRecipes(ctx) {
|
|
|
1132
1169
|
`);
|
|
1133
1170
|
});
|
|
1134
1171
|
return {
|
|
1135
|
-
js:
|
|
1136
|
-
dts:
|
|
1172
|
+
js: outdent20.string(js.join("\n\n")),
|
|
1173
|
+
dts: outdent20.string(dts.join("\n\n"))
|
|
1137
1174
|
};
|
|
1138
1175
|
}
|
|
1139
1176
|
|
|
1140
1177
|
// src/generators/reset.ts
|
|
1141
|
-
var
|
|
1142
|
-
var reset =
|
|
1178
|
+
var css2 = (v) => v[0];
|
|
1179
|
+
var reset = css2`
|
|
1143
1180
|
* {
|
|
1144
1181
|
margin: 0;
|
|
1145
1182
|
}
|
|
@@ -1232,7 +1269,7 @@ var reset = css`
|
|
|
1232
1269
|
top: -0.5em;
|
|
1233
1270
|
}
|
|
1234
1271
|
`;
|
|
1235
|
-
function
|
|
1272
|
+
function generateResetCss() {
|
|
1236
1273
|
return `@layer reset {
|
|
1237
1274
|
${reset}
|
|
1238
1275
|
}`;
|
|
@@ -1255,11 +1292,11 @@ function generateTokenCss(ctx, varRoot) {
|
|
|
1255
1292
|
if (Object.keys(varsObj).length === 0)
|
|
1256
1293
|
continue;
|
|
1257
1294
|
if (key === "base") {
|
|
1258
|
-
const { css:
|
|
1259
|
-
results.push(
|
|
1295
|
+
const { css: css4 } = toCss({ [root]: varsObj });
|
|
1296
|
+
results.push(css4);
|
|
1260
1297
|
} else {
|
|
1261
1298
|
const keys = key.split(":");
|
|
1262
|
-
const { css:
|
|
1299
|
+
const { css: css4 } = toCss(varsObj);
|
|
1263
1300
|
const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
|
|
1264
1301
|
const parent = extractParentSelectors(condition);
|
|
1265
1302
|
return parent ? `&${parent}` : condition;
|
|
@@ -1267,13 +1304,13 @@ function generateTokenCss(ctx, varRoot) {
|
|
|
1267
1304
|
const rule = getDeepestRule(root, mapped);
|
|
1268
1305
|
if (!rule)
|
|
1269
1306
|
continue;
|
|
1270
|
-
getDeepestNode(rule)?.append(
|
|
1307
|
+
getDeepestNode(rule)?.append(css4);
|
|
1271
1308
|
results.push(expandNestedCss(rule.toString()));
|
|
1272
1309
|
}
|
|
1273
1310
|
}
|
|
1274
|
-
const
|
|
1311
|
+
const css3 = results.join("\n\n");
|
|
1275
1312
|
return `@layer tokens {
|
|
1276
|
-
${prettifyCss(cleanupSelectors(
|
|
1313
|
+
${prettifyCss(cleanupSelectors(css3, root))}
|
|
1277
1314
|
}
|
|
1278
1315
|
`;
|
|
1279
1316
|
}
|
|
@@ -1297,8 +1334,8 @@ function getDeepestNode(node) {
|
|
|
1297
1334
|
}
|
|
1298
1335
|
return node;
|
|
1299
1336
|
}
|
|
1300
|
-
function cleanupSelectors(
|
|
1301
|
-
const root = postcss.parse(
|
|
1337
|
+
function cleanupSelectors(css3, varSelector) {
|
|
1338
|
+
const root = postcss.parse(css3);
|
|
1302
1339
|
root.walkRules((rule) => {
|
|
1303
1340
|
rule.selectors.forEach((selector) => {
|
|
1304
1341
|
const res = selector.split(varSelector).filter(Boolean);
|
|
@@ -1312,7 +1349,7 @@ function cleanupSelectors(css2, varSelector) {
|
|
|
1312
1349
|
|
|
1313
1350
|
// src/generators/token-dts.ts
|
|
1314
1351
|
import { unionType as unionType3, capitalize as capitalize3 } from "@pandacss/shared";
|
|
1315
|
-
import { outdent as
|
|
1352
|
+
import { outdent as outdent21 } from "outdent";
|
|
1316
1353
|
import pluralize from "pluralize";
|
|
1317
1354
|
function generateTokenDts(dict) {
|
|
1318
1355
|
const set = /* @__PURE__ */ new Set();
|
|
@@ -1330,11 +1367,11 @@ function generateTokenDts(dict) {
|
|
|
1330
1367
|
}
|
|
1331
1368
|
result.add("} & { [token: string]: never }");
|
|
1332
1369
|
set.add(Array.from(result).join("\n"));
|
|
1333
|
-
return
|
|
1370
|
+
return outdent21.string(Array.from(set).join("\n\n"));
|
|
1334
1371
|
}
|
|
1335
1372
|
|
|
1336
1373
|
// src/generators/token-js.ts
|
|
1337
|
-
import
|
|
1374
|
+
import outdent22 from "outdent";
|
|
1338
1375
|
function generateTokenJs(dict) {
|
|
1339
1376
|
const map = /* @__PURE__ */ new Map();
|
|
1340
1377
|
dict.allTokens.forEach((token) => {
|
|
@@ -1344,7 +1381,7 @@ function generateTokenJs(dict) {
|
|
|
1344
1381
|
});
|
|
1345
1382
|
const obj = Object.fromEntries(map);
|
|
1346
1383
|
return {
|
|
1347
|
-
js:
|
|
1384
|
+
js: outdent22`
|
|
1348
1385
|
const tokens = ${JSON.stringify(obj, null, 2)}
|
|
1349
1386
|
|
|
1350
1387
|
export function token(path, fallback) {
|
|
@@ -1357,7 +1394,7 @@ function generateTokenJs(dict) {
|
|
|
1357
1394
|
|
|
1358
1395
|
token.var = tokenVar
|
|
1359
1396
|
`,
|
|
1360
|
-
dts:
|
|
1397
|
+
dts: outdent22`
|
|
1361
1398
|
import type { Token } from '../types/token'
|
|
1362
1399
|
|
|
1363
1400
|
export declare function token(path: Token, fallback?: string): string & {
|
|
@@ -1370,7 +1407,7 @@ function generateTokenJs(dict) {
|
|
|
1370
1407
|
// src/generators/types.ts
|
|
1371
1408
|
import { allCssProperties } from "@pandacss/is-valid-prop";
|
|
1372
1409
|
import { readFileSync as readFileSync2 } from "fs-extra";
|
|
1373
|
-
import
|
|
1410
|
+
import outdent23 from "outdent";
|
|
1374
1411
|
function getType(file) {
|
|
1375
1412
|
const filepath = getEntrypoint("@pandacss/types", { dev: file });
|
|
1376
1413
|
return readFileSync2(filepath, "utf8");
|
|
@@ -1383,7 +1420,7 @@ function generateCssType(ctx) {
|
|
|
1383
1420
|
selectors: getType("selectors.d.ts"),
|
|
1384
1421
|
recipe: getType("recipe.d.ts"),
|
|
1385
1422
|
composition: getType("composition.d.ts"),
|
|
1386
|
-
global:
|
|
1423
|
+
global: outdent23`
|
|
1387
1424
|
import { RecipeVariantRecord, RecipeConfig } from './recipe'
|
|
1388
1425
|
import { GlobalStyleObject } from './system-types'
|
|
1389
1426
|
import { CompositionStyles } from './composition'
|
|
@@ -1395,14 +1432,14 @@ function generateCssType(ctx) {
|
|
|
1395
1432
|
export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
|
|
1396
1433
|
}
|
|
1397
1434
|
`,
|
|
1398
|
-
exported:
|
|
1435
|
+
exported: outdent23`
|
|
1399
1436
|
import './global'
|
|
1400
1437
|
export { ConditionalValue } from './conditions'
|
|
1401
1438
|
export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
|
|
1402
1439
|
|
|
1403
1440
|
export type Assign<Target, Override> = Omit<Target, keyof Override> & Override
|
|
1404
1441
|
`,
|
|
1405
|
-
styleProps:
|
|
1442
|
+
styleProps: outdent23`
|
|
1406
1443
|
import { PropertyValue } from './prop-type'
|
|
1407
1444
|
import { Token } from './token'
|
|
1408
1445
|
|
|
@@ -1436,11 +1473,11 @@ function setupDesignTokens(ctx) {
|
|
|
1436
1473
|
if (ctx.tokens.isEmpty)
|
|
1437
1474
|
return;
|
|
1438
1475
|
const code = generateTokenJs(ctx.tokens);
|
|
1439
|
-
const
|
|
1476
|
+
const css3 = generateTokenCss(ctx);
|
|
1440
1477
|
return {
|
|
1441
1478
|
dir: ctx.paths.token,
|
|
1442
1479
|
files: [
|
|
1443
|
-
{ file: "index.css", code:
|
|
1480
|
+
{ file: "index.css", code: css3 },
|
|
1444
1481
|
{ file: "index.d.ts", code: code.dts },
|
|
1445
1482
|
{ file: ctx.getExt("index"), code: code.js }
|
|
1446
1483
|
]
|
|
@@ -1517,8 +1554,8 @@ function setupPatterns(ctx) {
|
|
|
1517
1554
|
if (!files)
|
|
1518
1555
|
return;
|
|
1519
1556
|
const index = {
|
|
1520
|
-
js:
|
|
1521
|
-
dts:
|
|
1557
|
+
js: outdent24.string(files.map((file) => ctx.getExport(`./${file.name}`)).join("\n")),
|
|
1558
|
+
dts: outdent24.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
|
|
1522
1559
|
};
|
|
1523
1560
|
return {
|
|
1524
1561
|
dir: ctx.paths.pattern,
|
|
@@ -1537,17 +1574,17 @@ function setupJsx(ctx) {
|
|
|
1537
1574
|
const types = generateJsxTypes(ctx);
|
|
1538
1575
|
const factory = generateJsxFactory(ctx);
|
|
1539
1576
|
const patterns = generateJsxPatterns(ctx);
|
|
1540
|
-
const
|
|
1577
|
+
const layoutGrid2 = generateLayoutGrid(ctx);
|
|
1541
1578
|
const index = {
|
|
1542
|
-
js:
|
|
1579
|
+
js: outdent24`
|
|
1543
1580
|
${ctx.getExport("./factory")}
|
|
1544
1581
|
${ctx.getExport("./layout-grid")}
|
|
1545
|
-
${
|
|
1582
|
+
${outdent24.string(patterns.map((file) => ctx.getExport(`./${file.name}`)).join("\n"))}
|
|
1546
1583
|
`,
|
|
1547
|
-
dts:
|
|
1584
|
+
dts: outdent24`
|
|
1548
1585
|
export * from './factory'
|
|
1549
1586
|
export * from './layout-grid'
|
|
1550
|
-
${
|
|
1587
|
+
${outdent24.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
|
|
1551
1588
|
export type { ${ctx.jsxFactoryDetails.typeName} } from '../types/jsx'
|
|
1552
1589
|
`
|
|
1553
1590
|
};
|
|
@@ -1556,8 +1593,8 @@ function setupJsx(ctx) {
|
|
|
1556
1593
|
files: [
|
|
1557
1594
|
...patterns.map((file) => ({ file: ctx.getExt(file.name), code: file.js })),
|
|
1558
1595
|
...patterns.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
|
|
1559
|
-
{ file: ctx.getExt("layout-grid"), code:
|
|
1560
|
-
{ file: "layout-grid.d.ts", code:
|
|
1596
|
+
{ file: ctx.getExt("layout-grid"), code: layoutGrid2.js },
|
|
1597
|
+
{ file: "layout-grid.d.ts", code: layoutGrid2.dts },
|
|
1561
1598
|
{ file: ctx.getExt("is-valid-prop"), code: isValidProp.js },
|
|
1562
1599
|
{ file: "factory.d.ts", code: types.jsxFactory },
|
|
1563
1600
|
{ file: ctx.getExt("factory"), code: factory.js },
|
|
@@ -1568,12 +1605,12 @@ function setupJsx(ctx) {
|
|
|
1568
1605
|
}
|
|
1569
1606
|
function setupCssIndex(ctx) {
|
|
1570
1607
|
const index = {
|
|
1571
|
-
js:
|
|
1608
|
+
js: outdent24`
|
|
1572
1609
|
${ctx.getExport("./css")}
|
|
1573
1610
|
${ctx.getExport("./cx")}
|
|
1574
1611
|
${ctx.getExport("./cva")}
|
|
1575
1612
|
`,
|
|
1576
|
-
dts:
|
|
1613
|
+
dts: outdent24`
|
|
1577
1614
|
export * from './css'
|
|
1578
1615
|
export * from './cx'
|
|
1579
1616
|
export * from './cva'
|
|
@@ -1587,12 +1624,16 @@ function setupCssIndex(ctx) {
|
|
|
1587
1624
|
]
|
|
1588
1625
|
};
|
|
1589
1626
|
}
|
|
1590
|
-
function
|
|
1627
|
+
function setupResetCss(ctx) {
|
|
1591
1628
|
if (!ctx.preflight)
|
|
1592
1629
|
return;
|
|
1593
|
-
const code =
|
|
1630
|
+
const code = generateResetCss();
|
|
1594
1631
|
return { files: [{ file: "reset.css", code }] };
|
|
1595
1632
|
}
|
|
1633
|
+
function setupLayoutGridCss() {
|
|
1634
|
+
const code = generateLayoutGridCss();
|
|
1635
|
+
return { files: [{ file: "layout-grid.css", code }] };
|
|
1636
|
+
}
|
|
1596
1637
|
function setupPackageJson(ctx) {
|
|
1597
1638
|
if (!ctx.emitPackage)
|
|
1598
1639
|
return;
|
|
@@ -1613,37 +1654,38 @@ function generateSystem(ctx) {
|
|
|
1613
1654
|
setupPatterns(ctx),
|
|
1614
1655
|
setupCssIndex(ctx),
|
|
1615
1656
|
setupJsx(ctx),
|
|
1616
|
-
|
|
1657
|
+
setupResetCss(ctx),
|
|
1658
|
+
setupLayoutGridCss(),
|
|
1617
1659
|
setupPackageJson(ctx)
|
|
1618
1660
|
].filter(Boolean);
|
|
1619
1661
|
}
|
|
1620
1662
|
|
|
1621
1663
|
// src/messages.ts
|
|
1622
1664
|
import { colors, logger as logger3, quote as quote2 } from "@pandacss/logger";
|
|
1623
|
-
import { outdent as
|
|
1665
|
+
import { outdent as outdent25 } from "outdent";
|
|
1624
1666
|
var tick = colors.green().bold("\u2714\uFE0F");
|
|
1625
1667
|
function artifactsGeneratedMessage(ctx) {
|
|
1626
1668
|
return [
|
|
1627
|
-
|
|
1669
|
+
outdent25`
|
|
1628
1670
|
${tick} ${quote2(ctx.outdir, "/css")}: the css function to author styles
|
|
1629
1671
|
`,
|
|
1630
|
-
ctx.hasTokens &&
|
|
1672
|
+
ctx.hasTokens && outdent25`
|
|
1631
1673
|
${tick} ${quote2(ctx.outdir, "/tokens")}: the css variables and js function to query your tokens
|
|
1632
1674
|
`,
|
|
1633
|
-
ctx.hasPatterns &&
|
|
1675
|
+
ctx.hasPatterns && outdent25`
|
|
1634
1676
|
${tick} ${quote2(ctx.outdir, "/patterns")}: functions to implement common css patterns
|
|
1635
1677
|
`,
|
|
1636
|
-
ctx.hasRecipes &&
|
|
1678
|
+
ctx.hasRecipes && outdent25`
|
|
1637
1679
|
${tick} ${quote2(ctx.outdir, "/recipes")}: functions to create multi-variant styles
|
|
1638
1680
|
`,
|
|
1639
|
-
ctx.jsxFramework &&
|
|
1681
|
+
ctx.jsxFramework && outdent25`
|
|
1640
1682
|
${tick} ${quote2(ctx.outdir, "/jsx")}: style prop powered elements for ${ctx.jsxFramework}
|
|
1641
1683
|
`,
|
|
1642
1684
|
"\n"
|
|
1643
1685
|
].filter(Boolean).join("\n");
|
|
1644
1686
|
}
|
|
1645
1687
|
function configExistsMessage(cmd) {
|
|
1646
|
-
return
|
|
1688
|
+
return outdent25`
|
|
1647
1689
|
\n
|
|
1648
1690
|
It looks like you already have panda created\`.
|
|
1649
1691
|
|
|
@@ -1652,7 +1694,7 @@ function configExistsMessage(cmd) {
|
|
|
1652
1694
|
`;
|
|
1653
1695
|
}
|
|
1654
1696
|
function thankYouMessage() {
|
|
1655
|
-
return
|
|
1697
|
+
return outdent25`
|
|
1656
1698
|
|
|
1657
1699
|
🚀 Thanks for choosing ${colors.cyan("Panda")} to write your css.
|
|
1658
1700
|
|
|
@@ -1664,7 +1706,7 @@ var randomWords = ["Sweet", "Divine", "Pandalicious", "Super"];
|
|
|
1664
1706
|
var pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
|
|
1665
1707
|
function scaffoldCompleteMessage() {
|
|
1666
1708
|
return logger3.box(
|
|
1667
|
-
|
|
1709
|
+
outdent25`
|
|
1668
1710
|
|
|
1669
1711
|
${colors.bold().cyan("Next steps:")}
|
|
1670
1712
|
|
|
@@ -1680,12 +1722,12 @@ function scaffoldCompleteMessage() {
|
|
|
1680
1722
|
);
|
|
1681
1723
|
}
|
|
1682
1724
|
function watchMessage() {
|
|
1683
|
-
return
|
|
1725
|
+
return outdent25`
|
|
1684
1726
|
Watching for file changes...
|
|
1685
1727
|
`;
|
|
1686
1728
|
}
|
|
1687
1729
|
function buildCompleteMessage(ctx) {
|
|
1688
|
-
return
|
|
1730
|
+
return outdent25`
|
|
1689
1731
|
Successfully extracted css from ${ctx.files.length} file(s) ✨
|
|
1690
1732
|
`;
|
|
1691
1733
|
}
|
|
@@ -1709,16 +1751,6 @@ async function extractCss(ctx) {
|
|
|
1709
1751
|
await bundleChunks(ctx);
|
|
1710
1752
|
return buildCompleteMessage(ctx);
|
|
1711
1753
|
}
|
|
1712
|
-
function getBaseCss(ctx) {
|
|
1713
|
-
const css2 = [
|
|
1714
|
-
generateReset(),
|
|
1715
|
-
generateTokenCss(ctx),
|
|
1716
|
-
generateKeyframes(ctx.theme.keyframes),
|
|
1717
|
-
ctx.getGlobalCss(),
|
|
1718
|
-
ctx.getStaticCss()
|
|
1719
|
-
];
|
|
1720
|
-
return css2.filter(Boolean).join("\n\n");
|
|
1721
|
-
}
|
|
1722
1754
|
|
|
1723
1755
|
// src/builder.ts
|
|
1724
1756
|
import { discardDuplicate, mergeCss as mergeCss2, Stylesheet as Stylesheet3 } from "@pandacss/core";
|
|
@@ -1729,6 +1761,19 @@ import { existsSync as existsSync2, readFileSync as readFileSync5 } from "fs";
|
|
|
1729
1761
|
import { statSync } from "fs-extra";
|
|
1730
1762
|
import { resolve as resolve3 } from "path";
|
|
1731
1763
|
|
|
1764
|
+
// src/get-base-css.ts
|
|
1765
|
+
function getBaseCss(ctx) {
|
|
1766
|
+
const css3 = [
|
|
1767
|
+
generateResetCss(),
|
|
1768
|
+
generateLayoutGridCss(),
|
|
1769
|
+
generateTokenCss(ctx),
|
|
1770
|
+
generateKeyframes(ctx.theme.keyframes),
|
|
1771
|
+
ctx.getGlobalCss(),
|
|
1772
|
+
ctx.getStaticCss()
|
|
1773
|
+
];
|
|
1774
|
+
return css3.filter(Boolean).join("\n\n");
|
|
1775
|
+
}
|
|
1776
|
+
|
|
1732
1777
|
// src/config.ts
|
|
1733
1778
|
import { loadConfigFile } from "@pandacss/config";
|
|
1734
1779
|
import { lookItUpSync } from "look-it-up";
|
|
@@ -1967,10 +2012,10 @@ function createContext(conf, io = fileSystem) {
|
|
|
1967
2012
|
format(file) {
|
|
1968
2013
|
return relative(cwd, file).replaceAll(sep, "__").replace(extname(file), ".css");
|
|
1969
2014
|
},
|
|
1970
|
-
async write(file,
|
|
2015
|
+
async write(file, css3) {
|
|
1971
2016
|
const fileName = chunks.format(file);
|
|
1972
2017
|
const oldCss = await chunks.readFile(file);
|
|
1973
|
-
const newCss = mergeCss(oldCss,
|
|
2018
|
+
const newCss = mergeCss(oldCss, css3);
|
|
1974
2019
|
logger4.debug("chunk:write", { file, path: fileName });
|
|
1975
2020
|
return write(paths.chunk, [{ file: fileName, code: newCss }]);
|
|
1976
2021
|
},
|
|
@@ -2013,33 +2058,7 @@ function createContext(conf, io = fileSystem) {
|
|
|
2013
2058
|
function getGlobalCss() {
|
|
2014
2059
|
const sheet = new Stylesheet2(context());
|
|
2015
2060
|
sheet.processGlobalCss({
|
|
2016
|
-
":root": {
|
|
2017
|
-
"--made-with-panda": `'\u{1F43C}'`
|
|
2018
|
-
},
|
|
2019
|
-
".panda-layout-grid": {
|
|
2020
|
-
display: "grid",
|
|
2021
|
-
gap: "var(--gutter)",
|
|
2022
|
-
gridTemplateColumns: "repeat(var(--count), 1fr)",
|
|
2023
|
-
height: "100%",
|
|
2024
|
-
width: "100%",
|
|
2025
|
-
position: "absolute",
|
|
2026
|
-
inset: "0",
|
|
2027
|
-
pointerEvents: "none",
|
|
2028
|
-
maxWidth: "var(--max-width)",
|
|
2029
|
-
marginInline: "var(--margin-x)",
|
|
2030
|
-
paddingInline: "var(--padding-x)"
|
|
2031
|
-
},
|
|
2032
|
-
".panda-layout-grid__item": {
|
|
2033
|
-
display: "flex",
|
|
2034
|
-
"--color": "rgba(255, 0, 0, 0.1)",
|
|
2035
|
-
height: "100%",
|
|
2036
|
-
"&[data-variant=bg]": {
|
|
2037
|
-
background: "var(--color)"
|
|
2038
|
-
},
|
|
2039
|
-
"&[data-variant=outline]": {
|
|
2040
|
-
borderInline: "1px solid var(--color)"
|
|
2041
|
-
}
|
|
2042
|
-
}
|
|
2061
|
+
":root": { "--made-with-panda": `'\u{1F43C}'` }
|
|
2043
2062
|
});
|
|
2044
2063
|
if (globalCss) {
|
|
2045
2064
|
sheet.processGlobalCss(globalCss);
|
|
@@ -2059,8 +2078,8 @@ function createContext(conf, io = fileSystem) {
|
|
|
2059
2078
|
return recipes2[recipe];
|
|
2060
2079
|
}
|
|
2061
2080
|
});
|
|
2062
|
-
results.css.forEach((
|
|
2063
|
-
sheet.processAtomic(
|
|
2081
|
+
results.css.forEach((css3) => {
|
|
2082
|
+
sheet.processAtomic(css3);
|
|
2064
2083
|
});
|
|
2065
2084
|
results.recipes.forEach((result) => {
|
|
2066
2085
|
Object.entries(result).forEach(([key, value]) => {
|
|
@@ -2082,8 +2101,8 @@ function createContext(conf, io = fileSystem) {
|
|
|
2082
2101
|
});
|
|
2083
2102
|
collector.jsx.forEach((result) => {
|
|
2084
2103
|
const { data, type, name } = result;
|
|
2085
|
-
const { css:
|
|
2086
|
-
const styles = { ...
|
|
2104
|
+
const { css: css3 = {}, ...rest } = data;
|
|
2105
|
+
const styles = { ...css3, ...rest };
|
|
2087
2106
|
match5([name, type]).with([P.string, "pattern"], ([name2]) => {
|
|
2088
2107
|
collector.setPattern(getPatternFnName(name2), { data: styles });
|
|
2089
2108
|
}).with([P.string, "recipe"], ([name2]) => {
|
|
@@ -2249,9 +2268,9 @@ var Builder = class {
|
|
|
2249
2268
|
fileCssMap = /* @__PURE__ */ new Map();
|
|
2250
2269
|
context;
|
|
2251
2270
|
configChanged = true;
|
|
2252
|
-
updateFile(file,
|
|
2271
|
+
updateFile(file, css3) {
|
|
2253
2272
|
const oldCss = this.fileCssMap?.get(file) ?? "";
|
|
2254
|
-
const newCss = mergeCss2(oldCss,
|
|
2273
|
+
const newCss = mergeCss2(oldCss, css3);
|
|
2255
2274
|
this.fileCssMap?.set(file, newCss);
|
|
2256
2275
|
}
|
|
2257
2276
|
async setup() {
|
|
@@ -2299,8 +2318,8 @@ var Builder = class {
|
|
|
2299
2318
|
toString() {
|
|
2300
2319
|
const ctx = this.ensure();
|
|
2301
2320
|
const sheet = new Stylesheet3(ctx.context());
|
|
2302
|
-
const
|
|
2303
|
-
sheet.append(
|
|
2321
|
+
const css3 = Array.from(this.fileCssMap.values()).join("\n\n");
|
|
2322
|
+
sheet.append(css3);
|
|
2304
2323
|
return sheet.toCss({ minify: ctx.minify });
|
|
2305
2324
|
}
|
|
2306
2325
|
isValidRoot(root) {
|
|
@@ -2455,9 +2474,9 @@ async function generate5(config, configPath) {
|
|
|
2455
2474
|
// src/git-ignore.ts
|
|
2456
2475
|
import { appendFileSync, readFileSync as readFileSync6, writeFileSync } from "fs";
|
|
2457
2476
|
import { lookItUpSync as lookItUpSync2 } from "look-it-up";
|
|
2458
|
-
import
|
|
2477
|
+
import outdent26 from "outdent";
|
|
2459
2478
|
function setupGitIgnore(ctx) {
|
|
2460
|
-
const txt =
|
|
2479
|
+
const txt = outdent26`## CSS Panda
|
|
2461
2480
|
${ctx.outdir}
|
|
2462
2481
|
${ctx.outdir}-static
|
|
2463
2482
|
`;
|
|
@@ -2475,7 +2494,7 @@ function setupGitIgnore(ctx) {
|
|
|
2475
2494
|
import { logger as logger9, quote as quote3 } from "@pandacss/logger";
|
|
2476
2495
|
import { writeFile as writeFile2 } from "fs-extra";
|
|
2477
2496
|
import { lookItUpSync as lookItUpSync3 } from "look-it-up";
|
|
2478
|
-
import { outdent as
|
|
2497
|
+
import { outdent as outdent27 } from "outdent";
|
|
2479
2498
|
import { join as join3 } from "path";
|
|
2480
2499
|
import getPackageManager2 from "preferred-pm";
|
|
2481
2500
|
async function setupConfig(cwd, { force }) {
|
|
@@ -2489,7 +2508,7 @@ async function setupConfig(cwd, { force }) {
|
|
|
2489
2508
|
if (!force && configFile) {
|
|
2490
2509
|
logger9.warn("init:config", configExistsMessage(cmd));
|
|
2491
2510
|
} else {
|
|
2492
|
-
const content =
|
|
2511
|
+
const content = outdent27`
|
|
2493
2512
|
import { defineConfig } from "css-panda"
|
|
2494
2513
|
|
|
2495
2514
|
export default defineConfig({
|
|
@@ -2515,7 +2534,7 @@ async function setupConfig(cwd, { force }) {
|
|
|
2515
2534
|
}
|
|
2516
2535
|
async function setupPostcss(cwd) {
|
|
2517
2536
|
logger9.info("init:postcss", `creating postcss config file: ${quote3("postcss.config.cjs")}`);
|
|
2518
|
-
const content =
|
|
2537
|
+
const content = outdent27`
|
|
2519
2538
|
module.exports = {
|
|
2520
2539
|
plugins: {
|
|
2521
2540
|
'css-panda/postcss': {},
|