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

@Guy who downvoted this question, get some sense. If you don't have anything to help to improve question by adding comments, don't downvote blindly. — master_dodo, Apr 11 '16 at 13:40
Didn't downvote, but I can kind of see why they did. Did you [read the documentation](https://github.com/addyosmani/grunt-uncss#usage-examples), specifically the snippet below that that illustrates "[ignoring] specific selectors"? — Joseph Marikle, Apr 11 '16 at 13:46
I am already following that [ignoring] stuff using /* uncss:ignore */. And they have totally poor issue tracking response. Also, putting ignore for every newly added selector is unnecessary and burden than easing the task. I would rather go for other plugin. What you think? Any better plugin, please suggest. — master_dodo, Apr 11 '16 at 13:48
I wish I could, but I've never tried anything of this nature. It would make sense that any classes that are added via js would need to be whitelisted. They could have the task scan js files too, but that doesn't take into account things like `$(this).addClass('brand-' + userColor)` or whatever. — Joseph Marikle, Apr 11 '16 at 13:55
Yeah, I was thinking if some js parse synched with uncss could make it work. But anyways, thanks. Strange thing is I am not able to find the similar query anywhere else on net. — master_dodo, Apr 11 '16 at 13:58

Gwénolé Genson · Accepted Answer · 2016-04-12T08:00:12.027

4

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'))
});

edited Apr 12 '16 at 08:00

answered Apr 11 '16 at 14:25

Gwénolé Genson

76
4

Oh nice. Thanks. I still am having some problem with adding purifyjs as was suggested in previous answer. But your solution also seems a good deal as I can prefix something like jsa(js added) to the classes add by js only. – master_dodo Apr 12 '16 at 05:09
I just tried regex but it didn't work, pretty strange but hard coding literal like ignore: ['.is-newClass'] worked :P – master_dodo Apr 12 '16 at 05:39
1

The regex is to be used like ignore: [^\.is-.*] , i.e., without quotes inside array. Then it would work. – master_dodo Apr 12 '16 at 07:00

score 1 · Answer 2 · answered Apr 11 '16 at 14:25

1

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.

answered Apr 11 '16 at 14:25

riogrande

349
1
5
23

Aah thanks. I knew just the name but totally forgot to explore it. Right now, while using it, I am getting TypeError: Cannot read property 'slice' of undefined. But I'll look into it. :) – master_dodo Apr 11 '16 at 15:00
Ok, that error was resolved but it didn't seem to run even simple case, which is to remove a class selector which is not used anywhere. If this didn't work, I can't check further whether it is keeping class added through js. – master_dodo Apr 12 '16 at 08:55
My gulp is: gulp.task('purifycss', function () { return gulp.src('src/bundle/css/**/*.css') .pipe(purify(['src/bundle/js/**/*.js', 'src/**/*.html'])) .pipe(gulp.dest('src/bundle/css')) }); – master_dodo Apr 12 '16 at 08:55
1

here is mine, working 100% and used in production: gulp.task('compile:css', ['clear:dist'], function () { return gulp.src('./src/static/scss/style.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(purify(['./src/static/js/*.js', './src/*.html'])) .pipe(autoprefixer({ browsers: ['last 10 versions', 'IE 7'] })) .pipe(csscomb()) .pipe(cleanCSS()) .pipe(sourcemaps.write('./maps/')) .pipe(gulp.dest('./dist/static/css/')) }); – riogrande Apr 12 '16 at 11:53
After you gave config, I experimented with my and your configs. And here are my observations. STRANGE THINGS. If I've 2 selectors in css '.js-newClass' and '.newClass1' and only former is being added through js. So purifycss still keeps '.newClass1' because of string matching 'newClass' in both which is why my config didn't look like it worked. More cases, if it was '.newClassA' then it will remove this because it considers 'newClass' and 'newClass(number)' same. Also '.js-newClass-hello' and '.newClass1' were treated same. So it kept both even though '.newClass1' wasn't used anywhere. – master_dodo Apr 12 '16 at 17:07
For more details, you can refer to issue raised at https://github.com/purifycss/gulp-purifycss/issues/16 – master_dodo Apr 12 '16 at 17:25

gulp-uncss removes class which is added using javascript

2 Answers2