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

README

PHP library for generating critical CSS.

critical css banner

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

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

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