A few more questions about the new csstype RuleBuilder syntax 1. How do I combine Selectors? Is the...

# react

[iari]

A few more questions about the new csstype RuleBuilder syntax

1. How do I combine Selectors? Is there any Way to combine two RuleBuilder instances?
With the old syntax I had these extensions

operator fun TagSelector.plus(other: TagSelector): TagSelector = TagSelector("$tagName, ${other.tagName}")
operator fun TagSelector.plus(other: String): TagSelector = TagSelector("$tagName, ${other}")

2. How do I generally specify complex css values?
Many expect types that are interfaces and there is no apparent constructor for them.

gridTemplateColumns = GridTemplateColumns(160.px, 1.fr)
gridTemplateRows = GridTemplateRows(72.px, 64.px, 1.fr)
gridColumn = "1 / 2" //GridColumn("1 / 2")
gridRow = GridRow("2 / span 2")
background = "linear-gradient(20deg, ${MyColors.GreenDark}, ${MyColors.Green2})"

Also I keep finding missing values like

overflowY = Overflow.auto
outline = Outline.none
textDecoration = TextDecoration.none

which used to work and now dow not exist

3. How Do I declare a fontFamily which includes custom fonts?
How do I do fontFace declarations?
I used to have this working

for ((fw, fwName) in listOf(
    "100" to "Thin",
    "300" to "Light",
    "normal" to "Regular",
    "500" to "Medium",
    "600" to "SemiBold",
    "bold" to "Bold",
    "900" to "Black"
)) {
    fontFace {
        fontFamily = Goldplay.quoted.toString()
        fontWeight = FontWeight(fw)
        val srcValue = listOf(
            "Goldplay-$fwName.woff2" to FontFormat.woff2,
            "Goldplay-$fwName.woff" to FontFormat.woff
        )
            .map { (src, format) ->
                "url('$src') format('$format')"
            }.joinToString(",")
        put("src", srcValue)
        this.fontStyle = FontStyle.normal
    }
}

4. How do I do keyframes declarations for animations?

[iari]

As to 1. I think this could work:

operator fun Selector.plus(other: Selector): Selector = Selector("$this, $other")
operator fun Selector.plus(other: String): Selector = Selector("$this, $other")

[turansky]

gridTemplateColumns = array(160.px, 1.fr)

[turansky]

For keyframes you can use emotion

[turansky]

Common auto and none

// before
overflowY = Overflow.auto
outline = Outline.none
textDecoration = TextDecoration.none

// now
overflowY = auto // Auto.auto
outline = none // None.none
textDecoration = none // None.none

[turansky]

fontWeight = integer(600)

or 

fontWeight = FontWeight.normal

[turansky]

Strict gradient

background = linearGradient(20.deg, MyColors.GreenDark, MyColors.Green2)

[iari]

Thanks.
Is there any example for how keyframes with emotion can be used?

also I still dont know how to do fontface declarations (I wonder if I could cheat and just do everything with strings)

[iari]

also gridColumn and gridRow I don't know yet how to do - they dont work with strings, I cant find a GridRow constructor function - and I wouldnt even know with arrays how to do what used to be GridRow("2 / span 2")

[turansky]

Local GridRow and GridColumn factories for start

Issue for future

[turansky]

[iari]

thanks - now the global css sems to compile except for the fontFace parts 🙂

[turansky]

Receiver already inside csstype package

[turansky]

Only extension required

[iari]

Local GridRow and GridColumn factories for start

I don'T understand what does that mean?
Would this work?

gridColumn = "1 / span 2".unsafeCast<GridColumn>()

[iari]

Receiver already inside csstype package

Only extension required

I don't understand this either - could you give a code example?

[turansky]

WA:

inline fun GridRow(
    value: String,
): GridRow =
    value.unsafeCast<GridRow>()

[turansky]

FontFace already generated

[turansky]

You can use it in custom RuleBuilder extension