@pandacss/generator 0.0.0-dev-20230814201731 → 0.0.0-dev-20230821094333

package/dist/index.d.mts

@@ -94,6 +94,10 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
     conditions: _pandacss_core.Conditions;
     createSheetContext: () => _pandacss_core.StylesheetContext;
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
+    layers: _pandacss_types.CascadeLayers;
+    isValidLayerRule: (layerRule: string) => boolean;
+    layerString: string;
+    layerNames: string[];
     hooks: _pandacss_types.PandaHookable;
     path: string;
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;
@@ -320,6 +324,10 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
     conditions: _pandacss_core.Conditions;
     createSheetContext: () => _pandacss_core.StylesheetContext;
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
+    layers: _pandacss_types.CascadeLayers;
+    isValidLayerRule: (layerRule: string) => boolean;
+    layerString: string;
+    layerNames: string[];
     hooks: _pandacss_types.PandaHookable;
     path: string;
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;

package/dist/index.d.ts

@@ -94,6 +94,10 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
     conditions: _pandacss_core.Conditions;
     createSheetContext: () => _pandacss_core.StylesheetContext;
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
+    layers: _pandacss_types.CascadeLayers;
+    isValidLayerRule: (layerRule: string) => boolean;
+    layerString: string;
+    layerNames: string[];
     hooks: _pandacss_types.PandaHookable;
     path: string;
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;
@@ -320,6 +324,10 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
     conditions: _pandacss_core.Conditions;
     createSheetContext: () => _pandacss_core.StylesheetContext;
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
+    layers: _pandacss_types.CascadeLayers;
+    isValidLayerRule: (layerRule: string) => boolean;
+    layerString: string;
+    layerNames: string[];
     hooks: _pandacss_types.PandaHookable;
     path: string;
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;

package/dist/index.js

