1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
|
<?php
/**
* This class provides functions for converting CSS styles into inline style attributes in your HTML code.
*
* For more information, please see the README.md file.
*
* @author Cameron Brooks
* @author Jaime Prado
*/
class Emogrifier {
/**
* @var string
*/
const ENCODING = 'UTF-8';
/**
* @var integer
*/
const CACHE_KEY_CSS = 0;
/**
* @var integer
*/
const CACHE_KEY_SELECTOR = 1;
/**
* @var integer
*/
const CACHE_KEY_XPATH = 2;
/**
* for calculating nth-of-type and nth-child selectors
*
* @var integer
*/
const INDEX = 0;
/**
* for calculating nth-of-type and nth-child selectors
*
* @var integer
*/
const MULTIPLIER = 1;
/**
* @var string
*/
const ID_ATTRIBUTE_MATCHER = '/(\\w+)?\\#([\\w\\-]+)/';
/**
* @var string
*/
const CLASS_ATTRIBUTE_MATCHER = '/(\\w+|[\\*\\]])?((\\.[\\w\\-]+)+)/';
/**
* @var string
*/
private $html = '';
/**
* @var string
*/
private $css = '';
/**
* @var array<string>
*/
private $unprocessableHtmlTags = array('wbr');
/**
* @var array<array>
*/
private $caches = array(
self::CACHE_KEY_CSS => array(),
self::CACHE_KEY_SELECTOR => array(),
self::CACHE_KEY_XPATH => array(),
);
/**
* the visited nodes with the XPath paths as array keys
*
* @var array<\DOMNode>
*/
private $visitedNodes = array();
/**
* the styles to apply to the nodes with the XPath paths as array keys for the outer array and the attribute names/values
* as key/value pairs for the inner array
*
* @var array<array><string>
*/
private $styleAttributesForNodes = array();
/**
* This attribute applies to the case where you want to preserve your original text encoding.
*
* By default, emogrifier translates your text into HTML entities for two reasons:
*
* 1. Because of client incompatibilities, it is better practice to send out HTML entities rather than unicode over email.
*
* 2. It translates any illegal XML characters that DOMDocument cannot work with.
*
* If you would like to preserve your original encoding, set this attribute to TRUE.
*
* @var boolean
*/
public $preserveEncoding = FALSE;
/**
* The constructor.
*
* @param string $html the HTML to emogrify, must be UTF-8-encoded
* @param string $css the CSS to merge, must be UTF-8-encoded
*/
public function __construct($html = '', $css = '') {
$this->setHtml($html);
$this->setCss($css);
}
/**
* The destructor.
*/
public function __destruct() {
$this->purgeVisitedNodes();
}
/**
* Sets the HTML to emogrify.
*
* @param string $html the HTML to emogrify, must be UTF-8-encoded
*
* @return void
*/
public function setHtml($html = '') {
$this->html = $html;
}
/**
* Sets the CSS to merge with the HTML.
*
* @param string $css the CSS to merge, must be UTF-8-encoded
*
* @return void
*/
public function setCss($css = '') {
$this->css = $css;
}
/**
* Clears all caches.
*
* @return void
*/
private function clearAllCaches() {
$this->clearCache(self::CACHE_KEY_CSS);
$this->clearCache(self::CACHE_KEY_SELECTOR);
$this->clearCache(self::CACHE_KEY_XPATH);
}
/**
* Clears a single cache by key.
*
* @param integer $key the cache key, must be CACHE_KEY_CSS, CACHE_KEY_SELECTOR or CACHE_KEY_XPATH
*
* @return void
*
* @throws \InvalidArgumentException
*/
private function clearCache($key) {
$allowedCacheKeys = array(self::CACHE_KEY_CSS, self::CACHE_KEY_SELECTOR, self::CACHE_KEY_XPATH);
if (!in_array($key, $allowedCacheKeys, TRUE)) {
throw new \InvalidArgumentException('Invalid cache key: ' . $key, 1391822035);
}
$this->caches[$key] = array();
}
/**
* Purges the visited nodes.
*
* @return void
*/
private function purgeVisitedNodes() {
$this->visitedNodes = array();
$this->styleAttributesForNodes = array();
}
/**
* Marks a tag for removal.
*
* There are some HTML tags that DOMDocument cannot process, and it will throw an error if it encounters them.
* In particular, DOMDocument will complain if you try to use HTML5 tags in an XHTML document.
*
* Note: The tags will not be removed if they have any content.
*
* @param string $tagName the tag name, e.g., "p"
*
* @return void
*/
public function addUnprocessableHtmlTag($tagName) {
$this->unprocessableHtmlTags[] = $tagName;
}
/**
* Drops a tag from the removal list.
*
* @param string $tagName the tag name, e.g., "p"
*
* @return void
*/
public function removeUnprocessableHtmlTag($tagName) {
$key = array_search($tagName, $this->unprocessableHtmlTags, TRUE);
if ($key !== FALSE) {
unset($this->unprocessableHtmlTags[$key]);
}
}
/**
* Applies the CSS you submit to the HTML you submit.
*
* This method places the CSS inline.
*
* @return string
*
* @throws \BadMethodCallException
*/
public function emogrify() {
if ($this->html === '') {
throw new \BadMethodCallException('Please set some HTML first before calling emogrify.', 1390393096);
}
$xmlDocument = $this->createXmlDocument();
$xpath = new \DOMXPath($xmlDocument);
$this->clearAllCaches();
// before be begin processing the CSS file, parse the document and normalize all existing CSS attributes (changes 'DISPLAY: none' to 'display: none');
// we wouldn't have to do this if DOMXPath supported XPath 2.0.
// also store a reference of nodes with existing inline styles so we don't overwrite them
$this->purgeVisitedNodes();
$nodesWithStyleAttributes = $xpath->query('//*[@style]');
if ($nodesWithStyleAttributes !== FALSE) {
$callback = create_function('$m', 'return strtolower($m[0]);');
/** @var $nodeWithStyleAttribute \DOMNode */
foreach ($nodesWithStyleAttributes as $node) {
$normalizedOriginalStyle = preg_replace_callback(
'/[A-z\\-]+(?=\\:)/S',
$callback,
$node->getAttribute('style')
);
// in order to not overwrite existing style attributes in the HTML, we have to save the original HTML styles
$nodePath = $node->getNodePath();
if (!isset($this->styleAttributesForNodes[$nodePath])) {
$this->styleAttributesForNodes[$nodePath] = $this->parseCssDeclarationBlock($normalizedOriginalStyle);
$this->visitedNodes[$nodePath] = $node;
}
$node->setAttribute('style', $normalizedOriginalStyle);
}
}
// grab any existing style blocks from the html and append them to the existing CSS
// (these blocks should be appended so as to have precedence over conflicting styles in the existing CSS)
$css = $this->css;
$styleNodes = $xpath->query('//style');
if ($styleNodes !== FALSE) {
/** @var $styleNode \DOMNode */
foreach ($styleNodes as $styleNode) {
// append the css
$css .= "\n\n" . $styleNode->nodeValue;
// remove the <style> node
$styleNode->parentNode->removeChild($styleNode);
}
}
// filter the CSS
$search = array(
// get rid of css comment code
'/\\/\\*.*\\*\\//sU',
// strip out any import directives
'/^\\s*@import\\s[^;]+;/misU',
// strip any empty media enclosures
'/^\\s*@media\\s[^{]+{\\s*}/misU',
// strip out all media rules that are not 'screen' or 'all' (these don't apply to email)
'/^\\s*@media\\s+((aural|braille|embossed|handheld|print|projection|speech|tty|tv)\\s*,*\\s*)+{.*}\\s*}/misU',
// get rid of remaining media type rules
'/^\\s*@media\\s[^{]+{(.*})\\s*}/misU',
);
$replace = array(
'',
'',
'',
'',
'\\1',
);
$css = preg_replace($search, $replace, $css);
$cssKey = md5($css);
if (!isset($this->caches[self::CACHE_KEY_CSS][$cssKey])) {
// process the CSS file for selectors and definitions
preg_match_all('/(?:^|[^{}])\\s*([^{]+){([^}]*)}/mis', $css, $matches, PREG_SET_ORDER);
$allSelectors = array();
foreach ($matches as $key => $selectorString) {
// if there is a blank definition, skip
if (!strlen(trim($selectorString[2]))) {
continue;
}
// else split by commas and duplicate attributes so we can sort by selector precedence
$selectors = explode(',', $selectorString[1]);
foreach ($selectors as $selector) {
// don't process pseudo-elements and behavioral (dynamic) pseudo-classes; ONLY allow structural pseudo-classes
if (strpos($selector, ':') !== FALSE && !preg_match('/:\\S+\\-(child|type)\\(/i', $selector)) {
continue;
}
$allSelectors[] = array('selector' => trim($selector),
'attributes' => trim($selectorString[2]),
// keep track of where it appears in the file, since order is important
'line' => $key,
);
}
}
// now sort the selectors by precedence
usort($allSelectors, array($this,'sortBySelectorPrecedence'));
$this->caches[self::CACHE_KEY_CSS][$cssKey] = $allSelectors;
}
foreach ($this->caches[self::CACHE_KEY_CSS][$cssKey] as $value) {
// query the body for the xpath selector
$nodesMatchingCssSelectors = $xpath->query($this->translateCssToXpath(trim($value['selector'])));
/** @var $node \DOMNode */
foreach ($nodesMatchingCssSelectors as $node) {
// if it has a style attribute, get it, process it, and append (overwrite) new stuff
if ($node->hasAttribute('style')) {
// break it up into an associative array
$oldStyleDeclarations = $this->parseCssDeclarationBlock($node->getAttribute('style'));
$newStyleDeclarations = $this->parseCssDeclarationBlock($value['attributes']);
// new styles overwrite the old styles (not technically accurate, but close enough)
$combinedArray = array_merge($oldStyleDeclarations, $newStyleDeclarations);
$style = '';
foreach ($combinedArray as $attributeName => $attributeValue) {
$style .= (strtolower($attributeName) . ':' . $attributeValue . ';');
}
} else {
// otherwise create a new style
$style = trim($value['attributes']);
}
$node->setAttribute('style', $style);
}
}
// now iterate through the nodes that contained inline styles in the original HTML
foreach ($this->styleAttributesForNodes as $nodePath => $styleAttributesForNode) {
$node = $this->visitedNodes[$nodePath];
$currentStyleAttributes = $this->parseCssDeclarationBlock($node->getAttribute('style'));
$combinedArray = array_merge($currentStyleAttributes, $styleAttributesForNode);
$style = '';
foreach ($combinedArray as $attributeName => $attributeValue) {
$style .= (strtolower($attributeName) . ':' . $attributeValue . ';');
}
$node->setAttribute('style', $style);
}
// This removes styles from your email that contain display:none.
// We need to look for display:none, but we need to do a case-insensitive search. Since DOMDocument only supports XPath 1.0,
// lower-case() isn't available to us. We've thus far only set attributes to lowercase, not attribute values. Consequently, we need
// to translate() the letters that would be in 'NONE' ("NOE") to lowercase.
$nodesWithStyleDisplayNone = $xpath->query('//*[contains(translate(translate(@style," ",""),"NOE","noe"),"display:none")]');
// The checks on parentNode and is_callable below ensure that if we've deleted the parent node,
// we don't try to call removeChild on a nonexistent child node
if ($nodesWithStyleDisplayNone->length > 0) {
/** @var $node \DOMNode */
foreach ($nodesWithStyleDisplayNone as $node) {
if ($node->parentNode && is_callable(array($node->parentNode,'removeChild'))) {
$node->parentNode->removeChild($node);
}
}
}
if ($this->preserveEncoding) {
return mb_convert_encoding($xmlDocument->saveHTML(), self::ENCODING, 'HTML-ENTITIES');
} else {
return $xmlDocument->saveHTML();
}
}
/**
* Creates a DOMDocument instance with the current HTML.
*
* @return \DOMDocument
*/
private function createXmlDocument() {
$xmlDocument = new \DOMDocument;
$xmlDocument->encoding = self::ENCODING;
$xmlDocument->strictErrorChecking = FALSE;
$xmlDocument->formatOutput = TRUE;
$libxmlState = libxml_use_internal_errors(TRUE);
$xmlDocument->loadHTML($this->getUnifiedHtml());
libxml_clear_errors();
libxml_use_internal_errors($libxmlState);
$xmlDocument->normalizeDocument();
return $xmlDocument;
}
/**
* Returns the HTML with the non-ASCII characters converts into HTML entities and the unprocessable HTML tags removed.
*
* @return string the unified HTML
*
* @throws \BadMethodCallException
*/
private function getUnifiedHtml() {
if (!empty($this->unprocessableHtmlTags)) {
$unprocessableHtmlTags = implode('|', $this->unprocessableHtmlTags);
$bodyWithoutUnprocessableTags = preg_replace('/<\\/?(' . $unprocessableHtmlTags . ')[^>]*>/i', '', $this->html);
} else {
$bodyWithoutUnprocessableTags = $this->html;
}
return mb_convert_encoding($bodyWithoutUnprocessableTags, 'HTML-ENTITIES', self::ENCODING);
}
/**
* @param array $a
* @param array $b
*
* @return integer
*/
private function sortBySelectorPrecedence(array $a, array $b) {
$precedenceA = $this->getCssSelectorPrecedence($a['selector']);
$precedenceB = $this->getCssSelectorPrecedence($b['selector']);
// We want these sorted in ascending order so selectors with lesser precedence get processed first and
// selectors with greater precedence get sorted last.
// The parenthesis around the -1 are necessary to avoid a PHP_CodeSniffer warning about missing spaces around
// arithmetic operators.
// @see http://forge.typo3.org/issues/55605
$precedenceForEquals = ($a['line'] < $b['line'] ? (-1) : 1);
$precedenceForNotEquals = ($precedenceA < $precedenceB ? (-1) : 1);
return ($precedenceA === $precedenceB) ? $precedenceForEquals : $precedenceForNotEquals;
}
/**
* @param string $selector
*
* @return integer
*/
private function getCssSelectorPrecedence($selector) {
$selectorKey = md5($selector);
if (!isset($this->caches[self::CACHE_KEY_SELECTOR][$selectorKey])) {
$precedence = 0;
$value = 100;
// ids: worth 100, classes: worth 10, elements: worth 1
$search = array('\\#','\\.','');
foreach ($search as $s) {
if (trim($selector == '')) {
break;
}
$number = 0;
$selector = preg_replace('/' . $s . '\\w+/', '', $selector, -1, $number);
$precedence += ($value * $number);
$value /= 10;
}
$this->caches[self::CACHE_KEY_SELECTOR][$selectorKey] = $precedence;
}
return $this->caches[self::CACHE_KEY_SELECTOR][$selectorKey];
}
/**
* Right now, we support all CSS 1 selectors and most CSS2/3 selectors.
*
* @see http://plasmasturm.org/log/444/
*
* @param string $cssSelector
*
* @return string
*/
private function translateCssToXpath($cssSelector) {
$cssSelector = trim($cssSelector);
$xpathKey = md5($cssSelector);
if (!isset($this->caches[self::CACHE_KEY_XPATH][$xpathKey])) {
// returns an Xpath selector
$search = array(
// Matches any element that is a child of parent.
'/\\s+>\\s+/',
// Matches any element that is an adjacent sibling.
'/\\s+\\+\\s+/',
// Matches any element that is a descendant of an parent element element.
'/\\s+/',
// first-child pseudo-selector
'/([^\\/]+):first-child/i',
// last-child pseudo-selector
'/([^\\/]+):last-child/i',
// Matches element with attribute
'/(\\w)\\[(\\w+)\\]/',
// Matches element with EXACT attribute
'/(\\w)\\[(\\w+)\\=[\'"]?(\\w+)[\'"]?\\]/',
);
$replace = array(
'/',
'/following-sibling::*[1]/self::',
'//',
'*[1]/self::\\1',
'*[last()]/self::\\1',
'\\1[@\\2]',
'\\1[@\\2="\\3"]',
);
$cssSelector = '//' . preg_replace($search, $replace, $cssSelector);
$cssSelector = preg_replace_callback(self::ID_ATTRIBUTE_MATCHER, array($this, 'matchIdAttributes'), $cssSelector);
$cssSelector = preg_replace_callback(self::CLASS_ATTRIBUTE_MATCHER, array($this, 'matchClassAttributes'), $cssSelector);
// Advanced selectors are going to require a bit more advanced emogrification.
// When we required PHP 5.3, we could do this with closures.
$cssSelector = preg_replace_callback(
'/([^\\/]+):nth-child\\(\s*(odd|even|[+\-]?\\d|[+\\-]?\\d?n(\\s*[+\\-]\\s*\\d)?)\\s*\\)/i',
array($this, 'translateNthChild'), $cssSelector
);
$cssSelector = preg_replace_callback(
'/([^\\/]+):nth-of-type\\(\s*(odd|even|[+\-]?\\d|[+\\-]?\\d?n(\\s*[+\\-]\\s*\\d)?)\\s*\\)/i',
array($this, 'translateNthOfType'), $cssSelector
);
$this->caches[self::CACHE_KEY_SELECTOR][$xpathKey] = $cssSelector;
}
return $this->caches[self::CACHE_KEY_SELECTOR][$xpathKey];
}
/**
* @param array $match
*
* @return string
*/
private function matchIdAttributes(array $match) {
return (strlen($match[1]) ? $match[1] : '*') . '[@id="' . $match[2] . '"]';
}
/**
* @param array $match
*
* @return string
*/
private function matchClassAttributes(array $match) {
return (strlen($match[1]) ? $match[1] : '*') . '[contains(concat(" ",@class," "),concat(" ","' .
implode(
'"," "))][contains(concat(" ",@class," "),concat(" ","',
explode('.', substr($match[2], 1))
) . '"," "))]';
}
/**
* @param array $match
*
* @return string
*/
private function translateNthChild(array $match) {
$result = $this->parseNth($match);
if (isset($result[self::MULTIPLIER])) {
if ($result[self::MULTIPLIER] < 0) {
$result[self::MULTIPLIER] = abs($result[self::MULTIPLIER]);
return sprintf('*[(last() - position()) mod %u = %u]/self::%s', $result[self::MULTIPLIER], $result[self::INDEX], $match[1]);
} else {
return sprintf('*[position() mod %u = %u]/self::%s', $result[self::MULTIPLIER], $result[self::INDEX], $match[1]);
}
} else {
return sprintf('*[%u]/self::%s', $result[self::INDEX], $match[1]);
}
}
/**
* @param array $match
*
* @return string
*/
private function translateNthOfType(array $match) {
$result = $this->parseNth($match);
if (isset($result[self::MULTIPLIER])) {
if ($result[self::MULTIPLIER] < 0) {
$result[self::MULTIPLIER] = abs($result[self::MULTIPLIER]);
return sprintf('%s[(last() - position()) mod %u = %u]', $match[1], $result[self::MULTIPLIER], $result[self::INDEX]);
} else {
return sprintf('%s[position() mod %u = %u]', $match[1], $result[self::MULTIPLIER], $result[self::INDEX]);
}
} else {
return sprintf('%s[%u]', $match[1], $result[self::INDEX]);
}
}
/**
* @param array $match
*
* @return array
*/
private function parseNth(array $match) {
if (in_array(strtolower($match[2]), array('even','odd'))) {
$index = strtolower($match[2]) == 'even' ? 0 : 1;
return array(self::MULTIPLIER => 2, self::INDEX => $index);
} elseif (stripos($match[2], 'n') === FALSE) {
// if there is a multiplier
$index = intval(str_replace(' ', '', $match[2]));
return array(self::INDEX => $index);
} else {
if (isset($match[3])) {
$multipleTerm = str_replace($match[3], '', $match[2]);
$index = intval(str_replace(' ', '', $match[3]));
} else {
$multipleTerm = $match[2];
$index = 0;
}
$multiplier = str_ireplace('n', '', $multipleTerm);
if (!strlen($multiplier)) {
$multiplier = 1;
} elseif ($multiplier == 0) {
return array(self::INDEX => $index);
} else {
$multiplier = intval($multiplier);
}
while ($index < 0) {
$index += abs($multiplier);
}
return array(self::MULTIPLIER => $multiplier, self::INDEX => $index);
}
}
/**
* Parses a CSS declaration block into property name/value pairs.
*
* Example:
*
* The declaration block
*
* "color: #000; font-weight: bold;"
*
* will be parsed into the following array:
*
* "color" => "#000"
* "font-weight" => "bold"
*
* @param string $cssDeclarationBlock the CSS declaration block without the curly braces, may be empty
*
* @return array the CSS declarations with the property names as array keys and the property values as array values
*/
private function parseCssDeclarationBlock($cssDeclarationBlock) {
$properties = array();
$declarations = explode(';', $cssDeclarationBlock);
foreach ($declarations as $declaration) {
$matches = array();
if (!preg_match('/ *([a-z\-]+) *: *([^;]+) */', $declaration, $matches)) {
continue;
}
$propertyName = $matches[1];
$propertyValue = $matches[2];
$properties[$propertyName] = $propertyValue;
}
return $properties;
}
}
|