[carbon-web-components/web components]: Remove global CSS out of component stylesheets

[kennylam]

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

Preview Give feedback

1. [styles]: sever ties importing styles from carbon-components
2. [web-components]: reduce usage of scss @extends from carbon-web-components
3. [styles]: create new "globals" and "primitives" stylesheets
4. [carbon-/web-components]: create mechanism to adopt global stylesheets

[andy-blum]

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