[WIP] mj-include implementation

data/circular/circular-1.mjml

@@ -0,0 +1,5 @@
+<mj-section css-class="bg-white">
+    <mj-column padding="32px 48px">
+        <mj-include path="circular-2.mjml" />
+    </mj-column>
+</mj-section>

data/circular/circular-2.mjml

@@ -0,0 +1,5 @@
+<mj-section css-class="bg-white">
+    <mj-column padding="32px 48px">
+        <mj-include path="circular-1.mjml" />
+    </mj-column>
+</mj-section>

data/circular/include-circular.mjml

@@ -0,0 +1,14 @@
+<mjml>
+    <mj-body>
+
+        <mj-section css-class="bg-white">
+            <mj-column>
+                <mj-text padding="48px 48px 0 48px">
+                    <p>This is the Index!</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+
+        <mj-include path="/circular/circular-1.mjml" />
+    </mj-body>
+</mjml>

data/import-head.mjml

@@ -0,0 +1,8 @@
+<mjml>
+    <mj-head>
+        <mj-include path="include/import-head-styles.mjml" />
+    </mj-head>
+    <mj-body>
+        <mj-text>test</mj-text>
+    </mj-body>
+</mjml>

data/include-about.mjml

@@ -0,0 +1,16 @@
+<mjml>
+    <mj-body>
+        <mj-include path="include/styling.mjml" />
+        <mj-include path="include/header.mjml" />
+
+        <mj-section css-class="bg-white">
+            <mj-column>
+                <mj-text padding="48px 48px 0 48px">
+                    <p>This is the About!</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+
+        <mj-include path="include/footer.mjml" />
+    </mj-body>
+</mjml>

data/include-index.mjml

@@ -0,0 +1,17 @@
+<mjml>
+    <mj-body>
+        <mj-include path="include/styling.mjml" />
+        <mj-include path="include/header.mjml" />
+
+        <mj-section css-class="bg-white">
+            <mj-column>
+                <mj-text padding="48px 48px 0 48px">
+                    <p>This is the Index!</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+
+        <mj-include path="include/footer.mjml" />
+        <mj-include path="not-found.mjml" />
+    </mj-body>
+</mjml>

data/include-type-css.mjml

@@ -0,0 +1,15 @@
+<mjml>
+    <mj-body>
+        <mj-section>
+            <mj-column>
+                <mj-include type="css" path="include/type.css" />
+            </mj-column>
+            <mj-column>
+                <mj-include type="css" path="include/type2.css" />
+            </mj-column>
+            <mj-column>
+                <mj-include type="css" path="include/non-exist.css" />
+            </mj-column>
+        </mj-section>
+    </mj-body>
+</mjml>

data/include-type-html.mjml

@@ -0,0 +1,12 @@
+<mjml>
+    <mj-body>
+        <mj-section>
+            <mj-column>
+                <mj-include type="html" path="include/type.html" />
+            </mj-column>
+            <mj-column>
+                <mj-include type="html" path="include/non-exist.html" />
+            </mj-column>
+        </mj-section>
+    </mj-body>
+</mjml>

data/include/footer.mjml

@@ -0,0 +1,22 @@
+<mj-include path="styling.mjml" />
+
+<mj-section css-class="bg-white">
+    <mj-column padding="32px 48px">
+        <mj-text>
+            <p>Cheers,</p>
+            <p>Me!</p>
+        </mj-text>
+    </mj-column>
+</mj-section>
+<mj-section css-class="bg-white">
+    <mj-column>
+        <mj-divider />
+    </mj-column>
+</mj-section>
+<mj-section css-class="bg-white">
+    <mj-column>
+        <mj-text color="#2F5854" align="center" padding="8px 0">
+            <p>Something.com ©️ 2023</p>
+        </mj-text>
+    </mj-column>
+</mj-section>

data/include/header.mjml

@@ -0,0 +1,7 @@
+<mj-include path="styling.mjml" />
+
+<mj-section css-class="bg-dark" padding="16px">
+    <mj-column>
+        <mj-spacer height="32px" />
+    </mj-column>
+</mj-section>

