All web components currently bring global styles into their component style sheets. This has two major drawbacks:
All component definitions include those styles, bloating each component's filesize with duplicated code
All component instances create & contain their own copy of the global styles, bloating the overall memory footprint of the UI
Additionally, some components are using the scss @extend function to re-purpose styles for updated markup. This, however, does not remove the unnecessary style declarations for older markup.
To correct this, we need to remove global styles (and perhaps style primitives like button, link, etc) and reduce the existence of "dead" css in all component stylesheets. Doing this should help a few key metrics, including load time, total blocking time, and memory usage.
A demo of many components sharing a single CSSStyleSheet via adoptStyles. can be found here
### Tasks
- [ ] [styles]: sever ties importing styles from carbon-components
- [ ] [web-components]: reduce usage of scss `@extends` from carbon-web-components
- [ ] [styles]: create new "globals" and "primitives" stylesheets
- [ ] [carbon-/web-components]: create mechanism to adopt global stylesheets
Anecdotally, this should be a huge boost for AEM. A quick hack-and-slash removing all CSS from our bundled web components takes the unminified version of the file down from 12.4mb to 2.8mb
All web components currently bring global styles into their component style sheets. This has two major drawbacks:
Additionally, some components are using the scss
@extend
function to re-purpose styles for updated markup. This, however, does not remove the unnecessary style declarations for older markup.To correct this, we need to remove global styles (and perhaps style primitives like button, link, etc) and reduce the existence of "dead" css in all component stylesheets. Doing this should help a few key metrics, including load time, total blocking time, and memory usage.
A demo of many components sharing a single CSSStyleSheet via adoptStyles. can be found here