Skip to content

Commit

Permalink
feat(mjml-core): remove randomness when generating component ids
Browse files Browse the repository at this point in the history 
Signed-off-by: Jérémie Drouet <[email protected]>
  • Loading branch information
@jdrouet
jdrouet committed Jul 24, 2023
1 parent 7663ce5 commit 9610fdc
Show file tree
Hide file tree
Showing 19 changed files with 241 additions and 242 deletions.
1 change: 0 additions & 1 deletion Cargo.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 1 addition & 5 deletions packages/mrml-core/Cargo.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ default = ["orderedmap", "json", "parse", "print", "render"]
json = ["dep:mrml-json-macros", "dep:serde", "dep:serde_json"]
parse = ["dep:mrml-parse-macros", "dep:xmlparser", "dep:thiserror"]
print = ["dep:mrml-print-macros"]
render = ["dep:rand", "dep:thiserror"]
render = ["dep:thiserror"]
orderedmap = ["dep:indexmap", "dep:rustc-hash"]
local-loader = []
http-loader = ["http-loader-ureq"]
Expand All @@ -31,10 +31,6 @@ http-loader-ureq = ["dep:ureq", "http-loader-base"]
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
rand = { default-features = false, features = [
"std",
"std_rng",
], version = "0.8", optional = true }
serde = { version = "1.0", optional = true, features = ["derive"] }
serde_json = { version = "1.0", optional = true }
xmlparser = { version = "0.13", optional = true }
Expand Down
8 changes: 4 additions & 4 deletions packages/mrml-core/lib/css-compare/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,22 +386,22 @@ mod tests {
#[test]
fn with_media_yahoo() {
let expected = r#"@media screen, yahoo {
.mj-carousel-aaaaaaaa-icons-cell,
.mj-carousel-00000000-icons-cell,
.mj-carousel-previous-icons,
.mj-carousel-next-icons {
display: none !important;
}
.mj-carousel-aaaaaaaa-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-aaaaaaaa-thumbnail-1 {
.mj-carousel-00000000-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-00000000-thumbnail-1 {
border-color: transparent;
}
}"#;
let generated = r#"@media screen, yahoo {
.mj-carousel-aaaaaaaa-icons-cell,
.mj-carousel-00000000-icons-cell,
.mj-carousel-previous-icons,
.mj-carousel-next-icons {
display: none !important;
}
.mj-carousel-aaaaaaaa-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-aaaaaaaa-thumbnail-1 {
.mj-carousel-00000000-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-00000000-thumbnail-1 {
border-color: transparent;
}
}"#;
Expand Down
4 changes: 2 additions & 2 deletions packages/mrml-core/lib/html-compare/resources/expected.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,12 +129,12 @@
<tr>
<td align="center" style="font-size:0px;word-break:break-word;">
<!--[if !mso]><!-->
<input type="checkbox" id="aaaaaaaa" class="mj-menu-checkbox"
<input type="checkbox" id="00000000" class="mj-menu-checkbox"
style="display:none !important; max-height:0; visibility:hidden;" />
<!--<![endif]-->
<div class="mj-menu-trigger"
style="display:none;max-height:0px;max-width:0px;font-size:0px;overflow:hidden;">
<label for="aaaaaaaa" class="mj-menu-label"
<label for="00000000" class="mj-menu-label"
style="display:block;cursor:pointer;mso-hide:all;-moz-user-select:none;user-select:none;color:#000000;font-size:30px;font-family:Ubuntu, Helvetica, Arial, sans-serif;text-transform:uppercase;text-decoration:none;line-height:30px;padding:10px;"
align="center">
<span class="mj-menu-icon-open" style="mso-hide:all;">
Expand Down
4 changes: 2 additions & 2 deletions packages/mrml-core/lib/html-compare/resources/generated.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,12 +129,12 @@
<tr>
<td align="center" style="font-size:0px;word-break:break-word;">
<!--[if !mso]><!-->
<input type="checkbox" id="aaaaaaaa" class="mj-menu-checkbox"
<input type="checkbox" id="00000000" class="mj-menu-checkbox"
style="display:none !important; max-height:0; visibility:hidden;" />
<!--<![endif]-->
<div class="mj-menu-trigger"
style="display:none;max-height:0px;max-width:0px;font-size:0px;overflow:hidden;">
<label for="aaaaaaaa" class="mj-menu-label"
<label for="00000000" class="mj-menu-label"
style="display:block;cursor:pointer;mso-hide:all;-moz-user-select:none;user-select:none;color:#000000;font-size:30px;font-family:Ubuntu, Helvetica, Arial, sans-serif;text-transform:uppercase;text-decoration:none;line-height:30px;padding:10px;"
align="center">
<span class="mj-menu-icon-open" style="mso-hide:all;">
Expand Down
84 changes: 42 additions & 42 deletions packages/mrml-core/resources/compare/success/mj-carousel-align-border-radius-class.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
user-select: none;
}

.mj-carousel-aaaaaaaa-icons-cell {
.mj-carousel-00000000-icons-cell {
display: table-cell !important;
width: 44px !important;
}
Expand All @@ -94,32 +94,32 @@
touch-action: manipulation;
}

.mj-carousel-aaaaaaaa-radio:checked+.mj-carousel-content .mj-carousel-image,
.mj-carousel-aaaaaaaa-radio:checked+*+.mj-carousel-content .mj-carousel-image,
.mj-carousel-aaaaaaaa-radio:checked+*+*+.mj-carousel-content .mj-carousel-image {
.mj-carousel-00000000-radio:checked+.mj-carousel-content .mj-carousel-image,
.mj-carousel-00000000-radio:checked+*+.mj-carousel-content .mj-carousel-image,
.mj-carousel-00000000-radio:checked+*+*+.mj-carousel-content .mj-carousel-image {
display: none !important;
}

.mj-carousel-aaaaaaaa-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-image-1,
.mj-carousel-aaaaaaaa-radio-2:checked+*+.mj-carousel-content .mj-carousel-image-2,
.mj-carousel-aaaaaaaa-radio-3:checked+.mj-carousel-content .mj-carousel-image-3 {
.mj-carousel-00000000-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-image-1,
.mj-carousel-00000000-radio-2:checked+*+.mj-carousel-content .mj-carousel-image-2,
.mj-carousel-00000000-radio-3:checked+.mj-carousel-content .mj-carousel-image-3 {
display: block !important;
}

.mj-carousel-previous-icons,
.mj-carousel-next-icons,
.mj-carousel-aaaaaaaa-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-next-2,
.mj-carousel-aaaaaaaa-radio-2:checked+*+.mj-carousel-content .mj-carousel-next-3,
.mj-carousel-aaaaaaaa-radio-3:checked+.mj-carousel-content .mj-carousel-next-1,
.mj-carousel-aaaaaaaa-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-previous-3,
.mj-carousel-aaaaaaaa-radio-2:checked+*+.mj-carousel-content .mj-carousel-previous-1,
.mj-carousel-aaaaaaaa-radio-3:checked+.mj-carousel-content .mj-carousel-previous-2 {
.mj-carousel-00000000-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-next-2,
.mj-carousel-00000000-radio-2:checked+*+.mj-carousel-content .mj-carousel-next-3,
.mj-carousel-00000000-radio-3:checked+.mj-carousel-content .mj-carousel-next-1,
.mj-carousel-00000000-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-previous-3,
.mj-carousel-00000000-radio-2:checked+*+.mj-carousel-content .mj-carousel-previous-1,
.mj-carousel-00000000-radio-3:checked+.mj-carousel-content .mj-carousel-previous-2 {
display: block !important;
}

.mj-carousel-aaaaaaaa-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-aaaaaaaa-thumbnail-1,
.mj-carousel-aaaaaaaa-radio-2:checked+*+.mj-carousel-content .mj-carousel-aaaaaaaa-thumbnail-2,
.mj-carousel-aaaaaaaa-radio-3:checked+.mj-carousel-content .mj-carousel-aaaaaaaa-thumbnail-3 {
.mj-carousel-00000000-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-00000000-thumbnail-1,
.mj-carousel-00000000-radio-2:checked+*+.mj-carousel-content .mj-carousel-00000000-thumbnail-2,
.mj-carousel-00000000-radio-3:checked+.mj-carousel-content .mj-carousel-00000000-thumbnail-3 {
border-color: #cccccc !important;
}

Expand All @@ -128,19 +128,19 @@
display: none !important;
}

.mj-carousel-aaaaaaaa-thumbnail:hover+*+*+.mj-carousel-main .mj-carousel-image,
.mj-carousel-aaaaaaaa-thumbnail:hover+*+.mj-carousel-main .mj-carousel-image,
.mj-carousel-aaaaaaaa-thumbnail:hover+.mj-carousel-main .mj-carousel-image {
.mj-carousel-00000000-thumbnail:hover+*+*+.mj-carousel-main .mj-carousel-image,
.mj-carousel-00000000-thumbnail:hover+*+.mj-carousel-main .mj-carousel-image,
.mj-carousel-00000000-thumbnail:hover+.mj-carousel-main .mj-carousel-image {
display: none !important;
}

.mj-carousel-thumbnail:hover {
border-color: #fead0d !important;
}

.mj-carousel-aaaaaaaa-thumbnail-1:hover+*+*+.mj-carousel-main .mj-carousel-image-1,
.mj-carousel-aaaaaaaa-thumbnail-2:hover+*+.mj-carousel-main .mj-carousel-image-2,
.mj-carousel-aaaaaaaa-thumbnail-3:hover+.mj-carousel-main .mj-carousel-image-3 {
.mj-carousel-00000000-thumbnail-1:hover+*+*+.mj-carousel-main .mj-carousel-image-1,
.mj-carousel-00000000-thumbnail-2:hover+*+.mj-carousel-main .mj-carousel-image-2,
.mj-carousel-00000000-thumbnail-3:hover+.mj-carousel-main .mj-carousel-image-3 {
display: block !important;
}

Expand All @@ -163,13 +163,13 @@

@media screen, yahoo {

.mj-carousel-aaaaaaaa-icons-cell,
.mj-carousel-00000000-icons-cell,
.mj-carousel-previous-icons,
.mj-carousel-next-icons {
display: none !important;
}

.mj-carousel-aaaaaaaa-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-aaaaaaaa-thumbnail-1 {
.mj-carousel-00000000-radio-1:checked+*+*+.mj-carousel-content .mj-carousel-00000000-thumbnail-1 {
border-color: transparent;
}
}
Expand All @@ -192,37 +192,37 @@
<td align="right" class="container" style="font-size:0px;word-break:break-word;">
<!--[if !mso]><!-->
<div class="mj-carousel">
<input class="mj-carousel-radio mj-carousel-aaaaaaaa-radio mj-carousel-aaaaaaaa-radio-1" checked="checked" type="radio" name="mj-carousel-radio-aaaaaaaa" id="mj-carousel-aaaaaaaa-radio-1" style="display:none;mso-hide:all;" />
<input class="mj-carousel-radio mj-carousel-aaaaaaaa-radio mj-carousel-aaaaaaaa-radio-2" type="radio" name="mj-carousel-radio-aaaaaaaa" id="mj-carousel-aaaaaaaa-radio-2" style="display:none;mso-hide:all;" />
<input class="mj-carousel-radio mj-carousel-aaaaaaaa-radio mj-carousel-aaaaaaaa-radio-3" type="radio" name="mj-carousel-radio-aaaaaaaa" id="mj-carousel-aaaaaaaa-radio-3" style="display:none;mso-hide:all;" />
<div class="mj-carousel-content mj-carousel-aaaaaaaa-content" style="display:table;width:100%;table-layout:fixed;text-align:center;font-size:0px;">
<a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#1" target="_blank" class="mj-carousel-thumbnail mj-carousel-aaaaaaaa-thumbnail mj-carousel-aaaaaaaa-thumbnail-1 ">
<label for="mj-carousel-aaaaaaaa-radio-1">
<input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-1" checked="checked" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-1" style="display:none;mso-hide:all;" />
<input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-2" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-2" style="display:none;mso-hide:all;" />
<input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-3" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-3" style="display:none;mso-hide:all;" />
<div class="mj-carousel-content mj-carousel-00000000-content" style="display:table;width:100%;table-layout:fixed;text-align:center;font-size:0px;">
<a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#1" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-1 ">
<label for="mj-carousel-00000000-radio-1">
<img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="first" width="110" />
</label>
</a>
<a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#2" target="_blank" class="mj-carousel-thumbnail mj-carousel-aaaaaaaa-thumbnail mj-carousel-aaaaaaaa-thumbnail-2 middle-thumbnail">
<label for="mj-carousel-aaaaaaaa-radio-2">
<a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#2" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-2 middle-thumbnail">
<label for="mj-carousel-00000000-radio-2">
<img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/09/[email protected]" width="110" />
</label>
</a>
<a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#3" target="_blank" class="mj-carousel-thumbnail mj-carousel-aaaaaaaa-thumbnail mj-carousel-aaaaaaaa-thumbnail-3 ">
<label for="mj-carousel-aaaaaaaa-radio-3">
<a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#3" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-3 ">
<label for="mj-carousel-00000000-radio-3">
<img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/09/[email protected]" width="110" />
</label>
</a>
<table style="caption-side:top;display:table-caption;table-layout:fixed;width:100%;" border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" class="mj-carousel-main">
<tbody>
<tr>
<td class="mj-carousel-aaaaaaaa-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;">
<td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;">
<div class="mj-carousel-previous-icons" style="display:none;mso-hide:all;">
<label for="mj-carousel-aaaaaaaa-radio-1" class="mj-carousel-previous mj-carousel-previous-1">
<label for="mj-carousel-00000000-radio-1" class="mj-carousel-previous mj-carousel-previous-1">
<img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" />
</label>
<label for="mj-carousel-aaaaaaaa-radio-2" class="mj-carousel-previous mj-carousel-previous-2">
<label for="mj-carousel-00000000-radio-2" class="mj-carousel-previous mj-carousel-previous-2">
<img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" />
</label>
<label for="mj-carousel-aaaaaaaa-radio-3" class="mj-carousel-previous mj-carousel-previous-3">
<label for="mj-carousel-00000000-radio-3" class="mj-carousel-previous mj-carousel-previous-3">
<img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" />
</label>
</div>
Expand All @@ -242,15 +242,15 @@
</div>
</div>
</td>
<td class="mj-carousel-aaaaaaaa-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;">
<td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;">
<div class="mj-carousel-next-icons" style="display:none;mso-hide:all;">
<label for="mj-carousel-aaaaaaaa-radio-1" class="mj-carousel-next mj-carousel-next-1">
<label for="mj-carousel-00000000-radio-1" class="mj-carousel-next mj-carousel-next-1">
<img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" />
</label>
<label for="mj-carousel-aaaaaaaa-radio-2" class="mj-carousel-next mj-carousel-next-2">
<label for="mj-carousel-00000000-radio-2" class="mj-carousel-next mj-carousel-next-2">
<img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" />
</label>
<label for="mj-carousel-aaaaaaaa-radio-3" class="mj-carousel-next mj-carousel-next-3">
<label for="mj-carousel-00000000-radio-3" class="mj-carousel-next mj-carousel-next-3">
<img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" />
</label>
</div>
Expand Down
Loading

0 comments on commit 9610fdc

Please sign in to comment.