haxeui / haxeui-core

The core library of the HaxeUI framework
http://haxeui.org
MIT License
341 stars 71 forks source link

Incorrect style inheritance with ID selector when additional class is missing #637

Open NipponSunrise opened 6 days ago

NipponSunrise commented 6 days ago

There is an issue with CSS where an element with an id is incorrectly inheriting styles meant for an additional class, even when that class is not present. In the example below, the label should only apply the styles defined by #myLabel.baseClass, but it seems to inherit styles defined for #myLabel.baseClass.i18n_en even though the i18n_en class is not applied.

The issue seems to be related to the use of the id selector in combination with class selectors. When using id selectors, the styles from more specific rules appear to "leak" into the element even when the additional class is not applied. This issue does not occur if the id is removed from the selector.

<vbox style="padding: 5px;">
    <style>
      #myLabel.baseClass {
        color: yellow;
      }

      #myLabel.baseClass.i18n_en {
        color: green;
      }

    </style>

    <label styleName="baseClass" id="myLabel" text="I have to be yellow, but I'm green" />

</vbox>

Expected Behavior

The label should apply the styles from #myLabel.baseClass, and the text color should be yellow.

Current Behavior

The label inherits the styles from #myLabel.baseClass.i18n_en (where the color is green) even though the i18n_en class is not applied to the label.

Steps to Reproduce (for bugs)

http://haxeui.org/builder/?0f2638a3

Your Environment

v1.7 and official playground

ianharrigan commented 6 days ago

hmmmm, oh, thats weird - ill have to check the code, but my guess that as soon as it hits the match on the the .baseClass, it decides "thats good enough" - not sure.

Cheers, Ian