tailwind-to-inline
Version:
Convert HTML templates with Tailwind CSS classes to inline styles. Ideal for email templates, making Tailwind-styled emails compatible with major email clients.
80 lines (79 loc) • 3.74 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
const makeStylesInline_1 = require("./makeStylesInline");
const fs = __importStar(require("fs"));
describe('renderEmailFromTemplate', () => {
const templatePath = 'src/mocks/example-template.html';
const placeholderValues = {
name: 'John Doe',
thank_you: 'Thank you for signing up!',
cta_link: 'https://example.com',
cta_text: 'See all features',
};
const expectedHtml = `<html>
<head>
<title>Test title</title>
</head>
<body style="background-color: #1f2937;">
<div style="position: relative; z-index: 20; margin-bottom: 1rem; max-width: 512px; padding-left: 1rem; padding-top: 2.5rem;">
<span style="margin-right: 1.25rem; color: #fde047;">Welcome, John Doe</span>
</div>
<div>
<a href="https://example.com" style="background-color: #3b82f6;">See all features</a>
<div style="background-image: url('https://example.com/custom-image.png'); background-repeat: no-repeat;"></div>
</div>
</body>
</html>
`;
test('should render email from template', () => __awaiter(void 0, void 0, void 0, function* () {
const inlinedHtml = yield (0, makeStylesInline_1.makeStylesInline)(templatePath, placeholderValues);
expect(inlinedHtml).toEqual(expectedHtml);
}));
test('should render email from raw template string', () => __awaiter(void 0, void 0, void 0, function* () {
const rawString = fs.readFileSync(templatePath, 'utf8');
const inlinedHtml = yield (0, makeStylesInline_1.makeStylesInlineFromString)(rawString, placeholderValues);
expect(inlinedHtml).toEqual(expectedHtml);
}));
});