save

Author: yyx990803

lib/component-normalizer.js

@@ -4,8 +4,8 @@
 module.exports = function normalizeComponent (
   rawScriptExports,
   compiledTemplate,
-  scopeId,
-  cssModules
+  injectStyles,
+  scopeId
 ) {
   var esModule
   var scriptExports = rawScriptExports = rawScriptExports || {}
@@ -28,21 +28,32 @@ module.exports = function normalizeComponent (
     options.staticRenderFns = compiledTemplate.staticRenderFns
   }
 
+  if (injectStyles) {
+    var injected = false
+    var cssModules
+    var inject = function () {
+      if (!injected) {
+        injected = true
+        cssModules = injectStyles()
+      }
+      // inject cssModules
+      if (cssModules) {
+        for (var key in cssModules) {
+          this[key] = cssModules[key]
+        }
+      }
+    }
+    var existing = options.beforeCreate
+    options.beforeCreate = existing
+      ? [].concat(existing, inject)
+      : [inject]
+  }
+
   // scopedId
   if (scopeId) {
     options._scopeId = scopeId
   }
 
-  // inject cssModules
-  if (cssModules) {
-    var computed = Object.create(options.computed || null)
-    Object.keys(cssModules).forEach(function (key) {
-      var module = cssModules[key]
-      computed[key] = function () { return module }
-    })
-    options.computed = computed
-  }
-
   return {
     esModule: esModule,
     exports: scriptExports,

lib/loader.js

@@ -286,7 +286,7 @@ module.exports = function (content) {
 
   // add requires for styles
   if (parts.styles.length) {
-    output += '\n/* styles */\n'
+    var styleInjectionCode = 'function __injectVueStyle__ () {\n'
     var hasModules = false
     parts.styles.forEach(function (style, i) {
       // require style
@@ -302,11 +302,11 @@ module.exports = function (content) {
         }
         if (!hasModules) {
           hasModules = true
-          output += 'var cssModules = {}\n'
+          styleInjectionCode += 'var cssModules = {}\n'
         }
         if (moduleName in cssModules) {
           loaderContext.emitError('CSS module name "' + moduleName + '" is not unique!')
-          output += requireString
+          styleInjectionCode += requireString
         } else {
           cssModules[moduleName] = true
 
@@ -317,21 +317,25 @@ module.exports = function (content) {
             requireString += '.locals'
           }
 
-          output += 'cssModules["' + moduleName + '"] = ' + requireString + '\n'
+          styleInjectionCode += 'cssModules["' + moduleName + '"] = ' + requireString + '\n'
         }
       } else {
-        output += requireString + '\n'
+        styleInjectionCode += requireString + '\n'
       }
     })
-    output += '\n'
+    if (hasModules) {
+      styleInjectionCode += `return cssModules`
+    }
+    styleInjectionCode += '}\n'
+    output += styleInjectionCode
   }
 
   // we require the component normalizer function, and call it like so:
   // normalizeComponent(
   //   scriptExports,
   //   compiledTemplate,
-  //   scopeId,
-  //   cssModules
+  //   injectStyles,
+  //   scopeId
   // )
   output += 'var Component = require(' +
     loaderUtils.stringifyRequest(loaderContext, '!' + componentNormalizerPath) +
@@ -365,19 +369,13 @@ module.exports = function (content) {
   }
   output += ',\n'
 
+  // style
+  output += '  /* styles */\n  '
+  output += (parts.styles.length ? '__injectVueStyle__' : 'null') + ',\n'
+
   // scopeId
   output += '  /* scopeId */\n  '
-  output += (hasScoped ? JSON.stringify(moduleId) : 'null') + ',\n'
-
-  // cssModules
-  output += '  /* cssModules */\n  '
-  if (cssModules) {
-    // inject style modules as computed properties
-    output += 'cssModules'
-  } else {
-    output += 'null'
-  }
-  output += '\n'
+  output += (hasScoped ? JSON.stringify(moduleId) : 'null') + '\n'
 
   // close normalizeComponent call
   output += ')\n'

test/test.js

@@ -72,7 +72,12 @@ function test (options, assert) {
           console.log(err[0].data.error.stack)
           expect(err).to.be.null
         }
-        assert(window, interopDefault(window.vueModule), window.vueModule)
+        const module = interopDefault(window.vueModule)
+        const instance = {}
+        if (module.beforeCreate) {
+          module.beforeCreate.call(instance)
+        }
+        assert(window, module, window.vueModule, instance)
       }
     })
   })
@@ -458,11 +463,9 @@ describe('vue-loader', function () {
             localIdentName: localIdentName
           }
         }
-      }, (window) => {
-        var module = window.vueModule
-
+      }, (window, module, raw, instance) => {
         // get local class name
-        var className = module.computed.style().red
+        var className = instance.style.red
         expect(className).to.match(regexToMatch)
 
         // class name in style
@@ -480,7 +483,7 @@ describe('vue-loader', function () {
         expect(style).to.contain('animation: ' + animationName + ' 1s;')
 
         // default module + pre-processor + scoped
-        var anotherClassName = module.computed.$style().red
+        var anotherClassName = instance.$style.red
         expect(anotherClassName).to.match(regexToMatch).and.not.equal(className)
         var id = 'data-v-' + hash('vue-loader/test/fixtures/css-modules.vue')
         expect(style).to.contain('.' + anotherClassName + '[' + id + ']')
@@ -514,7 +517,10 @@ describe('vue-loader', function () {
       }
 
       var output = requireFromString(code, './test.build.js')
-      expect(output.computed.style().red).to.exist
+      var mockInstance = {}
+
+      output.beforeCreate.call(mockInstance)
+      expect(mockInstance.style.red).to.exist
 
       done()
     })