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

README.md

@@ -8,7 +8,7 @@ This is a fork based on [style-loader](https://github.com/webpack/style-loader).
 
  Type: `boolean`. When importing the style from a non-vue-file, by default the style is injected as a side effect of the import. When `manualInject` is true, the imported style object exposes a `__inject__` method, which can then be called manually at appropriate timing. If called on the server, the method expects one argument which is the `ssrContext` to attach styles to.
 
- ``` js
+ ```js
  import styles from 'styles.scss'
 
  export default {
@@ -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.
 
+- **attributes** (4.0.1+):
+
+ Type: `object`. Add custom attribute to injected `<style>` tags.
+
 ## Differences from `style-loader`
 
 ### Server-Side Rendering Support

lib/addStylesClient.js

@@ -53,9 +53,10 @@ export default function addStylesClient (parentId, list, _isProduction, _options
  isProduction = _isProduction
 
  options = _options || {}
+ options.attributes = typeof options.attributes === "object" ? options.attributes : {}
 
  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'
+ addAttributes(styleElement, options.attributes);
  head.appendChild(styleElement)
  return styleElement
 }
 
-function addStyle (obj /* StyleObjectPart */) {
+function addAttributes (el, attributes) {
+ Object.keys(attributes).forEach(function (key) {
+ el.setAttribute(key, attributes[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)