hotfix: extractCSS error in dev mode

[clarkdo]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

Fix #4885.
Related #4888

As a hotfix, we've already disabled extractCSS in dev mode, this ps is a better fix for solving the root error, but for stability, we may test more and discuss about if there is any value for enabling extractCSS in dev/HMR mode

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[manniL]

@clarkdo do you know why we can't use plugins.push here?

[pi0]

It was a legacy issue 😆 I think it is now even safe to use rest operator.

[clarkdo]

@manniL No special reason, it's old code, I didn't notice it

[clarkdo]

I'll update it

[codecov-io]

Codecov Report

Merging #4892 into dev will decrease coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##              dev    #4892      +/-   ##
==========================================
- Coverage   91.89%   91.89%   -0.01%     
==========================================
  Files          72       72              
  Lines        2407     2406       -1     
  Branches      594      593       -1     
==========================================
- Hits         2212     2211       -1     
  Misses        177      177              
  Partials       18       18

Impacted Files	Coverage Δ
packages/config/src/options.js	100% <ø> (ø)	⬆️
packages/webpack/src/config/base.js	95.45% <100%> (+0.05%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 928a230...0b2b8d9. Read the comment docs.

[clarkdo]

@pi0 @manniL How do you think below code ? I think it's less readable and not perform as good as push.

  plugins() {
    return [
      ...(this.options.dev ? new TimeFixPlugin() : []),
      ...this.options.build.extractCSS
        ? new ExtractCssChunksPlugin(Object.assign({
          filename: this.getFileName('css'),
          chunkFilename: this.getFileName('css'),
          // TODO: https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues/132
          reloadAll: true
        }, this.options.build.extractCSS))
        : [],
      new VueLoader.VueLoaderPlugin(),
      ...(this.options.build.plugins || []),
      // Hide warnings about plugins without a default export (#1179)
      new WarnFixPlugin(),
      new WebpackBar({
        name: this.name,
        color: this.colors[this.name],
        reporters: [
          'basic',
          'fancy',
          'profile',
          'stats'
        ],
        basic: !this.options.build.quiet && env.minimalCLI,
        fancy: !this.options.build.quiet && !env.minimalCLI,
        profile: !this.options.build.quiet && this.options.build.profile,
        stats: !this.options.build.quiet && !this.options.dev && this.options.build.stats,
        reporter: {
          change: (_, { shortPath }) => {
            if (!this.isServer) {
              this.nuxt.callHook('bundler:change', shortPath)
            }
          },
          done: (context) => {
            if (context.hasErrors) {
              this.nuxt.callHook('bundler:error')
            }
          },
          allDone: () => {
            this.nuxt.callHook('bundler:done')
          }
        }
      }),
      ...this.options.build.hardSource
        ? new HardSourcePlugin(Object.assign({}, this.options.build.hardSource))
        : []
    ]
  }

[pi0]

@clarkdo Yeah. Hard to read and maintain. Current push should be better.

[manniL]

Agree with @pi0 ☺️