Thoughts on conditional comments

[cyberwombat]

Im curious if you've given thought on how to handle the very common conditional comments for IE that are found in many email templates? I've been reading about the React/comment issue for a while and have not found anything useful for server side rendering.

[martinbethann]

I'm interested in this as well! The email boilerplate hasn't been updated in a few years and both Campaign Monitor and MailChimp recommend the conditional comments.

https://medium.com/cm-engineering/coding-mobile-first-emails-1513ac4673e#.ht6ccyt84

[heyitstowler]

I've actually been playing around with making a react email templating system myself, and the biggest bottleneck for me so far has been the conditional comments due to React's lack of support for HTML comments.

I haven't touched this in a while (it's a side project that I come back to when the time is there and inspiration strikes me), but I found a way to implement some comments:

Edit: I just realized I should probably be using renderToStaticMarkup instead of renderToString, but that doesn't remove the dependency of having a parent element to dangerously set inner html on

import React, { Children } from 'react'
import { renderToString } from 'react-dom/server'

export default function Comment({component, children, ...rest}) {
  let html = ''
  Children.forEach(children, child => {
    if (typeof child === 'string') {
      html += child
    } else if (typeof child === 'object') {
      html += renderToString(child).replace(/\sdata-reactroot=""/g, '')
    } 
  })
  return React.createElement(component, {
    dangerouslySetInnerHTML: { __html: html },
    ...rest
  })
}

Here's an implementation example from a button component I was working on:

<Comment component="p" className="no-margin">
      {`<!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href=${linkUrl} style="height:40px;v-text-anchor:middle;width:194px;" arcsize="5%" strokecolor="#36CAC2" fillcolor="#04B2A9">
          <w:anchorlock/>
          <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">${text}</center>
        </v:roundrect>
      <![endif]-->`}
      <a href={linkUrl} className="button">{text}</a>
    </Comment>

I still need to abstract out the [if mso] logic/decoration but haven't gotten around to that yet.

This limited by the fact that you need a wrapping HTML element in order for the comment to be applied. Plus, it doesn't handle nesting/composition very well; iirc, the last bump in the road that stopped my progress the last time I was working on this was the fact that abstracting any HTML commenting to a React component caused some problems with the the way the Comment component rendered items, which limited the React-like component uses you would want.

Anyways, tossing this out there in case anyone else has any ideas!