search

owncloud / owncloud-design-system

:art: A pattern library for ownCloud for Vue.js
https://owncloud.design
Apache License 2.0
26 stars 19 forks source link

Scoped component styles #1054

Open kulmann opened 3 years ago

kulmann commented 3 years ago

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

LukasHirt commented 3 years ago

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.