Mini-css-extract-plugin: Feature: Option to insert styles above DOM elements vs head.

[kmcaloon]

Was wondering if there are plans or maybe already a way to implement this feature. style-loader is configurable so that we can inject styles directly above their relevant components by setting the following option: { insertAt: top }. Unless I am missing something, one main advantage of such an approach seems to be a more optimal rendering on initial page load as DOM elements will only be blocked the loading of necessary styles vs those for everything on the page. This is somewhat related to Pagespeed's recommendations for inlining small stylesheets throughout the body.

Would this make sense?

[aleen42]

Is there any consideration?

[alexander-akait]

How it is related to mini-css-extract-plugin, we just extract css to separate file and all, youself solve where include link tag

[aleen42]

It seems reasonable as I can resolve it by setting the position of entries.

[alexander-akait]

Inserting extracted file inside html is out of scope this plugin.

[AlexDubok]

How it is related to mini-css-extract-plugin, we just extract css to separate file and all, youself solve where include link tag

Yeah, but somehow this plugin has the default behavior of appending extracted files to the head :)
https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L367

My other assets could be included in body which means that styles in head would always have less priority. And if I want to inline some small chunk I always have to include this data-href link to not duplicate my styles...

[Birowsky]

Hold up, which plugin has the link placement responsibility? This plugin is the last loader in the chain.. am I doing something wrong?

[
  {loader: MiniCssExtractPlugin.loader, options: {hmr: isActiveDevelopment}},
  'css-loader?sourceMap',
  {loader: 'postcss-loader', options: {sourceMap: true, ident: 'postcss', plugins: () => [postcssPresetEnv({browsers: 'last 20 versions'})]}},
  'sass-loader?sourceMap',
  'import-glob',
]

[prateekbh]

Hi! This plugin still seems to insert the dynamically loaded chunks in head

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L379

Is there a way that these dynamically loaded styles can be put in some other place? e.g. end of body?