swift-css-inliner-bundle

When HTML emails are viewed in browser-based email apps (like YahooMail!, Gmail, Hotmail, etc), those applications strip out the HEAD and BODY tags by default, so the only way to style the content is to place inline the CSS within the style attribute. This is a dirty work for frontenders. This plugin provides exactly the CSS processing to fille the style attributes.

Ex. using the Zurb ink mail template

#1. Installation

####Add the dependency within the composer.json

    "require": {
        "trt/swift-css-inliner-bundle": "~0.3"
    }

run php composer.phar install

####Enable the bundle (add the following line within the AppKernel.php)

$bundles = array(
    [...]
    new \Trt\SwiftCssInlinerBundle\TrtSwiftCssInlinerBundle(),
);

#2. Usage - Full Example

/**
 * @Route("/hello/{name}", name="_demo_hello")
 */
public function helloAction($name)
{
    $message = \Swift_Message::newInstance()
        ->setSubject('Hello Email')
        ->setFrom('[email protected]')
        ->setTo('[email protected]')
        ->setContentType('text/html')
        ->setBody("<style>.text{ color: red; }</style><p class='text'> $name </p>")
    ;
    $message->getHeaders()->addTextHeader(
        CssInlinerPlugin::CSS_HEADER_KEY_AUTODETECT
    );

    $this->get('mailer')->send($message);
}

#3. Usage - Step-by-step example

####1. Create the swiftmailer message.

$message = \Swift_Message::newInstance()
    ->setSubject('Hello Email')
    ->setFrom('[email protected]')
    ->setTo('[email protected]')
    ->setContentType('text/html')
    ->setBody('<style>.text{color:red;}</style>  <p class="text"> Hello </p>')
;

####2. AutoDetect the "style" Html tag

The auto detect mode will find css within the style tag

$message->getHeaders()->addTextHeader(
    CssInlinerPlugin::CSS_HEADER_KEY_AUTODETECT
);

Add your style explicit

ATTENTION

The explicit mode work only with the php IMAP extension installed @see http://www.php.net/manual/en/book.imap.php

$message->getHeaders()->addTextHeader(
    CssInlinerPlugin::CSS_HEADER_KEY, //The key that say to the plugin "Apply this CSS"
    ".text{ color: red; }"
);

Send the message.

$this->get('mailer')->send($message);

#4. Configuration options

No configuration is necessary.

It is possible to customize the behaviour of the CssToInlineStyles class. This shows the default options:

# app/config/config.yml
trt_swift_css_inliner:
    inliner_class: TijsVerkoyen\CssToInlineStyles\CssToInlineStyles
    cleanup: false
    strip_original_style_tags: false
    exclude_media_queries: true