carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
258 stars 155 forks source link

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

Open kennylam opened 1 year ago

kennylam commented 1 year ago

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

### 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
andy-blum commented 1 year ago

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