Hi everyone, I'm trying to switch from Styled Components to Emotion but I'm wondering how to change ...

# react

[Sean Keane]

Hi everyone, I'm trying to switch from Styled Components to Emotion but I'm wondering how to change the StyleSheet from Styled CSS to Emotion CSS.

Example:

object Main : StyleSheet("MainStyle") {
    val headingBoldGrey by css {
            color = Colors.darkGrey
            +Font.quicksandBold
            fontSize = titleFontSizeMobile
        }
    }
}

What would be the best way to convert something like this?

[turansky]

emotion.css.css function will return you ClassName if you need it directly

cc @Sergei Grishchenko

[Sean Keane]

Cheers @turansky

Do you by chance have any examples on this? I know you're quite an expert in this space.

[turansky]

Expected:

import emotion.css.css

object Main {
    val headingBoldGrey:ClassName = css {
            color = Colors.darkGrey
            fontSize = titleFontSizeMobile
        }
    }
}

[turansky]

Or probably emotion.styled.styled will be fine solution for you 🙂

[Sean Keane]

Odd... Still getting an error with this. It seems it's not reading the types from the css class

[turansky]

Please try this function locally

inline fun ClassName(
    crossinline block: PropertiesBuilder.() -> Unit,
): ClassName =
    emotion.css.css(jso(block))

[turansky]

Now we use similar internally

[turansky]

Planned package - emotion.css

[Sean Keane]

Awesome. Cheers @turansky

Just a final one on this. How do you extend styles?

val heading  = ClassName {
    display = Display.flex
    flexDirection = FlexDirection.row
    whiteSpace = WhiteSpace.pre
    alignItems = AlignItems.center
    +Font.quickSandRegular
    fontSize = font_medium
    +desktopHeadingFontSize
}

val titleGrey  = ClassName {
    +heading
    color = Colors.darkGrey
}

In styled it was done with a plus but I'm getting errors on the +?

[turansky]

I use cx for class names merge

[Sean Keane]

What is that?

[turansky]

It’s emotion utility function

[turansky]

It’s css extension with “base” class names

[Sean Keane]

val heading  = ClassName {
    display = Display.flex
    flexDirection = FlexDirection.row
    whiteSpace = WhiteSpace.pre
    alignItems = AlignItems.center
    +Font.quickSandRegular
    fontSize = font_medium
    cx(desktopHeadingFontSize)
}

[Sean Keane]

Awesome! Thank you 😄

[turansky]

One more ClassName :

inline fun ClassName(
    vararg classNames: ClassName?,
    crossinline block: PropertiesBuilder.() -> Unit,
): ClassName =
    // impl (css + cx)

[turansky]

Both functions are internal now

[Sean Keane]

Could this be converted into a + operator on the cx function so it would autocorrect globally?

example:

val titleGrey  = ClassName {
    +heading
    color = Colors.darkGrey
}

[turansky]

On current moment we want to avoid such + usages

[turansky]

Now we have “zero runtime” in case of css wrappers.
+heading will require additional runtime, which we don’t want

[Sean Keane]

Gotcha! Perfect. Thank you so much for the advice. 😄 K

[turansky]

If ClassName factories are fine for you - probably we will mark them as public

[turansky]

https://github.com/JetBrains/kotlin-wrappers/pull/1513

[Sean Keane]

Oh you legend 🐕

[Sean Keane]

Last q! How do we deal with media tags in emotion kotlin?

[turansky]

Released in pre.342

[turansky]

How do we deal with media tags in emotion kotlin?

Do you mean media queries?

[aerialist]

@Sean Keane, here is the sample of media query usage. Hope this helps

https://github.com/karakum-team/kotlin-mui-showcase/blob/main/src/main/kotlin/team/karakum/App.kt#L27

[Sean Keane]

This is perfect @aerialist Thank you so much for the example! 😃

[Dirk]

How can i do this without MUI (react, emotion)?

[Sergei Grishchenko]

Emotion is separate css-in-js library, it is no linked with MUI, so am I understood correctly, that you want to stile something but without any frameworks?

[Dirk]

Oh, I'm afraid I didn't make myself clear.

