Fix style-Tag and Theming-Order

deleonio commented 1 week ago

Danke @laske185, ich überarbeite die Lösung, sobald ich wieder fit bin.

The A11y and PO reviews will only take place after all other DoD steps have been completed by the Developer:

[x] Maturation completed and documented
[x] Meaningful pull request title for the release notes
[x] Pull request is linked to an issue
[x] All changes relate to the issue
[x] No TODOs or commented out code in the final commit
[x] Tests to protect this code implemented (if applicable)
[x] Manual test performed successfully (if applicable)
[x] Documentation or migration has been updated (if applicable)

github-actions[bot] commented 1 week ago

Netlify Draft Deployment URL: https://6735e7fa3476bd6118b999b2--kolibri-public-ui.netlify.app Logs: https://app.netlify.com/sites/kolibri-public-ui/deploys/6735e7fa3476bd6118b999b2

deleonio commented 1 week ago

@sdvg Im Paket adopted-style-sheets wurde das gecachte Style-Array pro Durchlauf reverse gemacht, wodurch der Style im Fallbackfall immer in wechselnder Reihenfolge eingefügt wurde.

deleonio commented 1 week ago

Der Layer kol-component kommt hinter dem Layer kol-global anstatt davor. Warum stimmt die Reihenfolge nicht?

deleonio commented 1 week ago

FYI: @sdvg

GPT-Learnings ...

In deinem SCSS-Code hast du zwei @layer-Definitionen: kol-global und kol-component. Aktuell scheinen sich die beiden Layers zu überschneiden, was zur Folge hat, dass einige Styles (wie die place-items-Eigenschaft für .kol-span-wc) nicht in der gewünschten Reihenfolge angewendet werden. Hier sind die wichtigsten Punkte und eine mögliche Lösung für dein Problem:

Problem-Analyse

Widersprüchliche Definitionen: Im kol-global-Layer wird .kol-span-wc auf place-items: center gesetzt, während der kol-component-Layer dasselbe Element auf place-items: baseline überschreibt. Diese widersprüchliche Anweisung führt dazu, dass der zuletzt geladene Layer Vorrang hat.
Ladereihenfolge und Layer-Priorität: Wenn kol-global vor kol-component geladen wird, dann hat kol-component Vorrang und überschreibt die Styles aus kol-global. Falls kol-global nach kol-component geladen wird, passiert das Gegenteil.
Unklare Lade-Reihenfolge der Dateien: Wenn kol-global versehentlich nach kol-component erneut geladen wird (etwa durch eine Mehrfach-Definition oder einen zusätzlichen Import), überschreibt es die Styles von kol-component, was zu unerwünschten Ergebnissen führt.

Lösung: Klar definierte Reihenfolge und strikte Layer-Trennung

Um die Lade- und Layer-Reihenfolge stabil zu halten, folge diesen Schritten:

Setze eine eindeutige Reihenfolge im Haupt-Stylesheet: Definiere die Layer-Reihenfolge zu Beginn des Haupt-Stylesheets, sodass kol-global vor kol-component angewendet wird.
```
@layer kol-global, kol-component;
```
Dadurch wird festgelegt, dass die Styles in kol-global immer zuerst angewendet werden, und kol-component kann spezifische Änderungen gezielt überschreiben.
Importiere die Layer-Dateien in der gewünschten Reihenfolge: Falls du die Layer-Dateien separat importierst, achte darauf, dass sie in der gewünschten Reihenfolge geladen werden, sodass kol-global vor kol-component kommt.
```
@import "kol-global.scss" layer(kol-global);
@import "kol-component.scss" layer(kol-component);
```
Vermeide Mehrfachdefinitionen: Vermeide es, kol-global an mehreren Stellen erneut zu definieren. Jede @layer-Definition sollte klar getrennt und nur einmal definiert sein.
Gezielte Überschreibungen sicherstellen: Um sicherzustellen, dass kol-component die gewünschten Styles überschreibt, behalte in kol-component-Layer nur gezielte Anpassungen. Beispiel:
```
@layer kol-component {
   .kol-span-wc,
   .kol-span-wc > span {
       place-items: baseline; // überschreibt 'center' aus kol-global
   }
}
```

Zusammenfassung

Diese Schritte stellen sicher, dass die Reihenfolge zwischen kol-global und kol-component stabil bleibt und alle Anpassungen wie erwartet angewendet werden. Mit einer klaren Importstruktur und einer festgelegten Layer-Reihenfolge werden die überschreibenden Styles aus kol-component zuverlässig angewendet, ohne dass kol-global ungewollt nachträglich Änderungen einführt.

deleonio commented 1 week ago

@laske185 Das Wichtigste war diese Definition aus den internen Components (WC) zu entfernen: styleUrl: './style.scss'

Jetzt gibt es 0 style-Tags mehr in den Web Components

public-ui / kolibri