Size of the theme

[laCour]

This theme has grown quite large over time. This issue aims to provide continual insight into the size of theme, so that it can be kept in check.

As of 2018-09-05, we're at 205.3kB with 2,019 rules, 3,084 selectors, and 2,655 declarations. The theme started in mid-2014 at 12.2kB with 123 rules, 225 selectors, and 194 declarations.

Slack frequently does not remove old selectors when changing styles, so older selectors may hang around over time. These older selectors can dramatically add weight to the theme, depending on how many SCSS rules are nested within.

Care should be taken when determining if a selector is no longer is used before removal. The best way to determine if a selector in the theme is unused is to search Slack's stylesheets (including inline styles). Styles in the pages directory may require finding stylesheets specific to a page.

[hackel]

Perhaps the sidebar-related selectors could be removed in favour of pasting a Custom Theme into Slack's native sidebar theme interface? I don't know how much this would actually save, but it's worth investigating.

[laCour]

@hackel 👍 Thanks for the suggestion. The sidebar style overrides are about 5kB, and provide necessary styles for interactive elements. Removing just enough styles to support the Custom Theme feature would be a negligible difference in size.

Today's release removes many old styles (~12kB), which helped prevent the theme from growing much larger this release. However, the theme did grow slightly, but this is expected as Slack continues to add styles (~16kB for this release).

I've also investigated removing strict border properties in favor of only using border color properties (e.g. border: 1px solid $color-base vs border-color: $color-base). This saves <1kB without any styling differences.

I do expect the theme to continue to grow over time. I'm mainly concerned about unnecessary bloat.