Difference between require VS empty object ({}) on plugin definitions PostCSS config JS file?

Question

Somewhat of a straightforward question that doesn't seem to have very clear answer in the PostCSS docs. I noticed that in the PostCSS Usage Guide they define the postcss.config.js file plugins using require statements like so:

// postcss.config.js
module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer')
  ]
}

However, other PostCSS examples such as from the PostCSS CLI docs explaining the function form of postcss.config.js, they use a different syntax for plugins

module.exports = (ctx) => ({
  map: ctx.options.map,
  parser: ctx.options.parser,
  plugins: {
    'postcss-import': { root: ctx.file.dirname },
    cssnano: ctx.env === 'production' ? {} : false,
  },
})

And there are other online tutorials as well following this syntax

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-preset-env": {}
  }
};

I guess my question is.... Why are plugins defined using an array of require('<name>') in one place, and using a keyed object using empty objects as values {} in another? Are there any functional differences? Is one better than the other?

Answer 1

it's old and new syntax

(for backward compatibility works both)

Recommended is the string one, with options in the brackets.

For example Next.js docs says:

Do not use require() to import the PostCSS Plugins. Plugins must be provided as strings.