@pandacss/generator 0.0.0-dev-20230523074619 → 0.0.0-dev-20230523173112

package/dist/index.js

@@ -127,8 +127,52 @@ var getMessages = (ctx) => ({
 var import_lil_fp4 = require("lil-fp");
 
 // src/artifacts/index.ts
+var import_shared4 = require("@pandacss/shared");
 var import_outdent25 = __toESM(require("outdent"));
 
+// src/artifacts/css/global-css.ts
+var generateGlobalCss = (ctx) => {
+  const { globalCss = {}, optimize = true } = ctx.config;
+  const sheet = ctx.createSheet();
+  sheet.processGlobalCss({
+    ":root": {
+      "--made-with-panda": `'\u{1F43C}'`
+    },
+    "*, *::before, *::after, ::backdrop": {
+      "--blur": "/*!*/ /*!*/",
+      "--brightness": "/*!*/ /*!*/",
+      "--contrast": "/*!*/ /*!*/",
+      "--grayscale": "/*!*/ /*!*/",
+      "--hue-rotate": "/*!*/ /*!*/",
+      "--invert": "/*!*/ /*!*/",
+      "--saturate": "/*!*/ /*!*/",
+      "--sepia": "/*!*/ /*!*/",
+      "--drop-shadow": "/*!*/ /*!*/",
+      "--backdrop-blur": "/*!*/ /*!*/",
+      "--backdrop-brightness": "/*!*/ /*!*/",
+      "--backdrop-contrast": "/*!*/ /*!*/",
+      "--backdrop-grayscale": "/*!*/ /*!*/",
+      "--backdrop-hue-rotate": "/*!*/ /*!*/",
+      "--backdrop-invert": "/*!*/ /*!*/",
+      "--backdrop-opacity": "/*!*/ /*!*/",
+      "--backdrop-saturate": "/*!*/ /*!*/",
+      "--backdrop-sepia": "/*!*/ /*!*/",
+      "--scroll-snap-strictness": "proximity",
+      "--border-spacing-x": 0,
+      "--border-spacing-y": 0,
+      "--translate-x": 0,
+      "--translate-y": 0,
+      "--rotate": 0,
+      "--skew-x": 0,
+      "--skew-y": 0,
+      "--scale-x": 1,
+      "--scale-y": 1
+    }
+  });
+  sheet.processGlobalCss(globalCss);
+  return sheet.toCss({ optimize });
+};
+
 // src/artifacts/css/keyframe-css.ts
 var import_core = require("@pandacss/core");
 var import_postcss = __toESM(require("postcss"));
@@ -154,106 +198,223 @@ function generateKeyframeCss(ctx) {
 
 // src/artifacts/css/reset-css.ts
 var css = String.raw;
-var reset = css`
-  * {
-    margin: 0;
-    padding: 0;
-    font: inherit;
-  }
+function generateResetCss(scope = "") {
+  const selector = scope ? `${scope} ` : "";
+  return css`
+    @layer reset {
+      ${selector}* {
+        margin: 0;
+        padding: 0;
+        font: inherit;
+      }
 
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-  }
+      ${selector}*,
+      ${selector}*::before,
+      ${selector}*::after {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+      }
 
-  html,
-  body {
-    height: 100%;
-  }
+      ${scope || "html"} {
+        line-height: 1.5;
+        -webkit-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        -webkit-font-smoothing: antialiased;
+        -moz-tab-size: 4;
+        tab-size: 4;
+      }
 
-  body {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-  }
+      ${selector}hr {
+        height: 0;
+        color: inherit;
+        border-top-width: 1px;
+      }
 
-  img {
-    border-style: none;
-  }
+      body {
+        height: 100%;
+        line-height: inherit;
+      }
 
-  img,
-  picture,
-  video,
-  canvas,
-  svg {
-    display: block;
-    max-width: 100%;
-  }
+      ${selector}img {
+        border-style: none;
+      }
 
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    overflow-wrap: break-word;
-  }
+      ${selector}img,
+      ${selector}svg,
+      ${selector}video,
+      ${selector}canvas,
+      ${selector}audio,
+      ${selector}iframe,
+      ${selector}embed,
+      ${selector}object {
+        display: block;
+        vertical-align: middle;
+      }
 
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-    appearance: none;
-  }
+      ${selector}img,
+      ${selector}video {
+        max-width: 100%;
+        height: auto;
+      }
 
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    appearance: none;
-    font: inherit;
-  }
+      ${selector}p,
+      ${selector}h1,
+      ${selector}h2,
+      ${selector}h3,
+      ${selector}h4,
+      ${selector}h5,
+      ${selector}h6 {
+        overflow-wrap: break-word;
+      }
 
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
+      ${selector}ol,
+      ${selector}ul {
+        list-style: none;
+      }
 
