html.twig {% for %} problem

[oguzhanagyar]

I'm trying to add critical css to my project, but when I run grunt the '{% for%}' tags fail.

here is html.twig file

<!-- Metas -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="author" content="">
<meta name="description" content="{{ meta.desc }}">
<meta name="robots" content="{{ not meta.sitemap is defined or meta.sitemap == 1 ? 'index, follow' : 'noindex, nofollow' }}">
<link rel="shortcut icon" href="{{ favicon is empty ? '' : JAMBI_UPLOADS ~ favicon }}" type="image/x-icon">
{% for key,value in meta.hreflang %}
    <link rel="alternate" hreflang="{{ key }}" href="{{ value }}" />
{% endfor %}

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="{{ styleFile }}"/>

<!-- Javascripts -->
<script type="text/javascript" src="{{ scriptFile }}"></script>

<title>{{ meta.title }}</title>

here is gruntfile.js

critical: {
        'test': {
            options: {
                minify: true,
                extract: true,
                base: './',
                css: [
                    'dist/css/style.min.css',
                ],
                width: 1300,
                height: 900
            },
            src: '../view/layouts/fileName.html.twig',
            dest: '../view/layouts/fileName2.html.twig'
        },
    },

It works fine when I remove the for tags.

Does anyone know the solution to the problem?

[bezoerb]

@oguzhanagyar: Twig files or files in any other templating language aren't supported by critical. You'll need to compile your layouts to html before passing them down to critical and then you should do the inlining yourself.

What i would do is:

• compile templates to html
• generate critical css for template without inlining
• store critical.css per route/page
• in twig check if the file exists and do the inlining.

I've done this 3 years ago like this with symfony php and it worked quite well: See https://github.com/bezoerb/generator-sf/blob/master/generators/view/plain/templates/index.html.twig

However, you shouldn't use the loadcss approach. See https://www.filamentgroup.com/lab/load-css-simpler/ A simple <link rel="stylesheet" href="/path/to/default.css" media="print" onload="this.media='all'"> should do the async loading of the page css