How to reduce the amount of CSS classes generated?

[lucgagan]

If you look at the HTML source code of https://ray.run/glossary (here is pretty-printed output), you will see that there are huge blocks of repeating HTML due to complex class="" definitions, e.g.

<div class="kSmiQp fPSBzf jTtfko legDhJ" role="radiogroup">
  <button aria-checked="false" aria-label="Love it" role="radio" class="kXpsPe kSmiQp kFYpif bbYXSC bZRhvx fPSBzf fNCPnf legDhJ AxjtB AxjtU fNCPmM">
    <img src="/_next/static/media/love-it.62918ba9.svg" />
  </button>
  <button aria-checked="false" aria-label="Okay" role="radio" class="kXpsPe kSmiQp kFYpif bbYXSC bZRhvx fPSBzf fNCPnf legDhJ AxjtB AxjtU fNCPmM">
    <img src="/_next/static/media/okay.e602dbdc.svg" />
  </button>
  <button aria-checked="false" aria-label="Not great" role="radio" class="kXpsPe kSmiQp kFYpif bbYXSC bZRhvx fPSBzf fNCPnf legDhJ AxjtB AxjtU fNCPmM">
    <img src="/_next/static/media/not-great.3c51917a.svg" />
  </button>
  <button aria-checked="false" aria-label="Hate it" role="radio" class="kXpsPe kSmiQp kFYpif bbYXSC bZRhvx fPSBzf fNCPnf legDhJ AxjtB AxjtU fNCPmM">
    <img src="/_next/static/media/hate-it.98359a11.svg" />
  </button>
</div>

about 20% of this output is class="" definition. Meanwhile, the actual component is very simple:

  base: {
    _hover: {
      '& img': {
        transform: 'scale(1.2)',
      },
    },
    alignItems: 'center',
    background: 'none',
    border: 'none',
    cursor: 'pointer',
    display: 'flex',
    height: '21px',
    justifyContent: 'center',
    margin: '0',
    padding: '0',
    width: '21px',
  },
  variants: {
    active: {
      true: {
        '& img': {
          transform: 'scale(1.2)',
        },
      },
    },
  },
});

If you look at the entire document, just class names account for almost 50KB. That's a lot.

What are strategies to reduce repeating class name references?

[astahmer]

you could use Config Recipes if you want to scope CSS rules under 1 className

that said, having a lot of repetition with class names is the desired outcome of using atomic CSS like Panda, as it compresses very well with gzip, I'm pretty sure if you check the gzipped size this is not going to be an issue

[lilouartz]

Looks like there are a few configs that are worth trying from https://panda-css.com/docs/references/config

• optimize
• minify
• hash

On my page that lists many supplements (https://pillser.com/brands/21st-century) this reduced HTML size (compressed with brotli) from 869KB to 792KB.

[astahmer]

optimize is mostly a legacy option, it's already enabled by default, we'll most likely remove it in v1
minify/hash can indeed help

maybe removing unused CSS variables can help as well if you have a lot of tokens (for example when using an external preset)
https://panda-css.com/docs/concepts/hooks#remove-unused-variables-from-final-css