npm - @maizzle/framework - Versions diffs - 4.0.0-alpha.5 → 4.0.0-alpha.8 - Mend

@maizzle/framework 4.0.0-alpha.5 → 4.0.0-alpha.8

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 (46) hide show

package/.github/workflows/nodejs.yml +1 -1
package/package.json +6 -5
package/src/commands/serve.js +21 -14
package/src/generators/output/to-string.js +1 -1
package/src/generators/postcss.js +29 -0
package/src/generators/posthtml.js +66 -61
package/src/generators/tailwindcss.js +2 -2
package/src/index.js +17 -13
package/src/transformers/index.js +60 -57
package/src/transformers/inlineCss.js +1 -1
package/src/transformers/minify.js +1 -1
package/src/transformers/prettify.js +1 -1
package/src/transformers/removeInlineBackgroundColor.js +1 -1
package/src/transformers/removeInlinedSelectors.js +71 -0
package/src/transformers/removeUnusedCss.js +17 -2
package/src/transformers/sixHex.js +24 -1
package/src/transformers/transform.js +35 -6
package/test/expected/posthtml/component.html +13 -0
package/test/expected/{inheritance.html → posthtml/extend-template.html} +2 -2
package/test/expected/posthtml/fetch.html +5 -0
package/test/expected/posthtml/layout.html +3 -0
package/test/expected/transformers/atimport-in-style.html +14 -0
package/test/expected/transformers/base-image-url.html +83 -83
package/test/expected/transformers/preserve-transform-css.html +27 -0
package/test/fixtures/posthtml/component.html +19 -0
package/test/fixtures/{inheritance.html → posthtml/extend-template.html} +7 -7
package/test/fixtures/posthtml/fetch.html +9 -0
package/test/fixtures/posthtml/layout.html +11 -0
package/test/fixtures/transformers/atimport-in-style.html +11 -0
package/test/fixtures/transformers/base-image-url.html +85 -85
package/test/fixtures/transformers/preserve-transform-css.html +25 -0
package/test/stubs/components/component.html +5 -0
package/test/stubs/data.json +14 -0
package/test/stubs/layouts/basic.html +1 -0
package/test/stubs/{layout.html → layouts/full.html} +0 -0
package/test/stubs/{layout-basic.html → layouts/template.html} +5 -5
package/test/stubs/post.css +6 -0
package/test/stubs/tailwind/{preserve.html → content-source.html} +0 -0
package/test/stubs/tailwind/tailwind.css +3 -0
package/test/stubs/template.html +10 -10
package/test/test-postcss.js +8 -0
package/test/test-posthtml.js +66 -0
package/test/{test-tailwind.js → test-tailwindcss.js} +3 -3
package/test/test-tostring.js +142 -132
package/test/test-transformers.js +479 -343
package/test/expected/transformers/transform-postcss.html +0 -19

package/src/transformers/transform.js CHANGED Viewed

@@ -1,22 +1,51 @@
 const posthtml = require('posthtml')
+const {get, omit, has} = require('lodash')
+const PostCSS = require('../generators/postcss')
 const posthtmlContent = require('posthtml-content')
 const Tailwind = require('../generators/tailwindcss')
-const {get, omit} = require('lodash')
+const safeClassNames = require('posthtml-safe-class-names')
 module.exports = async (html, config = {}, direct = false) => {
   const replacements = direct ? config : get(config, 'transform', {})
   const posthtmlOptions = get(config, 'build.posthtml.options', {})
   /**
-   * Compile CSS in <style postcss> tags with PostCSS and Tailwind CSS
+   * Compile CSS in <style {post|tailwind}css> tags
    */
   const maizzleConfig = omit(config, ['build.tailwind.css', 'css'])
   const tailwindConfig = get(config, 'build.tailwind.config', 'tailwind.config.js')
-  const compileCss = css => Tailwind.compile(css, html, tailwindConfig, maizzleConfig)
+  replacements.postcss = css => PostCSS.process(css, maizzleConfig)
+  replacements.tailwindcss = css => Tailwind.compile(css, html, tailwindConfig, maizzleConfig)
-  replacements.tailwindcss = css => compileCss(css)
-  replacements.postcss = css => compileCss(css)
+  return posthtml([
+    styleDataEmbed(),
+    posthtmlContent(replacements),
+    safeClassNames()
+  ])
+    .process(html, posthtmlOptions)
+    .then(result => result.html)
+}
+/**
+ * Prevent CSS inlining
+ *
+ * Add a `data-embed` attribute to <style> tags that we want to preserve.
+ * Can be used for HTML email client targeting hacks.
+ */
+const styleDataEmbed = () => tree => {
+  const process = node => {
+    if (
+      node.tag === 'style'
+      && node.attrs
+      && (has(node.attrs, 'preserve') || has(node.attrs, 'embed'))) {
+      node.attrs = {...node.attrs, 'data-embed': true}
+      node.attrs.preserve = false
+      node.attrs.embed = false
+    }
+    return node
+  }
-  return posthtml([posthtmlContent(replacements)]).process(html, posthtmlOptions).then(result => result.html)
+  return tree.walk(process)
 }

package/test/expected/posthtml/component.html ADDED Viewed

@@ -0,0 +1,13 @@
+Variable from attribute: Example
+Variable from locals attribute: bar
+  Variable from page: maizzle-ci
+  Variable from attribute: Nested component
+Variable from locals attribute: bar (nested)
+    Variable from page (nested): maizzle-ci

