fixed margin outlook bug and optmizied output

packages/heml-styles/package.json

@@ -32,6 +32,7 @@
     "postcss-discard-overridden": "^0.1.1",
     "postcss-email-important": "^1.0.0",
     "postcss-hex-format": "^1.0.0",
+    "postcss-merge-longhand": "^3.0.0",
     "postcss-merge-rules": "^2.1.2",
     "postcss-minify-font-values": "^1.0.5",
     "postcss-minify-gradients": "^1.0.5",

packages/heml-styles/src/index.js

@@ -30,12 +30,15 @@ import rgbaFallback from 'postcss-color-rgba-fallback'
 import formatHexColors from 'postcss-hex-format'
 
 /** email fixes */
+import shorthandExpand from './plugins/postcss-expand-shorthand'
 import emailImportant from 'postcss-email-important'
+import zeroOutMargin from './plugins/postcss-zero-out-margin'
 
-/** custom plugins */
-import shorthandExpand from './plugins/postcss-expand-shorthand'
+/** custom element expander */
 import elementExpander from './plugins/postcss-element-expander'
 
+import mergeLonghand from 'postcss-merge-longhand'
+
 async function hemlstyles (contents, options = {}) {
   const {
     elements = {},
@@ -76,10 +79,12 @@ async function hemlstyles (contents, options = {}) {
 
     /** email fixes */
     emailImportant(),
+    shorthandExpand(), // so we can match for margin-top/margin-left etc.
+    zeroOutMargin(),
 
     /** expanding to match heml elements */
-    shorthandExpand(), // so we can match for margin-left/margin-right etc.
     elementExpander({ elements, aliases }),
+    mergeLonghand(),
     discardEmpty()
   ])
   .process(contents, { parser: safeParser })

packages/heml-styles/src/plugins/postcss-zero-out-margin/index.js

@@ -0,0 +1,10 @@
+import postcss from 'postcss'
+
+/**
+ * convert margin-top/margin-bottom to 0 when they are margin auto
+ */
+export default postcss.plugin('postcss-zero-out-margin', () => (root) => {
+  root.walkDecls(/margin-top|margin-bottom/i, (decl) => {
+    decl.value = decl.value.toLowerCase() === 'auto' ? '0' : decl.value
+  })
+})