React, styled-components -> static email html

Generates static html. Uses styled-components for css.

yarn to install all dependencies

yarn dev to start development in watch mode

yarn build to build the code base and put all generated html email pages in dist/ folder

Example usage

import React from 'react'

import { Title } from '../../components/Title'
import { Text } from '../../components/Text'
import { StyledTable } from './styled'

export const MyExamplePage = () => {
  return <StyledTable>
    <Title>My Title</Title>
    <Text>My Text</Text>
  </StyledTable>
}

<!DOCTYPE html>
<html>
<head>
	<title>My Html page</title>
	<style data-styled="true" data-styled-version="5.3.0">
        .fIhgoC:hover {
            color: green !important;
        }

        @media (max-width: 1200px) {
            .fIhgoC {
                color: pink !important;
                background: blue !important;
            }
        }
	</style>
</head>
<body style="margin:0">
<table style="background: lightcyan; margin: 200px;">
	<tr>
		<td><h1 class="fIhgoC" style="color: red;">My Title</h1>
			<p style="font-style: italic; background: lightcoral;">My Text</p></td>
	</tr>
</table>
</body>
</html>

Emails FAQ

our priority is to support Gmail, Outlook and iOS Mail
we should use inline styles as much as possible, because only they guaranteed to work in all mail clients
pseudo classes and media queries stay inside the embedded <style/> tag, because they cannot be inlined, also !important should be added to any rule in these categories to make their specificity higher than inlined styles
use tables for layouts
we can test emails on litmus, http://testi.at/, or using https://mailchimp.com/help/test-with-inbox-preview/
must be in resulting html document
mailchimp and mail clients can add their own postprocessing

TODOs

figure out how to embed images
unsubscribe link
“Confirm email address” button (will it call some API method or redirect to a page)
pass template params to mailchimp
responsive?
prepare fonts and upload them somewhere