Hello, i’m new to kotlinx.html dsl library, but sp...

# javascript

[Alex Fridlyand]

Hello, i’m new to kotlinx.html dsl library, but spend quite some time to understand how to write styling in production with create-react-kotlin-app

I’ve a big scss/SASS files that i would like to port for the most Kotlin-inspired-way in terms of styling.
I’ve heard that guys at Jetbrains are using it for the products, so what’s the best approach?
Go back to css? Write jsx with js = {}

I’ve big amount of classes in scss like :
“.mainheader {
&__content”
so it doesn’t seem to work with classes as a Set<String>

[anton.bannykh]

@houston do you have any advice?

[houston]

Yeah, thanks. I’m pretty sure that @Filipp Riabchun can answer better as maintainer of this part

[Filipp Riabchun]

so it doesn’t seem to work with classes as a Set<String>

Can you please elaborate that part a bit more? And, how does the code you need look in plain JSX?

[Alex Fridlyand]

@Filipp Riabchun I maybe mistaken, but from what i understand to incrementally update class attribute for the element (nesting) i need to do classes += something, but that means that it will create 2 different classes with spaces in final html, correct? Which is not the same as create one long classname, that is usable from SASS.

[Alex Fridlyand]

like “navigation__menuListItem”

[Alex Fridlyand]

Maybe i just misunderstand the whole concept

[Alex Fridlyand]

I’m basically looking for best practices on maintaining styles. So if you can just tell me how you do it in production with examples that would be really great.

[Filipp Riabchun]

well we don't use both sass and kotlin in a single project currently. In JS we just type full class names

[spand]

We also use sass but I really cant see why that is problematic with kotlinx.html.

[Filipp Riabchun]

And I don't really understand how do you incrementally update classnames in markup. Can you show some code examples (JSX or Kotlin)

[Alex Fridlyand]

nav(“navigation”) {
div(“navigation__logoSection”) {
div(“navigation__logo”) { }
div(“navigation__logoText”) {
+“text”
}
}
}

[spand]

Pull navigation into a variable?

[Alex Fridlyand]

I’m doing this right now, but can i do better with “classes +=“?

[Alex Fridlyand]

In our component design we are trying to split components a lot, and for things like header and navigation -> different components, sometimes i need to take classname from the outer element, that’s different component (not in the scope of a variable), but still belongs to this class.

[spand]

I dont think you access parent element so I cant see how

[Filipp Riabchun]

So you expect classes to be a reference to... what exactly?

[Filipp Riabchun]

You can try some things like [e-mail] but I don't see how it's better than using a variable

[Alex Fridlyand]

header(“headerMain”) { <--different component
navigation(“headerMain__navigation”) { - what’s the best way to do this?
}
}

[Filipp Riabchun]

Something like this

val block = "headerMain"

header(block) {
  navigation(“${block}__navigation”) {
  }
}

[Alex Fridlyand]

We have header) in a separate Kotlin file as a separate component

[Filipp Riabchun]

Ok so what's wrong with it?

[Alex Fridlyand]

So that means in case of variables i should create classname field in Component class of a Header and pass it here. Which is not very usable, when we have a lot of that stuff.

Ok. Thank you for help. I think for that we just need to change our naming concept a bit during PoC and we will be fine.

[Filipp Riabchun]

well header component should itself add the classes that it always needs

[Alex Fridlyand]

True

[Alex Fridlyand]

@Filipp Riabchun one more thing in which i’m not sure. With create-react-kotlin-app and without eject functionality, is there any way to tell webpack with new modules that will transpile scss to css?

[Filipp Riabchun]

And if there can be some modifier classes, I'd say it's better to turn them into modifier props

[Alex Fridlyand]

I agree

[Filipp Riabchun]

without eject functionality

not really

[Filipp Riabchun]

turn them into modifier props

That way you only use the classname constant in the component file

[Alex Fridlyand]

Eject functionality breaks my ability to update some components? or create-react-app upgrade functionality? or it’s just a way to hide config files.

[Filipp Riabchun]

And you can define elements as extentions on block

[Alex Fridlyand]

True. Thanks

[Filipp Riabchun]

just a way to hide config files

This. You will still be able to update dependencies with npm (but there will be a lot more of them than before eject

[Alex Fridlyand]

Awesome.

So you are not using Sass.
Do you use “classes += …” with plain CSS as a convention maybe?

I’m just brainstorming ideas a bit…

[Filipp Riabchun]

define elements as extentions on block

Then it could look like that:

navigation {
  logoSection {
    logo {
    }
    logoText {
      +“text”
    }
  }
}

Here, logoText and others are defined only in context of navigation block builder

[Filipp Riabchun]

classes += may be useful for adding modifiers:

if (props.active) {
  classes += "${block}_active"
}

[Alex Fridlyand]

Yes, understood what you have said. I’ll try it

[Alex Fridlyand]

Thank you very much for all your answers. That helped me.