CSS Size and icons

[essenmitsosse]

We are currently transmitting ~150kb for our main CSS file. Which seems waaay to much given the complexity of the site. Below some analysis:

Icons

By my rough estimates around ~80% of the CSS are just the icons. Half of the icons are only used by code by the file tree component (i-vscode-icons).

The icons itself are defined like this (indentation for readability):

.i-vscode-icons-file-type-node{ 
    background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' forced-color-adjust='preserve-parent-color' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2383cd29' d='M16 30a2.15 2.15 0 0 1-1.076-.288L11.5 27.685c-.511-.286-.262-.387-.093-.446a6.8 6.8 0 0 0 1.549-.7a.26.26 0 0 1 .255.019l2.631 1.563a.34.34 0 0 0 .318 0l10.26-5.922a.32.32 0 0 0 .157-.278V10.075a.33.33 0 0 0-.159-.283l-10.26-5.917a.32.32 0 0 0-.317 0L5.587 9.794a.33.33 0 0 0-.162.281v11.841a.32.32 0 0 0 .161.274L8.4 23.814c1.525.762 2.459-.136 2.459-1.038V11.085a.3.3 0 0 1 .3-.3h1.3a.3.3 0 0 1 .3.3v11.692c0 2.035-1.108 3.2-3.038 3.2a4.4 4.4 0 0 1-2.363-.642l-2.697-1.547a2.17 2.17 0 0 1-1.076-1.872V10.075A2.16 2.16 0 0 1 4.661 8.2l10.261-5.924a2.25 2.25 0 0 1 2.156 0L27.338 8.2a2.17 2.17 0 0 1 1.077 1.87v11.846a2.17 2.17 0 0 1-1.077 1.872l-10.26 5.924A2.15 2.15 0 0 1 16 30'/%3E%3Cpath fill='%2383cd29' d='M14.054 17.953a.3.3 0 0 1 .3-.3h1.327a.3.3 0 0 1 .295.251c.2 1.351.8 2.032 3.513 2.032c2.161 0 3.082-.489 3.082-1.636c0-.661-.261-1.152-3.62-1.481c-2.808-.278-4.544-.9-4.544-3.144c0-2.07 1.745-3.305 4.67-3.305c3.287 0 4.914 1.141 5.12 3.589a.3.3 0 0 1-.295.323h-1.336a.3.3 0 0 1-.288-.232c-.319-1.421-1.1-1.875-3.2-1.875c-2.36 0-2.634.822-2.634 1.438c0 .746.324.964 3.51 1.385c3.153.417 4.651 1.007 4.651 3.223c0 2.236-1.864 3.516-5.115 3.516c-4.495.006-5.436-2.055-5.436-3.784'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat
}

.i-vscode-icons-file-type-node,.i-vscode-icons-file-type-npm{ 
    forced-color-adjust:preserve-parent-color;
    width:1.2em;
    height:1.2em;
    display:inline-block
}

.i-vscode-icons-file-type-npm{ 
    background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' forced-color-adjust='preserve-parent-color' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23c12127' d='M2 2h28v28H2'/%3E%3Cpath fill='%23fff' d='M7.25 7.25h17.5v17.5h-3.5v-14H16v14H7.25'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat
}

With two icons always sharing the same base style definition, even though that is repeated again in the inline svg definition.

Compare this to how FontAwesome transmits an icons:

m = {
    prefix: "fasr",
    iconName: "magnifying-glass",
    icon: [576, 512, [128269, "search"], "f002", "M400.4 208a160 160 0 1 0 -320 0 160 160 0 1 0 320 0zM369.6 371.1c-35.5 28.1-80.3 44.9-129.1 44.9-114.9 0-208-93.1-208-208s93.1-208 208-208 208 93.1 208 208c0 48.8-16.8 93.7-44.9 129.1l133.9 133.9 17 17-33.9 33.9-17-17-133.9-133.9z"]
}

Especially for simpler icons, this saves a lot of data.

Vue Data UI

Roughly another 25% are caused by Vue UI — I tried to solve in #1237 by lazy loading, but that did not work.

Solutions

I am currently not really sure how to solve it. Uno CSS is supposed to only add classes, that are actually used, but this does not prevent all the CSS from Vue Data UI to end up in the final package.

I am also not sure, if the way the icons are currently handled is optimal, especially since (again) this prevents lazy loading.

[antfu]

Experiments in #1375

re: how FontAwesome transmits an icons:

I wonder if with gzip applied to the css, would this approach really makes a big difference? Still, I have doubts about runtime icons solutions; they always require JavaScript to load first, and could consume extra computing power to calculate the icon generation, as well as extra DOM elements.