jandc/critical-css

Package wrapper and twig postprocessor class which uses the 'css from html extractor' library and twigwrapper to inject a document's head with critical css

0.6.1 2018-03-03 19:42 UTC

Requires

• doctrine/cache: >1.6
• jandc/css-from-html-extractor: ^1.1
• jandc/twig-wrapper: ^0.4
• masterminds/html5: >2.2

MIT

• Jan Decavele

README

PHP library for generating critical CSS.

Features

• PHP only, no Node.js required.
• Automatically generated for each page
• Manual control through {% fold %}{% endfold %} tags
• Dynamically resolves CSS used on each page

Site(s) using Critical CSS

• https://www.farmaline.be/apotheek/

Installation

composer require jandc/critical-css

Register the twig extension and create a wrapper instance with the critical CSS processor

 use TwigWrapper\TwigWrapper;
 use CriticalCssProcessor\CriticalCssProcessor;

 $twigEnvironment->addExtension(new CSSFromHTMLExtractor\Twig\Extension());
 $twigWrapper = new TwigWrapper($twigEnvironment, [new CriticalCssProcessor()]);

Mark the regions of your templates with the provided blocks

{% fold %}
    <div class="my-class">
    ...
    </div>
{% endfold %}

Render your pages, using the twigwrapper

 $twigWrapper->render('@templates/my/template.twig', ['foo'=>'bar']);

Available implementations

• Silex

If you have your own implementation, please send a pull request to add it to this list.