[full-ci] Dedupe CSS

[dschmidt]

Description

This PR aims to remove the duplicated CSS caused by imports in the design-system.

It's not perfect yet, breadcrumbs are broken and input fields (like the search input) look wrong, otherwise it seems to work fairly ok.

I would be glad if someone with more knowledge of the styles in this project to pick this up and fix the remaining issues.

Thanks to @JammingBen for stepping up and taking care of the issues I had left open!🏅

I have applied the same approach in my vite PR, there everything is even a little more sophisticated (and has the same issues) works the same way, so I'd say finishing this, would be a good preparation for solving this in Vite as well.

Related Issue

• Fixes <issue_link>

Motivation and Context

Since we imported the ODS into this repo, we have a lot of duplicated styles through imports in the ODS components. This slows down the dev tools a lot and (if not stripped in production builds) bloats the built assets.

How Has This Been Tested?

• test environment:
• test case 1:
• test case 2:
• ...

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests

Checklist:

• Code changes
• Unit tests added
• Acceptance tests added
• Documentation ticket raised:

Open tasks:

• ...

[update-docs]

Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes.

[ownclouders]

Results for oC10SharingIntGroups https://drone.owncloud.com/owncloud/web/30265/25/1

💥 The acceptance tests failed on retry. Please find the screenshots inside ...

webUISharingInternalGroups-shareWithGroups_feature-L222.png

[JammingBen]

I replaced the @extend usages in our components with actual CSS and/or mixins (because @extend does not work in components with this approach). Most of the extends were unnecessary anyway IMO.

The only real exception is the extension of the oc-input class which was kinda nice. We could do that via mixin in the future, but that requires quite some refactoring. For now, I manually added the oc-input class when oc-text-input is being used. It's wrapped in our OcTextInput component anyway, so ideally you use this one.

Let's see what pipeline says.

[kulmann]

yay 🥳

[sonarqubecloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

12.5% Coverage
0.0% Duplication

[kulmann]

The only failing tests are unrelated to this PR, see #8042
I'll force-merge now.

[dschmidt]

Sweeeeet!