Ability to override or extend preflight styles in config

[storchk]

Description

Please add the ability to override, extend, or exclude specific styles within the preflight configuration option in panda.config.ts, rather than it being limited to a boolean or scope configuration.

Problem Statement/Justification

Currently, the preflight option is effectively "all-or-nothing." While it supports scoping, it does not allow granular control over the generated reset styles.

Proposed Solution or API

If a developer needs to modify the default preflight (e.g., to preserve default list styles, change the default border color, or opt-out of specific element resets), the current workflows are suboptimal:

1. Overriding in globalCss: This requires writing additional CSS to undo the reset, which increases bundle size and splits "base" logic across two places.
2. Disabling preflight: The developer must set preflight: false and manually copy/paste the entire Panda reset into globalCss just to change a few lines. This creates a maintenance burden as the project no longer benefits from upstream updates to Panda's preflight.

Introducing a configuration API such as preflight: { extend: { ... } } or preflight: { exclude: [...] } would allow for a cleaner, type-safe, and more maintainable way to handle base style customizations directly within the Panda configuration ecosystem.

Alternatives

No response

Additional Information

No response

[storchk]

@segunadebayo Anything i can do here?

[segunadebayo]

You can do this today with globalCss — just override the specific reset rules you want to change:

export default defineConfig({
  preflight: true,
  globalCss: {
    'ul, ol': { listStyle: 'revert' },
    '*, *::before, *::after': { borderColor: 'gray.200' },
  },
})

For more control, you can use the config:resolved hook to modify the preflight before it's processed:

export default defineConfig({
  preflight: true,
  hooks: {
    'config:resolved': ({ config }) => {
      config.globalCss = {
        ...config.globalCss,
        'ul, ol': { listStyle: 'revert' },
      }
      return config
    },
  },
})

Both approaches keep preflight enabled so you get upstream updates, while only changing the parts you need.