Merge pull request #42 from underthecocotree/master

Load css from link tag in the html
fedeisas · May 29, 2017 · 2d2fae1 · 2d2fae1
2 parents c24d71f + ab1272c
commit 2d2fae1
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ The goal of this package is to automate the process of inlining that CSS before
 ## How?
 Using a wonderful [CSS inliner package](https://github.com/tijsverkoyen/CssToInlineStyles) wraped in a SwiftMailer plugin and served as a Service Provider it justs works without any configuration.
 
-Turns:
+Turns style tag:
 ```html
 <html>
     <head>
@@ -31,6 +31,17 @@ Turns:
     </body>
 </html>
 ```
+Or the link tag:
+```html
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="./tests/css/test.css">
+    </head>
+    <body>
+        <h1>Hey you</h1>
+    </body>
+</html>
+```
 
 Into this:
 ```html
@@ -74,6 +85,8 @@ and changing the settings on the generated `config/css-inliner.php` file.
 ```bash
 $ composer install
 $ ./vendor/bin/phpunit
+$ ./vendor/bin/phpcs --standard=phpcs.xml ./src/
+$ ./vendor/bin/phpcs --standard=phpcs.xml ./tests/;
 ```
 In addition to a full test suite, there is Travis integration.
 

diff --git a/src/CssInlinerPlugin.php b/src/CssInlinerPlugin.php
@@ -22,12 +22,7 @@ class CssInlinerPlugin implements \Swift_Events_SendListener
     public function __construct(array $options)
     {
         $this->converter = new CssToInlineStyles();
-        if (isset($options['css-files']) && count($options['css-files']) > 0) {
-            $this->css = '';
-            foreach ($options['css-files'] as $file) {
-                $this->css .= file_get_contents($file);
-            }
-        }
+        $this->loadOptions($options);
     }
 
     /**
@@ -41,12 +36,14 @@ public function beforeSendPerformed(\Swift_Events_SendEvent $evt)
             || ($message->getContentType() === 'multipart/alternative' && $message->getBody())
             || ($message->getContentType() === 'multipart/mixed' && $message->getBody())
         ) {
-            $message->setBody($this->converter->convert($message->getBody(), $this->css));
+            $body = $this->loadCssFilesFromLinks($message->getBody());
+            $message->setBody($this->converter->convert($body, $this->css));
         }
 
         foreach ($message->getChildren() as $part) {
             if (strpos($part->getContentType(), 'text/html') === 0) {
-                $part->setBody($this->converter->convert($part->getBody(), $this->css));
+                $body = $this->loadCssFilesFromLinks($part->getBody());
+                $part->setBody($this->converter->convert($body, $this->css));
             }
         }
     }
@@ -60,4 +57,54 @@ public function sendPerformed(\Swift_Events_SendEvent $evt)
     {
         // Do Nothing
     }
+
+    /**
+     * Load the options
+     * @param  array $options Options array
+     */
+    public function loadOptions($options)
+    {
+        if (isset($options['css-files']) && count($options['css-files']) > 0) {
+            $this->css = '';
+            foreach ($options['css-files'] as $file) {
+                $this->css .= file_get_contents($file);
+            }
+        }
+    }
+
+    /**
+     * Find CSS stylesheet links and load them
+     * 
+     * Loads the body of the message and passes 
+     * any link stylesheets to $this->css
+     * Removes any link elements
+     * 
+     * @return string $message The message
+     */
+    public function loadCssFilesFromLinks($message)
+    {
+        $dom = new \DOMDocument();
+        $dom->loadHTML($message);
+        $link_tags = $dom->getElementsByTagName('link');
+
+        if ($link_tags->length > 0) {
+            do {
+                if ($link_tags->item(0)->getAttribute('rel') == "stylesheet") {
+                    $options['css-files'][] = $link_tags->item(0)->getAttribute('href');
+
+                    // remove the link node
+                    $link_tags->item(0)->parentNode->removeChild($link_tags->item(0));
+                }
+            } while ($link_tags->length > 0);
+
+            if (isset($options)) {
+                // reload the options
+                $this->loadOptions($options);
+            }
+
+            return $dom->saveHTML();
+        }
+
+        return $message;
+    }
 }
diff --git a/tests/CssInlinerPluginTest.php b/tests/CssInlinerPluginTest.php
@@ -9,8 +9,9 @@ class CssInlinerPluginTest extends PHPUnit_Framework_TestCase
     protected $options;
 
     protected static $stubDefinitions = array(
-        'plain-text', 'original-html', 'original-html-with-css','converted-html',
-        'converted-html-with-css'
+        'plain-text', 'original-html', 'original-html-with-css',
+        'original-html-with-link-css', 'original-html-with-links-css',
+        'converted-html', 'converted-html-with-css', 'converted-html-with-links-css'
     );
 
     public function setUp()
@@ -125,4 +126,44 @@ public function itShouldConvertHtmlBodyAsAPart()
 
         $this->assertEquals($this->stubs['converted-html'], $children[0]->getBody());
     }
+
+    /** @test **/
+    public function itShouldConvertHtmlBodyWithLinkCss()
+    {
+        $mailer = Swift_Mailer::newInstance(Swift_NullTransport::newInstance());
+
+        $mailer->registerPlugin(new CssInlinerPlugin($this->options));
+
+        $message = Swift_Message::newInstance();
+
+        $message->setFrom('[email protected]');
+        $message->setTo('[email protected]');
+        $message->setSubject('Test');
+
+        $message->setBody($this->stubs['original-html-with-link-css'], 'text/html');
+
+        $mailer->send($message);
+
+        $this->assertEquals($this->stubs['converted-html-with-css'], $message->getBody());
+    }
+
+    /** @test **/
+    public function itShouldConvertHtmlBodyWithLinksCss()
+    {
+        $mailer = Swift_Mailer::newInstance(Swift_NullTransport::newInstance());
+
+        $mailer->registerPlugin(new CssInlinerPlugin($this->options));
+
+        $message = Swift_Message::newInstance();
+
+        $message->setFrom('[email protected]');
+        $message->setTo('[email protected]');
+        $message->setSubject('Test');
+
+        $message->setBody($this->stubs['original-html-with-links-css'], 'text/html');
+
+        $mailer->send($message);
+
+        $this->assertEquals($this->stubs['converted-html-with-links-css'], $message->getBody());
+    }
 }
diff --git a/tests/css/test2.css b/tests/css/test2.css
@@ -0,0 +1,3 @@
+body {
+   background-color: red;
+}
diff --git a/tests/stubs/converted-html-with-links-css.stub b/tests/stubs/converted-html-with-links-css.stub
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html>
+<head></head>
+<body style="background-color: red;">
+        <div class="pixels-10" style="width: 10px;">
+            text
+
+            <ul>
+<li>
+                    Big list
+                </li>
+                <li>
+                    Small list
+                </li>
+            </ul>
+</div>
+    </body>
+</html>
diff --git a/tests/stubs/original-html-with-link-css.stub b/tests/stubs/original-html-with-link-css.stub
@@ -0,0 +1,20 @@
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="./tests/css/test.css">
+    </head>
+    <body>
+        <div class="pixels-10">
+            text
+
+            <ul>
+                <li>
+                    Big list
+                </li>
+                <li>
+                    Small list
+                </li>
+            </ul>
+        </div>
+    </body>
+</html>
+
diff --git a/tests/stubs/original-html-with-links-css.stub b/tests/stubs/original-html-with-links-css.stub
@@ -0,0 +1,21 @@
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="./tests/css/test.css">
+        <link rel="stylesheet" type="text/css" href="./tests/css/test2.css">
+    </head>
+    <body>
+        <div class="pixels-10">
+            text
+
+            <ul>
+                <li>
+                    Big list
+                </li>
+                <li>
+                    Small list
+                </li>
+            </ul>
+        </div>
+    </body>
+</html>
+