add functionality to format CSS stylesheets

[pmeier]

The more I look at our UI code, the more frustrated I grow about the way we define the stylesheets for the various panel components. Putting everything into one massive multiline string works, but has two downsides:

1. The formatting is all over the place, since the auto-formatters won't format it at all.
2. Inserting values is not easy, since in CSS braces, i.e. {}, are regular characters. Meaning, if we used f-strings, we would need to encode them all the time. We currently use .format() for this.

This PR adds a stylesheets function that takes two-tuples of CSS selectors and declarations. That way we can use regular Python syntax to define everything and fixing both issues above.

I've applied this to one instance of our code in this PR. If we move forward with this, I'll open an issue and asking for help of the community to fix the rest of the code.

[pmeier]

For completion, here is what the output looks like:

from ragna.deploy._ui.styles import stylesheets

grid_height = 300

output = stylesheets(
    (":host", {"width": "100%"}),
    (
        ".pills_list",
        {
            # "background-color": "gold",
            "display": "grid",
            "grid-auto-flow": "row",
            "row-gap": "10px",
            "grid-template": f"repeat({grid_height}, 1fr) / repeat(3, 1fr)",
            "max-height": "200px",
            "overflow": "scroll",
        },
    ),
    (
        ".chat_document_pill",
        {
            "background-color": "rgb(241,241,241)",
            "margin-left": "5px",
            "margin-right": "5px",
            "padding": "5px 15px",
            "border-radius": "10px",
            "color": "var(--accent-color)",
            "width": "fit-content",
            "grid-column": "span 1",
        },
    ),
    ("ul", {"list-style-type": "none"}),
)


print("\n\n".join(output))

:host {
    width: 100%;
}

.pills_list {
    display: grid;
    grid-auto-flow: row;
    row-gap: 10px;
    grid-template: repeat(300, 1fr) / repeat(3, 1fr);
    max-height: 200px;
    overflow: scroll;
}

.chat_document_pill {
    background-color: rgb(241,241,241);
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px 15px;
    border-radius: 10px;
    color: var(--accent-color);
    width: fit-content;
    grid-column: span 1;
}

ul {
    list-style-type: none;
}

[pierrotsmnrd]

The idea is great.