gulp-inline-css: preserveMediaQueries not being picked up?

Hi,

Spent the last hour trying to figure out why preserveMediaQueries is not being picked up.

Are there any known issues that make this option unusable?

The code is pretty straightforward:

CSS (compiled from SCSS):

.imageAndText {
  width: 100%; }
  .imageAndText td {
    font-weight: 600; }
    @media screen and (max-width: 375px) {
      .imageAndText td {
        display: block;
        text-align: center;
        width: 100% !important; } }
  .imageAndText .image {
    width: 75px; }
    @media screen and (max-width: 375px) {
      .imageAndText .image {
        padding-bottom: 5px; } }

tables == email 😉

Taks config:

gulp.task("html", function(){
  gulp.src("*.html")

  // validate html5
  .pipe(html5Lint())

  // notify error
  .on("error", notify.onError({
    message: "<%= error.message %>",
    title:   "😱 HTML",
    sound:   false
  }))

  // sync browsers
  .pipe(browserSync.reload({
    stream: true
  }))

  .pipe(inlineCss({
    removeStyleTags: false,
    removeLinkTags: false,
    preserveMediaQueries: true
  }))

  .pipe(gulp.dest('build/'));
});

There’s nothing weird here.

I’m really running out of ideas. Any help would be appreciated.

About this issue

Original URL
State: open
Created 9 years ago
Comments: 20 (8 by maintainers)

Most upvoted comments

For anyone still getting stuck on this issue, I thought I would post a simple work around until this is fixed.

You make sure the css is added the the html before inlining the css. You can do something like this:

var gulp = require('gulp'),
    smoosher = require('gulp-smoosher'),
    inlineCss = require('gulp-inline-css');

gulp.task('default', function()  {
  return gulp.src('./*.html')
  .pipe(smoosher()
  .pipe(inlineCss())
  .pipe(gulp.dest('./inlined/'));
});

There are other gulps than smoosher, thats just happens to be the one I used 😎

mylescc on May 13, 2016