feat: allow to pass options to insert function through style.use()

Allow to pass additional parameter to `style.use(anything)` which will be passed to `insert` function. This allows to insert each tag in different places and especially useful for Shadow DOM

Resolves #328

README.md

@@ -540,6 +540,46 @@ module.exports = {
 
 Insert styles at top of `head` tag.
 
+You can pass any parameters to `style.use(anythingHere)` and this value will be passed to `insert` function.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.css$/i,
+ use: [
+ {
+ loader: "style-loader",
+ options: {
+ insert: function insertIntoTarget(element, options) {
+ var parent = options.target || document.querySelector("head");
+ parent.appendChild(element);
+ },
+ },
+ },
+ "css-loader",
+ ],
+ },
+ ],
+ },
+};
+```
+
+Insert styles to the provided element or to the `head` tag if target isn't provided. Now you can inject styles into Shadow DOM (or any other element).
+
+**component.js**
+
+```js
+import style from "./file.css";
+
+style.use({
+ target: document.querySelector('#myShadowDom').shadowRoot,
+})
+```
+
 ### `styleTagTransform`
 
 Type: `String | Function`

src/index.js

@@ -125,7 +125,8 @@ ${getInsertOptionCode(insertType, options)}
 options.domAPI = ${getdomAPI(isAuto)};
 options.insertStyleElement = insertStyleElement;
 
-exported.use = function() {
+exported.use = function(insertOptions) {
+ options.insertOptions = insertOptions || {};
  if (!(refs++)) {
  update = API(content, options);
  }

src/runtime/insertStyleElement.js

@@ -4,7 +4,7 @@ function insertStyleElement(options) {
 
  options.setAttributes(style, options.attributes);
 
- options.insert(style);
+ options.insert(style, options.insertOptions);
 
  return style;
 }