michtio / laravel-mix-criticalcss Goto Github PK

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.

Hi,

I'm getting a TypeError: Cannot read property 'content-type' of undefined issue.

TypeError: Cannot read property 'content-type' of undefined
at temp (/Users/jake/code/test/node_modules/critical/lib/file-helper.js:106:37)
at requestAsync.then.response (/Users/jake/code/test/node_modules/critical/lib/file-helper.js:193:27)
Canceled due to an error

.criticalCss({ enabled: mix.inProduction(), urls: [ { url: 'http://test.local/', template: 'public/css/index_critical.min.css' }, ], options: { minify: true, }, })

This is also in my Laravel.mix file

require('laravel-mix-criticalcss');

Any help would be great.

Thanks, Jake.

Hi all,

I'm putting this here in case anyone else has the same issue.

Issue:
CSS classes are being applied incorrectly to above-the-fold content.

Cause:
We build several CSS files but do not include all of them on the page we are building critical CSS for. However,
CriticalCSS loads all built CSS via webpack, rather than what is included in the HTML document.

Solutions:

• Add an ID to the body, and wrap all CSS within that ID.

  OR

• Manually specific the CSS filepaths to include via the Critical 'CSS' option. e.g.
  options: { css: [ 'public/css/A.css' ] }

Any better solutions would be appreciated.

Thanks

Hoping to grab some help really quick. Must be something simple I'm missing. Getting this error when running npm run dev using laravel-mix-criticalcss v.0.1.2 with laravel-mix v2.1.14. Any thoughts?

/home/vagrant/Code/project/node_modules/laravel-mix-criticalcss/index.js:59
mix.extend('criticalCss', new Critical());

I feel like it's pretty standard affair as mentioned in your documentation:

require('laravel-mix-criticalcss');

mix.sass('resources/assets/sass/app.scss', 'public/css');
mix.criticalCss({
    enabled: true,
    paths: {
        base: 'http://localhost',
        templates: './public/css/critical/'
    },
    urls: [
        {
            url: 'home',
            template: 'home_critical.min.css'
        }
    ],
    options: {
        minify: true,
    }
});

This mix uses html-critical-webpack-plugin, which is using older version of critical.

Is it possible to use latest version of critical ?

Critical css files don't go into mix-manifest.json so not able to version them and use mix() inside blade template.

This means users with cached versions of the critical css won't get an updated version.

Hello,

I've been using your laravel-mix-criticalcss package in my project, and I recently ran npm audit which reported some security vulnerabilities related to the nth-check library. The vulnerabilities affect several dependencies in your package:

• cheerio (through css-select)
• oust (through cheerio)
• critical (through oust and postcss-image-inliner)
• critical-css-webpack-plugin (through critical)
• svgo (through css-select)
• postcss-image-inliner (through svgo)

It would be greatly appreciated if you could update the affected dependencies in your package to their latest versions, which should mitigate the security vulnerabilities. Once you've updated the dependencies, please release a new version of laravel-mix-criticalcss so that users can safely update their projects.

If you need any additional information or assistance, please let me know.

Thank you for your attention to this matter!

Hi,
I'm working on a not Laravel project, to be precise a WordPress theme.

This is my webpack.mix.js code:

require('laravel-mix-criticalcss');
mix
    .sass('src/app.scss', 'dist')
    .criticalCss({
        enabled: mix.inProduction(),
        paths: {
            base: 'http://website.local',
            templates: './dist/css-critical/'
        },
        urls: [
            { url: '/', template: 'home' },
        ],
        options: {
            minify: true,
        },
    });

After running the npm run prod command, sass task works correctly.
But criticalCss task seems simply getting the app.css and exporting on css-critical directory.

I'm not sure if I'm right: I think script should extract the critical css from the css included in the page, indipendently from the sass task. Am I right?

Thank you for the help

Looks like the naming conventions have changed since writing the documentation.

Instead of:
require('laravel-mix-criticalcss');
Should use:
require('laravel-mix-critical');

Instead of:
mix.criticalCss({
Should use:
mix.critical({

At least, that's what got it working for me.

See title.

this is my webpack.mix.js, it hangs on yarn run production
and on yarn run dev it doesn't do anything no critical css is written, kindly tell me what i am doing wrong

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


mix.scripts([
    'public/frontend/js/jquery-2.1.4.min.js',
    'public/frontend/js/crum-mega-menu.js',
    'public/frontend/js/swiper.jquery.min.js',
    'public/frontend/js/theme-plugins.js',
    'public/frontend/js/main.js',
    'public/frontend/js/form-actions.js',
    'public/frontend/js/ScrollMagic.min.js',
    'public/frontend/js/animation.velocity.min.js',
    'public/frontend/js/animation.ajax-pagination.js'
], 'public/frontend/js/vendor.js')
	.sass('resources/assets/sass/app.scss', 'public/test')
	.options({
      processCssUrls: false
   }).criticalCss({
        enabled: mix.inProduction(),
        paths: {
            base: 'http://mirpurvisaconsultant.test/',
            templates: '/public/frontend/'
        },
        urls: [
            { url: '/', template: 'home' },
        ],
        options: {
            minify: true,
        },
    }).version();

When running npm install laravel-mix-criticalcss, v1.0.2 installs and not 1.1.0

Looks like https://registry.npmjs.org/laravel-mix-criticalcss is not showing 1.1.0

after using laravel-mix-critical how to remove critical from the main CSS?
I used the X package. A CSS file of critical classes is now created. But all of these classes are also present in the main CSS and have not been deleted. This means that these classes are now loaded twice. How to remove them from the main CSS?

my close :

mix.js('resources/js/admin.js', 'public/js')
    .js('resources/js/app.js', 'public/js')
    .js('resources/js/front.js', 'public/js').vue()
    .postCss('resources/css/admin.css', 'public/css')
    .postCss('resources/css/vue-treeselect.css', 'public/css')
    .postCss('resources/css/defer.css', 'public/css')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: "last 2 versions, not ie <= 10",
    })
    .criticalCss({
        enabled: mix.inProduction(),
        paths: {
            base: 'http://dev-app.com/',
            templates: './public/css/',
            suffix: '_critical.min'
        },
        urls: [
            { url: '/', template: 'app' },
        ],
        options: {
            minify: true,
        },
    })
    .webpackConfig(require('./webpack.config'))

if (mix.inProduction()) {
    mix.version()
        .sourceMaps()
        .webpackConfig({devtool: 'source-map'});
}

In some scenario, we may want to allow to a more flexible filename pattern.
Currently the pattern is fixed to TEMPLATE_critical.min.css.

I'm using laravel-mix in conjunction with Drupal, and the system is expecting a different structure for critical css' (./critical/PATH.css).

Although it may be an edge case, I think it would be very useful for different setups having this sort of flexibility.

By default, we can maintain the current pattern.

Does adding the Critical CSS to a file, not render blocking?