-  code,
-  kbd,
-  pre,
-  samp {
-    font-size: 1em;
-  }
+      ${selector}code,
+      ${selector}kbd,
+      ${selector}pre,
+      ${selector}samp {
+        font-size: 1em;
+      }
 
-  table {
-    border-collapse: collapse;
-  }
+      ${selector}button,
+      ${selector}[type='button'],
+      ${selector}[type='reset'],
+      ${selector}[type='submit'] {
+        -webkit-appearance: button;
+        background-color: transparent;
+        background-image: none;
+      }
 
-  textarea {
-    resize: vertical;
-  }
+      ${selector}button,
+      ${selector}select {
+        text-transform: none;
+      }
 
-  sub {
-    bottom: -0.25em;
-  }
+      ${selector}table {
+        text-indent: 0;
+        border-color: inherit;
+        border-collapse: collapse;
+      }
 
-  sup {
-    top: -0.5em;
-  }
+      ${selector}input::placeholder,
+      ${selector}textarea::placeholder {
+        opacity: 1;
+      }
 
-  dialog {
-    padding: 0;
-  }
-`;
-function generateResetCss() {
-  return `@layer reset {
-    ${reset}
-  }`;
+      ${selector}textarea {
+        resize: vertical;
+      }
+
+      ${selector}summary {
+        display: list-item;
+      }
+
+      ${selector}small {
+        font-size: 80%;
+      }
+
+      ${selector}sub,
+      ${selector}sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+      }
+
+      ${selector}sub {
+        bottom: -0.25em;
+      }
+
+      ${selector}sup {
+        top: -0.5em;
+      }
+
+      ${selector}dialog {
+        padding: 0;
+      }
+
+      ${selector}a {
+        color: inherit;
+        text-decoration: inherit;
+      }
+
+      ${selector}abbr:where([title]) {
+        text-decoration: underline dotted;
+      }
+
+      ${selector}b,
+      ${selector}strong {
+        font-weight: bolder;
+      }
+
+      ${selector}code,
+      ${selector}kbd,
+      ${selector}samp,
+      ${selector}pre {
+        font-size: 1em;
+      }
+
+      ${selector}[type='search'] {
+        -webkit-appearance: textfield;
+        outline-offset: -2px;
+      }
+
+      ${selector}::-webkit-search-decoration {
+        -webkit-appearance: none;
+      }
+
+      ${selector}::-webkit-file-upload-button {
+        -webkit-appearance: button;
+      }
+
+      ${selector}::-webkit-inner-spin-button,
+      ${selector}::-webkit-outer-spin-button {
+        height: auto;
+      }
+
+      ${selector}:-moz-ui-invalid {
+        box-shadow: none;
+      }
+
+      ${selector}:-moz-focusring {
+        outline: auto;
+      }
+    }
+  `;
 }
 
-// src/artifacts/css/token-css.ts
+// src/artifacts/css/static-css.ts
 var import_core2 = require("@pandacss/core");
