WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.056 --> 00:00:02.826 align:middle CSS in email requires... 00:00:02.826 --> 00:00:04.166 align:middle some special care. 00:00:04.516 --> 00:00:06.676 align:middle But, pffff, we're Symfony developers! 00:00:06.866 --> 00:00:09.366 align:middle Let's recklessly go forward and see what happens! 00:00:09.916 --> 00:00:14.646 align:middle In email/booking_confirmation.html.twig, add a <style> tag in the <head> 00:00:14.976 --> 00:00:21.906 align:middle and add a .text-red class that sets the color to red: Now, add this class to the first <p> tag: 00:00:22.586 --> 00:00:25.356 align:middle In our app, book another trip for our good friend Steve. 00:00:25.776 --> 00:00:27.706 align:middle He's really racking up the parsecs! 00:00:27.986 --> 00:00:31.546 align:middle Do you think he'd be interested in the platinum Universal Travel credit card? 00:00:32.066 --> 00:00:33.866 align:middle In Mailtrap, check the email. 00:00:34.456 --> 00:00:36.756 align:middle Ok, this text is red like we expect... 00:00:37.006 --> 00:00:37.896 align:middle so what's the problem? 00:00:38.416 --> 00:00:40.506 align:middle Check the HTML Source for a hint. 00:00:40.956 --> 00:00:46.166 align:middle Hover over the first error: The style tag is not supported in all email clients. 00:00:46.646 --> 00:00:49.276 align:middle The more important problem is the class attribute: 00:00:49.486 --> 00:00:52.176 align:middle it's also not supported in all email clients. 00:00:52.706 --> 00:00:56.526 align:middle We can travel to space but can't use CSS classes in emails? 00:00:56.926 --> 00:00:58.636 align:middle Yup! It's a strange world. 00:00:59.206 --> 00:00:59.906 align:middle The solution? 00:01:00.156 --> 00:01:03.436 align:middle Pretend like it's 1999 and inline all the styles. 00:01:03.796 --> 00:01:08.856 align:middle That's right, for every tag that has a class, we need to find all the styles applied 00:01:08.856 --> 00:01:12.146 align:middle from the class and add them as a style attribute. 00:01:12.626 --> 00:01:14.506 align:middle Manually, this would suuuuck... 00:01:15.056 --> 00:01:17.086 align:middle Luckily, Symfony Mailer has you covered! 00:01:17.086 --> 00:01:22.746 align:middle At the top of this file, add a Twig apply tag with the inline_css filter. 00:01:22.746 --> 00:01:28.806 align:middle If you're unfamiliar, the apply tag allows you to apply any Twig filter to a block of content. 00:01:29.226 --> 00:01:33.556 align:middle At the end of the file, write endapply: Book another trip for Steve. 00:01:38.456 --> 00:01:39.706 align:middle Oops, an error! 00:01:39.986 --> 00:01:43.606 align:middle The inline_css filter is part of a package we don't have installed 00:01:43.846 --> 00:01:47.546 align:middle but the error message gives us the composer require command to install it! 00:01:47.956 --> 00:01:55.866 align:middle Copy that, jump over to your terminal and paste: composer require twig/cssinliner-extra Back 00:01:55.866 --> 00:01:59.286 align:middle in the app, rebook Steve's trip and check the email in Mailtrap. 00:02:06.186 --> 00:02:09.536 align:middle The HTML looks the same but check the HTML Source. 00:02:09.816 --> 00:02:12.836 align:middle This style attribute was automatically added to the <p> tag! 00:02:12.836 --> 00:02:16.016 align:middle That's amazing and way better than doing it manually. 00:02:16.016 --> 00:02:20.596 align:middle If your app sends multiple emails, you'll want them to have a consistent style 00:02:20.596 --> 00:02:25.396 align:middle from a real CSS file, instead of defining everything in a <style> tag in each template. 00:02:26.026 --> 00:02:30.006 align:middle Unfortunately, it's not as simple as linking to a CSS file in the <head>. 00:02:30.356 --> 00:02:32.676 align:middle That's something else that email clients don't like. 00:02:33.246 --> 00:02:33.936 align:middle No problem! 00:02:34.316 --> 00:02:38.146 align:middle Create a new email.css file in assets/styles/. 00:02:39.866 --> 00:02:44.656 align:middle Copy the CSS from the email template and paste it here: Back in the template, 00:02:44.656 --> 00:02:46.766 align:middle celebrate by removing the <style> tag. 00:02:46.766 --> 00:02:50.996 align:middle So how can we get our email to use the external CSS file? 00:02:51.286 --> 00:02:52.736 align:middle With trickery of course! 00:02:53.426 --> 00:02:57.616 align:middle Open config/packages/twig.yaml and create a paths key. 00:02:59.316 --> 00:03:07.246 align:middle Inside, add %kernel.project_dir%/assets/styles: styles: I know, this looks weird, 00:03:07.496 --> 00:03:09.896 align:middle but it creates a custom Twig namespace. 00:03:10.306 --> 00:03:15.616 align:middle Thanks to this we can now render templates inside this directory with the @styles/ prefix. 00:03:16.076 --> 00:03:17.766 align:middle But wait a minute! 00:03:17.806 --> 00:03:20.646 align:middle email.css file isn't a twig template that we want to render! 00:03:21.136 --> 00:03:24.876 align:middle That's ok, we just need to access it, not parse it as Twig. 00:03:25.506 --> 00:03:30.706 align:middle Back in booking_confirmation.html.twig, for inline_css's argument, 00:03:30.946 --> 00:03:38.976 align:middle use source('@styles/email.css'): The source() function grabs the raw content of a file. 00:03:39.586 --> 00:03:43.416 align:middle Jump to our app, book another trip and check the email in Mailtrap. 00:03:50.426 --> 00:03:51.166 align:middle Looks the same! 00:03:51.496 --> 00:03:52.746 align:middle The text here is red. 00:03:53.286 --> 00:03:57.186 align:middle If we check the HTML Source, the classes are no longer in the <head> 00:03:57.366 --> 00:04:00.486 align:middle but the styles are still inlined: they're being loaded 00:04:00.486 --> 00:04:03.286 align:middle from our external style sheet, it's brilliant! 00:04:04.266 --> 00:04:09.936 align:middle Up next, let's improve the HTML and CSS to make this email worthy of Steve's inbox 00:04:09.936 --> 00:04:11.736 align:middle and the expensive trip he just booked.