Cannot load criticalcss if router file is used instead of a the specific template path in the CMS

[nystudio107]

Cannot load criticalcss if router file is used instead of a the specific template path in the CMS

[terryupton]

Thank you to @khalwat who offered some guidance on Discord. I am leaving this here for my own future reference but for anyone else who might be looking to achieve the same outcome using router templates.

What I wasn't aware of was that you can pass in a template name to the includeCriticalCssTags.
So then I could setup a variable inside includeCriticalCssTags like so {{ includeCriticalCssTags(criticalCSSTemplate) }} and then within each individual template set up this {% set criticalCSSTemplate = _self %} and this works for all templates and gets the right template and matches the criticalCSS file up nicely.

I had one further issue with this however, and it was that my service section has two entry types and the user can also specify the colour of the entry (as it service areas is colour co-ordinated). This left a challenge, as I couldn't simple use one template per entry type for the criticalCSS generation, instead I would need to create a colour variant for each of the templates and then load the right criticalCSS file.

Here is what my criticalCSS generation looks like:

  urls: [
    {url: '', template: 'pages/home'},
    {url: '/about', template: 'pages/about'},
    {url: '/team', template: 'pages/team'},
    {url: '/team/kevin-windo', template: 'pages/team'},
    {url: '/faqs', template: 'pages/faqs'},
    {url: '/testimonials', template: 'pages/testimonials-index'},
    {url: '/blog', template: 'pages/blog/blog-index'},
    {url: '/blog/2020/12/timeshares-what-you-need-to-know/', template: 'pages/blog/blog'},
    {url: '/services/timeshare-claims/', template: 'pages/services/overview-purple'},
    {url: '/services/timeshare-claims/timeshare-termination/', template: 'pages/services/service-purple'},
    {url: '/services/solar-panel-claims/', template: 'pages/services/overview-green'},
    {url: '/services/solar-panel-claims/mis-sold-solar-panels/', template: 'pages/services/service-green'},
    {url: '/services/reclaiming-multiple-dwellings-relief/', template: 'pages/services/service-orange'},
    {url: '/services/mis-sold-sipps-and-investments/', template: 'pages/services/overview-lime'},
    {url: '/services/mis-sold-sipps-and-investments/mis-sold-sipps/', template: 'pages/services/service-lime'},
    {url: '/contact', template: 'pages/contact'},
    {url: '/terms', template: 'pages/terms/index'},
    {url: '/terms/privacy', template: 'pages/terms/terms'},
    {url: '/terms/legals', template: 'pages/terms/legals'}
  ],

As you can see I am generating colour variants for each service/overview and service/service templates.
Once the criticalCSS files were generated I had the problem of getting the right template to load. Unfortunately, the way includeCriticalCssTags works is it needs a corresponding twig template of the same name to work. Partly, down to the way it auto-generates and creates the paths (see https://nystudio107.com/docs/twigpack/#using-twigpack)

So instead of using includeCriticalCssTags I swapped it out for craft.twigpack.includeInlineCssTags() as this would allow me to pass in the template for the right criticalCSS file without a match on the twig template name.

What I ended up with was as follows:

In my criticalCSS file that is in the head:

{# -- Critical CSS -- #}
{% set cssPath = '/css/style.css' %}
{% set cssHash = craft.twigpack.getModuleHash(cssPath, "legacy") %}

<!-- criticalCSS -->
<!--# if expr="$HTTP_COOKIE=/critical\-css\={{ cssHash }}/" -->
{{ craft.twigpack.includeCssModule(cssPath, false) }}
<!--# else -->
<script>
  Cookie.set("critical-css", "{{ cssHash }}", {expires: "7D", secure: true});
</script>

{# {{ craft.twigpack.includeCriticalCssTags() }} #}
 {{ craft.twigpack.includeInlineCssTags("@webroot/assets/criticalcss/" ~ crticalCSSTemplate|default() ~ '_critical.min.css') }}
 {{ craft.twigpack.includeCssModule(cssPath, true) }}
<!--# endif -->

Then inside the service/overview and service/service templates:

{# ------- CriticalCSS --------- #}
{# Because we have different template colours - we need to create individual criticalCSS files for each template in each colour. We do this and then we pass in the template name appended by -colour which is the class as obtained from the entry. #}
{% set crticalCSSTemplate = _self ~ '-' ~ entry.pageColour.label|default('pink') %}
{# ------- END CriticalCSS --------- #}

And inside all other templates:

{% set crticalCSSTemplate = _self %}

This seems to achieve the correct results well.
Thanks @khalwat for some input on Discord yesterday.