gulp-uncss удаляет класс, который добавляется с использованием javascript

Question

Моя конфигурация gulp для gulp-uncss:

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

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

Использование uncss удаляет селектор 'newClass' из конечных файлов CSS, потому что этот класс не используется напрямую в файле.html, а добавляется динамически через js.

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

РЕДАКТИРОВАТЬ: я уже использую /* uncss:ignore */, чтобы заставить его работать, но не имеет смысла добавлять этот комментарий каждый раз для класса, присутствующего в.js, но не в.html

Answer 1

Может быть, вы можете префикс каждого класса, используя только в JS WIDH is- и добавьте опцию игнорирования с регулярным выражением в задании gulp.

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

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

Answer 2

У меня была та же проблема с Uncss, и единственный способ добиться этого - использовать игнорирование комментариев, что я не считаю хорошим решением.

Я бы посоветовал вам попробовать плагин rifycss ( https://www.npmjs.com/package/gulp-purifycss/). Вы можете установить как html, так и js файлы, а затем CSS будет uncss-ed или clean-ed, и это было то, что я искал, когда у меня возникла ваша проблема.