Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-30 09:27:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: duplicate style in extractCSS (#4546)

Browse Source 
[skip ci]
This commit is contained in:
Xin Du (Clark) 2018-12-13 18:37:47 +00:00 committed by Pooya Parsa
parent 5b7410dc48
commit d0c8fcbaa5
2 changed files with 18 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/webpack/src/utils/style-loader.js
View File

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

4
test/unit/extract-css.test.js
View File

@ -14,7 +14,7 @@ describe('extract css', () => {
await nuxt.server.listen(await getPort(), '0.0.0.0') 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 fileName = isWindows ? 'pages_index.css' : 'pages/index.css'
const extractedIndexCss = resolve(__dirname, '..', 'fixtures/extract-css/.nuxt/dist/client', fileName) const extractedIndexCss = resolve(__dirname, '..', 'fixtures/extract-css/.nuxt/dist/client', fileName)
const content = await readFile(extractedIndexCss, 'utf-8') const content = await readFile(extractedIndexCss, 'utf-8')
@ -29,5 +29,7 @@ describe('extract css', () => {
test('/about should contain module style', async () => { test('/about should contain module style', async () => {
const { html } = await nuxt.server.renderRoute('/about') const { html } = await nuxt.server.renderRoute('/about')
expect(html).toMatch(/<h1 class="test_[a-zA-Z0-9]{5}">\s*I'm BLUE\s*<\/h1>/) 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}')
}) })
}) })