After updating to 0.1.6 grunt-critical throws an error:

Unhandled rejection TypeError: Bad argument
at TypeError (native)
at ChildProcess.spawn (child_process.js:1136:26)
at exports.spawn (child_process.js:995:9)
at module.exports (/project_path/node_modules/grunt-critical/node_modules/critical/node_modules/penthouse/lib/index.js:32:10)
at tryCatcher (/project_path/node_modules/grunt-critical/node_modules/critical/node_modules/bluebird/js/main/util.js:26:23)
at ret (eval at (/project_path/node_modules/grunt-critical/node_modules/critical/node_modules/bluebird/js/main/promisify.js:163:12), :13:39)
at /project_path/node_modules/grunt-critical/node_modules/critical/lib/core.js:166:20
at tryCatcher (/project_path/node_modules/grunt-critical/node_modules/critical/node_modules/bluebird/js/main/util.js:26:23)
at Promise._settlePromiseFromHandler (/project_path/node_modules/grunt-critical/node_modules/critical/node_modules/bluebird/js/main/promise.js:503:31)
at Promise._settlePromiseAt (/project_path/node_modules/grunt-critical/node_modules/critical/node_modules/bluebird/js/main/promise.js:577:18)
at Async._drainQueue (/project_path/node_modules/grunt-critical/node_modules/critical/node_modules/bluebird/js/main/async.js:128:12)
at Async._drainQueues (/project_path/node_modules/grunt-critical/node_modules/critical/node_modules/bluebird/js/main/async.js:133:10)
at Immediate.Async.drainQueues as _onImmediate
at processImmediate as _immediateCallback

Gruntfile config:

critical: {
  build: {
    options: {
      base: 'src/',
      css: [
          'src/css/styles.css'
      ],
      width: 1200,
      height: 900,
      pathPrefix: './',
    },
    src: 'dist/index-src.html',
    dest: 'src/css/critical.css'
  }
},

Excellent work here!

Just wondering... I want to inline the critical css into the html, and also have the inlined css removed from the original css.

here is my code:

critical: {
    test: {
        options: {
            base: './',
            css: [
                'processing/temp/style.css'
            ],
            extract: true
        },
        src: 'processing/input/index.html',
        dest: 'processing/temp/index.html'
    }
},

From my tests, it seems like the css is getting inlined into the html... but nothing is being removed from the original css.

Can any let me know what I'm doing wrong?

thanks@!

Hi
Update dependencies inline-critical (0.0.5) and critical (0.4.0) ?
thank

I don't know why but sometimes the generated styles result in an empty string when running the test-multiple with minify:true.
For some reason this seems only to happen when running on travis vm.
Need to dig a bit deeper...

Hi

I am trying to process multiple dimensions against a single HTML file like so:

critical: {
        dist: {
            options: {
                base: './',
                dimensions: [{
                    width: 1300,
                    height: 900
                },
                {
                    width: 500,
                    height: 900
                }]
            },
            files: [
            {src: ['index-critical.html'], dest: 'index.html'}
            ]
        }
    }

But I get the following code inlined:

<style type="text/css">
    [object Object]
</style>

Any ideas?

We have faced an issue while working with an extraordinary large CSS file (almost 150k lines)

It looks like grunt-critical is not able to process the full file. Instead of that the generated critical contents are a very small portion of the original file. So, there is no visible error but it is clearly not good.

If we split that input file into 3-4 parts then it creates bigger contents, but we don't really trust in this approach because it looks like that internally we are yet losing some rules.

We wonder if there is any chance to increase any internal buffer or provide a magic parameter in order to fix this issue.

Is there anything we can do (apart from reducing the size of the input file)?

Thanks and regards

On a website I have all css is inlined for every page and every page has different css. So I'm using this

critical: {
    test: {
        options: {
            base: './',
            inline:false,
            extract:true,
            minify:true
        },
        src: 'https://mydomain.com/',
        dest: 'output/critical.css'
    }
}

But output/critical.css is empty. Using the same options when styles are external files I get the critical css file as intended. Am I doing anything wrong or doesn't this script evaluate <style type="text/css">css code here </style> inside the <head>?

Since the last release of penthouse (0.2.52) pocketjoso/penthouse@704c294 all tests are failing.
It looks like we get a totally different critical css now.

Penthouse version is already locked in critical but we need to wait for a new npm version.

As per readme:

If dest points to an Markup file (HTML, PHP, etc.) the resulting CSS gets inlined and the exiting stylesheets are wrapped in a JavaScript function to load them asynchronously as well as a noscript block for users with JavaScript disabled

So that means, the critical pieces will be loaded the 1st time inside of the HTML.

Then, 2nd, the same critical pieces will be loaded again asynchronously (along with the non critical)?

Thank you for clarifying!

I'm getting this error:

Running "critical:test" (critical) task
Warning: critical.generate(...).then(...).error is not a function Use --force to continue.

My configuration:

// Critical CSS test case
    critical: {
      test: {
        options: {
            base: './',
            css: [
                'bower_components/bootstrap/dist/css/bootstrap.min.css',
                'dist/css/msssi-app.min.css',
                'dist/css/skins/skin-msssi.min.css'
            ],
            width: 1300,
            height: 900
        },
        src: 'index.html',
        dest: 'index-critical.html',
      }

Sorry, if this is a very lame error, I'm quite new at this.

Hi

I am running the following configuration in my Gruntfile:

critical: {
        dist: {
            options: {
                base: './',
                width: 1300,
                height: 900
            },
            src: '**/*.html',
            dest: 'dist/'
        }
    }
})

