refactor: code

Author: alexander-akait

README.md

@@ -540,7 +540,7 @@ 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. These options will be passed to `styleTagTransform` function too. 
+You can pass any parameters to `style.use(options)` and this value will be passed to `insert` and `styleTagTransform` functions.
 
 **webpack.config.js**
 
@@ -554,8 +554,14 @@ module.exports = {
           {
             loader: "style-loader",
             options: {
+              injectType: "lazyStyleTag",
+              // Do not forget that this code will be used in the browser and
+              // not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc,
+              // we recommend use only ECMA 5 features,
+              // but it is depends what browsers you want to support
               insert: function insertIntoTarget(element, options) {
-                var parent = options.target || document.querySelector("head");
+                var parent = options.target || document.head;
+
                 parent.appendChild(element);
               },
             },
@@ -570,14 +576,51 @@ module.exports = {
 
 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**
+**custom-square.css**
+
+```css
+div {
+  width: 50px;
+  height: 50px;
+  background-color: red;
+}
+```
+
+**custom-square.js**
 
 ```js
-import style from "./file.css";
+import customSquareStyles from "./custom-square.css";
+
+class CustomSquare extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: "open" });
 
-style.use({
-  target: document.querySelector('#myShadowDom').shadowRoot,
-})
+    const divElement = document.createElement("div");
+
+    divElement.textContent = "Text content.";
+
+    this.shadowRoot.appendChild(divElement);
+
+    customSquareStyles.use({ target: this.shadowRoot });
+
+    // You can override injected styles
+    const bgPurple = new CSSStyleSheet();
+    const width = this.getAttribute("w");
+    const height = this.getAttribute("h");
+
+    bgPurple.replace(`div { width: ${width}px; height: ${height}px; }`);
+
+    this.shadowRoot.adoptedStyleSheets = [bgPurple];
+
+    // `divElement` will have `100px` width, `100px` height and `red` background color
+  }
+}
+
+customElements.define("custom-square", CustomSquare);
+
+export default CustomSquare;
 ```
 
 ### `styleTagTransform`
@@ -1033,6 +1076,91 @@ module.exports = {
 };
 ```
 
+#### Custom Elements (Shadow DOM)
+
+You can define custom target for your styles for the `lazyStyleTag` type.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [
+          {
+            loader: "style-loader",
+            options: {
+              injectType: "lazyStyleTag",
+              // Do not forget that this code will be used in the browser and
+              // not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc,
+              // we recommend use only ECMA 5 features,
+              // but it is depends what browsers you want to support
+              insert: function insertIntoTarget(element, options) {
+                var parent = options.target || document.head;
+
+                parent.appendChild(element);
+              },
+            },
+          },
+          "css-loader",
+        ],
+      },
+    ],
+  },
+};
+```
+
+Insert styles to the provided element or to the `head` tag if target isn't provided.
+
+**custom-square.css**
+
+```css
+div {
+  width: 50px;
+  height: 50px;
+  background-color: red;
+}
+```
+
+**custom-square.js**
+
+```js
+import customSquareStyles from "./custom-square.css";
+
+class CustomSquare extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: "open" });
+
+    const divElement = document.createElement("div");
+
+    divElement.textContent = "Text content.";
+
+    this.shadowRoot.appendChild(divElement);
+
+    customSquareStyles.use({ target: this.shadowRoot });
+
+    // You can override injected styles
+    const bgPurple = new CSSStyleSheet();
+    const width = this.getAttribute("w");
+    const height = this.getAttribute("h");
+
+    bgPurple.replace(`div { width: ${width}px; height: ${height}px; }`);
+
+    this.shadowRoot.adoptedStyleSheets = [bgPurple];
+
+    // `divElement` will have `100px` width, `100px` height and `red` background color
+  }
+}
+
+customElements.define("custom-square", CustomSquare);
+
+export default CustomSquare;
+```
+
 ## Contributing
 
 Please take a moment to read our contributing guidelines if you haven't yet done so.

src/index.js

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

src/runtime/insertStyleElement.js

@@ -3,8 +3,7 @@ function insertStyleElement(options) {
   const style = document.createElement("style");
 
   options.setAttributes(style, options.attributes);
-
-  options.insert(style, options.insertOptions);
+  options.insert(style, options.options);
 
   return style;
 }

src/runtime/styleDomAPI.js

@@ -18,7 +18,7 @@ function apply(style, options, obj) {
 
   // For old IE
   /* istanbul ignore if  */
-  options.styleTagTransform(css, style, options.insertOptions);
+  options.styleTagTransform(css, style, options.options);
 }
 
 function removeStyleElement(style) {

test/__snapshots__/lazyStyleTag-options.test.js.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lazyStyleTag options should pass "options" to "insert" function and unuse: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`lazyStyleTag options should pass "options" to "insert" function and unuse: errors 1`] = `Array []`;
+
+exports[`lazyStyleTag options should pass "options" to "insert" function and unuse: warnings 1`] = `Array []`;
+
+exports[`lazyStyleTag options should pass "options" to "insert" function: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+<style>body {
+  color: red;
+}
+</style></body></html>"
+`;
+
+exports[`lazyStyleTag options should pass "options" to "insert" function: errors 1`] = `Array []`;
+
+exports[`lazyStyleTag options should pass "options" to "insert" function: warnings 1`] = `Array []`;
+
+exports[`lazyStyleTag options should pass "options" to "styleTagTransform" function: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<style>body {
+  color: red;
+}
+
+.some-element {color: red;}
+</style></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`lazyStyleTag options should pass "options" to "styleTagTransform" function: errors 1`] = `Array []`;
+
+exports[`lazyStyleTag options should pass "options" to "styleTagTransform" function: warnings 1`] = `Array []`;

test/fixtures/lazy-options-use-unuse.js

@@ -0,0 +1,8 @@
+import style from './style.css';
+
+style.use({
+  insertInto: document.body,
+  additionalStyles: '.some-element {color: red;}'
+});
+
+style.unuse();