How to integrate pandacss + nexts + purgecss?

[well1791]

I see the documentation on postcss is

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

but (my lack of knowlege on postcss), I don't get how I'm supposed to mix an object plugins: { with an array plugins: [ ??

module.exports = {
  plugins: [
    { '@pandacss/dev/postcss': {} }, // <- is this right? 'cause I'm getting tons of errors and I'm running out of ideas
    [
      '@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,
    ],
  ],
}

Just so you know, I'm trying to produce a production ready app using nextjs but, after running npm run build && npm run start the site is empty of styles (absurd right?) and there's no information in the docs nor anywhere else that explains:

1. how to make it possible?
2. why could it be the problem?
   thanks in advance for any help

[anubra266]

Array Syntax:

In this approach, you list the plugin names as strings in an array within your PostCSS configuration file (postcss.config.js). You can use this syntax if you don't need to configure individual plugin options.

// postcss.config.js

module.exports = {
  plugins: [
    require('@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,
    ],
  ],
};

Object Syntax:

In this approach, you define each plugin as an object with its name and specific options if needed. This syntax allows for more detailed configuration of individual plugins.

// postcss.config.js

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {
      // Panda options here if you want to configure any
    },
    '@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,
  },
};

Plugin Arrays with Object Syntax:

You can also use a combination of both array and object syntax if you have multiple plugins but want to configure some of them with object syntax.

// postcss.config.js

module.exports = {
  plugins: [
    // Use array syntax for simple plugins
    '@pandacss/dev/postcss',
    // Use object syntax for more complex plugins
    {
      '@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,
    },
  ],
};