refactor: code

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();