From 9ebc2ab3e9a3e7511b91c4db7b3f3b807a2767f7 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 7 Nov 2019 09:28:44 +0800 Subject: [PATCH] feat: enable postcss+autoprefixer by default internally, reducing boilerplate (#4798) This also fixes the issue with Yarn PnP that requires `autoprefixer` to be explicitly listed in the user's project dependency. --- .postcssrc | 5 --- .../@vue/cli-service/__tests__/css.spec.js | 43 +++++++++++-------- packages/@vue/cli-service/generator/index.js | 5 --- packages/@vue/cli-service/lib/config/css.js | 20 ++++++--- packages/@vue/cli-ui-addon-webpack/.postcssrc | 5 --- .../cli-ui-addon-widgets/postcss.config.js | 5 --- packages/@vue/cli-ui/.postcssrc | 5 --- packages/@vue/cli/lib/Creator.js | 2 +- 8 files changed, 39 insertions(+), 51 deletions(-) delete mode 100644 .postcssrc delete mode 100644 packages/@vue/cli-ui-addon-webpack/.postcssrc delete mode 100644 packages/@vue/cli-ui-addon-widgets/postcss.config.js delete mode 100644 packages/@vue/cli-ui/.postcssrc diff --git a/.postcssrc b/.postcssrc deleted file mode 100644 index ed0149bf8b..0000000000 --- a/.postcssrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "plugins": { - "autoprefixer": {} - } -} \ No newline at end of file diff --git a/packages/@vue/cli-service/__tests__/css.spec.js b/packages/@vue/cli-service/__tests__/css.spec.js index 77629de1df..bd635ab9cd 100644 --- a/packages/@vue/cli-service/__tests__/css.spec.js +++ b/packages/@vue/cli-service/__tests__/css.spec.js @@ -57,12 +57,12 @@ const findOptions = (config, lang, _loader, index) => { } test('default loaders', () => { - const config = genConfig({ postcss: {}}) + const config = genConfig() LANGS.forEach(lang => { const loader = lang === 'css' ? [] : LOADERS[lang] expect(findLoaders(config, lang)).toEqual(['vue-style', 'css', 'postcss'].concat(loader)) - expect(findOptions(config, lang, 'postcss').plugins).toBeFalsy() + expect(findOptions(config, lang, 'postcss').plugins).toEqual([require('autoprefixer')]) // assert css-loader options expect(findOptions(config, lang, 'css')).toEqual({ sourceMap: false, @@ -79,11 +79,25 @@ test('default loaders', () => { }) test('production defaults', () => { - const config = genConfig({ postcss: {}}, 'production') + const config = genConfig({}, 'production') LANGS.forEach(lang => { const loader = lang === 'css' ? [] : LOADERS[lang] expect(findLoaders(config, lang)).toEqual([extractLoaderPath, 'css', 'postcss'].concat(loader)) + expect(findOptions(config, lang, 'postcss').plugins).toEqual([require('autoprefixer')]) + expect(findOptions(config, lang, 'css')).toEqual({ + sourceMap: false, + importLoaders: 2 + }) + }) +}) + +test('override postcss config', () => { + const config = genConfig({ postcss: {}}) + LANGS.forEach(lang => { + const loader = lang === 'css' ? [] : LOADERS[lang] + expect(findLoaders(config, lang)).toEqual(['vue-style', 'css', 'postcss'].concat(loader)) expect(findOptions(config, lang, 'postcss').plugins).toBeFalsy() + // assert css-loader options expect(findOptions(config, lang, 'css')).toEqual({ sourceMap: false, importLoaders: 2 @@ -101,7 +115,7 @@ test('CSS Modules rules', () => { }) LANGS.forEach(lang => { const expected = { - importLoaders: 1, // no postcss-loader + importLoaders: 2, // with postcss-loader sourceMap: false, modules: { localIdentName: `[name]_[local]_[hash:base64:5]` @@ -140,7 +154,7 @@ test('Customized CSS Modules rules', () => { LANGS.forEach(lang => { const expected = { - importLoaders: 1, // no postcss-loader + importLoaders: 2, // with postcss-loader sourceMap: false, modules: { localIdentName: `[folder]-[name]-[local][emoji]` @@ -174,7 +188,7 @@ test('deprecate `css.modules` option', () => { LANGS.forEach(lang => { const expected = { - importLoaders: 1, // no postcss-loader + importLoaders: 2, // with postcss-loader sourceMap: false, modules: { localIdentName: `[folder]-[name]-[local][emoji]` @@ -211,7 +225,7 @@ test('favor `css.requireModuleExtension` over `css.modules`', () => { LANGS.forEach(lang => { const expected = { - importLoaders: 1, // no postcss-loader + importLoaders: 2, // with postcss-loader sourceMap: false, modules: { localIdentName: `[folder]-[name]-[local][emoji]` @@ -236,10 +250,10 @@ test('css.extract', () => { }, 'production') LANGS.forEach(lang => { const loader = lang === 'css' ? [] : LOADERS[lang] - // when extract is false in production, even without postcss config, - // an instance of postcss-loader is injected for inline minification. - expect(findLoaders(config, lang)).toEqual(['vue-style', 'css', 'postcss'].concat(loader)) - expect(findOptions(config, lang, 'css').importLoaders).toBe(2) + // when extract is false in production, + // an additional instance of postcss-loader is injected for inline minification. + expect(findLoaders(config, lang)).toEqual(['vue-style', 'css', 'postcss', 'postcss'].concat(loader)) + expect(findOptions(config, lang, 'css').importLoaders).toBe(3) expect(findOptions(config, lang, 'postcss').plugins).toBeTruthy() }) @@ -380,10 +394,3 @@ test('should use dart sass implementation whenever possible', () => { expect(findOptions(config, 'sass', 'sass')).toMatchObject({ implementation: require('sass') }) }) -test('skip postcss-loader if no postcss config found', () => { - const config = genConfig() - LANGS.forEach(lang => { - const loader = lang === 'css' ? [] : LOADERS[lang] - expect(findLoaders(config, lang)).toEqual(['vue-style', 'css'].concat(loader)) - }) -}) diff --git a/packages/@vue/cli-service/generator/index.js b/packages/@vue/cli-service/generator/index.js index 5dda9238ce..ae03376fe5 100644 --- a/packages/@vue/cli-service/generator/index.js +++ b/packages/@vue/cli-service/generator/index.js @@ -14,11 +14,6 @@ module.exports = (api, options) => { devDependencies: { 'vue-template-compiler': '^2.6.10' }, - 'postcss': { - 'plugins': { - 'autoprefixer': {} - } - }, browserslist: [ '> 1%', 'last 2 versions' diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index 0b4b9f6ef7..9eb7929932 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/packages/@vue/cli-service/lib/config/css.js @@ -82,6 +82,14 @@ module.exports = (api, rootOptions) => { '.postcssrc.json' ])) + if (!hasPostCSSConfig) { + loaderOptions.postcss = { + plugins: [ + require('autoprefixer') + ] + } + } + // if building for production but not extracting CSS, we need to minimize // the embbeded inline CSS as they will not be going through the optimizing // plugin. @@ -139,7 +147,7 @@ module.exports = (api, rootOptions) => { sourceMap, importLoaders: ( 1 + // stylePostLoader injected by vue-loader - (hasPostCSSConfig ? 1 : 0) + + 1 + // postcss-loader (needInlineMinification ? 1 : 0) ) }, loaderOptions.css) @@ -168,12 +176,10 @@ module.exports = (api, rootOptions) => { }) } - if (hasPostCSSConfig) { - rule - .use('postcss-loader') - .loader(require.resolve('postcss-loader')) - .options(Object.assign({ sourceMap }, loaderOptions.postcss)) - } + rule + .use('postcss-loader') + .loader(require.resolve('postcss-loader')) + .options(Object.assign({ sourceMap }, loaderOptions.postcss)) if (loader) { let resolvedLoader diff --git a/packages/@vue/cli-ui-addon-webpack/.postcssrc b/packages/@vue/cli-ui-addon-webpack/.postcssrc deleted file mode 100644 index ed0149bf8b..0000000000 --- a/packages/@vue/cli-ui-addon-webpack/.postcssrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "plugins": { - "autoprefixer": {} - } -} \ No newline at end of file diff --git a/packages/@vue/cli-ui-addon-widgets/postcss.config.js b/packages/@vue/cli-ui-addon-widgets/postcss.config.js deleted file mode 100644 index 961986e2b1..0000000000 --- a/packages/@vue/cli-ui-addon-widgets/postcss.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - plugins: { - autoprefixer: {} - } -} diff --git a/packages/@vue/cli-ui/.postcssrc b/packages/@vue/cli-ui/.postcssrc deleted file mode 100644 index ed0149bf8b..0000000000 --- a/packages/@vue/cli-ui/.postcssrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "plugins": { - "autoprefixer": {} - } -} \ No newline at end of file diff --git a/packages/@vue/cli/lib/Creator.js b/packages/@vue/cli/lib/Creator.js index 78c4dd9077..50ab76c4d7 100644 --- a/packages/@vue/cli/lib/Creator.js +++ b/packages/@vue/cli/lib/Creator.js @@ -429,7 +429,7 @@ module.exports = class Creator extends EventEmitter { name: 'useConfigFiles', when: isManualMode, type: 'list', - message: 'Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?', + message: 'Where do you prefer placing config for Babel, ESLint, etc.?', choices: [ { name: 'In dedicated config files',