No way to include custom <!--[if mso]> rules?

[dchesbro]

The problem

I'm trying to add Outlook specific markup to my email templates, and so far have been unable to find any way to render MSO rules like <!--[if mso]><![endif]--> in the final HTML output.

Including Outlook rules within brackets (i.e., {'<!--[if mso]><![endif]-->'}) just prints the text of the comment, and trying suggestions online like using dangerouslySetInnerHTML just results in an empty <div></div>.

Is there any currently accessible way to include rules like this in templates?

Why not do this manually?

Results in comment being printed:

{'<!--[if mso]><![endif]-->'}

Results in empty <div></div>:

<div
  dangerouslySetInnerHTML={{
    __html: '<!--[if mso]><![endif]-->',
  }}
></div>

[ronakmehtav]

Do you still need mso tag's ? like for styling reason or the structure is not correct in outlook ?

[derozn]

+1 to this. The structure does not cater for outlook

[DamienDeloubes]

Adding a way to include comments in the final output would be ideal 🙌

[teouxcreative]

This seems like a must have to me.
I'm just getting started with creating email templates but what I've made with React Email completely breaks in Outlook which is disappointing.

It could be due to my lack of experience, and there may be ways to handle it I'm not aware of, but the only thing I can think of right now would be to manually add the code afterwards which doesn't seem like a great workflow.

[mattiaz9]

I managed to do it this way:

import React, { PropsWithChildren } from "react"
import { renderToString } from "react-dom/server"

type TargetProps = PropsWithChildren<{
  logic: string
}>

export function Target({ logic, children }: TargetProps) {
  return (
    <span
      dangerouslySetInnerHTML={{
        __html: `
          <!--[if ${logic}]>
          ${renderToString(children as any)}
          <![endif]-->
        `,
      }}
    />
  )
}

then:

<Target logic="mso">
  <Text>this is outlook</Text>
</Target>

[DamienDeloubes]

I managed to do it this way:

import React, { PropsWithChildren } from "react"
import { renderToString } from "react-dom/server"

type TargetProps = PropsWithChildren<{
  logic: string
}>

export function Target({ logic, children }: TargetProps) {
  return (
    <span
      dangerouslySetInnerHTML={{
        __html: `
          <!--[if ${logic}]>
          ${renderToString(children as any)}
          <![endif]-->
        `,
      }}
    />
  )
}

then:

<Target logic="mso">
  <Text>this is outlook</Text>
</Target>

@mattiaz9 Can you provide it in a CodeSandbox or show the html output? I tried this but the comments are not included in the output HTML.

(Tried it with the render utility and the dev environment)

[scotthebertpt]

If it helps anyone else trying to do this, I managed to accomplish this by simply running an additional post-processing step on the string that react email's render method returns. You should be able to extend this for your use case as needed.

My approach:

I wrote a simple helper function that looks for data attributes and replaces with html comments in the final string output.

function renderComments(htmlString: string): string {
    const updatedHtmlString = htmlString
      .replace(
        /<div\s+data-comment-start="([^"]+)"\s*><\/div>/g,
        '<!--[if $1]><!-- -->',
      )
      .replace(/<div\s+data-comment-end="([^"]+)"\s*><\/div>/g, '<!--<![$1]-->')
      .replace(
        /<div\s+data-comment-mso-start="([^"]+)"\s*><\/div>/g,
        '<!--[if $1]>',
      )
      .replace(
        /<div\s+data-comment-mso-end="([^"]+)"\s*><\/div>/g,
        '<![$1]-->',
      );

    return updatedHtmlString;
  }

combine this with the render call and you're in business.

const initialMarkup = render(<Email />, { pretty: true });
const markup = renderComments(initialMarkup);

for additional convenience I added the following helper component

import React from "react";

interface Props {
  children: React.ReactNode;
  comment: string;
  msoOnly?: boolean;
}

export default function HtmlConditionalComment({
  children,
  comment,
  msoOnly,
}: Props) {
  return msoOnly ? (
    <>
      <div data-comment-mso-start={comment} />
      {children}
      <div data-comment-mso-end="endif" />
    </>
  ) : (
    <>
      <div data-comment-start={comment} />
      {children}
      <div data-comment-end="endif" />
    </>
  );
}

Then in your email template just

<HtmlConditionalComment comment="!mso">
  {/* non mso stuff */}
</HtmlConditionalComment>

<HtmlConditionalComment comment="mso" msoOnly={true}>
{/* mso stuff */}
</HtmlConditionalComment>

Hope that helps

[WillsB3]

Hey @scotthebertpt,

How did you integrate this solution with React.emails email export command? Did you make a custom version of that command and just use that or did you not need to use the export command for your setup?

[RexYao97]

this is a good way

[gabrielmfern]

Would be nice if we had another component to render specifically on outlook.

[ronakmehtav]

Well the new outlook, is much more similiar to it's browser version, and understand css better, and don't require MSO tags as well. So if you are targeting only the latest, then it doesn't need a separate component. Otherwise, how/ where/ who would hold that complexity cause the styling would the be from the user so the api would be complex.

[WillsB3]

I think it's a bit too early to be targeting "latest outlook only"...

[mathsnunes]

hi guys,

Do you have any news on this, or do we think we should implement some of the suggestions above?

[gabrielmfern]

@mathsnunes

Do you have any news on this, or do we think we should implement some of the suggestions above?

Not yet anything new on this. Still something we have in mind though. I'd recommend you go with one of the solutions mentioned.