Can't get grunt-css to work

[XhmikosR]

Hi.

I'm trying grunt-uncss with no success so far.

Running "uncss:dist" (uncss) task

C:\Users\xmr\Desktop\mpc-hc.org\node_modules\grunt-jekyll\node_modules\tmp\lib\tmp.js:261
  throw err;
        ^
mapReadFiles Error: could not find: C:\Users\xmr\Desktop\mpc-hc.org\_site\2012\06\21\welcome-to-the-new-website\_site\assets\css\pack-9c1b221d52ef3036ff1e34bf7ed3dce459533bf5.css

If I remove grunt-uncss everything works fine. I tried with and without specifying the stylesheet. If I skip it I end up with a zero byte tidy.css file and no errors.

My source is here https://github.com/mpc-hc/mpc-hc.org/tree/grunt-uncss

Any help is appreciated, thanks!

PS. The task order in Gruntfile is a little weird at the moment because I wanted to get this working first. I'll switch to concatenate, uncss, then cssmin later.

[giakki]

That error happens when UnCSS cannot find a stylesheet. Could you try to pass it the csspath option, and see if the error persists?

[addyosmani]

Please try the csspath option with 0.1.7 (released yesterday)

[XhmikosR]

I am using 0.1.7. I tried all the options I could think of.

If I do

        uncss: {
            dist: {
                files: {
                    "_site/assets/css/tidy.css": ["_site/**/*.html"]
                }
            },
            options: {
                csspath: "_site/assets/css"
            }
        },

I end up with a zero byte tidy.css.

[XhmikosR]

@giakki: With 0.7.5 and this

        uncss: {
            options: {
                stylesheets: "<%= concat_css.dist.dest %>"
                //csspath: "<%= dirs.dest %>/assets/css/"
            },
            dist: {
                src: "<%= dirs.dest %>/**/*.html",
                dest: "<%= dirs.dest %>/assets/css/tidy.css"
            }
        },

I get

Running "uncss:dist" (uncss) task

C:\Users\xmr\Desktop\mpc-hc.org\node_modules\grunt-jekyll\node_modules\tmp\lib\tmp.js:261
  throw err;
        ^
TypeError: Object _site/assets/css/pack.css has no method 'map'
    at C:\Users\xmr\Desktop\mpc-hc.org\node_modules\grunt-uncss\node_modules\unc
ss\lib\uncss.js:47:24
    at Array.map (native)
    at uncss (C:\Users\xmr\Desktop\mpc-hc.org\node_modules\grunt-uncss\node_modu
les\uncss\lib\uncss.js:46:35)
    at C:\Users\xmr\Desktop\mpc-hc.org\node_modules\grunt-uncss\node_modules\unc
ss\lib\uncss.js:179:17
    at C:\Users\xmr\Desktop\mpc-hc.org\node_modules\grunt-uncss\node_modules\unc
ss\node_modules\async\lib\async.js:232:13
    at C:\Users\xmr\Desktop\mpc-hc.org\node_modules\grunt-uncss\node_modules\unc
ss\node_modules\async\lib\async.js:119:25
    at C:\Users\xmr\Desktop\mpc-hc.org\node_modules\grunt-uncss\node_modules\unc
ss\node_modules\async\lib\async.js:24:16
    at C:\Users\xmr\Desktop\mpc-hc.org\node_modules\grunt-uncss\node_modules\unc
ss\node_modules\async\lib\async.js:229:17
    at C:\Users\xmr\Desktop\mpc-hc.org\node_modules\grunt-uncss\node_modules\unc
ss\lib\lib.js:43:16
    at ChildProcess.exithandler (child_process.js:635:7)

Remember you can get my source from here to test for yourself if you need to.

[giakki]

Sorry for the delay!
The problem is that your stylesheets have absolute locations, but they are not requested over HTTP, meaning that UnCSS will search for the stylesheets starting form the location of the HTML files.

Anyhow, I managed to make it work setting the "stylesheets" option:

uncss: {
    dist: {
        options: {
            stylesheets: ["../../../../../<%= concat_css.dist.dest %>"]
        },
        dist: {
            "<%= dirs.dest %>/assets/css/tidy.css": ["<%= dirs.dest %>/**/*.html"]
        }
    }
}

I couldn't check that the result was correct however, since as you said the Gruntfile isn't complete ;)

Another solution would be to run UnCSS against the pages served by Jekyll, but I feel like this option should be better supported, I'll add an option to specify the project root!

[XhmikosR]

@giakki: Thanks for your time looking into this.

A root option should make things better I believe.

My Gruntfile is as good as it will get for the time being, but due to a bug in grunt-concat-css the remaining CSS has URLs paths wrong. (ref webdoc/grunt-concat-css#2)

I will check again later, but I really hope uncss becomes more usable :)

@addyosmani: there is no info shown in CLI when the output file is created. Perhaps you could follow what other plugins do? And maybe add support for report option?
Example:

Running "uglify:minify" (uglify) task
File _site/assets/js/pack-dbb420eb7577c34c00f9d3a3c21c985aa1b3c32b.js created.
Original: 68357 bytes.
Minified: 30387 bytes.

[addyosmani]

I agree that a report option would be useful here. I'll get that added. Thanks for the suggestion!

[sedovsek]

Good idea! It's always rewarding to see your improvements.

I've added a PR to the uncss.
After @giakki reviews it and decides if it fits, I can add changes to the grunt task as well.

Best,
Robert.

[XhmikosR]

Awesome, thanks! Any chance you use the same color scheme the other plugins use? Example https://travis-ci.org/mpc-hc/mpc-hc.org/builds/17590145

[sedovsek]

Thanks for pointing this out, @XhmikosR.

[sedovsek]

Added PR that outputs a report.
It would be nice if someone could review it.

Best,
Robert.

[XhmikosR]

And I tried uncss from master and I didn't see any report... I was like why :P

Does your patch add support to show the filepath too? Like this one.

Thanks for the patches @sedovsek!

[sedovsek]

@XhmikosR: Hehe, yes, I'm quite fond of branching. It's an old habit, mostly due to because I rarely work with forked repositories.

Well, I've only added byte sizes of original and uncss-ed 'files'.
I have no prior experience with that, but I'll take a deeper look at how it is usually done and improve my solution.

Thanks for your feedback,
Robert.

[sedovsek]

@XhmikosR, is this what you meant?

Best,
Robert.

[XhmikosR]

Untested but from looking at the patch it seems it's exactly what I meant. Thanks!

[XhmikosR]

I will close the issue here; it was wrong from the beginning since it was an upstream issue :)

[pawansoobhri]

I am not able to fix my error of UnCSS no style sheet found
uncss: {
dist: {
files: {
'dist/css/tidy.css': ['index.html']
}
}
},

[shnigi]

Same error. UnCSS: no stylesheets found as for @pawansoobhri