feat: add custom attrs to <style></style>

Author: ywmail

Diff for: README.md

@@ -30,6 +30,10 @@ 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.
 
+- **attrs** (4.0.1+):
+
+  Type: `object`. Add custom attribute to injected `<style>` tags.
+
 ## Differences from `style-loader`
 
 ### Server-Side Rendering Support

Diff for: lib/addStylesClient.js

@@ -53,9 +53,10 @@ export default function addStylesClient (parentId, list, _isProduction, _options
   isProduction = _isProduction
 
   options = _options || {}
+  options.attrs = typeof options.attrs === "object" ? options.attrs : {}
 
   var styles = listToStyles(parentId, list)
-  addStylesToDom(styles)
+  addStylesToDom(styles, options)
 
   return function update (newList) {
     var mayRemove = []
@@ -67,7 +68,7 @@ export default function addStylesClient (parentId, list, _isProduction, _options
     }
     if (newList) {
       styles = listToStyles(parentId, newList)
-      addStylesToDom(styles)
+      addStylesToDom(styles, options)
     } else {
       styles = []
     }
@@ -83,7 +84,7 @@ export default function addStylesClient (parentId, list, _isProduction, _options
   }
 }
 
-function addStylesToDom (styles /* Array<StyleObject> */) {
+function addStylesToDom (styles /* Array<StyleObject> */, options) {
   for (var i = 0; i < styles.length; i++) {
     var item = styles[i]
     var domStyle = stylesInDom[item.id]
@@ -93,29 +94,37 @@ function addStylesToDom (styles /* Array<StyleObject> */) {
         domStyle.parts[j](item.parts[j])
       }
       for (; j < item.parts.length; j++) {
-        domStyle.parts.push(addStyle(item.parts[j]))
+        domStyle.parts.push(addStyle(item.parts[j], options))
       }
       if (domStyle.parts.length > item.parts.length) {
         domStyle.parts.length = item.parts.length
       }
     } else {
       var parts = []
       for (var j = 0; j < item.parts.length; j++) {
-        parts.push(addStyle(item.parts[j]))
+        parts.push(addStyle(item.parts[j], options))
       }
       stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
     }
   }
 }
 
-function createStyleElement () {
+function createStyleElement (options) {
   var styleElement = document.createElement('style')
   styleElement.type = 'text/css'
+  addAttrs(styleElement, options.attrs);
   head.appendChild(styleElement)
   return styleElement
 }
 
-function addStyle (obj /* StyleObjectPart */) {
+function addAttrs (el, attrs) {
+	Object.keys(attrs).forEach(function (key) {
+		el.setAttribute(key, attrs[key]);
+	});
+}
+
+function addStyle (obj /* StyleObjectPart */, options) {
+
   var update, remove
   var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
 
@@ -137,12 +146,12 @@ function addStyle (obj /* StyleObjectPart */) {
   if (isOldIE) {
     // use singleton mode for IE9.
     var styleIndex = singletonCounter++
-    styleElement = singletonElement || (singletonElement = createStyleElement())
+    styleElement = singletonElement || (singletonElement = createStyleElement(options))
     update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
     remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
   } else {
     // use multi-style-tag mode in all other cases
-    styleElement = createStyleElement()
+    styleElement = createStyleElement(options)
     update = applyToTag.bind(null, styleElement)
     remove = function () {
       styleElement.parentNode.removeChild(styleElement)