The idea is that I pick up all HTML files and then dump them into my "dist" folder. When I run this, I unfortunately get the following error:

"Fatal error: Unable to write "dist/" file (Error code: EISDIR)."

If I run the task with --stack, I get the following output

Error: EISDIR, illegal operation on a directory 'C:\Users\dean.hume\Documents\GitHub\typography\dist'
    at Object.fs.openSync (fs.js:427:18)
    at Object.fs.writeFileSync (fs.js:966:15)
    at Object.file.write (C:\Users\dean.hume\Documents\GitHub\typography\node_modules\grunt\lib\grunt\file.js:296:10)
    at C:\Users\dean.hume\Documents\GitHub\typography\node_modules\grunt-critical\tasks\critical.js:63:36
    at C:\Users\dean.hume\Documents\GitHub\typography\node_modules\grunt-critical\node_modules\critical\index.js:275:13
    at tryCatcher (C:\Users\dean.hume\Documents\GitHub\typography\node_modules\grunt-critical\node_modules\critical\node_modules\bluebird\js\main\util.js:24:31)
at Promise._settlePromiseFromHandler (C:\Users\dean.hume\Documents\GitHub\typography\node_modules\grunt-critical\node_modules\critical\node_modules\bluebird\js\main\promise.js:454:31)
    at Promise._settlePromiseAt (C:\Users\dean.hume\Documents\GitHub\typography\node_modules\grunt-critical\node_modules\critical\node_modules\bluebird\js\main\promise.js:530:18)
    at Promise._settlePromises (C:\Users\dean.hume\Documents\GitHub\typography\node_modules\grunt-critical\node_modules\critical\node_modules\bluebird\js\main\promise.js:646:14)
    at Async._drainQueue (C:\Users\dean.hume\Documents\GitHub\typography\node_modules\grunt-critical\node_modules\critical\node_modules\bluebird\js\main\async.js:177:16)

Hi,

Can you update to use critical version 0.7.0, and explain how to use this feature addyosmani/critical#100 in a Grunt task ? :)

Thanks a lot.

Hi there,
can you tell me how to process multiple html-files to get multiple css-files? I want to merge them into one to use just one chunk of inline code on all pages. This way looks to be rather bulky:

critical: {
	test: {
		options: {
			//base: './',
			base: 'public_html',
			css: [
				'public_html/assets/templates/thesite/css/concat.min.css'
			],
			width: 1024,
			height: 768
		},
		src: 'public_html/test/www-processed/index.html',
		dest: 'public_html/test/www-critical/critical.css'
	},
		
	fest: {
		options: {
			//base: './',
			base: 'public_html',
			css: [
				'public_html/assets/templates/thesite/css/concat.min.css'
			],
			width: 1024,
			height: 768
		},
		src: 'public_html/test/www-processed/400.html',
		dest: 'public_html/test/www-critical/critical2.css'
	},
		
},

Thank you.

I'm trying to add critical css to my project, but when I run grunt the '{% for%}' tags fail.

here is html.twig file

<!-- Metas -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="author" content="">
<meta name="description" content="{{ meta.desc }}">
<meta name="robots" content="{{ not meta.sitemap is defined or meta.sitemap == 1 ? 'index, follow' : 'noindex, nofollow' }}">
<link rel="shortcut icon" href="{{ favicon is empty ? '' : JAMBI_UPLOADS ~ favicon }}" type="image/x-icon">
{% for key,value in meta.hreflang %}
    <link rel="alternate" hreflang="{{ key }}" href="{{ value }}" />
{% endfor %}

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="{{ styleFile }}"/>

<!-- Javascripts -->
<script type="text/javascript" src="{{ scriptFile }}"></script>

<title>{{ meta.title }}</title>

here is gruntfile.js

critical: {
        'test': {
            options: {
                minify: true,
                extract: true,
                base: './',
                css: [
                    'dist/css/style.min.css',
                ],
                width: 1300,
                height: 900
            },
            src: '../view/layouts/fileName.html.twig',
            dest: '../view/layouts/fileName2.html.twig'
        },
    },

It works fine when I remove the for tags.

Does anyone know the solution to the problem?

It might be something I'm doing wrong, but for some reason, I keep getting the following message:

Destination (html/critical/index.html) failed. undefined
File "html/critical/index.html" created.
Fatal error: Callback was already called.

My gruntfile has the following:

critical: {
      test: {
        options: {
          base: './',
          css: [
            'min/styles.css'
          ],
          width: 320,
          height: 70
        },
        src: 'html/index.html',
        dest: 'html/critical/index.html'
      }
    }

Have I implemented it incorrectly? It just creates a blank file where the dest path leads to

Hey Guys,

I tried to ignore all URL Paths for my critical.css.
In my case there are some background shorthand properties.
But my critcal task are ignore the whole background line and not only the url definition.

Im Using the Version 0.2.2

Here is an example:

public.css:

    .page-header {
        background: url("images/header-bg.jpg") scroll repeat #676E4C;
        background-size: cover;
        height: 320px;
    }

