Skip to content

Commit

Permalink
refactor: code
Browse files Browse the repository at this point in the history
  • Loading branch information
alexander-akait authored Sep 14, 2021
1 parent caf66a0 commit cdf0ba7
Show file tree
Hide file tree
Showing 13 changed files with 324 additions and 78 deletions.
142 changes: 135 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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**

Expand All @@ -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);
},
},
Expand All @@ -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`
Expand Down Expand Up @@ -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.
Expand Down
3 changes: 2 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
3 changes: 1 addition & 2 deletions src/runtime/insertStyleElement.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/runtime/styleDomAPI.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
63 changes: 63 additions & 0 deletions test/__snapshots__/lazyStyleTag-options.test.js.snap
Original file line number Diff line number Diff line change
@@ -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 []`;
8 changes: 8 additions & 0 deletions test/fixtures/lazy-options-use-unuse.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import style from './style.css';

style.use({
insertInto: document.body,
additionalStyles: '.some-element {color: red;}'
});

style.unuse();
File renamed without changes.
53 changes: 0 additions & 53 deletions test/lazyStyleTag-insertOptions.test.js

This file was deleted.

Loading

0 comments on commit cdf0ba7

Please sign in to comment.