You can optimize your email Veeva Vault builds by using the uncss property in the settings.json file of your email project. The eWizard.js builder removes the CSS styles that aren't needed in the build. The builder checks the classes in the blocks-themes.json file if your email project uses dynamic themes, or the blocks.json file if the project doesn't use dynamic themes.
How it works
The email builder includes the UnCSS package that reduces the resulting build size and increases the email loading speed in the browser.
When you add selectors to the App.vue file of your email project, the email builder adds all CSS styles in your project to the resulting site build. Users may not apply all these CSS styles in eWizard Editor. As a result, certain CSS styles remain unused in the resulting build.
After running the build, UnCSS parses the stylesheets and filters out the selectors that aren't used in the HTML file. The remaining rules are converted back to CSS.
UnCSS works with JavaScript when building the page. It can't process the resulting CSS on user interactions like button clicks. Use the ignore option to keep the CSS classes that JavaScript adds on user interaction. For more information about other available options, see Options for the UnCSS tool.
Usage
To optimize the build:
1) Add the block class as a @media query in a CSS file. For example, common/styles/main.css:
/* ./common/styles/main.css */@media screen and (max-width: 480px), screen and (max-width: 480px) and (min-width: 1px) {
.bg-email-block-h1 {
width: 55% !important;
}
}2) Add the class to the <wiz-block> tag in the App.vue file:
<!-- ./App.vue --><wiz-block class="block header bg-email-block-h1 m-full-width m-mw-auto" align="center"
style="min-width: 640px; width: 640px;" :class="$DT.blocks.bgEmailBlockH1.firstBlockClass || 'm-p-b-16'"
:style="{ padding: $DT.blocks.bgEmailBlockH1.firstBlockPadding || '0 0 24px' }">
</wiz-block>When you export the email project to Veeva Vault in eWizard, the eWizard.js builder adds the list of classes required in the Veeva Vault build to the optimization and uncss fields in the settings.json file. The builder combines the list of classes with the classes that were added to the optimization and uncss fields before. You can also edit the list of classes in both fields manually.
// ./settings.json{
"optimization": {
"minifyClassesFilter": [
"block"
"block-content07a-placeholder",
"block-content08a-placeholder",
"break-columns",
"button-text",
"calendar-text-day",
"calendar-text-month",
"card-list-image",
]
},
"uncss": {
"ignore": [
"/\\.block/",
"/\\.block-content07a-placeholder/",
"/\\.block-content08a-placeholder/",
"/\\.break-columns/",
"/\\.button-text/",
"/\\.calendar-text-day/",
"/\\.calendar-text-month/",
"/\\.card-list-image/",
]
},
}The resulting Veeva Vault build includes only the classes mentioned in the optimization and uncss fields.