Coder Social home page Coder Social logo

Can't get grunt-css to work about grunt-uncss HOT 18 CLOSED

uncss avatar uncss commented on September 14, 2024
Can't get grunt-css to work

from grunt-uncss.

Comments (18)

pawansoobhri avatar pawansoobhri commented on September 14, 2024 3

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

from grunt-uncss.

giakki avatar giakki commented on September 14, 2024

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

from grunt-uncss.

addyosmani avatar addyosmani commented on September 14, 2024

Please try the csspath option with 0.1.7 (released yesterday)

from grunt-uncss.

XhmikosR avatar XhmikosR commented on September 14, 2024

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.

from grunt-uncss.

XhmikosR avatar XhmikosR commented on September 14, 2024

@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.

from grunt-uncss.

giakki avatar giakki commented on September 14, 2024

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!

from grunt-uncss.

XhmikosR avatar XhmikosR commented on September 14, 2024

@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.

from grunt-uncss.

addyosmani avatar addyosmani commented on September 14, 2024

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

from grunt-uncss.

sedovsek avatar sedovsek commented on September 14, 2024

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.

from grunt-uncss.

XhmikosR avatar XhmikosR commented on September 14, 2024

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

from grunt-uncss.

sedovsek avatar sedovsek commented on September 14, 2024

Thanks for pointing this out, @XhmikosR.

from grunt-uncss.

sedovsek avatar sedovsek commented on September 14, 2024

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

Best,
Robert.

from grunt-uncss.

XhmikosR avatar XhmikosR commented on September 14, 2024

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!

from grunt-uncss.

sedovsek avatar sedovsek commented on September 14, 2024

@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.

from grunt-uncss.

sedovsek avatar sedovsek commented on September 14, 2024

@XhmikosR, is this what you meant?

Best,
Robert.

from grunt-uncss.

XhmikosR avatar XhmikosR commented on September 14, 2024

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

from grunt-uncss.

XhmikosR avatar XhmikosR commented on September 14, 2024

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

from grunt-uncss.

shnigi avatar shnigi commented on September 14, 2024

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

from grunt-uncss.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.