Fix: Support unions (Int | Strin) as CSS key value types, make the te…

…st example use that to align with Laminar v18 usage

js/src/test/scala/com/thirdparty/CompileSpec.scala

@@ -114,6 +114,16 @@ class CompileSpec extends AnyFunSpec with Matchers {
     assert(html.cls.domName == "className")
     assert((html.cls := List("class1", "class2")).domValue == "class1 class2")
 
+    // CSS values
+
+    html.color := "red"
+
+    html.zIndex := 1
+    html.zIndex := "1"
+    html.zIndex := (1: Int | String)
+    html.zIndex := (1: String | Int)
+
+
     // CSS keywords
 
     val s1: StyleSetter[_] = html.display.none

js/src/test/scala/com/thirdparty/defs/styles/StyleProps.scala

@@ -6,6 +6,8 @@ import com.thirdparty.defs.styles.{traits => s}
 import com.thirdparty.defs.styles.{units => u}
 import com.thirdparty.setters.StyleSetter
 
+import scala.scalajs.js.|
+
 // #NOTE: GENERATED CODE
 //  - This file is generated at compile time from the data in Scala DOM Types
 //  - See `GeneratorSpec.scala` for code generation params
@@ -24,11 +26,11 @@ trait StyleProps {
 
   // -- Basic types --
 
-  protected def doubleStyle(key: String): StyleProp[Double] = 
-    new StyleProp[Double](key)
+  protected def doubleStyle(key: String): StyleProp[Double | String] = 
+    new StyleProp[Double | String](key)
 
-  protected def intStyle(key: String): StyleProp[Int] = 
-    new StyleProp[Int](key)
+  protected def intStyle(key: String): StyleProp[Int | String] = 
+    new StyleProp[Int | String](key)
 
   protected def stringStyle(key: String): StyleProp[String] = 
     new StyleProp[String](key)
@@ -284,7 +286,7 @@ trait StyleProps {
     * 
     * [[https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count animation-iteration-count @ MDN]]
     */
-  lazy val animationIterationCount: StyleProp[Double] = doubleStyle("animation-iteration-count")
+  lazy val animationIterationCount: StyleProp[Double | String] = doubleStyle("animation-iteration-count")
 
 
   /**
@@ -831,7 +833,7 @@ trait StyleProps {
     * 
     * [[https://developer.mozilla.org/en-US/docs/Web/CSS/column-count column-count @ MDN]]
     */
-  lazy val columnCount: StyleProp[Int] with s.Auto[Int] = autoStyle("column-count")
+  lazy val columnCount: StyleProp[Int | String] with s.Auto[Int | String] = autoStyle("column-count")
 
 
   /**
@@ -861,7 +863,7 @@ trait StyleProps {
     * 
     * [[https://developer.mozilla.org/en-US/docs/Web/CSS/column-span column-span @ MDN]]
     */
-  lazy val columnSpan: StyleProp[Int] = intStyle("column-span")
+  lazy val columnSpan: StyleProp[Int | String] = intStyle("column-span")
 
 
   /**
@@ -1051,7 +1053,7 @@ trait StyleProps {
     *  - [[https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow flex-grow @ MDN]]
     *  - [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Guide to Flexbox @ CSS-Tricks]]
     */
-  lazy val flexGrow: StyleProp[Double] = doubleStyle("flex-grow")
+  lazy val flexGrow: StyleProp[Double | String] = doubleStyle("flex-grow")
 
 
   /**
@@ -1062,7 +1064,7 @@ trait StyleProps {
     *  - [[https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink flex-shrink @ MDN]]
     *  - [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Guide to Flexbox @ CSS-Tricks]]
     */
-  lazy val flexShrink: StyleProp[Double] = doubleStyle("flex-shrink")
+  lazy val flexShrink: StyleProp[Double | String] = doubleStyle("flex-shrink")
 
 
   /**
@@ -1144,7 +1146,7 @@ trait StyleProps {
     * 
     * [[https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust font-size-adjust @ MDN]]
     */
-  lazy val fontSizeAdjust: StyleProp[Double] with s.None[Double] = noneStyle("font-size-adjust")
+  lazy val fontSizeAdjust: StyleProp[Double | String] with s.None[Double | String] = noneStyle("font-size-adjust")
 
 
   /**
@@ -1426,7 +1428,7 @@ trait StyleProps {
     * 
     * [[https://developer.mozilla.org/en-US/docs/Web/CSS/opacity opacity @ MDN]]
     */
-  lazy val opacity: StyleProp[Double] = doubleStyle("opacity")
+  lazy val opacity: StyleProp[Double | String] = doubleStyle("opacity")
 
 
   /**
@@ -1438,7 +1440,7 @@ trait StyleProps {
     * 
     * [[https://developer.mozilla.org/en-US/docs/Web/CSS/orphans orphans @ MDN]]
     */
-  lazy val orphans: StyleProp[Int] = intStyle("orphans")
+  lazy val orphans: StyleProp[Int | String] = intStyle("orphans")
 
 
   /**
@@ -2009,7 +2011,7 @@ trait StyleProps {
     * 
     * [[https://developer.mozilla.org/en-US/docs/Web/CSS/widows widows @ MDN]]
     */
-  lazy val widows: StyleProp[Int] = intStyle("widows")
+  lazy val widows: StyleProp[Int | String] = intStyle("widows")
 
 
   /**
@@ -2039,7 +2041,7 @@ trait StyleProps {
     * 
     * [[https://developer.mozilla.org/en-US/docs/Web/CSS/z-index z-index @ MDN]]
     */
-  lazy val zIndex: StyleProp[Int] with s.Auto[Int] = autoStyle("z-index")
+  lazy val zIndex: StyleProp[Int | String] with s.Auto[Int | String] = autoStyle("z-index")
 
 
 }

js/src/test/scala/com/thirdparty/keys/StyleProp.scala

@@ -26,6 +26,7 @@ object StyleProp {
 
   // In CSS, every style prop can be set to a string value, and this allows it.
   // You need to make sure that your StyleProp implementation is safe with such a casting implicit conversion. See Laminar v18+ for example.
+  // #Note - I think this is only needed for Scala 2. Scala 3 seems to be able to resolve our `StyleProp[V] := String` use case when the abstract V is actually `Int | String` just fine.
   implicit def stylePropToStringStyleProp[V](p: StyleProp[V]): StyleProp[String] = {
     p.asInstanceOf[StyleProp[String]]
   }

shared/src/main/scala/com/raquo/domtypes/codegen/CanonicalGenerator.scala

@@ -424,7 +424,7 @@ class CanonicalGenerator(
         Nil
       }
     ) ++ (
-      if (lengthUnitsNumType.exists(_.contains("|"))) {
+      if (defs.exists(_.valueType.contains("|")) || lengthUnitsNumType.exists(_.contains("|"))) {
         List("", "import scala.scalajs.js.|")
       } else {
         Nil

shared/src/main/scala/com/raquo/domtypes/defs/styles/StyleDefs.scala

@@ -7,7 +7,9 @@ object StyleDefs {
 
     val String = "String"
 
-    val Int = "Int"
+    val Int = "Int | String"
+
+    val Double = "Double | String"
   }
 
   object implNames {

shared/src/main/scala/com/raquo/domtypes/defs/styles/StylePropDefs.scala

@@ -7,9 +7,9 @@ import com.raquo.domtypes.defs.styles.StyleDefs.{implNames, valueTraits, valueTy
 
 /** CSS style properties */
 object StylePropDefs {
-  
+
   val defs: List[StylePropDef] = List(
-    
+
     StylePropDef(
       scalaName = "all",
       domName = "all",
@@ -133,7 +133,7 @@ object StylePropDefs {
     StylePropDef(
       scalaName = "animationIterationCount",
       domName = "animation-iteration-count",
-      valueType = "Double",
+      valueType = valueTypes.Double,
       valueTraits = Nil,
       valueUnits = Nil,
       implName = implNames.doubleStyle,
@@ -1402,7 +1402,7 @@ object StylePropDefs {
     StylePropDef(
       scalaName = "flexGrow",
       domName = "flex-grow",
-      valueType = "Double",
+      valueType = valueTypes.Double,
       valueTraits = Nil,
       valueUnits = Nil,
       implName = implNames.doubleStyle,
@@ -1420,7 +1420,7 @@ object StylePropDefs {
     StylePropDef(
       scalaName = "flexShrink",
       domName = "flex-shrink",
-      valueType = "Double",
+      valueType = valueTypes.Double,
       valueTraits = Nil,
       valueUnits = Nil,
       implName = implNames.doubleStyle,
@@ -1544,7 +1544,7 @@ object StylePropDefs {
     StylePropDef(
       scalaName = "fontSizeAdjust",
       domName = "font-size-adjust",
-      valueType = "Double",
+      valueType = valueTypes.Double,
       valueTraits = List(valueTraits.None_),
       valueUnits = Nil,
       implName = implNames.noneStyle_,
@@ -1999,7 +1999,7 @@ object StylePropDefs {
     StylePropDef(
       scalaName = "opacity",
       domName = "opacity",
-      valueType = "Double",
+      valueType = valueTypes.Double,
       valueTraits = Nil,
       valueUnits = Nil,
       implName = implNames.doubleStyle,
@@ -3004,5 +3004,5 @@ object StylePropDefs {
     ),
 
   )
-  
+
 }