Replace inline-css package

docs/mailer.md

@@ -299,24 +299,21 @@ const bullModule = BullModule.forRoot(mailBullConfig);
 export class MailModule {}
 ```
 
-### Control over inline-css in default adapters
+### Control over css-inline in default adapters
 
-It is possible to change `inline-css` options or even disable it in default adapters.
+It is possible to change `css-online` options or even disable it in default adapters.
 Just provide config object in constructor.
 
 ```typescript
 new HandlebarsAdapter(/* helpers */ undefined, {
   inlineCssEnabled: true,
-  /** See https://www.npmjs.com/package/inline-css#api */
-  inlineCssOptions: {
-    url: ' ',
-    preserveMediaQueries: true,
-  },
+  /** See https://www.npmjs.com/package/css-inline#configuration */
+  inlineCssOptions: {},
 });
 
 new PugAdapter({
   inlineCssEnabled: true,
-  inlineCssOptions: { url: ' ' },
+  inlineCssOptions: {},
 });
 
 new EjsAdapter({

lib/adapters/ejs.adapter.ts

@@ -8,7 +8,7 @@ import {
 import { get } from 'lodash';
 import * as fs from 'fs';
 import * as path from 'path';
-import * as inlineCss from 'inline-css';
+import { inline } from 'css-inline';
 
 /** Interfaces **/
 import { MailerOptions } from '../interfaces/mailer-options.interface';
@@ -21,7 +21,7 @@ export class EjsAdapter implements TemplateAdapter {
   } = {};
 
   private config: TemplateAdapterConfig = {
-    inlineCssOptions: { url: ' ' },
+    inlineCssOptions: {},
     inlineCssEnabled: true,
   };
 
@@ -38,7 +38,9 @@ export class EjsAdapter implements TemplateAdapter {
       ? path.dirname(template)
       : path.join(templateBaseDir, path.dirname(template));
     const templatePath = path.join(templateDir, templateName + templateExt);
-    templateName = path.relative(templateBaseDir, templatePath).replace(templateExt, '');
+    templateName = path
+      .relative(templateBaseDir, templatePath)
+      .replace(templateExt, '');
 
     if (!this.precompiledTemplates[templateName]) {
       try {
@@ -57,16 +59,13 @@ export class EjsAdapter implements TemplateAdapter {
 
     const render = (html: string) => {
       if (this.config.inlineCssEnabled) {
-        inlineCss(html, this.config.inlineCssOptions)
-          .then((html) => {
-            mail.data.html = html;
-            return callback();
-          })
-          .catch(callback);
+        try {
+          mail.data.html = inline(html, this.config.inlineCssOptions);
+        } catch (e) {}
       } else {
         mail.data.html = html;
-        return callback();
       }
+      return callback();
     };
 
     if (typeof rendered === 'string') {

lib/adapters/handlebars.adapter.ts

@@ -2,7 +2,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as handlebars from 'handlebars';
-import * as inlineCss from 'inline-css';
+import { inline } from 'css-inline';
 import * as glob from 'glob';
 import { get } from 'lodash';
 import { HelperDeclareSpec } from 'handlebars';
@@ -18,7 +18,7 @@ export class HandlebarsAdapter implements TemplateAdapter {
   } = {};
 
   private config: TemplateAdapterConfig = {
-    inlineCssOptions: { url: ' ' },
+    inlineCssOptions: {},
     inlineCssEnabled: true,
   };
 
@@ -40,7 +40,9 @@ export class HandlebarsAdapter implements TemplateAdapter {
         ? path.dirname(template)
         : path.join(templateBaseDir, path.dirname(template));
       const templatePath = path.join(templateDir, templateName + templateExt);
-      templateName = path.relative(templateBaseDir, templatePath).replace(templateExt, '');
+      templateName = path
+        .relative(templateBaseDir, templatePath)
+        .replace(templateExt, '');
 
       if (!this.precompiledTemplates[templateName]) {
         try {
@@ -75,10 +77,12 @@ export class HandlebarsAdapter implements TemplateAdapter {
     });
 
     if (runtimeOptions.partials) {
-      const partialPath = path.join(runtimeOptions.partials.dir, '**', '*.hbs').replace(/\\/g,'/');
+      const partialPath = path
+        .join(runtimeOptions.partials.dir, '**', '*.hbs')
+        .replace(/\\/g, '/');
 
       const files = glob.sync(partialPath);
-      
+
       files.forEach((file) => {
         const { templateName, templatePath } = precompile(
           file,
@@ -105,15 +109,12 @@ export class HandlebarsAdapter implements TemplateAdapter {
     );
 
     if (this.config.inlineCssEnabled) {
-      inlineCss(rendered, this.config.inlineCssOptions)
-        .then((html) => {
-          mail.data.html = html;
-          return callback();
-        })
-        .catch(callback);
+      try {
+        mail.data.html = inline(rendered, this.config.inlineCssOptions);
+      } catch (e) {}
     } else {
       mail.data.html = rendered;
-      return callback();
     }
+    return callback();
   }
 }

lib/adapters/pug.adapter.ts

@@ -2,7 +2,7 @@
 import * as path from 'path';
 import { get } from 'lodash';
 import { renderFile } from 'pug';
-import * as inlineCss from 'inline-css';
+import { inline } from 'css-inline';
 
 /** Interfaces **/
 import { MailerOptions } from '../interfaces/mailer-options.interface';
@@ -11,7 +11,7 @@ import { TemplateAdapterConfig } from '../interfaces/template-adapter-config.int
 
 export class PugAdapter implements TemplateAdapter {
   private config: TemplateAdapterConfig = {
-    inlineCssOptions: { url: ' ' },
+    inlineCssOptions: {},
     inlineCssEnabled: true,
   };
 
@@ -42,16 +42,13 @@ export class PugAdapter implements TemplateAdapter {
       }
 
       if (this.config.inlineCssEnabled) {
-        inlineCss(body, this.config.inlineCssOptions)
-          .then((html) => {
-            mail.data.html = html;
-            return callback();
-          })
-          .catch(callback);
+        try {
+          mail.data.html = inline(body, this.config.inlineCssOptions);
+        } catch (e) {}
       } else {
         mail.data.html = body;
-        return callback();
       }
+      return callback();
     });
   }
 }

lib/interfaces/template-adapter-config.interface.ts

@@ -1,6 +1,6 @@
-import InlineCss = require('inline-css');
+import { InlineOptions } from 'css-inline';
 
 export interface TemplateAdapterConfig {
-  inlineCssOptions?: InlineCss.Options;
+  inlineCssOptions?: InlineOptions;
   inlineCssEnabled?: boolean;
 }

lib/mailer.service.spec.ts

@@ -221,7 +221,7 @@ describe('MailerService', () => {
     );
   });
 
-  it('should compile template with the handlebars adapter with disabled inline-css', async () => {
+  it('should compile template with the handlebars adapter with disabled css-inline', async () => {
     let lastMail: MailMessage;
     const send = spyOnSmtpSend((mail: MailMessage) => {
       lastMail = mail;
@@ -254,7 +254,7 @@ describe('MailerService', () => {
     );
   });
 
-  it('should compile template with the handlebars adapter with enabled inline-css and media query', async () => {
+  it('should compile template with the handlebars adapter with enabled css-inline and media query', async () => {
     let lastMail: MailMessage;
     const send = spyOnSmtpSend((mail: MailMessage) => {
       lastMail = mail;
@@ -265,7 +265,7 @@ describe('MailerService', () => {
       template: {
         adapter: new HandlebarsAdapter(undefined, {
           inlineCssEnabled: true,
-          inlineCssOptions: { url: ' ', preserveMediaQueries: true },
+          inlineCssOptions: { },
         }),
       },
     });

package.json

@@ -52,46 +52,45 @@
     ]
   },
   "dependencies": {
+    "css-inline": "^0.10.4",
     "glob": "10.3.3",
-    "inline-css": "4.0.2",
     "mjml": "^4.14.1",
     "preview-email": "3.0.19"
   },
   "optionalDependencies": {
     "@types/ejs": "^3.1.2",
     "@types/pug": "2.0.6",
     "ejs": "^3.1.9",
-    "handlebars": "^4.7.7",
+    "handlebars": "^4.7.8",
     "pug": "^3.0.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.7",
-    "@commitlint/config-angular": "^17.6.7",
-    "@nestjs/common": "^10.1.0",
-    "@nestjs/core": "^10.1.0",
-    "@nestjs/testing": "^10.1.0",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-angular": "^17.7.0",
+    "@nestjs/common": "^10.1.3",
+    "@nestjs/core": "^10.1.3",
+    "@nestjs/testing": "^10.1.3",
     "@types/glob": "^8.1.0",
-    "@types/inline-css": "3.0.1",
     "@types/jest": "^29.5.3",
-    "@types/lodash": "^4.14.195",
-    "@types/nodemailer": "^6.4.8",
+    "@types/lodash": "^4.14.197",
+    "@types/nodemailer": "^6.4.9",
     "@types/pug": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^6.4.0",
     "husky": "^8.0.3",
-    "jest": "^29.6.1",
-    "lint-staged": "^13.2.3",
+    "jest": "^29.6.2",
+    "lint-staged": "^14.0.0",
     "nodemailer": "^6.9.4",
     "nodemailer-mock": "2.0.1",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.1",
     "reflect-metadata": "0.1.13",
     "rimraf": "5.0.1",
     "rxjs": "^7.8.1",
     "standard-version": "9.5.0",
     "ts-jest": "^29.1.1",
     "ts-node": "10.9.1",
     "typescript": "^5.1.6",
-    "yarn-audit-fix": "^9.3.12"
+    "yarn-audit-fix": "^10.0.0"
   },
   "peerDependencies": {
     "@nestjs/common": "^7.0.9 || ^8.0.0 || ^9.0.0 || ^10.0.0",
@@ -102,8 +101,5 @@
     "handlebars": "^4.7.6",
     "nodemailer": "^6.4.6",
     "pug": "^3.0.1"
-  },
-  "resolutions": {
-    "vm2": "isolated-vm"
   }
 }

sample/02-custom-template-adapter/README.md

@@ -21,7 +21,7 @@ Create your custom adapter class and be sure to implements `TemplateAdapter` int
 ```typescript
 // adapters/twing.adapter.ts
 import { MailerOptions, TemplateAdapter } from '@nestjs-modules/mailer';
-import * as inlineCSS from 'inline-css';
+import { inline } from 'css-inline';
 import * as path from 'path';
 import { TwingEnvironment, TwingLoaderFilesystem, TwingTemplate } from 'twing';
 
@@ -61,7 +61,7 @@ export class TwingAdapter implements TemplateAdapter {
       .get(template)
       .render(context);
 
-    return inlineCSS(rendered, { url: ' ' });
+    return inline(rendered, {});
   }
 }
 ```

sample/02-custom-template-adapter/src/adapters/twing.adapter.ts

@@ -1,5 +1,5 @@
 import { MailerOptions, TemplateAdapter } from '@nestjs-modules/mailer';
-import * as inlineCSS from 'inline-css';
+import { inline } from 'css-inline';
 import * as path from 'path';
 import { TwingEnvironment, TwingLoaderFilesystem, TwingTemplate } from 'twing';
 
@@ -39,6 +39,6 @@ export class TwingAdapter implements TemplateAdapter {
       .get(template)
       .render(context);
 
-    return inlineCSS(rendered, { url: ' ' });
+    return inline(rendered, {});
   }
 }