owncloud-design-system icon indicating copy to clipboard operation
owncloud-design-system copied to clipboard

Scoped component styles

Open kulmann opened this issue 4 years ago • 1 comments

We want to have scoped component styles. Only the utility classes should be available globally.

But we recently had an issue with scoped component styles: Somehow scoped styles are cloning all styles (not just the ones in the scope of the component). This blows up the system.css filesize from 400KB to some huge amount (in our case 7MB because of several components with scoped styles).

Looks like this in the css file: .oc-accordion-title[data-v-33c90a04].

Broken repo state for going back in time, running yarn build:system and seeing the mess: https://github.com/owncloud/owncloud-design-system/tree/728473a16c823176e24ea55e597238025e0bfbb2

kulmann avatar Jan 19 '21 08:01 kulmann

Something to keep in mind when working on this: as we want to enable single component imports #845, we should include components styles in the js bundle instead of the CSS files so they do not require extra import in consuming apps.

LukasHirt avatar Jan 19 '21 09:01 LukasHirt