css optimization

docs/.vuepress/config.js

 const path = require('path')
 const base = process.env.GH ? '/vuepress/' : '/'
-const { extractHeaders } = require('../../lib/userUtils')
+const { extractHeaders } = require('../../lib')
 
 module.exports = {
   title: 'VuePress',

docs/config.md

@@ -30,7 +30,9 @@ Also see [config options for the default theme](./default-theme.md).
 
 ### markdown.config
 
-## webpack
+## Build Pipeline
+
+### postcss
 
 ### configureWebpack
 

docs/using-vue.md

@@ -104,7 +104,7 @@ Make sure a custom component's names either contains a hyphen or is in PascalCas
 
 Sometimes you may need to apply some JavaScript or CSS only to the current page. In those case you can directly write root-level `<script>` or `<style>` blocks in the markdown file, and they will be hoisted out of the compiled HTML and used as the `<script>` and `<style>` blocks for the resulting Vue single-file component.
 
-<div :class="$style.example"></div>
+<p class="demo" :class="$style.example"></p>
 
 <style module>
 .example {
@@ -116,7 +116,7 @@ Sometimes you may need to apply some JavaScript or CSS only to the current page.
 export default {
   mounted () {
     document.querySelector(`.${this.$style.example}`)
-      .textContent = 'Hello from inline script!'
+      .textContent = 'This is rendered by inline script and styled by inline CSS'
   }
 }
 </script>

lib/default-theme/Layout.vue

 <template>
   <div class="theme-container">
+    <!-- <Navbar/> -->
     <Sidebar/>
     <Page/>
   </div>
@@ -7,11 +8,12 @@
 
 <script>
 import nprogress from 'nprogress'
+import Navbar from './Navbar.vue'
 import Page from './Page.vue'
 import Sidebar from './Sidebar.vue'
 
 export default {
-  components: { Page, Sidebar },
+  components: { Page, Sidebar, Navbar },
   mounted () {
     nprogress.configure({ showSpinner: false })
 

lib/default-theme/Navbar.vue

+<template>
+  <div class="navbar">
+    Yo Nav
+  </div>
+</template>
+
+<style lang="stylus">
+@import './styles/config.stylus'
+
+.navbar
+  position fixed
+  top 0
+  left 0
+  right 0
+  height 3rem
+  z-index 10
+  background-color #fff
+  border-bottom 1px solid $borderColor
+</style>

lib/dev.js

@@ -46,7 +46,7 @@ module.exports = async function dev (sourceDir, cliOptions = {}) {
   frontmatterEmitter.on('update', update)
 
   // resolve webpack config
-  let config = createClientConfig(options)
+  let config = createClientConfig(options, cliOptions)
 
   config
     .plugin('html')

lib/index.js

 exports.dev = require('./dev')
 exports.build = require('./build')
-Object.assign(exports, require('./userUtils'))
+Object.assign(exports, require('./util'))

lib/userUtils.js

-const fs = require('fs')
-
-exports.extractHeaders = (file, include = []) => {
-  const md = require('./markdown')({})
-  const S = require('string')
-  const content = fs.readFileSync(file, 'utf-8')
-  const tokens = md.parse(content)
-
-  const res = []
-  tokens.forEach((t, i) => {
-    if (t.type === 'heading_open' && include.includes(t.tag)) {
-      const title = tokens[i + 1].content
-      res.push({
-        title,
-        slug: S(title).slugify()
-      })
-    }
-  })
-  return res
-}

lib/util.js

@@ -34,3 +34,23 @@ exports.inferTitle = function (frontmatter) {
     return match[1]
   }
 }
+
+exports.extractHeaders = (file, include = []) => {
+  const fs = require('fs')
+  const md = require('./markdown')({})
+  const S = require('string')
+  const content = fs.readFileSync(file, 'utf-8')
+  const tokens = md.parse(content)
+
+  const res = []
+  tokens.forEach((t, i) => {
+    if (t.type === 'heading_open' && include.includes(t.tag)) {
+      const title = tokens[i + 1].content
+      res.push({
+        title,
+        slug: S(title).slugify()
+      })
+    }
+  })
+  return res
+}

lib/webpack/createBaseConfig.js

@@ -152,13 +152,13 @@ module.exports = function createBaseConfig ({
 
       rule.use('css-loader').loader('css-loader').options({
         modules,
-        minimize: isProd,
-        localIdentName: `[local]_[hash:base64:8]`
+        localIdentName: `[local]_[hash:base64:8]`,
+        importLoaders: 1
       })
 
-      rule.use('postcss-loader').loader('postcss-loader').options({
+      rule.use('postcss-loader').loader('postcss-loader').options(Object.assign({
         plugins: [require('autoprefixer')]
-      })
+      }, siteConfig.postcss))
 
       if (loader) {
         rule.use(loader).loader(loader).options(options)

lib/webpack/createClientConfig.js

@@ -33,21 +33,32 @@ module.exports = function createClientConfig (options, cliOptions) {
     // 1. Include CSS in preload files
     // 2. filter out useless styles.xxxxx.js chunk from mini-css-extract-plugin
     // https://github.com/webpack-contrib/mini-css-extract-plugin/issues/85
-    const VueSSRClientPlugin = require('./clientPlugin')
     config
       .plugin('ssr-client')
-      .use(VueSSRClientPlugin, [{
+      .use(require('./clientPlugin'), [{
         filename: 'manifest/client.json'
       }])
+
+    config
+      .plugin('optimize-css')
+      .use(require('optimize-css-assets-webpack-plugin'), [{
+        canPrint: false,
+        cssProcessorOptions: {
+          safe: true,
+          autoprefixer: { disable: true }
+        }
+      }])
   }
 
-  config
-    .plugin('bar')
-    .use(WebpackBar, [{
-      name: 'Client',
-      color: '#41b883',
-      compiledIn: false
-    }])
+  if (!cliOptions.debug) {
+    config
+      .plugin('bar')
+      .use(WebpackBar, [{
+        name: 'Client',
+        color: '#41b883',
+        compiledIn: false
+      }])
+  }
 
   if (options.siteConfig.chainWebpack) {
     options.siteConfig.chainWebpack(config, false /* isServer */)

lib/webpack/createServerConfig.js

@@ -36,13 +36,15 @@ module.exports = function createServerConfig (options, cliOptions) {
       ]])
   }
 
-  config
-    .plugin('bar')
-    .use(WebpackBar, [{
-      name: 'Server',
-      color: 'blue',
-      compiledIn: false
-    }])
+  if (!cliOptions.debug) {
+    config
+      .plugin('bar')
+      .use(WebpackBar, [{
+        name: 'Server',
+        color: 'blue',
+        compiledIn: false
+      }])
+  }
 
   if (options.siteConfig.chainWebpack) {
     options.siteConfig.chainWebpack(config, true /* isServer */)

package.json

@@ -66,6 +66,7 @@
     "mkdirp": "^0.5.1",
     "nprogress": "^0.2.0",
     "object-assign": "^4.1.1",
+    "optimize-css-assets-webpack-plugin": "^4.0.0",
     "postcss-loader": "^2.1.3",
     "prismjs": "^1.13.0",
     "rimraf": "^2.6.2",
@@ -92,5 +93,8 @@
   },
   "engines": {
     "node": ">=8"
-  }
+  },
+  "browserslist": [
+    ">1%"
+  ]
 }

yarn.lock

@@ -1150,7 +1150,7 @@ cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
 
-cssnano@^3.10.0:
+cssnano@^3.10.0, cssnano@^3.4.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
   dependencies:
@@ -3159,6 +3159,13 @@ koa@^2.4.1:
     type-is "^1.5.5"
     vary "^1.0.0"
 
+last-call-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
+  dependencies:
+    lodash "^4.17.5"
+    webpack-sources "^1.1.0"
+
 latest-version@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
@@ -3941,6 +3948,13 @@ opn@^5.1.0:
   dependencies:
     is-wsl "^1.1.0"
 
+optimize-css-assets-webpack-plugin@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-4.0.0.tgz#d5f80041fb1391b358a1f35273c3b53de814e8fe"
+  dependencies:
+    cssnano "^3.4.0"
+    last-call-webpack-plugin "^3.0.0"
+
 optionator@^0.8.1, optionator@^0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"