search

jonkemp / inline-css

Inline css into an html file.
MIT License
431 stars 84 forks source link

Media queries inside extraCss option can't be preserved #26

Open gakimball opened 8 years ago

gakimball commented 8 years ago

If media query CSS is passed into the extraCss option and preserveMediaQueries is true, or if CSS is added through a <link> tag, the media query-specific CSS isn't preserved in the HTML output.

Here's a small test case.

The use case for working with applyLinkTags is using inline-css in a basic web development workflow, where you have separate HTML and CSS files, and some CSS is inside of media queries and needs to be preserved in the inlined HTML.

The use case for working with extraCss is running inline-css in the browser, where we're avoiding having to read or write from a filesystem. So instead of using <link> tag replacement, all of the CSS to be inlined is passed through extraCss.

Ideally the media query CSS in extraCss can be dropped into a <style> tag in the final output. I can think of a workaround, but it would be nice if the library could handle it.

Also an FYI, version 2 of Foundation for Emails (formerly Ink) will be using this library to inline CSS :)

jonkemp commented 8 years ago

Thank you. I'm leaning toward categorizing this as a feature request rather than a bug. Are you ok with that?

gakimball commented 8 years ago

Yep, that's fine! I probably won't have time to implement it myself, but I have a workaround in mind either way.

gakimball commented 8 years ago

Updated initial comment to reference applyLinkTags along with preserveMediaQueries.

martinrisseeuw commented 5 years ago

@gakimball What is the workaround that you used to achieve this? I'm running into the same issue but can't figure out a workaround.

gakimball commented 5 years ago

What is the workaround that you used to achieve this? I'm running into the same issue but can't figure out a workaround.

@martinrisseeuw It's been a long time since I filed this issue, so I can't remember the specifics of what problem I was solving or how I solved it.

However, I have done some other HTML email work since then, and I ended up writing a library to handle all of this bundling stuff for me. You may find the source code helpful: https://github.com/gakimball/scow