Add feature for insert option absolute path to function like in style-loader

[KislyakovDS]

Feature Proposal

Add feature for insert option, which allows to setup absolute path to custom function that allows to override default behavior and insert styles at any position, like in style-loader { insert: require.resolve("modulePath") } https://webpack.js.org/loaders/style-loader/#insert

Feature Use Case

I am using style-loader insert option with require.resolve("modulePath") for my development mode, and I want same option in mini-css-extract-plugin for production build

Please paste the results of npx webpack-cli info here, and mention other relevant information

    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.54)
    Internet Explorer: 11.0.19041.1566
  Packages:
    clean-webpack-plugin: ^3.0.0 => 3.0.0
    css-minimizer-webpack-plugin: ^1.3.0 => 1.3.0
    html-webpack-plugin: ^5.2.0 => 5.3.2
    terser-webpack-plugin: ^5.1.4 => 5.2.4
    webpack: ^5.72.0 => 5.72.0
    webpack-bundle-analyzer: ^4.4.0 => 4.4.2
    webpack-cli: ^4.5.0 => 4.8.0
    webpack-dev-server: ^4.8.1 => 4.8.1
    webpack-merge: ^5.7.3 => 5.8.0

[alexander-akait]

@KislyakovDS Do you want it for async chunks? Because initial chunks just extracted and you need to insert the link tag in your HTML template, can you describe use case?

[KislyakovDS]

I would like similar option for mini-css-extract-plugin to work with shadow-dom. Example how it works with style-loader

./webpack.config.js

{
  loader: "style-loader",
  options: {
    insert: require.resolve("./src/util/style-loader.ts"),
  },
},

./src/util/style-loader.ts

const styleTags: HTMLLinkElement[] = [];

export default function (linkTag) {
    styleTags.push(linkTag);
}

./src/index.ts

import { styleTags } from "./util/style-loader";

customElements.define(
  "my-custom-element",
  class extends HTMLElement {
    async connectedCallback() {
      this.attachShadow({ mode: "open" });

      const myElement = document.createElement("div");
      myElement.innerHTML = "Hello";

      this.shadowRoot?.append(...styleTags, myElement );
    }
  }
);

[alexander-akait]

hm, do you want to use link tag for shadow dom? I don't think it will have good perf, why not stay with style-loader?

[KislyakovDS]

Well, I am opened to discuss this) On the contrary, I thought to use link tag is much better, than insert many style tag in DOM. I use style-loader only for development, and in production I build css files. Why link tag will not have good perf?

[alexander-akait]

Sorry for delay, missing the issue, do you still need solution/dicussion?

[KislyakovDS]

No, I refused from shadow-dom 😁