Unfortunately, this is not possible given that the site is SPA.
I've read that I can generate a site map and then use that through uncss; however, could someone please implement uncss and help me through this process for I dont know how to really start?

1 Answer
1

This can be done with uncss at a command line or with grunt-uncss...although the latter has open issues. The example on the grunt-uncss page you mention, using a WordPress sitemap , is helpful but doesn't clearly explain what to do about SPA's. Hopefully this helps.

1) Command line

As the docs on the github page explain, you can now pass URL's directly into uncss to generate css output. You can pass URL's to uncss instead of files...

Thus, if your SPA is simple enough, you could use the core uncss app like this:

uncss http://localhost:3000/mycoolapp > stylesheet.css

2) grunt-uncss

At the time of writing this answer, there is an open issue with grunt-uncss that needs to be known to use uncss via grunt.

While the url option is depreciated, the alternative approach to put the URL's into the file array won't work because of the open issue. However, the url option can still be used so that an array of URL's can be checked. In this case, the Gruntfile.js would have a section like this:

The array in urls would need to contain a list of urls. Given that this plugin is still in development, you should watch the github page so you are notified of potentially breaking changes as it builds upon v.0.3.x...

Two notes:

phantom.js will be used for this processing, so as long as your SPA is friendly enough that phantom can do it's work...this should work for you.

you have to enter the array of urls by hand, which is what the WordPress example off the grunt-css page is automating...so if you can similarly automate, life will be easier.