Skip to content

feature(html/mjml): updates/reduction to underlying html #3059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dazgreer wants to merge 7 commits into
base: fix/replace-html-minifier
Choose a base branch
from
Open

feature(html/mjml): updates/reduction to underlying html #3059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fd4b1d6
feature(html/mjml): updates/reduction to underlying html
dazgreer Mar 5, 2026
9afc7b4
bugfix(mj-section/mj-core): issues with background attributes
dazgreer Mar 16, 2026
b5b3b26
chore(mjml-core): updated logic statement
dazgreer Mar 18, 2026
25d6a8d
Merge branch 'fix/replace-html-minifier' into feature/html-updates-an…
dazgreer Mar 18, 2026
09263de
bugfix(mjml-parser-xml): updated test following merge
dazgreer Mar 18, 2026
3184a11
fix(mjml-browser): rewrite mergeHeadStyleBlocks without cheerio
dazgreer Mar 18, 2026
5d653e8
bugfix(mjml-core): extract mergeHeadStyleBlocks to helper and add uni…
dazgreer Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 24 additions & 23 deletions doc/components_1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,23 @@ For instance, the `mj-button` component is, on the inside, a complex HTML layout
style="border:none;border-radius:3px;"
align="center"
>
<tbody>
<tr>
<td
style="background-color:#414141;border-radius:3px;color:#ffffff;cursor:auto;"
align="center"
valign="middle"
bgcolor="#414141"
<tr>
<td
style="background-color:#414141;border-radius:3px;color:#ffffff;cursor:auto;"
align="center"
valign="middle"
bgcolor="#414141"
>
<a
class="mj-content"
href="#"
style="display:inline-block;text-decoration:none;background-color:#414141;border:1px solid #414141;border-radius:3px;color:#ffffff;font-size:13px;font-weight:bold;padding:15px 30px;"
target="_blank"
>
<a
class="mj-content"
href="#"
style="display:inline-block;text-decoration:none;background-color:#414141;border:1px solid #414141;border-radius:3px;color:#ffffff;font-size:13px;font-weight:bold;padding:15px 30px;"
target="_blank"
>
Hello There!
</a>
</td>
</tr>
</tbody>
Hello There!
</a>
</td>
</tr>
</table>
```

Expand All @@ -49,11 +47,14 @@ An MJML document starts with an `mjml` tag. It can contain only `mj-head` and `m

#### Attributes

| attribute | accepts | description | default value |
| --------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| owa | string | if set to `desktop`, this will force the desktop version for older (self-hosted) versions of Outlook.com that don't support media queries (cf. [this issue](https://github.com/mjmlio/mjml/issues/2241)) | `none` |
| lang | string | adds a `lang` attribute in the `html` and `body > div` tags | `und` |
| dir | string | adds a `dir` attribute in the `html` and `body > div` tags | `auto` |
| attribute | accepts | description | default value |
| ----------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| dir | string | adds a `dir` attribute in the `html` and `body > div` tags | `auto` |
| lang | string | adds a `lang` attribute in the `html` and `body > div` tags | `und` |
| support-dark-mode | boolean | setting to `true` will add `<meta>` tags and `:root` CSS to enable support | `false` |
| support-outlook-classic | boolean | setting to `false` will remove all Outlook specific code when compiled to HTML | `true` |
| owa | string | if set to `desktop`, this will force the desktop version for older (self-hosted) versions of Outlook.com that don't support media queries (cf. [this issue](https://github.com/mjmlio/mjml/issues/2241)) | `none` |


### mj-head

