feat: Add the ability to disable critical css for users who wants to keep css separated (#48)

* Add the ability to disable criticalCss for users who wants to keep CSS in a separated file

* Fix dev server render error when a custom path is used for the server-renderer bundles

* refactor: rename to criticalCSS

* docs: criticalCSS

* chore: clean code + comments

Author: skyhark-sacha

docs/guide/configuration.md

@@ -22,6 +22,8 @@ module.exports = {
       defaultTitle: 'My app',
       // Path to favicon
       favicon: './public/favicon.ico',
+      // Enable Critical CSS
+      criticalCSS: true,
       // Skip some requests from being server-side rendered
       skipRequests: req => req.originalUrl === '/graphql',
       // See https://ssr.vuejs.org/guide/build-config.html#externals-caveats

lib/config.js

@@ -9,6 +9,7 @@ module.exports = {
   entry: target => `./src/entry-${target}`,
   defaultTitle: 'My app',
   favicon: './public/favicon.ico',
+  criticalCSS: true,
   skipRequests: req => req.originalUrl === '/graphql',
   nodeExternalsWhitelist: [/\.css$/, /\?vue&type=style/],
   applyDefaultServer: true,

lib/dev-server.js

@@ -70,9 +70,13 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom
       jsonStats.warnings.forEach(err => console.warn(err))
     }
     if (stats.hasErrors()) return
+
+    //  Fix dev server render error when a custom path is used for the server-renderer bundles
+    const ssrPlugin = (clientConfig.plugins.find((p) => (p.__pluginName || p.constructor.name) === 'ssr') || {}).options || {}
+
     clientManifest = JSON.parse(readFile(
       devMiddleware.fileSystem,
-      'vue-ssr-client-manifest.json'
+      (ssrPlugin && ssrPlugin.filename) || 'vue-ssr-client-manifest.json'
     ))
 
     // HTML Template
@@ -109,8 +113,17 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom
       jsonStats.warnings.forEach(err => console.warn(err))
     }
     if (stats.hasErrors()) return
+
+    // Try to find ssr plugin config options
+    // to fix dev server render error when a custom path is used for the server-renderer bundles
+    const ssrPlugin = (serverConfig.plugins.find((p) => (p.__pluginName || p.constructor.name) === 'ssr') || {}).options || {}
+
     // read bundle generated by vue-ssr-webpack-plugin
-    serverBundle = JSON.parse(readFile(serverMfs, 'vue-ssr-server-bundle.json'))
+    serverBundle = JSON.parse(readFile(
+      serverMfs,
+      (ssrPlugin && ssrPlugin.filename) || 'vue-ssr-server-bundle.json'
+    ))
+
     update()
     onCompilationCompleted()
   })

lib/webpack.js

@@ -24,7 +24,7 @@ exports.chainWebpack = (webpackConfig) => {
     webpackConfig.plugins.delete('friendly-errors')
 
     const isExtracting = webpackConfig.plugins.has('extract-css')
-    if (isExtracting) {
+    if (isExtracting && config.criticalCSS) {
       // Remove extract
       const langs = ['css', 'postcss', 'scss', 'sass', 'less', 'stylus']
       const types = ['vue-modules', 'vue', 'normal-modules', 'normal']