laravel-mix-criticalcss icon indicating copy to clipboard operation
laravel-mix-criticalcss copied to clipboard

No critical css output

Open vpmv opened this issue 2 years ago • 2 comments

I'm not sure I fully understand the documentation, because for some reason the script is not outputting any css. I'm running the config in a separate process, as this is a docker container, which can't lookup itself until fully compiled.

I'm actually using https://github.com/ampedweb/laravel-mix-criticalcss, since that one at least doesn't crash. Perhaps @ampedweb can be of service?

let mix = require('laravel-mix');
require('laravel-mix-criticalcss');

mix
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .criticalCss({
        enabled: true,
        paths: {
            base: 'http://127.0.0.1',
            templates: 'public/css/',
            suffix: '.critical.min'
        },
        urls: [
            { url: '/', template: 'home' }
//             more ...
        ],
        options: {
            height: 800
        }
     })
;

So it ends up generating a few empty css files. Not sure how to move on.

vpmv avatar Jul 06 '22 15:07 vpmv

Hi @netitus . I think it might possibly be timing out? Also try specifying a width.

Here's an example config from one of my projects:

.criticalCss({
    enabled: mix.inProduction(),
    paths: {
        base: "http://devurl.docker/",
        templates: './css/critical/',
        suffix: '_critical.min'
    },
    urls: [
        {url: '', template: 'homepage'},
        {url: 'other-page', template: 'other_page'},
    ],
    options: {
        width: 411,
        height: 823,
        penthouse: {
            timeout: 1200000,
            //pageLoadSkipTimeout:100000,
            // screenshots: {
            //     basePath: 'homepage', // absolute or relative; excluding file extension
            //     type: 'jpeg', // jpeg or png, png default
            //     quality: 30 // only applies for jpeg type
            // }
            //allowedResponseCode:200
        }
        //timeout: 1200000,
        //minify: true,
    },
})

ampedweb avatar Jul 06 '22 15:07 ampedweb

Thanks for your reply, @ampedweb . I'm afraid that doesn't help. I've set width and height and penthouse.timeout. To further check things, I reviewed and added the screenshot config as well, but that doesn't seem to do anything. It doesn't create any images. Maybe I'm missing some prerequisites?

vpmv avatar Jul 08 '22 10:07 vpmv