Skip to content

Commit 8b73c72

Browse files
feat: add insert option
adding option to enable styles to be injected in locations other than the head
1 parent 1ffc393 commit 8b73c72

18 files changed

+1239
-35
lines changed

README.md

+32
Original file line numberDiff line numberDiff line change
@@ -578,6 +578,38 @@ module.exports = {
578578
};
579579
```
580580

581+
### insert
582+
583+
Type: `Function`
584+
Default: `head`
585+
586+
By default, the `extract-css-chunks-plugin` appends styles (`<link>` elements) to `document.head` of the current `window`.
587+
588+
However in some circumstances it might be necessary to have finer control over the append target or even delay `link` elements instertion. For example this is the case when you asynchronously load styles for an application that runs inside of an iframe. In such cases `insert` can be configured to be a function or a custom selector.
589+
590+
If you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure that the parent document has sufficient access rights to reach into the frame document and append elements to it.
591+
592+
#### `insert`
593+
594+
Allows to override default behavior and insert styles at any position.
595+
596+
> ⚠ Do not forget that this code will run in the browser alongside your application. Since not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc we recommend you to use only ECMA 5 features and syntax.
597+
598+
> ⚠ The `insert` function is serialized to string and passed to the plugin. This means that it won't have access to the scope of the webpack configuration module.
599+
600+
```js
601+
new MiniCssExtractPlugin({
602+
insert: function insert(linkTag) {
603+
const reference = document.querySelector('#some-element');
604+
if (reference) {
605+
reference.parentNode.insertBefore(linkTag, reference);
606+
}
607+
},
608+
});
609+
```
610+
611+
A new `<link>` element will be inserted before the element with id `some-element`.
612+
581613
### Media Query Plugin
582614

583615
If you'd like to extract the media queries from the extracted CSS (so mobile users don't need to load desktop or tablet specific CSS anymore) you should use one of the following plugins:

jest.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module.exports = {
22
testURL: 'http://localhost/',
3+
preset: 'jest-puppeteer',
34
transformIgnorePatterns: ['/node_modules/', '<rootDir>/dist/'],
45
watchPathIgnorePatterns: ['<rootDir>/test/js'],
56
};

0 commit comments

Comments
 (0)