├── test-img.jpg
├── test-include.mjml
├── .github
    ├── FUNDING.yml
    └── workflows
    │   └── nodejs.yml
├── .gitignore
├── LICENSE
├── package.json
├── README.md
├── index.js
└── __tests__
    ├── index-test.js
    └── __snapshots__
        └── index-test.js.snap


/test-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nodkz/mjml-with-images-loader/HEAD/test-img.jpg


--------------------------------------------------------------------------------
/test-include.mjml:
--------------------------------------------------------------------------------
1 | <mj-container>
2 |   <mj-section>
3 |     <mj-column>
4 |       <mj-text>INCLUDED MESSAGE</mj-text>
5 |     </mj-column>
6 |   </mj-section>
7 | </mj-container>
8 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: [nodkz]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # graphql-compose
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # nyc test coverage
18 | .nyc_output
19 | 
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 | 
23 | # node-waf configuration
24 | .lock-wscript
25 | 
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 | 
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 | 
33 | # Optional npm cache directory
34 | .npm
35 | 
36 | # Optional REPL history
37 | .node_repl_history
38 | 


--------------------------------------------------------------------------------
/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 3 | 
 4 | name: Node.js CI
 5 | 
 6 | on: [push, pull_request]
 7 | 
 8 | jobs:
 9 |   publish:
