Browse Source

web (breaking change): move top level functions for css selectors to new SelectorsScope (#1504)

* web (breaking change): move top level functions for css selectors to new SelectorsScope

These functions don't need to be on top level because their purpose is to be used within StyleSheet

* web: update CSSSelector plus operator

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
pull/1510/head
Oleksandr Karpovich 3 years ago committed by GitHub
parent
commit
1b731e0af6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSBuilder.kt
  2. 5
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleSheet.kt
  3. 57
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleSheetBuilder.kt
  4. 50
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/selectors/CSSSelectors.kt
  5. 2
      web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
  6. 9
      web/core/src/jsTest/kotlin/CssSelectorsTests.kt
  7. 3
      web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/Sample.kt

1
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSBuilder.kt

@ -1,7 +1,6 @@
package org.jetbrains.compose.web.css
import org.jetbrains.compose.web.css.selectors.CSSSelector
import org.jetbrains.compose.web.css.selectors.desc
interface CSSBuilder : CSSStyleRuleBuilder, GenericStyleSheetBuilder<CSSBuilder> {
val root: CSSSelector

5
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleSheet.kt

@ -6,7 +6,6 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import org.jetbrains.compose.web.ExperimentalComposeWebStyleApi
import org.jetbrains.compose.web.css.selectors.CSSSelector
import org.jetbrains.compose.web.css.selectors.className
import org.jetbrains.compose.web.dom.Style
import kotlin.properties.ReadOnlyProperty
import kotlin.reflect.KProperty
@ -100,7 +99,7 @@ open class StyleSheet(
return if (cssRule != null) {
cssRule.selector.unsafeCast<CSSSelector.CSSClass>().className
} else {
val classNameSelector = className("auto-${counter++}")
val classNameSelector = CSSSelector.CSSClass("auto-${counter++}")
selfSelector.selector = classNameSelector
add(classNameSelector, style)
newCssRules.forEach { add(it) }
@ -115,7 +114,7 @@ open class StyleSheet(
property: KProperty<*>
): ReadOnlyProperty<Any?, String> {
val sheetName = if (usePrefix) "${sheet::class.simpleName}-" else ""
val selector = className("$sheetName${property.name}")
val selector = CSSSelector.CSSClass("$sheetName${property.name}")
val (properties, rules) = buildCSS(selector, selector, cssBuilder)
sheet.add(selector, properties)
rules.forEach { sheet.add(it) }

57
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleSheetBuilder.kt

@ -10,7 +10,7 @@ interface CSSRulesHolder {
}
}
interface GenericStyleSheetBuilder<TBuilder> : CSSRulesHolder {
interface GenericStyleSheetBuilder<TBuilder> : CSSRulesHolder, SelectorsScope {
fun buildRules(
rulesBuild: GenericStyleSheetBuilder<TBuilder>.() -> Unit
): CSSRuleDeclarationList
@ -34,6 +34,61 @@ interface GenericStyleSheetBuilder<TBuilder> : CSSRulesHolder {
}
}
interface SelectorsScope {
fun selector(selector: String): CSSSelector = CSSSelector.Raw(selector)
fun combine(vararg selectors: CSSSelector): CSSSelector = CSSSelector.Combine(selectors.toMutableList())
operator fun CSSSelector.plus(selector: CSSSelector): CSSSelector {
if (this is CSSSelector.Combine) {
this.selectors.add(selector)
return this
}
return if (selector is CSSSelector.Combine) {
selector.selectors.add(0, this)
selector
} else {
combine(this, selector)
}
}
operator fun CSSSelector.plus(selector: String): CSSSelector {
if (this is CSSSelector.Combine) {
this.selectors.add(selector(selector))
return this
}
return combine(this, selector(selector))
}
fun universal(): CSSSelector = CSSSelector.Universal
fun type(type: String): CSSSelector = CSSSelector.Type(type)
fun className(className: String): CSSSelector = CSSSelector.CSSClass(className)
fun id(id: String): CSSSelector = CSSSelector.Id(id)
fun attr(
name: String,
value: String? = null,
operator: CSSSelector.Attribute.Operator = CSSSelector.Attribute.Operator.Equals,
caseSensitive: Boolean = true
): CSSSelector = CSSSelector.Attribute(name, value, operator, caseSensitive)
fun group(vararg selectors: CSSSelector): CSSSelector = CSSSelector.Group(selectors.toList())
@Deprecated("Replaced with `desc`", ReplaceWith("desc(parent, selected)"))
fun descendant(parent: CSSSelector, selected: CSSSelector): CSSSelector = desc(parent, selected)
fun desc(parent: CSSSelector, selected: CSSSelector): CSSSelector = CSSSelector.Descendant(parent, selected)
fun desc(parent: CSSSelector, selected: String): CSSSelector = desc(parent, selector(selected))
fun desc(parent: String, selected: CSSSelector): CSSSelector = desc(selector(parent), selected)
fun desc(parent: String, selected: String): CSSSelector = desc(selector(parent), selector(selected))
fun child(parent: CSSSelector, selected: CSSSelector): CSSSelector =
CSSSelector.Child(parent, selected)
fun sibling(sibling: CSSSelector, selected: CSSSelector): CSSSelector = CSSSelector.Sibling(sibling, selected)
fun adjacent(sibling: CSSSelector, selected: CSSSelector): CSSSelector = CSSSelector.Adjacent(sibling, selected)
fun not(selector: CSSSelector): CSSSelector = CSSSelector.PseudoClass.Not(selector)
fun hover(): CSSSelector = CSSSelector.PseudoClass.hover
fun hover(selector: CSSSelector): CSSSelector = selector + hover()
}
interface StyleSheetBuilder : CSSRulesHolder, GenericStyleSheetBuilder<CSSStyleRuleBuilder> {
override fun style(selector: CSSSelector, cssRule: CSSStyleRuleBuilder.() -> Unit) {
add(selector, buildCSSStyleRule(cssRule))

50
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/selectors/CSSSelectors.kt

@ -254,56 +254,6 @@ abstract class CSSSelector {
}
}
fun selector(selector: String) = CSSSelector.Raw(selector)
fun combine(vararg selectors: CSSSelector) = CSSSelector.Combine(selectors.toMutableList())
operator fun CSSSelector.plus(selector: CSSSelector) = combine(this, selector)
operator fun CSSSelector.plus(selector: String) = combine(this, selector(selector))
operator fun CSSSelector.plus(selector: CSSSelector.Combine): CSSSelector.Combine {
selector.selectors.add(0, this)
return selector
}
operator fun CSSSelector.Combine.plus(selector: CSSSelector): CSSSelector.Combine {
this.selectors.add(selector)
return this
}
operator fun CSSSelector.Combine.plus(selector: String): CSSSelector.Combine {
this.selectors.add(selector(selector))
return this
}
fun universal() = CSSSelector.Universal
fun type(type: String) = CSSSelector.Type(type)
fun className(className: String) = CSSSelector.CSSClass(className)
fun id(id: String) = CSSSelector.Id(id)
fun attr(
name: String,
value: String? = null,
operator: CSSSelector.Attribute.Operator = CSSSelector.Attribute.Operator.Equals,
caseSensitive: Boolean = true
) = CSSSelector.Attribute(name, value, operator, caseSensitive)
fun group(vararg selectors: CSSSelector) = CSSSelector.Group(selectors.toList())
@Deprecated("Replaced with `desc`", ReplaceWith("desc(parent, selected)"))
fun descendant(parent: CSSSelector, selected: CSSSelector) =
desc(parent, selected)
fun desc(parent: CSSSelector, selected: CSSSelector) =
CSSSelector.Descendant(parent, selected)
fun desc(parent: CSSSelector, selected: String) =
desc(parent, selector(selected))
fun desc(parent: String, selected: CSSSelector) =
desc(selector(parent), selected)
fun desc(parent: String, selected: String) =
desc(selector(parent), selector(selected))
fun child(parent: CSSSelector, selected: CSSSelector) =
CSSSelector.Child(parent, selected)
fun sibling(sibling: CSSSelector, selected: CSSSelector) = CSSSelector.Sibling(sibling, selected)
fun adjacent(sibling: CSSSelector, selected: CSSSelector) = CSSSelector.Adjacent(sibling, selected)
fun not(selector: CSSSelector) = CSSSelector.PseudoClass.Not(selector)
fun hover() = CSSSelector.PseudoClass.hover
fun hover(selector: CSSSelector) = selector + hover()
@Suppress("SuspiciousEqualsCombination")
private fun contains(that: CSSSelector, other: CSSSelector, children: List<CSSSelector>, strict: Boolean): Boolean {
return that === other || // exactly same selector

2
web/core/src/jsTest/kotlin/CSSStylesheetTests.kt

@ -7,8 +7,6 @@ package org.jetbrains.compose.web.core.tests
import kotlinx.browser.window
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.*
import org.jetbrains.compose.web.css.selectors.plus
import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.stringPresentation
import org.w3c.dom.HTMLElement

9
web/core/src/jsTest/kotlin/CssSelectorsTests.kt

@ -25,6 +25,9 @@ class CssSelectorsTests {
@Test
fun testPlusOperator() = runTest {
val selectorScope = object : SelectorsScope {}
with(selectorScope) {
assertEquals("h1:hover", (selector("h1") + hover()).toString())
assertEquals(
@ -41,6 +44,12 @@ class CssSelectorsTests {
"h1:hover:enabled",
((selector("h1") + hover()) + ":enabled").toString()
)
assertEquals(
"h1:hover:enabled",
(selector("h1") + combine(hover(), selector(":enabled"))).toString()
)
}
}
@Test

3
web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/Sample.kt

@ -8,9 +8,6 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import org.jetbrains.compose.web.css.selectors.className
import org.jetbrains.compose.web.css.selectors.hover
import org.jetbrains.compose.web.css.selectors.plus
import org.jetbrains.compose.web.renderComposableInBody
import org.jetbrains.compose.web.sample.tests.launchTestCase
import kotlinx.browser.window

Loading…
Cancel
Save