Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support insertInto option similar to style-loader?

See original GitHub issue

Would this package be open to adding support for an insertInto option similar to what style-loader supports, which allows clients to specify a selector for the DOM node into which they want link tags inserted inside of? By default, it would be the head.

We have a scenario where some orchestrated content being injected into an existing app inside of <body> and that content contains it’s main app.css file. However, any async-loaded CSS files break the expected cascade because they go into <head>. So basically, we end up with a DOM such as:

<html> 
  <head>
    ...
    <!-- Injected asyncronously -->
    <link rel="stylesheet" href="async.css" />
  </head>
  <body>  
    ...
    <!-- Orchestrated content rendered server side on page load -->
    <div class="orchestrated-content">
        <link rel="stylesheet" href="app.css" />
        ...
    </div>
    ...
  </body>
</head>

When the normal order should be app.css -> async.css.

I’m planning to get a PR together, but the solution is fairly straightforward it seems. I’ve modified mainTemplate.hooks.requireEnsure.tap locally to essentially generate JS code that does the following, and it seems to work without issue:

// Assuming no config option passed
var parent = document.querySelector("head");
if (parent) { parent.appendChild(linkTag); }
else { reject("Invalid parent element"); }

// If the user passes config option: { insertInto: ".style-container" }
var parent = document.querySelector(".style-container");
if (parent) { parent.appendChild(linkTag); }
else { reject("Invalid parent element"); }

Issue Analytics

State:
Created 4 years ago
Reactions:7
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

brophdawg11commented, Jun 27, 2019

Sorry for the delay - I just updated the PR (https://github.com/webpack-contrib/mini-css-extract-plugin/pull/371) with the new approach suggested by @evilebottnawi

0reactions

alexander-akaitcommented, Oct 15, 2020

https://github.com/webpack-contrib/mini-css-extract-plugin/pull/609

Top Results From Across the Web

style-loader - webpack

Injects styles into the DOM using multiple <style></style> on demand. We recommend following .lazy.css naming convention for lazy styles and the .css for...

How can I insert the style into async container DOM using ...

In style -loader insert function create a shadow-DOM container to place the generated style; In actual React app shadow-DOM, move the style ...

style-loader - npm

Start using style-loader in your project by running `npm i style-loader`. There are 14755 other projects in the npm registry using style-loader.

style-loader - webpack 3 documentation

The style-loader injects the styles lazily making them useable on-demand via style.use() ... (similar to other file types, i.e. .useable.less and .less )....

Loading Styles - SurviveJS

In both cases you would add the loader after css-loader within the loader definition. ... Often webpack is well supported by the options....