output the critical css:

    .page-header {
        background-size: cover;
        height: 320px;
    }

expected:

    .page-header {
        background: #676E4C;
        background-size: cover;
        height: 320px;
    }

My Gruntfile configuration:

        critical: {
            test: {
                options: {
                    base: '../../../../',
                    css: [
                        '../public.css'
                    ],
                    width: 1024,
                    height: 768,
                    ignore: ['@font-face', '@import', '@charset', /url\([^)]*\)/]
                },
                files: [{
                    src: 'critical.html',
                    dest: '../critical.css'
                }]
            }
        }

Hope you can help me :)

When I try to run the grunt task on a folder containing multiple HTML files, it runs for a few HTML files and after a while, I get this error:

Penthouse timed out after 30s.

This is my grunt config:

critical: {
    test: {
        options: {
            base: './',
            minify: true,
            width: 1280,
            height: 800
        },
        files: [
            {cwd: '.', src: ['build/en-US/**/*.html'], dest: 'compressed/'}
        ]
    }
}

Using node 8.9.0

Initially I had issues with 1.0.0 as in here: addyosmani/critical#218.

I applied yawlhead91's fix and grunt-critical ran at without any error messages.

Now using the write to css file option, I do get some css in there but not anything critical. Write to an html file overwrites the html file completely with that same css.

I attempted to downgrade to v0.2.2 as suggested elsewhere, still with errors.

Anyone else seeing this? Any info I can provide which would help? Thanks

Hi,

I'm not able to get grunt-critical to work with .tpl files (Smarty template engine).
I'm using the following config:

critical: {
    options: {
        base: './',
        css: [
            'css/main.css'
        ],
        minify: true,
        dimensions: [{
            width: 1300,
            height: 900
        }, {
            width: 500,
            height: 900
        }]
    },
    src: 'html/*.tpl',
    dest: '_dist/html/'
}

Running the task results in the following warning:

Warning: File "_dist/html/" failed. Use --force to continue.

Assuming the warning is thrown because grunt-critical doesn't recognise .tpl files?
Any idea on how to get this to work?

Thanks in advance for any help you are able to provide.

Would it be possible to publish the latest version to NPM with the [email protected] dep?

There were issues while installing the plugin (however I did it like sudo npm install grunt-critical --unsafe-perm=true)
Now there's an error while launching it:

(node:9421) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
/home/sfocus/web/seo-focus.cl/node_modules/puppeteer/.local-chromium/linux-526987/chrome-linux/chrome: error while loading shared libraries: libXcursor.so.1: cannot open shared object file: No such file or directory


TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

    at onClose (/home/sfocus/web/seo-focus.cl/node_modules/puppeteer/lib/Launcher.js:226:14)
    at Interface.helper.addEventListener (/home/sfocus/web/seo-focus.cl/node_modules/puppeteer/lib/Launcher.js:215:50)
    at emitNone (events.js:111:20)
    at Interface.emit (events.js:208:7)
    at Interface.close (readline.js:370:8)
    at Socket.onend (readline.js:149:10)
    at emitNone (events.js:111:20)
    at Socket.emit (events.js:208:7)
    at endReadableNT (_stream_readable.js:1064:12)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
(node:9421) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:9421) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Node v8.11.1
Npm 6.0.0

Hello, everyone.
For example I have url "https://www.cleanandclear.com.vn".
Node version is 9.0.0
npm version 3.8.6
grunt 0.4.5

My config is:
grunt.config('critical', {
debug: {
options: {
base: './',
timeout: 60000,
penthouse: { "strict": false, "renderWaitTime": 5000, "blockJSRequests": false, "pageLoadSkipTimeout": 20000 },
width: 1920,
height: 1920,
pathPrefix: ""
},
src: "https://www.cleanandclear.com.vn/",
dest: "my-critical.css"
}
});

I used grunt-critical 0.3.0 and always got the following error:

Running "critical:debug" (critical) task
File "my-critical.css" failed. Error opening url 'https://www.cleanandclear.com.vn/': Connection closed

But I found the same problem here addyosmani/critical#240 and then I updated grunt-critical from 0.3.0 to 1.1.0 , which uses penthouse with Chrome headless, instead of PhantomJS.

But never mind is it grunt-critical 0.3.0 or 1.1.0, very rarely and randomly I am getting the following error:

1st error:

Unhandled rejection Error: socket hang up
at createHangUpError (_http_client.js:330:15)
at TLSSocket.socketOnEnd (_http_client.js:423:23)
at emitNone (events.js:120:20)
at TLSSocket.emit (events.js:218:7)
at endReadableNT (_stream_readable.js:1054:12)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)

The worst thing is this error appears randomly, say on 9 of 10 times it's ok, and 1 of 10 it could fail. All run options and parameters are similar, so I even don't have any idea...

2nd error:

Running "critical:debug" (critical) task
Unhandled rejection Error: Wrong status code 502 for https://example.com/some-css.css
at Request.request [as _callback] (/node_modules/critical/lib/file-helper.js:146:31)
at Request.self.callback (/node_modules/request/request.js:188:22)
at emitTwo (events.js:135:13)
at Request.emit (events.js:224:7)
at Request. (/node_modules/request/request.js:1171:10)
at emitOne (events.js:125:13)
at Request.emit (events.js:221:7)
at IncomingMessage. (/node_modules/request/request.js:1091:12)
at Object.onceWrapper (events.js:322:30)
at emitNone (events.js:120:20)
at IncomingMessage.emit (events.js:218:7)
at endReadableNT (_stream_readable.js:1054:12)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)

