Set multiple values for grid-template-columns

[jfontsaballs]

Is your feature request related to a problem? Please describe. I'm using emotion and I'd like to express this css fragment in kotlin:

grid-template-columns: 1fr auto

Describe the solution you'd like

css {
  gridTemplateColumns = GridTemplateColumns(1.fr, auto)
}

Describe alternatives you've considered Writing my own function:

fun multipleGridLengths(vararg lengths: GridTemplateTracks) =
    lengths.joinToString(" ").unsafeCast<GridTemplateTracks>()

Then using it:

css {
  gridTemplateColumns = multipleGridLengths(1.fr, auto)
}

Additional context This is already implmented in kotlinix.css here but can't be used with emotion.

[jfontsaballs]

I'd like to apologize in advance if this can be achieved, I have been searching the repo for a while and I couldn't find a way to do it.

[turansky]

You can use array function. Example

[turansky]

For most cases we already have safe factory functions:

Common:

• array
• many
• string
• integer
• number

Specific:

• Border
• Padding
• Margin
• Color ...

[svitalsky]

Thank you! However, it took me hours to find this solution, here, in a closed issue. KDoc stating simply syntax: … | <track-list> | … is not very helpful. And similar goes for many other properties — type safety is all very nice, but the common user who is not day and night submerged in your code and thus familiar with its ways and intricacies needs to know how to actually write those properties! Hours of frustrating redlined syntax errors when trying to write the simplest things do not help to promote this otherwise excellent tool.

Please do something about this.

Thank you, again.

[turansky]

Please do something about this.

@svitalsky Where do you expect information about array first of all?

cc @porotkin

[jfontsaballs]

I concur with @svitalsky that the documentation of the kotlin wrappers is very poor and very lacking for what otherwise is a great way of writing frontend code for the web (in my opinion, the best currently available). I myself have spent several times more time delving into your code than with any other library I have ever used, many times just to answer basic usage questions.

This concrete case is probably made more difficult since it is not clear from the type definition of the property that an array should be used.

Anyway, thank you for the prompt reply to my original question.

[svitalsky]

@turansky KDoc would be the best place. Two or three lines such as Usage example: gridTemplateColumns = array(2.fr, 5.fr, 1.fr, 20.px)

I understand it might seem funny or even ridiculous to someone who is working with such code every day. I know this from my own “area of expertise”, how things that “are obviously a matter of course” are not in fact so very obvious to other people.

Take myself in this case as an example: I've been writing software since the late eighties of the last century, been working in Java for decades and with Kotlin over JVM from 2016. Yet I didn't know the array function, never met it before. I tried listOf() and arrayOf(), I tried to type GridTemplateColumns. and wait whether there will be some suggestions from Idea, I tried to Google examples, to clone kotlin-wrappers and grep its source for gridTemplateColumns, all that to no avail (except of growing frustration). And it took me well over an hour to get—more by chance than anything else—to this closed issue and eventually find the right way to write this one little piece of code, straightforward as it may seem and as indeed it is, now that I know it.