Hi, I have a question about StyleSheet objects. Is...

# compose-web

[sanao]

Hi, I have a question about StyleSheet objects.
Is it possible to represent selector patterns like hogeClass + fugaClass or hogeClass ~ fugaClass? I want to use +, ~ , and also -. Could someone please tell me how to do this?

[CLOVIS]

Kotlin only allows the creation of specific operators, to avoid abuse by library authors (like C++'s usage of the bitshift operator to print stuff). + and - are allowed, ~ is not.

To answer your question, you'll want to read https://kotlinlang.org/docs/operator-overloading.html and https://kotlinlang.org/docs/extensions.html#extension-functions. Here's an example of how to create a custom operator for some other type:

data class Point(
    val x: Int,
    val y: Int,
)

// Custom operator to sum points:
operator fun Point.plus(other: Point) = Point(
    x = x + other.x,
    y = y + other.y,
)

[chr]

If you’re in a `StyleSheet`/`StyleSheetBuilder` there’s a few methods you can use to represent those css selectors:
• element1 + element2 is adjacent(element1, element2)
• element1 ~ element2 is sibling(element1, element2)
• I don’t think - can be used to combine css selectors?
There’s a bunch you can look for in StyleSheetBuilder.kt