>> Error opening url 'undefined': undefined

[vlrprbttst]

I've just installed grunt critical on my project, this is what's in my gruntfile

        critical : {
            test : {
                options : {
                    base : '/',
                    css : ['css/main.css'],
                    width : 1200,
                    height : 500
                },
                src : 'index.php',
                dest : 'css/critical.css'
            }
        }

and my project folder structure

i then run grunt critical but the task is aborted. using --verbose and --force, the only input i have is this:

>> Error opening url 'undefined': undefined

any idea of why this is happening? thanks!!

[bezoerb]

@vlrprbttst critical couldn't handle php files as this is a server side language which needs it's own interpreter. You could use grunt-php2html to convert your files to html in the first place and use these with critical to generate the critical path css.
You could then use the following code to inline the css in your page:

<style><?php include 'critical.css'; ?></style>
<script>
   function loadCSS(a, b, c) { … }
   loadCSS('non-critical.css');
</script>
<noscript>
   ...
</noscript>

[vlrprbttst]

oh, so no way of using it on any php site?
thanks!

[bezoerb]

@vlrprbttst i've created a gist with a working solution for using critical with php.
You'll only need php-cgi installed and in your PATH.
https://gist.github.com/bezoerb/a7ef67781f9ccafe36c2

[vlrprbttst]

thanks a lot! but do i still need to convert php to html? that's something I can't do unfortunatly

[pocketjoso]

@vlrprbttst You could use of Penthouse, create critical css for each page, and then inline if yourself via php. That's what I've been doing for my own site, with this kind of code in a php header file:

if (file_exists($critcssfile)) {
    <style><?php include($critcssfile);?></style>
...
}

For convenience I just named my critical css exactly the same as each php file, just with an extra .css extension, so f.e. about.php.css.

[pocketjoso]

Someone else asked me the same question so I created a gist for this solution:
https://gist.github.com/pocketjoso/58cb89ad9e69e4da297e

[vlrprbttst]

@pocketjoso thanks! that's what I'm using at the moment but I was thinking of switching cause your plugin doesn't extract all the relevant css.. some are missing and that creates a pretty ugly FOUC :/

[pocketjoso]

@vlrprbttst Critical uses Penthouse to generate critical css, so as long as you put in the same css you'll get exactly the same result.

I always advice against extracting the critical css from the full css as I think there are only benefits to doing so in the majority of cases.

[vlrprbttst]

oh ok! then I'll keep using penthouse then. I didn't understand your last statement, what do you mean?
thanks anyway @bezoerb

[pocketjoso]

I think I misunderstood what you meant with extracting relevant css - you mean that the critical css is missing some rules that should be there? Please open an issue on the Penthouse repo with some more details and I'll look into it!

[vlrprbttst]

yes exactly :) i will!