[REF-1417] Convert underscore-prefixed style props to pseudo selector

[masenf]

Use emotion CSS-in-JS for default components.

Convert underscore-prefixed style props, like _hover and _focus to emotion compatible self-referential pseudo selectors like &:hover and &:focus.

Test cases

Keys

• Simple property
• webkit/moz property
• self-referential (underscore prefix, colon prefix)

Values

• Each of the above with state vars / f-string
• Each of the above with responsive list

Extension precedence

• Each of the above combined with style={}
• Each of the above combined with component styles from app

Types of Test

• Unit: does the resulting style dict for a component (rx.el.div) look correct?
• Integration: for different types of components, get computed css property

Sample Code

import reflex as rx
import reflex.components.radix.themes as rdxt


class FooState(rx.State):
    """The app state."""
    counter: int = 0
    text: str = ""
    rcolor: str = "lime"

    def foo(self):
        print("foo")


def index() -> rx.Component:
    return rx.fragment(
        rx.color_mode_button(rx.color_mode_icon(), float="right"),
        rx.button("Foo", on_click=FooState.foo),
        rx.button("Increment", on_click=FooState.set_counter(FooState.counter + 1)),
        rx.text(FooState.counter, _hover={"color": "hotpink"}),
        rx.text(f"({FooState.counter})"),
        rx.button("Decrement", on_click=FooState.set_counter(FooState.counter - 1)),
        rx.input(placeholder="text", value=FooState.text, on_change=FooState.set_text, _placeholder={"text_decoration": "underline"}),
        rx.el.input(
            placeholder="text",
            value=FooState.text,
            _placeholder={"text_decoration": "underline", "padding-left": "10px"},
            _focus_visible={"outline": "2px solid crimson"},
        ),
        rx.text(FooState.text),
        rx.el.button(
            "Plain Button",
            background_color=f"var(--{FooState.rcolor}-3)",
            padding="4px",
            _hover=[
                {"background_color": f"var(--{FooState.rcolor}-4)"},
                {"background_color": "var(--plum-4)"},
                {"background_color": "var(--tomato-4)"},
                {"background_color": "var(--grass-4)"},
                {"background_color": "var(--accent-4)"},
            ],
            _active={"background_color": f"var(--{FooState.rcolor}-5)"},
        ),
        rdxt.box(
            rx.box("Foo", height="500px"),
            overflow_y="scroll",
            border="1px solid black",
            height="200px",
            width=["100px", "200px", "300px", "400px", "500px"],
            style={
                "::first-letter": {
                    "font_size": "1.5rem",
                    "font_weight": "bold",
                    "color": "brown",
                },
                "::-webkit-scrollbar": {"display": "none"},
                "::after": {"content": f"'{FooState.text}'"},
            }
        ),
    )


# Add state and page to the app.
app = rx.App(theme=rdxt.Theme(accent_color="plum"))
app.add_page(index)
app.add_page(index, route="/foo")
app.compile()

[Alek99]

Is this ready for review? I'll try it out

[picklelo]

This is awesome, solves 3 issues in one PR

[picklelo]

If style_item is not a str would the type signature still be correct here? Should it be str(style_item)?