CodeBlocks doesn't seem to respect new configs?

[JimmyMultani]

We have a project where we use Apache Freemarker as a back end templating language that needs to not be parsed, but I'm having difficulty configuring inline-css to ignore it with CodeBlocks.

There's mention in the README that I should be including new cases with codeBlocks.myBlock = {...}, but I don't think it's explicit enough on how that would work in a Gulp workflow. Maybe an example would be helpful.

Anyway, this is the code that doesn't seem to work:

// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
function inliner(css) {
  var css = fs.readFileSync(css).toString();
  var mqCss = siphon(css);

  var pipe = lazypipe()
    .pipe($.inlineCss, {
      applyStyleTags: false,
      removeStyleTags: true,
      preserveMediaQueries: true,
      removeLinkTags: false,
      codeBlocks: codeBlocks => {
        codeBlocks.FRM = { start: '<#', end: '>' };
        return codeBlocks;
      },
    })
    .pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
    .pipe(
      $.replace,
      '<link rel="stylesheet" type="text/css" href="css/app.css">',
      ''
    )
    .pipe($.htmlmin, { collapseWhitespace: true, minifyCSS: true });

  return pipe();
}

The Gulp processes through everything correctly until it gets to the inliner() function, where it spits out this error:

Message:
    Parse Error: <#list email.annexMap="" as="" goalName,="" amount="">
...
Details:
    fileName: /Users/jimmymultani/Projects/evree/postman/dist/installmentReminder.html
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false

Any help would be greatly appreciated.

[jonkemp]

It's not a function, it's an object. So maybe this would work:

// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
function inliner(css) {
  var css = fs.readFileSync(css).toString();
  var mqCss = siphon(css);

  var pipe = lazypipe()
    .pipe($.inlineCss, {
      applyStyleTags: false,
      removeStyleTags: true,
      preserveMediaQueries: true,
      removeLinkTags: false,
      codeBlocks: {
        FRM: { start: '<#list', end: '>' }
      },
    })
    .pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
    .pipe(
      $.replace,
      '<link rel="stylesheet" type="text/css" href="css/app.css">',
      ''
    )
    .pipe($.htmlmin, { collapseWhitespace: true, minifyCSS: true });

  return pipe();
}

If this doesn't work, let me know.

[JimmyMultani]

Hey @jonkemp,

Thanks for replying so quickly. I had originally passed in an object with just the FRM key/value pair, but still received a Parse Error message.

Thanks again for looking into this.

[jonkemp]

Ok, looks like there needs to a fix to the module to allow this extension of the object. Hopefully, I can get this fixed tonight. Thanks for letting me know.

[jonkemp]

Ok, there is a new version out. The feature works now.

https://github.com/jonkemp/gulp-inline-css/releases/tag/v3.2.0

Closing.

[S1mpler]

@jonkemp, Please help! I'm encountering just the same problem:

Error in plugin "gulp-inline-css"
Message:
    Parse Error: <#if changedpassword??>
...

and the code looks like:

<row>
      <columns small="12">
        <p>
          <#if changedPassword??>
            Uw wachtwoord is gewijzigd.<br/><br/>
          </#if>
...

I use version 4.0.0