PurgeCSS does not remove unused variables

[talovski]

Hi! I am having a problem with purgecss. I want to remove unused CSS custom properties for the smaller bundle size. I am using Next.js, and have this PostCSS config:

module.exports = {
  plugins: [
    require('@pandacss/dev/postcss'),
    process.env.NODE_ENV === 'production' 
      ? require('@fullhuman/postcss-purgecss')({
        // Specify the paths to all of the template files
        content: ['./src/**/*.tsx'],
        sources: ['./**/*.css'],
        variables: true
      })
      : undefined

  ]
}

But after building the app and running pnpm start, all css variables are still there. Have anyone else tried to do this? What am I doing wrong?

UPD. After fixing the structure of PostCSS config, all styled are deleted, even those I applied. E.g. when setting css({ backgroundColor: 'amber.400' )}, the custom properties for amber-400 is still removed and styles are not applied. Is there a way to only remove unused ones?

Updated PostCSS config which purges all styles:

module.exports = {
  plugins: [
    "@pandacss/dev/postcss",
    [
      "@fullhuman/postcss-purgecss",
      process.env.NODE_ENV === "production"
        ? {
            // Specify the paths to all of the template files
            content: ["./src/**/*.tsx"],
            sources: ["./styled-system/**/*.css"],
            variables: true,
          }
        : undefined,
    ],
  ],
};

[well1791]

this is important, it should be put somewhere in panda docs 👀

[well1791]

Maybe I'm missing something but, this is what I get after trying your config

module.exports = {
  plugins: [
    '@pandacss/dev/postcss',
    [
      '@fullhuman/postcss-purgecss',
      process.env.NODE_ENV === 'production'
        ? {
            // Specify the paths to all of the template files
            content: ['./app/**/*.tsx'],
            sources: ['./app/**/*.css'],
            variables: true,
          }
        : undefined,
    ],
  ],
}

This is what I get

// Error: Malformed PostCSS Configuration at Array.forEach (<anonymous>)

Perhaps, would you mind to explain why yours works? Also, I don't get why the maintainers use an example like this

module.exports = {
  plugins: {
    '@pandacss/dev/postcss' : {},

instead of making it as an array? come on it's not that hard to provide an example that is reutilizable