Issue with Laravel mix

[sanjayojha]

I am using Laravel mix for a WordPress project and using this postcss plugin to split my critical css. It generates the critical file without any problem but the main file remains intact, I mean the main file contains the critical css rules which are imported into critical css file. By default, it should remove the critical css part from the main file.

Below is my code in webpack.mix.js

mix.sass('build/css/home.scss', 'assets/css/home.css');
mix.postCss('assets/css/home.css', 'assets/css/home-critical.css', [
    require('postcss-critical-split')()
]);

According to me it should generate 2 files:

1. home-critical.css (containing only critical rules)
2. home.css (containing rest of the rules, no critical rules)

home-critical.css is working fine as expected but home.css contains all the rules (remain intact).

Am I miss something? Is there anyway to generate critical and rest files separately with Laravel mix (which uses webpack under the hood)?

[mrnocreativity]

There are 3 output modes in this plugin: critical, rest and input. Try using the rest-mode. This should only output the css file WITHOUT the critical rules. I think that's what you're after.

NOTE: I no longer actively develop this plugin. If there's a bug in the API, feel free to commit a PR to fix said problem.

[sanjayojha]

Thank you for replying, No, I am not after what you mentioned.

Is there anyway that the processed main file does not contain the critical rule in default critical-mode?

In other word, it should be cut and paste (cut the marked rules from main css file and paste it in critical css file) Right now it is copy and paste.

Hope this time I made it clear?

Between, I am not sure if it is bug or I am not understanding it correctly.

[mrnocreativity]

So you want it to actually alter the original file? I think you might use the REST mode and save it using the original filename. That could overwrite the file and thus achieve the result you want. At least, I think...

So first run the critical mode to generate the critical file. Then run the rest mode to overwrite the original file with the non-critical rules.

[sanjayojha]

Yes, currently I am doing this. Below is the sample code

/* critical css generation */
mix.postCss('assets/css/home.css', 'assets/css/home-critical.css', [    
    require('postcss-critical-split')(),
])
.postCss('assets/css/post.css', 'assets/css/post-critical.css', [
    require('postcss-critical-split')(),
]);

/* non critical css generation */ 
mix.postCss('assets/css/home.css', 'assets/css', [    
    require('postcss-critical-split')({
        'output':'rest'
    }),
])
.postCss('assets/css/post.css', 'assets/css/', [
    require('postcss-critical-split')({
        'output':'rest'
    }),
]);

But, at a time I can run either the critical mode or rest mode. I have to comment out one at a time. So basically I have to run it 2 times.