Skip to content

Support insertInto option similar to style-loader? #370

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.

Sign up for GitHub

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

Jump to bottom
Closed
brophdawg11 opened this issue Mar 29, 2019 · 7 comments
Closed

Support insertInto option similar to style-loader? #370

brophdawg11 opened this issue Mar 29, 2019 · 7 comments
Labels
priority: 4 (nice to have) semver: minor severity: 4 (inconvenient) type: feature

Comments

@brophdawg11
Copy link

brophdawg11 commented Mar 29, 2019 •
edited
Loading

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"); }
@brophdawg11 brophdawg11 mentioned this issue Mar 29, 2019
Merged
brophdawg11 added a commit to brophdawg11/mini-css-extract-plugin that referenced this issue Apr 1, 2019
@brophdawg11
feat(ordering): add support for insertInto option
0846785 
This adds an new `insertInto` option that is optional and backards-compatible.  Specifying a CSS selector allows the user to specify a DOM node into which the async-loaded <link> tags should be inserted.

Closes webpack-contrib#370, related to webpack-contrib#328,webpack-contrib#331
brophdawg11 added a commit to brophdawg11/mini-css-extract-plugin that referenced this issue Apr 1, 2019
@brophdawg11
feat(ordering): add support for insertInto option
c1f7c86 
This adds an new `insertInto` option that is optional and backards-compatible.  Specifying a CSS selector allows the user to specify a DOM node into which the async-loaded <link> tags should be inserted.

Closes webpack-contrib#370, related to webpack-contrib#328,webpack-contrib#331
@brophdawg11 brophdawg11 mentioned this issue Apr 1, 2019
Closed
6 tasks
@alexander-akait
Copy link
Member

Yep, we can implement this 👍 so it is feature

@ScriptedAlchemy
Copy link
Contributor

@brophdawg11 would the style need to be injected in the right order as well? so async.css go under app.css

@jens-duttke
Copy link

A functionality like the insertAt of style-loader would make more sense, since you can specify the position even more exact.

I have the use-case that I have a large header (different device- and SEO-specific meta tags which are less important than the CSS references).
So I want to inject the CSS-Links directly after the title-tag.

Using

    insertAt: {
        after: 'title'
    }

that would be easily possible.

To achive the usecase of @brophdawg11, what about:

    insertAt: {
        appendTo: '.style-container'
    }

?

I think appendTo, before and after, would cover all use-cases.

@JuliaUsanova
Copy link

Hey, thank you for the awesome plugin!
really waiting for this feature, when are you planning to release it?

brophdawg11 added a commit to brophdawg11/mini-css-extract-plugin that referenced this issue Jun 27, 2019
@brophdawg11
feat(ordering): add support for insertInto option
e0ec27d 
This adds an new `insertInto` option that is optional and backards-compatible.  Specifying a CSS selector allows the user to specify a DOM node into which the async-loaded <link> tags should be inserted.

Closes webpack-contrib#370, related to webpack-contrib#328,webpack-contrib#331
@brophdawg11
Copy link
Author

Sorry for the delay - I just updated the PR (#371) with the new approach suggested by @evilebottnawi

@brophdawg11 brophdawg11 mentioned this issue Jun 27, 2019
Merged
@alexander-akait alexander-akait mentioned this issue Oct 11, 2019
Closed
@jens-duttke
Copy link

Is there a chance to get an option, to insert the <link> tags right after the <title> tag? Or should I create a separate issue for that?

@alexander-akait
Copy link
Member

#609

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
priority: 4 (nice to have) semver: minor severity: 4 (inconvenient) type: feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@brophdawg11 @JuliaUsanova @alexander-akait @jens-duttke @ScriptedAlchemy