Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
mjml-head-attributes
Advanced tools
The mjml-head-attributes npm package is a part of the MJML framework, which is used to create responsive email templates. The mjml-head-attributes component allows you to define default attributes for MJML components within the <mj-head> section, making it easier to apply consistent styling across multiple components.
Setting default attributes for MJML components
This feature allows you to set default attributes for MJML components like <mj-text> and <mj-button>. The provided code sample sets a default font size and color for <mj-text> components and a default background color for <mj-button> components.
<mjml>
<mj-head>
<mj-attributes>
<mj-text font-size="20px" color="#000000" />
<mj-button background-color="#ff0000" />
</mj-attributes>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text>This text will have a font size of 20px and color #000000.</mj-text>
<mj-button>This button will have a background color of #ff0000.</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Overriding default attributes
This feature allows you to override the default attributes set in the <mj-attributes> tag. The provided code sample shows how a specific <mj-text> component can have its own font size and color, different from the default values.
<mjml>
<mj-head>
<mj-attributes>
<mj-text font-size="20px" color="#000000" />
</mj-attributes>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text>This text will have a font size of 20px and color #000000.</mj-text>
<mj-text font-size="25px" color="#ff0000">This text will override the default attributes and have a font size of 25px and color #ff0000.</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
The mjml package is the core library of the MJML framework. It allows you to write responsive email templates using a simple markup language. While mjml-head-attributes is a specific component for setting default attributes, the mjml package provides the overall structure and components needed to build the entire email template.
The mjml-head package is another component of the MJML framework. It is used to define the head section of an MJML document, where you can include elements like <mj-title>, <mj-preview>, and <mj-attributes>. The mjml-head-attributes component is specifically for setting default attributes within the <mj-head> section.
The mjml-core package is the underlying engine that powers the MJML framework. It is responsible for parsing MJML code and converting it into responsive HTML. While mjml-head-attributes focuses on setting default attributes, mjml-core handles the overall rendering process.
Inside mj-attributes
, a tag citing one MJML component (like mj-text
;
see example) overrides default settings for listed MJML attributes
on the one component.
An mj-all
is like the above, but affects all MJML components via the one tag.
mj-class
tags create a named group of MJML attributes you can apply to MJML
components. To apply them, use mj-class="<name>"
.
<mjml>
<mj-head>
<mj-attributes>
<mj-text padding="0" />
<mj-class name="blue" color="blue" />
<mj-class name="big" font-size="20px" />
<mj-all font-family="Arial" />
</mj-attributes>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text mj-class="blue big">
Hello World!
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
In the following list, MJML applies only the first MJML attributes found:
FAQs
mjml-head-attributes
The npm package mjml-head-attributes receives a total of 528,555 weekly downloads. As such, mjml-head-attributes popularity was classified as popular.
We found that mjml-head-attributes demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.