In the example, the function from MUI is used. However, I do not use MUI and would like to do media queries as described on the emotion website (https://emotion.sh/docs/media-queries), but I am not sure what the syntax is for this.

The simple form seems to work as string. But how can i create arry from the example?

private val footer_inner = ClassName {
    display = Display.flex
    flexDirection = FlexDirection.columnReverse
    ....

    "@media (min-width: 48em)" {
        flexDirection = FlexDirection.row
        justifyContent = JustifyContent.spaceBetween
        paddingBottom = 4.2.rem
        paddingTop = 4.2.rem
    }
}

[Sergei Grishchenko]

There is some misunderstanding from my side too, what example do you mean? If you are saying about example from @aerialist , so it is not CSS media query. There is browser API that allows to trigger some actions by media request. Hook useMediaQuery from MUI wraps this API and returns boolean flag that indicates if query is applicable or not.
But I guess, it is not what you are looking for 🙂
Let's do next thing, you will write CSS code you want to implement and will try to help writing the same one but in Kotlin + Emotion

[Sergei Grishchenko]

By the way your example with invitation on string in CSS builder looks like right direction

[Sean Keane]

@Sergei Grishchenko

I too am struggling a little to convert the styles. Do you have any idea on what might be the best approach here?

val common = ClassName(Font.quicksandBold) {
    borderStyle = BorderStyle.none
    transition(duration = 0.3.s)
    focus {
        outline = Outline.none
    }
    hover {
        boxShadow += BoxShadow(
            false,
            dropShadow_xs,
            dropShadow_s,
            dropShadow_sm,
            -dropShadow_s,
            Colors.hoverShadowButton.darken(small_shadow_percentage)
        )

        transform {
            scale(small_scale)
        }
    }
    active {
        boxShadow += BoxShadow(
            false,
            dropShadow_xxs,
            dropShadow_xs,
            dropShadow_s,
            dropShadow_xxs,
            color = Colors.hoverShadowButton.darken(xsmall_percentage)
        )
        transform {
            scale(xsmall_scale)
        }
    }
}

[Florent Martin]

Using this:

val heading  = ClassName {
    display = Display.flex
    flexDirection = FlexDirection.row
    whiteSpace = WhiteSpace.pre
    alignItems = AlignItems.center
    +Font.quickSandRegular
    fontSize = font_medium
    +desktopHeadingFontSize
}

@turansky Is it possible to also get the name of the class in the html markup? Right now i am getting something like class=“uqqe9” but i want:
div class="heading"

[Florent Martin]

inline fun ClassName(
    crossinline block: PropertiesBuilder.() -> Unit,
): ClassName =
    emotion.css.css(jso(block))

@turansky are you re-pasting this in every component which needds it?
Are there advantages using emotion vs. MUI or do you use both?

[turansky]

Are there advantages using emotion vs. MUI or do you use both?

I use emotion
In case of MUI recommended ‘CSS in JS’ engine - emotion - we use it in our examples

[turansky]

Is it possible to also get the name of the class in the html markup?

We know only about this option - https://emotion.sh/docs/labels (check required)
Will it work for you? Or you need exact name?

[Florent Martin]

@turansky if label works it’s fine enough, i’ll give it a try.
Thanks a lot

[Florent Martin]

@Sean Keane Have you managed to use active? I mean

ClassName(Font.quicksandBold) {
  active {
...

[Sean Keane]

@Florent Martin I have had a nightmare 2 weeks. Somehow water got into my MacBook and I’ve had to send it away to get repaired.

I just got it back yesterday and will be back on this in the next couple of days and I’ll let you know.

[Sean Keane]

I really do appreciate the advice and help. Thank you both @turansky and @Florent MartinKotlin

[Florent Martin]

@Sean Keane Good luck

[Florent Martin]

I could solve my own question using css on an “active” react router NavLink

css {
    width = 100.pct
    color = Color("#FFF")
    "&.active" {
         color = Color("green")

[Sean Keane]

2500 problems resolved later and now it compiles...

But it compiles without CSS? All I get are classes named "css-0" with no CSS inside?

js {
    browser {
        commonWebpackConfig {
            cssSupport {
                enabled = true
            }
        }
        runTask {
            cssSupport {
                enabled = true
            }
        }
    }
    binaries.executable()
}

Am I missing something here?

I also get an IR error when compiling with IR... So swapped to legacy for now.

[Sean Keane]

Ok, Library sync issue was what the IR compiler was shouting about.

No CSS generation was me being an idiot. 😂

Dont do this:

css {
    cx(OverviewStyles.heading)
}

Do this:

css(OverviewStyles.heading){}