Skip to content

Customize location of injection #3

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
trainiac opened this issue Oct 10, 2018 · 6 comments
Closed

Customize location of injection #3

trainiac opened this issue Oct 10, 2018 · 6 comments

Comments

@trainiac
Copy link

trainiac commented Oct 10, 2018 •
edited
Loading

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 -->'      
}),
@runjuu
Copy link
Owner

runjuu commented Oct 10, 2018

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.

@trainiac
Copy link
Author

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.

@runjuu
Copy link
Owner

runjuu commented Oct 11, 2018

yeah, right, the position of style define could affect the result of style override.

PR is welcome, feel free to submit a PR 😄

@runjuu
Copy link
Owner

runjuu commented Oct 21, 2018

@trainiac I have implemented this feature 😆, check this

@trainiac
Copy link
Author

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!

@runjuu
Copy link
Owner

runjuu commented Oct 24, 2018

@trainiac hmm, can you provide some sample code to reproduce the issue? 🤔️ We could open a new Issues to deal with it.

@runjuu runjuu closed this as completed Oct 29, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@trainiac @runjuu