[Gradle, JS] Reorganize css settings with rules

#KT-38055 fixed
This commit is contained in:
Ilya Goncharov
2020-04-07 17:51:40 +03:00
parent 3957758541
commit f6891853e0
2 changed files with 106 additions and 43 deletions
@@ -57,16 +57,19 @@ data class KotlinWebpackConfig(
it.add(versions.webpackDevServer) it.add(versions.webpackDevServer)
} }
if (!cssSettings.enabled) return@also if (!cssSettings.enabled || cssSettings.rules.isEmpty()) return@also
it.add(versions.cssLoader) it.add(versions.cssLoader)
when (cssSettings.mode) { cssSettings.rules.forEach { rule ->
EXTRACT -> it.add(versions.miniCssExtractPlugin) when (rule.mode) {
INLINE -> it.add(versions.styleLoader) EXTRACT -> it.add(versions.miniCssExtractPlugin)
IMPORT -> { INLINE -> it.add(versions.styleLoader)
IMPORT -> {
}
else -> cssError()
} }
else -> cssError()
} }
} }
enum class Mode(val code: String) { enum class Mode(val code: String) {
@@ -253,7 +256,7 @@ data class KotlinWebpackConfig(
} }
private fun Appendable.appendCssSettings() { private fun Appendable.appendCssSettings() {
if (!cssSettings.enabled) if (!cssSettings.enabled || cssSettings.rules.isEmpty())
return return
appendln( appendln(
@@ -263,53 +266,81 @@ data class KotlinWebpackConfig(
""".trimIndent() """.trimIndent()
) )
appendln(
"""
| const use = [
| {
| loader: 'css-loader',
| options: {},
| }
| ]
""".trimMargin()
)
val extractedCss = val extractedCss =
""" """
| const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
| use.unshift({ | use.unshift({
| loader: MiniCssExtractPlugin.loader, | loader: MiniCssExtractPlugin.loader,
| options: {} | options: {}
| }) | })
| config.plugins.push(new MiniCssExtractPlugin()) | config.plugins.push(new MiniCssExtractPlugin())
""".trimMargin() """.trimMargin()
val inlinedCss = val inlinedCss =
""" """
| use.unshift({ | use.unshift({
| loader: 'style-loader', | loader: 'style-loader',
| options: {} | options: {}
| }) | })
| |
""".trimMargin() """.trimMargin()
when (cssSettings.mode) { cssSettings.rules.forEach { rule ->
EXTRACT -> appendln(extractedCss) appendln(
INLINE -> appendln(inlinedCss) """
IMPORT -> { | ;(function(config) {
} """.trimMargin()
else -> cssError() )
} appendln(
"""
| const use = [
| {
| loader: 'css-loader',
| options: {},
| }
| ]
""".trimMargin()
)
appendln( when (rule.mode) {
""" EXTRACT -> appendln(extractedCss)
| config.module.rules.push({ INLINE -> appendln(inlinedCss)
| test: /\.css${'$'}/, IMPORT -> {
| use: use }
| }) else -> cssError()
}
val excluded = rule.exclude.let {
if (it.isNotEmpty()) {
"[${it.joinToString()}]"
} else null
}
val included = rule.include.let {
if (it.isNotEmpty()) {
"[${it.joinToString()}]"
} else null
}
appendln(
"""
| config.module.rules.push({
| test: /\.css${'$'}/,
| use: use,
| ${excluded?.let { "exclude: $it," } ?: ""}
| ${included?.let { "include: $it" } ?: ""}
| })
""".trimMargin() """.trimMargin()
) )
appendln(
"""
| })(config);
""".trimMargin()
)
}
appendln( appendln(
""" """
@@ -6,14 +6,46 @@
package org.jetbrains.kotlin.gradle.targets.js.webpack package org.jetbrains.kotlin.gradle.targets.js.webpack
import org.gradle.api.tasks.Input import org.gradle.api.tasks.Input
import org.gradle.api.tasks.Internal
import org.gradle.api.tasks.Nested
import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackCssMode.INLINE import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackCssMode.INLINE
data class KotlinWebpackCssSettings( data class KotlinWebpackCssSettings(
@Input @Input
var enabled: Boolean = true, var enabled: Boolean = true,
@Nested
var rules: MutableList<KotlinWebpackCssRule> = mutableListOf(
KotlinWebpackCssRule()
)
) {
@get:Internal
var mode: String
get() =
rules
.singleOrNull()
?.mode ?: singleRuleError()
set(value) {
rules.singleOrNull()
?.let {
it.mode = value
} ?: singleRuleError()
}
private fun singleRuleError(): Nothing {
throw error("CSS mode shortcut can be applied only with one css rule")
}
}
data class KotlinWebpackCssRule(
@Input @Input
var mode: String = INLINE var mode: String = INLINE,
@Input
var include: MutableList<String> = mutableListOf(),
@Input
var exclude: MutableList<String> = mutableListOf()
) )
object KotlinWebpackCssMode { object KotlinWebpackCssMode {