From 728612f17d68f9d9a87790415d3ef2532392adf3 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Fri, 26 Jul 2019 16:33:29 +0800 Subject: [PATCH 1/7] fix: load default `localIdentName` from `css.modules` option fixes #4357 --- packages/@vue/cli-service/lib/config/css.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index c5c66f1977..e4e5ff866a 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/packages/@vue/cli-service/lib/config/css.js @@ -123,14 +123,10 @@ module.exports = (api, options) => { }, loaderOptions.css) if (modules) { - const { - localIdentName = '[name]_[local]_[hash:base64:5]' - } = loaderOptions.css || {} - Object.assign(cssLoaderOptions, { - modules: { - localIdentName - } - }) + cssLoaderOptions.modules = { + ...modules, + localIdentName: '[name]_[local]_[hash:base64:5]' + } } rule From ded274fe0a0d0cf5ffa6036cfc47c6f61442fd32 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Sat, 27 Jul 2019 20:10:07 +0800 Subject: [PATCH 2/7] chore: avoid variable shadowing --- packages/@vue/cli-service/lib/config/css.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index e4e5ff866a..e1cf40f238 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/packages/@vue/cli-service/lib/config/css.js @@ -22,7 +22,6 @@ module.exports = (api, options) => { } catch (e) {} const { - modules = false, extract = isProd, sourceMap = false, loaderOptions = {} @@ -92,7 +91,7 @@ module.exports = (api, options) => { // rules for normal CSS imports const normalRule = baseRule.oneOf('normal') - applyLoaders(normalRule, modules) + applyLoaders(normalRule, options.css && options.css.modules) function applyLoaders (rule, modules) { if (shouldExtract) { From 61f4f18c68bf34a01624fb2edf3dae6ffc987d7e Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Sat, 27 Jul 2019 20:21:27 +0800 Subject: [PATCH 3/7] fix: fix default value of loaderOptions.css.modules --- packages/@vue/cli-service/lib/config/css.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index e1cf40f238..da7d6305c2 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/packages/@vue/cli-service/lib/config/css.js @@ -91,9 +91,10 @@ module.exports = (api, options) => { // rules for normal CSS imports const normalRule = baseRule.oneOf('normal') - applyLoaders(normalRule, options.css && options.css.modules) + const treatAllAsModules = !!(options.css && options.css.modules) + applyLoaders(normalRule, treatAllAsModules) - function applyLoaders (rule, modules) { + function applyLoaders (rule, isCssModule) { if (shouldExtract) { rule .use('extract-css-loader') @@ -121,10 +122,10 @@ module.exports = (api, options) => { ) }, loaderOptions.css) - if (modules) { + if (isCssModule) { cssLoaderOptions.modules = { - ...modules, - localIdentName: '[name]_[local]_[hash:base64:5]' + localIdentName: '[name]_[local]_[hash:base64:5]', + ...cssLoaderOptions.modules } } From d35dd85107b808146d32492f6bf4caac663a9b4f Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Sat, 27 Jul 2019 20:37:26 +0800 Subject: [PATCH 4/7] chore: remove unused references to localIdentName --- packages/@vue/cli-service/lib/Service.js | 9 --------- packages/@vue/cli-service/lib/options.js | 1 - 2 files changed, 10 deletions(-) diff --git a/packages/@vue/cli-service/lib/Service.js b/packages/@vue/cli-service/lib/Service.js index d350c06dad..b1f5442a3b 100644 --- a/packages/@vue/cli-service/lib/Service.js +++ b/packages/@vue/cli-service/lib/Service.js @@ -370,15 +370,6 @@ module.exports = class Service { resolved.baseUrl = resolved.publicPath removeSlash(resolved, 'outputDir') - // deprecation warning - // TODO remove in final release - if (resolved.css && resolved.css.localIdentName) { - warn( - `css.localIdentName has been deprecated. ` + - `All css-loader options (except "modules") are now supported via css.loaderOptions.css.` - ) - } - // validate options validate(resolved, msg => { error( diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js index 979fbc3def..9719a239f7 100644 --- a/packages/@vue/cli-service/lib/options.js +++ b/packages/@vue/cli-service/lib/options.js @@ -122,7 +122,6 @@ exports.defaults = () => ({ css: { // extract: true, // modules: false, - // localIdentName: '[name]_[local]_[hash:base64:5]', // sourceMap: false, // loaderOptions: {} }, From 482506e521c5dd601bb0ae73c71b4a7796e09010 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Sat, 27 Jul 2019 20:37:47 +0800 Subject: [PATCH 5/7] docs: update css modules documentations following the css-loader upgrade --- docs/guide/css.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/guide/css.md b/docs/guide/css.md index e1c3c85244..5faaa4473c 100644 --- a/docs/guide/css.md +++ b/docs/guide/css.md @@ -108,8 +108,13 @@ module.exports = { css: { loaderOptions: { css: { - localIdentName: '[name]-[hash]', - camelCase: 'only' + // Note: the following config format is different between Vue CLI v4 and v3 + // For Vue CLI v3 users, please refer to css-loader v1 documentations + // https://github.com/webpack-contrib/css-loader/tree/v1.0.1 + modules: { + localIdentName: '[name]-[hash]', + localsConvention: 'camelCaseOnly' + } } } } From 85b5a880b070a97a809bca120b04426597552c06 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Sat, 27 Jul 2019 20:51:43 +0800 Subject: [PATCH 6/7] fix: rename `options` in outer scope to `rootOptions`, avoid shadowing --- packages/@vue/cli-service/lib/config/css.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index da7d6305c2..3a0bc63ece 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/packages/@vue/cli-service/lib/config/css.js @@ -9,7 +9,7 @@ const findExisting = (context, files) => { } } -module.exports = (api, options) => { +module.exports = (api, rootOptions) => { api.chainWebpack(webpackConfig => { const getAssetPath = require('../util/getAssetPath') const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE @@ -25,12 +25,12 @@ module.exports = (api, options) => { extract = isProd, sourceMap = false, loaderOptions = {} - } = options.css || {} + } = rootOptions.css || {} const shouldExtract = extract !== false && !shadowMode const filename = getAssetPath( - options, - `css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css` + rootOptions, + `css/[name]${rootOptions.filenameHashing ? '.[contenthash:8]' : ''}.css` ) const extractOptions = Object.assign({ filename, @@ -70,7 +70,7 @@ module.exports = (api, options) => { cssDeclarationSorter: false }] } - if (options.productionSourceMap && sourceMap) { + if (rootOptions.productionSourceMap && sourceMap) { cssnanoOptions.map = { inline: false } } @@ -182,7 +182,7 @@ module.exports = (api, options) => { webpackConfig .plugin('optimize-css') .use(require('@intervolga/optimize-cssnano-plugin'), [{ - sourceMap: options.productionSourceMap && sourceMap, + sourceMap: rootOptions.productionSourceMap && sourceMap, cssnanoOptions }]) } From 7ccb71789c19a67e311d24e3f7b266a254faa58d Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Sat, 27 Jul 2019 20:56:44 +0800 Subject: [PATCH 7/7] fixup! fix: rename `options` in outer scope to `rootOptions`, avoid shadowing --- packages/@vue/cli-service/lib/config/css.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index 3a0bc63ece..77ad2fa668 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/packages/@vue/cli-service/lib/config/css.js @@ -91,7 +91,7 @@ module.exports = (api, rootOptions) => { // rules for normal CSS imports const normalRule = baseRule.oneOf('normal') - const treatAllAsModules = !!(options.css && options.css.modules) + const treatAllAsModules = !!(rootOptions.css && rootOptions.css.modules) applyLoaders(normalRule, treatAllAsModules) function applyLoaders (rule, isCssModule) {