Inliner chokes on some characters. (Affects Marketo Email Templates)

[jfinley-kmdg]

I'm working with Marketo email templates and have encountered a compatibility issue with the CSS inline and Marketo variables. I've tried several ways to get around this and the only one that works is to use find/replace tokens after the inliner has run, otherwise it will choke on the variable (even if wrapped in {{{{raw}}}} or inserted via a custom helper).

How can we reproduce this bug?

Use the character { and } in a style tag with any text between them, ex: style="{test}". Marketo's exact syntax for variables is ${varName} but the $ doesn't seem to matter for this bug.

What did you expect to happen?

<table class="body" style="Margin:0;background:#8a8a8a;background-color:${bodyBackgroundColor};border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:100%;line-height:1.3;margin:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">

What happened instead?

<table class="body" style="background-color:${bodyBackgroundColor}">

What email clients does this happen in?

This happens in the raw HTML when running in production mode, no specific client.

My workaround for this has been to modify the gulpfile to run a find/replace on the full text of the page after the inliner has run, replacing ||someVar|| with ${someVar}. I'm trying to avoid needing to modify the gulpfile for each project, so attempted to create a helper to output the correct syntax instead, but helpers are run before the inliner so it doesn't actually solve the issue, which is also why the raw helper fails.

This is my workaround for reference:

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
  gulp.series(setupConifg, clean, pages, sass, images, inline, marketo));

// Watch for file changes
function watch() {
  gulp.watch('src/pages/**/*.html').on('all', gulp.series(setupConifg, pages, inline, marketo, browser.reload));
  gulp.watch(['src/layouts/**/*', 'src/partials/**/*']).on('all', gulp.series(setupConifg, resetPages, pages, inline, marketo, browser.reload));
  gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss']).on('all', gulp.series(setupConifg, resetPages, sass, pages, inline, marketo, browser.reload));
  gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
}

function marketo(done) {

    let task = gulp.src('dist/**/*.html');
    let mktoVars = CONFIG.mktoVars;

    Object.keys(mktoVars).forEach((i) => {
        if(PRODUCTION) {
            // Output Marketo variable syntax
            console.log(mktoVars[i].id + " => ${"+mktoVars[i].id+"}");
            task = task.pipe($.replace('||' + mktoVars[i].id + '||', '${' + mktoVars[i].id + '}'));
        } else {
            // Use default values
            console.log(mktoVars[i].id + " => '"+mktoVars[i].default+"'");
            task = task.pipe($.replace('||' + mktoVars[i].id + '||', mktoVars[i].default));
        }
    });

    return task.pipe(gulp.dest('dist'));
}

Part of what I'm doing here is using the variable default values when not in production, then swapping them for the variable tokens when compiling everything for import into Marketo, so it's the production process that has an issue since the dev process neither uses the inliner nor does it output the variable tokens (the workaround works either way, but using helpers only the dev process functions).

[elcaptain]

Our mailer uses variables like these {{var}}, which of course don't work with the handlebar variables used by foundation. I am prefixing them with a backslash so they don't break. Maybe \${varName} or $\{varName} works for you?

[jfinley-kmdg]

No dice. I think this is an unrelated issue since it's not handlebars that is choking on the marketo syntax, it's the CSS inliner. Escaping any of the characters involved doesn't actually do anything so far as I can tell - Handlebars will remove the \ when you escape \{{test}} but when you try it with non-handlebars markup it just renders it as-is.