Preprocess css

packages/heml-elements/package.json

@@ -24,6 +24,7 @@
     "@heml/styles": "^1.1.2",
     "@heml/utils": "^1.1.2",
     "axios": "^0.17.0",
+    "escape-string-regexp": "^1.0.5",
     "image-size": "^0.6.1",
     "is-absolute-url": "^2.1.0",
     "lodash": "^4.17.4"

packages/heml-elements/src/Block.js

@@ -1,5 +1,4 @@
 import HEML, { createElement, transforms, cssGroups, condition } from '@heml/utils' // eslint-disable-line no-unused-vars
-import Style from './Style'
 
 const {
   trueHide,
@@ -31,6 +30,10 @@ export default createElement('block', {
     '.block__cell': [ { '@pseudo': 'cell' }, height, background, box, padding, border, borderRadius, 'vertical-align' ]
   },
 
+  css (Style) {
+    return <Style>{` block { width: 100%; } `}</Style>
+  },
+
   render (attrs, contents) {
     attrs.class += ' block'
     return (
@@ -42,11 +45,6 @@ export default createElement('block', {
           </tr>
         </table>
         {condition('mso | IE', `</td></tr></table>`)}
-        <Style for='block'>{`
-          block {
-            width: 100%;
-          }
-        `}</Style>
       </div>
     )
   }

packages/heml-elements/src/Body.js

@@ -1,5 +1,4 @@
 import HEML, { createElement, transforms, cssGroups } from '@heml/utils' // eslint-disable-line no-unused-vars
-import Style from './Style'
 import Preview from './Preview'
 
 const {
@@ -23,6 +22,19 @@ export default createElement('body', {
     '.preview': [ { 'background-color': transforms.convertProp('color') } ]
   },
 
+  css (Style) {
+    return <Style>{`
+      body {
+        margin: 0;
+        width: 100%;
+        font-family: Helvetica, Arial, sans-serif;
+        font-size: 16px;
+        line-height: 20px;
+        color: black;
+      }
+    `}</Style>
+  },
+
   async render (attrs, contents) {
     attrs.class += ' body'
 
@@ -35,16 +47,6 @@ export default createElement('body', {
           </tr>
         </table>
         <div style='display:none; white-space:nowrap; font-size:15px; line-height:0;'>{'&nbsp; '.repeat(30)}</div>
-        <Style for='body'>{`
-          body {
-            margin: 0;
-            width: 100%;
-            font-family: Helvetica, Arial, sans-serif;
-            font-size: 16px;
-            line-height: 20px;
-            color: black;
-          }
-      `}</Style>
       </body>)
   }
 })

packages/heml-elements/src/Button.js

@@ -1,6 +1,5 @@
 import HEML, { createElement, transforms, cssGroups } from '@heml/utils' // eslint-disable-line no-unused-vars
 import { omit, pick } from 'lodash'
-import Style from './Style'
 
 const {
   background,
@@ -37,6 +36,19 @@ export default createElement('button', {
       { '@pseudo': 'text' }, 'color', 'text-decoration' ]
   },
 
+  css (Style) {
+    return <Style>{`
+      button {
+        margin: auto;
+        border-radius: 3px;
+        padding: 6px 12px;
+        background-color: #2097e4;
+        color: #ffffff;
+        text-decoration: none;
+      }
+    `}</Style>
+  },
+
   render (attrs, contents) {
     attrs.class += ' button'
 
@@ -57,16 +69,6 @@ export default createElement('button', {
             </td>
           </tr>
         </table>
-        <Style for='button'>{`
-          button {
-            margin: auto;
-            border-radius: 3px;
-            padding: 6px 12px;
-            background-color: #2097e4;
-            color: #ffffff;
-            text-decoration: none;
-          }
-        `}</Style>
       </div>)
   }
 })

packages/heml-elements/src/Column.js

@@ -1,5 +1,5 @@
 import HEML, { createElement, transforms, cssGroups } from '@heml/utils' // eslint-disable-line no-unused-vars
-import Style from './Style'
+import { times } from 'lodash'
 
 const {
   background,
@@ -20,6 +20,20 @@ export default createElement('column', {
     '.column': [ { '@pseudo': 'root' }, { display: transforms.trueHide(undefined, true) }, background, box, padding, border, borderRadius, 'vertical-align' ]
   },
 
+  css (Style) {
+    return <Style heml-embed>{`
+       @media only screen and (max-width: ${breakpoint}px) {
+        .column, .column-filler { float: left; box-sizing: border-box; }
+        ${times(12, (i) => `
+        .col-sm-${i+1} {
+          width: ${Math.round((100 * (i+1)) / 12)}% !important;
+          display: block;
+        }
+        `)}
+      }
+    `}</Style>
+  },
+
   render (attrs, contents) {
     const small = parseInt(attrs.small, 10)
     const large = parseInt(attrs.large, 10)
@@ -29,19 +43,9 @@ export default createElement('column', {
     delete attrs.large
     delete attrs.small
 
-    return ([
+    return (
       <td {...attrs} width={largeWidth} style={`width: ${largeWidth};`} align='left' valign='top'>
         {contents.length === 0 ? '&nbsp;' : contents}
-      </td>,
-      small === large ? '' : (<Style for='column' heml-embed>{`
-         @media only screen and (max-width: ${breakpoint}px) {
-          .column, .column-filler { float: left; box-sizing: border-box; }
-          .col-sm-${small} {
-            width: ${Math.round((100 * small) / 12)}% !important;
-            display: block;
-          }
-        }
-      `}</Style>)
-    ])
+      </td>)
   }
 })

packages/heml-elements/src/Container.js

@@ -1,5 +1,4 @@
 import HEML, { createElement, transforms, cssGroups, condition } from '@heml/utils' // eslint-disable-line no-unused-vars
-import Style from './Style'
 
 const {
   trueHide,
@@ -31,6 +30,16 @@ export default createElement('container', {
     '.container__cell': [ { '@pseudo': 'cell' }, height, background, box, padding, border, borderRadius ]
   },
 
+  css (Style) {
+    return <Style>{`
+      container {
+        max-width: 600px;
+        width: 100%;
+        margin: auto;
+      }
+    `}</Style>
+  },
+
   render (attrs, contents) {
     attrs.class += ' container'
     return (
@@ -42,13 +51,6 @@ export default createElement('container', {
           </tr>
         </table>
         {condition('mso | IE', `</td></tr></table>`)}
-        <Style for='container'>{`
-          container {
-            max-width: 600px;
-            width: 100%;
-            margin: auto;
-          }
-        `}</Style>
       </div>
     )
   }

packages/heml-elements/src/Head.js

@@ -1,6 +1,5 @@
 import HEML, { createElement } from '@heml/utils' // eslint-disable-line no-unused-vars
 import Subject from './Subject'
-import Style from './Style'
 
 export default createElement('head', {
   unique: true,
@@ -48,8 +47,6 @@ export default createElement('head', {
       </style>
       <![endif]-->`}
         <title>{Subject.flush()}</title>
-        {await Style.flush()}
-        {`<!-- content -->`}
         {/* drop in the contents */
       contents}
         {/* https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013 */

packages/heml-elements/src/Hr.js

@@ -1,5 +1,4 @@
 import HEML, { createElement, transforms, cssGroups, condition } from '@heml/utils' // eslint-disable-line no-unused-vars
-import Style from './Style'
 
 const {
   trueHide,
@@ -31,6 +30,17 @@ export default createElement('hr', {
     '.hr__cell': [ { '@pseudo': 'cell' }, height, background, box, padding, border, borderRadius, 'vertical-align' ]
   },
 
+  css (Style) {
+    return <Style>{`
+      hr {
+        width: 100%;
+        margin: auto;
+        border-top: 1px solid #9A9A9A;
+      }
+    `}</Style>
+  },
+
+
   render (attrs, contents) {
     attrs.class += ' hr'
     return (
@@ -42,13 +52,6 @@ export default createElement('hr', {
           </tr>
         </table>
         {condition('mso | IE', `</td></tr></table>`)}
-        <Style for='hr'>{`
-          hr {
-            width: 100%;
-            margin: auto;
-            border-top: 1px solid #9A9A9A;
-          }
-        `}</Style>
       </div>
     )
   }

packages/heml-elements/src/Img.js

@@ -1,5 +1,4 @@
 import HEML, { createElement, transforms } from '@heml/utils' // eslint-disable-line no-unused-vars
-import Style from './Style'
 import { omit, has } from 'lodash'
 import fs from 'fs-extra'
 import isAbsoluteUrl from 'is-absolute-url'
@@ -18,6 +17,15 @@ export default createElement('img', {
     'img': [ { '@pseudo': 'root' }, { display: transforms.trueHide() }, '@default' ]
   },
 
+  css (Style) {
+    return <Style>{`
+      .img__block {
+        display: block;
+        max-width: 100%;
+      }
+    `}</Style>
+  },
+
   async render (attrs, contents) {
     const isBlock = !attrs.inline
 
@@ -28,14 +36,7 @@ export default createElement('img', {
     attrs.class += ` ${isBlock ? 'img__block' : 'img__inline'}`
     attrs.style = isBlock ? '' : 'display: inline-block;'
 
-    return ([
-      <img {...omit(attrs, 'inline', 'infer')} />,
-      <Style for='img'>{`
-        .img__block {
-          display: block;
-          max-width: 100%;
-        }
-      `}</Style>])
+    return <img {...omit(attrs, 'inline', 'infer')} />
   }
 })