[Tech Debt] Global interactive element styles override scoped Vue styles

[Pytal]

Preface

Global styles are contained within some files such as https://github.com/nextcloud/server/blob/8650aff718cd788e98bb534daea6b9b18aae7f82/core/css/apps.scss, https://github.com/nextcloud/server/blob/8650aff718cd788e98bb534daea6b9b18aae7f82/core/css/inputs.scss, https://github.com/nextcloud/server/blob/8650aff718cd788e98bb534daea6b9b18aae7f82/core/css/styles.scss, and so forth.

This issue will specifically address the styles contained within https://github.com/nextcloud/server/blob/8650aff718cd788e98bb534daea6b9b18aae7f82/core/css/inputs.scss.

Issue

The codebase contains legacy js code which uses global styles for a number of HTML elements across the interface. New frontend elements are being built with Vue and the https://github.com/nextcloud/nextcloud-vue component library but many of the existing UI elements continue to use the pre-existing legacy js implementation and are styled with global styles.

As parts of the interface are being migrated to Vue and coexist with the non-Vue elements, changes had been made to accomodate for this i.e. additional classes had been added to the Vue components and :not() CSS pseudo-classes had been added to global styles so as to not target the Vue based elements which use scoped styles.

Some examples include:

• 231b5ed (#25774)
• f630bd2 (#33259)
• 61cfe35 (#29327)

The commit f630bd2 (#33259) adds the :not(.multiselect__input) pseudo-class to not target the multiselect input element https://github.com/shentao/vue-multiselect/blob/2.1.6/src/Multiselect.vue#L65 from the https://github.com/shentao/vue-multiselect library which is used in the NcMultiselect https://github.com/nextcloud/nextcloud-vue/blob/56aa6c9aeb9cab1acceb62bf454353c5f17cf5de/src/components/NcMultiselect/NcMultiselect.vue#L177-L238 component.

Due to the addition of the NcSelect component nextcloud-libraries/nextcloud-vue#3435 which uses the https://github.com/sagalbot/vue-select library, a similar change d3d5034 (#35165) was necessary to have the correct styling shown below

Because of the increased specificity added by the additional :not() some elements which depended on global styles became incorrectly styled. This can be seen in the revert PR of the change above #35665 in which the scoped Vue background select button styles were being overidden by the global styles.

Now the NcSelect component is no longer styled correctly as can be seen below

Next steps

The addition of more :not() pseudo-classes is no longer viable as then the respective CSS rules will have higher specificity than those of the scoped Vue styles. The solution then would have to make it so that global CSS rules are not applied to vue-select elements without using :not() and preserve the existing styles of other UI elements. A solution would only have to correct this in the near future but ideally we could remove all dependencies on global styles completely in favour of component scoped styles.

[Pytal]

The current design of the Vue background select buttons are dependent on global styles as well

	Screenshot
With global styles
Scoped styles only

[Pytal]

What solutions could we go for @PVince81?

[PVince81]

@skjnldsv please assist

is there a Vue way to isolate the styles so that they are not affected ?
shadow DOM ?

[skjnldsv]

is there a Vue way to isolate the styles so that they are not affected ?

We do that already, with scoping.

But the issue is that @Pytal's PR used an attribute selector, which has the same level as the way vue does css scoping (with data-absdev attributes)
But since Chris also used :not, this resulted in a higher level than the vue scoping, overulling any conflicting rule from vue apps. If you can use a simple class, then we're good 👎