Skip to content

feat: Adding insert option #495

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -578,6 +578,38 @@ module.exports = {
};
```

### insert

Type: `Function`
Default: `head`

By default, the `extract-css-chunks-plugin` appends styles (`<link>` elements) to `document.head` of the current `window`.

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.

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.

#### `insert`

Allows to override default behavior and insert styles at any position.

> ⚠ 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.

> ⚠ 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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I find this a bit weird and think this could be confusing the users.

Doesn't something simple like insert: "head" | "body" fulfill the use case?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Initially, I supported both use cases. I can reapply that work?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hm, maybe insert: "head" | "querySelector" | Function, querySelector can be body/#head/.class/etc

Copy link

@giuseppeg giuseppeg May 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sokra I started to work on this feature because I needed to be able to control the insertion bits, specifically inject inside an iframe.

@evilebottnawi's suggestion sounds good to me. Can we merge this PR?


```js
new MiniCssExtractPlugin({
insert: function insert(linkTag) {
const reference = document.querySelector('#some-element');
if (reference) {
reference.parentNode.insertBefore(linkTag, reference);
}
},
});
```

A new `<link>` element will be inserted before the element with id `some-element`.

### Media Query Plugin

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:
Expand Down
1 change: 1 addition & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
module.exports = {
testURL: 'http://localhost/',
preset: 'jest-puppeteer',
transformIgnorePatterns: ['/node_modules/', '<rootDir>/dist/'],
watchPathIgnorePatterns: ['<rootDir>/test/js'],
};
Loading