preserveMediaQueries not being picked up?

[oskarkrawczyk]

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.

[jonkemp]

removeStyleTags should be set to true.

https://github.com/jonkemp/gulp-inline-css#optionspreservemediaqueries

[oskarkrawczyk]

Yep, tried that one, doesn't seem to change anything.

Any other ideas?

[jonkemp]

Could you provide more information? Also, could you update your example because it shows that you have removeStyleTags set to false.

[oskarkrawczyk]

Perhaps you could have a quick look (https://cloudup.com/cup_ZRdpO5G). Just npm install and gulp watch

[jonkemp]

One thing is you are missing some node modules in the package.json,

gulp-notify
bs-snippet-injector

but I am seeing the same problem. I'll look into it.

[oskarkrawczyk]

Ah, yeah, sorry about the missing modules. Was cleaning things up, and cleaned a bit too much.

Looking forward to see if you have figure out why the issue persists

[oskarkrawczyk]

Hey @jonkemp sorry to bother, any word on this?

[jonkemp]

No, I don't really understand what is wrong. The tests pass so I know it works to some extent. Sorry.

[iamsalnikov]

I have the same problem. It is my config:

gulp.task('buildError', function() {
    gulp.src('error_pages/*.html')
        .pipe(inlineCss({
            removeStyleTags: true,
            removeLinkTags: true,
            preserveMediaQueries: true,
            debug: true
        }))
        .pipe(gulp.dest('dist/'));
});

When I run task gulp buildError I do not see media queries from my css in result files.

[seriema]

@jonkemp The version in github (3.0.0) doesn't seem to match npm (2.0.0)? I know 3.0.0 is just three days old, but maybe there's some diff in what we're getting from npm and from what you're running yourself so that's why this isn't working for us?

[jonkemp]

The version of this plugin is 3.0 on npm.

https://www.npmjs.com/package/gulp-inline-css

Maybe you are getting the gulp plugin confused with the actual node module is uses?

https://www.npmjs.com/package/inline-css

[seriema]

The readme seems to have been updated after the 3.0.0 tag.

[jonkemp]

You are correct. The README was changed after it was published to npm

[seriema]

Either way, I've tried both 2.0.0 and 3.0.0 but neither keeps the media queries. Btw, SemVer usually means that a major bump (2 -> 3) means breaking changes, but I can't see any?

[jonkemp]

The breaking change is that the inline-css module was updated to use Promises. I bumped the version because I was afraid that may cause some issues.

[seriema]

Ah ok, so the interface remains unbroken? I tried running your tests and yes they pass, but I can't find the test for media queries?

[jonkemp]

You need to look at https://github.com/jonkemp/inline-css. The gulp plugin doesn't do anything except handle the streams and pass the files to the inline-css module.

[seriema]

@jonkemp Thanks. I opened an issue there.

@oskarkrawczyk since your CSS was originally SASS I'm assuming you were including the CSS with a regular <link>? So was I, but it seems that applyLinkTags doesn't apply to preserveMediaQueries. See my referenced issue above this comment.

[mylescc]

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 😎

[GurovDmitriy]

Для тех, кто все еще застревает в этой проблеме, я подумал, что опубликую простую работу, пока она не будет исправлена.

Вы должны убедиться, что CSS добавлен в HTML перед встраиванием CSS. Вы можете сделать что-то вроде этого:

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

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

Есть и другие глотки, кроме smoosher, это был тот, который я использовал 😎