Repository: maizzle/framework
Pull request #349 (2020-11-06 13:56:58)

feat(posthtml): add support for tailwindcss in outlook conditionals
This PR adds support for using Tailwind classes inside `<outlook>` tags. You no longer need to write inline styles there, as long as you have `inlineCSS` enabled in your Maizzle config, it'll just work.

For example this:

```html
<outlook>
  <p class="text-center">Example</p>
</outlook>
```

... will be output like this if you have CSS inlining enabled:

```html
<!--[if mso]>
  <p style="text-align: center">Example</p>
<![endif]-->
```

The way it works is that the `posthtml-mso` plugin now runs after all Transformers, giving the inliner (and other tools) the chance to work with real HTML nodes instead of HTML comments, which is what Outlook conditionals are.


Patch:
diff --git a/src/generators/output/to-string.js b/src/generators/output/to-string.js
index d3cc5d1..523a9a1 100644
--- a/src/generators/output/to-string.js
+++ b/src/generators/output/to-string.js
@@ -4,6 +4,7 @@ const Tailwind = require('../tailwind')
 const posthtml = require('../posthtml')
 const Transformers = require('../../transformers')
 const {getPropValue} = require('../../utils/helpers')
+const posthtmlMso = require('../../transformers/posthtml-mso')
 
 module.exports = async (html, options) => {
   process.env.NODE_ENV = getPropValue(options, 'maizzle.env') || 'local'
@@ -50,6 +51,8 @@ module.exports = async (html, options) => {
     html = await options.afterTransformers(html, config)
   }
 
+  html = await posthtmlMso(html, config)
+
   return {
     html,
     config
diff --git a/src/generators/posthtml.js b/src/generators/posthtml.js
index 7a0ef79..77513b9 100644
--- a/src/generators/posthtml.js
+++ b/src/generators/posthtml.js
@@ -1,7 +1,6 @@
 const fm = require('front-matter')
 const posthtml = require('posthtml')
 const fetch = require('posthtml-fetch')
-const outlook = require('posthtml-mso')
 const layouts = require('posthtml-extend')
 const modules = require('posthtml-modules')
 const {getPropValue} = require('../utils/helpers')
@@ -10,9 +9,6 @@ const expressions = require('posthtml-expressions')
 module.exports = async (html, config) => {
   const layoutsOptions = getPropValue(config, 'build.layouts') || {}
 
-  const outlookOptions = getPropValue(config, 'build.posthtml.outlook') || {}
-  const outlookPlugin = outlook({...outlookOptions})
-
   const fetchOptions = getPropValue(config, 'build.posthtml.fetch') || {}
   const fetchPlugin = fetch({...fetchOptions})
 
@@ -29,7 +25,6 @@ module.exports = async (html, config) => {
 
   return posthtml([
     layouts({strict: false, ...layoutsOptions}),
-    outlookPlugin,
     fetchPlugin,
     modules({
       from: modulesFrom,
@@ -37,7 +32,6 @@ module.exports = async (html, config) => {
       tag: 'component',
       attribute: 'src',
       plugins: [
-        outlookPlugin,
         fetchPlugin
       ],
       ...modulesOptions
diff --git a/src/transformers/posthtml-mso.js b/src/transformers/posthtml-mso.js
new file mode 100644
index 0000000..61dc934
--- /dev/null
+++ b/src/transformers/posthtml-mso.js
@@ -0,0 +1,10 @@
+const posthtml = require('posthtml')
+const outlook = require('posthtml-mso')
+const {getPropValue} = require('../utils/helpers')
+
+module.exports = async (html, config) => {
+  const outlookOptions = getPropValue(config, 'build.posthtml.outlook') || {}
+  const posthtmlOptions = getPropValue(config, 'build.posthtml.options') || {}
+
+  return posthtml([outlook({...outlookOptions})]).process(html, {...posthtmlOptions}).then(result => result.html)
+}


Test patch:
diff --git a/test/expected/inline.html b/test/expected/inline.html
index 7a097a7..83d0724 100644
--- a/test/expected/inline.html
+++ b/test/expected/inline.html
@@ -58,5 +58,6 @@
       </td>
     </tr>
   </table>
+  <!--[if mso]><div class="text-center" style="text-align: center;">foo</div><![endif]-->
 </body>
 </html>
diff --git a/test/fixtures/inline.html b/test/fixtures/inline.html
index 573c017..0b0aed9 100644
--- a/test/fixtures/inline.html
+++ b/test/fixtures/inline.html
@@ -17,5 +17,6 @@
       </td>
     </tr>
   </table>
+  <outlook><div class="text-center">foo</div></outlook>
 </body>
 </html>
diff --git a/test/test-transformers.js b/test/test-transformers.js
index 2ec0c57..a570c27 100644
--- a/test/test-transformers.js
+++ b/test/test-transformers.js
@@ -14,9 +14,13 @@ const maizzleConfig = (options = {}) => {
   return {
     tailwind: {
       config: {
-        target: 'ie11',
         corePlugins: {
-          animation: false
+          animation: false,
+          backgroundOpacity: false,
+          borderOpacity: false,
+          divideOpacity: false,
+          placeholderOpacity: false,
+          textOpacity: false
         }
       }
     },