grunt-uncss removes dynamically added classes when it shouldn't

Question

I was introduced to Node.js today and built a very simple Hello, World app. I also started using grunt to automate builds and deployments.

I am using the Bootstrap framework and colors.css.

<div class="hello"><h1>Hello, World</h1></div>

I add a few color classes to some elements using jQuery.

console.log('dev mode');
$('.hello').addClass('bg-blue');

I run the code through grunt-uncss.

uncss: {
    dist: {
        files: {
            'dist/styles.min.css': 'index.html'
        }
    }
}

But none of the color classes including bg-blue are there in styles.min.css.

If I don't run the file through uncss, everything works as expected.

What am I doing wrong?

Also take a look at https://github.com/purifycss/purifycss – Ankur Anand Jul 12 '15 at 14:09 — Ankur Anand, Jul 12 '15 at 14:09

score 1 · Answer 1 · answered Jul 12 '15 at 14:06

1

Try using the timeout option. It allows you to wait for the JS to load and execute. See the option here - https://github.com/addyosmani/grunt-uncss/issues/1

uncss: {
    dist: {
       options : {
           timeout: 2000
       },
       files: {
            'dist/styles.min.css': 'index.html'
        }
    }
}

Also take a look at this discussion - https://github.com/addyosmani/grunt-uncss/issues/1

answered Jul 12 '15 at 14:06

Ankur Anand

535
2
9

Unfortunately, this did not work. My script is wrapped in a global function, I hope that isn't a problem? – duci9y Jul 12 '15 at 14:49
I don't think it should as long as it is being called properly. Did you try purifycss ? – Ankur Anand Jul 12 '15 at 16:25
Purifycss worked, but it is not removing *everything* that should be removed. – duci9y Jul 12 '15 at 17:35
Well I guess you can raise an issue on their repo – Ankur Anand Jul 12 '15 at 17:52

grunt-uncss removes dynamically added classes when it shouldn't

1 Answers1