eslint-plugin-email-css-rules

React css email's rules.

installation

Install ESLint either locally or globally.

npm install eslint

After that

$ npm install eslint-email-rules --save-dev

Configuration

Add to plugins section in eslintrc file.

{
  "plugins": [
    "email-css-rules"
  ]
}

If it is not already the case you must also configure ESLint to support JSX.

{
  "ecmaFeatures": {
    "jsx": true
  }
}

Avaiable rules

• email-css-rules/unsupported-css
• email-css-rules/background-image
• email-css-rules/defined-space
• email-css-rules/unknown-css

unsupported-css

Basically to detected unsupport or mal-css string in React code.

background-image

background style doesn't support url image in some email platforms.

defined-space

width and padding to make a space between element in your visualize component. Some email platforms doesn't support that.

unknown-css

check unknown or mis-spelling css style.

Special Thank

Thanks for all reference data from react-html-email to composed those datas to JSON. And ValidatorCssStyle inspration.

Huge thank from resource from The Untimate Guide to CSS to collect the css breakdown in every platforms.

Contribute

I warm welcome all for contributer to make it better (Trump face).