Styling of combo-box

Flow
1

Hello,

I am trying to modify a combo-box and its drop-down items.
At the moment I have managed to style the vaadin-combo-box-item doing the following:

//Kotlin class
@CssImport("./styles/selection-combobox-item.css", themeFor = "vaadin-combo-box-item")
class MainView() : HorizontalLayout() { ... }

// CSS
:host {
    font-family: monospace;
}

However, I am also trying to achieve the same for the combo-box text-field as well.
So I tried

@CssImport("./styles/selection-combobox.css", themeFor = "vaadin-combo-box")
@CssImport("./styles/selection-combobox-item.css", themeFor = "vaadin-combo-box-item")

but it is not permitted to use @CssImport more than once, following error appears:
Repeatable annotations with non-SOURCE retention are not yet supported

Is there any way of achieving this in my manner?

2

I am just wondering is this happening due use of Kotlin. In Java apps I have not encountered this problem, you can have number of @CssImport’s, that is how it is intented to be used, as you need separate one for each themeFor import.

3

Oh, I see. I checked up on it and as you expected, it truly is a Kotlin issue. Let’s see if I can find a work-around.

Alright, managed to fix it using

@CssImport.Container(
    value = [CssImport(
        "./styles/selection-combobox.css",
        themeFor = "vaadin-combo-box"
    ), CssImport(
        "./styles/selection-combobox-item.css",
        themeFor = "vaadin-combo-box-item"
    )]
)