Hey folks, I want to add kotlin-styled (<https://g...

# javascript

[Tobi]

Hey folks, I want to add kotlin-styled (https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-styled) to my existing kotlin.js project, but gradle fails to resolve the dependencies through npm 🤔

error Couldn't find package "@jetbrains/kotlin-inline-style-prefixer@1.0.0-pre.89" required by "cats-js@1.0.0-SNAPSHOT" on the "npm" registry.

That's how I configured the dependency:

kotlin {
    target {
        browser {}
        nodejs {}
    }

    sourceSets {
        main {
            dependencies {
                implementation kotlin('stdlib-js')
                implementation kotlin('test-js')

                implementation "org.jetbrains.kotlinx:kotlinx-serialization-runtime-js:0.14.0"
                implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core-js:1.3.2'
                implementation "io.ktor:ktor-client-js:1.2.6"
                implementation "io.ktor:ktor-client-json-js:1.2.6"
                implementation("io.ktor:ktor-client-serialization-js:1.2.6")

                implementation(npm("core-js", "^2.0.0"))
                implementation(npm("@jetbrains/kotlin-react", "16.9.0-pre.83"))
                implementation(npm("@jetbrains/kotlin-react-dom", "16.9.0-pre.83"))
                implementation(npm("@jetbrains/kotlin-extensions", "1.0.1-pre.67"))
                implementation(npm("@jetbrains/kotlin-extensions", "1.0.1-pre.67"))
                implementation(npm("@jetbrains/kotlin-styled", "1.0.0-pre.89"))
                implementation(npm("@jetbrains/kotlin-css", "1.0.0-pre.89"))
                implementation(npm("@jetbrains/kotlin-inline-style-prefixer", "1.0.0-pre.89"))

                implementation(npm("react", "16.8.3"))
                implementation(npm("react-dom", "16.8.3"))
                implementation(npm("kotlinx-html", "0.6.12"))
                api(npm("text-encoding","0.7.0"))
            }
        }
    }
}

Furthermore I added the alias as I've done it previously for other dependencies:

// workaround for <https://youtrack.jetbrains.com/issue/KT-31807>
config.resolve.alias = {
    'kotlin-css-js': '@jetbrains/kotlin-css-js',
    'kotlin-extensions': '@jetbrains/kotlin-extensions',
    'kotlin-react': '@jetbrains/kotlin-react',
    'kotlin-react-dom': '@jetbrains/kotlin-react-dom',
    'kotlin-styled': '@jetbrains/kotlin-styled',
    'kotlin-css': '@jetbrains/kotlin-css',
    'kotlin-inline-style-prefixer': '@jetbrains/kotlin-inline-style-prefixer',
    'kotlinx-html-js': 'kotlinx-html',
};

Any idea what could be the problem?

Thanks in advance!

[Ivan Kubyshkin [JetBrains]]

@Tobi You should use normal inline-style-prefixer like this:

implementation(npm("inline-style-prefixer", "5.1.0"))

https://www.npmjs.com/package/@jetbrains/kotlin-styled

[Ilya Goncharov [JB]]

You can use https://bintray.com/kotlin/kotlin-js-wrappers/kotlin-styled instead of one from npm registry
The same way you can declare all kotlin-wrappers

[Tobi]

@Ivan Kubyshkin [JetBrains]
That's working, just had to add additionally this mapping:
'inline-style-prefixer': '@jetbrains/kotlin-styled'

@Ilya Goncharov [JB]
That does satisfy the IDE, but webpack is not happy when running it.

ERROR in ./kotlin/cats-js.js
Module not found: Error: Can't resolve 'kotlin-styled' in '/Users/X/Documents/repos/cats-js/build/js/packages/cats-js/kotlin'
 @ ./kotlin/cats-js.js 3:4-219
 @ multi ./kotlin/cats-js.js

[Ilya Goncharov [JB]]

You additionally need to remove WA with aliases for these dependencies