Processing Encore Files through inline_css()

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $12.00

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

We just used Encore to build an email.scss file that we want to process through inline_css() to style our emails. The problem is that, instead of building just one email.css file in public/build, it split it into two for performance reasons. That wouldn't be a problem, except that the way Webpack splits the files might change over time - we can't guarantee that it will always be these two files. To make matters worse, an Encore production build will add a dynamic "hash" to every file - like email.123abc.css.

Basically... pointing inline_css() directly at these two files... isn't going to work.

How Dynamic Files are Normally Rendered

This is why, in base.html.twig we simply use encore_entry_link_tags() and it takes care of everything. How? Behind the scenes, it looks in the public/build/ directory for an entrypoints.json file that Encore builds. This is the key: it tells us exactly which CSS and JS files are needed for each entrypoint - like app. Or, for email, yep! It contains the two CSS files.

The problem is that we don't want to just output link tags. We actually need to read the source of those files and pass that to inline_css().

Let's create a new Twig Function!

Since there's no built-in way to do that, let's make our own Twig function where we can say encore_entry_css_source(), pass it email, and it will figure out all the CSS files it needs, load their contents, and return it as one big, giant, beautiful string.

{% apply inky_to_html|inline_css(encore_entry_css_source('email')) %}
... lines 2 - 30
{% endapply %}

To create the function, our app already has a Twig extension called AppExtension. Inside, say new TwigFunction(), call it encore_entry_css_source and when this function is used, Twig should call a getEncoreEntryCssSource method.

... lines 1 - 13
class AppExtension extends AbstractExtension implements ServiceSubscriberInterface
{
... lines 16 - 24
public function getFunctions(): array
{
return [
... line 28
new TwigFunction('encore_entry_css_source', [$this, 'getEncoreEntryCssSource']),
];
}
... lines 32 - 75
}

Copy that name and create it below: public function getEncoreEntryCssSource() with a string $entryName argument. This will return the string CSS source.

... lines 1 - 13
class AppExtension extends AbstractExtension implements ServiceSubscriberInterface
{
... lines 16 - 53
public function getEncoreEntryCssSource(string $entryName): string
{
... lines 56 - 65
}
... lines 67 - 75
}

Inside, we need to look into the entrypoints.json file to find the CSS filenames needed for this $entryName. Fortunately, Symfony has a service that already does that. We can get it by using the EntrypointLookupInterface type-hint.

For reasons I don't want to get into in this tutorial, instead of using normal constructor injection - where we add an argument type-hinted with EntrypointLookupInterface - we're using a "service subscriber". You can learn about this in, oddly-enough, our tutorial about Symfony & Doctrine.

To fetch the service, go down to getSubscribedServices() and add EntrypointLookupInterface::class.

... lines 1 - 8
use Symfony\WebpackEncoreBundle\Asset\EntrypointLookupInterface;
... lines 10 - 13
class AppExtension extends AbstractExtension implements ServiceSubscriberInterface
{
... lines 16 - 67
public static function getSubscribedServices()
{
return [
... lines 71 - 72
EntrypointLookupInterface::class,
];
}
}

Back up in getEncoreEntryCssSource(), we can say $files = $this->container->get(EntrypointLookupInterface::class) - that's how you access the service using a service subscriber - then ->getCssFiles($entryName).

... lines 1 - 13
class AppExtension extends AbstractExtension implements ServiceSubscriberInterface
{
... lines 16 - 53
public function getEncoreEntryCssSource(string $entryName): string
{
$files = $this->container
->get(EntrypointLookupInterface::class)
->getCssFiles($entryName);
... lines 59 - 65
}
... lines 67 - 75
}

This will return an array with something like these two paths. Next, foreach over $files as $file and, above create a new $source variable set to an empty string. All we need to do now is look for each file inside the public/ directory and fetch its contents.

... lines 1 - 13
class AppExtension extends AbstractExtension implements ServiceSubscriberInterface
{
... lines 16 - 53
public function getEncoreEntryCssSource(string $entryName): string
{
$files = $this->container
->get(EntrypointLookupInterface::class)
->getCssFiles($entryName);
$source = '';
foreach ($files as $file) {
... line 62
}
... lines 64 - 65
}
... lines 67 - 75
}

Adding a publicDir Binding

