Changing a CSS class name dynamically does not update children props

[sbs-ableton]

When the class name of an Item's parent changes, the styled properties of the child Item are not re-evaluated.

Sample app follows:

/* sample.css */
/* Rectangles inside "green" class rectangles should be green. */
QQuickRectangle.green { color: "green" }
QQuickRectangle.green QQuickRectangle { color: "green" }

/* Rectangles inside "red" class rectangles should be red. */
QQuickRectangle.red { color: "red" }
QQuickRectangle.red QQuickRectangle { color: "red" }

// App.qml
import QtQuick 2.4
import Aqt.StyleSheets 1.1

Item {
    width: 600
    height: 600

    StyleEngine {
        stylePath: "."
        styleName: "sample.css"
    }

    Rectangle {

        // When the mouse is pressed inside the Item I expect the whole
        // item to be green. Instead, the inner square remains red while
        // the outer square changes color.
        StyleSet.name: mouseArea.pressed ? "green" : "red"

        anchors.fill: parent
        color: StyleSet.props.color("color")

        Rectangle {
            anchors.centerIn: parent
            width: 200
            height: 200
            color: StyleSet.props.color("color")
        }

        MouseArea {
            id: mouseArea
            anchors.fill: parent
        }
    }
}

[gck-ableton]

Thanks for the report, I've detected this some days ago, too, but in a different form. I'll add that one here, too, to document that:

import QtQuick 2.3
import QtQuick.Controls 1.0

import Aqt.StyleSheets 1.1

ApplicationWindow {
    id: root

    StyleEngine {
        styleSheetSource: 'debug.css'
    }

    property var foo: Item {
        id: foo
        StyleSet.name: "foo"

        property var bar: Item {
            id: bar
            StyleSet.name: "bar"
            height: bar.StyleSet.props.number("height")
            Component.onCompleted: console.log(bar.StyleSet.path)
        }
        Component.onCompleted: console.log(foo.StyleSet.path)
    }
}

with debug.css as:

.b .bb {
    height: 100;
}

The output is

Property height not found (StyleSetNameInitBug/QQuickItem/QQuickItem.bar)
qml: StyleSetNameInitBug/QQuickItem.foo
qml: StyleSetNameInitBug/QQuickItem/QQuickItem.bar

but one would expect the last line to be:

qml: StyleSetNameInitBug/QQuickItem.foo/QQuickItem.bar

There reason is here some reverse property initialization from the QML engine, which leads to bar's styles being computed before foo's name property is bound.