ui: Move all our icons to use CSS custom properties instead of SASS vars (#10298)

* ui: Move all our icons to use CSS custom properties

The good thing about SASS vars is, if you don't use them they get removed from the final build. Whereas with CSS we have no tree-shaking to get rid of unused CSS custom properties. We can mostly work around this and for some things like colors its no big deal if we have some hex-codes in the build that we don't use as hex-codes are relatively small.

We've been slowly but surely moving all of our colors (and other things) to use CSS custom properties instead of SASS vars now that we have them available.

This commit makes use of the 'tree-shaking' abilities of @extend to ensure that we only compile in the icons that we use.

This commit is mostly churn-less as we already use @extend for the majority of our icons, so generally there is zero change here for working on the UI, but I did spot one single place where we were using SASS vars instead of @extend. This now uses the new form (second commit)

Interestingly this reduces our CSS payload by ~2kb to ~53kb (around 25kb of that is these icons)
This commit is contained in:
John Cowen 2021-06-21 11:54:58 +01:00 committed by GitHub
parent 365ab6df11
commit 93c5780fab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 1737 additions and 1138 deletions

3
.changelog/10298.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: Move all CSS icons to use standard CSS custom properties rather than SASS variables
```

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,6 @@
%progress-indeterminate { %progress-indeterminate {
background-image: $loading-svg; @extend %loading-svg-prop;
background-image: var(--loading-svg);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: transparent; background-color: transparent;