fix: minify embedded CSS with extract: false

close #2214

Author: yyx990803

packages/@vue/cli-service/__tests__/css.spec.js

@@ -54,6 +54,7 @@ test('default loaders', () => {
   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,
@@ -69,6 +70,7 @@ test('production defaults', () => {
   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).toBeFalsy()
     expect(findOptions(config, lang, 'css')).toEqual({
       sourceMap: false,
       importLoaders: 2
@@ -109,7 +111,30 @@ test('css.extract', () => {
     }
   }, 'production')
   LANGS.forEach(lang => {
-    expect(findLoaders(config, lang)).not.toContain(extractLoaderPath)
+    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)
+    expect(findOptions(config, lang, 'postcss').plugins).toBeTruthy()
+  })
+
+  const config2 = genConfig({
+    postcss: {},
+    vue: {
+      css: {
+        extract: false
+      }
+    }
+  }, 'production')
+  LANGS.forEach(lang => {
+    const loader = lang === 'css' ? [] : LOADERS[lang]
+    // if postcss config is present, two postcss-loaders will be used becasue it
+    // does not support mixing config files with loader options.
+    expect(findLoaders(config2, lang)).toEqual(['vue-style', 'css', 'postcss', 'postcss'].concat(loader))
+    expect(findOptions(config2, lang, 'css').importLoaders).toBe(3)
+    // minification loader should be injected before the user-facing postcss-loader
+    expect(findOptions(config2, lang, 'postcss').plugins).toBeTruthy()
   })
 })
 

packages/@vue/cli-service/lib/config/css.js

@@ -51,6 +51,20 @@ module.exports = (api, options) => {
       '.postcssrc.json'
     ]))
 
+    // 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.
+    const needInlineMinification = isProd && !shouldExtract
+
+    const cssnanoOptions = {
+      safe: true,
+      autoprefixer: { disable: true },
+      mergeLonghand: false
+    }
+    if (options.productionSourceMap && sourceMap) {
+      cssnanoOptions.map = { inline: false }
+    }
+
     function createCSSRule (lang, test, loader, options) {
       const baseRule = webpackConfig.module.rule(lang).test(test)
 
@@ -92,7 +106,8 @@ module.exports = (api, options) => {
           sourceMap,
           importLoaders: (
             1 + // stylePostLoader injected by vue-loader
-            hasPostCSSConfig
+            (hasPostCSSConfig ? 1 : 0) +
+            (needInlineMinification ? 1 : 0)
           )
         }, loaderOptions.css)
 
@@ -111,6 +126,15 @@ module.exports = (api, options) => {
           .loader('css-loader')
           .options(cssLoaderOptions)
 
+        if (needInlineMinification) {
+          rule
+            .use('cssnano')
+            .loader('postcss-loader')
+            .options({
+              plugins: [require('cssnano')(cssnanoOptions)]
+            })
+        }
+
         if (hasPostCSSConfig) {
           rule
             .use('postcss-loader')
@@ -143,24 +167,16 @@ module.exports = (api, options) => {
       webpackConfig
         .plugin('extract-css')
           .use(require('mini-css-extract-plugin'), [extractOptions])
-    }
 
-    if (isProd) {
-      // optimize CSS (dedupe)
-      const cssProcessorOptions = {
-        safe: true,
-        autoprefixer: { disable: true },
-        mergeLonghand: false
-      }
-      if (options.productionSourceMap && sourceMap) {
-        cssProcessorOptions.map = { inline: false }
+      // minify extracted CSS
+      if (isProd) {
+        webpackConfig
+          .plugin('optimize-css')
+            .use(require('@intervolga/optimize-cssnano-plugin'), [{
+              sourceMap: options.productionSourceMap && sourceMap,
+              cssnanoOptions
+            }])
       }
-      webpackConfig
-        .plugin('optimize-css')
-          .use(require('@intervolga/optimize-cssnano-plugin'), [{
-            sourceMap: options.productionSourceMap && sourceMap,
-            cssnanoOptions: cssProcessorOptions
-          }])
     }
   })
 }

packages/@vue/cli-service/package.json

@@ -36,6 +36,7 @@
     "cliui": "^4.1.0",
     "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^1.0.0",
+    "cssnano": "^4.0.0",
     "debug": "^3.1.0",
     "escape-string-regexp": "^1.0.5",
     "file-loader": "^1.1.11",

yarn.lock

@@ -7082,7 +7082,7 @@ jest-util@^23.4.0:
     slash "^1.0.0"
     source-map "^0.6.0"
 
-jest-validate@^23.0.0, jest-validate@^23.4.0:
+jest-validate@^23.4.0:
   version "23.4.0"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-23.4.0.tgz#d96eede01ef03ac909c009e9c8e455197d48c201"
   dependencies:
@@ -7606,34 +7606,6 @@ linkify-it@^2.0.0:
   dependencies:
     uc.micro "^1.0.1"
 
-lint-staged@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-7.2.0.tgz#bdf4bb7f2f37fe689acfaec9999db288a5b26888"
-  dependencies:
-    app-root-path "^2.0.1"
-    chalk "^2.3.1"
-    commander "^2.14.1"
-    cosmiconfig "^5.0.2"
-    debug "^3.1.0"
-    dedent "^0.7.0"
-    execa "^0.9.0"
-    find-parent-dir "^0.3.0"
-    is-glob "^4.0.0"
-    is-windows "^1.0.2"
-    jest-validate "^23.0.0"
-    listr "^0.14.1"
-    lodash "^4.17.5"
-    log-symbols "^2.2.0"
-    micromatch "^3.1.8"
-    npm-which "^3.0.1"
-    p-map "^1.1.1"
-    path-is-inside "^1.0.2"
-    pify "^3.0.0"
-    please-upgrade-node "^3.0.2"
-    staged-git-files "1.1.1"
-    string-argv "^0.0.2"
-    stringify-object "^3.2.2"
-
 lint-staged@^7.2.2:
   version "7.2.2"
   resolved "http://registry.npm.taobao.org/lint-staged/download/lint-staged-7.2.2.tgz#0983d55d497f19f36d11ff2c8242b2f56cc2dd05"