Support for specifying plugins in Array

[tooppoo]

Problem

I got a build error when using the followings.

• nuxt@v2.15.7
• @nuxt/postcss8@v1.1.3

The error is as follows.

╭───────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                               │
│   ✖ Nuxt Fatal Error                                                                          │
│                                                                                               │
│   Error: Cannot find module '0'                                                               │
│   Require stack:                                                                              │
│   - /Users/path/to/app/node_modules/@nuxt/core/dist/core.js                                   │
│                                                                                               │
╰───────────────────────────────────────────────────────────────────────────────────────────────╯

Cause

In my nuxt.config.js, I was specifying build.postcss.plugins as an array. On the other hand, @nuxt/postcss8 uses object as value of build.postcss.plugins.

My nuxt.config.js is like the following.

import path from 'path'
// (...)
export default {
  // (...)
  build: {
    postcss: {
      plugins: [
        'plugin-a',
        'plugin-b'
      ]
    }
  }
}

@nuxt/postcss8 uses defu to merge the settings. When defu merges an object against an array, it uses the array index as the object's key.

Thus, defu would build build.postcss.plugins like the following.

{
  build: {
    postcss: {
      plugins: {
        '0': { /* option for plugin-a */ },
        '1': { /* option for plugin-b */ },
        'autoprefixer': {}
      }
    }
  }
}

You can reproduce this by checking out https://github.com/nuxt/postcss8/commit/a57775a48f7d79b2f05bb9e492133492c66cf114 and then running yarn dev.

Solution

Select the format corresponding to build.postcss.plugins as defined in nuxt.config.js. If build.postcss.plugins is an array, use array format, if it is an object, use object format to merge (https://github.com/nuxt/postcss8/commit/06f3bee61136d02e1271ac74fac6f2804328cc52).

Test

• yarn test
• yarn dev
• yarn dev:legacy

Notes.

• I wanted to easily check the results before and after the modification, so we added an automated test using Jest.
  • When import src/index.ts and run the test, TypeError: defu_1.default is not a function gotten.
  • Therefore, build it once and then import dist/index.js in the test.
• Added dev:legacy because we wanted to check the behavior with two different nuxt.config.js.
• Since the postcss-loader deprecates the object format, I named the configuration using the object format as legacy.