npm - @maizzle/framework - Versions diffs - 4.0.0-alpha.9 → 4.0.2 - Mend

@maizzle/framework 4.0.0-alpha.9 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/.editorconfig +9 -9
package/.github/media/logo-dark.svg +1 -0
package/.github/media/logo-light.svg +1 -0
package/.github/workflows/nodejs.yml +28 -28
package/LICENSE +21 -21
package/README.md +42 -35
package/bin/maizzle +3 -3
package/package.json +91 -91
package/src/generators/config.js +32 -32
package/src/generators/output/index.js +4 -4
package/src/generators/output/to-disk.js +208 -208
package/src/generators/output/to-string.js +1 -5
package/src/generators/postcss.js +29 -29
package/src/generators/posthtml.js +66 -66
package/src/index.js +17 -17
package/src/transformers/attributeToStyle.js +90 -90
package/src/transformers/baseUrl.js +69 -69
package/src/transformers/extraAttributes.js +26 -26
package/src/transformers/filters/defaultFilters.js +126 -126
package/src/transformers/filters/index.js +55 -55
package/src/transformers/index.js +63 -60
package/src/transformers/inlineCss.js +37 -50
package/src/transformers/markdown.js +19 -19
package/src/transformers/minify.js +21 -21
package/src/transformers/plaintext.js +23 -23
package/src/transformers/posthtmlMso.js +10 -10
package/src/transformers/prettify.js +9 -11
package/src/transformers/preventWidows.js +13 -13
package/src/transformers/removeAttributes.js +17 -17
package/src/transformers/removeInlineBackgroundColor.js +52 -52
package/src/transformers/removeInlineSizes.js +41 -41
package/src/transformers/replaceStrings.js +14 -14
package/src/transformers/safeClassNames.js +24 -24
package/src/transformers/shorthandInlineCSS.js +19 -0
package/src/transformers/sixHex.js +33 -33
package/src/transformers/urlParameters.js +17 -17
package/src/utils/helpers.js +17 -17
package/test/expected/posthtml/component.html +1 -1
package/test/expected/posthtml/extend-template.html +2 -2
package/test/expected/posthtml/fetch.html +5 -5
package/test/expected/posthtml/layout.html +3 -3
package/test/expected/transformers/atimport-in-style.html +12 -13
package/test/expected/transformers/base-url.html +99 -99
package/test/expected/transformers/preserve-transform-css.html +33 -45
package/test/expected/useConfig.html +6 -6
package/test/fixtures/posthtml/component.html +2 -2
package/test/fixtures/posthtml/extend-template.html +7 -7
package/test/fixtures/posthtml/fetch.html +9 -9
package/test/fixtures/posthtml/layout.html +11 -11
package/test/fixtures/transformers/base-url.html +101 -101
package/test/stubs/assets/foo.bar +1 -1
package/test/stubs/breaking/bad.html +5 -5
package/test/stubs/config/config.js +10 -10
package/test/stubs/config/config.maizzle-ci.js +10 -10
package/test/stubs/data.json +14 -14
package/test/stubs/events/before-create.html +1 -1
package/test/stubs/layouts/basic.html +1 -1
package/test/stubs/layouts/full.html +12 -12
package/test/stubs/layouts/template.html +5 -5
package/test/stubs/main.css +5 -5
package/test/stubs/tailwind/content-source.html +1 -1
package/test/stubs/tailwind/tailwind.css +3 -3
package/test/stubs/template.html +10 -10
package/test/test-config.js +19 -19
package/test/test-postcss.js +8 -8
package/test/test-posthtml.js +17 -11
package/test/test-tailwindcss.js +117 -117
package/test/test-todisk.js +1 -1
package/test/test-transformers.js +511 -490
package/xo.config.js +22 -22

package/test/expected/transformers/base-url.html CHANGED Viewed