+var generateStaticCss = (ctx) => {
+  const { config, createSheet, utility, recipes } = ctx;
+  const { staticCss = {}, theme = {}, optimize = true } = config;
+  const sheet = createSheet();
+  const fn = (0, import_core2.getStaticCss)(staticCss);
+  const results = fn({
+    breakpoints: Object.keys(theme.breakpoints ?? {}),
+    getPropertyKeys: utility.getPropertyKeys,
+    getRecipeKeys: (recipe) => recipes.details.find((detail) => detail.config.name === recipe)?.variantKeyMap ?? {}
+  });
+  results.css.forEach((css2) => {
+    sheet.processAtomic(css2);
+  });
+  results.recipes.forEach((result) => {
+    Object.entries(result).forEach(([name, value]) => {
+      const recipeConfig = recipes.getConfig(name);
+      if (!recipeConfig)
+        return;
+      sheet.processRecipe(recipeConfig, value);
+    });
+  });
+  return sheet.toCss({ optimize });
+};
+
+// src/artifacts/css/token-css.ts
+var import_core3 = require("@pandacss/core");
 var import_postcss2 = __toESM(require("postcss"));
 function generateTokenCss(ctx) {
   const {
@@ -268,25 +429,25 @@ function generateTokenCss(ctx) {
     if (Object.keys(varsObj).length === 0)
       continue;
     if (key === "base") {
-      const { css: css3 } = (0, import_core2.toCss)({ [root]: varsObj });
+      const { css: css3 } = (0, import_core3.toCss)({ [root]: varsObj });
       results.push(css3);
     } else {
       const keys = key.split(":");
-      const { css: css3 } = (0, import_core2.toCss)(varsObj);
+      const { css: css3 } = (0, import_core3.toCss)(varsObj);
       const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
-        const parent = (0, import_core2.extractParentSelectors)(condition);
+        const parent = (0, import_core3.extractParentSelectors)(condition);
         return parent ? `&${parent}` : condition;
       });
       const rule = getDeepestRule(root, mapped);
       if (!rule)
         continue;
       getDeepestNode(rule)?.append(css3);
-      results.push((0, import_core2.expandNestedCss)(rule.toString()));
+      results.push((0, import_core3.expandNestedCss)(rule.toString()));
     }
   }
   const css2 = results.join("\n\n");
   return `@layer tokens {
-    ${(0, import_core2.prettifyCss)(cleanupSelectors(css2, root))}
+    ${(0, import_core3.prettifyCss)(cleanupSelectors(css2, root))}
   }
   `;
 }
@@ -1732,75 +1893,6 @@ function generateTokenTypes(ctx) {
   return import_outdent24.outdent.string(Array.from(set).join("\n\n"));
 }
 