data/include/import-head-styles.mjml

@@ -0,0 +1 @@
+<mj-attributes><mj-text color='#ffffff' /></mj-attributes>

data/include/styling.mjml

@@ -0,0 +1,24 @@
+<mjml>
+    <mj-head>
+        <mj-font name="Open Sans" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" />
+        <mj-style>
+            .bg-dark {
+            background: #2F5854 !important;
+            }
+            .bg-white {
+            background: #FFFFFF !important;
+            }
+            p {
+            font-size: 16px !important;
+            font-weight: 400 !important;
+            line-height: 24px !important;
+            margin: 0;
+            }
+        </mj-style>
+        <mj-attributes>
+            <mj-body background-color="#EAEEEE" width="636px" />
+            <mj-divider border-width="1px" border-style="solid" border-color="#2F5854" padding="0 16px" />
+            <mj-all font-family="Open Sans" font-size="16px" font-weight="400" color="#1E3432" padding="0" align="left" />
+        </mj-attributes>
+    </mj-head>
+</mjml>

data/include/type.css

@@ -0,0 +1,7 @@
+h1 {
+    color: red;
+}
+
+.my-custom-class {
+    border: 1px solid red;
+}

data/include/type.html

@@ -0,0 +1,10 @@
+<div>hello world!</div>
+<hr>
+<table>
+    <tbody><tr><td>a</td><td>b</td></tr></tbody>
+</table>
+
+<ul>
+    <li>a
+    <li>b
+</ul>

data/include/type2.css

@@ -0,0 +1,7 @@
+h2 {
+    color: green;
+}
+
+.my-custom-class-2 {
+    border: 1px solid green;
+}

data/mj-divider-mj-all.mjml

@@ -0,0 +1,14 @@
+<mjml>
+    <mj-head>
+        <mj-attributes>
+            <mj-all font-size="16px" font-weight="400" color="#1E3432" padding="0" align="left" />
+        </mj-attributes>
+    </mj-head>
+    <mj-body>
+        <mj-section>
+            <mj-column>
+                <mj-divider />
+            </mj-column>
+        </mj-section>
+    </mj-body>
+</mjml>

pom.xml

@@ -52,25 +52,19 @@
         <dependency>
             <groupId>org.junit.jupiter</groupId>
             <artifactId>junit-jupiter-engine</artifactId>
-            <version>5.10.2</version>
-            <scope>test</scope>
-        </dependency>
-        <dependency>
-            <groupId>commons-io</groupId>
-            <artifactId>commons-io</artifactId>
-            <version>2.15.1</version>
+            <version>5.11.2</version>
             <scope>test</scope>
         </dependency>
         <dependency>
             <groupId>org.graalvm.polyglot</groupId>
             <artifactId>polyglot</artifactId>
-            <version>23.1.2</version>
+            <version>24.1.0</version>
             <scope>test</scope>
         </dependency>
         <dependency>
             <groupId>org.graalvm.polyglot</groupId>
             <artifactId>js-community</artifactId>
-            <version>23.1.2</version>
+            <version>24.1.0</version>
             <type>pom</type>
             <scope>test</scope>
         </dependency>

src/main/java/ch/digitalfondue/mjml4j/BaseComponent.java

@@ -10,8 +10,8 @@
 abstract class BaseComponent {
 
     private final Element element;
-    private final BaseComponent parent;
     private final List<BaseComponent> children = new ArrayList<>();
+    private BaseComponent parent;
 
     final GlobalContext context;
 
@@ -31,6 +31,10 @@ final void doSetupPostConstruction() {
         }
     }
 
+    public void setParent(BaseComponent parent) {
+        this.parent = parent;
+    }
+
     void setupPostConstruction() {
     }
 
