feat(simplify): prevent mjml-style from breaking css and relax type s…

…afety (#78)

* fix(MjmlStyle): revert breaking change causing incorrect css

* revert extra type safety

* update readme

* update readme

README.md

@@ -17,6 +17,26 @@ There is an awesome library [mjml](https://mjml.io/) with github repo here [http
 `MJML` is a markup language created by [Mailjet](https://www.mailjet.com/).
 So in order to create emails on the fly we created a library with `React` components.
 
+## Get started today with V2 - 100% backwards compatible with https://github.com/wix-incubator/mjml-react/
+
+V2 is a drop in replacement for https://github.com/wix-incubator/mjml-react/, with some additional support. If there's a component missing you can make a PR against https://github.com/Faire/mjml-react/tree/main-v2 or submit an issue and we'll try to unblock you.
+
+## What's new in V3?
+
+We wanted V3 of mjml-react to be fairly easy to migrate to from V2. We will implement more advanced features in V4. The main updates in V3 include:
+
+- Typescript: mjml-react is now written in typescript which helps ensure correct props are passed to mjml components
+- Full mjml component support: We use an automated script for pulling mjml components and creating a corresponding mjml-react component. This means we get full support of all components available in the latest mjml version
+- Other small changes: add dangerouslySetInnerHTML in mjml-react for mjml ending tags, update testing, add in-code documenation
+
+## What's coming in V4?
+
+In V4 we are exploring exciting features that will make mjml-react even more powerful. This includes:
+
+- Improved prop type safety: help ensure correct formatting for props like padding, width, and height
+
+If you want to be on the cutting edge of what is being released, we are publishing a [v4-main-alpha version](https://www.npmjs.com/package/@faire/mjml-react/v/main-alpha) to npm.
+
 ## How it works
 
 Install the required dependencies first:

scripts/generate-mjml-react.ts

@@ -11,8 +11,6 @@ import camelCase from "lodash.camelcase";
 import upperFirst from "lodash.upperfirst";
 import * as path from "path";
 
-import { typeToUnit } from "../src/utils";
-
 const MJML_REACT_DIR = "src";
 
 const UTILS_FILE = "utils";
@@ -129,14 +127,11 @@ function getPropTypeFromMjmlAttributeType(
   if (ATTRIBUTES_TO_USE_CSSProperties_WITH.has(attribute)) {
     return `React.CSSProperties["${attribute}"]`;
   }
-  if (mjmlAttributeType.startsWith("unit")) {
-    const validUnitTypes: string[] = Object.keys(typeToUnit).filter((type) =>
-      mjmlAttributeType.includes(typeToUnit[type as keyof typeof typeToUnit])
-    );
-    if (mjmlAttributeType.endsWith("{1,4}")) {
-      return `Matrix<${validUnitTypes.join(" | ")}>`;
-    }
-    return validUnitTypes.join(" | ");
+  if (
+    mjmlAttributeType.startsWith("unit") &&
+    mjmlAttributeType.includes("px")
+  ) {
+    return "string | number";
   }
   if (mjmlAttributeType === "boolean") {
     return "boolean";
@@ -228,17 +223,13 @@ function buildFileContents({
 }) {
   const { props, createElementProps } =
     buildReactCreateElementProps(componentName);
-  const unitsUsed = ["Matrix", ...Object.keys(typeToUnit)]
-    .filter((unit) => types.includes(unit))
-    .join(", ");
-  const unitsImports = unitsUsed ? ", " + unitsUsed : "";
 
   return `
 ${GENERATED_HEADER_TSX}
 
 import React from "react";
 
-import { convertPropsToMjmlAttributes${unitsImports} } from "../${UTILS_FILE}";
+import { convertPropsToMjmlAttributes } from "../${UTILS_FILE}";
 
 export interface I${reactName}Props {
   ${types}
@@ -257,6 +248,13 @@ function buildReactCreateElementProps(componentName: string): {
   const withChildren = "{children, ...props}";
   const withoutChildren = "props";
 
+  if (componentName === "mj-style") {
+    return {
+      props: withChildren,
+      createElementProps:
+        "{ ...convertPropsToMjmlAttributes(props), dangerouslySetInnerHTML: { __html: props.dangerouslySetInnerHTML ? props.dangerouslySetInnerHTML.__html : children } }",
+    };
+  }
   if (HAS_CHILDREN.has(componentName)) {
     return {
       props: withChildren,