Skip to content

Commit f8ef63b

Browse files
authoredSep 14, 2021
feat: allow to pass options to insert function through style.use() (#535)
1 parent b21d81a commit f8ef63b

6 files changed

+104
-3
lines changed
 

‎README.md

+40
Original file line numberDiff line numberDiff line change
@@ -540,6 +540,46 @@ module.exports = {
540540

541541
Insert styles at top of `head` tag.
542542

543+
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.
544+
545+
**webpack.config.js**
546+
547+
```js
548+
module.exports = {
549+
module: {
550+
rules: [
551+
{
552+
test: /\.css$/i,
553+
use: [
554+
{
555+
loader: "style-loader",
556+
options: {
557+
insert: function insertIntoTarget(element, options) {
558+
var parent = options.target || document.querySelector("head");
559+
parent.appendChild(element);
560+
},
561+
},
562+
},
563+
"css-loader",
564+
],
565+
},
566+
],
567+
},
568+
};
569+
```
570+
571+
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).
572+
573+
**component.js**
574+
575+
```js
576+
import style from "./file.css";
577+
578+
style.use({
579+
target: document.querySelector('#myShadowDom').shadowRoot,
580+
})
581+
```
582+
543583
### `styleTagTransform`
544584

545585
Type: `String | Function`

‎src/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,8 @@ ${getInsertOptionCode(insertType, options)}
125125
options.domAPI = ${getdomAPI(isAuto)};
126126
options.insertStyleElement = insertStyleElement;
127127
128-
exported.use = function() {
128+
exported.use = function(insertOptions) {
129+
options.insertOptions = insertOptions;
129130
if (!(refs++)) {
130131
update = API(content, options);
131132
}

‎src/runtime/insertStyleElement.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ function insertStyleElement(options) {
44

55
options.setAttributes(style, options.attributes);
66

7-
options.insert(style);
7+
options.insert(style, options.insertOptions);
88

99
return style;
1010
}

‎src/runtime/styleDomAPI.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ function apply(style, options, obj) {
1818

1919
// For old IE
2020
/* istanbul ignore if */
21-
options.styleTagTransform(css, style);
21+
options.styleTagTransform(css, style, options.insertOptions);
2222
}
2323

2424
function removeStyleElement(style) {

‎test/fixtures/lazy-insertOptions.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import style from './style.css';
2+
3+
style.use({
4+
insertInto: document.body,
5+
additionalStyles: '.some-element {color: red;}'
6+
});
7+
+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* eslint-env browser */
2+
3+
import {
4+
compile,
5+
getCompiler,
6+
getEntryByInjectType,
7+
getErrors,
8+
getWarnings,
9+
runInJsDom,
10+
} from "./helpers/index";
11+
12+
describe('lazyStyleTag insertOptions', () => {
13+
it(`should pass "insertOption" to "insert" function`, async () => {
14+
expect.assertions(3);
15+
16+
const entry = getEntryByInjectType("insertOptions.js", 'lazyStyleTag');
17+
const compiler = getCompiler(entry, {
18+
injectType: 'lazyStyleTag',
19+
insert: (styleTag, options) => {
20+
options.insertInto.appendChild(styleTag);
21+
}
22+
});
23+
const stats = await compile(compiler);
24+
25+
runInJsDom("main.bundle.js", compiler, stats, (dom) => {
26+
expect(dom.serialize()).toMatchSnapshot("DOM");
27+
});
28+
29+
expect(getWarnings(stats)).toMatchSnapshot("warnings");
30+
expect(getErrors(stats)).toMatchSnapshot("errors");
31+
});
32+
33+
it(`should pass "insertOption" to "styleTagTransform" function`, async () => {
34+
expect.assertions(3);
35+
36+
const entry = getEntryByInjectType("insertOptions.js", 'lazyStyleTag');
37+
const compiler = getCompiler(entry, {
38+
injectType: 'lazyStyleTag',
39+
styleTagTransform: (css, styleTag, options) => {
40+
// eslint-disable-next-line no-param-reassign
41+
styleTag.innerHTML = `${css}.${options.additionalStyles}\n`;
42+
}
43+
});
44+
const stats = await compile(compiler);
45+
46+
runInJsDom("main.bundle.js", compiler, stats, (dom) => {
47+
expect(dom.serialize()).toMatchSnapshot("DOM");
48+
});
49+
50+
expect(getWarnings(stats)).toMatchSnapshot("warnings");
51+
expect(getErrors(stats)).toMatchSnapshot("errors");
52+
});
53+
});

0 commit comments

Comments
 (0)