@maizzle/framework 4.0.3 → 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.0.3",
+  "version": "4.1.1",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",

package/src/generators/output/to-disk.js

@@ -96,6 +96,10 @@ module.exports = async (env, spinner, config) => {
           }
 
           await asyncForEach(templates, async file => {
+            config.build.current = {
+              path: path.parse(file)
+            }
+
             const html = await fs.readFile(file, 'utf8')
 
             try {

package/src/transformers/index.js

@@ -26,8 +26,8 @@ exports.process = async (html, config) => {
   html = await attributeToStyle(html, config)
   html = await inline(html, config)
   html = await shorthandInlineCSS(html, config)
-  html = await removeInlinedClasses(html, config)
   html = await removeUnusedCSS(html, config)
+  html = await removeInlinedClasses(html, config)
   html = await removeInlineSizes(html, config)
   html = await removeInlineBgColor(html, config)
   html = await removeAttributes(html, config)

package/src/transformers/removeInlinedSelectors.js

@@ -48,7 +48,7 @@ const plugin = () => tree => {
            * like `margin: 0 0 0 16px` (transformed with mergeLonghand when inlining).
            */
           Object.keys(styleAttr).forEach(key => {
-            if (prop.includes(key)) {
+            if (prop && prop.includes(key)) {
               rule.remove()
               remove(classAttr, s => selector.includes(s))
             }

package/src/transformers/urlParameters.js

@@ -7,10 +7,12 @@ module.exports = async (html, config = {}, direct = false) => {
 
   if (!isEmpty(urlParameters)) {
     const {_options, ...parameters} = urlParameters
-    const {tags, qs} = _options || {tags: ['a'], qs: {encode: false}}
+    const tags = _options.tags ?? ['a']
+    const strict = _options.strict ?? true
+    const qs = _options.qs ?? {encode: false}
     const posthtmlOptions = get(config, 'build.posthtml.options', {})
 
-    return posthtml([urlParams({parameters, tags, qs})]).process(html, posthtmlOptions).then(result => result.html)
+    return posthtml([urlParams({parameters, tags, qs, strict})]).process(html, posthtmlOptions).then(result => result.html)
   }
 
   return html

package/test/test-todisk.js

@@ -509,3 +509,34 @@ test('throws if templates path is invalid (function)', async t => {
     })
   }, {instanceOf: TypeError})
 })
+
+test('sets config.build.current.path', async t => {
+  await Maizzle.build('maizzle-ci', {
+    build: {
+      fail: 'silent',
+      templates: {
+        source: 'test/stubs/templates',
+        destination: {
+          path: t.context.folder
+        }
+      }
+    },
+    events: {
+      beforeRender(html, config) {
+        t.context.current = config.build.current
+
+        return html
+      }
+    }
+  })
+
+  t.deepEqual(t.context.current, {
+    path: {
+      root: '',
+      dir: t.context.folder,
+      base: '1.html',
+      ext: '.html',
+      name: '1'
+    }
+  })
+})

package/test/test-transformers.js

@@ -323,9 +323,21 @@ test('filters (postcss)', async t => {
 })
 
 test('url parameters', async t => {
-  const html = await Maizzle.addURLParams('<a href="https://example.com">test</a>', {bar: 'baz', qix: 'qux'})
+  const html = await Maizzle.addURLParams(
+    `<a href="example.com">test</a>
+      <link href="https://foo.bar">`,
+    {
+      _options: {
+        tags: ['a[href*="example"]'],
+        strict: false
+      },
+      bar: 'baz',
+      qix: 'qux'
+    }
+  )
 
-  t.is(html, '<a href="https://example.com?bar=baz&qix=qux">test</a>')
+  t.is(html, `<a href="example.com?bar=baz&qix=qux">test</a>
+      <link href="https://foo.bar">`)
 })
 
 test('attribute to style', async t => {
@@ -383,7 +395,6 @@ test('remove inlined selectors', async t => {
           border: 0;
           vertical-align: middle
         }
-
         .hover-text-blue:hover {
           color: #00a8ff;
         }
@@ -400,6 +411,15 @@ test('remove inlined selectors', async t => {
 
         #keepId {float:none}
 
+        .foo-class {
+          /* COMMENT */
+          color: red;
+        }
+
+        .ignore {
+          display: inline-block;
+        }
+
         @media (max-width: 600px) {
           .ignore {color: blue}
         }
@@ -409,7 +429,7 @@ test('remove inlined selectors', async t => {
       </style>
     </head>
     <body>
-      <div id="keepId" class="remove keep ignore" style="color: red; display: inline">
+      <div id="keepId" class="remove keep ignore foo-class" style="color: red; display: inline">
         <h1 class="m-0 mb-4 mt-0 hover-text-blue" style="margin: 0 0 16px;">Title</h1>
         <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
         <div id="keepId" class="remove keep ignore" style="color: red; display: inline">text</div>
@@ -429,6 +449,11 @@ test('remove inlined selectors', async t => {
 
         #keepId {float:none}
 
+        .foo-class {
+          /* COMMENT */
+          color: red;
+        }
+
         @media (max-width: 600px) {
           .ignore {color: blue}
         }
@@ -438,10 +463,10 @@ test('remove inlined selectors', async t => {
       </style>
     </head>
     <body>
-      <div id="keepId" class="keep ignore" style="color: red; display: inline">
+      <div id="keepId" class="keep foo-class" style="color: red; display: inline">
         <h1 class="hover-text-blue" style="margin: 0 0 16px">Title</h1>
         <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
-        <div id="keepId" class="keep ignore" style="color: red; display: inline">text</div>
+        <div id="keepId" class="keep" style="color: red; display: inline">text</div>
       </div>
     </body>
   </html>`