Gulp Uncss Breaks Bootstrap Dropdown Navbar Navigation

Question

I want to use uncss on a big css file of mine, but doing that breaks the dropdown of my bootstrap navigation.

Here is the working part: http://metalotechnika.com

And here is the part, where I used the uncss: http://metalotechnika.horyzon.de.

You will notice that the drop down menu is not working. It is usinig the twitter bootstrap navbar.

The part of my gulpfile looks like this:

gulp.task('uncss', function() {
    return gulp.src('style.css')
        .pipe(uncss({
            html: ['uncss/uncss.html']
        }))
        .pipe(gulp.dest(''));
});

Even if I choose a URL here, it breaks. I temporarily disabled the cache and css compression on the production site, so that you can have a look at the vital difference in the style.css, which is the one, that is getting the "uncss".

How can I reduce my css using uncss? Why does it break and how can I fix this?

Answer 1

Adding the classes used by the menu to the ignore list will look like that:

gulp.task('uncss', function() {
return gulp.src('style.css')
    .pipe(uncss({
        html: ['uncss/uncss.html'],
        ignore: [
            ".fade",
            ".fade.in",
            ".collapse",
            ".collapse.in",
            ".collapsing",
            /\.open/
       ]
    }))
    .pipe(gulp.dest(''));

});

From this thread: https://github.com/giakki/uncss/issues/64

You can add or remove classes in the list as you needed.

Answer 2

For me following ignore list worked - I have added /\.dropdown/:

gulp.task('uncss', function() {
    return gulp.src('style.css')
        .pipe(uncss({
            html: ['uncss/uncss.html'],
            ignore: [
                ".fade",
                ".fade.in",
                ".collapse",
                ".collapse.in",
                ".collapsing",
                /\.open/,
                /\.dropdown/
           ]
        }))
    .pipe(gulp.dest(''));
});