New Adventures with Grunt UnCSS Bookmark

published on

I recently upgraded Grunt UnCSS to its latest version 0.4.2 and somehow got a few errors that I didn't get before, even though nothing had changed, except for the plugin itself of course.

Grunt UnCSS error #1 with Typekit URL:

    ➜ ~/Sites/repos/missed-in-hkg (master) grunt uncss
    Running “uncss:dist” (uncss) task
    Fatal error: uncss/node_modules/css: unable to parse http://use.typekit.net/c/1a04cf/1w;proxima-nova,2,b5t:P:n3,b5w:P:n4/k?3bb2a6e53c9684ffdc9a9bf41d5b2a62183a574751fd848f7874…:
    missing '{' near line 13:1
     8:  </head>
     9:    <body>
     10:    <h1>403 - Forbidden</h1>
     11:   </body>
     12:  </html>
     13: ->

This has never been an issue before and I'm not sure why UnCSS now wants to parse these external URLs (even though I can see that might make sense…), but it seems to be due to some of the recent changes in how UnCSS works. I filed an issue on this, but so far haven't received any feedback.

As the current workaround to circumvent this behaviour and to avoid Typekit URLs being followed, I added a RegEx pattern to the ignoreSheets option:

    options: {
      ignoreSheets : [/use.typekit/]
    }

Grunt UnCSS error #2 with .php input files:

While I had always specified one HTML file and one PHP file for the input list, this configuration:

    // original input list including the .php file

    files: {
      'css/app.un.css': ['index.html', 'read.php']
    }

then returned the following error:

    ➜ ~/Sites/repos/missed-in-hkg (master) grunt uncss
    Running “uncss:dist” (uncss) task
    Fatal error: PhantomJS: Cannot open about:blank

I'm quite surprised this doesn't work anymore, since I"ve been specifying the PHP file for quite some time, even though it seems to be a fairly widespread problem with PhantomJS. Unfortunately I did not find a better workaround than to remove the PHP file from the input file list for now :(

    // Just for proper completeness, input list after removing the .php file ;)
    files: {
      'css/app.un.css': ['index.html']
    }

After these two steps listed above, Grunt UnCSS again runs as expected and works just fine. Ignoring the Typkit URL of course isn't a problem at all and I can also live with the option of removing the PHP file from input, even though I"d prefer being able to use it.

https://foobartel.com/@/page/MlI7xZ021RmuQGIB

Back to Articles