Expand Down
4 changes: 2 additions & 2 deletions packages/mjml-accordion/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ Readers can interact by clicking on the tabs to reveal the content, providing a
| border | string | CSS border format | `2px solid black` |
| container-background-color | CSS color formats | background-color of the cell | |
| css-class | string | class name, added to the root HTML element created | |
| font-family | string | font | `Ubuntu, Helvetica, Arial, sans-serif` |
| icon-align | `top` `middle` `bottom` | icon alignment | `middle` |
| font-family | string | font | `Ubuntu, sans-serif` |
| icon-align | `top` `middle` `bottom` | icon alignment | |
| icon-height | `px` `%` | icon height | `32px` |
| icon-position | left,<br>right | display icon left or right | `right` |
| icon-unwrapped-alt | string | alt text when accordion is unwrapped | `-` |
Expand Down
29 changes: 13 additions & 16 deletions packages/mjml-accordion/src/Accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@ export default class MjAccordion extends BodyComponent {

static defaultAttributes = {
border: '2px solid black',
'font-family': 'Ubuntu, Helvetica, Arial, sans-serif',
'icon-align': 'middle',
'font-family': 'Ubuntu, sans-serif',
'icon-wrapped-url': 'https://i.imgur.com/bIXv1bk.png',
'icon-wrapped-alt': '+',
'icon-unwrapped-url': 'https://i.imgur.com/w4uTygT.png',
Expand All @@ -41,20 +40,21 @@ export default class MjAccordion extends BodyComponent {
noinput.mj-accordion-checkbox { display:block!important; }

@media yahoo, only screen and (min-width:0) {
.mj-accordion-element { display:block; }
input.mj-accordion-checkbox, .mj-accordion-less { display:none!important; }
input.mj-accordion-checkbox + * .mj-accordion-title { cursor:pointer; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; user-select:none; }
input.mj-accordion-checkbox + * .mj-accordion-content { overflow:hidden; display:none; }
input.mj-accordion-checkbox + * .mj-accordion-more { display:block!important; }
input.mj-accordion-checkbox:checked + * .mj-accordion-content { display:block; }

input.mj-accordion-checkbox, .mj-accordion-less,
input.mj-accordion-checkbox:checked + * .mj-accordion-more { display:none!important; }

.mj-accordion-element,
input.mj-accordion-checkbox + * .mj-accordion-more,
input.mj-accordion-checkbox:checked + * .mj-accordion-content,
input.mj-accordion-checkbox:checked + * .mj-accordion-less { display:block!important; }
}

.moz-text-html input.mj-accordion-checkbox + * .mj-accordion-title { cursor: auto; touch-action: auto; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }
.moz-text-html input.mj-accordion-checkbox + * .mj-accordion-content { overflow: hidden; display: block; }
.moz-text-html input.mj-accordion-checkbox + * .mj-accordion-ico { display: none; }

/* prettier-ignore */
@goodbye { @gmail }
`

Expand All @@ -64,8 +64,7 @@ export default class MjAccordion extends BodyComponent {
width: '100%',
'border-collapse': 'collapse',
border: this.getAttribute('border'),
'border-bottom': 'none',
'font-family': this.getAttribute('font-family'),
...(this.getAttribute('border') !== 'none' && this.getAttribute('border') !== '0' && this.getAttribute('border') !== '0px' && { 'border-bottom': '0' }),
},
}
}
Expand Down Expand Up @@ -105,12 +104,10 @@ export default class MjAccordion extends BodyComponent {
style: 'table',
})}
>
<tbody>
${this.renderChildren(this.props.children, {
attributes: childrenAttr,
})}
</tbody>
${this.renderChildren(this.props.children, {
attributes: childrenAttr,
})}
</table>
`
`
}
}
5 changes: 1 addition & 4 deletions packages/mjml-accordion/src/AccordionElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,9 @@ export default class MjAccordionElement extends BodyComponent {
getStyles() {
return {
td: {
padding: '0px',
'background-color': this.getAttribute('background-color'),
},
label: {
'font-size': '13px',
'font-family': this.getAttribute('font-family'),
},
input: {
Expand Down Expand Up @@ -129,7 +127,6 @@ export default class MjAccordionElement extends BodyComponent {
</div>
</label>
</td>
</tr>
`
</tr>`
}
}
10 changes: 4 additions & 6 deletions packages/mjml-accordion/src/AccordionText.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default class MjAccordionText extends BodyComponent {
},
table: {
width: '100%',
'border-bottom': this.getAttribute('border'),
...(this.getAttribute('border') !== 'none' && this.getAttribute('border') !== '0' && this.getAttribute('border') !== '0px' && { 'border-bottom': this.getAttribute('border') }),
},
}
}
Expand Down Expand Up @@ -93,11 +93,9 @@ export default class MjAccordionText extends BodyComponent {
style: 'table',
})}
>
<tbody>
<tr>
${this.renderContent()}
</tr>
</tbody>
<tr>
${this.renderContent()}
</tr>
</table>
</div>
`
Expand Down
16 changes: 6 additions & 10 deletions packages/mjml-accordion/src/AccordionTitle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default class MjAccordionTitle extends BodyComponent {
},
table: {
width: '100%',
'border-bottom': this.getAttribute('border'),
...(this.getAttribute('border') !== 'none' && this.getAttribute('border') !== '0' && this.getAttribute('border') !== '0px' && { 'border-bottom': this.getAttribute('border') }),
},
td2: {
padding: '16px',
Expand Down Expand Up @@ -82,8 +82,7 @@ export default class MjAccordionTitle extends BodyComponent {
})}
>
${this.getContent()}
</td>
`
</td>`
}

renderIcons() {
Expand Down Expand Up @@ -134,13 +133,10 @@ export default class MjAccordionTitle extends BodyComponent {
style: 'table',
})}
>
<tbody>
<tr>
${content}
</tr>
</tbody>
<tr>
${content}
</tr>
</table>
</div>
`
</div>`
}
}
40 changes: 16 additions & 24 deletions packages/mjml-body/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,6 @@ export default class MjBody extends BodyComponent {

getStyles() {
return {
body: {
'word-spacing': 'normal',
'background-color': this.getAttribute('background-color'),
},
div: {
'word-spacing': 'normal',
'background-color': this.getAttribute('background-color'),
Expand All @@ -39,26 +35,22 @@ export default class MjBody extends BodyComponent {
globalData: { lang, dir, title, preview },
} = this.context

return `
<body ${this.htmlAttributes({
id: this.getAttribute('id'),
class: this.getAttribute('css-class'),
style: 'body',
return `<body${this.htmlAttributes({
id: this.getAttribute('id'),
class: this.getAttribute('css-class'),
'xml:lang': lang,
})}>
${buildPreview(preview)}
<div${this.htmlAttributes({
...(title && { 'aria-label': title }),
'aria-roledescription': 'email',
role: 'article',
lang,
dir,
style: 'div',
})}>
${buildPreview(preview)}
<div
${this.htmlAttributes({
...(title && { 'aria-label': title }),
'aria-roledescription': 'email',
role: 'article',
lang,
dir,
style: 'div',
})}
>
${this.renderChildren()}
</div>
</body>
`
${this.renderChildren()}
</div>
</body>`
}
}
9 changes: 5 additions & 4 deletions packages/mjml-button/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,26 +49,27 @@ Displays a customizable button.
| color | CSS color formats | text color | `#ffffff` |
| container-background-color | CSS color formats | button container background color | |
| css-class | string | class name, added to the root HTML element created | |
| font-family | string | font name | `Ubuntu, Helvetica, Arial, sans-serif` |
| font-family | string | font name | `Ubuntu, sans-serif` |
| font-size | `px` | text size | `13px` |
| font-style | string | CSS values, e.g. `normal` `italic` `oblique` | |
| font-weight | string | text thickness | `normal` |
| font-weight | string | text thickness | |
| height | `px` `%` | button height | |
| href | string | URL format | |
| inner-padding | `px` `%` | inner button padding, <br>supports up to 4 parameters | `10px 25px` |
| letter-spacing | `px` `em` | letter-spacing | |
| line-height | `px` `%` | line-height on link | `120%` |
| multiline | boolean | improve button display in Outlook classic | |
| name | string | specify the name attribute for the button link | |
| padding | `px` `%` | button container padding, supports up to 4 parameters | `10px 25px` |
| padding-bottom | `px` `%` | button container bottom padding | |
| padding-left | `px` `%` | button container left padding | |
| padding-right | `px` `%` | button container right padding | |
| padding-top | `px` `%` | button container top padding | |
| rel | string | specify the rel attribute for the button link | |
| target | string | specify the target attribute for the button link | `_blank` |
| target | string | specify the target attribute for the button link | |
| text-align | `left` `center` `right` | text-align button content | |
| text-decoration | string | underline/overline/none | `none` |
| text-transform | string | capitalize/uppercase/lowercase | `none` |
| text-transform | string | capitalize/uppercase/lowercase | |
| title | string | tooltip & accessibility | |
| vertical-align | `top` `bottom` `middle` `vertical` | vertical alignment | `middle` |
| width | `px` `%` | button width | |
Expand Down
Loading
Loading