So, question: is there any way to handle these Unhandled errors?
Thank you.

Hi @bezoerb, I ran into an issue when running grunt-critical in Travis. I'm getting a sporadic error which says " failed - Unexpected end of JSON input". I'm not able to reliably reproduce it; it occurs at different points during the task runtime in each occurrence.

After digging around a bit, I noticed that this might be due to parallel instances of Penthouse (and Phantom, by extension) and I also noticed that you've fixed this in commit 600a5e8 (ref: Issue #10) by serializing the calls to critical using eachSeries instead of each. However, I'm still getting this error while building in Travis.

Do you have any idea as to what might be causing this issue? Is there any other way parallel calls can go through to the underlying critical and Penthouse instances? Or is there any other dependency which can result in this error? From what I could gather from similar issues, at the deepest level, the error is caused by accessing locked files in the file system.

If you have any ideas, please do let me know, I'd be happy to investigate further and pitch in with a PR if I'm able to reproduce the error reliably.

Thanks!

Info:

• My grunt task is configured to pass files as an array of objects with src and dest keys (with respective values).
• The timeout is set dynamically during Grunt runtime before triggering the tasks - we do this since the number of URLs to be processed grows over time and we set a multiple of the number of URLs as the time out (eg. 5s * 120 URLs = 600s for the entire target).

I'm unable to add further details since it's private code, sorry about the lack of detail.

I've used grunt-critical to great success on some projects already (thank you!), but in moving an existing site over to grunt-critical, I've encountered a problem.

I run grunt critical, and it just hangs. I've left it running for hours, to no avail, it just sits there churning up 100% of CPU. If I interrupt the task with ^C, there are tmp-4073j10r0cw.css files sitting in the build directory that appear to be the correct inline CSS.

