[Gradle, JS] Add css settings to webpack

#KT-32721 fixed

libraries/tools/kotlin-gradle-plugin/src/main/kotlin/org/jetbrains/kotlin/gradle/targets/js/NpmVersions.kt

@@ -26,6 +26,10 @@ class NpmVersions {
     val sourceMapLoader = NpmPackageVersion("source-map-loader", "0.2.4")
     val sourceMapSupport = NpmPackageVersion("source-map-support", "0.5.16")
 
+    val cssLoader = NpmPackageVersion("css-loader", "3.4.2")
+    val styleLoader = NpmPackageVersion("css-loader", "1.1.3")
+    val miniCssExtractPlugin = NpmPackageVersion("mini-css-extract-plugin", "0.9.0")
+
     val mocha = NpmPackageVersion("mocha", "7.1.1")
 
     val karma = NpmPackageVersion("karma", "4.4.1")

libraries/tools/kotlin-gradle-plugin/src/main/kotlin/org/jetbrains/kotlin/gradle/targets/js/webpack/KotlinWebpack.kt

@@ -125,6 +125,9 @@ open class KotlinWebpack : DefaultTask(), RequiresNpmDependencies {
     @Input
     var sourceMaps: Boolean = true
 
+    @Nested
+    val cssSettings: KotlinWebpackCssSettings = KotlinWebpackCssSettings()
+
     @Input
     @Optional
     var devServer: KotlinWebpackConfig.DevServer? = null

libraries/tools/kotlin-gradle-plugin/src/main/kotlin/org/jetbrains/kotlin/gradle/targets/js/webpack/KotlinWebpackConfig.kt

@@ -12,6 +12,7 @@ import org.jetbrains.kotlin.gradle.targets.js.NpmVersions
 import org.jetbrains.kotlin.gradle.targets.js.RequiredKotlinJsDependency
 import org.jetbrains.kotlin.gradle.targets.js.appendConfigsFromDir
 import org.jetbrains.kotlin.gradle.targets.js.jsQuoted
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackCssExtractPolicy.*
 import java.io.File
 import java.io.Serializable
 import java.io.StringWriter
@@ -27,6 +28,7 @@ data class KotlinWebpackConfig(
     val bundleAnalyzerReportDir: File? = null,
     val reportEvaluatedConfigFile: File? = null,
     val devServer: DevServer? = null,
+    val cssSettings: KotlinWebpackCssSettings? = null,
     val devtool: String? = WebpackDevtool.EVAL_SOURCE_MAP,
     val showProgress: Boolean = false,
     val sourceMaps: Boolean = false,
@@ -235,6 +237,80 @@ data class KotlinWebpackConfig(
         )
     }
 
+    private fun Appendable.appendCssSettings() {
+        if (cssSettings == null || !cssSettings.enabled)
+            return
+
+        appendln(
+            """
+            // css settings
+            ;(function(config) {
+            """.trimIndent()
+        )
+
+        //language=ES6
+        appendln(
+            """
+            const use = [
+                {
+                    loader: 'css-loader',
+                    options: {},
+                }
+            ]
+            """.trimIndent()
+        )
+
+        //language=ES6
+        val extractedCss = """
+                const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+                use.unshift({
+                    loader: MiniCssExtractPlugin.loader,
+                    options: {}
+                })
+                plugins.push(new MiniCssExtractPlugin())
+            """.trimIndent()
+
+        //language=ES6
+        val nonExtractedCss = """
+                use.unshift({
+                    loader: 'style-loader',
+                    options: {}
+                })
+            """.trimIndent()
+
+        val extractedSettings = when (cssSettings.extractPolicy) {
+            ALWAYS -> extractedCss
+            //language=ES6
+            DEPENDS_ON_MODE -> """
+                if (config.mode === 'production') {
+                    $extractedCss
+                } else {
+                    $nonExtractedCss
+                }
+            """.trimIndent()
+            NONE -> nonExtractedCss
+        }
+
+        appendln(extractedSettings)
+
+        //language=ES6
+        appendln(
+            """
+                config.module.rules.push({
+                    test: /\.css${'$'}/,
+                    use: use
+                })
+
+            """.trimIndent()
+        )
+
+        appendln(
+            """
+            })(config);
+            """.trimIndent()
+        )
+    }
+
     private fun Appendable.appendResolveModules() {
         if (!resolveFromModulesFirst || entry == null || entry.parent == null) return
 

libraries/tools/kotlin-gradle-plugin/src/main/kotlin/org/jetbrains/kotlin/gradle/targets/js/webpack/KotlinWebpackCssSettings.kt

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2010-2020 JetBrains s.r.o. and Kotlin Programming Language contributors.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the license/LICENSE.txt file.
+ */
+
+package org.jetbrains.kotlin.gradle.targets.js.webpack
+
+import org.gradle.api.tasks.Input
+
+class KotlinWebpackCssSettings {
+    @Input
+    var enabled: Boolean = true
+
+    @Input
+    var extractPolicy: KotlinWebpackCssExtractPolicy = KotlinWebpackCssExtractPolicy.DEPENDS_ON_MODE
+}
+
+enum class KotlinWebpackCssExtractPolicy {
+    ALWAYS,
+    DEPENDS_ON_MODE,
+    NONE
+}