We could hardcode the path to the public/ directory right here. But instead, let's set up a new "binding" that we can pass through the constructor. Open up config/services.yaml. In our Symfony Fundamentals Course, we talk about how the global bind below _defaults can be used to allow scalar arguments to be autowired into our services. Add a new one: string $publicDir set to %kernel.project_dir% - that's a built-in parameter - /public.

... lines 1 - 12
services:
... line 14
_defaults:
... lines 16 - 22
bind:
... lines 24 - 27
string $publicDir: '%kernel.project_dir%/public'
... lines 29 - 54

This string part before $publicDir is optional. But by adding it, we're literally saying that this value should be passed if an argument is exactly string $publicDir. Being able to add the type-hint to a bind is a new feature in Symfony 4.2. We didn't use it on the earlier binds... but we could have.

Back in AppExtension, add the string $publicDir argument. I'll hit "Alt + Enter" and go to "Initialize fields" to create that property and set it.

... lines 1 - 13
class AppExtension extends AbstractExtension implements ServiceSubscriberInterface
{
... line 16
private $publicDir;
... line 18
public function __construct(ContainerInterface $container, string $publicDir)
{
... line 21
$this->publicDir = $publicDir;
}
... lines 24 - 75
}

Down in the method, we can say $source .= file_get_contents($this->publicDir.$file) - each $file path should already have a / at the beginning. Finish the method with return $source.

... lines 1 - 13
class AppExtension extends AbstractExtension implements ServiceSubscriberInterface
{
... lines 16 - 53
public function getEncoreEntryCssSource(string $entryName): string
{
$files = $this->container
->get(EntrypointLookupInterface::class)
->getCssFiles($entryName);
$source = '';
foreach ($files as $file) {
$source .= file_get_contents($this->publicDir.'/'.$file);
}
return $source;
}
... lines 67 - 75
}

Whew! Let's try this! We're already running Encore... so it already dumped the email.css and vendors~email.css files. Ok, let's go send an email. I'll hit back to get to the registration page, bump the email, type any password, hit register and... wow! No errors! Over in Mailtrap... nothing here... Of course! We refactored to use Messenger... so emails are not sent immediately!

By the way, if that annoys you in development, there is a way to handle async messages immediately while coding. Check out the Messenger tutorial.

Let's start the worker and send the email. I'll open another tab in my terminal and run:

php bin/console messenger:consume -vv

Message received... and... message handled. Go check it out! The styling look great: they're inlined and coming from a proper Sass file.

And... we've made it to the end! You are now an email expert... I mean, not just a Mailer expert... we really dove deep. Congrats!

Go forth and use your great power responsibly. Let us know what cool emails you're sending... heck... you could even send them to us... and, as always, we're here to help down in the comments section.

Alright friends, seeya next time!

