search

foundation / foundation-emails

Quickly create responsive HTML emails that work on any device and client. Even Outlook.
https://get.foundation/emails/docs/
MIT License
7.77k stars 1.09k forks source link

Errors while npm run build due raw helper #656

Closed marvinhuebner closed 7 years ago

marvinhuebner commented 7 years ago

Currently we are building e-mail templates for magento. Magento will pass customer names etc. with variables in the template. The variables look like this {{var store.getFrontendName()}}. For getting the brackets into the template we need to use the {{{{raw}}}} helper. To get the inline-css we need to run npm run build and get this error.

npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/mjhuebner/.nvm/versions/node/v6.5.0/bin/node" "/Users/mjhuebner/.nvm/versions/node/v6.5.0/bin/npm" "run" "build"
npm ERR! node v6.5.0
npm ERR! npm  v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! foundation-emails-template@1.0.0 build: `gulp --production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the foundation-emails-template@1.0.0 build script 'gulp --production'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the foundation-emails-template package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp --production
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs foundation-emails-template
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls foundation-emails-template
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/mjhuebner/Projekte/WOT-Cotton-E-Mail/npm-debug.log

How can we reproduce this bug?

Add something like this to your Inky template: 

<container>
    <row small="12" large="12">
        <columns>
            <h1 class="text-center">
                {{{{raw}}}}
                Herzlich willkommen bei {{var store.getFrontendName()}}!
                {{{{/raw}}}}
            </h1>

        </columns>
    </row>
</container>

and run npm run build. Then the errors comes.

What did you expect to happen?

Parsing the template to something like:

<h1 class="text-center" style="...">
    Herzlich willkommen bei {{var store.getFrontendName()}}!
</h1>

What happened instead?

Console Error:

> foundation-emails-template@1.0.0 build /Users/mjhuebner/Projekte/WOT-Cotton-E-Mail
> gulp --production

[09:00:50] Requiring external module babel-register
[09:00:51] Using gulpfile ~/Projekte/WOT-Cotton-E-Mail/gulpfile.babel.js
[09:00:51] Starting 'default'...
[09:00:51] Starting 'build'...
[09:00:51] Starting 'clean'...
[09:00:51] Finished 'clean' after 6.1 ms
[09:00:51] Starting 'pages'...
[09:00:52] Finished 'pages' after 569 ms
[09:00:52] Starting 'sass'...
[09:00:52] Finished 'sass' after 139 ms
[09:00:52] Starting 'images'...
[09:00:52] gulp-imagemin: Minified 1 image (saved 5.82 kB - 34.7%)
[09:00:52] Finished 'images' after 231 ms
[09:00:52] Starting 'inline'...
[09:00:53] 'inline' errored after 925 ms
[09:00:53] Error in plugin 'gulp-inline-css'
Message:
    Parse Error: <a href="{{store url=" customer="" account="" "}}"="" style="Margin: 0; border-bottom: 1px solid #000000; color: #000000; font-family: 'Times New Roman', Times, serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">logging into your account</a>.</p>
                                                        <p style="Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: 'Times New Roman', Times, serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">
                                                                If you have any questions, please feel free to contact us at
                                                                <a href="mailto:{{var store_email}}" style="Margin: 0; border-bottom: 1px solid #000000; color: #000000; font-family: 'Times New Roman', Times, serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">{{var store_email}}</a>
                                                                {{depend store_phone}} or by phone at <a href="tel:{{var phone}}" style="Margin: 0; border-bottom: 1px solid #000000; color: #000000; font-family: 'Times New Roman', Times, serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">{{var store_phone}}</a>{{/depend}}.
                                                        </p>
                                                </td>
                                        </tr>

                                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #0a0a0a; font-family: 'Times New Roman', Times, serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                                                        {{block type="germansetup/imprint_content" template="germansetup/imprint/email_footer.phtml"}}
                                                </td>
                                        </tr>

                                </table>
                        </td>
                </tr>
            </table>

            {{template config_path="design/email/footer"}}

          </center>
        </td>
      </tr>
    </table>
    <!-- prevent Gmail on iOS font size manipulation -->
   <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
  </body>
</html>
Details:
    fileName: /Users/mjhuebner/Projekte/WOT-Cotton-E-Mail/dist/bestellung-aktualisierung-gast.html
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false
[09:00:53] 'build' errored after 1.87 s
[09:00:53] 'default' errored after 1.87 s

npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/mjhuebner/.nvm/versions/node/v6.5.0/bin/node" "/Users/mjhuebner/.nvm/versions/node/v6.5.0/bin/npm" "run" "build"
npm ERR! node v6.5.0
npm ERR! npm  v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! foundation-emails-template@1.0.0 build: `gulp --production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the foundation-emails-template@1.0.0 build script 'gulp --production'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the foundation-emails-template package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp --production
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs foundation-emails-template
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls foundation-emails-template
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/mjhuebner/Projekte/WOT-Cotton-E-Mail/npm-debug.log

Thanks in advance, Marvin

marvinhuebner commented 7 years ago

I've found the error myself. It was no error in foundation for emails but rather in gulp-inline-css. gulp-inline-css has issues with parsing this line of code:

<a href="{{{{raw}}}}{{store url="customer/account/"}}{{{{/raw}}}}">Login</a>

If i replace the double quotes with single quotes it will work:

<a href="{{{{raw}}}}{{store url='customer/account/'}}{{{{/raw}}}}">Login</a>

But it would be a cool solution if it could be possible that the content inside the raw helper will not be attached through something else.

GoodNew5 commented 6 years ago

how fix it ?

GoodNew5 commented 6 years ago

if i want render code: {{{{raw}}}} <%=some%> {{{{/raw}}}}

marvinhuebner commented 6 years ago

Without an error messages it's hard to help you.

marvinhuebner commented 6 years ago

I've tested your example and it should work.

bildschirmfoto 2018-03-23 um 15 50 28

GoodNew5 commented 6 years ago

this happens when run build command

GoodNew5 commented 6 years ago
screen shot 2018-03-25 at 01 21 53