package/test/expected/{inheritance.html → posthtml/extend-template.html} RENAMED Viewed

@@ -1,2 +1,2 @@
-Parent
-    Child in second.html
+Parent
+    Child in second.html

package/test/expected/posthtml/fetch.html ADDED Viewed

@@ -0,0 +1,5 @@
+Leanne Graham
+Ervin Howell
+Clementine Bauch

package/test/expected/posthtml/layout.html ADDED Viewed

@@ -0,0 +1,3 @@
+    Environment: maizzle-ci
+    Front matter variable: Hello

package/test/expected/transformers/atimport-in-style.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <style>div {
+  margin-top: 1px;
+  margin-right: 2px;
+  margin-bottom: 3px;
+  margin-left: 4px;
+}</style>
+  </head>
+  <body>
+    <div>test</div>
+  </body>
+</html>

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

@@ -1,83 +1,83 @@
-<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="600px;height:400px;" />
-      <v:rect fill="false" stroke="false" style="position:absolute;600px;height:400px;">
-      <v:textbox inset="0,0,0,0"><div><![endif]-->
-        <div>test</div>
-      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
-    </div>
-    <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>
-  </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="600px;height:400px;" />
+      <v:rect fill="false" stroke="false" style="position:absolute;600px;height:400px;">
+      <v:textbox inset="0,0,0,0"><div><![endif]-->
+        <div>test</div>
+      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
+    </div>
+    <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>
+  </body>
+</html>

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

@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+  <head>
+    <style data-embed="">.block {
+        display: block !important;
+} .inline {
+        display: inline !important;
+} .table {
+        display: table !important;
+} .contents {
+        display: contents !important;
+} .transform {
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !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/fixtures/posthtml/component.html ADDED Viewed

@@ -0,0 +1,19 @@
+<component
+  src="test/stubs/components/component.html"
+  text="Example"
+  locals='{
+    "foo": "bar"
+  }'
+>
+  Variable from page: [[ page.env ]]
+  <component
+    src="test/stubs/components/component.html"
+    text="Nested component"
+    locals='{
+      "foo": "bar (nested)"
+    }'
+  >
+    Variable from page (nested): [[ page.env ]]
+  </component>
+</component>

package/test/fixtures/{inheritance.html → posthtml/extend-template.html} RENAMED 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 ADDED Viewed

@@ -0,0 +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>

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

@@ -0,0 +1,11 @@
+---
+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/atimport-in-style.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <style postcss>
+      @import "test/stubs/post.css";
+    </style>
+  </head>
+  <body>
+    <div>test</div>
+  </body>
+</html>

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

@@ -1,85 +1,85 @@
-<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="600px;height:400px;" />
-      <v:rect fill="false" stroke="false" style="position:absolute;600px;height:400px;">
-      <v:textbox inset="0,0,0,0"><div><![endif]-->
-        <div>test</div>
-      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
-    </div>
-    <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>
-  </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="600px;height:400px;" />
+      <v:rect fill="false" stroke="false" style="position:absolute;600px;height:400px;">
+      <v:textbox inset="0,0,0,0"><div><![endif]-->
+        <div>test</div>
+      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
+    </div>
+    <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>
+  </body>
+</html>

package/test/fixtures/transformers/preserve-transform-css.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+  <head>
+    <style tailwindcss preserve>
+      div {
+        @apply 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/stubs/components/component.html ADDED Viewed

@@ -0,0 +1,5 @@
+Variable from attribute: [[ text ]]
+Variable from locals attribute: [[ foo ]]
+<content></content>

package/test/stubs/data.json ADDED Viewed

@@ -0,0 +1,14 @@
+[
+  {
+    "id": 1,
+    "name": "Leanne Graham"
+  },
+  {
+    "id": 2,
+    "name": "Ervin Howell"
+  },
+  {
+    "id": 3,
+    "name": "Clementine Bauch"
+  }
+]

package/test/stubs/layouts/basic.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <block name="template"></block>

package/test/stubs/{layout.html → layouts/full.html} RENAMED Viewed

File without changes

package/test/stubs/{layout-basic.html → layouts/template.html} RENAMED Viewed

@@ -1,5 +1,5 @@
----
-template: base
----
-<block name="template"></block>
+---
+template: base
+---
+<block name="template"></block>

package/test/stubs/post.css ADDED Viewed

@@ -0,0 +1,6 @@
+div {
+  margin-top: 1px;
+  margin-right: 2px;
+  margin-bottom: 3px;
+  margin-left: 4px;
+}

package/test/stubs/tailwind/{preserve.html → content-source.html} RENAMED Viewed

File without changes

package/test/stubs/tailwind/tailwind.css ADDED Viewed

@@ -0,0 +1,3 @@
+.example {
+  @apply hidden;
+}

package/test/stubs/template.html CHANGED Viewed

@@ -1,10 +1,10 @@
----
-template: first
----
-<extends src="test/stubs/layout-basic.html">
-  <block name="template">
-    Parent
-    <block name="button">Child in first.html</block>
-  </block>
-</extends>
+---
+template: first
+---
+<extends src="test/stubs/layouts/template.html">
+  <block name="template">
+    Parent
+    <block name="button">Child in first.html</block>
+  </block>
+</extends>