From d252493d4180f31a0b699dc7572d1549880e51df Mon Sep 17 00:00:00 2001 From: Karolis2011 Date: Tue, 31 Jul 2018 12:47:03 +0300 Subject: [PATCH 1/2] add(cli-service): add css.alwaysExtract config option --- docs/config/README.md | 7 +++++++ packages/@vue/cli-service/__tests__/css.spec.js | 13 +++++++++++++ packages/@vue/cli-service/lib/config/css.js | 3 ++- packages/@vue/cli-service/lib/options.js | 1 + 4 files changed, 23 insertions(+), 1 deletion(-) diff --git a/docs/config/README.md b/docs/config/README.md index e43f784478..9343b33754 100644 --- a/docs/config/README.md +++ b/docs/config/README.md @@ -209,6 +209,13 @@ module.exports = { Extracting CSS is always disabled in `development` since it breaks Hot Module Replacement. +### css.alwaysExtract + +- Type: `boolean` +- Default: `false` + + Overrides `css.extract` and other checks determining if CSS should be extracted in to standalone file. + ### css.sourceMap - Type: `boolean` diff --git a/packages/@vue/cli-service/__tests__/css.spec.js b/packages/@vue/cli-service/__tests__/css.spec.js index 99772cd485..af0707ff0d 100644 --- a/packages/@vue/cli-service/__tests__/css.spec.js +++ b/packages/@vue/cli-service/__tests__/css.spec.js @@ -113,6 +113,19 @@ test('css.extract', () => { }) }) +test('css.alwaysExtract', () => { + const config = genConfig({ + vue: { + css: { + alwaysExtract: true + } + } + }, 'development') + LANGS.forEach(lang => { + expect(findLoaders(config, lang)).toContain(extractLoaderPath) + }) +}) + test('css.sourceMap', () => { const config = genConfig({ postcss: {}, diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index 1a5e8393b4..4f21862e24 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/packages/@vue/cli-service/lib/config/css.js @@ -16,13 +16,14 @@ module.exports = (api, options) => { const { modules = false, extract = true, + alwaysExtract = false, sourceMap = false, loaderOptions = {} } = options.css || {} const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE const isProd = process.env.NODE_ENV === 'production' - const shouldExtract = isProd && extract !== false && !shadowMode + const shouldExtract = (isProd && extract !== false && !shadowMode) || alwaysExtract const filename = getAssetPath( options, `css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css`, diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js index 512dd61672..9d8c8b6629 100644 --- a/packages/@vue/cli-service/lib/options.js +++ b/packages/@vue/cli-service/lib/options.js @@ -18,6 +18,7 @@ const schema = createSchema(joi => joi.object({ css: joi.object({ modules: joi.boolean(), extract: joi.alternatives().try(joi.boolean(), joi.object()), + alwaysExtract: joi.boolean(), sourceMap: joi.boolean(), loaderOptions: joi.object({ css: joi.object(), From c8f412b0d34c776fdb9f430ae343cb7ae0c11051 Mon Sep 17 00:00:00 2001 From: Karolis2011 Date: Tue, 31 Jul 2018 16:03:56 +0300 Subject: [PATCH 2/2] feat(cli-service): makes css.extract to always extract on true. --- docs/config/README.md | 13 +++---------- packages/@vue/cli-service/__tests__/css.spec.js | 6 +++--- packages/@vue/cli-service/lib/config/css.js | 5 ++--- packages/@vue/cli-service/lib/options.js | 3 +-- 4 files changed, 9 insertions(+), 18 deletions(-) diff --git a/docs/config/README.md b/docs/config/README.md index 9343b33754..460ec6dd36 100644 --- a/docs/config/README.md +++ b/docs/config/README.md @@ -198,8 +198,8 @@ module.exports = { ### css.extract -- Type: `boolean` -- Default: `true` (in production mode, always `false` otherwise) +- Type: `boolean | string` +- Default: `'production'` Whether to extract CSS in your components into a standalone CSS files (instead of inlined in JavaScript and injected dynamically). @@ -207,14 +207,7 @@ module.exports = { When building as a library, you can also set this to `false` to avoid your users having to import the CSS themselves. - Extracting CSS is always disabled in `development` since it breaks Hot Module Replacement. - -### css.alwaysExtract - -- Type: `boolean` -- Default: `false` - - Overrides `css.extract` and other checks determining if CSS should be extracted in to standalone file. + Extracting CSS is disabled by default in `development` since it breaks Hot Module Replacement, can be enabled by setting this to `true`. ### css.sourceMap diff --git a/packages/@vue/cli-service/__tests__/css.spec.js b/packages/@vue/cli-service/__tests__/css.spec.js index af0707ff0d..270d3e11a4 100644 --- a/packages/@vue/cli-service/__tests__/css.spec.js +++ b/packages/@vue/cli-service/__tests__/css.spec.js @@ -113,16 +113,16 @@ test('css.extract', () => { }) }) -test('css.alwaysExtract', () => { +test('css.extract when development', () => { const config = genConfig({ vue: { css: { - alwaysExtract: true + extract: 'production' } } }, 'development') LANGS.forEach(lang => { - expect(findLoaders(config, lang)).toContain(extractLoaderPath) + expect(findLoaders(config, lang)).not.toContain(extractLoaderPath) }) }) diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index 4f21862e24..0a0f6adb15 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/packages/@vue/cli-service/lib/config/css.js @@ -15,15 +15,14 @@ module.exports = (api, options) => { const { modules = false, - extract = true, - alwaysExtract = false, + extract = 'production', sourceMap = false, loaderOptions = {} } = options.css || {} const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE const isProd = process.env.NODE_ENV === 'production' - const shouldExtract = (isProd && extract !== false && !shadowMode) || alwaysExtract + const shouldExtract = ((!isProd && extract === true) || (isProd && (extract === true || extract === 'production'))) && !shadowMode const filename = getAssetPath( options, `css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css`, diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js index 9d8c8b6629..ecdd5862ba 100644 --- a/packages/@vue/cli-service/lib/options.js +++ b/packages/@vue/cli-service/lib/options.js @@ -17,8 +17,7 @@ const schema = createSchema(joi => joi.object({ // css css: joi.object({ modules: joi.boolean(), - extract: joi.alternatives().try(joi.boolean(), joi.object()), - alwaysExtract: joi.boolean(), + extract: joi.alternatives().try(joi.boolean(), joi.object(), joi.string().allow('production')), sourceMap: joi.boolean(), loaderOptions: joi.object({ css: joi.object(),