@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.
Files changed (3) hide show
  1. package/dist/index.js +143 -124
  2. package/dist/index.mjs +143 -124
  3. 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 css2 = ctx.getGlobalCss();
39
- if (!css2)
38
+ const css3 = ctx.getGlobalCss();
39
+ if (!css3)
40
40
  return;
41
- return ctx.chunks.write("system/global.css", css2);
41
+ return ctx.chunks.write("system/global.css", css3);
42
42
  }
43
43
  function extractStaticCss(ctx) {
44
- const css2 = ctx.getStaticCss();
45
- if (!css2)
44
+ const css3 = ctx.getStaticCss();
45
+ if (!css3)
46
46
  return;
47
- return ctx.chunks.write("system/static.css", css2);
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 css2 = await ctx.chunks.readFile(file);
64
- sheet.append(css2);
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 css2 = await extractChunks(ctx);
71
- await ctx.write(ctx.paths.root, [{ file: "styles.css", code: css2 }]);
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 outdent23 from "outdent";
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 outdent17 } from "outdent";
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: outdent17`
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 ? outdent17`export declare function ${name}(options: ${upperName}Properties): string` : outdent17`
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: outdent17`
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 outdent18 } from "outdent";
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
- outdent18`
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 outdent18`
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 outdent19 } from "outdent";
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
- outdent19`
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
- outdent19`
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(outdent19`
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(outdent19`
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: outdent19.string(js.join("\n\n")),
1136
- dts: outdent19.string(dts.join("\n\n"))
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 css = (v) => v[0];
1142
- var reset = css`
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 generateReset() {
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: css3 } = toCss({ [root]: varsObj });
1259
- results.push(css3);
1295
+ const { css: css4 } = toCss({ [root]: varsObj });
1296
+ results.push(css4);
1260
1297
  } else {
1261
1298
  const keys = key.split(":");
1262
- const { css: css3 } = toCss(varsObj);
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(css3);
1307
+ getDeepestNode(rule)?.append(css4);
1271
1308
  results.push(expandNestedCss(rule.toString()));
1272
1309
  }
1273
1310
  }
1274
- const css2 = results.join("\n\n");
1311
+ const css3 = results.join("\n\n");
1275
1312
  return `@layer tokens {
1276
- ${prettifyCss(cleanupSelectors(css2, root))}
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(css2, varSelector) {
1301
- const root = postcss.parse(css2);
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 outdent20 } from "outdent";
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 outdent20.string(Array.from(set).join("\n\n"));
1370
+ return outdent21.string(Array.from(set).join("\n\n"));
1334
1371
  }
1335
1372
 
1336
1373
  // src/generators/token-js.ts
1337
- import outdent21 from "outdent";
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: outdent21`
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: outdent21`
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 outdent22 from "outdent";
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: outdent22`
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: outdent22`
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: outdent22`
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 css2 = generateTokenCss(ctx);
1476
+ const css3 = generateTokenCss(ctx);
1440
1477
  return {
1441
1478
  dir: ctx.paths.token,
1442
1479
  files: [
1443
- { file: "index.css", code: css2 },
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: outdent23.string(files.map((file) => ctx.getExport(`./${file.name}`)).join("\n")),
1521
- dts: outdent23.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
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 layoutGrid = generateLayoutGrid(ctx);
1577
+ const layoutGrid2 = generateLayoutGrid(ctx);
1541
1578
  const index = {
1542
- js: outdent23`
1579
+ js: outdent24`
1543
1580
  ${ctx.getExport("./factory")}
1544
1581
  ${ctx.getExport("./layout-grid")}
1545
- ${outdent23.string(patterns.map((file) => ctx.getExport(`./${file.name}`)).join("\n"))}
1582
+ ${outdent24.string(patterns.map((file) => ctx.getExport(`./${file.name}`)).join("\n"))}
1546
1583
  `,
1547
- dts: outdent23`
1584
+ dts: outdent24`
1548
1585
  export * from './factory'
1549
1586
  export * from './layout-grid'
1550
- ${outdent23.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
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: layoutGrid.js },
1560
- { file: "layout-grid.d.ts", code: layoutGrid.dts },
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: outdent23`
1608
+ js: outdent24`
1572
1609
  ${ctx.getExport("./css")}
1573
1610
  ${ctx.getExport("./cx")}
1574
1611
  ${ctx.getExport("./cva")}
1575
1612
  `,
1576
- dts: outdent23`
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 setupReset(ctx) {
1627
+ function setupResetCss(ctx) {
1591
1628
  if (!ctx.preflight)
1592
1629
  return;
1593
- const code = generateReset();
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
- setupReset(ctx),
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 outdent24 } from "outdent";
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
- outdent24`
1669
+ outdent25`
1628
1670
  ${tick} ${quote2(ctx.outdir, "/css")}: the css function to author styles
1629
1671
  `,
1630
- ctx.hasTokens && outdent24`
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 && outdent24`
1675
+ ctx.hasPatterns && outdent25`
1634
1676
  ${tick} ${quote2(ctx.outdir, "/patterns")}: functions to implement common css patterns
1635
1677
  `,
1636
- ctx.hasRecipes && outdent24`
1678
+ ctx.hasRecipes && outdent25`
1637
1679
  ${tick} ${quote2(ctx.outdir, "/recipes")}: functions to create multi-variant styles
1638
1680
  `,
1639
- ctx.jsxFramework && outdent24`
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 outdent24`
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 outdent24`
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
- outdent24`
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 outdent24`
1725
+ return outdent25`
1684
1726
  Watching for file changes...
1685
1727
  `;
1686
1728
  }
1687
1729
  function buildCompleteMessage(ctx) {
1688
- return outdent24`
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, css2) {
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, css2);
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((css2) => {
2063
- sheet.processAtomic(css2);
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: css2 = {}, ...rest } = data;
2086
- const styles = { ...css2, ...rest };
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, css2) {
2271
+ updateFile(file, css3) {
2253
2272
  const oldCss = this.fileCssMap?.get(file) ?? "";
2254
- const newCss = mergeCss2(oldCss, css2);
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 css2 = Array.from(this.fileCssMap.values()).join("\n\n");
2303
- sheet.append(css2);
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 outdent25 from "outdent";
2477
+ import outdent26 from "outdent";
2459
2478
  function setupGitIgnore(ctx) {
2460
- const txt = outdent25`## CSS Panda
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 outdent26 } from "outdent";
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 = outdent26`
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 = outdent26`
2537
+ const content = outdent27`
2519
2538
  module.exports = {
2520
2539
  plugins: {
2521
2540
  'css-panda/postcss': {},