Gulp unCSS - problem with bootstrap JS classes

Question

I have a problem with Gulp unCSS task. The problem is that the task is cutting out bootstrap css classes (those which appear after JS events, ex. collapse, show, collapsed, collapsing etc.).

I know I can put every single class in ignore option as array but then I need to be aware of all the rquired classes.

Is there any better way to fix this problem?

Maybe I should ignore every Bootstrap SASS partial which uses JS?

I would be greatful if anyone could give me some tips how should I aproach the problem.

This is how I include bootstrap scss partials:

@import url('https://fonts.googleapis.com/css? 
family=Lato:300,400,700');
@import url('https://fonts.googleapis.com/css? 
family=Martel+Sans:300,400,700');

@import 'utils/variables';

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import '../../node_modules/bootstrap/scss/reboot';
@import '../../node_modules/bootstrap/scss/root';
@import '../../node_modules/bootstrap/scss/type';
@import '../../node_modules/bootstrap/scss/utilities';
@import '../../node_modules/bootstrap/scss/transitions';
@import '../../node_modules/bootstrap/scss/grid';
@import '../../node_modules/bootstrap/scss/pagination';
@import '../../node_modules/bootstrap/scss/nav';
@import '../../node_modules/bootstrap/scss/navbar';
@import '../../node_modules/bootstrap/scss/dropdown';
@import '../../node_modules/bootstrap/scss/carousel';

@import '../../node_modules/font-awesome/scss/font-awesome';

and this is my Gulp UNCSS task (but it's not optimal aproach...)

gulp.task('uncss', function () {
 return gulp.src([
'app/css/app.css'
 ])
.pipe(uncss({
  html: [
    'app/**/*.html'
  ],
  ignore: [
    /\.fade/,
    /\.collapse/,
    /\.collapsed/,
    /\.fade-out/,
    /\.show/
  ]
}))
.pipe(gulp.dest('app/css/'));
});

Thanks!

Gulp unCSS - problem with bootstrap JS classes

0 Answers0