Customize location of injection
trainiac opened this issue · 6 comments
Can we add a config option called something like replaceToken in order to determine where the inline styles get injected?
By default, I like the appending it to the very end of the head tag, but it would be nice to configure something like
<head>
<!-- inline_css_plugin -->
<style>
/* my app styles that get injected with server side rendiering */
</style>
</head>new HTMLInlineCSSWebpackPlugin({
replaceToken: '<!-- inline_css_plugin -->'
}),Sounds cool, can you show more use cases to explain why?
hmm, One of use cases that I can figure out is for more prettier output.
Glad you're interested. I'm building a vue server side rendered application. Critical styles associated with the vue components that are rendered for a given route get injected inline in the head per request. With the Vue SSR framework I can choose where the styles get injected. However, I want to inject global css into my html template at build time hence the need for html-inline-css-webpack-plugin. These global styles should appear before my component specific styles but that's not possible because this plugin always injects the styles at the very end of the head. Let me know if you need more information. Thanks for the cool plugin! I'd be happy to submit a PR for this as well.
yeah, right, the position of style define could affect the result of style override.
PR is welcome, feel free to submit a PR 😄
This looks great. More flexible than what I was proposing.
I ran into one other issue trying to get this library integrated. This library deletes the asset / prevents it from being output (which makes sense since you are inlining it), which causes other vue ssr plugins to choke for some reason. I digress...
Thank you!