CODEWITHSUNDEEP
npmgulppostcss
NiklasWideC
NiklasWideC

Reputation: 51

Gulp, postcss and UnCSS

I'm trying to clean up my css and use UnCSS with gulp and Postcss.

I have this:

gulp.task('optim-css', function() {
    var stream1 = gulp.src(['dev/css/bootstrap.min.css','dev/css/custom.css'])
        .pipe(postcss([ rucksack() ]))
        .pipe(postcss(uncss({
                html:   ['http://localhost/olssonseder/','http://localhost/olssonseder/lyssna/','http://localhost/olssonseder/repertoar/','http://localhost/olssonseder/kontakta/','http://localhost/olssonseder/kontakta/','http://localhost/olssonseder/om-gitarren/'],
                ignore: [new RegExp('.b-lazy*'),
                         new RegExp('.stickyFooter')]
            }))
        );

    var stream2 = gulp.src(['dev/css/responsive-nav.css','dev/css/lity.css','dev/css/mp3-player-button.css'])

    return merge(stream1, stream2)
        .pipe(concat('styles.css'))
        .pipe(cleanCSS())
        .pipe(gulp.dest(''))
        .pipe(browserSync.stream());
});

But I get this error and I just can't figure out why:

[14:21:49] TypeError: UnCSS: expected a callback
    at init (C:\Users\Nicke\Documents\PortableApps\UwAmp\www\olssonseder\wp-content\themes\bastema\node_modules\uncss\src\uncss.js:176:15)
    at Gulp.<anonymous> (C:\Users\Nicke\Documents\PortableApps\UwAmp\www\olssonseder\wp-content\themes\bastema\gulpfile.js:48:23)
    at module.exports (C:\Users\Nicke\Documents\PortableApps\UwAmp\www\olssonseder\wp-content\themes\bastema\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\Users\Nicke\Documents\PortableApps\UwAmp\www\olssonseder\wp-content\themes\bastema\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\Users\Nicke\Documents\PortableApps\UwAmp\www\olssonseder\wp-content\themes\bastema\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (C:\Users\Nicke\Documents\PortableApps\UwAmp\www\olssonseder\wp-content\themes\bastema\node_modules\orchestrator\index.js:134:8)
    at C:\Users\Nicke\Documents\PortableApps\UwAmp\www\olssonseder\wp-content\themes\bastema\node_modules\gulp\bin\gulp.js:129:20
    at process._tickCallback (internal/process/next_tick.js:150:11)
    at Function.Module.runMain (module.js:703:11)
    at startup (bootstrap_node.js:190:16)
[14:21:52] Finished 'optim-js' after 2.75 s
[14:21:52] Finished 'optim-deferjs' after 2.73 s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] gi: `gulp init`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] gi script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Nicke\AppData\Roaming\npm-cache\_logs\2018-07-27T12_21_52_508Z-debug.log

Anyone has an idea as to why this is happening?

Upvotes: 1

Views: 2137

Answers (1)

Brian Lakstins
Brian Lakstins

Reputation: 81

I ran into the same problem. After creating a callback and running into other problems, I found that uncss could not be used directly with postcss. Use postcss-uncss instead and it works as expected.

From: https://github.com/uncss/uncss

Note: Depending on your environment, you might not be able to use uncss as a PostCSS plugin since the plugin is not directly exported. In such cases, use the wrapper library postcss-uncss.

Here is the postcss-uncss library: https://github.com/uncss/postcss-uncss

Upvotes: 1

Related Questions