# m2-boilerplate/module-critical-css

> Magento 2 module to automatically generate critical css with the addyosmani/critical npm package

`composer require m2-boilerplate/module-critical-css`

Canonical URL: https://packagento.com/m2-boilerplate/module-critical-css

## At a glance

- **Vendor**: m2-boilerplate (https://packagento.com/m2-boilerplate.md)
- **Latest version**: 1.0.20 — released 2024-03-15
- **Pricing**: Free
- **Package type**: Magento 2 module
- **Status**: active, accepting new buyers

## Installation

Packagento is licence-gated, so even free packages need a licence on a project before Composer can resolve them.

1. **Sign in or create an account** at https://packagento.com/customer/account/.

2. **Add the package to your account.** Open https://packagento.com/m2-boilerplate/module-critical-css and complete the free checkout. A licence is minted automatically.

3. **Create or pick a project, then activate the licence on it.**
   - Projects represent the Magento installs you deploy to. Manage them at https://packagento.com/projects/.
   - Activate the new licence on the project you'll deploy this package to. Activation is what generates the Composer credentials scoped to that project.

4. **Add the project credentials to your Magento codebase.**

   Grab the project's public + private key from https://packagento.com/projects/ (open the project, then its Credentials tab), and add them to `auth.json`:

   ```json
   {
     "http-basic": {
       "packagento.com": {
         "username": "ppk_live_...",
         "password": "psk_live_..."
       }
     }
   }
   ```

   Add the Packagento Composer repository to `composer.json`:

   ```json
   {
     "repositories": [
       { "type": "composer", "url": "https://packagento.com" }
     ]
   }
   ```

5. **Install and apply.**

   ```bash
   composer require m2-boilerplate/module-critical-css:*
   bin/magento setup:upgrade
   bin/magento setup:di:compile
   bin/magento cache:flush
   ```

## What it does

Magento 2 module to automatically generate critical css with the addyosmani/critical npm package

## README

Magento 2 module to automatically generate critical css with [critical](https://github.com/addyosmani/critical)

### Features:
* generate critical css with a simple command
* Fallback critical css for "empty" pages
* Add urls by creating a custom provider  

### Installation

Install the critical binary. Install instructions can be found on the [critical website](https://github.com/addyosmani/critical#install). Only versions >=2.0.3 are supported.

Add this extension to your Magento installation with Composer:

    composer require m2-boilerplate/module-critical-css

### Usage

#### Configuration

The critical css feature needs to be enabled (available in 2.3.4+): 

    bin/magento config:set dev/css/use_css_critical_path 1

Features can be customised in *Stores > Configuration > Developer > CSS*.

#### Generate critical css

Run the following command

    bin/magento m2bp:critical-css:generate
    
Afterwards you should find the the generated css in ``var/critical-css``. The css will now be integrated automatically on your website. 

### Add additional URLs via a custom provider

The following example adds the magento contact page via a custom provider:

```php
<?php

namespace Vendor\Module\Provider;

use Magento\Framework\App\Request\Http;
use Magento\Framework\App\RequestInterface;
use Magento\Framework\UrlInterface;
use Magento\Framework\View\LayoutInterface;
use Magento\Store\Api\Data\StoreInterface;
use M2Boilerplate\CriticalCss\Provider\ProviderInterface;
  
class CustomProvider implements ProviderInterface
{
    const NAME = 'custom_example';

    /**
     * @var UrlInterface
     */
    protected $url;

    public function __construct(UrlInterface $url)
    {
        $this->url = $url;
    }


    public function getUrls(StoreInterface $store): array
    {
        return [
            'contact_index_index' => $this->url->getUrl('contact'),
        ];
    }

    public function getName(): string
    {
        return self::NAME;
    }

    public function isAvailable(): bool
    {
        return true;
    }

    public function getPriority(): int
    {
        return 1200;
    }

    public function getCssIdentifierForRequest(RequestInterface $request, LayoutInterface $layout): ?string
    {
        if ($request->getModuleName() !== 'contact' || !$request instanceof Http) {
            return null;
        }
        
        if ($request->getFullActionName('_') === 'contact_index_index') {
            return 'contact_index_index';
        }

        return null;
    }
}
```

Add the new provider via DI: 

in your module´s etc/di.xml add the following: 

```xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="M2Boilerplate\CriticalCss\Provider\Container">
        <arguments>
            <argument name="providers" xsi:type="array">
                <item name="custom_example" xsi:type="object">Vendor\Module\Provider\CustomProvider</item>
            </argument>
        </arguments>
    </type>
</config>
```

### License
See the [LICENSE](LICENSE) file for license info (it's the MIT license).

## Recent Versions

| Version | Released |
|---|---|
| 1.0.20 | 2024-03-15 |
| 1.0.19 | 2023-08-09 |
| 1.0.18 | 2022-07-05 |
| 1.0.17 | 2022-02-10 |
| 1.0.16 | 2022-01-24 |
| 1.0.15 | 2021-10-22 |
| 1.0.14 | 2021-08-19 |
| 1.0.13 | 2021-07-26 |
| 1.0.12 | 2021-07-26 |
| 1.0.11 | 2021-07-12 |

Showing 10 of 21 versions. Full release history on https://packagento.com/m2-boilerplate/module-critical-css.

## Dependencies

### Require

| Package | Constraint |
|---|---|
| magento/framework | ^102.0\|^103.0 |
| php | >=7.1.0 |

## Quality

Latest release (1.0.20) fails the Packagento QA pipeline. Verdicts below are per-cell (Magento line × PHP version) for the matrixed tools, and run-once for the static / security tiers.


### Compatibility

Each Magento line is installed on its supported PHP versions, then the module is built (DI compile + static-content deploy). Cells show passed / failed / untested; staircase gaps render as `–`.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | Pass | Pass | – | – |
| 2.4.8 | – | 1 | 1 | – |
| 2.4.9 | – | – | 1 | 1 |


### Code Quality

Advisory checks against the module's source. Never affect the Compatibility verdict — a phpcs finding can't make a module incompatible.

#### Static Analysis

Coding standards (phpcs), mess detection (phpmd), copy-pasted code (cpd), PHP cross-version compatibility, composer.json validity. Each runs once for the whole module.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| PHPCS | Warning | 90 | 90 warnings (ruleset: Magento2) — 44 auto-fixable with phpcbf |
| PHPMD | Warning | 9 | 9 rule violations (UnusedFormalParameter:3, EmptyCatchBlock:2, CountInLoopExpression:2, IfStatementAssignment:1, MissingImport:1) |
| Cpd | Pass | 0 |  |
| Composer validate | Pass | 0 |  |

#### PHPStan

Type-checks the module against a real Magento install. Re-runs per Magento + PHP version because resolvable symbols differ between releases.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | 16 | 16 | – | – |
| 2.4.8 | – | 19 | 20 | – |
| 2.4.9 | – | – | 22 | 22 |


### Tests

Unit and integration suites run per Magento + PHP cell. Test failures speak to the module's behaviour, not its compatibility with a line, so they're reported here separately.

#### Unit Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |

#### Integration Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |


### Security

Dependency-advisory audit (composer audit) plus a source malware scan. A malware detection fails the version outright.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| Composer audit | Pass | 0 |  |
| Malware scan | Pass | 0 |  |

## Licence and pricing

Free. A licence is still minted on checkout and bound to your project for Composer access — no payment step.

Refundable within 14 days of first purchase via https://packagento.com/account/refunds/.

## Install via Claude Code or any MCP client

The Packagento MCP server can run the licence + project + Composer steps above in one tool call:

```
purchase_and_install_packages(
  composer_names=["m2-boilerplate/module-critical-css"],
  project_id="proj_xxx"
)
```

This handles cart, checkout, licence minting, project activation, and writes auth.json credentials. Connect a client with `claude mcp add packagento https://mcp.packagento.com`. Full setup at https://packagento.com/docs/mcp-setup.

## Vendor

m2-boilerplate is a Magento 2 vendor on Packagento. See https://packagento.com/m2-boilerplate.md for their full catalogue.