@@ -39,9 +43,10 @@ LinkedHashMap<String, AttributeValueType> allowedAttributes() {
     }
 
     private LinkedHashMap<String, String> defaultAttributeValues() {
-        var kvt = allowedAttributes();
         var res = new LinkedHashMap<String, String>();
-        kvt.forEach((k, vt) -> res.put(k, vt.value()));
+        for (var kvt : allowedAttributes().entrySet()) {
+            res.put(kvt.getKey(), kvt.getValue().value());
+        }
         return res;
     }
 
@@ -65,8 +70,9 @@ final void setupComponentAttributes() {
 
     void setAttributes() {
         var attributesLength = element.getAttributes().getLength();
+        var elemAttr = element.getAttributes();
         for (int i = 0; i < attributesLength; i++) {
-            var attr = element.getAttributes().item(i);
+            var attr = elemAttr.item(i);
             var userAttributeName = attr.getNodeName().toLowerCase(Locale.ROOT);
             var userAttributeValue = attr.getNodeValue();
             if (!attributes.containsKey(userAttributeName)) {
@@ -252,14 +258,14 @@ CssBoxModel getBoxModel() {
                         parent.getContainerInnerWidth(),
                         borders,
                         paddings,
-                        containerWidth.value
+                        containerWidth.value()
                 );
             }
             return new CssBoxModel(
-                    containerWidth.value,
+                    containerWidth.value(),
                     borders,
                     paddings,
-                    containerWidth.value);
+                    containerWidth.value());
         }
 
 
@@ -270,7 +276,7 @@ CssBoxModel getBoxModel() {
             var mjAttribute = getAttribute("border");
 
             if (!Utils.isNullOrWhiteSpace(mjAttributeDirection))
-                return CssUnitParser.parse(mjAttributeDirection).value;
+                return CssUnitParser.parse(mjAttributeDirection).value();
 
             if (Utils.isNullOrWhiteSpace(mjAttribute))
                 return 0;
@@ -300,7 +306,7 @@ CssBoxModel getBoxModel() {
             var mjAttribute = getAttribute(attribute);
 
             if (!Utils.isNullOrWhiteSpace(mjAttributeDirection))
-                return CssUnitParser.parse(mjAttributeDirection).value;
+                return CssUnitParser.parse(mjAttributeDirection).value();
 
             if (Utils.isNullOrWhiteSpace(mjAttribute))
                 return 0;
@@ -337,10 +343,10 @@ CssBoxModel getBoxModel() {
                     break;
                 case 1:
                 default:
-                    return CssUnitParser.parse(mjAttribute).value;
+                    return CssUnitParser.parse(mjAttribute).value();
             }
 
-            return CssUnitParser.parse(splittedCssValue[directions.get(direction)]).value;
+            return CssUnitParser.parse(splittedCssValue[directions.get(direction)]).value();
         }
 
         StringBuilder htmlAttributes(LinkedHashMap<String, String> htmlAttributes) {

src/main/java/ch/digitalfondue/mjml4j/CssUnitParser.java

@@ -5,23 +5,15 @@
 class CssUnitParser {
 
 
-    static class CssParsedUnit {
-        final String unit;
-        final double value;
-
-        final double valueFullPrecision;
-
-        CssParsedUnit(String unit, double value, double valueFullPrecision) {
-            this.unit = unit;
-            this.value = value;
-            this.valueFullPrecision = valueFullPrecision;
-        }
+    record CssParsedUnit(String unit, double value, double valueFullPrecision) {
 
         boolean isPercent() {
             return "%".equals(unit);
         }
 
-        boolean isPx() { return "px".equals(unit); }
+        boolean isPx() {
+            return "px".equals(unit);
+        }
 
         @Override
         public String toString() {
@@ -48,8 +40,9 @@ static CssParsedUnit parse(String cssValue) {
 
         var match = UNIT_PATTERN.matcher(cssValue);
 
-        if (!match.find())
+        if (!match.find()) {
             throw new IllegalStateException("CssWidthParser could not parse " + cssValue + " due to invalid format");
+        }
 
         var widthValue = match.group(1);
         var widthUnit = match.groupCount() != 2 ? "px" : match.group(2);