testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Correctly parse <mj-style> and <mj-raw> (#17400)

Browse Source
This commit is contained in:
fisker Cheung authored and GitHub committed 2025-05-06 10:31:59 +08:00
1 parent 906565775b
commit 59c635b939
19 files changed
+214 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/mjml/17400.md
+17
View File
@@ -0,0 +1,17 @@
#### Correctly parse `<mj-style>` and `<mj-raw>` (#17400 by @fisker)
<!-- prettier-ignore -->
```html
<!-- Input -->
<mj-style>
a::before {
content: "</p>";
}
</mj-style>
<!-- Prettier stable -->
SyntaxError: Unexpected closing tag "p".
<!-- Prettier main -->
Correctly parsed as CSS.
```
src/language-html/parser-html.js
+7 -1
View File
@@ -445,8 +445,14 @@ const HTML_PARSE_OPTIONS = {
// HTML
export const html = createParser(HTML_PARSE_OPTIONS);
const MJML_RAW_TAGS = new Set(["mj-style", "mj-raw"]);
// MJML https://mjml.io/
export const mjml = createParser({ ...HTML_PARSE_OPTIONS, name: "mjml" });
export const mjml = createParser({
...HTML_PARSE_OPTIONS,
name: "mjml",
shouldParseAsRawText: (tagName) => MJML_RAW_TAGS.has(tagName),
});
// Angular
export const angular = createParser({ name: "angular" });
// Vue
tests/config/utils/check-parsers.js
+4 -1
View File
@@ -50,7 +50,10 @@ const categoryParsers = new Map([
"html",
{ parsers: ["html"], verifyParsers: [], extensions: [".html", ".svg"] },
],
["mjml", { parsers: ["mjml"], verifyParsers: [], extensions: [".mjml"] }],
[
"mjml",
{ parsers: ["mjml"], verifyParsers: ["html"], extensions: [".mjml"] },
],
[
"js",
{
tests/format/mjml/mjml/__snapshots__/format.test.js.snap
+50
View File
@@ -13,6 +13,56 @@ printWidth: 80
================================================================================
`;
exports[`example.mjml format 1`] = `
====================================options=====================================
parsers: ["mjml"]
printWidth: 80
| printWidth
=====================================input======================================
<!-- https://github.com/prettier/prettier/pull/17400#issuecomment-2829653054 -->
<mjml>
<mj-boDy>
<mj-seCTion>
<mj-column>
<!-- both are equivalent -->
<mj-iMage width="100px" src="/assets/img/logo-small.png"></mj-iMage>
<mj-image width="100px" src="/assets/img/logo-small.png" />
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
</mj-column>
</mj-seCTion>
</mj-boDy>
</mjml>
=====================================output=====================================
<!-- https://github.com/prettier/prettier/pull/17400#issuecomment-2829653054 -->
<mjml>
<mj-boDy>
<mj-seCTion>
<mj-column>
<!-- both are equivalent -->
<mj-iMage width="100px" src="/assets/img/logo-small.png"></mj-iMage>
<mj-image width="100px" src="/assets/img/logo-small.png" />
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica"
>Hello World</mj-text
>
</mj-column>
</mj-seCTion>
</mj-boDy>
</mjml>
================================================================================
`;
exports[`head.mjml format 1`] = `
====================================options=====================================
parsers: ["mjml"]
tests/format/mjml/mjml/example.mjml
+19
View File
@@ -0,0 +1,19 @@
<!-- https://github.com/prettier/prettier/pull/17400#issuecomment-2829653054 -->
<mjml>
<mj-boDy>
<mj-seCTion>
<mj-column>
<!-- both are equivalent -->
<mj-iMage width="100px" src="/assets/img/logo-small.png"></mj-iMage>
<mj-image width="100px" src="/assets/img/logo-small.png" />
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
</mj-column>
</mj-seCTion>
</mj-boDy>
</mjml>
tests/format/mjml/parse/mj-raw/__snapshots__/format.test.js.snap
+38
View File
@@ -0,0 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`invalid-in-html.mjml [html] format 1`] = `
"Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (3:9)
1 | <mj-raw><p></mj-raw>
2 | <mj-text>Wrapped</mj-text>
> 3 | <mj-raw></p></mj-raw>
| ^^^^
4 |
5 | <MJ-RAW><P></MJ-RAW>
6 | <MJ-TEXT>WRAPPED</MJ-TEXT>"
`;
exports[`invalid-in-html.mjml format 1`] = `
====================================options=====================================
parsers: ["mjml", "html"]
printWidth: 80
| printWidth
=====================================input======================================
<mj-raw><p></mj-raw>
<mj-text>Wrapped</mj-text>
<mj-raw></p></mj-raw>
<MJ-RAW><P></MJ-RAW>
<MJ-TEXT>WRAPPED</MJ-TEXT>
<MJ-RAW></P></MJ-RAW>
=====================================output=====================================
<mj-raw><p></mj-raw>
<mj-text>Wrapped</mj-text>
<mj-raw></p></mj-raw>
<MJ-RAW><P></MJ-RAW>
<MJ-TEXT>WRAPPED</MJ-TEXT>
<MJ-RAW></P></MJ-RAW>
================================================================================
`;
tests/format/mjml/parse/mj-raw/format.test.js
+3
View File
@@ -0,0 +1,3 @@
runFormatTest(import.meta, ["mjml", "html"], {
errors: { html: ["invalid-in-html.mjml"] },
});
tests/format/mjml/parse/mj-raw/invalid-in-html.mjml
+7
View File
@@ -0,0 +1,7 @@
<mj-raw><p></mj-raw>
<mj-text>Wrapped</mj-text>
<mj-raw></p></mj-raw>
<MJ-RAW><P></MJ-RAW>
<MJ-TEXT>WRAPPED</MJ-TEXT>
<MJ-RAW></P></MJ-RAW>
tests/format/mjml/parse/mj-style/__snapshots__/format.test.js.snap
+39
View File
@@ -0,0 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`invalid-in-html.mjml [html] format 1`] = `
"Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (2:25)
1 | <mj-style>
> 2 | a::before { content: "</p>";
| ^^^^
3 | }
4 | </mj-style>
5 |"
`;
exports[`invalid-in-html.mjml format 1`] = `
====================================options=====================================
parsers: ["mjml", "html"]
printWidth: 80
| printWidth
=====================================input======================================
<mj-style>
a::before { content: "</p>";
}
</mj-style>
<MJ-STYLE>
a::before { content: "</p>";
}
</MJ-STYLE>
=====================================output=====================================
<mj-style>
a::before {
content: "</p>";
}
</mj-style>
<MJ-STYLE> a::before { content: "</p>"; } </MJ-STYLE>
================================================================================
`;
tests/format/mjml/parse/mj-style/format.test.js
+3
View File
@@ -0,0 +1,3 @@
runFormatTest(import.meta, ["mjml", "html"], {
errors: { html: ["invalid-in-html.mjml"] },
});
tests/format/mjml/parse/mj-style/invalid-in-html.mjml
+9
View File
@@ -0,0 +1,9 @@
<mj-style>
a::before { content: "</p>";
}
</mj-style>
<MJ-STYLE>
a::before { content: "</p>";
}
</MJ-STYLE>
tests/integration/cli/experimental-cli/test-0/should-format.js
+6
View File
@@ -0,0 +1,6 @@
console.log(
"Hello, world!"
)
tests/integration/cli/experimental-cli/test-0/should-not-format.js
+1
View File
@@ -0,0 +1 @@
console.log("Hello, world!");
tests/integration/cli/experimental-cli/test-1/should-format.js
+6
View File
@@ -0,0 +1,6 @@
console.log(
"Hello, world!"
)
tests/integration/cli/experimental-cli/test-1/should-not-format.js
+1
View File
@@ -0,0 +1 @@
console.log("Hello, world!");
tests/integration/cli/experimental-cli/test-2/should-format.js
+1
View File
@@ -0,0 +1 @@
console.log("Hello, world!");
tests/integration/cli/experimental-cli/test-2/should-not-format.js
+1
View File
@@ -0,0 +1 @@
console.log("Hello, world!");
tests/integration/cli/experimental-cli/test-3/should-format.js
+1
View File
@@ -0,0 +1 @@
console.log("Hello, world!");
tests/integration/cli/experimental-cli/test-3/should-not-format.js
+1
View File
@@ -0,0 +1 @@
console.log("Hello, world!");