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
This commit is contained in:
Clark Du 2018-10-11 22:53:02 +01:00 committed by GitHub
parent 90db0aded8
commit 521c3778bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 6 deletions

View File

@ -65,7 +65,10 @@ export default class StyleLoader {
cssModules(options) { cssModules(options) {
options.modules = true options.modules = true
return this.css(options) return {
loader: 'css-loader',
options
}
} }
extract() { extract() {

View File

@ -12,6 +12,11 @@ export default {
grid: true grid: true
} }
} }
},
filenames: {
css: () => {
return '[name].css'
}
} }
}, },
css: [ css: [

View File

@ -0,0 +1,11 @@
<template>
<div>
<h1 :class="$style.test">I'm BLUE</h1>
</div>
</template>
<style module>
.test {
color: blue;
}
</style>

View File

@ -1,15 +1,33 @@
import { resolve } from 'path' import { resolve } from 'path'
import fs from 'fs' import fs from 'fs'
import { promisify } from 'util' import { promisify } from 'util'
import { loadFixture, getPort, Nuxt } from '../utils'
let nuxt = null
const readFile = promisify(fs.readFile) const readFile = promisify(fs.readFile)
const isWindows = /^win/.test(process.platform)
describe('extract css', () => { 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 () => { test('Verify global.css has been extracted and minified', async () => {
const pathToMinifiedGlobalCss = resolve(__dirname, '..', 'fixtures/extract-css/.nuxt/dist/client/7dc53e76acc7df734a24.css') const fileName = isWindows ? 'pages_index.css' : 'pages/index.css'
const content = await readFile(pathToMinifiedGlobalCss, 'utf-8') const extractedIndexCss = resolve(__dirname, '..', 'fixtures/extract-css/.nuxt/dist/client', fileName)
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}' const content = await readFile(extractedIndexCss, 'utf-8')
expect(content).toBe(expectedContent)
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>/)
}) })
}) })