Make out-of-the-box setup more minimal

[Temzasse]

Description

The out of the box setup for Panda CSS includes both @pandacss/preset-base and @pandacss/preset-panda which by default adds a large number of utilities and patterns to the config. These utilities and patterns are nice and useful but they can be a bit opinionated and cause bloat in projects where we want to control what is exposed by the generated styled system. The out-of-the-box setup should be more minimal.

Problem Statement/Justification

Non-standard CSS properties (like px, mt) via utilities should be opt-in so that developers can knowingly choose to use them.

Also having as little utilities, patterns, conditions, etc in the out-of-the-box setup would help reduce the JS bundle size as well.

Proposed Solution or API

My proposed solution is that the @pandacss/preset-base preset would only contain utilities that simply enhance standard CSS properties like padding and margin with theme token values. All other utilities, patterns, conditions, etc. would be provided by other presets and they would have to be opt-in.

The base preset could be split into multiple presets like:

• @pandacss/preset-shorthands
• @pandacss/preset-conditions
• @pandacss/preset-patterns

Alternatives

It is possible to minimise the amount of baked-in utilities and patterns by adding eject: true to the config but this however will remove the utilities that simply map properties to theme tokens, such as padding, margin, etc, so adding styles like css({ padding: '$small' }) would not work anymore.

We could remove the unwanted utilities from the preset with something like this:

import basePreset from '@pandacss/preset-base';

const tokenKeys = ['colors', 'spacing', 'sizes', 'radii', 'shadows'];

// Don't include non-standard CSS properties like `px: 10` or `mt: 10`.
// We only want to include utilities that help us map theme tokens to CSS properties
// like `padding: '$large'` or `borderRadius: '$small'`.
const utilities = Object.entries(basePreset.utilities).reduce<UtilityConfig>(
  (acc, [key, value]) => {
    if (
      tokenKeys.includes(value?.values as any) &&
      !value?.property &&
      !value?.transform
    ) {
      acc[key] = {
        className: value?.className,
        values: value?.values,
      };
    }

    return acc;
  },
  {}
);

and then pass those utilities to the config definition but that feels a bit hacky.

Additional Information

No response

[astahmer]

Non-standard CSS properties (like px, mt) via utilities should be opt-in so that developers can knowingly choose to use them.

you can use shorthands: false for that in your panda.config
I thought it was documented but couldn't find it, it would be nice to add it

[Temzasse]

Okay good to know 👍🏻 Would it make sense to have the default value for shorthands be false?

[anubra266]

@Temzasse coming from the chakra community, most people expect the shorthands by default