Newbie trying css kotlin wrapper

JavaScript
1

Hi, first up, I am quite new to javascript and to kotlin, so my issue is probably really simple…

I have created a new create-react-kotlin-app.

I have done
yarn add @jetbrains/kotlin-css
yarn add @jetbrains/kotlin-css-js
plus a few other yard add’s to get other things up-to-date… (e.g. yarn add @jetbrains/kotlin-extensions)

In App.kt I have added an import statement, import css.Rule, and done a yarn start.

I get

src/app/App.kt:3:8: error: unresolved reference: css
import css.Rule
       ^

The import via yarn seems to have worked, at least it has listed in the package file and the node-module seems to be there, but I am not sure why the compiler is not picking it up.

I have also added the kotlin-css-js Library to intellij so at design time the compiler seems happy (pointing to myapp/node_modules/@jetbrains/kotlin-css-js/build/classes/main)

My package.json looks like this:

{
  "name": "my-react-kotlin-css-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@jetbrains/kotlin-css": "^1.0.0-pre.15",
    "@jetbrains/kotlin-css-js": "^1.0.0-pre.15",
    "@jetbrains/kotlin-extensions": "^1.0.1-pre.15",
    "kotlin": "^1.2.30",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "react-scripts-kotlin": "2.1.6"
  },
  "scripts": {
    "start": "react-scripts-kotlin start",
    "build": "react-scripts-kotlin build",
    "eject": "react-scripts-kotlin eject",
    "gen-idea-libs": "react-scripts-kotlin gen-idea-libs",
    "get-types": "react-scripts-kotlin get-types --dest=src/types"
  }
}

Could anyone help out a poor old struggling Javascript/Kotlin newbie?

Thanks for any help :slight_smile:

1 Like
2

See the documentation we’ve just published: kotlin-wrappers/kotlin-styled at master · JetBrains/kotlin-wrappers · GitHub

The following steps should be enough:

  1. Install (or update) create-react-kotlin-app globally.
  2. Create an app using npx create-react-kotlin-app my-app
  3. Install kotlin-styled and its dependencies as instructed.

It is important to be using the latest version of create-react-kotlin-app because it supports auto-configuration of Kotlin libraries.

3

Thanks, the new docs have helped a lot :slight_smile:

Is it possible to style third party components? I see there is a styled(type: RClass<P>) but (I think) I need a styled(type: RComponent<P, S>).

I tried making one which managed to compile and run, but my css did not get applied…

Side note: I have forked to add more color constants. Is it worth trying to do a merge request (again… newbie… will be my first ever public merge request :slight_smile:

The code used to have a comment // Reserved for basic constants only, actual theming is done in XTheme and AppTheme), but that comment seems to be gone now… would more colors be welcome?:

class Color(val value: String) {
    companion object {
        val transparent = Color("transparent")

        // Values from https://www.w3schools.com/cssref/css_colors.asp
        val aliceBlue = Color("#F0F8FF")
        val antiqueWhite = Color("#FAEBD7")
        val aqua = Color("#00FFFF")
        etc