Here's what the grunt task looks like:

    critical: {
        site_index: {
            options: {
                base: '<%= pkg.dist_path %>',
                css: [
                    '<%= pkg.dist_path %>css/site.combined.min.css',
                ],
                width: 960,
                height: 900
            },
            src: '<%= pkg.build_path %>html/site_index.html',
            dest: '<%= pkg.dist_path %>css/site_index_critical.min.css'
        },

In package.json:

  "dist_path": "",
  "build_path": "build/",
  "template_path": "../templates/default_site/",
  "site_url": "http://www.CrushLivePoker.com/",

What I do is I have a separate grunt curl task that curls the site_index into <%= pkg.build_path %>html/site_index.html so that it's cached; you can see that static HTML file here:

http://www.crushlivepoker.com/site/build/html/site_index.html

I also point it to the CSS locally, rather than having it parse through the HTML, because I load everything via a CDN, async with loadCSS(). It also just seemed cleaner. Here's the URL to the CSS file it parses against:

http://www.crushlivepoker.com/site/css/site.combined.min.css

For completeness, here's the npm list of the grunt-critical task I have installed:

├─┬ [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   ├── [email protected]
│   ├─┬ [email protected]
│   │ ├─┬ [email protected]
│   │ │ ├── [email protected]
│   │ │ └─┬ [email protected]
│   │ │   └── [email protected]
│   │ ├─┬ [email protected]
│   │ │ └── [email protected]
│   │ ├── [email protected]
│   │ └─┬ [email protected]
│   │   ├── [email protected]
│   │   ├── [email protected]
│   │   ├── [email protected]
│   │   ├── [email protected]
│   │   └─┬ [email protected]
│   │     ├── [email protected]
│   │     ├── [email protected]
│   │     ├── [email protected]
│   │     └── [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected]
│   ├─┬ [email protected]
│   │ ├── [email protected]
│   │ └─┬ [email protected]
│   │   ├── [email protected]
│   │   └─┬ [email protected]
│   │     ├── [email protected]
│   │     └── [email protected]
│   ├── [email protected]
│   ├─┬ [email protected]
│   │ ├── [email protected]
│   │ ├─┬ [email protected]
│   │ │ └─┬ [email protected]
│   │ │   └── [email protected]
│   │ ├── [email protected]
│   │ ├── [email protected]
│   │ ├─┬ [email protected]
│   │ │ ├── [email protected]
│   │ │ └── [email protected]
│   │ └── [email protected]
│   ├─┬ [email protected]
│   │ ├── [email protected]
│   │ └─┬ [email protected]
│   │   └── [email protected]
│   ├─┬ [email protected]
│   │ ├─┬ [email protected]
│   │ │ ├─┬ [email protected]
│   │ │ │ ├── [email protected]
│   │ │ │ ├─┬ [email protected]
│   │ │ │ │ └── [email protected]
│   │ │ │ ├─┬ [email protected]
│   │ │ │ │ ├── [email protected]
│   │ │ │ │ ├── [email protected]
│   │ │ │ │ └── [email protected]
│   │ │ │ └── [email protected]
│   │ │ └── [email protected]
│   │ ├─┬ [email protected]
│   │ │ └── [email protected]
│   │ ├─┬ [email protected]
│   │ │ └── [email protected]
│   │ └─┬ [email protected]
│   │   ├── [email protected]
│   │   ├─┬ [email protected]
│   │   │ └── [email protected]
│   │   ├─┬ [email protected]
│   │   │ └── [email protected]
│   │   └── [email protected]
│   ├── [email protected]
│   ├─┬ [email protected]
│   │ ├─┬ [email protected]
│   │ │ ├── [email protected]
│   │ │ └── [email protected]
│   │ ├── [email protected]
│   │ └── [email protected]
│   ├── [email protected]
│   ├─┬ [email protected]
│   │ ├─┬ [email protected]
│   │ │ ├─┬ [email protected]
│   │ │ │ ├── [email protected]
│   │ │ │ └─┬ [email protected]
│   │ │ │   └── [email protected]
│   │ │ ├─┬ [email protected]
│   │ │ │ └── [email protected]
│   │ │ ├── [email protected]
│   │ │ └─┬ [email protected]
│   │ │   ├── [email protected]
│   │ │   ├── [email protected]
│   │ │   ├── [email protected]
│   │ │   ├── [email protected]
│   │ │   └─┬ [email protected]
│   │ │     ├── [email protected]
│   │ │     ├── [email protected]
│   │ │     ├── [email protected]
│   │ │     └── [email protected]
│   │ └── [email protected]
│   ├─┬ [email protected]
│   │ ├─┬ [email protected]
│   │ │ └── [email protected]
│   │ └─┬ [email protected]
│   │   ├── [email protected]
│   │   ├── [email protected]
│   │   ├─┬ [email protected]
│   │   │ └── [email protected]
│   │   ├── [email protected]
│   │   ├─┬ [email protected]
│   │   │ ├─┬ [email protected]
│   │   │ │ └── [email protected]
│   │   │ ├── [email protected]
│   │   │ ├── [email protected]
│   │   │ ├─┬ [email protected]
│   │   │ │ └── [email protected]
│   │   │ ├── [email protected]
│   │   │ ├── [email protected]
│   │   │ └── [email protected]
│   │   ├── [email protected]
│   │   ├─┬ [email protected]
│   │   │ ├── [email protected]
│   │   │ ├─┬ [email protected]
│   │   │ │ └─┬ [email protected]
│   │   │ │   ├── [email protected]
│   │   │ │   ├── [email protected]
│   │   │ │   ├── [email protected]
│   │   │ │   └── [email protected]
│   │   │ ├── [email protected]
│   │   │ ├── [email protected]
│   │   │ ├─┬ [email protected]
│   │   │ │ ├─┬ [email protected]
│   │   │ │ │ └── [email protected]
│   │   │ │ └── [email protected]
│   │   │ ├─┬ [email protected]
│   │   │ │ ├── [email protected]
│   │   │ │ ├── [email protected]
│   │   │ │ ├── [email protected]
│   │   │ │ └── [email protected]
│   │   │ ├─┬ [email protected]
│   │   │ │ ├── [email protected]
│   │   │ │ ├── [email protected]
│   │   │ │ └── [email protected]
│   │   │ ├── [email protected]
│   │   │ ├── [email protected]
│   │   │ ├── [email protected]
│   │   │ ├── [email protected]
│   │   │ ├── [email protected]
│   │   │ ├── [email protected]
│   │   │ ├─┬ [email protected]
│   │   │ │ └── [email protected]
│   │   │ └── [email protected]
│   │   ├─┬ [email protected]
│   │   │ └── [email protected]
│   │   ├── [email protected]
│   │   └── [email protected]
│   ├── [email protected]
│   └── [email protected]

I have a question that might be related to an issue I have.

I try to use it for the first time: so here is what I did in my gruntfile.

module.exports = function(grunt) {

  grunt.loadNpmTasks('grunt-critical');

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    critical: {
      test: {
          options: {
              base: './',
              css: [
                  'assets/css/frontend/accueil.css',
                  'lib/bootstrap/css/bootstrap.css'
              ],
              width: 320,
              height: 70
          },
          src: 'apps/frontend/modules/accueil/template.php',
          dest: 'apps/frontend/modules/accueil/template.css'
      }
    }
  });
  grunt.registerTask('default', ['critical']);
};

So if I understand what I'm doing: the task will look the critical css from the file template.php coming from accueil.css and bootstrap.css and will write the new css inside template.css. Am I right ?

But actually I'm getting this error and I can't find why:

Running "critical:test" (critical) task
>> File "apps/frontend/modules/accueil/template.css" failed. net::ERR_ABORTED at file:///var/www/html/critical.agoravita.com/temp/test-critical/apps/frontend/modules/accueil/template.php
Warning: File "apps/frontend/modules/accueil/template.css" failed. Use --force to continue.

Aborted due to warnings.

I would also like to know how is it working exactly ? When I look to your example you are using an html page. But can work with php page too ? I guess it is. But then, what if the php page is using multiple template. In fact my file template.php is a bunch of functions that might be called or not.

