@rx.memo with rx.RestProp doesn't handle CSS props correctly

[masenf]

Describe the bug
The rx.RestProp param does no additional processing of CSS props, so if any are passed through to a memo function, they end up as normal props, which are unrecognized on their target. There is no processing to distinguish them as style props.

To Reproduce

import reflex as rx


@rx._x.memo
def xmemo(rest: rx.RestProp) -> rx.Component:
    return rx.text("Foo", rest)


def index() -> rx.Component:
    return rx.container(
        rx.vstack(
            xmemo(font_weight="bold"),
            rx.text("Bar", font_weight="bold"),
        ),
    )


app = rx.App()
app.add_page(index)

Expected behavior
Both "Foo" and "Bar" should be bold text, but the xmemo variant does not apply the boldness.

Specifics (please complete the following information):

• Python Version: 3.10+
• Reflex Version: 0.9.4+ (or rx._x.memo in 0.9+)
• OS: any

Additional context
Workaround: pass the css props in a style dict

[linear-code]

ENG-9676

[adhami3310]

i think we should move our handling of CSS into JS, in which case this class of bugs is much harder to hit

[masenf]

i think we should move our handling of CSS into JS

so what would that look like? basically our own jsx wrapper that extracts the known CSS props and merges them into the css object? How will that layer be able to know whether a prop should be CSS or whether the target component actually shadows a valid CSS property name and the prop should instead be passed normally?

[adhami3310]

How will that layer be able to know whether a prop should be CSS or whether the target component actually shadows a valid CSS property name and the prop should instead be passed normally?

I guess that part is harder, but it always irked me how we do the snake_case to kebab-case in Python, and how easy it is to write code that passes right through that