Skip to content

Commit

Permalink
feat: allow to pass options to insert function through style.use() (
Browse files Browse the repository at this point in the history
  • Loading branch information
OlegWock authored Sep 14, 2021
1 parent b21d81a commit f8ef63b
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 3 deletions.
40 changes: 40 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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. These options will be passed to `styleTagTransform` function too.

**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`
Expand Down
3 changes: 2 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
2 changes: 1 addition & 1 deletion src/runtime/insertStyleElement.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ function insertStyleElement(options) {

options.setAttributes(style, options.attributes);

options.insert(style);
options.insert(style, options.insertOptions);

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.styleTagTransform(css, style, options.insertOptions);
}

function removeStyleElement(style) {
Expand Down
7 changes: 7 additions & 0 deletions test/fixtures/lazy-insertOptions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import style from './style.css';

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

53 changes: 53 additions & 0 deletions test/lazyStyleTag-insertOptions.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/* eslint-env browser */

import {
compile,
getCompiler,
getEntryByInjectType,
getErrors,
getWarnings,
runInJsDom,
} from "./helpers/index";

describe('lazyStyleTag insertOptions', () => {
it(`should pass "insertOption" to "insert" function`, async () => {
expect.assertions(3);

const entry = getEntryByInjectType("insertOptions.js", 'lazyStyleTag');
const compiler = getCompiler(entry, {
injectType: 'lazyStyleTag',
insert: (styleTag, options) => {
options.insertInto.appendChild(styleTag);
}
});
const stats = await compile(compiler);

runInJsDom("main.bundle.js", compiler, stats, (dom) => {
expect(dom.serialize()).toMatchSnapshot("DOM");
});

expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});

it(`should pass "insertOption" to "styleTagTransform" function`, async () => {
expect.assertions(3);

const entry = getEntryByInjectType("insertOptions.js", 'lazyStyleTag');
const compiler = getCompiler(entry, {
injectType: 'lazyStyleTag',
styleTagTransform: (css, styleTag, options) => {
// eslint-disable-next-line no-param-reassign
styleTag.innerHTML = `${css}.${options.additionalStyles}\n`;
}
});
const stats = await compile(compiler);

runInJsDom("main.bundle.js", compiler, stats, (dom) => {
expect(dom.serialize()).toMatchSnapshot("DOM");
});

expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
});

0 comments on commit f8ef63b

Please sign in to comment.