Post CSS critical split

Question

I need create separated critical style according https://www.npmjs.com/package/postcss-critical-split.

Name of gulp task is "criticalCSS". Why its not working?

gulp.task('criticalCSS', function () {
    return gulp.src(['css/style.css','!css/*-critical.css'])
    .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(postcss([require('postcss-critical-split')]))
    .pipe(sourcemaps.write('source-maps'))
    .pipe(gulp.dest('css'));
});

Thanks for any help.

My gulpfile looks https://jsfiddle.net/ydhfjwdw/

Answer 1

Solution:

gulp.task('criticalCSS', function () {
    var processors = [
        postcssCriticalSplit({
            'output': 'critical',
            'startTag': 'critical:start',
            'stopTag': 'critical:end'
        })
    ];
 
    return gulp.src(['css/style.css'])
    .pipe(postcss(processors))
    .pipe(cssnano())
    .pipe(rename({
        suffix: '.critical'
    }))
    .pipe(gulp.dest('css'));
});

Answer 2

Use gulp-postcss instead of postcss'