|
1 |
| -# page-specific-css |
2 |
| -Page-specific-css is a library with extracts css selectors from html snippets and matches them with css rules to extract the used rules. |
| 1 | +# CSS from HTML extractor |
3 | 2 |
|
4 |
| -This effectively enables you to create critical css. |
| 3 | +Php library which determines which css is used from html snippets. |
| 4 | +It is used in jandc/critical-css to automatically and dynamically determine critical css on a per page basis. |
5 | 5 |
|
6 |
| -The bulk of it's code is based on, and expanded from, Thijs Verkoyen's inline css library. |
7 | 6 |
|
| 7 | +### Installation |
| 8 | +`` |
| 9 | +composer require jandc/css-from-html-extractor |
| 10 | +`` |
8 | 11 | ### Usage
|
9 |
| -This library is used as a twig post processing module in JanDC/critical-css-processor. But you could of course make your own implementation. |
10 | 12 |
|
11 |
| -To get a complete instruction in how to use this library (in conjunction with a twig wrapper) please refer to https://github.com/JanDC/page-specific-css-silex for the reference implementation or the critical css processor for a more generic implementation. |
| 13 | +#### With Twig |
| 14 | +###### Register Extension |
| 15 | +``` |
| 16 | +use CSSFromHTMLExtractor\Twig\Extension as ExtractorExtension; |
| 17 | +
|
| 18 | +$extension = new ExtractorExtension() |
| 19 | +$extension->addBaseRules('path/to/css'); |
| 20 | +
|
| 21 | +/** @var Twig_Environment $twig */ |
| 22 | +$twig->addExtension($extension); |
| 23 | +``` |
| 24 | +###### Mark the regions of your templates with the provided blocks |
| 25 | +``` |
| 26 | +{% fold %} |
| 27 | +<div class="my-class"> |
| 28 | +... |
| 29 | +</div> |
| 30 | +{% endfold %} |
| 31 | +``` |
| 32 | + |
| 33 | +###### Retrieve the resulting css from the extension |
| 34 | + |
| 35 | +``` |
| 36 | +$extension = $twigEnvironment->getExtension(ExtractorExtension::class); |
| 37 | +$extension->buildCriticalCssFromSnippets(); |
| 38 | +``` |
| 39 | + |
| 40 | + |
| 41 | +#### Handling raw HTML |
| 42 | +``` |
| 43 | +$cssFromHTMLExtractor = new CssFromHTMLExtractor(); |
| 44 | +$cssFromHTMLExtractor->addBaseRules('path/to/css'); |
| 45 | +$cssFromHTMLExtractor->addHtmlToStore($rawHtml); |
| 46 | +$extractedCss = $cssFromHTMLExtractor->buildExtractedRuleSet(); |
| 47 | +``` |
0 commit comments