refactor

Author: yyx990803

lib/load-postcss-config.js

@@ -7,9 +7,9 @@ var querystring = require('querystring')
 
 // internal lib loaders
 var selectorPath = normalize.lib('selector')
-var styleRewriterPath = normalize.lib('style-rewriter')
-var templateLoaderPath = normalize.lib('template-loader')
-var templateCompilerPath = normalize.lib('template-compiler')
+var styleCompilerPath = normalize.lib('style-compiler/index')
+var templateCompilerPath = normalize.lib('template-compiler/index')
+var templatePreprocessorPath = normalize.lib('template-compiler/preprocessor')
 var componentNormalizerPath = normalize.lib('component-normalizer')
 
 // dep loaders
@@ -190,9 +190,9 @@ module.exports = function (content) {
     var lang = part.lang || defaultLang[type]
     var loader = loaders[lang]
 
-    var styleRewriter = ''
+    var styleCompiler = ''
     if (type === 'styles') {
-      styleRewriter = styleRewriterPath + '?' + JSON.stringify({
+      styleCompiler = styleCompilerPath + '?' + JSON.stringify({
         id: moduleId,
         scoped: !!scoped,
         hasInlineConfig: !!query.postcss
@@ -215,10 +215,10 @@ module.exports = function (content) {
         // inject rewriter before css loader for extractTextPlugin use cases
         if (rewriterInjectRE.test(loader)) {
           loader = loader.replace(rewriterInjectRE, function (m, $1) {
-            return ensureBang($1) + styleRewriter
+            return ensureBang($1) + styleCompiler
           })
         } else {
-          loader = ensureBang(loader) + styleRewriter
+          loader = ensureBang(loader) + styleCompiler
         }
       }
       // if user defines custom loaders for html, add template compiler to it
@@ -230,10 +230,10 @@ module.exports = function (content) {
       // unknown lang, infer the loader to be used
       switch (type) {
         case 'template':
-          return defaultLoaders.html + '!' + templateLoaderPath + '?raw&engine=' + lang + '!'
+          return defaultLoaders.html + '!' + templatePreprocessorPath + '?raw&engine=' + lang + '!'
         case 'styles':
           loader = addCssModulesToLoader(defaultLoaders.css, part, index)
-          return loader + '!' + styleRewriter + ensureBang(ensureLoader(lang))
+          return loader + '!' + styleCompiler + ensureBang(ensureLoader(lang))
         case 'script':
           return injectString + ensureBang(ensureLoader(lang))
         default:

lib/loader.js

@@ -59,37 +59,14 @@ module.exports = function (css, map) {
   }
 
   // use the same config loading interface as postcss-loader
-  loadPostcssConfig().then(config => {
-    var plugins
-    var options
-
-    // inline postcss options for vue-loader
-    var rawInlineOptions = vueOptions.postcss
-    if (typeof rawInlineOptions === 'function') {
-      rawInlineOptions = rawInlineOptions.call(this, this)
-    }
-    if (Array.isArray(rawInlineOptions)) {
-      plugins = rawInlineOptions
-    } else if (isObject(rawInlineOptions)) {
-      plugins = rawInlineOptions.plugins
-      options = rawInlineOptions.options
-    }
-
-    plugins = [trim].concat(plugins || [])
+  loadPostcssConfig(vueOptions.postcss).then(({ plugins, options }) => {
+    plugins = [trim].concat(plugins)
     options = Object.assign({
       to: this.resourcePath,
       from: this.resourcePath,
       map: false
     }, options)
 
-    // merge postcss config file
-    if (config && config.plugins) {
-      plugins = plugins.concat(config.plugins)
-    }
-    if (config && config.options) {
-      options = Object.assign({}, config.options, options)
-    }
-
     // add plugin for vue-loader scoped css rewrite
     if (query.scoped) {
       plugins.push(addId({ id: query.id }))
@@ -110,20 +87,15 @@ module.exports = function (css, map) {
       }
     }
 
-    postcss(plugins)
+    return postcss(plugins)
       .process(css, options)
       .then(function (result) {
         var map = result.map && result.map.toJSON()
         cb(null, result.css, map)
         return null // silence bluebird warning
       })
-      .catch(function (e) {
-        console.log(e)
-        cb(e)
-      })
+  }).catch(e => {
+    console.log(e)
+    cb(e)
   })
 }
-
-function isObject (val) {
-  return val && typeof val === 'object'
-}

lib/style-rewriter.js renamed to lib/style-compiler/index.js

@@ -0,0 +1,45 @@
+var load = require('postcss-load-config')
+
+let loaded
+
+function isObject (val) {
+  return val && typeof val === 'object'
+}
+
+module.exports = function loadPostcssConfig (inlineConfig) {
+  if (process.env.VUE_LOADER_TEST || !loaded) {
+    loaded = load({}, null, { argv: false }).catch(() => {
+      // postcss-load-config throws error when no config file is found,
+      // but for us it's optional.
+    })
+  }
+
+  return loaded.then(config => {
+    var plugins = []
+    var options = {}
+
+    // inline postcss options for vue-loader
+    if (typeof inlineConfig === 'function') {
+      inlineConfig = inlineConfig.call(this, this)
+    }
+    if (Array.isArray(inlineConfig)) {
+      plugins = inlineConfig
+    } else if (isObject(inlineConfig)) {
+      plugins = inlineConfig.plugins || []
+      options = inlineConfig.options || {}
+    }
+
+    // merge postcss config file
+    if (config && config.plugins) {
+      plugins = plugins.concat(config.plugins)
+    }
+    if (config && config.options) {
+      options = Object.assign({}, config.options, options)
+    }
+
+    return {
+      plugins,
+      options
+    }
+  })
+}

lib/style-compiler/load-postcss-config.js

@@ -0,0 +1,86 @@
+var normalize = require('../normalize')
+var loaderUtils = require('loader-utils')
+var compiler = require('vue-template-compiler')
+var beautify = require('js-beautify').js_beautify
+var transpile = require('vue-template-es2015-compiler')
+var hotReloadAPIPath = normalize.dep('vue-hot-reload-api')
+var transformRequire = require('./modules/transform-require')
+var rewriteInlineStyles = require('./modules/inline-style')
+
+module.exports = function (html) {
+  this.cacheable()
+  var cb = this.async()
+  var isServer = this.target === 'node'
+  var isProduction = this.minimize || process.env.NODE_ENV === 'production'
+  var vueOptions = this.options.__vueOptions__ || {}
+  var options = loaderUtils.getOptions(this) || {}
+
+  Promise.all([
+    transformRequire(options.transformToRequire),
+    rewriteInlineStyles()
+  ]).then(defaultCompilerModules => {
+    // user compiler modules
+    var userCompilerModules = options.compilerModules || vueOptions.compilerModules
+    // for HappyPack cross-process use cases
+    if (typeof userCompilerModules === 'string') {
+      userCompilerModules = require(userCompilerModules)
+    }
+
+    var compiled = compiler.compile(html, {
+      preserveWhitespace: options.preserveWhitespace,
+      modules: defaultCompilerModules.concat(userCompilerModules || [])
+    })
+
+    // tips
+    if (compiled.tips && compiled.tips.length) {
+      compiled.tips.forEach(tip => {
+        this.emitWarning(tip)
+      })
+    }
+
+    var code
+    if (compiled.errors && compiled.errors.length) {
+      this.emitError(
+        `\n  Error compiling template:\n${pad(html)}\n` +
+        compiled.errors.map(e => `  - ${e}`).join('\n') + '\n'
+      )
+      code = 'module.exports={render:function(){},staticRenderFns:[]}'
+    } else {
+      var bubleOptions = options.buble
+      code = transpile('module.exports={' +
+        'render:' + toFunction(compiled.render) + ',' +
+        'staticRenderFns: [' + compiled.staticRenderFns.map(toFunction).join(',') + ']' +
+      '}', bubleOptions)
+      // mark with stripped (this enables Vue to use correct runtime proxy detection)
+      if (!isProduction && (
+        !bubleOptions ||
+        !bubleOptions.transforms ||
+        bubleOptions.transforms.stripWith !== false
+      )) {
+        code += `\nmodule.exports.render._withStripped = true`
+      }
+    }
+    // hot-reload
+    if (!isServer && !isProduction) {
+      code +=
+        '\nif (module.hot) {\n' +
+        '  module.hot.accept()\n' +
+        '  if (module.hot.data) {\n' +
+        '     require("' + hotReloadAPIPath + '").rerender("' + options.id + '", module.exports)\n' +
+        '  }\n' +
+        '}'
+    }
+
+    cb(null, code)
+  }).catch(cb)
+}
+
+function toFunction (code) {
+  return 'function (){' + beautify(code, {
+    indent_size: 2 // eslint-disable-line camelcase
+  }) + '}'
+}
+
+function pad (html) {
+  return html.split(/\r?\n/).map(line => `  ${line}`).join('\n')
+}

lib/template-compiler.js

@@ -0,0 +1,9 @@
+// 1. load postcss config
+// 2. transform staticStyle?
+var loadPostcssConfig = require('../../style-compiler/load-postcss-config')
+
+module.exports = () => {
+  return loadPostcssConfig().then(config => {
+    return {}
+  })
+}

lib/template-compiler/index.js

@@ -4,21 +4,26 @@ var defaultOptions = {
   image: 'xlink:href'
 }
 
-module.exports = {
-  _userOptions: null,
-  postTransformNode: el => {
-    var userOptions = module.exports._userOptions
-    var options = userOptions
-      ? Object.assign({}, defaultOptions, userOptions)
-      : defaultOptions
-    for (var tag in options) {
-      if (el.tag === tag && el.attrs) {
-        var attributes = options[tag]
-        if (typeof attributes === 'string') {
-          el.attrs.some(attr => rewrite(attr, attributes))
-        } else if (Array.isArray(attributes)) {
-          attributes.forEach(item => el.attrs.some(attr => rewrite(attr, item)))
-        }
+module.exports = userOptions => {
+  var options = userOptions
+    ? Object.assign({}, defaultOptions, userOptions)
+    : defaultOptions
+
+  return {
+    postTransformNode: node => {
+      transform(node, options)
+    }
+  }
+}
+
+function transform (node, options) {
+  for (var tag in options) {
+    if (node.tag === tag && node.attrs) {
+      var attributes = options[tag]
+      if (typeof attributes === 'string') {
+        node.attrs.some(attr => rewrite(attr, attributes))
+      } else if (Array.isArray(attributes)) {
+        attributes.forEach(item => node.attrs.some(attr => rewrite(attr, item)))
       }
     }
   }