extract: true issue?

[whats1thingnow]

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@!

[bezoerb]

When using the extract option, a copy of the original file is created to not mess up with other pages using the same stylesheet. Your index.html should use the modified version after using critial.
It should look something linke this:

<style type="text/css">
   ...
</style>
<script id="loadcss">
   ...
</script>
<noscript>
    <link rel="stylesheet" href="styles/style.b5ff4680.css">
</noscript>

[whats1thingnow]

thank you for your reply.

my html has this in the head:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="NOINDEX, NOFOLLOW" name="ROBOTS">
<link rel="stylesheet" href="style_hlc.min.css"/>

my gruntfile.js:

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

which is saying to analyze style_hlc.css for critical css and then inline the critical to index.html

then the resulting index.html i get is:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="NOINDEX, NOFOLLOW" name="ROBOTS">

<!-- inline css added here -->

<script id="loadcss">
(function(u,s){!function(e){"use strict";var n=function(n,t,o){var l,r=e.document,i=r.createElement("link");if(t)l=t;else{var a=(r.body||r.getElementsByTagName("head")[0]).childNodes;l=a[a.length-1]}var d=r.styleSheets;i.rel="stylesheet",i.href=n,i.media="only x",l.parentNode.insertBefore(i,t?l:l.nextSibling);var f=function(e){for(var n=i.href,t=d.length;t--;)if(d[t].href===n)return e();setTimeout(function(){f(e)})};return i.onloadcssdefined=f,f(function(){i.media=o||"all"}),i};"undefined"!=typeof module?module.exports=n:e.loadCSS=n}("undefined"!=typeof global?global:this);for(var i in u){loadCSS(u[i],s);}}(['style_hlc.min.css'],document.getElementById("loadcss")));
</script>
<noscript>
<link rel="stylesheet" href="style_hlc.min.css">
</noscript>

for some reason, i do not get a modified version of the css

thanks for the help!

[XhmikosR]

This is something that baffles me too. But in my case I want to do this for many index.html files. I haven't found a solution yet.