@@ -206,7 +206,7 @@ function generateKeyframeCss(ctx) {
 var css = String.raw;
 function generateResetCss(ctx, scope = "") {
   const selector = scope ? `${scope} ` : "";
-  const output = css`@layer reset {
+  const output = css`@layer ${ctx.layers.reset} {
   ${selector}* {
     margin: 0;
     padding: 0;
@@ -473,7 +473,7 @@ function generateTokenCss(ctx) {
     }
   }
   const css2 = results.join("\n\n");
-  const output = `@layer tokens {
+  const output = `@layer ${ctx.layers.tokens} {
     ${(0, import_core3.prettifyCss)(cleanupSelectors(css2, root))}
   }
   `;
@@ -2058,7 +2058,7 @@ function generateSolidJsxFactory(ctx) {
     ${ctx.file.import("allCssProperties", "./is-valid-prop")}
 
     function styledFn(element, configOrCva = {}) {
-      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
       return function ${componentName}(props) {
         const mergedProps = mergeProps({ as: element }, props)
@@ -3351,7 +3351,7 @@ var generateFlattenedCss = (ctx) => (options) => {
   const { files, resolve } = options;
   const { theme: { keyframes } = {}, preflight, minify, staticCss } = ctx.config;
   const unresolved = [
-    "@layer reset, base, tokens, recipes, utilities;",
+    ctx.layerString,
     preflight && "@import './reset.css';",
     "@import './global.css';",
     staticCss && "@import './static.css';",
@@ -3502,12 +3502,20 @@ var getBaseEngine = (conf) => {
   });
   const compositionContext = { conditions, utility };
   (0, import_core5.assignCompositions)(compositions, compositionContext);
+  const layers = config.layers;
+  const layerNames = Object.values(layers);
+  const isValidLayerRule = (0, import_shared5.memo)((layerRule) => {
+    const names = new Set(layerRule.split(",").map((name) => name.trim()));
+    return names.size >= 5 && layerNames.every((name) => names.has(name));
+  });
+  const layerString = `@layer ${layerNames.join(", ")};`;
   const createSheetContext = () => ({
     root: import_postcss3.default.root(),
     conditions,
     utility,
     hash: hash.className,
-    helpers
+    helpers,
+    layers
   });
   const createSheet = (options) => {
     const sheetContext = createSheetContext();
@@ -3543,7 +3551,12 @@ var getBaseEngine = (conf) => {
     recipes,
     conditions,
     createSheetContext,
-    createSheet
+    createSheet,
+    // cascade layer
+    layers,
+    isValidLayerRule,
+    layerString,
+    layerNames
   };
 };
 
@@ -3652,7 +3665,15 @@ var defaults = (conf) => ({
     outExtension: "mjs",
     shorthands: true,
     syntax: "object-literal",
-    ...conf.config
+    ...conf.config,
+    layers: {
+      reset: "reset",
+      base: "base",
+      tokens: "tokens",
+      recipes: "recipes",
+      utilities: "utilities",
+      ...conf.config.layers
+    }
   }
 });
 var getImportMap = (outdir) => ({

package/dist/index.mjs

@@ -175,7 +175,7 @@ function generateKeyframeCss(ctx) {
 var css = String.raw;
 function generateResetCss(ctx, scope = "") {
   const selector = scope ? `${scope} ` : "";
-  const output = css`@layer reset {
+  const output = css`@layer ${ctx.layers.reset} {
   ${selector}* {
     margin: 0;
     padding: 0;
@@ -442,7 +442,7 @@ function generateTokenCss(ctx) {
     }
   }
   const css2 = results.join("\n\n");
-  const output = `@layer tokens {
+  const output = `@layer ${ctx.layers.tokens} {
     ${prettifyCss(cleanupSelectors(css2, root))}
   }
   `;
@@ -2027,7 +2027,7 @@ function generateSolidJsxFactory(ctx) {
     ${ctx.file.import("allCssProperties", "./is-valid-prop")}
 
     function styledFn(element, configOrCva = {}) {
-      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
       return function ${componentName}(props) {
         const mergedProps = mergeProps({ as: element }, props)
@@ -3320,7 +3320,7 @@ var generateFlattenedCss = (ctx) => (options) => {
   const { files, resolve } = options;
   const { theme: { keyframes } = {}, preflight, minify, staticCss } = ctx.config;
   const unresolved = [
-    "@layer reset, base, tokens, recipes, utilities;",
+    ctx.layerString,
     preflight && "@import './reset.css';",
     "@import './global.css';",
     staticCss && "@import './static.css';",
@@ -3477,12 +3477,20 @@ var getBaseEngine = (conf) => {
   });
   const compositionContext = { conditions, utility };
   assignCompositions(compositions, compositionContext);
+  const layers = config.layers;
+  const layerNames = Object.values(layers);
+  const isValidLayerRule = memo((layerRule) => {
+    const names = new Set(layerRule.split(",").map((name) => name.trim()));
+    return names.size >= 5 && layerNames.every((name) => names.has(name));
+  });
+  const layerString = `@layer ${layerNames.join(", ")};`;
   const createSheetContext = () => ({
     root: postcss3.root(),
     conditions,
     utility,
     hash: hash.className,
-    helpers
+    helpers,
+    layers
   });
   const createSheet = (options) => {
     const sheetContext = createSheetContext();
@@ -3518,7 +3526,12 @@ var getBaseEngine = (conf) => {
     recipes,
     conditions,
     createSheetContext,
-    createSheet
+    createSheet,
+    // cascade layer
+    layers,
+    isValidLayerRule,
+    layerString,
+    layerNames
   };
 };
 
@@ -3627,7 +3640,15 @@ var defaults = (conf) => ({
     outExtension: "mjs",
     shorthands: true,
     syntax: "object-literal",
-    ...conf.config
+    ...conf.config,
+    layers: {
+      reset: "reset",
+      base: "base",
+      tokens: "tokens",
+      recipes: "recipes",
+      utilities: "utilities",
+      ...conf.config.layers
+    }
   }
 });
 var getImportMap = (outdir) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20230814201731",
+  "version": "0.0.0-dev-20230821094333",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,17 +20,17 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.27",
     "ts-pattern": "5.0.4",
-    "@pandacss/core": "0.0.0-dev-20230814201731",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230814201731",
-    "@pandacss/logger": "0.0.0-dev-20230814201731",
-    "@pandacss/shared": "0.0.0-dev-20230814201731",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230814201731",
-    "@pandacss/types": "0.0.0-dev-20230814201731"
+    "@pandacss/core": "0.0.0-dev-20230821094333",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230821094333",
+    "@pandacss/logger": "0.0.0-dev-20230821094333",
+    "@pandacss/shared": "0.0.0-dev-20230821094333",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230821094333",
+    "@pandacss/types": "0.0.0-dev-20230821094333"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.30",
     "hookable": "5.5.3",
-    "@pandacss/fixture": "0.0.0-dev-20230814201731"
+    "@pandacss/fixture": "0.0.0-dev-20230821094333"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",