Use same code for HMR with shadowMode

Author: Alan Colon

index.js

@@ -15,7 +15,6 @@ module.exports.pitch = function (remainingRequest) {
   var isProduction = this.minimize || process.env.NODE_ENV === 'production'
   var addStylesClientPath = loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'lib/addStylesClient.js'))
   var addStylesServerPath = loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'lib/addStylesServer.js'))
-  var addStylesShadowPath = loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'lib/addStylesShadow.js'))
 
   var request = loaderUtils.stringifyRequest(this, '!!' + remainingRequest)
   var relPath = path.relative(__dirname, this.resourcePath).replace(/\\/g, '/')
@@ -41,41 +40,41 @@ module.exports.pitch = function (remainingRequest) {
     'if(content.locals) module.exports = content.locals;'
   ]
 
-  // shadowMode is enabled in vue-cli with vue build --target web-component.
-  // exposes the same __inject__ method like SSR
-  if (options.shadowMode) {
-    return shared.concat([
-      '// add CSS to Shadow Root',
-      'var add = require(' + addStylesShadowPath + ').default',
-      'module.exports.__inject__ = function (shadowRoot) {',
-      '  add(' + id + ', content, shadowRoot)',
-      '};'
-    ]).join('\n')
-  } else if (!isServer) {
-    // on the client: dynamic inject + hot-reload
-    var code = [
-      '// add the styles to the DOM',
-      'var add = require(' + addStylesClientPath + ').default',
-      'var update = add(' + id + ', content, ' + isProduction + ', ' + JSON.stringify(options) + ');'
-    ]
-    if (!isProduction) {
-      code = code.concat([
-        '// Hot Module Replacement',
-        'if(module.hot) {',
-        ' // When the styles change, update the <style> tags',
-        ' if(!content.locals) {',
-        '   module.hot.accept(' + request + ', function() {',
-        '     var newContent = require(' + request + ');',
-        "     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
-        '     update(newContent);',
-        '   });',
-        ' }',
-        ' // When the module is disposed, remove the <style> tags',
-        ' module.hot.dispose(function() { update(); });',
-        '}'
-      ])
+  if (!isServer) {
+    var code = function(id, isProduction, options) {
+      // style-loader: Adds some css to the DOM by adding a <style> tag
+      var content = require(REQUEST)
+      var addStylesClient = require(ADD_STYLES_CLIENT_PATH).default
+      var install = function(target) {
+        update = addStylesClient(id, content, isProduction, options, target)
+      }
+      var update = null
+      if (typeof content === 'string') content = [[module.id, content, '']]
+      if (content.locals) {
+        module.exports = content.locals
+        return
+      } else if (module.hot) {
+        module.hot.accept(REQUEST, function() {
+          var newContent = require(REQUEST)
+          if (typeof newContent === 'string') newContent = [[module.id, newContent, '']]
+          update(newContent)
+        })
+        module.hot.dispose(function() {
+          update();
+        })
+      }
+      if (options.shadowMode) {
+        module.exports.__inject__ = function(shadowRoot) {
+          install(shadowRoot)
+        }
+      } else {
+        install(typeof document !== 'undefined' && document.head)
+      }
     }
-    return shared.concat(code).join('\n')
+    return `(${code})(${id},${isProduction},${JSON.stringify(options)})`
+      .split('REQUEST').join(request)
+      .split('ADD_STYLES_CLIENT_PATH').join(addStylesClientPath)
+
   } else {
     // on the server: attach to Vue SSR context
     if (isVue) {

lib/addStylesClient.js

@@ -49,9 +49,11 @@ var ssrIdKey = 'data-vue-ssr-id'
 // tags it will allow on a page
 var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
 
-export default function addStylesClient (parentId, list, _isProduction, _options) {
+export default function addStylesClient (parentId, list, _isProduction, _options, _styleParent) {
   isProduction = _isProduction
 
+  if (_styleParent) head = _styleParent
+
   options = _options || {}
 
   var styles = listToStyles(parentId, list)

lib/addStylesShadow.js

@@ -1,6 +1,6 @@
 {
-  "name": "vue-style-loader",
-  "version": "4.1.2",
+  "name": "@alancnet/vue-style-loader",
+  "version": "4.1.4",
   "author": "Evan You",
   "description": "Vue.js style loader module for webpack",
   "repository": {
@@ -22,5 +22,8 @@
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "conventional-changelog-cli": "^2.0.1",
     "jest": "^22.1.4"
+  },
+  "jest": {
+    "testURL": "http://localhost/"
   }
 }