inline-css
inline-css copied to clipboard
jonkemp
Unclear if media queries should be preserved when they're in a css-file
This issue originally started in gulp-inline-css.
I've played around with the tests in the project and if I change media-preserve.html to use <link rel="stylesheet" href="media-preserve.css" /> and move the CSS to that file then no CSS is included in the test output. If I try to add some media-query CSS to any other test that already uses external CSS files as part of the test, like in.html/file.css, and set the preserveMediaQueries: true option, I get the same result: no media query CSS is preserved.
To double check I added some media queries CSS as <style> in the HTML file I originally had issues with then those media queries are preserved, but the ones in my CSS file are ignored. Maybe this is by design? It's not super clear from the documentation although reading it now I can imagine it's technically correct. But since the main use case is Useful for emails according to the readme and it already supports applyLinkTags by default, so I assumed it would be preserved since that's the only way to make media queries work in emails.
Interesting that it works in the style tag but not the link tag. I don't know that this is broken so I'll add it as a feature request.
When using responsive email frameworks like zurb, where media queries are in .css file, this is very essential feature. Thanks. +1
workaround for now is to inline your whole compiled css in your template
+1 I also just ran into this, it's a weird and a bit disruptive for the build process we're using (not major, thankfully).
+1 I'm also for this, but. This is pretty easy to solve if you use Gulp:
gulp.task("inject", () =>
gulp
.src(["./dist/**/*.html"])
.pipe(
replace('<style type="text/css"></style>', () => {
const css = fs.readFileSync("dist/css/bundle.css", "utf8");
return `<style type="text/css">\n${css}\n</style>`;
})
)
.pipe(gulp.dest("./dist"))
);
Using gulp-replace, we insert styles from our external CSS file into the style tag. And then we launch inline-css. In this case, the media-css remains using the preserveMediaQueries property.
