Our application is using a new Settings design (vue3). In this context, when using NcIconToggleSwitch (wich is a child component of NcCheckboxRadioSwitch), I met some strange behaviour:
My check box is badly designed:
(See the white from SVG is too much on left).
After investigating it appears that there is some CSS in conflict.
The CSS coming from the "Notifications app" (built with vue 3.5.34 (same for sfc compiler), and @nextcloud vue 9.8.0) give this :
._iconToggleSwitch_WgcOx circle {
cx: var(--16fd8ca9);
transition: cx var(--animation-quick) ease;
}
But infortunately, my build is made with vue 3.5.35, and @nextcloud/vue 9.8.1, and therefore use this CSS (see in dist/assets)
._iconToggleSwitch_WgcOx circle {
cx: var(--v16fd8ca9);
transition: cx var(--animation-quick) ease;
}
The difference is very discrete (v16fd8ca9 instead of 16fd8ca9). But, as the two definitions are conflicting, the "Notifications" app CSS wins the conflict, and as my <span is defining "v16fd8ca9" and not "16fd8ca9", the cx loose the correct value.
So my point could be : as these CSS are defined as "module", this generate a risk of conflicts in definitions. We are talking about patch versioning (9.8.1/9.8.0 and 3.5.35/3.5.34). Wouldn't it be less risky to keep a "scope" type of CSS for these components ?
Our application is using a new Settings design (vue3). In this context, when using NcIconToggleSwitch (wich is a child component of NcCheckboxRadioSwitch), I met some strange behaviour:
My check box is badly designed:
(See the white from SVG is too much on left).
After investigating it appears that there is some CSS in conflict.
The CSS coming from the "Notifications app" (built with vue 3.5.34 (same for sfc compiler), and @nextcloud vue 9.8.0) give this :
But infortunately, my build is made with vue 3.5.35, and @nextcloud/vue 9.8.1, and therefore use this CSS (see in dist/assets)
The difference is very discrete (v16fd8ca9 instead of 16fd8ca9). But, as the two definitions are conflicting, the "Notifications" app CSS wins the conflict, and as my <span is defining "v16fd8ca9" and not "16fd8ca9", the cx loose the correct value.
So my point could be : as these CSS are defined as "module", this generate a risk of conflicts in definitions. We are talking about patch versioning (9.8.1/9.8.0 and 3.5.35/3.5.34). Wouldn't it be less risky to keep a "scope" type of CSS for these components ?