Add injectInImportOrder option

README.md

@@ -30,6 +30,12 @@ This is a fork based on [style-loader](https://github.com/webpack/style-loader).
 
   Type: `boolean`. Add `data-vue-ssr-id` attribute to injected `<style>` tags even when not in Node.js. This can be used with pre-rendering (instead of SSR) to avoid duplicate style injection on hydration.
 
+- **injectInImportOrder** (draft):
+
+  Type: `boolean`. Inject HTML DOM Style in import order like in production with ExtractTextPlugin. When value is `true`, `ssrId` option is forced to `true` too.
+
+  Developed by Ilhasoft's Web Team.
+
 ## Differences from `style-loader`
 
 ### Server-Side Rendering Support

index.js

@@ -6,6 +6,7 @@
 var loaderUtils = require('loader-utils')
 var path = require('path')
 var hash = require('hash-sum')
+var beforeOrder = [];
 
 module.exports = function () {}
 
@@ -18,9 +19,17 @@ module.exports.pitch = function (remainingRequest) {
   var addStylesServerPath = loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'lib/addStylesServer.js'))
 
   var request = loaderUtils.stringifyRequest(this, '!!' + remainingRequest)
-  var id = JSON.stringify(hash(request + path.relative(__dirname, this.resourcePath)))
+  var id = hash(request + path.relative(__dirname, this.resourcePath))
   var options = loaderUtils.getOptions(this) || {}
 
+  // Append id in beforeOrder list
+  beforeOrder.push(id);
+
+  // force ssrId option when injectInImportOrder is true
+  if (options.injectInImportOrder) {
+    options.ssrId = true;
+  }
+
   // direct css import from js --> direct, or manually call `styles.__inject__(ssrContext)` with `manualInject` option
   // css import from vue file --> component lifecycle linked
   // style embedded in vue file --> component lifecycle linked
@@ -40,7 +49,7 @@ module.exports.pitch = function (remainingRequest) {
     // on the client: dynamic inject + hot-reload
     var code = [
       '// add the styles to the DOM',
-      'var update = require(' + addStylesClientPath + ')(' + id + ', content, ' + isProduction + ', ' + JSON.stringify(options) + ');'
+      'var update = require(' + addStylesClientPath + ')(' + JSON.stringify(id) + ', content, ' + isProduction + ', ' + JSON.stringify(options) + ', ' + JSON.stringify(beforeOrder.slice(0, -1)) + ');'
     ]
     if (!isProduction) {
       code = code.concat([
@@ -69,13 +78,13 @@ module.exports.pitch = function (remainingRequest) {
         '// add CSS to SSR context',
         'var add = require(' + addStylesServerPath + ')',
         'module.exports.__inject__ = function (context) {',
-        '  add(' + id + ', content, ' + isProduction + ', context)',
+        '  add(' + JSON.stringify(id) + ', content, ' + isProduction + ', context)',
         '};'
       ]).join('\n')
     } else {
       // normal import
       return shared.concat([
-        'require(' + addStylesServerPath + ')(' + id + ', content, ' + isProduction + ')'
+        'require(' + addStylesServerPath + ')(' + JSON.stringify(id) + ', content, ' + isProduction + ')'
       ]).join('\n')
     }
   }

lib/addStylesClient.js

@@ -40,19 +40,23 @@ var stylesInDom = {/*
 var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
 var singletonElement = null
 var singletonCounter = 0
+var parentId = null
 var isProduction = false
 var noop = function () {}
 var options = null
+var beforeOrder = null
 var ssrIdKey = 'data-vue-ssr-id'
 
 // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
 // tags it will allow on a page
 var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
 
-module.exports = function (parentId, list, _isProduction, _options) {
+module.exports = function (_parentId, list, _isProduction, _options, _beforeOrder) {
+  parentId = _parentId
   isProduction = _isProduction
 
   options = _options || {}
+  beforeOrder = _beforeOrder
 
   var styles = listToStyles(parentId, list)
   addStylesToDom(styles)
@@ -111,7 +115,37 @@ function addStylesToDom (styles /* Array<StyleObject> */) {
 function createStyleElement () {
   var styleElement = document.createElement('style')
   styleElement.type = 'text/css'
-  head.appendChild(styleElement)
+
+  if (options.injectInImportOrder) {
+    var allStyleElems = document.querySelectorAll('style[' + ssrIdKey + ']');
+    var beforeStyleElem = null;
+
+    for (var i = beforeOrder.length - 1; i >= 0; i--) {
+      var before = beforeOrder[i];
+
+      for (var j = allStyleElems.length - 1; j >= 0; j--) {
+        var styleElem = allStyleElems[j];
+        var styleElemId = styleElem.getAttribute(ssrIdKey).split(':')[0];
+
+        if (before === styleElemId) {
+          beforeStyleElem = styleElem;
+          break;
+        }
+      }
+
+      if (beforeStyleElem) {
+        break;
+      }
+    }
+
+    if (beforeStyleElem) {
+      head.insertBefore(styleElement, beforeStyleElem.nextElementSibling);
+    } else {
+      head.appendChild(styleElement)
+    }
+  } else {
+    head.appendChild(styleElement)
+  }
   return styleElement
 }