Leave a comment!

  • 2020-07-08 Victor Bocharsky

    Hey Usuri,

    If you send the email sync, then you should have access to the rendered HTML via $mail->getHtmlBody() method - call it right after the "$this->mailer->send($mail);" call. The renderer will render the template and set its HTML on the same email object.

    If you send async - you probably need to do this via Messenger component.

    I hope this helps!

    Cheers!

  • 2020-07-07 Usuri

    Hi.

    $mail = (new TemplatedEmail())
    ->addTo($to)
    ->addFrom($from)
    ->addBcc($bcc)
    ->addCc($cc)
    ->addReplyTo($rep)
    ->context($params)
    ->htmlTemplate($tempalte)
    ->subject($subje);

    $this->mailer->send($mail);

    After send "TemplatedEmail" via "MailerInterface" how can I get email htmlBody or as a text that been sended?

    Thank you.

  • 2020-06-02 Victor Bocharsky

    Hey Kiuega,

    Good question! Well, BCC is not quite for this. When you use BCC - you suppose to send the exact same email to the email addresses specified in BCC, but in your case you're going to send a different unique emails. They are unique because of the unique user name in the email.

    I think the only way to achieve "group emails" is to use Sendgrid API (or other service API you're using). For Sendgrid - take a look at Bulk Email Service: https://sendgrid.com/docs/g... . Usually, each email service gives you its own implementation of this, and it may vary from service to service.

    Otherwise, you can try to make the email the same for every user and use BCC. Or, create unique emails for every user and send them separately. You may want to use Messenger integration in this case that will help with sending them async behind the scene.

    I hope this helps!

    Cheers!

  • 2020-06-01 Kiuega A

    Hello !

    In the event that the administrator of a site wishes to send a message to all of its customers, it would be useful to use "bcc" rather than recreating the email each time.

    In function, this could result in


    public function sendAdminMessage($users, $subject, $body)
    {
    $this->resetEntryPoints();

    $email = (new TemplatedEmail());

    foreach($users as $user)
    {
    $email->addBcc(new NamedAddress($user->getEmail(), $user->getNom()));
    }

    $email->subject($subject)
    ->htmlTemplate('stripe/email/admin/admin_message_to_customer.html.twig')
    ->context([
    'body' => $body,
    ]);


    $this->mailer->send($email);

    return $email;
    }

    That must be it if I don't say nonsense. (confirmation?)

    However, in the Twig template, we will no longer be able to use {{email.toName}}

    So my question is:
    "How to properly manage the sending of this kind of grouped emails" so that each recipient receives the same email (but being able to include the recipient's name in the content each time as we did for {{email.toName}} ?

  • 2020-04-17 weaverryan

    Hey Benr77!

    I believe this is the related issue - https://github.com/symfony/... - I've just bumped it :).

    Cheers!

  • 2020-04-14 Benr77

    Is there more information on this issue anywhere? Why the double rendering when using Messenger? Thanks

  • 2020-02-19 Lydie

    Hi weaverryan !

    You were completely right. I am indeed sending the emails asynchronously with thee messenger:consume command. After adding the suggested line after the getCssFiles(), the css was inlined again in my mail :)

    thx!

  • 2020-02-19 weaverryan

    Hey Lydie!

    So.... I *am* aware of a potential issue that you could be hitting. You don't have *quite* the setup I would expect for that problem... but it's close enough that I think it's the same.

    First let me ask: it sounds like you are using messenger to send your emails asynchronously, is that correct? You are "routing" the messages to a messenger transport, then the emails are actually sent when you run the messenger:consume command, right?

    The problem (I believe) is that your email is being rendered *twice*. And the second time it's rendered, because Encore thinks the CSS & JS have already been "output", the getCssFiles() method returns an empty array. You could verify that this the cause by adding this line right after the getCssFiles() call:


    $this->container
    ->get(EntrypointLookupInterface::class)
    ->reset()

    If that fixes the problem, then this is the problem :). Let me know if it helps - and then we can debug further. I mean, having the "reset" is a "fine" thing to keep there - it won't hurt anything (it just shouldn't be needed). From my research, there is a problem when Messenger is installed, but emails are still handed *synchronously* - ir I remember correctly, Mailer dispatches an event 2 times in one request... they both render the message... and voila! The second one has no CSS. It's (I believe) actually a subtle bug in Symfony that you only see when using Encore. But, let me know what you find out.

    Cheers!

  • 2020-02-18 Lydie

    Hello!

    After changing to encore_entry_css_source, inline_css does not work anymore. I have checked that the twig extension is successfully called (it found the css files and store them in source variable) but it's not included in the mail anymore. I am developping locally. Stop/start messenger consumer command, removed cache, ... but still not working. Any idea?

    The twig extension:



    namespace App\Twig;

    use Psr\Container\ContainerInterface;
    use Symfony\Contracts\Service\ServiceSubscriberInterface;
    use Symfony\WebpackEncoreBundle\Asset\EntrypointLookupInterface;
    use Twig\Extension\AbstractExtension;
    use Twig\TwigFunction;

    class AppExtension extends AbstractExtension implements ServiceSubscriberInterface {

    private $container;
    private $publicDir;

    public function __construct(ContainerInterface $container, string $publicDir)
    {
    $this->container = $container;
    $this->publicDir = $publicDir;
    }

    public function getFunctions(): array
    {
    return [
    new TwigFunction('encore_entry_css_source', [$this, 'getEncoreEntryCssSource']),
    ];
    }

    public function getEncoreEntryCssSource(string $entryName): string
    {
    $files = $this->container
    ->get(EntrypointLookupInterface::class)
    ->getCssFiles($entryName);

    $source = '';
    foreach ($files as $file) {
    $source .= file_get_contents($this->publicDir.'/'.$file);
    }

    return $source;
    }

    public static function getSubscribedServices()
    {
    return [
    EntrypointLookupInterface::class,
    ];
    }
    }

    Thx!