gulp-uncss removes class which is added using javascript

Question

My gulp configuration for gulp-uncss is

gulp.task('uncssme', function () {

return gulp.src('src/css/**/*.css')
    .pipe(uncss({
        html: ['src/**/*.html']
    }))
    .pipe(gulp.dest('dist/css'))
});

Using uncss removes 'newClass' selector from final css files because that class in not directly used in .html file but added dynamically through js.

document.getElementById('good').className += ' newClass';

EDIT: I am already using /* uncss:ignore */ to make it work but this doesn't make sense to add this comment everytime for a class present in .js but not in .html

Answer 1

Maybe, you can prefix every class using only in js widh is- and add ignore option with a regex in gulp task.

gulp.task('uncssme', function () {

return gulp.src('src/css/**/*.css')
    .pipe(uncss({
        html: ['src/**/*.html'],
        ignore: [^\.is-.*]
    }))
    .pipe(gulp.dest('dist/css'))
});

Answer 2

I had the same problem with Uncss and only way to get this working is using ignore comments which is not something i would consider being great solution.

I would suggest you try purifycss plugin (https://www.npmjs.com/package/gulp-purifycss/). You can set both html and js files and then the css is uncss-ed or purify-ed and that was what i was looking for when i had your problem.