fix: duplicate style in extractCSS (#4546)

[skip ci]

packages/webpack/src/utils/style-loader.js

@@ -1,5 +1,5 @@
 import path from 'path'
-import ExtractCssChunks from 'extract-css-chunks-webpack-plugin'
+import ExtractCssChunksPlugin from 'extract-css-chunks-webpack-plugin'
 
 import { wrapArray } from '@nuxt/common'
 
@@ -27,6 +27,10 @@ export default class StyleLoader {
     }
   }
 
+  get exportOnlyLocals() {
+    return Boolean(this.isServer && this.extractCSS)
+  }
+
   normalize(loaders) {
     loaders = wrapArray(loaders)
     return loaders.map(loader => (typeof loader === 'string' ? { loader } : loader))
@@ -64,32 +68,25 @@ export default class StyleLoader {
   }
 
   css(options) {
-    if (this.isServer && this.extractCSS) {
-      options.exportOnlyLocals = true
-    }
-    return {
-      loader: 'css-loader',
-      options
-    }
+    options.exportOnlyLocals = this.exportOnlyLocals
+    return [
+      ...options.exportOnlyLocals ? [] : [this.styleLoader()],
+      { loader: 'css-loader', options }
+    ]
   }
 
   cssModules(options) {
-    options.modules = true
-    return {
-      loader: 'css-loader',
-      options
-    }
+    return this.css(Object.assign(options, { modules: true }))
   }
 
   extract() {
-    if (this.extractCSS && !this.isServer) {
-      return ExtractCssChunks.loader
+    if (this.extractCSS) {
+      return ExtractCssChunksPlugin.loader
     }
   }
 
-  vueStyle() {
-    // https://github.com/vuejs/vue-style-loader
-    return {
+  styleLoader() {
+    return this.extract() || {
       loader: 'vue-style-loader',
       options: this.loaders.vueStyle
     }
@@ -104,14 +101,11 @@ export default class StyleLoader {
 
     this.loaders.css.importLoaders = this.loaders.cssModules.importLoaders = customLoaders.length
 
-    const styleLoader = this.extract() || this.vueStyle()
-
     return [
       // This matches <style module>
       {
         resourceQuery: /module/,
         use: this.perfLoader.css().concat(
-          styleLoader,
           this.cssModules(this.loaders.cssModules),
           customLoaders
         )
@@ -119,7 +113,6 @@ export default class StyleLoader {
       // This matches plain <style> or <style scoped>
       {
         use: this.perfLoader.css().concat(
-          styleLoader,
           this.css(this.loaders.css),
           customLoaders
         )

test/unit/extract-css.test.js

@@ -14,7 +14,7 @@ describe('extract css', () => {
     await nuxt.server.listen(await getPort(), '0.0.0.0')
   })
 
-  test.skip('Verify global.css has been extracted and minified', async () => {
+  test('Verify global.css has been extracted and minified', async () => {
     const fileName = isWindows ? 'pages_index.css' : 'pages/index.css'
     const extractedIndexCss = resolve(__dirname, '..', 'fixtures/extract-css/.nuxt/dist/client', fileName)
     const content = await readFile(extractedIndexCss, 'utf-8')
@@ -29,5 +29,7 @@ describe('extract css', () => {
   test('/about should contain module style', async () => {
     const { html } = await nuxt.server.renderRoute('/about')
     expect(html).toMatch(/<h1 class="test_[a-zA-Z0-9]{5}">\s*I'm BLUE\s*<\/h1>/)
+    // no duplicate inlined style
+    expect(html).not.toContain('{color:#00f}')
   })
 })