From 521c3778bdb136d79602bacb54ee95791eee1a18 Mon Sep 17 00:00:00 2001
From: Clark Du <clark.duxin@gmail.com>
Date: Thu, 11 Oct 2018 22:53:02 +0100
Subject: [PATCH] fix: style module with extractCSS not work well (#4093)

* fix: style module with extractCSS not work well

* test: improve extract css test

* fix: exract css name
---
 lib/builder/webpack/utils/style-loader.js |  5 +++-
 test/fixtures/extract-css/nuxt.config.js  |  5 ++++
 test/fixtures/extract-css/pages/about.vue | 11 +++++++++
 test/unit/extract-css.test.js             | 28 +++++++++++++++++++----
 4 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 test/fixtures/extract-css/pages/about.vue

diff --git a/lib/builder/webpack/utils/style-loader.js b/lib/builder/webpack/utils/style-loader.js
index 01075afd16..b93bd91bb5 100644
--- a/lib/builder/webpack/utils/style-loader.js
+++ b/lib/builder/webpack/utils/style-loader.js
@@ -65,7 +65,10 @@ export default class StyleLoader {
 
   cssModules(options) {
     options.modules = true
-    return this.css(options)
+    return {
+      loader: 'css-loader',
+      options
+    }
   }
 
   extract() {
diff --git a/test/fixtures/extract-css/nuxt.config.js b/test/fixtures/extract-css/nuxt.config.js
index cda0a5b6a2..beccdb1a79 100644
--- a/test/fixtures/extract-css/nuxt.config.js
+++ b/test/fixtures/extract-css/nuxt.config.js
@@ -12,6 +12,11 @@ export default {
           grid: true
         }
       }
+    },
+    filenames: {
+      css: () => {
+        return '[name].css'
+      }
     }
   },
   css: [
diff --git a/test/fixtures/extract-css/pages/about.vue b/test/fixtures/extract-css/pages/about.vue
new file mode 100644
index 0000000000..41d5edb585
--- /dev/null
+++ b/test/fixtures/extract-css/pages/about.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1 :class="$style.test">I'm BLUE</h1>
+  </div>
+</template>
+
+<style module>
+  .test {
+    color: blue;
+  }
+</style>
diff --git a/test/unit/extract-css.test.js b/test/unit/extract-css.test.js
index 74a5a30f16..99e73ef3d2 100644
--- a/test/unit/extract-css.test.js
+++ b/test/unit/extract-css.test.js
@@ -1,15 +1,33 @@
 import { resolve } from 'path'
 import fs from 'fs'
 import { promisify } from 'util'
+import { loadFixture, getPort, Nuxt } from '../utils'
 
+let nuxt = null
 const readFile = promisify(fs.readFile)
+const isWindows = /^win/.test(process.platform)
 
 describe('extract css', () => {
-  // TODO: make css chunk name predictive
+  beforeAll(async () => {
+    const options = await loadFixture('extract-css')
+    nuxt = new Nuxt(options)
+    await nuxt.listen(await getPort(), '0.0.0.0')
+  })
+
   test('Verify global.css has been extracted and minified', async () => {
-    const pathToMinifiedGlobalCss = resolve(__dirname, '..', 'fixtures/extract-css/.nuxt/dist/client/7dc53e76acc7df734a24.css')
-    const content = await readFile(pathToMinifiedGlobalCss, 'utf-8')
-    const expectedContent = 'h1[data-v-180e2718]{color:red}.container[data-v-180e2718]{display:-ms-grid;display:grid;-ms-grid-columns:60px 60px 60px 60px 60px;grid-template-columns:60px 60px 60px 60px 60px;-ms-grid-rows:30px 30px;grid-template-rows:30px 30px;grid-auto-flow:row}'
-    expect(content).toBe(expectedContent)
+    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')
+
+    const scopeCss = /^h1\[data-v-[a-zA-Z0-9]{8}\]\{color:red\}\.container\[data-v-[a-zA-Z0-9]{8}\]/
+    expect(content).toMatch(scopeCss)
+
+    const containerStyle = '{display:-ms-grid;display:grid;-ms-grid-columns:60px 60px 60px 60px 60px;grid-template-columns:60px 60px 60px 60px 60px;-ms-grid-rows:30px 30px;grid-template-rows:30px 30px;grid-auto-flow:row}'
+    expect(content).toContain(containerStyle)
+  })
+
+  test('/about should contain module style', async () => {
+    const { html } = await nuxt.renderRoute('/about')
+    expect(html).toMatch(/<h1 class="test_[a-zA-Z0-9]{5}">I'm BLUE<\/h1>/)
   })
 })