Hello everyone.
As I quite clear understand, grunt-critical is a shell over critical module (https://github.com/addyosmani/critical) which based on penthouse module (https://github.com/pocketjoso/penthouse).
So as I see Penthouse has options to work with JS, they are: renderWaitTime and blockJSRequests. But grunt-critical does not.
My questions is: does grunt-critical proceed html page and produce critical CSS including styles which were inserted/appended by JavaScript.
For example
my css file is:
.my-class{...}
.classss{...}
My source html is the following:
< div class="my-class">< span>qwe</ span></ div>

After proceeding DOM html by JavaScript html code is going to be the following:
< div class="classss my-class">< span>qwe</ span></ div>

So , i'd like to get critical css by grunt-critical which will has .my-class and .classss. But now it's only getting .my-class

Hi all,

this is the console error when i try to run the latest plugin release

C:\www\boraso_tools\responsive-image-test>grunt critical
Running "critical:test" (critical) task
>> File "critical.html" failed. ENOENT: no such file or directory, open 'C:\tmp\tmp-2496VzngzF4vg8Q6.tmp'
Warning: File "critical.html" failed. Use --force to continue.

with the following Gruntfile.js

/*global module:false*/
module.exports = function (grunt) {

    grunt.loadNpmTasks('grunt-collection');

    // Project configuration.
    grunt.initConfig({
        //load package
        pkg: grunt.file.readJSON('package.json'),
        // Task configuration.
        cssmin: {
            target: {
                files: {
                    'css/<%= pkg.name %>.min.css': ['css/main.css']
                }
            }
        },
        concat: {
            options: {
                separator: ';',
                stripBanners: true,
                banner: '/*! <%= pkg.author %> - <%= pkg.name %> - v<%= pkg.version %> - ' +
                        '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            dist: {
                src: ['js/vendor/picturefill.min.js', 'js/main.min.js'],
                dest: 'js/<%= pkg.name %>.min.js'
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                        '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            my_target: {
                files: {
                    'js/main.min.js': ['js/main.js']
                }
            }
        },
        critical: {
            test: {
                options: {
                    base: './',
                    width: 1200,
                    height: 800
                },
                src: 'index.html',
                dest: 'critical.html'
            }
        }
    });

    //Tasks list.
    grunt.registerTask('default', ['cssmin', 'uglify', 'concat', 'critical']);

};

The strange thing is that the same plugin in another project, runs perfectly.
In this one I choose to share the grunt module from a parent dir through a grunt-collection.
Any suggestion?

1. Summary

If I use grunt-critical + grunt-pageres + grunt-load-config:

    grunt-critical 2.0.0 is more than 10x slower than 1.1.3.

2. Details

2.1. Real project

My AppVeyor build was not completed in 1 hour — quota per build job. Although before that the build time did not exceed 25 minutes; see for example my next build. AppVeyor hangs on the grunt-critical task.

I ran the grunt-critical task for my project on the local machine.

• 2.0.0:

Execution Time (2020-09-18 08:56:19 UTC+3)
loading tasks         12ms  0%
critical:dist    21m 31.6s  ██████████████████████████████████████████████████████████████ 100%
Total 21m 31.6s

• 1.1.3:

Execution Time (2020-09-18 11:30:39 UTC+3)
loading tasks       21ms  0%
critical:dist   1m 42.6s  ██████████████████████████████████████████████████████████████ 100%
Total 1m 42.6s

2.2. Puppeteer

If I use grunt-critical and grunt-pageres:

    Chromium is installed 2 times.

See output of npm install command for my MCVE:

• First:

$ npm install

> puppeteer@1.20.0 install /home/travis/build/Kristinita/SashaGruntDebugging/node_modules/capture-website/node_modules/puppeteer

Chromium downloaded to /home/travis/build/Kristinita/SashaGruntDebugging/node_modules/capture-website/node_modules/puppeteer/.local-chromium/linux-686378

• Second:

> puppeteer@2.1.1 install /home/travis/build/Kristinita/SashaGruntDebugging/node_modules/puppeteer

Chromium downloaded to /home/travis/build/Kristinita/SashaGruntDebugging/node_modules/puppeteer/.local-chromium/linux-722234

3. MCVE

Forming the MCVE turned out to be a long job.

You can see it in KiraCritical branch of my demo/debugging repository:

1. Gruntfile.coffee:

   module.exports = (grunt) ->
   
       require('time-grunt') grunt
   
       grunt.loadNpmTasks 'grunt-critical'
   
       grunt.initConfig
   
           critical:
               dist:
                   options:
                       extract: false
                   files: [
                       expand: true
                       cwd: "output/"
                       src: [
                               "IT-articles/*.html"
                               "Sublime-Text/*.html"
                               "Programs/*.html"]
                       dest: "."
                       ]
       return

2. Part of package.json:

   "devDependencies": {
       "coffeescript": "^2.5.1",
       "grunt": "^1.3.0",
       "grunt-critical": "^2.0.0",
       "grunt-pageres": "^4.0.1",
       "load-grunt-config": "^3.0.1",
       "load-grunt-tasks": "^5.1.0",
       "time-grunt": "^2.0.0"
   }

3. .travis.yml:

   os: linux
   
   dist: focal
   
   cache: false
   
   git:
     depth: 1
   
   language: node_js
   
   node_js:
   - node
   
   install:
   - npm install -g grunt-cli
   - npm install
   
   script:
   - grunt critical --verbose
   

And some real HTML and CSS files.

4. Behavior

4.1. Expected

Without conflicting plugins grunt-critical 2.0.0 completed the task in 18.8 seconds.

4.2. Current

If we add to our Gruntfile.coffee the line:

require('time-grunt') grunt

+ require('load-grunt-config') grunt

grunt.loadNpmTasks 'grunt-critical'

grunt-critical completed the same task in 4 minutes 27.6 seconds.

5. Don’t offer

5.1. “It not my issue, update grunt-pageres subdependencies”

Possibly, updating subdependencies of critical and/or pageres won’t fix the problem. In the future, it is possible that critical and pageres will have different versions of Puppeteer → Chromium will be installed 2 times again → problem from my issue may repeat.

It would be nice to have such a solution so that this problem doesn’t recur in the future.

Thanks.

Hello,

Having trouble with svg's - I assume the issue is self closing tags.

I've seen this was addressed years ago in critical / cheerio and those are marked as closed. Have not had this in previous experience with this module. Any suggestions for a fix with current version?

This:

<symbol viewBox="0 0 24 24" id="shape-clock"> <title>clock</title> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" /> <path d="M0 0h24v24H0z" fill="none" /> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" /> </symbol>

Becomes this:

<symbol viewbox="0 0 24 24" id="shape-clock"> <title>clock</title> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"> <path d="M0 0h24v24H0z" fill="none"> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"> </path> </path> </path> </symbol>

Thnaks

Latest critical version has a target option that allows to save the remaining css (uncritical) to a different file

  target: {
    css: 'critical.css',
    html: 'index-critical.html',
    uncritical: 'uncritical.css',
  },

It would be great if we could use that functionality to be able to use this library to extract critical css without duplicity if we're not inyecting it in HTML.

If I have a line of code in my CSS, like:

@font-face {
  font-family: 'gotham-book';
  src: url('../fonts/gotham-book.woff') format('woff');
}

When Grunt Critical is fired it changes the path to my local path.

Just like this:
src:url(../../../../../websites/homestead/projects/myproject/user/themes/hdwp-theme/fonts/gotham-book.woff)

Any idea how I can preserve the file paths?

I'm having trouble incorporating grunt-critical into my workflow.

I'm on a jekyll site with grunt-usemin, handling cachebusting amongst other tasks. As a result, I can't directly reference the css file by name as the cachebusting value changes. I also want to exclude the ie8 version of the stylesheet.

My config object:

critical: {
    test: {
        options: {
            base: './',
            css: [
                '<%= app.dist %>/css/main*.css',
                '!<%= app.dist %>/css/main.ie8*.css'
            ],
            width: 320,
            height: 70
        },
        src: '<%= app.dist %>/index.html',
        dest: '<%= app.dist %>/index.html'
    }
},

Unfortunately this errors.

If I change to css property for example to the specific revision of main.css for this current build:

 css: '<%= app.dist %>/css/main.baea.css'

grunt-critical runs successfully, so i'm confident the issue is with passing the file paths through to critical, but I'm unsure what the problem is.

Any ideas?

Thanks!

Hey!

I'm having an issue where crucial css isn't being inlined into the destination HTML file. Here's my task:

    critical: {
      build: {
        options: {
          base: './',
          css: [
            'assets/styles/main.css',
          ],
          width: 1600,
          height: 900
        },
        src: 'build/index.html',
        dest: 'build/index.html'
      },
      test: {
        options: {
          base: './',
          css: [
            'assets/styles/main.css',
          ],
          width: 1000,
          height: 600
        },
        src: 'build/index.html',
        dest: 'critical.css'
      }
    },

critical:test yields the expected CSS that's above the fold. critical:build yields most of the CSS but seems to miss two or three selectors. Is there anything I should be looking for to diagnose this issue?

Or is there a way to inline the content of critical.css into my HTML file?

Thanks!

Unless I'm reading into things wrong, when extracting the Critical CSS it should delete those rules from the file it grabbed them from.

Is that the intention or does that have to be solved a different way?

I'm not sure if there's something I'm doing wrong with critical but I'm ending up with absolute paths in the critical CSS itself, for example for URLs to fonts, backgrounds, etc.

Is there some way to prevent these paths from being rewritten by critical?

Here's en excerpt from my Gruntfile:

    critical: {
        site_index: {
            options: {
                base: './',
                css: [
                    '<%= pkg.dist_path %>css/site.stripped.min.css',
                ],
                width: 1170,
                height: 768
            },
            src: 'build/html/index.html',
            dest: '<%= pkg.dist_path %>css/site_index_critical.min.css'
        },

Hello!
How can I process multiple files? Because this task:

critical: {
            dist: {
                options: {
                    base: './',
                    css: [
                        '.tmp/css/blog.css'
                    ],
                    minify: true,
                    width: 320,
                    height: 480
                },
                src: '<%= yeoman.dist %>/**/*.html',
                dest: '<%= yeoman.dist %>/**/*.html'
            }
        }

Gives me following error:

Running "critical:dist" (critical) task
(node) warning: possible EventEmitter memory leak detected. 11 listeners added. Use emitter.setMaxListeners() to increase limit.
Trace
    at process.addListener (events.js:160:15)
    at process.on.process.addListener (node.js:773:26)
    at module.exports (F:\development\web\site.com\node_modules\grunt-critical\node_modules\critical\node_modules\penthouse\lib\index.js:50:13)
    at ret (eval at makeNodePromisifiedEval (F:\development\web\site.com\node_modules\grunt-critical\node_modules\critical\node_modules\bluebird\js\main\promisify.js:177:12), <anonymous>:12:26)
    at F:\development\web\site.com\node_modules\grunt-critical\node_modules\critical\src\critical.js:168:16
    at tryCatch1 (F:\development\web\site.com\node_modules\grunt-critical\node_modules\critical\node_modules\bluebird\js\main\util.js:21:21)
    at Promise._settlePromiseFromHandler (F:\development\web\site.com\node_modules\grunt-critical\node_modules\critical\node_modules\bluebird\js\main\promise.js:591:13)
    at Promise._settlePromiseAt (F:\development\web\sitey.com\node_modules\grunt-critical\node_modules\critical\node_modules\bluebird\js\main\promise.js:755:18)
    at Async._drainQueue (F:\development\web\site.com\node_modules\grunt-critical\node_modules\critical\node_modules\bluebird\js\main\async.js:83:12)
    at Async._drainQueues (F:\development\web\site.com\node_modules\grunt-critical\node_modules\critical\node_modules\bluebird\js\main\async.js:88:10)
Fatal error: Unable to create directory "F:\development\web\site.com\dist\**" (Error code: ENOENT).

I am using grunt-ciritical to generate a critical css block.
I realized just now that the CSS files are requested (and loaded) twice according to the network tab of the Developer Tools (Chrome).

I checked this by adding a '1' at the end of each of the 3 CSS file paths provided in the loadCSS function rendering the paths invalid.

As it turns out I get 6 404 errors in my DevTool network tab, two for each css file I included.
If the paths are a valid source the files are loaded twice meaning that the delivered source is even bigger that before.

So I checked if it was about the network throttling I enabled to check loading speed but unfortunately that doesn't seem to be the case.

It doesn't seem to happen in Firefox though. Do you have any idea what might be the problem?

Hi. Started using your plugin and faced the problem that the "ignore" option doesn't work

Here is the code example

critical: {
      test: {
        base: './',
        css: 'source/css/main.css',
        width: 1200,
        height: 600,
        minify: true,
        extract: true,
        ignore: ['@font-face'],
        src: 'output_dev/index.html',
        dest: 'output_dev/index-critical.html',
      }
    },

Running "critical:test-multiple-files-folder" (critical) task
Unhandled rejection Error: C:\Users\xmr\Desktop\grunt-critical\test\generated\multiple-files-folder\C:\Users\xmr\Desktop\grunt-critical\test\fixture contains invalid WIN32 path characters.
  at mkdirsSync (C:\Users\xmr\Desktop\grunt-critical\node_modules\fs-extra\lib\mkdirs\mkdirs-sync.js:16:20)
  at Object.mkdirsSync (C:\Users\xmr\Desktop\grunt-critical\node_modules\fs-extra\lib\mkdirs\mkdirs-sync.js:35:16)
  at Object.outputFileSync (C:\Users\xmr\Desktop\grunt-critical\node_modules\fs-extra\lib\output\index.js:28:9)
  at C:\Users\xmr\Desktop\grunt-critical\tasks\critical.js:117:24
  at tryCatcher (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\util.js:16:23)
  at Promise._settlePromiseFromHandler (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:502:31)
  at Promise._settlePromise (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:559:18)
  at Promise._settlePromise0 (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:604:10)
  at Promise._settlePromises (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:683:18)
  at Promise._fulfill (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:628:18)
  at Promise._resolveCallback (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:423:57)
  at Promise._settlePromiseFromHandler (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:514:17)
  at Promise._settlePromise (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:559:18)
  at Promise._settlePromise0 (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:604:10)
  at Promise._settlePromises (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:683:18)
  at Promise._fulfill (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:628:18)
  at PropertiesPromiseArray.PromiseArray._resolve (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise_array.js:125:19)
  at PropertiesPromiseArray._promiseFulfilled (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\props.js:78:14)
  at Promise._settlePromise (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:564:26)
  at Promise._settlePromise0 (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:604:10)
  at Promise._settlePromises (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:683:18)
  at Promise._fulfill (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:628:18)
  at Promise._resolveCallback (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:423:57)
  at Promise._settlePromiseFromHandler (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:514:17)
  at Promise._settlePromise (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:559:18)
  at Promise._settlePromise0 (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:604:10)
  at Promise._settlePromises (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:683:18)
  at Promise._fulfill (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:628:18)
  at MappingPromiseArray.PromiseArray._resolve (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise_array.js:125:19)
  at MappingPromiseArray._promiseFulfilled (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\map.js:97:18)
  at Promise._settlePromise (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:564:26)
  at Promise._settlePromise0 (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:604:10)
  at Promise._settlePromises (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\promise.js:683:18)
  at Async._drainQueue (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\async.js:138:16)
  at Async._drainQueues (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\async.js:148:10)
  at Immediate.Async.drainQueues [as _onImmediate] (C:\Users\xmr\Desktop\grunt-critical\node_modules\bluebird\js\release\async.js:17:14)
  at tryOnImmediate (timers.js:543:15)
  at processImmediate [as _immediateCallback] (timers.js:523:5)

And the process is stuck there.

We could set up AppVeyor like we do for Grunt/Grunt contrib in order to test Windows. I can make a PR if needed for this.

Unhandled rejection Error: File.contents can only be a Buffer, a Stream, or null.