The site builder includes the UnCSS tool that removes the unused CSS from the site resulting build. This tool reduces the resulting build size and increases the site loading speed in the browser.
How it works
When you add certain selectors with the CSS styles to the App.vue file or the component index.vue file of your site project, the site builder adds all the 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, the UnCSS tool parses the stylesheets and filters out the selectors that aren't used in the HTML file. The remaining rules are converted back to CSS.
The UnCSS tool 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 preserve the CSS classes that JavaScript adds on user interaction.
TIP: The UnCSS tool removes the unused CSS from all the project components. Viseven default components like wiz-text or wiz-video already have the ignore option for the CSS classes triggered by user interactions.
Usage
To use the UnCSS tool in your site project, add the uncss field to the ./settings.json file.
// ./settings.json
{
"name": "Universal master site template",
"id": "683d239c-c729-44af-9b67-22926e46db37",
"localization": {},
"scheme": "scheme1",
"browserslist": [
"last 2 versions"
],
"uncss": {}
}
The uncss field has the false value by default. Use the uncss field with the empty object to apply the UnCSS tool.
Add the options to the object to apply the UnCSS rules. For example, to use the ignore option:
// ./settings.json
{
"name": "Universal master site template",
"id": "683d239c-c729-44af-9b67-22926e46db37",
"localization": {},
"scheme": "scheme1",
"browserslist": [
"last 2 versions"
],
"uncss": {
"ignore": [
"/\\.footer-product-logo/",
"/\\.item-text/",
"/\\.m-center/"
]
}
}
For more information about other available options, see Options for the UnCSS tool.