Remove unused variables from output

[iscekic]

Hello! Is there a way to remove unused css variables from the output?

The docs recommend using purgecss, but I've had little luck getting it to output anything useful.

For context: I'm not using any of the colors that come bundled with panda, yet they're all still there in the output. Keyframes too, as well as sizing/spacing tokens I'm not using anywhere.

[astahmer]

you can use hooks for this

import { defineConfig } from '@pandacss/dev'
import { removeUnusedCssVars } from './remove-unused-css-vars'
import { removeUnusedKeyframes } from './remove-unused-keyframes'

export default defineConfig({
  // ...
  hooks: {
    'cssgen:done': ({ artifact, content }) => {
      if (artifact === 'styles.css') {
        return removeUnusedCssVars(removeUnusedKeyframes(content))
      }
    },
  }
}

https://github.com/chakra-ui/panda/blob/6b829cab35767e2d2552e105344c8b01e0ee13ce/sandbox/vite-ts/remove-unused-css-vars.ts
https://github.com/chakra-ui/panda/blob/6b829cab35767e2d2552e105344c8b01e0ee13ce/sandbox/vite-ts/remove-unused-keyframes.ts

note that using this means you can't use the JS function token.var (or token(xxx) where xxx is the path to a semanticToken) from styled-system/tokens as the CSS variables will be removed based on the usage found in the generated CSS

[iscekic]

This worked, thanks! Any plans on making it an official setting?

[astahmer]

maybe not an official setting but I think this could be worth adding this as a copy/pastable snippet in the docs !

[iscekic]

Perhaps exposing the two files you linked as exports would be a nice middle ground, so they can easily be kept up to date as versions are released. 😄

[anubra266]

@iscekic https://panda-css.com/docs/concepts/hooks#remove-unused-variables-from-final-css