compatibility with HappyPack

Author: yyx990803

docs/en/features/postcss.md

@@ -4,7 +4,7 @@ Any CSS output processed by `vue-loader` is piped through [PostCSS](https://gith
 
 ## Using a Config File
 
-Starting in 11.0 `vue-loader` supports auto-loading the same PostCss config files supported by `postcss-loader`:
+Starting in 11.0 `vue-loader` supports auto-loading the same PostCss config files supported by [`postcss-loader`](https://github.com/postcss/postcss-loader#usage):
 
 - `postcss.config.js`
 - `.postcssrc`

docs/en/options.md

@@ -81,17 +81,22 @@ module.exports = {
 
 ### postcss
 
+> Note: in >=11.0.0 it is recommended to use a PostCSS config file instead. [The usage is the same as `postcss-loader`](https://github.com/postcss/postcss-loader#usage).
+
 - type: `Array` or `Function` or `Object`
 
   Specify custom PostCSS plugins to be applied to CSS inside `*.vue` files. If using a function, the function will called using the same loader context and should return an Array of plugins.
 
   ``` js
   // ...
-  vue: {
-    // note: do not nest the `postcss` option under `loaders`
-    postcss: [require('postcss-cssnext')()],
-    loaders: {
-      // ...
+  {
+    loader: 'vue-loader',
+    options: {
+      // note: do not nest the `postcss` option under `loaders`
+      postcss: [require('postcss-cssnext')()],
+      loaders: {
+        // ...
+      }
     }
   }
   ```

lib/loader.js

@@ -50,7 +50,7 @@ function getRawRequest (context) {
 
 module.exports = function (content) {
   this.cacheable()
-  var isServer = this.options.target === 'node'
+  var isServer = this.target === 'node'
   var isProduction = this.minimize || process.env.NODE_ENV === 'production'
 
   var loaderContext = this
@@ -60,8 +60,9 @@ module.exports = function (content) {
 
   var filePath = this.resourcePath
   var fileName = path.basename(filePath)
-  var moduleId = 'data-v-' + genId(filePath, this._compiler.context)
-  var styleRewriter = styleRewriterPath + '?id=' + moduleId
+
+  var context = (this._compiler && this._compiler.context) || this.options.context || process.cwd()
+  var moduleId = 'data-v-' + genId(filePath, context)
 
   var cssLoaderOptions = ''
   if (!isProduction && this.sourceMap && options.cssSourceMap !== false) {
@@ -75,8 +76,15 @@ module.exports = function (content) {
     ? '?' + JSON.stringify(options.buble)
     : ''
 
+  var templateCompilerOptions = '?' + JSON.stringify({
+    id: moduleId,
+    transformToRequire: options.transformToRequire,
+    preserveWhitespace: options.preserveWhitespace,
+    buble: options.buble
+  })
+
   var defaultLoaders = {
-    html: templateCompilerPath + '?id=' + moduleId,
+    html: templateCompilerPath + templateCompilerOptions,
     css: styleLoaderPath + '!' + 'css-loader' + cssLoaderOptions,
     js: hasBuble ? ('buble-loader' + bubleOptions) : hasBabel ? 'babel-loader' : ''
   }
@@ -177,31 +185,42 @@ module.exports = function (content) {
   function getRawLoaderString (type, part, index, scoped) {
     var lang = part.lang || defaultLang[type]
     var loader = loaders[lang]
-    var rewriter = type === 'styles' ? styleRewriter + (scoped ? '&scoped=true!' : '!') : ''
-    var injectString = (type === 'script' && query.inject) ? 'inject-loader!' : ''
+
+    var styleRewriter = ''
+    if (type === 'styles') {
+      styleRewriter = styleRewriterPath + '?' + JSON.stringify({
+        id: moduleId,
+        scoped: !!scoped,
+        hasInlineConfig: !!query.postcss
+      }) + '!'
+    }
+
+    var injectString = (type === 'script' && query.inject)
+      ? 'inject-loader!'
+      : ''
+
     if (loader != null) {
       if (Array.isArray(loader)) {
         loader = stringifyLoaders(loader)
       } else if (typeof loader === 'object') {
         loader = stringifyLoaders([loader])
       }
-      // add css modules
       if (type === 'styles') {
+        // add css modules
         loader = addCssModulesToLoader(loader, part, index)
+        // inject rewriter before css loader for extractTextPlugin use cases
+        if (rewriterInjectRE.test(loader)) {
+          loader = loader.replace(rewriterInjectRE, function (m, $1) {
+            return ensureBang($1) + styleRewriter
+          })
+        } else {
+          loader = ensureBang(loader) + styleRewriter
+        }
       }
       // if user defines custom loaders for html, add template compiler to it
       if (type === 'template' && loader.indexOf(defaultLoaders.html) < 0) {
         loader = defaultLoaders.html + '!' + loader
       }
-      // inject rewriter before css/html loader for
-      // extractTextPlugin use cases
-      if (rewriterInjectRE.test(loader)) {
-        loader = loader.replace(rewriterInjectRE, function (m, $1) {
-          return ensureBang($1) + rewriter
-        })
-      } else {
-        loader = ensureBang(loader) + rewriter
-      }
       return injectString + ensureBang(loader)
     } else {
       // unknown lang, infer the loader to be used
@@ -210,7 +229,7 @@ module.exports = function (content) {
           return defaultLoaders.html + '!' + templateLoaderPath + '?raw&engine=' + lang + '!'
         case 'styles':
           loader = addCssModulesToLoader(defaultLoaders.css, part, index)
-          return loader + '!' + rewriter + ensureBang(ensureLoader(lang))
+          return loader + '!' + styleRewriter + ensureBang(ensureLoader(lang))
         case 'script':
           return injectString + ensureBang(ensureLoader(lang))
         default:

lib/style-rewriter.js

@@ -45,6 +45,19 @@ module.exports = function (css, map) {
   var query = loaderUtils.parseQuery(this.query)
   var vueOptions = this.options.__vueOptions__
 
+  if (!vueOptions) {
+    if (query.hasInlineConfig) {
+      this.emitError(
+        `\n  [vue-loader] It seems you are using HappyPack with inline postcss ` +
+        `options for vue-loader. This is not supported because loaders running ` +
+        `in different threads cannot share non-serializable options. ` +
+        `It is recommended to use a postcss config file instead.\n` +
+        `\n  See http://vue-loader.vuejs.org/en/features/postcss.html#using-a-config-file for more details.\n`
+      )
+    }
+    vueOptions = Object.assign({}, this.options.vue, this.vue)
+  }
+
   // use the same config loading interface as postcss-loader
   loadPostcssConfig({ webpack: this }).catch(() => {
     // postcss-load-config throws error when no config file is found,

lib/template-compiler.js

@@ -48,19 +48,18 @@ function rewrite (attr, name) {
 
 module.exports = function (html) {
   this.cacheable()
+  var isServer = this.target === 'node'
   var isProduction = this.minimize || process.env.NODE_ENV === 'production'
-  var query = loaderUtils.parseQuery(this.query)
-  var isServer = this.options.target === 'node'
-  var vueOptions = this.options.__vueOptions__
-  if (vueOptions.transformToRequire) {
+  var options = loaderUtils.parseQuery(this.query)
+  if (options.transformToRequire) {
     transformToRequire = Object.assign(
       {},
       defaultTransformToRequire,
-      vueOptions.transformToRequire
+      options.transformToRequire
     )
   }
   var compiled = compiler.compile(html, Object.assign({
-    preserveWhitespace: vueOptions.preserveWhitespace
+    preserveWhitespace: options.preserveWhitespace
   }, defaultCompileOptions))
   var code
   if (compiled.errors.length) {
@@ -70,7 +69,7 @@ module.exports = function (html) {
     )
     code = 'module.exports={render:function(){},staticRenderFns:[]}'
   } else {
-    var bubleOptions = vueOptions.buble
+    var bubleOptions = options.buble
     code = transpile('module.exports={' +
       'render:' + toFunction(compiled.render) + ',' +
       'staticRenderFns: [' + compiled.staticRenderFns.map(toFunction).join(',') + ']' +
@@ -92,7 +91,7 @@ module.exports = function (html) {
       '\nif (module.hot) {\n' +
       '  module.hot.accept()\n' +
       '  if (module.hot.data) {\n' +
-      '     require("' + hotReloadAPIPath + '").rerender("' + query.id + '", module.exports)\n' +
+      '     require("' + hotReloadAPIPath + '").rerender("' + options.id + '", module.exports)\n' +
       '  }\n' +
       '}'
   }