Assets Management

yPack support every type of file. Specifically:

• .js .mjs processed and traspiled
• .css .scss .sass .styl processed and traspiled
• .svg minified with svgo can be outputted or inlined in a base64 encoding depending on a optional ?inline query string parameter
• .bmp .gif .jpe?g .png .avif minified and outputted into their own file
• .* process and outputted into their own chunk

Svg

All SVG files imported from your SCSS files will be optimized. SVG can also be manipulated, you can add/modify tags and attributes.

Transform parameter has following syntax: attr_name=attr_value optional_selector. Multiple values can be specified by separating them with comma: fill=red .path1, blue .path2. Parameters can be combined: fill=red&stroke=black.

.img {background-image: url('./img.svg?fill=#fff')}

/* Fill all <path/> tags */
.img {background-image: url('./img.svg?fill=#fff path')}

/* Fill all <path/> tags, stroke element with id="qwe" */
.img {background-image: url('./img.svg?fill=#fff path&stroke=black #qwe')}

Note that sharp # symbol in image query params should be encoded:

.img {background-image: url(img.svg?fill=#f0f)}

/* will be treated as */
.img {background-image: url(img.svg?fill=)}

The new SVG files will be created and saved like a chunk.

Fonts

All WOFF, WOFF2, OTF, TTF files imported from your build files will be bundled and saved in a separate chunk.