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?