10 |     if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/alpha' || github.ref == 'refs/heads/beta'
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - name: Use Node.js 14
15 |         uses: actions/setup-node@v2
16 |         with:
17 |           node-version: 14
18 |       - name: Install node_modules
19 |         run: yarn install
20 |       - name: Build
21 |         run: yarn build
22 |       - name: Semantic Release (publish to npm)
23 |         run: yarn semantic-release
24 |         env:
25 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
26 |           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
27 | 
28 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Ramiro Silveyra d'Avila
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mjml-with-images-loader",
 3 |   "version": "0.0.0-semantically-released",
 4 |   "description": "MJML loader for webpack with images",
 5 |   "main": "index.js",
 6 |   "files": [
 7 |     "index.js"
 8 |   ],
 9 |   "scripts": {
10 |     "build": "echo \"nothing to build, pack as is\"",
11 |     "semantic-release": "semantic-release"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/nodkz/mjml-with-images-loader.git"
16 |   },
17 |   "keywords": [
18 |     "mjml",
19 |     "webpack",
20 |     "images",
21 |     "loader"
22 |   ],
23 |   "author": "Pavel Chertorogov",
24 |   "license": "MIT",
25 |   "bugs": {
26 |     "url": "https://github.com/nodkz/mjml-with-images-loader/issues"
27 |   },
28 |   "homepage": "https://github.com/nodkz/mjml-with-images-loader#readme",
29 |   "dependencies": {
30 |     "base64-image-loader": "^1.0.0",
31 |     "colors": "1.4.0",
32 |     "loader-utils": "^1.1.0"
33 |   },
34 |   "peerDependencies": {
35 |     "mjml": ">=4.1.0"
36 |   },
37 |   "devDependencies": {
38 |     "mjml": "4.9.3",
39 |     "semantic-release": "^17.4.3"
40 |   },
41 |   "jest": {
42 |     "roots": [
43 |       "<rootDir>"
44 |     ]
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # MJML loader for Webpack
  2 | 
  3 | Converts MJML files with images to HTML and exports them as string or as Nodemailer config. Images will be inserted as base64 data.
  4 | 
  5 | Images should have relative paths (starting from `./` or `../`). Such files resolved and inserted as base64 strings (see examples below).
  6 | 
  7 | This package adds dependencies to Webpack for included mjml templates `<mj-include path="./some_other.mjml" />`. So if you change included file, also will be regenerated depended files.
  8 | 
  9 | ## Install
 10 | ```js
 11 | npm install --save-dev mjml-with-images-loader mjml
 12 | ```
 13 | 
 14 | ## Usage
 15 | 
 16 | [Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
 17 | 
 18 | ## Example 1 (for passing to Nodemailer)
 19 | 
 20 | With this configuration:
 21 | ```javascript
 22 | {
 23 |     module: {
 24 |       loaders: [
 25 |         { test: /\.mjml$/, loader: 'mjml-with-images-loader' }
 26 |       ]
 27 |     }
 28 | }
 29 | ```
 30 | `template.mjml`
 31 | ```xml
 32 |  <mjml>
 33 |   <mj-body>
 34 |     <mj-container>
 35 |       <mj-section>
 36 |         <mj-column>
 37 |           <mj-text>Hello World!</mj-text>
 38 |           <mj-image src="./pic.jpg" width="480px" padding-top="20px"></mj-image>
 39 |         </mj-column>
 40 |       </mj-section>
 41 |     </mj-container>
 42 |   </mj-body>
 43 | </mjml>
 44 | ```
 45 | `index.js`
 46 | ```javascript
 47 | const template = require('./template.mjml');
 48 | console.log(template);
 49 | ```
 50 | `console.log` output (compatible with [Nodemailer](https://github.com/nodemailer/nodemailer#e-mail-message-fields) configuration):
 51 | ```
 52 | {
 53 |   html: '<html> ... <img src="cid:1234"></img> ... </html>',
 54 |   attachments: [{
 55 |     filename: '1234.jpg',
 56 |     path: 'data:image/jpg;base64,/9j/4RpdRXhpZgAA ...',
 57 |     cid: '1234',
 58 |   }],
 59 | }
 60 | ```
 61 | 
 62 | ## Example 2 (with `onlyHtml` option, for browser rendering)
 63 | 
 64 | With this configuration:
 65 | ```javascript
 66 | {
 67 |     module: {
 68 |       loaders: [
 69 |         { test: /\.mjml$/, loader: 'mjml-with-images-loader?onlyHtml' }
 70 |       ]
 71 |     }
 72 | }
 73 | ```
 74 | `template.mjml`
 75 | ```xml
 76 |  <mjml>
 77 |   <mj-body>
 78 |     <mj-container>
 79 |       <mj-section>
 80 |         <mj-column>
 81 |           <mj-text>Hello World!</mj-text>
 82 |           <mj-image src="./pic.jpg" width="480px" padding-top="20px"></mj-image>
 83 |         </mj-column>
 84 |       </mj-section>
 85 |     </mj-container>
 86 |   </mj-body>
 87 | </mjml>
 88 | ```
 89 | `index.js`
 90 | ```javascript
 91 | const template = require('./template.mjml');
 92 | console.log(template);
 93 | ```
 94 | `console.log` output (ready to display on web-page via `<iframe srcDoc={template} height="100%" width="100%" />`):
 95 | ```
 96 | '<html> ... <img src="data:image/jpg;base64,/9j/4RpdRXhpZgAA ..."></img> ... </html>'
 97 | ```
 98 | 
 99 | ## License
100 | 
101 | MIT (http://www.opensource.org/licenses/mit-license.php)
102 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | const mjml2html = require('mjml');
  2 | const colors = require('colors');
  3 | const path = require('path');
  4 | const loaderUtils = require('loader-utils');
  5 | const fs = require('fs');
  6 | const crypto = require('crypto');
  7 | 
  8 | function getFileExtension(path) {
  9 |   return path.split('.').pop();
 10 | }
 11 | 
 12 | module.exports = function(content) {
 13 |   this.cacheable && this.cacheable();
 14 |   this.value = content;
 15 |   const config = loaderUtils.getOptions(this) || {
 16 |     onlyHtml: false,
 17 |   };
 18 | 
 19 |   trackMjIncludeChanges.bind(this)(content);
 20 | 
 21 |   let result = {};
 22 |   try {
 23 |     result = mjml2html(content, { level: 'soft', filePath: this.resourcePath });
 24 |   } catch (e) {
 25 |     result.html = displayErrors.bind(this)(e);
 26 |   }
 27 |   if (result.errors && result.errors.length) {
 28 |     result.html = displayErrors.bind(this)(result.errors);
 29 |   }
 30 | 
 31 |   const mod = prepareSrc.bind(this)(result.html || '', config);
 32 | 
 33 |   return `module.exports = ${JSON.stringify(mod)};`;
 34 | };
 35 | 
 36 | function displayErrors(errors) {
 37 |   if (!Array.isArray(errors)) errors = [errors];
 38 |   let htmlErr = [];
 39 |   console.log(colors.red(`[mjml-with-images-loader] ERROR in ${this.resourcePath}:`));
 40 |   htmlErr.push(`File: ${this.resourcePath}`);
 41 |   errors.forEach(e => {
 42 |     const msg = `- ${e.formattedMessage ? e.formattedMessage : e.message}`;
 43 |     htmlErr.push(msg);
 44 |     console.log(msg);
 45 |   });
 46 | 
 47 |   return htmlErr.join('<br />');
 48 | }
 49 | 
 50 | function prepareSrc(html, config) {
 51 |   const images = {};
 52 | 
 53 |   // find relative paths in src=""
 54 |   const re = /(src="((?:\.|\.\.)\/.*?)")/gi;
 55 |   let match;
 56 |   while ((match = re.exec(html))) {
 57 |     const imgPath = path.normalize(`${this.context}/${match[2]}`);
 58 |     const imgExt = getFileExtension(imgPath);
 59 |     this.addDependency(imgPath);
 60 | 
 61 |     let imageBase64;
 62 |     try {
 63 |       imageBase64 = `data:image/${imgExt};base64,${fs.readFileSync(imgPath).toString('base64')}`;
 64 |     } catch (e) {
 65 |       html = displayErrors.bind(this)(e);
 66 |     }
 67 | 
 68 |     if (config.onlyHtml) {
 69 |       html = html.replace(match[1], `src="${imageBase64}"`);
 70 |     } else {
 71 |       const cid = crypto.createHash('md5').update(imageBase64).digest('hex');
 72 |       html = html.replace(match[1], `src="cid:${cid}"`);
 73 |       images[cid] = {
 74 |         filename: `${cid}.${imgExt}`,
 75 |         path: imageBase64,
 76 |         cid: cid,
 77 |       };
 78 |     }
 79 |   }
 80 | 
 81 |   if (config.onlyHtml) {
 82 |     return html;
 83 |   } else {
 84 |     return {
 85 |       html: html,
 86 |       attachments: Object.keys(images).map(k => images[k]),
 87 |     };
 88 |   }
 89 | }
 90 | 
 91 | function trackMjIncludeChanges(html) {
 92 |   // <mj-include path="./src/mailer/_shared/header.mjml" />
 93 |   const re = /(mj-include path="((?:\.|\.\.)\/.*?)")/gi;
 94 |   let match;
 95 |   while ((match = re.exec(html))) {
 96 |     const imgPath = path.normalize(`${this.context}/${match[2]}`);
 97 |     this.addDependency(imgPath);
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/__tests__/index-test.js:
--------------------------------------------------------------------------------
  1 | const origConsole = global.console;
  2 | const mjmlWithImageLoaderFn = require('../index');
  3 | 
  4 | const addDependency = jest.fn();
  5 | const mjmlWithImageLoader = mjmlWithImageLoaderFn.bind({
  6 |   context: __dirname,
  7 |   addDependency,
  8 |   resourcePath: __filename,
  9 | });
 10 | 
 11 | const mjmlWithImageLoaderOnlyHtml = mjmlWithImageLoaderFn.bind({
 12 |   context: __dirname,
 13 |   addDependency,
 14 |   resourcePath: __filename,
 15 |   query: '?onlyHtml',
 16 | });
 17 | 
 18 | describe('mjmlWithImageLoader', () => {
 19 |   it('should convert simple template', () => {
 20 |     expect(
 21 |       mjmlWithImageLoader(`<mjml>
 22 |   <mj-body>
 23 |     <mj-section>
 24 |       <mj-column>
 25 |         <mj-text>Hello World</mj-text>
 26 |       </mj-column>
 27 |     </mj-section>
 28 |   </mj-body>
 29 | </mjml>`)
 30 |     ).toMatchSnapshot();
 31 |   });
 32 | 
 33 |   it('should convert template with image as attachments', () => {
 34 |     addDependency.mockClear();
 35 |     expect(
 36 |       mjmlWithImageLoader(`<mjml>
 37 |   <mj-body>
 38 |     <mj-section>
 39 |       <mj-column>
 40 |         <mj-text>Hello World</mj-text>
 41 |         <mj-image width="100px" src="../test-img.jpg"></mj-image>
 42 |       </mj-column>
 43 |     </mj-section>
 44 |   </mj-body>
 45 | </mjml>`)
 46 |     ).toMatchSnapshot();
 47 |     expect(addDependency).toHaveBeenCalled();
 48 |     expect(addDependency.mock.calls).toMatchSnapshot();
 49 |   });
 50 | 
 51 |   it('should convert template with image inline as data:image/*;base64', () => {
 52 |     addDependency.mockClear();
 53 |     expect(
 54 |       mjmlWithImageLoaderOnlyHtml(`<mjml>
 55 |   <mj-body>
 56 |     <mj-section>
 57 |       <mj-column>
 58 |         <mj-text>Hello World</mj-text>
 59 |         <mj-image width="100px" src="../test-img.jpg"></mj-image>
 60 |       </mj-column>
 61 |     </mj-section>
 62 |   </mj-body>
 63 | </mjml>`)
 64 |     ).toMatchSnapshot();
 65 |     expect(addDependency).toHaveBeenCalled();
 66 |     expect(addDependency.mock.calls).toMatchSnapshot();
 67 |   });
 68 | 
 69 |   it('should addDependency for mj-include to webpack', () => {
 70 |     addDependency.mockClear();
 71 |     expect(
 72 |       mjmlWithImageLoaderOnlyHtml(`<mjml>
 73 |   <mj-body>
 74 |     <mj-include path="./test-include.mjml"/>
 75 |   </mj-body>
 76 | </mjml>`)
 77 |     ).toMatchSnapshot();
 78 |     expect(addDependency).toHaveBeenCalled();
 79 |     expect(addDependency.mock.calls).toMatchSnapshot();
 80 |   });
 81 | 
 82 |   describe('errors', () => {
 83 |     beforeEach(() => {
 84 |       global.console = {
 85 |         log: jest.fn(),
 86 |         dir: origConsole.dir,
 87 |       };
 88 |     });
 89 | 
 90 |     afterEach(() => {
 91 |       global.console = origConsole;
 92 |     });
 93 | 
 94 |     it('should pass parse error to html', () => {
 95 |       expect(
 96 |         mjmlWithImageLoader(`<mjml>
 97 |           <mj-body>
 98 |             <mj-123></mj-123>
 99 |           </mj-body>
100 |         </mjml>
101 |         `)
102 |       ).toMatchSnapshot();
103 |       expect(console.log.mock.calls).toMatchSnapshot();
104 |     });
105 | 
106 |     it('should pass template errors to html', () => {
107 |       expect(
108 |         mjmlWithImageLoader(`<mjml>
109 |           <mj-body>
110 |             <mj-text222>Hello World</mj-text222>
111 |           </mj-body>
112 |         </mjml>`)
113 |       ).toMatchSnapshot();
114 |       expect(console.log.mock.calls).toMatchSnapshot();
115 |     });
116 |   });
117 | });
118 | 


--------------------------------------------------------------------------------
/__tests__/__snapshots__/index-test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`mjmlWithImageLoader errors should pass parse error to html 1`] = `"module.exports = {\\"html\\":\\"File: /Users/nod/www/_npm/mjml-with-images-loader/__tests__/index-test.js<br />- Line 3 of /Users/nod/www/_npm/mjml-with-images-loader (mj-123) — Element mj-123 doesn't exist or is not registered\\",\\"attachments\\":[]};"`;
 4 | 
 5 | exports[`mjmlWithImageLoader errors should pass parse error to html 2`] = `
 6 | Array [
 7 |   Array [
 8 |     "[mjml-with-images-loader] ERROR in /Users/nod/www/_npm/mjml-with-images-loader/__tests__/index-test.js:",
 9 |   ],
10 |   Array [
11 |     "- Line 3 of /Users/nod/www/_npm/mjml-with-images-loader (mj-123) — Element mj-123 doesn't exist or is not registered",
12 |   ],
13 | ]
14 | `;
15 | 
16 | exports[`mjmlWithImageLoader errors should pass template errors to html 1`] = `"module.exports = {\\"html\\":\\"File: /Users/nod/www/_npm/mjml-with-images-loader/__tests__/index-test.js<br />- Line 3 of /Users/nod/www/_npm/mjml-with-images-loader (mj-text222) — Element mj-text222 doesn't exist or is not registered\\",\\"attachments\\":[]};"`;
17 | 
18 | exports[`mjmlWithImageLoader errors should pass template errors to html 2`] = `
19 | Array [
20 |   Array [
21 |     "[mjml-with-images-loader] ERROR in /Users/nod/www/_npm/mjml-with-images-loader/__tests__/index-test.js:",
22 |   ],
23 |   Array [
24 |     "- Line 3 of /Users/nod/www/_npm/mjml-with-images-loader (mj-text222) — Element mj-text222 doesn't exist or is not registered",
25 |   ],
26 | ]
27 | `;
28 | 
29 | exports[`mjmlWithImageLoader should addDependency for mj-include to webpack 1`] = `"module.exports = \\"\\\\n    <!doctype html>\\\\n    <html xmlns=\\\\\\"http://www.w3.org/1999/xhtml\\\\\\" xmlns:v=\\\\\\"urn:schemas-microsoft-com:vml\\\\\\" xmlns:o=\\\\\\"urn:schemas-microsoft-com:office:office\\\\\\">\\\\n      <head>\\\\n        <title>\\\\n          \\\\n        </title>\\\\n        <!--[if !mso]><!-- -->\\\\n        <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"IE=edge\\\\\\">\\\\n        <!--<![endif]-->\\\\n        <meta http-equiv=\\\\\\"Content-Type\\\\\\" content=\\\\\\"text/html; charset=UTF-8\\\\\\">\\\\n        <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1\\\\\\">\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          #outlook a { padding:0; }\\\\n          .ReadMsgBody { width:100%; }\\\\n          .ExternalClass { width:100%; }\\\\n          .ExternalClass * { line-height:100%; }\\\\n          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\\\\n          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\\\\n          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\\\\n          p { display:block;margin:13px 0; }\\\\n        </style>\\\\n        <!--[if !mso]><!-->\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          @media only screen and (max-width:480px) {\\\\n            @-ms-viewport { width:320px; }\\\\n            @viewport { width:320px; }\\\\n          }\\\\n        </style>\\\\n        <!--<![endif]-->\\\\n        <!--[if mso]>\\\\n        <xml>\\\\n        <o:OfficeDocumentSettings>\\\\n          <o:AllowPNG/>\\\\n          <o:PixelsPerInch>96</o:PixelsPerInch>\\\\n        </o:OfficeDocumentSettings>\\\\n        </xml>\\\\n        <![endif]-->\\\\n        <!--[if lte mso 11]>\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          .outlook-group-fix { width:100% !important; }\\\\n        </style>\\\\n        <![endif]-->\\\\n        \\\\n      <!--[if !mso]><!-->\\\\n        <link href=\\\\\\"https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700\\\\\\" rel=\\\\\\"stylesheet\\\\\\" type=\\\\\\"text/css\\\\\\">\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);\\\\n        </style>\\\\n      <!--<![endif]-->\\\\n\\\\n    \\\\n        \\\\n    <style type=\\\\\\"text/css\\\\\\">\\\\n      @media only screen and (min-width:480px) {\\\\n        .mj-column-per-100 { width:100% !important; max-width: 100%; }\\\\n      }\\\\n    </style>\\\\n    \\\\n  \\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n        \\\\n        \\\\n        </style>\\\\n        \\\\n        \\\\n      </head>\\\\n      <body>\\\\n        \\\\n        \\\\n      <div\\\\n         style=\\\\\\"\\\\\\"\\\\n      >\\\\n        \\\\n      \\\\n      <!--[if mso | IE]>\\\\n      <table\\\\n         align=\\\\\\"center\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" class=\\\\\\"\\\\\\" style=\\\\\\"width:600px;\\\\\\" width=\\\\\\"600\\\\\\"\\\\n      >\\\\n        <tr>\\\\n          <td style=\\\\\\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\\\\\\">\\\\n      <![endif]-->\\\\n    \\\\n      \\\\n      <div  style=\\\\\\"Margin:0px auto;max-width:600px;\\\\\\">\\\\n        \\\\n        <table\\\\n           align=\\\\\\"center\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" role=\\\\\\"presentation\\\\\\" style=\\\\\\"width:100%;\\\\\\"\\\\n        >\\\\n          <tbody>\\\\n            <tr>\\\\n              <td\\\\n                 style=\\\\\\"direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;\\\\\\"\\\\n              >\\\\n                <!--[if mso | IE]>\\\\n                  <table role=\\\\\\"presentation\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\">\\\\n                \\\\n        <tr>\\\\n      \\\\n            <td\\\\n               class=\\\\\\"\\\\\\" style=\\\\\\"vertical-align:top;width:600px;\\\\\\"\\\\n            >\\\\n          <![endif]-->\\\\n            \\\\n      <div\\\\n         class=\\\\\\"mj-column-per-100 outlook-group-fix\\\\\\" style=\\\\\\"font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;\\\\\\"\\\\n      >\\\\n        \\\\n      <table\\\\n         border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" role=\\\\\\"presentation\\\\\\" style=\\\\\\"vertical-align:top;\\\\\\" width=\\\\\\"100%\\\\\\"\\\\n      >\\\\n        \\\\n            <tr>\\\\n              <td\\\\n                 align=\\\\\\"left\\\\\\" style=\\\\\\"font-size:0px;padding:10px 25px;word-break:break-word;\\\\\\"\\\\n              >\\\\n                \\\\n      <div\\\\n         style=\\\\\\"font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;\\\\\\"\\\\n      >\\\\n        INCLUDED MESSAGE\\\\n      </div>\\\\n    \\\\n              </td>\\\\n            </tr>\\\\n          \\\\n      </table>\\\\n    \\\\n      </div>\\\\n    \\\\n          <!--[if mso | IE]>\\\\n            </td>\\\\n          \\\\n        </tr>\\\\n      \\\\n                  </table>\\\\n                <![endif]-->\\\\n              </td>\\\\n            </tr>\\\\n          </tbody>\\\\n        </table>\\\\n        \\\\n      </div>\\\\n    \\\\n      \\\\n      <!--[if mso | IE]>\\\\n          </td>\\\\n        </tr>\\\\n      </table>\\\\n      <![endif]-->\\\\n    \\\\n    \\\\n      </div>\\\\n    \\\\n      </body>\\\\n    </html>\\\\n  \\";"`;
30 | 
31 | exports[`mjmlWithImageLoader should addDependency for mj-include to webpack 2`] = `
32 | Array [
33 |   Array [
34 |     "/Users/nod/www/_npm/mjml-with-images-loader/test-include.mjml",
35 |   ],
36 | ]
37 | `;
38 | 
39 | exports[`mjmlWithImageLoader should convert simple template 1`] = `"module.exports = {\\"html\\":\\"\\\\n    <!doctype html>\\\\n    <html xmlns=\\\\\\"http://www.w3.org/1999/xhtml\\\\\\" xmlns:v=\\\\\\"urn:schemas-microsoft-com:vml\\\\\\" xmlns:o=\\\\\\"urn:schemas-microsoft-com:office:office\\\\\\">\\\\n      <head>\\\\n        <title>\\\\n          \\\\n        </title>\\\\n        <!--[if !mso]><!-- -->\\\\n        <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"IE=edge\\\\\\">\\\\n        <!--<![endif]-->\\\\n        <meta http-equiv=\\\\\\"Content-Type\\\\\\" content=\\\\\\"text/html; charset=UTF-8\\\\\\">\\\\n        <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1\\\\\\">\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          #outlook a { padding:0; }\\\\n          .ReadMsgBody { width:100%; }\\\\n          .ExternalClass { width:100%; }\\\\n          .ExternalClass * { line-height:100%; }\\\\n          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\\\\n          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\\\\n          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\\\\n          p { display:block;margin:13px 0; }\\\\n        </style>\\\\n        <!--[if !mso]><!-->\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          @media only screen and (max-width:480px) {\\\\n            @-ms-viewport { width:320px; }\\\\n            @viewport { width:320px; }\\\\n          }\\\\n        </style>\\\\n        <!--<![endif]-->\\\\n        <!--[if mso]>\\\\n        <xml>\\\\n        <o:OfficeDocumentSettings>\\\\n          <o:AllowPNG/>\\\\n          <o:PixelsPerInch>96</o:PixelsPerInch>\\\\n        </o:OfficeDocumentSettings>\\\\n        </xml>\\\\n        <![endif]-->\\\\n        <!--[if lte mso 11]>\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          .outlook-group-fix { width:100% !important; }\\\\n        </style>\\\\n        <![endif]-->\\\\n        \\\\n      <!--[if !mso]><!-->\\\\n        <link href=\\\\\\"https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700\\\\\\" rel=\\\\\\"stylesheet\\\\\\" type=\\\\\\"text/css\\\\\\">\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);\\\\n        </style>\\\\n      <!--<![endif]-->\\\\n\\\\n    \\\\n        \\\\n    <style type=\\\\\\"text/css\\\\\\">\\\\n      @media only screen and (min-width:480px) {\\\\n        .mj-column-per-100 { width:100% !important; max-width: 100%; }\\\\n      }\\\\n    </style>\\\\n    \\\\n  \\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n        \\\\n        \\\\n        </style>\\\\n        \\\\n        \\\\n      </head>\\\\n      <body>\\\\n        \\\\n        \\\\n      <div\\\\n         style=\\\\\\"\\\\\\"\\\\n      >\\\\n        \\\\n      \\\\n      <!--[if mso | IE]>\\\\n      <table\\\\n         align=\\\\\\"center\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" class=\\\\\\"\\\\\\" style=\\\\\\"width:600px;\\\\\\" width=\\\\\\"600\\\\\\"\\\\n      >\\\\n        <tr>\\\\n          <td style=\\\\\\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\\\\\\">\\\\n      <![endif]-->\\\\n    \\\\n      \\\\n      <div  style=\\\\\\"Margin:0px auto;max-width:600px;\\\\\\">\\\\n        \\\\n        <table\\\\n           align=\\\\\\"center\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" role=\\\\\\"presentation\\\\\\" style=\\\\\\"width:100%;\\\\\\"\\\\n        >\\\\n          <tbody>\\\\n            <tr>\\\\n              <td\\\\n                 style=\\\\\\"direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;\\\\\\"\\\\n              >\\\\n                <!--[if mso | IE]>\\\\n                  <table role=\\\\\\"presentation\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\">\\\\n                \\\\n        <tr>\\\\n      \\\\n            <td\\\\n               class=\\\\\\"\\\\\\" style=\\\\\\"vertical-align:top;width:600px;\\\\\\"\\\\n            >\\\\n          <![endif]-->\\\\n            \\\\n      <div\\\\n         class=\\\\\\"mj-column-per-100 outlook-group-fix\\\\\\" style=\\\\\\"font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;\\\\\\"\\\\n      >\\\\n        \\\\n      <table\\\\n         border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" role=\\\\\\"presentation\\\\\\" style=\\\\\\"vertical-align:top;\\\\\\" width=\\\\\\"100%\\\\\\"\\\\n      >\\\\n        \\\\n            <tr>\\\\n              <td\\\\n                 align=\\\\\\"left\\\\\\" style=\\\\\\"font-size:0px;padding:10px 25px;word-break:break-word;\\\\\\"\\\\n              >\\\\n                \\\\n      <div\\\\n         style=\\\\\\"font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;\\\\\\"\\\\n      >\\\\n        Hello World\\\\n      </div>\\\\n    \\\\n              </td>\\\\n            </tr>\\\\n          \\\\n      </table>\\\\n    \\\\n      </div>\\\\n    \\\\n          <!--[if mso | IE]>\\\\n            </td>\\\\n          \\\\n        </tr>\\\\n      \\\\n                  </table>\\\\n                <![endif]-->\\\\n              </td>\\\\n            </tr>\\\\n          </tbody>\\\\n        </table>\\\\n        \\\\n      </div>\\\\n    \\\\n      \\\\n      <!--[if mso | IE]>\\\\n          </td>\\\\n        </tr>\\\\n      </table>\\\\n      <![endif]-->\\\\n    \\\\n    \\\\n      </div>\\\\n    \\\\n      </body>\\\\n    </html>\\\\n  \\",\\"attachments\\":[]};"`;
40 | 
41 | exports[`mjmlWithImageLoader should convert template with image as attachments 1`] = `"module.exports = {\\"html\\":\\"\\\\n    <!doctype html>\\\\n    <html xmlns=\\\\\\"http://www.w3.org/1999/xhtml\\\\\\" xmlns:v=\\\\\\"urn:schemas-microsoft-com:vml\\\\\\" xmlns:o=\\\\\\"urn:schemas-microsoft-com:office:office\\\\\\">\\\\n      <head>\\\\n        <title>\\\\n          \\\\n        </title>\\\\n        <!--[if !mso]><!-- -->\\\\n        <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"IE=edge\\\\\\">\\\\n        <!--<![endif]-->\\\\n        <meta http-equiv=\\\\\\"Content-Type\\\\\\" content=\\\\\\"text/html; charset=UTF-8\\\\\\">\\\\n        <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1\\\\\\">\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          #outlook a { padding:0; }\\\\n          .ReadMsgBody { width:100%; }\\\\n          .ExternalClass { width:100%; }\\\\n          .ExternalClass * { line-height:100%; }\\\\n          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\\\\n          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\\\\n          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\\\\n          p { display:block;margin:13px 0; }\\\\n        </style>\\\\n        <!--[if !mso]><!-->\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          @media only screen and (max-width:480px) {\\\\n            @-ms-viewport { width:320px; }\\\\n            @viewport { width:320px; }\\\\n          }\\\\n        </style>\\\\n        <!--<![endif]-->\\\\n        <!--[if mso]>\\\\n        <xml>\\\\n        <o:OfficeDocumentSettings>\\\\n          <o:AllowPNG/>\\\\n          <o:PixelsPerInch>96</o:PixelsPerInch>\\\\n        </o:OfficeDocumentSettings>\\\\n        </xml>\\\\n        <![endif]-->\\\\n        <!--[if lte mso 11]>\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          .outlook-group-fix { width:100% !important; }\\\\n        </style>\\\\n        <![endif]-->\\\\n        \\\\n      <!--[if !mso]><!-->\\\\n        <link href=\\\\\\"https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700\\\\\\" rel=\\\\\\"stylesheet\\\\\\" type=\\\\\\"text/css\\\\\\">\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);\\\\n        </style>\\\\n      <!--<![endif]-->\\\\n\\\\n    \\\\n        \\\\n    <style type=\\\\\\"text/css\\\\\\">\\\\n      @media only screen and (min-width:480px) {\\\\n        .mj-column-per-100 { width:100% !important; max-width: 100%; }\\\\n      }\\\\n    </style>\\\\n    \\\\n  \\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n        \\\\n        \\\\n\\\\n    @media only screen and (max-width:480px) {\\\\n      table.full-width-mobile { width: 100% !important; }\\\\n      td.full-width-mobile { width: auto !important; }\\\\n    }\\\\n  \\\\n        </style>\\\\n        \\\\n        \\\\n      </head>\\\\n      <body>\\\\n        \\\\n        \\\\n      <div\\\\n         style=\\\\\\"\\\\\\"\\\\n      >\\\\n        \\\\n      \\\\n      <!--[if mso | IE]>\\\\n      <table\\\\n         align=\\\\\\"center\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" class=\\\\\\"\\\\\\" style=\\\\\\"width:600px;\\\\\\" width=\\\\\\"600\\\\\\"\\\\n      >\\\\n        <tr>\\\\n          <td style=\\\\\\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\\\\\\">\\\\n      <![endif]-->\\\\n    \\\\n      \\\\n      <div  style=\\\\\\"Margin:0px auto;max-width:600px;\\\\\\">\\\\n        \\\\n        <table\\\\n           align=\\\\\\"center\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" role=\\\\\\"presentation\\\\\\" style=\\\\\\"width:100%;\\\\\\"\\\\n        >\\\\n          <tbody>\\\\n            <tr>\\\\n              <td\\\\n                 style=\\\\\\"direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;\\\\\\"\\\\n              >\\\\n                <!--[if mso | IE]>\\\\n                  <table role=\\\\\\"presentation\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\">\\\\n                \\\\n        <tr>\\\\n      \\\\n            <td\\\\n               class=\\\\\\"\\\\\\" style=\\\\\\"vertical-align:top;width:600px;\\\\\\"\\\\n            >\\\\n          <![endif]-->\\\\n            \\\\n      <div\\\\n         class=\\\\\\"mj-column-per-100 outlook-group-fix\\\\\\" style=\\\\\\"font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;\\\\\\"\\\\n      >\\\\n        \\\\n      <table\\\\n         border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" role=\\\\\\"presentation\\\\\\" style=\\\\\\"vertical-align:top;\\\\\\" width=\\\\\\"100%\\\\\\"\\\\n      >\\\\n        \\\\n            <tr>\\\\n              <td\\\\n                 align=\\\\\\"left\\\\\\" style=\\\\\\"font-size:0px;padding:10px 25px;word-break:break-word;\\\\\\"\\\\n              >\\\\n                \\\\n      <div\\\\n         style=\\\\\\"font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;\\\\\\"\\\\n      >\\\\n        Hello World\\\\n      </div>\\\\n    \\\\n              </td>\\\\n            </tr>\\\\n          \\\\n            <tr>\\\\n              <td\\\\n                 align=\\\\\\"center\\\\\\" style=\\\\\\"font-size:0px;padding:10px 25px;word-break:break-word;\\\\\\"\\\\n              >\\\\n                \\\\n      <table\\\\n         border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" role=\\\\\\"presentation\\\\\\" style=\\\\\\"border-collapse:collapse;border-spacing:0px;\\\\\\"\\\\n      >\\\\n        <tbody>\\\\n          <tr>\\\\n            <td  style=\\\\\\"width:100px;\\\\\\">\\\\n              \\\\n      <img\\\\n         height=\\\\\\"auto\\\\\\" src=\\\\\\"cid:54ecb5312f8bba83a03ac2074ce9188e\\\\\\" style=\\\\\\"border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;\\\\\\" width=\\\\\\"100\\\\\\"\\\\n      />\\\\n    \\\\n            </td>\\\\n          </tr>\\\\n        </tbody>\\\\n      </table>\\\\n    \\\\n              </td>\\\\n            </tr>\\\\n          \\\\n      </table>\\\\n    \\\\n      </div>\\\\n    \\\\n          <!--[if mso | IE]>\\\\n            </td>\\\\n          \\\\n        </tr>\\\\n      \\\\n                  </table>\\\\n                <![endif]-->\\\\n              </td>\\\\n            </tr>\\\\n          </tbody>\\\\n        </table>\\\\n        \\\\n      </div>\\\\n    \\\\n      \\\\n      <!--[if mso | IE]>\\\\n          </td>\\\\n        </tr>\\\\n      </table>\\\\n      <![endif]-->\\\\n    \\\\n    \\\\n      </div>\\\\n    \\\\n      </body>\\\\n    </html>\\\\n  \\",\\"attachments\\":[{\\"filename\\":\\"54ecb5312f8bba83a03ac2074ce9188e.jpg\\",\\"path\\":\\"data:image/jpg;base64,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\\",\\"cid\\":\\"54ecb5312f8bba83a03ac2074ce9188e\\"}]};"`;
42 | 
43 | exports[`mjmlWithImageLoader should convert template with image as attachments 2`] = `
44 | Array [
45 |   Array [
46 |     "/Users/nod/www/_npm/mjml-with-images-loader/test-img.jpg",
47 |   ],
48 | ]
49 | `;
50 | 
51 | exports[`mjmlWithImageLoader should convert template with image inline as data:image/*;base64 1`] = `"module.exports = \\"\\\\n    <!doctype html>\\\\n    <html xmlns=\\\\\\"http://www.w3.org/1999/xhtml\\\\\\" xmlns:v=\\\\\\"urn:schemas-microsoft-com:vml\\\\\\" xmlns:o=\\\\\\"urn:schemas-microsoft-com:office:office\\\\\\">\\\\n      <head>\\\\n        <title>\\\\n          \\\\n        </title>\\\\n        <!--[if !mso]><!-- -->\\\\n        <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"IE=edge\\\\\\">\\\\n        <!--<![endif]-->\\\\n        <meta http-equiv=\\\\\\"Content-Type\\\\\\" content=\\\\\\"text/html; charset=UTF-8\\\\\\">\\\\n        <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1\\\\\\">\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          #outlook a { padding:0; }\\\\n          .ReadMsgBody { width:100%; }\\\\n          .ExternalClass { width:100%; }\\\\n          .ExternalClass * { line-height:100%; }\\\\n          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\\\\n          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\\\\n          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\\\\n          p { display:block;margin:13px 0; }\\\\n        </style>\\\\n        <!--[if !mso]><!-->\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          @media only screen and (max-width:480px) {\\\\n            @-ms-viewport { width:320px; }\\\\n            @viewport { width:320px; }\\\\n          }\\\\n        </style>\\\\n        <!--<![endif]-->\\\\n        <!--[if mso]>\\\\n        <xml>\\\\n        <o:OfficeDocumentSettings>\\\\n          <o:AllowPNG/>\\\\n          <o:PixelsPerInch>96</o:PixelsPerInch>\\\\n        </o:OfficeDocumentSettings>\\\\n        </xml>\\\\n        <![endif]-->\\\\n        <!--[if lte mso 11]>\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          .outlook-group-fix { width:100% !important; }\\\\n        </style>\\\\n        <![endif]-->\\\\n        \\\\n      <!--[if !mso]><!-->\\\\n        <link href=\\\\\\"https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700\\\\\\" rel=\\\\\\"stylesheet\\\\\\" type=\\\\\\"text/css\\\\\\">\\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);\\\\n        </style>\\\\n      <!--<![endif]-->\\\\n\\\\n    \\\\n        \\\\n    <style type=\\\\\\"text/css\\\\\\">\\\\n      @media only screen and (min-width:480px) {\\\\n        .mj-column-per-100 { width:100% !important; max-width: 100%; }\\\\n      }\\\\n    </style>\\\\n    \\\\n  \\\\n        <style type=\\\\\\"text/css\\\\\\">\\\\n        \\\\n        \\\\n\\\\n    @media only screen and (max-width:480px) {\\\\n      table.full-width-mobile { width: 100% !important; }\\\\n      td.full-width-mobile { width: auto !important; }\\\\n    }\\\\n  \\\\n        </style>\\\\n        \\\\n        \\\\n      </head>\\\\n      <body>\\\\n        \\\\n        \\\\n      <div\\\\n         style=\\\\\\"\\\\\\"\\\\n      >\\\\n        \\\\n      \\\\n      <!--[if mso | IE]>\\\\n      <table\\\\n         align=\\\\\\"center\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" class=\\\\\\"\\\\\\" style=\\\\\\"width:600px;\\\\\\" width=\\\\\\"600\\\\\\"\\\\n      >\\\\n        <tr>\\\\n          <td style=\\\\\\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\\\\\\">\\\\n      <![endif]-->\\\\n    \\\\n      \\\\n      <div  style=\\\\\\"Margin:0px auto;max-width:600px;\\\\\\">\\\\n        \\\\n        <table\\\\n           align=\\\\\\"center\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" role=\\\\\\"presentation\\\\\\" style=\\\\\\"width:100%;\\\\\\"\\\\n        >\\\\n          <tbody>\\\\n            <tr>\\\\n              <td\\\\n                 style=\\\\\\"direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;\\\\\\"\\\\n              >\\\\n                <!--[if mso | IE]>\\\\n                  <table role=\\\\\\"presentation\\\\\\" border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\">\\\\n                \\\\n        <tr>\\\\n      \\\\n            <td\\\\n               class=\\\\\\"\\\\\\" style=\\\\\\"vertical-align:top;width:600px;\\\\\\"\\\\n            >\\\\n          <![endif]-->\\\\n            \\\\n      <div\\\\n         class=\\\\\\"mj-column-per-100 outlook-group-fix\\\\\\" style=\\\\\\"font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;\\\\\\"\\\\n      >\\\\n        \\\\n      <table\\\\n         border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" role=\\\\\\"presentation\\\\\\" style=\\\\\\"vertical-align:top;\\\\\\" width=\\\\\\"100%\\\\\\"\\\\n      >\\\\n        \\\\n            <tr>\\\\n              <td\\\\n                 align=\\\\\\"left\\\\\\" style=\\\\\\"font-size:0px;padding:10px 25px;word-break:break-word;\\\\\\"\\\\n              >\\\\n                \\\\n      <div\\\\n         style=\\\\\\"font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;\\\\\\"\\\\n      >\\\\n        Hello World\\\\n      </div>\\\\n    \\\\n              </td>\\\\n            </tr>\\\\n          \\\\n            <tr>\\\\n              <td\\\\n                 align=\\\\\\"center\\\\\\" style=\\\\\\"font-size:0px;padding:10px 25px;word-break:break-word;\\\\\\"\\\\n              >\\\\n                \\\\n      <table\\\\n         border=\\\\\\"0\\\\\\" cellpadding=\\\\\\"0\\\\\\" cellspacing=\\\\\\"0\\\\\\" role=\\\\\\"presentation\\\\\\" style=\\\\\\"border-collapse:collapse;border-spacing:0px;\\\\\\"\\\\n      >\\\\n        <tbody>\\\\n          <tr>\\\\n            <td  style=\\\\\\"width:100px;\\\\\\">\\\\n              \\\\n      <img\\\\n         height=\\\\\\"auto\\\\\\" src=\\\\\\"data:image/jpg;base64,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\\\\\\" style=\\\\\\"border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;\\\\\\" width=\\\\\\"100\\\\\\"\\\\n      />\\\\n    \\\\n            </td>\\\\n          </tr>\\\\n        </tbody>\\\\n      </table>\\\\n    \\\\n              </td>\\\\n            </tr>\\\\n          \\\\n      </table>\\\\n    \\\\n      </div>\\\\n    \\\\n          <!--[if mso | IE]>\\\\n            </td>\\\\n          \\\\n        </tr>\\\\n      \\\\n                  </table>\\\\n                <![endif]-->\\\\n              </td>\\\\n            </tr>\\\\n          </tbody>\\\\n        </table>\\\\n        \\\\n      </div>\\\\n    \\\\n      \\\\n      <!--[if mso | IE]>\\\\n          </td>\\\\n        </tr>\\\\n      </table>\\\\n      <![endif]-->\\\\n    \\\\n    \\\\n      </div>\\\\n    \\\\n      </body>\\\\n    </html>\\\\n  \\";"`;
52 | 
53 | exports[`mjmlWithImageLoader should convert template with image inline as data:image/*;base64 2`] = `
54 | Array [
55 |   Array [
56 |     "/Users/nod/www/_npm/mjml-with-images-loader/test-img.jpg",
57 |   ],
58 | ]
59 | `;
60 | 


--------------------------------------------------------------------------------