Skip to content
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.

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

Produces multiple times the output when run with Gulp #15

Closed
jkphl opened this issue May 30, 2017 · 5 comments · Fixed by #17
Closed

Produces multiple times the output when run with Gulp #15

jkphl opened this issue May 30, 2017 · 5 comments · Fixed by #17
Labels

Comments

@jkphl
Copy link
Contributor

jkphl commented May 30, 2017

Since you fixed #12 with #13 — thanks, probably works like a charm! — there's a new bug which makes the module quite unusable when used with Gulp: For no obvious reason, the critical CSS now contains its output multiple times.

Please use this simple gulpfile.js for reproducing the error:

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const critical = require('.');

gulp.task('css', () => {
   gulp.src('example/example.css').
    pipe(postcss([
        critical({
            outputPath: `example/test`,
            outputDest: `critical.css`,
            preserve: true,
            minify: false,
        }),
    ]))
    .pipe(gulp.dest('example/test'));
});

Rendering this modified example/example.css:

@media  {
  .foo {
    display: flex;
    width: calc(100% - 200px);
  }

  .bar {
    border: 10px solid gold;
    height: 100%;
  }

  .baz::before {
    critical-selector: this;
    content: 'test';
    position: fixed;
  }
}

will result in the following example/test/critical.css:

@media {
    .baz::before {
        content: 'test';
        position: fixed
    }
    .baz::before {
        content: 'test';
        position: fixed
    }
    .baz::before {
        content: 'test';
        position: fixed
    }
}
@media {
    .baz::before {
        content: 'test';
        position: fixed
    }
    .baz::before {
        content: 'test';
        position: fixed
    }
    .baz::before {
        content: 'test';
        position: fixed
    }
}
@media {
    .baz::before {
        content: 'test';
        position: fixed
    }
    .baz::before {
        content: 'test';
        position: fixed
    }
    .baz::before {
        content: 'test';
        position: fixed
    }
}

I'm running:

  • Node v6.6.0
  • npm v3.10.3
  • Gulp 3.9.1

A fix would very much be appreciated as we're about to roll out the project rather soon. Thanks!

@zgreen
Copy link
Owner

zgreen commented May 30, 2017

@jkphl Thanks for the bug report; I was able to reproduce it. I merged #16 to address it—do you want to update to the latest release and confirm it fixes this issue? Thanks.

@jkphl
Copy link
Contributor Author

jkphl commented May 30, 2017

Awesome! It's 1am over here, will try tomorrow morning. Thanks!

@jkphl
Copy link
Contributor Author

jkphl commented May 31, 2017

@zgreen We're almost there now and at least critical-selector: this works like a charm — thanks!

However, critical-selector: scope still produces doubled output for me. Would you be able to look into that as well? Thanks!

@zgreen
Copy link
Owner

zgreen commented May 31, 2017

@jkphl Fix for this has been released.

@jkphl
Copy link
Contributor Author

jkphl commented May 31, 2017

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants