Critical CSS and Twig Files

[JakeHenshall]

Hi,

Do you want to request a feature or report a bug?

Can this plugin work with timber and WordPress

What is the current behavior?

I would like to know if it is possible to create critical css files for:

• Common Twig Templates like (Index / Page / Front Page / Single / Archive / Blog / Woocommerce).
• If we can add in the page names that we want the critical CSS to appear on.

Here is what we currently have for Gulp

manifest.json

"loadCss.js": {
            "bower": [
                "loadcss"
            ]
        },

"config": {
        "devUrl": "http://test.co.uk/",
        "criticalCss": {
            "home": "http://test.co.uk/",
            "page-about-you": "http://test.co.uk/about-you/",
            "page-latest-news": "http://test.co.uk/latest-news/",
            "page-contact": "http://test.co.uk/contact-us/"
        }
    }

Gulpfile.js

var critical = require('critical');

gulp.task('build', function (callback) {
    runSequence('styles',
        'modernizr',
        'scripts',
        'svgsprite',
        'critical',
        ['fonts', 'images'],
        callback);
});

gulp.task('critical', function(){
    var c = [];
    for (var page in manifest.config.criticalCss) {
        c.push(critical.generate({
            src: manifest.config.criticalCss[page] + '?criticalcss=1',
            dest: './views/partials/critical/' + page + '.twig',
            extract: true,
            minify: false
        }));
    }

    return Promise.all(c).then(function(){
        gulp.src(path.views + 'partials/critical/*.twig')
            .pipe(concat('critical.twig'))
            .pipe(cleancss())
            .pipe(gulp.dest(path.views + 'partials'));
    });
});

views / partials / html-head.twig

{% if critical_request %}
    <link rel="stylesheet" type="text/css" href="{{ theme.uri }}/dist/css/main.min.css">
    {% else %}
    <link rel="preload" type="text/css" as="style" href="{{ theme.uri }}/dist/css/main.min.css" onload="this.rel='stylesheet'">
    <script>
        {% include "dist/js/loadCss.js" %}
    </script>
    {% endif %}

What is the expected behavior?

Describe the expected behavior

To create separate twig files that will have:

<style> This Critical CSS Code </style>

This will then be based from the twig name to match the page name,

Any help would be much appreciated.

Thank you !

[iGitScor]

Hi @JakeHenshall

Thank you for submitting this demand.
I'll keep you in touch when I have more information to give to you.

iGitScor

[iGitScor]

Linked to #18

[JakeHenshall]

@iGitScor This is awesome thank you, cant wait till this is a feature. 👍

[iGitScor]

Hi @JakeHenshall, I've started the #2 issue, then I'll work on your demand.
Normally, it'll be good running next week 😉

[JakeHenshall]

@iGitScor This is Fantastic :), I'm just trying to wrap my head around using it for a WordPress site, would you be able to add / dynamically add the pages to create the critical CSS? Also, are you going to have the critical CSS as a twig file that gets included??

Good luck can't wait to see this, its going to be awesome.

Jake.