Inline external CSS with Handlebars

[KiwiKilian]

The documentation about how to inline external CSS is very dense. This merge request suggests, it should work to include a CSS file with a normal a <link>:

<link rel="stylesheet" href="style.css" />

My templates/handlebars config looks like this:

template: {
  dir: __dirname + '/templates',
  adapter: new HandlebarsAdapter(),
  options: {
    strict: true,
  },
}

My templates and the style.css reside in the same directory templates. Sending the template without <link> tag works as expected, also putting all the CSS in a <style> works with the inlining.

When including the external CSS file like shown a the beginning throws the following error:

Error: getaddrinfo ENOTFOUND style.css
at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:71:26)

The adapter config shown in the docs also doesn't change anything and seem to reflect the default config. As it seems to be a path resolving issue I tried quite a few paths in the <link> but nothing like style.css, ./style.css, /style.css or with templates prefixed seemed to work.

[dantehemerson]

@KiwiKilian You have to send the path to the folder prefixed with file://, like this:

adapter: new HandlebarsAdapter(undefined,  {
  inlineCssOptions: {
    url: `file://` + process.cwd() + '/templates/',
  },
}),

[f-albuquerque]

This worked for me:

template: {
    dir: path.join(__dirname, '/assets/mailer-templates'),
    adapter: new HandlebarsAdapter(undefined, {
        inlineCssOptions: {
            url: 'file://' + path.join(__dirname, '/assets/mailer-templates/style.css'),
        },
    }),
    options: {
        strict: true,
    },
}