-// src/artifacts/css/global-css.ts
-var generateGlobalCss = (ctx) => {
-  const { globalCss = {}, optimize = true } = ctx.config;
-  const sheet = ctx.createSheet();
-  sheet.processGlobalCss({
-    ":root": {
-      "--made-with-panda": `'\u{1F43C}'`
-    },
-    "*, *::before, *::after, ::backdrop": {
-      "--blur": "/*!*/ /*!*/",
-      "--brightness": "/*!*/ /*!*/",
-      "--contrast": "/*!*/ /*!*/",
-      "--grayscale": "/*!*/ /*!*/",
-      "--hue-rotate": "/*!*/ /*!*/",
-      "--invert": "/*!*/ /*!*/",
-      "--saturate": "/*!*/ /*!*/",
-      "--sepia": "/*!*/ /*!*/",
-      "--drop-shadow": "/*!*/ /*!*/",
-      "--backdrop-blur": "/*!*/ /*!*/",
-      "--backdrop-brightness": "/*!*/ /*!*/",
-      "--backdrop-contrast": "/*!*/ /*!*/",
-      "--backdrop-grayscale": "/*!*/ /*!*/",
-      "--backdrop-hue-rotate": "/*!*/ /*!*/",
-      "--backdrop-invert": "/*!*/ /*!*/",
-      "--backdrop-opacity": "/*!*/ /*!*/",
-      "--backdrop-saturate": "/*!*/ /*!*/",
-      "--backdrop-sepia": "/*!*/ /*!*/",
-      "--scroll-snap-strictness": "proximity",
-      "--border-spacing-x": 0,
-      "--border-spacing-y": 0,
-      "--translate-x": 0,
-      "--translate-y": 0,
-      "--rotate": 0,
-      "--skew-x": 0,
-      "--skew-y": 0,
-      "--scale-x": 1,
-      "--scale-y": 1
-    }
-  });
-  sheet.processGlobalCss(globalCss);
-  return sheet.toCss({ optimize });
-};
-
-// src/artifacts/css/static-css.ts
-var import_core3 = require("@pandacss/core");
-var generateStaticCss = (ctx) => {
-  const { config, createSheet, utility, recipes } = ctx;
-  const { staticCss = {}, theme = {}, optimize = true } = config;
-  const sheet = createSheet();
-  const fn = (0, import_core3.getStaticCss)(staticCss);
-  const results = fn({
-    breakpoints: Object.keys(theme.breakpoints ?? {}),
-    getPropertyKeys: utility.getPropertyKeys,
-    getRecipeKeys: (recipe) => recipes.details.find((detail) => detail.config.name === recipe)?.variantKeyMap ?? {}
-  });
-  results.css.forEach((css2) => {
-    sheet.processAtomic(css2);
-  });
-  results.recipes.forEach((result) => {
-    Object.entries(result).forEach(([name, value]) => {
-      const recipeConfig = recipes.getConfig(name);
-      if (!recipeConfig)
-        return;
-      sheet.processRecipe(recipeConfig, value);
-    });
-  });
-  return sheet.toCss({ optimize });
-};
-
 // src/artifacts/index.ts
 function setupHelpers(ctx) {
   const code = generateHelpers();
@@ -1977,9 +2069,11 @@ function setupCssIndex(ctx) {
   };
 }
 function setupResetCss(ctx) {
-  if (!ctx.config.preflight)
+  const { preflight } = ctx.config;
+  if (!preflight)
     return;
-  const code = generateResetCss();
+  const scope = (0, import_shared4.isObject)(preflight) ? preflight.scope : void 0;
+  const code = generateResetCss(scope);
   return { files: [{ file: "reset.css", code }] };
 }
 function setupGlobalCss(ctx) {
@@ -2125,11 +2219,11 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
 var import_core4 = require("@pandacss/core");
 var import_is_valid_prop3 = require("@pandacss/is-valid-prop");
 var import_logger3 = require("@pandacss/logger");
-var import_shared4 = require("@pandacss/shared");
+var import_shared5 = require("@pandacss/shared");
 var import_token_dictionary = require("@pandacss/token-dictionary");
 var import_lil_fp = require("lil-fp");
 var import_postcss3 = __toESM(require("postcss"));
-var helpers = { map: import_shared4.mapObject };
+var helpers = { map: import_shared5.mapObject };
 var getBaseEngine = (conf) => (0, import_lil_fp.pipe)(
   conf,
   import_lil_fp.Obj.bind("configDependencies", ({ dependencies }) => dependencies ?? []),
@@ -2150,7 +2244,7 @@ var getBaseEngine = (conf) => (0, import_lil_fp.pipe)(
   (0, import_lil_fp.tap)(({ conditions, utility, config: { theme } }) => {
     import_logger3.logger.debug("generator:conditions", conditions);
     const { textStyles, layerStyles } = theme ?? {};
-    const compositions = (0, import_shared4.compact)({ textStyle: textStyles, layerStyle: layerStyles });
+    const compositions = (0, import_shared5.compact)({ textStyle: textStyles, layerStyle: layerStyles });
     (0, import_core4.assignCompositions)({ conditions, utility }, compositions);
   }),
   import_lil_fp.Obj.bind("createSheet", ({ conditions, utility, config: { hash } }) => (options) => {
@@ -2163,21 +2257,21 @@ var getBaseEngine = (conf) => (0, import_lil_fp.pipe)(
   ),
   import_lil_fp.Obj.bind("isValidProperty", ({ properties }) => {
     const propertyMap = new Map(properties.map((prop) => [prop, true]));
-    return (0, import_shared4.memo)((key) => {
+    return (0, import_shared5.memo)((key) => {
       return propertyMap.has(key) || (0, import_is_valid_prop3.isCssProperty)(key);
     });
   })
 );
 
 // src/engines/jsx.ts
-var import_shared5 = require("@pandacss/shared");
+var import_shared6 = require("@pandacss/shared");
 var getJsxEngine = (config) => {
   const { jsxFactory, jsxFramework } = config;
   return {
     factoryName: jsxFactory,
-    upperName: (0, import_shared5.capitalize)(jsxFactory),
-    typeName: `HTML${(0, import_shared5.capitalize)(jsxFactory)}Props`,
-    componentName: `${(0, import_shared5.capitalize)(jsxFactory)}Component`,
+    upperName: (0, import_shared6.capitalize)(jsxFactory),
+    typeName: `HTML${(0, import_shared6.capitalize)(jsxFactory)}Props`,
+    componentName: `${(0, import_shared6.capitalize)(jsxFactory)}Component`,
     framework: jsxFramework
   };
 };
@@ -2200,9 +2294,9 @@ var getPathEngine = ({ cwd, emitPackage, outdir }) => {
 };
 
 // src/engines/pattern.ts
-var import_shared6 = require("@pandacss/shared");
+var import_shared7 = require("@pandacss/shared");
 var import_lil_fp2 = require("lil-fp");
-var helpers2 = { map: import_shared6.mapObject };
+var helpers2 = { map: import_shared7.mapObject };
 var getPatternEngine = (config) => {
   return (0, import_lil_fp2.pipe)(
     { patterns: config.patterns ?? {} },
@@ -2215,11 +2309,11 @@ var getPatternEngine = (config) => {
       };
     }),
     import_lil_fp2.Obj.bind("getNames", ({ getConfig }) => (name) => {
-      const upperName = (0, import_shared6.capitalize)(name);
+      const upperName = (0, import_shared7.capitalize)(name);
       return {
         name,
         upperName,
-        dashName: (0, import_shared6.dashCase)(name),
+        dashName: (0, import_shared7.dashCase)(name),
         styleFnName: `get${upperName}Style`,
         jsxName: getConfig(name)?.jsx ?? upperName
       };
@@ -2235,13 +2329,13 @@ var getPatternEngine = (config) => {
     import_lil_fp2.Obj.bind("nodes", ({ patterns }) => {
       return Object.entries(patterns).map(([name, pattern]) => ({
         type: "pattern",
-        name: pattern.jsx ?? (0, import_shared6.capitalize)(name),
+        name: pattern.jsx ?? (0, import_shared7.capitalize)(name),
         props: Object.keys(pattern.properties),
         baseName: name
       }));
     }),
     import_lil_fp2.Obj.bind("getFnName", ({ nodes }) => (jsx) => {
-      return nodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared6.uncapitalize)(jsx);
+      return nodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared7.uncapitalize)(jsx);
     }),
     import_lil_fp2.Obj.bind("isEmpty", ({ patterns }) => {
       return () => Object.keys(patterns).length === 0;
@@ -2250,7 +2344,7 @@ var getPatternEngine = (config) => {
 };
 
 // src/engines/recipe.ts
-var import_shared7 = require("@pandacss/shared");
+var import_shared8 = require("@pandacss/shared");
 var import_lil_fp3 = require("lil-fp");
 var mergeRegex = (item) => {
   const regex = item.map((item2) => typeof item2 === "string" ? item2 : item2.source).join("|");
@@ -2264,18 +2358,18 @@ var getRecipeEngine = (config) => {
     }),
     import_lil_fp3.Obj.bind("getNames", () => {
       return (name) => ({
-        upperName: (0, import_shared7.capitalize)(name),
-        dashName: (0, import_shared7.dashCase)(name),
-        jsxName: (0, import_shared7.capitalize)(name)
+        upperName: (0, import_shared8.capitalize)(name),
+        dashName: (0, import_shared8.dashCase)(name),
+        jsxName: (0, import_shared8.capitalize)(name)
       });
     }),
     import_lil_fp3.Obj.bind("nodes", ({ recipes }) => {
       return Object.entries(recipes).map(([name, recipe]) => {
-        const jsx = recipe.jsx ?? [(0, import_shared7.capitalize)(name)];
+        const jsx = recipe.jsx ?? [(0, import_shared8.capitalize)(name)];
         const match6 = mergeRegex(jsx);
         return {
           type: "recipe",
-          name: (0, import_shared7.capitalize)(name),
+          name: (0, import_shared8.capitalize)(name),
           props: Object.keys(recipe.variants ?? {}),
           baseName: name,
           jsx,
@@ -2286,7 +2380,7 @@ var getRecipeEngine = (config) => {
     import_lil_fp3.Obj.bind("getFnName", ({ nodes }) => {
       return (jsx) => {
         const recipe = nodes.find((node) => node.match.test(jsx));
-        return recipe?.baseName ?? (0, import_shared7.uncapitalize)(jsx);
+        return recipe?.baseName ?? (0, import_shared8.uncapitalize)(jsx);
       };
     }),
     import_lil_fp3.Obj.bind("splitProps", ({ nodes }) => {
@@ -2294,7 +2388,7 @@ var getRecipeEngine = (config) => {
         const recipe = nodes.find((node) => node.match.test(name));
         if (!recipe)
           return [{}, props];
-        return (0, import_shared7.splitProps)(props, recipe.props);
+        return (0, import_shared8.splitProps)(props, recipe.props);
       };
     }),
     import_lil_fp3.Obj.bind("details", ({ getNames, recipes }) => {

package/dist/index.mjs

@@ -96,8 +96,52 @@ var getMessages = (ctx) => ({
 import { Obj as Obj4, pipe as pipe5 } from "lil-fp";
 
 // src/artifacts/index.ts
+import { isObject } from "@pandacss/shared";
 import outdent25 from "outdent";
 
+// src/artifacts/css/global-css.ts
+var generateGlobalCss = (ctx) => {
+  const { globalCss = {}, optimize = true } = ctx.config;
+  const sheet = ctx.createSheet();
+  sheet.processGlobalCss({
+    ":root": {
+      "--made-with-panda": `'\u{1F43C}'`
+    },
+    "*, *::before, *::after, ::backdrop": {
+      "--blur": "/*!*/ /*!*/",
+      "--brightness": "/*!*/ /*!*/",
+      "--contrast": "/*!*/ /*!*/",
+      "--grayscale": "/*!*/ /*!*/",
+      "--hue-rotate": "/*!*/ /*!*/",
+      "--invert": "/*!*/ /*!*/",
+      "--saturate": "/*!*/ /*!*/",
+      "--sepia": "/*!*/ /*!*/",
+      "--drop-shadow": "/*!*/ /*!*/",
+      "--backdrop-blur": "/*!*/ /*!*/",
+      "--backdrop-brightness": "/*!*/ /*!*/",
+      "--backdrop-contrast": "/*!*/ /*!*/",
+      "--backdrop-grayscale": "/*!*/ /*!*/",
+      "--backdrop-hue-rotate": "/*!*/ /*!*/",
+      "--backdrop-invert": "/*!*/ /*!*/",
+      "--backdrop-opacity": "/*!*/ /*!*/",
+      "--backdrop-saturate": "/*!*/ /*!*/",
+      "--backdrop-sepia": "/*!*/ /*!*/",
+      "--scroll-snap-strictness": "proximity",
+      "--border-spacing-x": 0,
+      "--border-spacing-y": 0,
+      "--translate-x": 0,
+      "--translate-y": 0,
+      "--rotate": 0,
+      "--skew-x": 0,
+      "--skew-y": 0,
+      "--scale-x": 1,
+      "--scale-y": 1
+    }
+  });
+  sheet.processGlobalCss(globalCss);
+  return sheet.toCss({ optimize });
+};
+
 // src/artifacts/css/keyframe-css.ts
 import { toCss } from "@pandacss/core";
 import postcss from "postcss";
@@ -123,104 +167,221 @@ function generateKeyframeCss(ctx) {
 
 // src/artifacts/css/reset-css.ts
 var css = String.raw;
-var reset = css`
-  * {
-    margin: 0;
-    padding: 0;
-    font: inherit;
-  }
+function generateResetCss(scope = "") {
+  const selector = scope ? `${scope} ` : "";
+  return css`
+    @layer reset {
+      ${selector}* {
+        margin: 0;
+        padding: 0;
+        font: inherit;
+      }
 
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-  }
+      ${selector}*,
+      ${selector}*::before,
+      ${selector}*::after {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+      }
 
-  html,
-  body {
-    height: 100%;
-  }
+      ${scope || "html"} {
+        line-height: 1.5;
+        -webkit-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        -webkit-font-smoothing: antialiased;
+        -moz-tab-size: 4;
+        tab-size: 4;
+      }
 
-  body {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-  }
+      ${selector}hr {
+        height: 0;
+        color: inherit;
+        border-top-width: 1px;
+      }
 
-  img {
-    border-style: none;
-  }
+      body {
+        height: 100%;
+        line-height: inherit;
+      }
 
-  img,
-  picture,
-  video,
-  canvas,
-  svg {
-    display: block;
-    max-width: 100%;
-  }
+      ${selector}img {
+        border-style: none;
+      }
 
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    overflow-wrap: break-word;
-  }
+      ${selector}img,
+      ${selector}svg,
+      ${selector}video,
+      ${selector}canvas,
+      ${selector}audio,
+      ${selector}iframe,
+      ${selector}embed,
+      ${selector}object {
+        display: block;
+        vertical-align: middle;
+      }
 
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-    appearance: none;
-  }
+      ${selector}img,
+      ${selector}video {
+        max-width: 100%;
+        height: auto;
+      }
 
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    appearance: none;
-    font: inherit;
-  }
+      ${selector}p,
+      ${selector}h1,
+      ${selector}h2,
+      ${selector}h3,
+      ${selector}h4,
+      ${selector}h5,
+      ${selector}h6 {
+        overflow-wrap: break-word;
+      }
 
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
+      ${selector}ol,
+      ${selector}ul {
+        list-style: none;
+      }
 
-  code,
-  kbd,
-  pre,
-  samp {
-    font-size: 1em;
-  }
+      ${selector}code,
+      ${selector}kbd,
+      ${selector}pre,
+      ${selector}samp {
+        font-size: 1em;
+      }
 
-  table {
-    border-collapse: collapse;
-  }
+      ${selector}button,
+      ${selector}[type='button'],
+      ${selector}[type='reset'],
+      ${selector}[type='submit'] {
+        -webkit-appearance: button;
+        background-color: transparent;
+        background-image: none;
+      }
 
-  textarea {
-    resize: vertical;
-  }
+      ${selector}button,
+      ${selector}select {
+        text-transform: none;
+      }
 
-  sub {
-    bottom: -0.25em;
-  }
+      ${selector}table {
+        text-indent: 0;
+        border-color: inherit;
+        border-collapse: collapse;
+      }
 
-  sup {
-    top: -0.5em;
-  }
+      ${selector}input::placeholder,
+      ${selector}textarea::placeholder {
+        opacity: 1;
+      }
 
-  dialog {
-    padding: 0;
-  }
-`;
-function generateResetCss() {
-  return `@layer reset {
-    ${reset}
-  }`;
+      ${selector}textarea {
+        resize: vertical;
+      }
+
+      ${selector}summary {
+        display: list-item;
+      }
+
+      ${selector}small {
+        font-size: 80%;
+      }
+
+      ${selector}sub,
+      ${selector}sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+      }
+
+      ${selector}sub {
+        bottom: -0.25em;
+      }
+
+      ${selector}sup {
+        top: -0.5em;
+      }
+
+      ${selector}dialog {
+        padding: 0;
+      }
+
+      ${selector}a {
+        color: inherit;
+        text-decoration: inherit;
+      }
+
+      ${selector}abbr:where([title]) {
+        text-decoration: underline dotted;
+      }
+
+      ${selector}b,
+      ${selector}strong {
+        font-weight: bolder;
+      }
+
+      ${selector}code,
+      ${selector}kbd,
+      ${selector}samp,
+      ${selector}pre {
+        font-size: 1em;
+      }
+
+      ${selector}[type='search'] {
+        -webkit-appearance: textfield;
+        outline-offset: -2px;
+      }
+
+      ${selector}::-webkit-search-decoration {
+        -webkit-appearance: none;
+      }
+
+      ${selector}::-webkit-file-upload-button {
+        -webkit-appearance: button;
+      }
+
+      ${selector}::-webkit-inner-spin-button,
+      ${selector}::-webkit-outer-spin-button {
+        height: auto;
+      }
+
+      ${selector}:-moz-ui-invalid {
+        box-shadow: none;
+      }
+
+      ${selector}:-moz-focusring {
+        outline: auto;
+      }
+    }
+  `;
 }
 
+// src/artifacts/css/static-css.ts
+import { getStaticCss } from "@pandacss/core";
+var generateStaticCss = (ctx) => {
+  const { config, createSheet, utility, recipes } = ctx;
+  const { staticCss = {}, theme = {}, optimize = true } = config;
+  const sheet = createSheet();
+  const fn = getStaticCss(staticCss);
+  const results = fn({
+    breakpoints: Object.keys(theme.breakpoints ?? {}),
+    getPropertyKeys: utility.getPropertyKeys,
+    getRecipeKeys: (recipe) => recipes.details.find((detail) => detail.config.name === recipe)?.variantKeyMap ?? {}
+  });
+  results.css.forEach((css2) => {
+    sheet.processAtomic(css2);
+  });
+  results.recipes.forEach((result) => {
+    Object.entries(result).forEach(([name, value]) => {
+      const recipeConfig = recipes.getConfig(name);
+      if (!recipeConfig)
+        return;
+      sheet.processRecipe(recipeConfig, value);
+    });
+  });
+  return sheet.toCss({ optimize });
+};
+
 // src/artifacts/css/token-css.ts
 import { expandNestedCss, extractParentSelectors, prettifyCss, toCss as toCss2 } from "@pandacss/core";
 import postcss2 from "postcss";
@@ -1701,75 +1862,6 @@ function generateTokenTypes(ctx) {
   return outdent24.string(Array.from(set).join("\n\n"));
 }
 
-// src/artifacts/css/global-css.ts
-var generateGlobalCss = (ctx) => {
-  const { globalCss = {}, optimize = true } = ctx.config;
-  const sheet = ctx.createSheet();
-  sheet.processGlobalCss({
-    ":root": {
-      "--made-with-panda": `'\u{1F43C}'`
-    },
-    "*, *::before, *::after, ::backdrop": {
-      "--blur": "/*!*/ /*!*/",
-      "--brightness": "/*!*/ /*!*/",
-      "--contrast": "/*!*/ /*!*/",
-      "--grayscale": "/*!*/ /*!*/",
-      "--hue-rotate": "/*!*/ /*!*/",
-      "--invert": "/*!*/ /*!*/",
-      "--saturate": "/*!*/ /*!*/",
-      "--sepia": "/*!*/ /*!*/",
-      "--drop-shadow": "/*!*/ /*!*/",
-      "--backdrop-blur": "/*!*/ /*!*/",
-      "--backdrop-brightness": "/*!*/ /*!*/",
-      "--backdrop-contrast": "/*!*/ /*!*/",
-      "--backdrop-grayscale": "/*!*/ /*!*/",
-      "--backdrop-hue-rotate": "/*!*/ /*!*/",
-      "--backdrop-invert": "/*!*/ /*!*/",
-      "--backdrop-opacity": "/*!*/ /*!*/",
-      "--backdrop-saturate": "/*!*/ /*!*/",
-      "--backdrop-sepia": "/*!*/ /*!*/",
-      "--scroll-snap-strictness": "proximity",
-      "--border-spacing-x": 0,
-      "--border-spacing-y": 0,
-      "--translate-x": 0,
-      "--translate-y": 0,
-      "--rotate": 0,
-      "--skew-x": 0,
-      "--skew-y": 0,
-      "--scale-x": 1,
-      "--scale-y": 1
-    }
-  });
-  sheet.processGlobalCss(globalCss);
-  return sheet.toCss({ optimize });
-};
-
-// src/artifacts/css/static-css.ts
-import { getStaticCss } from "@pandacss/core";
-var generateStaticCss = (ctx) => {
-  const { config, createSheet, utility, recipes } = ctx;
-  const { staticCss = {}, theme = {}, optimize = true } = config;
-  const sheet = createSheet();
-  const fn = getStaticCss(staticCss);
-  const results = fn({
-    breakpoints: Object.keys(theme.breakpoints ?? {}),
-    getPropertyKeys: utility.getPropertyKeys,
-    getRecipeKeys: (recipe) => recipes.details.find((detail) => detail.config.name === recipe)?.variantKeyMap ?? {}
-  });
-  results.css.forEach((css2) => {
-    sheet.processAtomic(css2);
-  });
-  results.recipes.forEach((result) => {
-    Object.entries(result).forEach(([name, value]) => {
-      const recipeConfig = recipes.getConfig(name);
-      if (!recipeConfig)
-        return;
-      sheet.processRecipe(recipeConfig, value);
-    });
-  });
-  return sheet.toCss({ optimize });
-};
-
 // src/artifacts/index.ts
 function setupHelpers(ctx) {
   const code = generateHelpers();
@@ -1946,9 +2038,11 @@ function setupCssIndex(ctx) {
   };
 }
 function setupResetCss(ctx) {
-  if (!ctx.config.preflight)
+  const { preflight } = ctx.config;
+  if (!preflight)
     return;
-  const code = generateResetCss();
+  const scope = isObject(preflight) ? preflight.scope : void 0;
+  const code = generateResetCss(scope);
   return { files: [{ file: "reset.css", code }] };
 }
 function setupGlobalCss(ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20230523074619",
+  "version": "0.0.0-dev-20230523173112",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,16 +20,16 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.23",
     "ts-pattern": "4.3.0",
-    "@pandacss/core": "0.0.0-dev-20230523074619",
-    "@pandacss/logger": "0.0.0-dev-20230523074619",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230523074619",
-    "@pandacss/shared": "0.0.0-dev-20230523074619",
-    "@pandacss/types": "0.0.0-dev-20230523074619",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230523074619"
+    "@pandacss/core": "0.0.0-dev-20230523173112",
+    "@pandacss/logger": "0.0.0-dev-20230523173112",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230523173112",
+    "@pandacss/shared": "0.0.0-dev-20230523173112",
+    "@pandacss/types": "0.0.0-dev-20230523173112",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230523173112"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.29",
-    "@pandacss/fixture": "0.0.0-dev-20230523074619"
+    "@pandacss/fixture": "0.0.0-dev-20230523173112"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",