email-style-validator

Email Style Validator

Email Style Validator is simply a higher-order function that you pass a config and it returns a function that ensures css styles used are compatible with the email clients you specify in the config. Full listing of all supported clients.

Example usage:

const config = {
	supportedClients: [
		"Outlook 2007–16",
		"Gmail",
		"Yahoo! Mail",
	],
}

const emailStyleValidator = require('email-style-validator')

const myEmailStyleValidator = emailStyleValidator(config)

You can now invoke your style validator and pass it a style object. The style object is simply a plain javascript object with keys that are css styles and the corresponding values. It will ensure all styles used are compatible with the email clients you selected. It will return an object with the following properties:

const style = {
	border: '1px solid #E0E0E0',
	padding: '15px',
	'flex-grow': '1',
	'flex-shrink': '1',
	'flex-basis': 'auto',
}

const {
	isValid,
	partiallySupported,
	notSupported,
} = myEmailStyleValidator({ style })

• isValid: A boolean that will be false if any style is not supported. Will be true if all styles are supported or partially supported.
• partiallySupported: An array of objects identifying partially supported styles.
  • style: A string naming the partially supported style.
  • info: A string describing the partial support.
  • client: A string naming the email client.
• notSupported: An array of objects identifying styles that are not supported.
  • style: A string naming the unsupported style.
  • client: A string naming the email client.

support.json

Email Style Validator checks for support using a json document that is generated by scraping CampaignMonitor's Ultimate Guide to CSS: "A complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet."

Email Style Validator is framework agnostic and can be used in the browser or on the server.