voku /
CssToInlineStyles
Complex classes like CssToInlineStyles often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes. You can also have a look at the cohesion graph to spot any un-connected, or weakly-connected components.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
While breaking up the class, it is a good idea to analyze how other classes use CssToInlineStyles, and based on these observations, apply Extract Interface, too.
| 1 | <?php |
||
| 14 | class CssToInlineStyles |
||
| 15 | { |
||
| 16 | /** |
||
| 17 | * regular expression: css media queries |
||
| 18 | * |
||
| 19 | * @var string |
||
| 20 | */ |
||
| 21 | private static $cssMediaQueriesRegEx = '#(?:____SIMPLE_HTML_DOM__VOKU__AT____|@)media\\s+(?:only\\s)?(?:[\\s{\\(]|screen|all)\\s?[^{]+{.*}\\s*}\\s*#misuU'; |
||
| 22 | |||
| 23 | /** |
||
| 24 | * regular expression: css charset |
||
| 25 | * |
||
| 26 | * @var string |
||
| 27 | */ |
||
| 28 | private static $cssCharsetRegEx = '/@charset [\'"][^\'"]+[\'"];/i'; |
||
| 29 | |||
| 30 | /** |
||
| 31 | * regular expression: conditional inline style tags |
||
| 32 | * |
||
| 33 | * @var string |
||
| 34 | */ |
||
| 35 | private static $excludeConditionalInlineStylesBlockRegEx = '/<!--\[if.*<style.*-->/isU'; |
||
| 36 | |||
| 37 | /** |
||
| 38 | * regular expression: inline style tags |
||
| 39 | * |
||
| 40 | * @var string |
||
| 41 | */ |
||
| 42 | private static $styleTagRegEx = '|<style(?:\s.*)?>(.*)</style>|isuU'; |
||
| 43 | |||
| 44 | /** |
||
| 45 | * regular expression: html-comments without conditional comments |
||
| 46 | * |
||
| 47 | * @var string |
||
| 48 | */ |
||
| 49 | private static $htmlCommentWithoutConditionalCommentRegEx = '|<!--(?!\[if).*-->|isU'; |
||
| 50 | |||
| 51 | /** |
||
| 52 | * regular expression: style-tag with 'cleanup'-css-class |
||
| 53 | * |
||
| 54 | * @var string |
||
| 55 | */ |
||
| 56 | private static $styleTagWithCleanupClassRegEx = '|<style[^>]+class="cleanup"[^>]*>.*</style>|isU'; |
||
| 57 | |||
| 58 | /** |
||
| 59 | * regular expression: css-comments |
||
| 60 | * |
||
| 61 | * @var string |
||
| 62 | */ |
||
| 63 | private static $styleCommentRegEx = '/\\/\\*.*\\*\\//sU'; |
||
| 64 | |||
| 65 | /** |
||
| 66 | * @var CssSelectorConverter |
||
| 67 | */ |
||
| 68 | private $cssConverter; |
||
| 69 | |||
| 70 | /** |
||
| 71 | * The CSS to use. |
||
| 72 | * |
||
| 73 | * @var string |
||
| 74 | */ |
||
| 75 | private $css; |
||
| 76 | |||
| 77 | /** |
||
| 78 | * The CSS-Media-Queries to use. |
||
| 79 | * |
||
| 80 | * @var string |
||
| 81 | */ |
||
| 82 | private $css_media_queries; |
||
| 83 | |||
| 84 | /** |
||
| 85 | * Should the generated HTML be cleaned. |
||
| 86 | * |
||
| 87 | * @var bool |
||
| 88 | */ |
||
| 89 | private $cleanup = false; |
||
| 90 | |||
| 91 | /** |
||
| 92 | * The encoding to use. |
||
| 93 | * |
||
| 94 | * @var string |
||
| 95 | */ |
||
| 96 | private $encoding = 'UTF-8'; |
||
| 97 | |||
| 98 | /** |
||
| 99 | * The HTML to process. |
||
| 100 | * |
||
| 101 | * @var string |
||
| 102 | */ |
||
| 103 | private $html; |
||
| 104 | |||
| 105 | /** |
||
| 106 | * Use inline-styles block as CSS. |
||
| 107 | * |
||
| 108 | * @var bool |
||
| 109 | */ |
||
| 110 | private $useInlineStylesBlock = false; |
||
| 111 | |||
| 112 | /** |
||
| 113 | * Use link block reference as CSS. |
||
| 114 | * |
||
| 115 | * @var bool |
||
| 116 | */ |
||
| 117 | private $loadCSSFromHTML = false; |
||
| 118 | |||
| 119 | /** |
||
| 120 | * Strip original style tags. |
||
| 121 | * |
||
| 122 | * @var bool |
||
| 123 | */ |
||
| 124 | private $stripOriginalStyleTags = false; |
||
| 125 | |||
| 126 | /** |
||
| 127 | * Exclude conditional inline-style blocks. |
||
| 128 | * |
||
| 129 | * @var bool |
||
| 130 | */ |
||
| 131 | private $excludeConditionalInlineStylesBlock = true; |
||
| 132 | |||
| 133 | /** |
||
| 134 | * Exclude media queries from "$this->css" and keep media queries for inline-styles blocks. |
||
| 135 | * |
||
| 136 | * @var bool |
||
| 137 | */ |
||
| 138 | private $excludeMediaQueries = true; |
||
| 139 | |||
| 140 | /** |
||
| 141 | * Exclude media queries from "$this->css" and keep media queries for inline-styles blocks. |
||
| 142 | * |
||
| 143 | * @var bool |
||
| 144 | */ |
||
| 145 | private $excludeCssCharset = true; |
||
| 146 | |||
| 147 | /** |
||
| 148 | * Creates an instance, you could set the HTML and CSS here, or load it later. |
||
| 149 | * |
||
| 150 | * @param string|null $html the HTML to process |
||
| 151 | * @param string|null $css the CSS to use |
||
| 152 | */ |
||
| 153 | 58 | public function __construct(string $html = null, string $css = null) |
|
| 167 | |||
| 168 | /** |
||
| 169 | * Converts the loaded HTML into an HTML-string with inline styles based on the loaded CSS. |
||
| 170 | * |
||
| 171 | * @param bool $outputXHTML [optional] <p>Should we output valid XHTML?</p> |
||
| 172 | * @param int|null $libXMLExtraOptions [optional] <p>$libXMLExtraOptions Since PHP 5.4.0 and Libxml 2.6.0, |
||
| 173 | * you may also use the options parameter to specify additional |
||
| 174 | * Libxml parameters. |
||
| 175 | * </p> |
||
| 176 | * @param string|null $path [optional] <p>Set the path to your external css-files.</p> |
||
| 177 | * |
||
| 178 | * @throws Exception |
||
| 179 | * |
||
| 180 | * @return string |
||
| 181 | */ |
||
| 182 | 56 | public function convert(bool $outputXHTML = false, int $libXMLExtraOptions = null, $path = null): string |
|
| 253 | |||
| 254 | /** |
||
| 255 | * get css from inline-html style-block |
||
| 256 | * |
||
| 257 | * @param string $html |
||
| 258 | * |
||
| 259 | * @return string |
||
| 260 | */ |
||
| 261 | 33 | public function getCssFromInlineHtmlStyleBlock($html): string |
|
| 282 | |||
| 283 | /** |
||
| 284 | * Set CSS to use. |
||
| 285 | * |
||
| 286 | * @param string $css <p>The CSS to use.</p> |
||
| 287 | * |
||
| 288 | * @return $this |
||
| 289 | */ |
||
| 290 | 51 | public function setCSS(string $css): self |
|
| 298 | |||
| 299 | /** |
||
| 300 | * Should the IDs and classes be removed? |
||
| 301 | * |
||
| 302 | * @param bool $on Should we enable cleanup? |
||
| 303 | * |
||
| 304 | * @return $this |
||
| 305 | */ |
||
| 306 | 3 | public function setCleanup(bool $on = true): self |
|
| 312 | |||
| 313 | /** |
||
| 314 | * Set the encoding to use with the DOMDocument. |
||
| 315 | * |
||
| 316 | * @param string $encoding the encoding to use |
||
| 317 | * |
||
| 318 | * @return $this |
||
| 319 | * |
||
| 320 | * @deprecated Doesn't have any effect |
||
| 321 | */ |
||
| 322 | 2 | public function setEncoding(string $encoding): self |
|
| 328 | |||
| 329 | /** |
||
| 330 | * Set exclude conditional inline-style blocks. |
||
| 331 | * |
||
| 332 | * e.g.: <!--[if gte mso 9]><style>.foo { bar } </style><![endif]--> |
||
| 333 | * |
||
| 334 | * @param bool $on |
||
| 335 | * |
||
| 336 | * @return $this |
||
| 337 | */ |
||
| 338 | 6 | public function setExcludeConditionalInlineStylesBlock(bool $on = true): self |
|
| 344 | |||
| 345 | /** |
||
| 346 | * Set exclude charset. |
||
| 347 | * |
||
| 348 | * @param bool $on |
||
| 349 | * |
||
| 350 | * @return $this |
||
| 351 | */ |
||
| 352 | 1 | public function setExcludeCssCharset(bool $on = true): self |
|
| 358 | |||
| 359 | /** |
||
| 360 | * Set exclude media queries. |
||
| 361 | * |
||
| 362 | * Info: If this is enabled the media queries will be removed before inlining the rules. |
||
| 363 | * |
||
| 364 | * WARNING: If you use inline styles block "<style>" this option will keep the media queries. |
||
| 365 | * |
||
| 366 | * @param bool $on |
||
| 367 | * |
||
| 368 | * @return $this |
||
| 369 | */ |
||
| 370 | 16 | public function setExcludeMediaQueries(bool $on = true): self |
|
| 376 | |||
| 377 | /** |
||
| 378 | * Set HTML to process. |
||
| 379 | * |
||
| 380 | * @param string $html <p>The HTML to process.</p> |
||
| 381 | * |
||
| 382 | * @return $this |
||
| 383 | */ |
||
| 384 | 56 | public function setHTML(string $html): self |
|
| 391 | |||
| 392 | /** |
||
| 393 | * Set use of inline link block. |
||
| 394 | * |
||
| 395 | * Info: If this is enabled the class will use the links reference in the HTML. |
||
| 396 | * |
||
| 397 | * @param bool $on [optional] Should we process link styles? |
||
| 398 | * |
||
| 399 | * @return $this |
||
| 400 | */ |
||
| 401 | 2 | public function setLoadCSSFromHTML(bool $on = true): self |
|
| 407 | |||
| 408 | /** |
||
| 409 | * Set strip original style tags. |
||
| 410 | * |
||
| 411 | * Info: If this is enabled the class will remove all style tags in the HTML. |
||
| 412 | * |
||
| 413 | * @param bool $on Should we process inline styles? |
||
| 414 | * |
||
| 415 | * @return $this |
||
| 416 | */ |
||
| 417 | 18 | public function setStripOriginalStyleTags(bool $on = true): self |
|
| 423 | |||
| 424 | /** |
||
| 425 | * Set use of inline styles block. |
||
| 426 | * |
||
| 427 | * Info: If this is enabled the class will use the style-block in the HTML. |
||
| 428 | * |
||
| 429 | * @param bool $on Should we process inline styles? |
||
| 430 | * |
||
| 431 | * @return $this |
||
| 432 | */ |
||
| 433 | 31 | public function setUseInlineStylesBlock(bool $on = true): self |
|
| 439 | |||
| 440 | /** |
||
| 441 | * Remove id and class attributes. |
||
| 442 | * |
||
| 443 | * @param \DOMXPath $xPath the DOMXPath for the entire document |
||
| 444 | * |
||
| 445 | * @return void |
||
| 446 | */ |
||
| 447 | 3 | private function cleanupHTML(\DOMXPath $xPath) |
|
| 448 | { |
||
| 449 | /** @var \DOMAttr[]|\DOMNodeList<\DOMAttr>|false $nodes */ |
||
|
|
|||
| 450 | 3 | $nodes = $xPath->query('//@class | //@id'); |
|
| 451 | 3 | if ($nodes !== false) { |
|
| 452 | 3 | foreach ($nodes as $node) { |
|
| 453 | 3 | $node->ownerElement->removeAttributeNode($node); |
|
| 454 | } |
||
| 455 | } |
||
| 456 | 3 | } |
|
| 457 | |||
| 458 | /** |
||
| 459 | * @param \DOMElement $element |
||
| 460 | * @param array $ruleProperties |
||
| 461 | * |
||
| 462 | * @return string |
||
| 463 | */ |
||
| 464 | 40 | private function createPropertyChunks(\DOMElement $element, array $ruleProperties): string |
|
| 465 | { |
||
| 466 | // init var |
||
| 467 | 40 | $properties = []; |
|
| 468 | |||
| 469 | // get current styles |
||
| 470 | /** @var \DOMAttr|null $stylesAttribute */ |
||
| 471 | 40 | $stylesAttribute = $element->attributes->getNamedItem('style'); |
|
| 472 | |||
| 473 | // any styles defined before? |
||
| 474 | 40 | if ($stylesAttribute !== null) { |
|
| 475 | // get value for the styles attribute |
||
| 476 | /** @noinspection PhpUndefinedFieldInspection */ |
||
| 477 | 40 | $definedStyles = (string) $stylesAttribute->value; |
|
| 478 | |||
| 479 | // split into properties |
||
| 480 | 40 | $definedProperties = $this->splitIntoProperties($definedStyles); |
|
| 481 | |||
| 482 | 40 | $properties = $this->splitStyleIntoChunks($definedProperties); |
|
| 483 | } |
||
| 484 | |||
| 485 | // add new properties into the list |
||
| 486 | 40 | foreach ($ruleProperties as $key => $value) { |
|
| 487 | // If one of the rules is already set and is !important, don't apply it, |
||
| 488 | // except if the new rule is also important. |
||
| 489 | if ( |
||
| 490 | 40 | !isset($properties[$key]) |
|
| 491 | || |
||
| 492 | 12 | \stripos($properties[$key], '!important') === false |
|
| 493 | || |
||
| 494 | 40 | \stripos(\implode('', (array) $value), '!important') !== false |
|
| 495 | ) { |
||
| 496 | 40 | unset($properties[$key]); |
|
| 497 | 40 | $properties[$key] = $value; |
|
| 498 | } |
||
| 499 | } |
||
| 500 | |||
| 501 | // build string |
||
| 502 | 40 | $propertyChunks = []; |
|
| 503 | |||
| 504 | // build chunks |
||
| 505 | 40 | foreach ($properties as $key => $values) { |
|
| 506 | 40 | foreach ((array) $values as $value) { |
|
| 507 | 40 | $propertyChunks[] = $key . ': ' . $value . ';'; |
|
| 508 | } |
||
| 509 | } |
||
| 510 | |||
| 511 | 40 | return \implode(' ', $propertyChunks); |
|
| 512 | } |
||
| 513 | |||
| 514 | /** |
||
| 515 | * create XPath |
||
| 516 | * |
||
| 517 | * @param \DOMDocument $document |
||
| 518 | * @param array $cssRules |
||
| 519 | * |
||
| 520 | * @return \DOMXPath |
||
| 521 | */ |
||
| 522 | 55 | private function createXPath(\DOMDocument $document, array $cssRules): \DOMXPath |
|
| 523 | { |
||
| 524 | /** @var \DOMElement[]|\SplObjectStorage $propertyStorage */ |
||
| 525 | 55 | $propertyStorage = new \SplObjectStorage(); |
|
| 526 | 55 | $xPath = new \DOMXPath($document); |
|
| 527 | |||
| 528 | // any rules? |
||
| 529 | 55 | if (\count($cssRules) !== 0) { |
|
| 530 | // loop rules |
||
| 531 | 42 | foreach ($cssRules as $rule) { |
|
| 532 | 42 | $ruleSelector = $rule['selector']; |
|
| 533 | 42 | $ruleProperties = $rule['properties']; |
|
| 534 | |||
| 535 | 42 | if (!$ruleSelector || !$ruleProperties) { |
|
| 536 | 4 | continue; |
|
| 537 | } |
||
| 538 | |||
| 539 | try { |
||
| 540 | 41 | $query = $this->cssConverter->toXPath($ruleSelector); |
|
| 541 | 5 | } catch (ExceptionInterface $e) { |
|
| 542 | 5 | $query = null; |
|
| 543 | } |
||
| 544 | |||
| 545 | // validate query |
||
| 546 | 41 | if ($query === null) { |
|
| 547 | 5 | continue; |
|
| 548 | } |
||
| 549 | |||
| 550 | // search elements |
||
| 551 | /** @var \DOMElement[]|\DOMNodeList<\DOMElement>|false $elements */ |
||
| 552 | 40 | $elements = $xPath->query($query); |
|
| 553 | |||
| 554 | // validate elements |
||
| 555 | 40 | if ($elements === false) { |
|
| 556 | continue; |
||
| 557 | } |
||
| 558 | |||
| 559 | // loop found elements |
||
| 560 | 40 | foreach ($elements as $element) { |
|
| 561 | if ( |
||
| 562 | 40 | $ruleSelector === '*' |
|
| 563 | && |
||
| 564 | ( |
||
| 565 | 2 | $element->tagName === 'html' |
|
| 566 | 2 | || $element->tagName === 'title' |
|
| 567 | 2 | || $element->tagName === 'meta' |
|
| 568 | 2 | || $element->tagName === 'head' |
|
| 569 | 2 | || $element->tagName === 'style' |
|
| 570 | 2 | || $element->tagName === 'script' |
|
| 571 | 40 | || $element->tagName === 'link' |
|
| 572 | ) |
||
| 573 | ) { |
||
| 574 | 2 | continue; |
|
| 575 | } |
||
| 576 | |||
| 577 | // no styles stored? |
||
| 578 | 40 | if (!isset($propertyStorage[$element])) { |
|
| 579 | |||
| 580 | // init var |
||
| 581 | /** @var \DOMAttr|null $originalStyle */ |
||
| 582 | 40 | $originalStyle = $element->attributes->getNamedItem('style'); |
|
| 583 | |||
| 584 | 40 | if ($originalStyle !== null) { |
|
| 585 | 12 | $originalStyle = (string) $originalStyle->value; |
|
| 586 | } else { |
||
| 587 | 38 | $originalStyle = ''; |
|
| 588 | } |
||
| 589 | |||
| 590 | // store original styles |
||
| 591 | 40 | $propertyStorage->attach($element, $originalStyle); |
|
| 592 | |||
| 593 | // clear the styles |
||
| 594 | 40 | $element->setAttribute('style', ''); |
|
| 595 | } |
||
| 596 | |||
| 597 | // set attribute |
||
| 598 | 40 | $propertiesString = $this->createPropertyChunks($element, $ruleProperties); |
|
| 599 | 40 | if ($propertiesString) { |
|
| 600 | 40 | $element->setAttribute('style', $propertiesString); |
|
| 601 | } |
||
| 602 | } |
||
| 603 | } |
||
| 604 | |||
| 605 | 42 | foreach ($propertyStorage as $element) { |
|
| 606 | 40 | $originalStyle = $propertyStorage->getInfo(); |
|
| 607 | 40 | if ($originalStyle) { |
|
| 608 | 12 | $originalStyles = $this->splitIntoProperties($originalStyle); |
|
| 609 | 12 | $originalProperties = $this->splitStyleIntoChunks($originalStyles); |
|
| 610 | |||
| 611 | // set attribute |
||
| 612 | 12 | $propertiesString = $this->createPropertyChunks($element, $originalProperties); |
|
| 613 | 12 | if ($propertiesString) { |
|
| 614 | 40 | $element->setAttribute('style', $propertiesString); |
|
| 615 | } |
||
| 616 | } |
||
| 617 | } |
||
| 618 | } |
||
| 619 | |||
| 620 | 55 | return $xPath; |
|
| 621 | } |
||
| 622 | |||
| 623 | /** |
||
| 624 | * @param string $css |
||
| 625 | * |
||
| 626 | * @return string |
||
| 627 | */ |
||
| 628 | 55 | private function doCleanup($css): string |
|
| 655 | |||
| 656 | /** |
||
| 657 | * get css media queries from the string |
||
| 658 | * |
||
| 659 | * @param string $css |
||
| 660 | * |
||
| 661 | * @return string |
||
| 662 | */ |
||
| 663 | 51 | private function getMediaQueries($css): string |
|
| 672 | |||
| 673 | /** |
||
| 674 | * Process the loaded CSS |
||
| 675 | * |
||
| 676 | * @param string $css |
||
| 677 | * |
||
| 678 | * @return array |
||
| 679 | */ |
||
| 680 | 55 | private function processCSS($css): array |
|
| 750 | |||
| 751 | /** |
||
| 752 | * Process the CSS-properties |
||
| 753 | * |
||
| 754 | * @param string $propertyString the CSS-properties |
||
| 755 | * |
||
| 756 | * @return array |
||
| 757 | */ |
||
| 758 | 42 | private function processCSSProperties($propertyString): array |
|
| 796 | |||
| 797 | /** |
||
| 798 | * Sort an array on the specificity element in an ascending way. |
||
| 799 | * |
||
| 800 | * INFO: Lower specificity will be sorted to the beginning of the array. |
||
| 801 | * |
||
| 802 | * @param array $e1 the first element |
||
| 803 | * @param array $e2 the second element |
||
| 804 | * |
||
| 805 | * @return int |
||
| 806 | * |
||
| 807 | * @psalm-param array<specificity: Specificity, order: int> $e1 |
||
| 808 | * @psalm-param array<specificity: Specificity, order: int> $e2 |
||
| 809 | */ |
||
| 810 | 24 | private static function sortOnSpecificity(array $e1, array $e2): int |
|
| 822 | |||
| 823 | /** |
||
| 824 | * Split a style string into an array of properties. |
||
| 825 | * The returned array can contain empty strings. |
||
| 826 | * |
||
| 827 | * @param string $styles ex: 'color:blue;font-size:12px;' |
||
| 828 | * |
||
| 829 | * @return array an array of strings containing css property ex: array('color:blue','font-size:12px') |
||
| 830 | */ |
||
| 831 | 42 | private function splitIntoProperties($styles): array |
|
| 853 | |||
| 854 | /** |
||
| 855 | * @param array $definedProperties |
||
| 856 | * |
||
| 857 | * @return array |
||
| 858 | */ |
||
| 859 | 40 | private function splitStyleIntoChunks(array $definedProperties): array |
|
| 889 | |||
| 890 | /** |
||
| 891 | * Strip style tags into the generated HTML. |
||
| 892 | * |
||
| 893 | * @param \DOMXPath $xPath the DOMXPath for the entire document |
||
| 894 | * |
||
| 895 | * @return void |
||
| 896 | */ |
||
| 897 | 14 | private function stripOriginalStyleTags(\DOMXPath $xPath) |
|
| 923 | |||
| 924 | /** |
||
| 925 | * remove charset from the string |
||
| 926 | * |
||
| 927 | * @param string $css |
||
| 928 | * |
||
| 929 | * @return string |
||
| 930 | */ |
||
| 931 | 55 | private function stripeCharsetInCss($css): string |
|
| 935 | |||
| 936 | /** |
||
| 937 | * remove css media queries from the string |
||
| 938 | * |
||
| 939 | * @param string $css |
||
| 940 | * |
||
| 941 | * @return string |
||
| 942 | */ |
||
| 943 | 53 | private function stripeMediaQueries($css): string |
|
| 950 | } |
||
| 951 |
Loading history...
This check marks PHPDoc comments that could not be parsed by our parser. To see which comment annotations we can parse, please refer to our documentation on supported doc-types.