Howto

Toevoegen in .ddev/web-build/Dockerfile:

# Install requirements for running Critical CSS
RUN apt-get update && apt-get install -y \
    libx11-xcb1 \
    libxcomposite1 \
    libxcursor1 \
    libxdamage1 \
    libxi6 \
    libxtst6 \
    libnss3 \
    libxrandr2 \
    libasound2 \
    libpangocairo-1.0-0 \
    libatk1.0-0 \
    libcups2 \
    libdrm2 \
    libgbm1 \
    libgtk-3-0 \
    libxss1 \
    libxshmfence1 \
    fonts-liberation \
    libappindicator3-1 \
    xdg-utils \
    wget \
    --no-install-recommends && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*

• herstarten met ddev restart
• ga naar je theme folder waar package.json is
• ddev npm install critical --save-dev
• aanmaken in thema: scripts/generate-critical.js

// Script to generate critical css for your site.
import { generate } from 'critical';

generate({
    src: 'https://starterkit.ddev.site',
    target: {
        css: 'css/critical/default-critical.css',
    },
    width: 1300,
    height: 900,
    inline: false,
    extract: false,
});

• package.json aanpassen: op hoogte van name en version toevoegen:
  "type": "module",
  (moet terug weg wanneer je webpack wil runnen)
• package.json: toevoegen aan scripts:
  "criticalcss": "node scripts/generate-critical.js"
• Uitvoeren (in theme folder) met: ddev npm run criticalcss
• ddev composer require 'drupal/critical_css:^2.0'
• ddev drush en critical_css
• /admin/config/development/performance/critical-css
  - enable
  - Critical CSS base directory: /css/critical
• ddev drush cr, website bekijken in prive venster en css inspecteren. In de head zou nu <style id="critical-css"> moeten zitten