Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

Scoped component styles #1054

Open
kulmann opened this issue Jan 19, 2021 · 1 comment
Open

Scoped component styles #1054

kulmann opened this issue Jan 19, 2021 · 1 comment
Labels
bug Something isn't working

Comments

@kulmann
Copy link
Member

kulmann commented Jan 19, 2021

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 kulmann added the bug Something isn't working label Jan 19, 2021
@LukasHirt
Copy link
Contributor

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants