Add new strict mode, update <Spacer /> to use unitless height attribu…

…te when strict mode is off, fixes gakimball#16

docs/setup.md

@@ -71,10 +71,20 @@ const html = Inky.doctype + renderToString(/* Template */);
 
 ## Configuration
 
+### Grid
+
 To change the column count of the grid, add a `columnCount` prop to the `<Container />` of your email. Remember to also change the `$grid-column-count` variable in your Sass.
 
 ```jsx
 <Container columnCount={16}>
   {/* ... */}
 </Container>
 ```
+
+### Strict Mode
+
+react-inky aims to recreate the HTML output of the original Inky library exactly. However, there are some instances where we want to make changes to fix bugs that haven't been fixed in the original Inky. To opt in to these changes, add the prop `strictMode={false}` to your `<Container />`.
+
+These are the differences when strict mode is turned off:
+
+- `<Spacer />`: uses a unitless value for the `height` attribute of the `<td />`. Some versions of Outlook don't display Spacers properly if the `height` has a `px` in it.

src/components/Column.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import containsRow from '../util/containsRow';
 import getAttrs from '../util/getAttrs';
 import getColumnClasses from '../util/getColumnClasses';
-import GridContext from '../util/gridContext';
+import ContainerContext from '../util/containerContext';
 
 /**
  * Grid column. Place sections of email content inside these.
@@ -26,8 +26,8 @@ export default function Column(props) {
   const hasRow = containsRow(props.children);
 
   return (
-    <GridContext.Consumer>
-      {columnCount => (
+    <ContainerContext.Consumer>
+      {({columnCount}) => (
         <th {...getAttrs(props, 'th', getColumnClasses(props, columnCount))}>
           <table>
             <tr>
@@ -37,7 +37,7 @@ export default function Column(props) {
           </table>
         </th>
       )}
-    </GridContext.Consumer>
+    </ContainerContext.Consumer>
   );
 }
 

src/components/Container.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import getAttrs from '../util/getAttrs';
-import GridContext from '../util/gridContext';
+import ContainerContext from '../util/containerContext';
 
 /**
  * Top-level container for an email. Use this as the root of your email template.
@@ -15,26 +15,33 @@ import GridContext from '../util/gridContext';
  * </Container>
  */
 const Container = props => (
-  <GridContext.Provider value={props.columnCount}>
+  <ContainerContext.Provider
+    value={{
+      columnCount: props.columnCount,
+      strictMode: props.strictMode
+    }}
+  >
     <table align="center" {...getAttrs(props, 'table', 'container')}>
       <tbody>
         <tr>
           <td>{props.children}</td>
         </tr>
       </tbody>
     </table>
-  </GridContext.Provider>
+  </ContainerContext.Provider>
 );
 
 /**
  * Prop types for `<Container />`.
  * @type Object
- * @prop [children] Child elements.
- * @prop {Number} [columnCount=12] Global column count.
+ * @prop {*} [children] - Child elements.
+ * @prop {Number} [columnCount=12] - Global column count.
+ * @prop {Boolean} [strictMode] - Match original Inky output exactly.
  */
 Container.propTypes = {
   children: PropTypes.node,
-  columnCount: PropTypes.number
+  columnCount: PropTypes.number,
+  strictMode: PropTypes.bool
 };
 
 /**
@@ -43,7 +50,8 @@ Container.propTypes = {
  */
 Container.defaultProps = {
   children: null,
-  columnCount: 12
+  columnCount: 12,
+  strictMode: true
 };
 
 export default Container;

src/components/Spacer.js

@@ -2,23 +2,28 @@ import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import getAttrs from '../util/getAttrs';
+import ContainerContext from '../util/containerContext';
 
 const createSpacer = (props, size, state = false) => (
-  <table {...getAttrs(props, 'table', classnames('spacer', state && `${state}-for-large`))}>
-    <tbody>
-      <tr>
-        <td
-          height={`${size}px`}
-          style={{
-            fontSize: `${size}px`,
-            lineHeight: `${size}px`
-          }}
-        >
-          &nbsp;
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <ContainerContext.Consumer>
+    {({strictMode}) => (
+      <table {...getAttrs(props, 'table', classnames('spacer', state && `${state}-for-large`))}>
+        <tbody>
+          <tr>
+            <td
+              height={strictMode ? `${size}px` : size}
+              style={{
+                fontSize: `${size}px`,
+                lineHeight: `${size}px`
+              }}
+            >
+              &nbsp;
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    )}
+  </ContainerContext.Consumer>
 );
 
 /**

src/components/__tests__/Spacer.js

@@ -4,6 +4,7 @@ import React from 'react';
 import {renderToStaticMarkup} from 'react-dom/server';
 import {expect} from 'chai';
 import Spacer from '../Spacer';
+import Container from '../Container';
 
 describe('<Spacer />', () => {
   it('creates a spacer element with correct size', () => {
@@ -102,4 +103,27 @@ describe('<Spacer />', () => {
       </table>
     `);
   });
+
+  it('with strict mode off, uses a unitless value for height', () => {
+    const wrapper = renderToStaticMarkup(<Container strictMode={false}><Spacer size={10}/></Container>);
+
+    // Caution: the space inside <td> is a non-breaking space
+    expect(wrapper).html.to.equal(`
+      <table align="center" class="container">
+        <tbody>
+          <tr>
+            <td>
+              <table class="spacer">
+                <tbody>
+                  <tr>
+                    <td height="10" style="font-size:10px;line-height:10px"> </td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `);
+  });
 });

src/util/containerContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default React.createContext({
+  columnCount: 12,
+  strictMode: true
+});