@@ -1,99 +1,99 @@
-<html>
-  <head>
-    <style>.test {
-        background-image: url('https://example.com/image.jpg');
-        background: url('https://example.com/image.jpg');
-        background-image: url('https://preserve.me/image.jpg');
-        background: url('https://preserve.me/image.jpg');
-      }
-      .test-2 {
-        background-image: url("https://example.com/image.jpg");
-        background: url("https://example.com/image.jpg");
-        background-image: url("https://preserve.me/image.jpg");
-        background: url("https://preserve.me/image.jpg");
-      }
-      .test-3 {
-        background-image: url(https://example.com/image.jpg);
-        background: url(https://example.com/image.jpg);
-        background-image: url(https://preserve.me/image.jpg);
-        background: url(https://preserve.me/image.jpg);
-      }</style>
-  </head>
-  <body>
-    <img src="https://example.com/test.jpg">
-    <img src="https://example.com/test.jpg">
-    <img src="https://example.com/image1.jpg" srcset="https://example.com/image1-HD.jpg 2x, https://example.com/image1-phone.jpg 100w">
-    <img src="https://example.com/image2.jpg" srcset="https://example.com/image2-HD.jpg 2x, https://example.com/image2-phone.jpg 100w">
-    <picture>
-      <source media="(max-width: 799px)" srcset="https://example.com/elva-480w-close-portrait.jpg">
-      <source media="(min-width: 800px)" srcset="https://example.com/elva-800w.jpg">
-      <img src="https://example.com/elva-800w.jpg" alt="...">
-    </picture>
-    <video width="250" poster="https://example.com/flower.jpg">
-      <source src="https://example.com/media/flower.webm" type="video/webm">
-      <source src="https://example.tv/media/flower.mp4" type="video/mp4">
-      <track default="" kind="captions" srclang="en" src="https://example.com/media/tracks/friday.vtt">
-    </video>
-    <audio src="https://example.com/media/sample.mp3">
-      Fallback content
-    </audio>
-    <embed type="video/webm" src="https://example.com/media/flower.mp4" width="250" height="200">
-    <iframe width="300" height="200" src="https://example.com/embed.html"></iframe>
-    <input type="image" src="https://example.com/image.jpg" alt="">
-    <script src="https://example.com/javascript.js"></script>
-    <div>
-      <!--[if mso]>
-      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image.jpg" style="width:600px;height:400px;" />
-      <v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
-      <v:textbox inset="0,0,0,0"><div><![endif]-->
-        <div>test</div>
-      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
-    </div>
-    <!--[if mso]>
-      <v:image src="https://example.com/image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
-    <![endif]-->
-    <!--[if mso]>
-      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image-3.jpg" style="width:600px;height:400px;" />
-    <![endif]-->
-    <table>
-      <tr>
-        <td background="https://example.com/image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
-          <!--[if gte mso 9]>
-          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
-            <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
-            <v:textbox inset="0,0,0,0">
-          <![endif]-->
-          <div>test</div>
-          <!--[if gte mso 9]>
-            </v:textbox>
-          </v:rect>
-          <![endif]-->
-        </td>
-      </tr>
-    </table>
-    <!--[if mso]>
-      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
-    <![endif]-->
-    <!--[if mso]>
-      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
-    <![endif]-->
-  </body>
-</html>
+<html>
+  <head>
+    <style>.test {
+        background-image: url('https://example.com/image.jpg');
+        background: url('https://example.com/image.jpg');
+        background-image: url('https://preserve.me/image.jpg');
+        background: url('https://preserve.me/image.jpg');
+      }
+      .test-2 {
+        background-image: url("https://example.com/image.jpg");
+        background: url("https://example.com/image.jpg");
+        background-image: url("https://preserve.me/image.jpg");
+        background: url("https://preserve.me/image.jpg");
+      }
+      .test-3 {
+        background-image: url(https://example.com/image.jpg);
+        background: url(https://example.com/image.jpg);
+        background-image: url(https://preserve.me/image.jpg);
+        background: url(https://preserve.me/image.jpg);
+      }</style>
+  </head>
+  <body>
+    <img src="https://example.com/test.jpg">
+    <img src="https://example.com/test.jpg">
+    <img src="https://example.com/image1.jpg" srcset="https://example.com/image1-HD.jpg 2x, https://example.com/image1-phone.jpg 100w">
+    <img src="https://example.com/image2.jpg" srcset="https://example.com/image2-HD.jpg 2x, https://example.com/image2-phone.jpg 100w">
+    <picture>
+      <source media="(max-width: 799px)" srcset="https://example.com/elva-480w-close-portrait.jpg">
+      <source media="(min-width: 800px)" srcset="https://example.com/elva-800w.jpg">
+      <img src="https://example.com/elva-800w.jpg" alt="...">
+    </picture>
+    <video width="250" poster="https://example.com/flower.jpg">
+      <source src="https://example.com/media/flower.webm" type="video/webm">
+      <source src="https://example.tv/media/flower.mp4" type="video/mp4">
+      <track default="" kind="captions" srclang="en" src="https://example.com/media/tracks/friday.vtt">
+    </video>
+    <audio src="https://example.com/media/sample.mp3">
+      Fallback content
+    </audio>
+    <embed type="video/webm" src="https://example.com/media/flower.mp4" width="250" height="200">
+    <iframe width="300" height="200" src="https://example.com/embed.html"></iframe>
+    <input type="image" src="https://example.com/image.jpg" alt="">
+    <script src="https://example.com/javascript.js"></script>
+    <div>
+      <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image.jpg" style="width:600px;height:400px;" />
+      <v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
+      <v:textbox inset="0,0,0,0"><div><![endif]-->
+        <div>test</div>
+      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
+    </div>
+    <!--[if mso]>
+      <v:image src="https://example.com/image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
+    <![endif]-->
+    <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image-3.jpg" style="width:600px;height:400px;" />
+    <![endif]-->
+    <table>
+      <tr>
+        <td background="https://example.com/image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
+          <!--[if gte mso 9]>
+          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
+            <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+            <v:textbox inset="0,0,0,0">
+          <![endif]-->
+          <div>test</div>
+          <!--[if gte mso 9]>
+            </v:textbox>
+          </v:rect>
+          <![endif]-->
+        </td>
+      </tr>
+    </table>
+    <!--[if mso]>
+      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+    <![endif]-->
+    <!--[if mso]>
+      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+    <![endif]-->
+  </body>
+</html>

package/test/expected/transformers/preserve-transform-css.html CHANGED Viewed

@@ -1,48 +1,36 @@
 <!doctype html>
 <html>
-<head>
-  <style data-embed="">
-    .block {
-      display: block !important;
-    }
-    .inline {
-      display: inline !important;
-    }
-    .table {
-      display: table !important;
-    }
-    .contents {
-      display: contents !important;
-    }
-    .truncate {
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      white-space: nowrap !important;
-    }
-    .uppercase {
-      text-transform: uppercase !important;
-    }
-    .lowercase {
-      text-transform: lowercase !important;
-    }
-    .capitalize {
-      text-transform: capitalize !important;
-    }
-    div {
-      text-transform: uppercase;
-    }
-    [data-ogsc] .inexistent {
-      color: #ef4444;
-    }
-    div > u + .body .gmail-android-block {
-      display: block !important;
-    }
-    u + #body a {
-      color: inherit;
-    }
-  </style>
-</head>
-<body>
-  <div>test</div>
-</body>
+  <head>
+    <style data-embed="">.block {
+        display: block !important;
+} .inline {
+        display: inline !important;
+} .table {
+        display: table !important;
+} .contents {
+        display: contents !important;
+} .truncate {
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+} .uppercase {
+        text-transform: uppercase !important;
+} .lowercase {
+        text-transform: lowercase !important;
+} .capitalize {
+        text-transform: capitalize !important;
+} div {
+        text-transform: uppercase;
+} [data-ogsc] .inexistent {
+        color: #ef4444;
+      } div > u + .body .gmail-android-block {
+        display: block !important;
+      } u + #body a {
+        color: inherit;
+      }
+    </style>
+  </head>
+  <body>
+    <div>test</div>
+  </body>
 </html>

package/test/expected/useConfig.html CHANGED Viewed

@@ -1,9 +1,9 @@
 <!doctype html>
 <html>
-<head>
-  <title>test></title>
-</head>
-<body>
-  <div>build_production</div>
-</body>
+  <head>
+    <title>test></title>
+  </head>
+  <body>
+    <div>build_production</div>
+  </body>
 </html>

package/test/fixtures/posthtml/component.html CHANGED Viewed

@@ -5,7 +5,7 @@
     "foo": "bar"
   }'
 >
-  Variable from page: [[ page.env ]]
+Variable from page: [[ page.env ]]
   <component
     src="test/stubs/components/component.html"
@@ -14,6 +14,6 @@
       "foo": "bar (nested)"
     }'
   >
-    Variable from page (nested): [[ page.env ]]
+Variable from page (nested): [[ page.env ]]
   </component>
 </component>

package/test/fixtures/posthtml/extend-template.html CHANGED Viewed

@@ -1,7 +1,7 @@
----
-template: second
----
-<extends src="test/stubs/template.html">
-  <block name="button">Child in second.html</block>
-</extends>
+---
+template: second
+---
+<extends src="test/stubs/template.html">
+  <block name="button">Child in second.html</block>
+</extends>

package/test/fixtures/posthtml/fetch.html CHANGED Viewed

@@ -1,9 +1,9 @@
-<extends src="test/stubs/layouts/basic.html">
-  <block name="template">
-    <fetch url="test/stubs/data.json">
-      <each loop="user in response">
-[[ user.name ]]
-      </each>
-    </fetch>
-  </block>
-</extends>
+<extends src="test/stubs/layouts/basic.html">
+  <block name="template">
+    <fetch url="test/stubs/data.json">
+      <each loop="user in response">
+[[ user.name ]]
+      </each>
+    </fetch>
+  </block>
+</extends>

package/test/fixtures/posthtml/layout.html CHANGED Viewed

@@ -1,11 +1,11 @@
----
-greeting: Hello
----
-<extends src="test/stubs/layouts/basic.html">
-  <block name="template">
-    Environment: {{ page.env }}
-    Front matter variable: {{ page.greeting }}
-  </block>
-</extends>
+---
+greeting: Hello
+---
+<extends src="test/stubs/layouts/basic.html">
+  <block name="template">
+    Environment: {{ page.env }}
+    Front matter variable: {{ page.greeting }}
+  </block>
+</extends>

package/test/fixtures/transformers/base-url.html CHANGED Viewed

@@ -1,101 +1,101 @@
-<html>
-  <head>
-    <style>
-      .test {
-        background-image: url('image.jpg');
-        background: url('image.jpg');
-        background-image: url('https://preserve.me/image.jpg');
-        background: url('https://preserve.me/image.jpg');
-      }
-      .test-2 {
-        background-image: url("image.jpg");
-        background: url("image.jpg");
-        background-image: url("https://preserve.me/image.jpg");
-        background: url("https://preserve.me/image.jpg");
-      }
-      .test-3 {
-        background-image: url(image.jpg);
-        background: url(image.jpg);
-        background-image: url(https://preserve.me/image.jpg);
-        background: url(https://preserve.me/image.jpg);
-      }
-    </style>
-  </head>
-  <body>
-    <img src="test.jpg">
-    <img src="https://example.com/test.jpg">
-    <img src="image1.jpg" srcset="image1-HD.jpg 2x,image1-phone.jpg 100w">
-    <img src="https://example.com/image2.jpg" srcset="https://example.com/image2-HD.jpg 2x, https://example.com/image2-phone.jpg 100w">
-    <picture>
-      <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
-      <source media="(min-width: 800px)" srcset="elva-800w.jpg">
-      <img src="elva-800w.jpg" alt="...">
-    </picture>
-    <video width="250" poster="flower.jpg">
-      <source src="media/flower.webm" type="video/webm">
-      <source src="https://example.tv/media/flower.mp4" type="video/mp4">
-      <track default kind="captions" srclang="en" src="media/tracks/friday.vtt">
-    </video>
-    <audio src="media/sample.mp3">
-      Fallback content
-    </audio>
-    <embed type="video/webm" src="media/flower.mp4" width="250" height="200">
-    <iframe width="300" height="200" src="embed.html"></iframe>
-    <input type="image" src="image.jpg" alt="">
-    <script src="javascript.js"></script>
-    <div>
-      <!--[if mso]>
-      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="image.jpg" style="width:600px;height:400px;" />
-      <v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
-      <v:textbox inset="0,0,0,0"><div><![endif]-->
-        <div>test</div>
-      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
-    </div>
-    <!--[if mso]>
-      <v:image src="image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
-    <![endif]-->
-    <!--[if mso]>
-      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image-3.jpg" style="width:600px;height:400px;" />
-    <![endif]-->
-    <table>
-      <tr>
-        <td background="image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
-          <!--[if gte mso 9]>
-          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
-            <v:fill type="tile" src="image.png" color="#7bceeb" />
-            <v:textbox inset="0,0,0,0">
-          <![endif]-->
-          <div>test</div>
-          <!--[if gte mso 9]>
-            </v:textbox>
-          </v:rect>
-          <![endif]-->
-        </td>
-      </tr>
-    </table>
-    <!--[if mso]>
-      <v:fill type="tile" src="image.png" color="#7bceeb" />
-    <![endif]-->
-    <!--[if mso]>
-      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
-    <![endif]-->
-  </body>
-</html>
+<html>
+  <head>
+    <style>
+      .test {
+        background-image: url('image.jpg');
+        background: url('image.jpg');
+        background-image: url('https://preserve.me/image.jpg');
+        background: url('https://preserve.me/image.jpg');
+      }
+      .test-2 {
+        background-image: url("image.jpg");
+        background: url("image.jpg");
+        background-image: url("https://preserve.me/image.jpg");
+        background: url("https://preserve.me/image.jpg");
+      }
+      .test-3 {
+        background-image: url(image.jpg);
+        background: url(image.jpg);
+        background-image: url(https://preserve.me/image.jpg);
+        background: url(https://preserve.me/image.jpg);
+      }
+    </style>
+  </head>
+  <body>
+    <img src="test.jpg">
+    <img src="https://example.com/test.jpg">
+    <img src="image1.jpg" srcset="image1-HD.jpg 2x,image1-phone.jpg 100w">
+    <img src="https://example.com/image2.jpg" srcset="https://example.com/image2-HD.jpg 2x, https://example.com/image2-phone.jpg 100w">
+    <picture>
+      <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+      <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+      <img src="elva-800w.jpg" alt="...">
+    </picture>
+    <video width="250" poster="flower.jpg">
+      <source src="media/flower.webm" type="video/webm">
+      <source src="https://example.tv/media/flower.mp4" type="video/mp4">
+      <track default kind="captions" srclang="en" src="media/tracks/friday.vtt">
+    </video>
+    <audio src="media/sample.mp3">
+      Fallback content
+    </audio>
+    <embed type="video/webm" src="media/flower.mp4" width="250" height="200">
+    <iframe width="300" height="200" src="embed.html"></iframe>
+    <input type="image" src="image.jpg" alt="">
+    <script src="javascript.js"></script>
+    <div>
+      <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="image.jpg" style="width:600px;height:400px;" />
+      <v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
+      <v:textbox inset="0,0,0,0"><div><![endif]-->
+        <div>test</div>
+      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
+    </div>
+    <!--[if mso]>
+      <v:image src="image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
+    <![endif]-->
+    <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image-3.jpg" style="width:600px;height:400px;" />
+    <![endif]-->
+    <table>
+      <tr>
+        <td background="image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
+          <!--[if gte mso 9]>
+          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
+            <v:fill type="tile" src="image.png" color="#7bceeb" />
+            <v:textbox inset="0,0,0,0">
+          <![endif]-->
+          <div>test</div>
+          <!--[if gte mso 9]>
+            </v:textbox>
+          </v:rect>
+          <![endif]-->
+        </td>
+      </tr>
+    </table>
+    <!--[if mso]>
+      <v:fill type="tile" src="image.png" color="#7bceeb" />
+    <![endif]-->
+    <!--[if mso]>
+      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+    <![endif]-->
+  </body>
+</html>

package/test/stubs/assets/foo.bar CHANGED Viewed

	@@ -1 +1 @@
1	- Some asset file...
1	+ Some asset file...

package/test/stubs/breaking/bad.html CHANGED Viewed

@@ -1,5 +1,5 @@
----
-title: [THIS] should break
----
-<div>{{ page.title }}</div>
+---
+title: [THIS] should break
+---
+<div>{{ page.title }}</div>

package/test/stubs/config/config.js CHANGED Viewed

@@ -1,10 +1,10 @@
-module.exports = {
-  build: {
-    templates: {
-      source: '../templates',
-      destination: {
-        path: 'build_local'
-      }
-    }
-  }
-}
+module.exports = {
+  build: {
+    templates: {
+      source: '../templates',
+      destination: {
+        path: 'build_local'
+      }
+    }
+  }
+}

package/test/stubs/config/config.maizzle-ci.js CHANGED Viewed

@@ -1,10 +1,10 @@
-module.exports = {
-  build: {
-    templates: {
-      source: '../templates',
-      destination: {
-        path: 'build_production'
-      }
-    }
-  }
-}
+module.exports = {
+  build: {
+    templates: {
+      source: '../templates',
+      destination: {
+        path: 'build_production'
+      }
+    }
+  }
+}