# 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 <span style="text-decoration: underline;">name</span> en <span style="text-decoration: underline;">version</span> toevoegen:  
    `"type": "module",`  
    (moet terug weg wanneer je webpack wil runnen)
- **package.json**: toevoegen aan <span style="text-decoration: underline;">scripts</span>:  
    `"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