Add insert before option

[tamdao]

We have an ordering problem with mini-css-extract-plugin for production build.

• Dev build use style-loader and the package has an option to insert style like:

insertAt: {
  before: '#mini-css-before'
},

• Prod build use mini-css-extract-plugin and the package has no option for insert before.

So I make a change in this PR. The logic here is finding the tag that has Id called mini-css-before and set insert before the tag.

[jsf-clabot]

Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

[alexander-akait]

It is bad solution, better don't change order their, because it can break app

[tamdao]

It's only an option, if you don't have #mini-css-before, it still works as current.

In my case, in my project I use styled-components to style component and base css.

But the mini-css-extract-plugin always appends base css at bottom head tag and the css of styled-components is inserted above, so the css be overwrite by styled-component are not effected

[alexander-akait]

@tamdao it is edge case and can break your app, better avoiding this and search way how better integrate styled-components with vanilla css.

[tamdao]

@evilebottnawi Thanks for your help. I will research more

[tanduong]

@evilebottnawi since mini-css-extract-plugin does not offer any way to control insert order, this solution seems to work and the behavior is fully backward compatible. Would you elaborate on how could it break apps?

[alexander-akait]

@tanduong

1. The PR contains hardcoded code like mini-css-before, it is bad, developers can want use other class/id/tag selector
2. You change css order so you can break your app, developers can have this tag already in page or insert tag with mini-css-before id in runtime and it is break code
3. It is breaking chage
4. No real use case for this feature or problem when you need insert tag in other place
5. In style-loader we have this feature because some people want to work with shadow DOM, for other purposes it is better to avoid using this option.

[tommaitland]

@evilebottnawi I think you're dismissing this too quickly. This would be a really helpful change for us, since we want to inject an external stylesheet after the compiled ones from the react app.

Without this change, we have to do a find/replace on the entire HTML which is far from ideal. style-loader supports the option, so adding this actually makes the environment between dev and production consistent for people who are already using the option.

None of those use-cases are bad practice.

[alexander-akait]

@tommaitland so we need allow to use custom insert function, exclude using mini-css-before id and etc

[tamdao]

@evilebottnawi How can I make a function here?

[alexander-akait]

Close in favor #459