maizzle / maizzle-php Goto Github PK

The following code:

<a href="{{ $href ?? 'https://www.example.com' }}" class="no-underline">
  <table
    align="{{ $align ?? 'center' }}"
    class="font-light text-{{ isset($inverted) && $inverted ? 'black' : 'white' }} bg-{{ isset($inverted) && $inverted ? 'white' : 'black' }}"
    cellpadding="0"
    cellspacing="0"
    role="presentation"
  >
    <tr>
      <td
        class="uppercase font-light px-26 py-20 font-sans text-{{ isset($inverted) && $inverted ? 'black' : 'white' }} bg-{{ isset($inverted) && $inverted ? 'white' : 'black' }}"
        align="center"
      >
        {!! $text !!}
      </td>
    </tr>
  </table>
</a>

Gives the following output (after running npm run staging, same happens across all enviroments):

<a href="https://www.example.com/" style="text-decoration: none;">
    <table align="left" cellpadding="0" cellspacing="0" role="presentation" style="font-weight: 300; color: #ffffff;" bgcolor="#000000">
        <tr>
            <td align="center" style="font-family: Helvetica Neue, Helvetica, -apple-system, Segoe UI, sans-serif; font-weight: 300; padding-top: 20px; padding-bottom: 20px; padding-left: 26px; padding-right: 26px; color: #ffffff; text-transform: uppercase;" bgcolor="#000000">
             Hello world
            </td>
        </tr>
    </table>

This remains true even if I remove all the attributes from the child elements, as well as remove {!! $text !!}. This doesn't happen in a different partial where it's wrapped around an <img> tag.

There is a visible gap where the closing tag should be, too.

Hello,

I'm using Litmus's tracking pixel and it's appearing in the production email as body text:

The code looks like this: <style data-ignore-inlining>@media print{ #_t { background-image: url('https://rizen49k.emltrk.com/rizen49k?p&d={Email}');}} div.OutlookMessageHeader {background-image:url('https://rizen49k.emltrk.com/rizen49k?f&d={Email}')} table.moz-email-headers-table {background-image:url('https://rizen49k.emltrk.com/rizen49k?f&d={Email}')} blockquote #_t {background-image:url('https://rizen49k.emltrk.com/rizen49k?f&d={Email}')} #MailContainerBody #_t {background-image:url('https://rizen49k.emltrk.com/rizen49k?f&d={Email}')}</style><div id="_t"></div> <img src="https://rizen49k.emltrk.com/rizen49k?d={Email}" width="1" height="1" border="0" alt="" />

Does maizzle-php exposes api functions like Node Maizzle as mentioned in https://maizzle.com/docs/nodejs/.

const Maizzle = require('@maizzle/framework')

const html = Maizzle.render(`html string`, options)

Given this short example <!--[if mso]><center><![endif]--> in the final production output the comment is kept in tact as expected. However, if you change it to a closing tag <!--[if mso]></center><![endif]--> like is required to correctly close the center tag in outlook, the output becomes: <!--[if mso]><![endif]-->.

This same issue affects any closing tag like the examples provided in vmlbg, <!--[if mso]></div></v:rect><![endif]--> so cause rendering issues with the emails in Outlook.

Doing a bit of investigation I tracked it down to processConditionalComments, which is using html-minifier. There was already a couple of issues raised there about this and the author states it only supports valid fragments and it looks like that won't change. My suggestion is that the option should be false by default to stop other people facing this pretty obscure bug.

I'd love to be able to get some kind of output file when I run build commands, maybe something like output.json which just shows the build output in a JSON tree

{
    "folders": {
        "emails": {
            "folders": {
                "folder_1": {
                    "folders": {},
                    "files": [
                        "email_1.html",
                        "email_2.html"
                    ]
                },
                "folder_2": {
                    "folders": {},
                    "files": [
                        "email_1.html",
                        "email_2.html",
                        "email_3.html"
                    ]
                }
            }
        },
        "css": {
            "folders": {},
            "files": [
                "extra.css",
                "main.css"
            ]
        }
    }
}

My particular use case is to take the build output, and attach a frontend on to it so admins can preview / approve emails before they are sent. There may be a way to do this already that I'm missing, but after scouring the docs and config files I couldn't find a solution.

Thanks for your work on this, Maizzle is great 🙌🏻

If you set up the composer.json file sufficiently to add to Packagist, PHP/Composer users will be able to install with a single command, e.g.:

composer create-project ThemeMountain/maizzle ./my-maizzle-app

That will take care of downloading the latest tagged version of the repo and installing Composer dependencies in one step.

You need to have css inline to meet various email clients. Please add an out-of-the-box way for that. Otherwise the email templates are not usable for production.

This would be a really nice feature.

The links around the documentation link to places such as https://maizzle.com/docs/configuration

However these just seem to sit there?

I imagine it is meant to redirect to https://maizzle.com/docs/configuration/ ?

Hi
I cannot install the dependencies with 'npm install':
win10
Composer version 1.10.5
node version14.0.0

get a lot of errors:

12 Warning(s)
233 Error(s)

Time Elapsed 00:00:20.21
gyp ERR! build error
gyp ERR! stack Error: C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Users\jkn\OneDrive\dev\sites\kbhliv-mailmodul\app\public\wp-content\plugins\mailmodul\includes\dev\template\node_modules\node-gyp\lib\build.js:258:23)
gyp ERR! stack at ChildProcess.emit (events.js:315:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
gyp ERR! System Windows_NT 10.0.18363
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\jkn\OneDrive\dev\sites\kbhliv-mailmodul\app\public\wp-content\plugins\mailmodul\includes\dev\template\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\jkn\OneDrive\dev\sites\kbhliv-mailmodul\app\public\wp-content\plugins\mailmodul\includes\dev\template\node_modules\node-sass
gyp ERR! node -v v14.0.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\Users\jkn\OneDrive\dev\sites\kbhliv-mailmodul\app\public\wp-content\plugins\mailmodul\includes\dev\template\node_modules\fsevents\node_modules'
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jkn\AppData\Roaming\npm-cache_logs\2020-04-26T15_16_37_559Z-debug.log