CSS.php
296 lines
| 1 | <?php // phpcs:ignore SlevomatCodingStandard.TypeHints.DeclareStrictTypes.DeclareStrictTypesMissing |
| 2 | |
| 3 | namespace MailPoetVendor; |
| 4 | |
| 5 | if (!defined('ABSPATH')) exit; |
| 6 | |
| 7 | |
| 8 | use MailPoet\Newsletter\Renderer\EscapeHelper as EHelper; |
| 9 | use MailPoet\Util\pQuery\DomNode; |
| 10 | use MailPoet\Util\pQuery\pQuery; |
| 11 | |
| 12 | /* |
| 13 | Copyright 2013-2014, François-Marie de Jouvencel |
| 14 | |
| 15 | This program is free software: you can redistribute it and/or modify |
| 16 | it under the terms of the GNU General Public License as published by |
| 17 | the Free Software Foundation, either version 3 of the License, or |
| 18 | (at your option) any later version. |
| 19 | |
| 20 | This program is distributed in the hope that it will be useful, |
| 21 | but WITHOUT ANY WARRANTY; without even the implied warranty of |
| 22 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| 23 | GNU General Public License for more details. |
| 24 | |
| 25 | You should have received a copy of the GNU General Public License |
| 26 | along with this program. If not, see <http://www.gnu.org/licenses/>. |
| 27 | */ |
| 28 | |
| 29 | /* |
| 30 | * A class to inline CSS. |
| 31 | * |
| 32 | * It honours !important attributes and doesn't choke on complex styles. |
| 33 | * |
| 34 | * |
| 35 | */ |
| 36 | |
| 37 | class CSS { |
| 38 | /** |
| 39 | * @param string $contents |
| 40 | * @return DomNode |
| 41 | */ |
| 42 | function inlineCSS($contents) { |
| 43 | $html = pQuery::parseStr($contents); |
| 44 | |
| 45 | if (!$html instanceof DomNode) { |
| 46 | throw new \InvalidArgumentException('Error parsing contents.'); |
| 47 | } |
| 48 | |
| 49 | $css_blocks = ''; |
| 50 | |
| 51 | // Find all <style> blocks and cut styles from them (leaving media queries) |
| 52 | foreach ($html->query('style') as $style) { |
| 53 | list($_css_to_parse, $_css_to_keep) = $this->splitMediaQueries($style->getInnerText()); |
| 54 | $css_blocks .= $_css_to_parse; |
| 55 | if (!empty($_css_to_keep)) { |
| 56 | $style->setInnerText($_css_to_keep); |
| 57 | } else { |
| 58 | $style->setOuterText(''); |
| 59 | } |
| 60 | } |
| 61 | |
| 62 | $raw_css = ''; |
| 63 | if (!empty($css_blocks)) { |
| 64 | $raw_css .= $css_blocks; |
| 65 | } |
| 66 | |
| 67 | // Get the CSS rules by decreasing specificity (the most specific rule first). |
| 68 | // This is an array with, amongst other things, the keys 'properties', which hold the CSS properties |
| 69 | // and the 'selector', which holds the CSS selector |
| 70 | $rules = $this->parseCSS($raw_css); |
| 71 | $nodes_map = []; |
| 72 | |
| 73 | // We loop over each rule by increasing order of specificity, find the nodes matching the selector |
| 74 | // and apply the CSS properties |
| 75 | foreach ($rules as $rule) { |
| 76 | if (!isset($nodes_map[$rule['selector']])) { |
| 77 | $nodes_map[$rule['selector']] = $html->query($rule['selector']); |
| 78 | } |
| 79 | foreach ($nodes_map[$rule['selector']] as $node) { |
| 80 | // I'm leaving this for debug purposes, it has proved useful. |
| 81 | /* |
| 82 | if ($node->already_styled === 'yes') |
| 83 | { |
| 84 | echo "<PRE>"; |
| 85 | echo "Rule:\n"; |
| 86 | print_r($rule); |
| 87 | echo "\n\nOld style:\n"; |
| 88 | echo $node->style."\n"; |
| 89 | print_r($this->styleToArray($node->style)); |
| 90 | echo "\n\nNew style:\n"; |
| 91 | print_r(array_merge($this->styleToArray($node->style), $rule['properties'])); |
| 92 | echo "</PRE>"; |
| 93 | die(); |
| 94 | }//*/ |
| 95 | |
| 96 | // Unserialize the style array, merge the rule's CSS into it... |
| 97 | $nodeStyles = $this->styleToArray($node->style); |
| 98 | $style = array_merge($rule['properties'], $nodeStyles); |
| 99 | |
| 100 | // And put the CSS back as a string! |
| 101 | $node->style = $this->arrayToStyle($style); |
| 102 | |
| 103 | // I'm leaving this for debug purposes, it has proved useful. |
| 104 | /* |
| 105 | if ($rule['selector'] === 'table.table-recap td') |
| 106 | { |
| 107 | $node->already_styled = 'yes'; |
| 108 | }//*/ |
| 109 | } |
| 110 | } |
| 111 | |
| 112 | // Now a tricky part: do a second pass with only stuff marked !important |
| 113 | // because !important properties do not care about specificity, except when fighting |
| 114 | // against another !important property |
| 115 | // We need to start with a rule with lowest specificity |
| 116 | $rules = array_reverse($rules); |
| 117 | foreach ($rules as $rule) { |
| 118 | foreach ($rule['properties'] as $key => $value) { |
| 119 | if (strpos($value, '!important') === false) { |
| 120 | continue; |
| 121 | } |
| 122 | foreach ($nodes_map[$rule['selector']] as $node) { |
| 123 | $style = $this->styleToArray($node->style); |
| 124 | $style[$key] = $value; |
| 125 | $node->style = $this->arrayToStyle($style); |
| 126 | // remove all !important tags (inlined styles take precedent over others anyway) |
| 127 | $node->style = str_replace("!important", "", $node->style); |
| 128 | } |
| 129 | } |
| 130 | } |
| 131 | |
| 132 | return $html; |
| 133 | } |
| 134 | |
| 135 | function parseCSS($text) { |
| 136 | $css = new csstidy(); |
| 137 | $css->settings['compress_colors'] = false; |
| 138 | // Disable shorthand optimisation--this breaks `padding: calc() calc()` style rules. |
| 139 | $css->settings['optimise_shorthands'] = 0; |
| 140 | $css->parse($text); |
| 141 | |
| 142 | $rules = []; |
| 143 | $position = 0; |
| 144 | |
| 145 | foreach ($css->css as $declarations) { |
| 146 | foreach ($declarations as $selectors => $properties) { |
| 147 | foreach (explode(",", $selectors) as $selector) { |
| 148 | $rules[] = [ |
| 149 | 'position' => $position, |
| 150 | 'specificity' => $this->calculateCSSSpecifity($selector), |
| 151 | 'selector' => $selector, |
| 152 | 'properties' => $properties, |
| 153 | ]; |
| 154 | } |
| 155 | |
| 156 | $position += 1; |
| 157 | } |
| 158 | } |
| 159 | |
| 160 | usort($rules, function($a, $b) { |
| 161 | if ($a['specificity'] > $b['specificity']) { |
| 162 | return -1; |
| 163 | } else if ($a['specificity'] < $b['specificity']) { |
| 164 | return 1; |
| 165 | } else { |
| 166 | if ($a['position'] > $b['position']) { |
| 167 | return -1; |
| 168 | } else { |
| 169 | return 1; |
| 170 | } |
| 171 | } |
| 172 | }); |
| 173 | |
| 174 | return $rules; |
| 175 | } |
| 176 | |
| 177 | /* |
| 178 | * Merges two CSS inline styles strings into one. |
| 179 | * If both styles defines same property the property from second styles will be used. |
| 180 | */ |
| 181 | function mergeInlineStyles($styles_1, $styles_2) { |
| 182 | $merged_styles = array_merge($this->styleToArray($styles_1), $this->styleToArray($styles_2)); |
| 183 | return $this->arrayToStyle($merged_styles); |
| 184 | } |
| 185 | |
| 186 | private function splitMediaQueries($css) { |
| 187 | $start = 0; |
| 188 | $queries = ''; |
| 189 | |
| 190 | while (($start = strpos($css, "@media", $start)) !== false) { |
| 191 | // stack to manage brackets |
| 192 | $s = []; |
| 193 | |
| 194 | // get the first opening bracket |
| 195 | $i = strpos($css, "{", $start); |
| 196 | |
| 197 | // if $i is false, then there is probably a css syntax error |
| 198 | if ($i !== false) { |
| 199 | // push bracket onto stack |
| 200 | array_push($s, $css[$i]); |
| 201 | |
| 202 | // move past first bracket |
| 203 | $i++; |
| 204 | |
| 205 | while (!empty($s)) { |
| 206 | // if the character is an opening bracket, push it onto the stack, otherwise pop the stack |
| 207 | if ($css[$i] == "{") { |
| 208 | array_push($s, "{"); |
| 209 | } else if ($css[$i] == "}") { |
| 210 | array_pop($s); |
| 211 | } |
| 212 | |
| 213 | $i++; |
| 214 | } |
| 215 | |
| 216 | $queries .= substr($css, $start - 1, $i + 1 - $start) . "\n"; |
| 217 | $css = substr($css, 0, $start - 1) . substr($css, $i); |
| 218 | $i = $start; |
| 219 | } |
| 220 | } |
| 221 | |
| 222 | return [$css, $queries]; |
| 223 | } |
| 224 | |
| 225 | /** |
| 226 | * The following function fomes from CssToInlineStyles.php - here is the original licence FOR THIS FUNCTION |
| 227 | * |
| 228 | * CSS to Inline Styles class |
| 229 | * |
| 230 | * @author Tijs Verkoyen <php-css-to-inline-styles@verkoyen.eu> |
| 231 | * @version 1.2.1 |
| 232 | * @copyright Copyright (c), Tijs Verkoyen. All rights reserved. |
| 233 | * @license BSD License |
| 234 | */ |
| 235 | |
| 236 | private function calculateCSSSpecifity($selector) { |
| 237 | // cleanup selector |
| 238 | $selector = str_replace(['>', '+'], [' > ', ' + '], $selector); |
| 239 | |
| 240 | // init var |
| 241 | $specifity = 0; |
| 242 | |
| 243 | // split the selector into chunks based on spaces |
| 244 | $chunks = explode(' ', $selector); |
| 245 | |
| 246 | // loop chunks |
| 247 | foreach ($chunks as $chunk) { |
| 248 | // an ID is important, so give it a high specifity |
| 249 | if (strstr($chunk, '#') !== false) $specifity += 100; |
| 250 | |
| 251 | // classes are more important than a tag, but less important then an ID |
| 252 | elseif (strstr($chunk, '.')) $specifity += 10; |
| 253 | |
| 254 | // anything else isn't that important |
| 255 | else $specifity += 1; |
| 256 | } |
| 257 | |
| 258 | // return |
| 259 | return $specifity; |
| 260 | } |
| 261 | |
| 262 | /* |
| 263 | * Turns a CSS style string (like: "border: 1px solid black; color:red") |
| 264 | * into an array of properties (like: array("border" => "1px solid black", "color" => "red")) |
| 265 | */ |
| 266 | private function styleToArray($str) { |
| 267 | $str = EHelper::unescapeHtmlStyleAttr($str); |
| 268 | $array = []; |
| 269 | |
| 270 | if (trim($str) === '') return $array; |
| 271 | |
| 272 | foreach (explode(';', $str) as $kv) { |
| 273 | $line = trim($kv); |
| 274 | if ($line === '') { |
| 275 | continue; |
| 276 | } |
| 277 | list($selector, $rule) = explode(':', $line, 2); |
| 278 | $array[trim($selector)] = trim($rule); |
| 279 | } |
| 280 | |
| 281 | return $array; |
| 282 | } |
| 283 | |
| 284 | /* |
| 285 | * Reverses what styleToArray does, see above. |
| 286 | * array("border" => "1px solid black", "color" => "red") yields "border: 1px solid black; color:red" |
| 287 | */ |
| 288 | private function arrayToStyle($array) { |
| 289 | $parts = []; |
| 290 | foreach ($array as $k => $v) { |
| 291 | $parts[] = "$k:$v"; |
| 292 | } |
| 293 | return EHelper::escapeHtmlStyleAttr(implode(';', $parts)); |
| 294 | } |
| 295 | } |
| 296 |