New: gap and column-gap CSS props

CHANGELOG.md

@@ -2,14 +2,15 @@
 
 **Bolded items** in the log are breaking changes.
 
-#### master
+#### v18.0.0
 
 * **New: Output alias links in generated docs**
 * New: Better doc link formatting in generator output
 * New: `scroll-margin-top` CSS property
 * New: `currentcolor` keyword for color props
 * New: `anywhere` keyword for `overflow-wrap` CSS property
-* New: `crossorigin` attribute
+* New: `crossorigin` attribute (Thanks, [@cyz1901](https://github.com/cyz1901)!)
+* New: `gap` and `column-gap`
 
 #### v17.1.0 – Jul 2023
 

README.md

@@ -6,7 +6,7 @@
 _Scala DOM Types_ provides listings of Javascript HTML and SVG tags as well as their attributes, DOM properties, and CSS styles, including the corresponding type information.
 
     "com.raquo" %% "domtypes" % "<version>"     // JVM & SBT
-    "com.raquo" %%% "domtypes" % "<version>"    // Scala.js 1.13.2+
+    "com.raquo" %%% "domtypes" % "<version>"    // Scala.js 1.14.0
 
 _Scala DOM Types_ is used by the following Scala.js UI libraries:
 
@@ -20,6 +20,8 @@ As well as by:
 
 * [Scala DOM Test Utils](https://github.com/raquo/scala-dom-testutils), a library that verifies that your DOM node / tree matches the spec
 
+As the end-user of these libraries, you do not depend on _Scala DOM Types_ at runtime, those libraries use it at their compile time (for SDT v17.0.0+).
+
 
 ## Table of Contents
 
@@ -60,15 +62,17 @@ Please use [Github issues](https://github.com/raquo/scala-dom-types/issues) for
 
 4. If applicable, figure out the type of values that this attribute / property / etc. accepts, or the type of events that it fires. See MDN docs for that. Note that we only care about the type that we can write into it, not the type we can read from it (the latter often includes `null` or `js.undefined`). See what codec(s) our other properties of the same type use, it's probably an "as-is" codec like StringAsIsCodec. See the docs on codecs below.
 
-5. You now have enough information to easily test your understanding. For Laminar, try using `htmlAttr` / `htmlProp` / `styleProp` / `eventProp` / etc. locally as [suggested here](https://laminar.dev/documentation#missing-keys). For example: `styleProp("gap") := "20px"`. For other UI libraries using _Scala DOM Types_, see their docs.
+5. Figure out what the new key should be called, according to the naming convention documented below.
+
+6. You now have enough information to easily test your understanding. For Laminar, try using `htmlAttr` / `htmlProp` / `styleProp` / `eventProp` / etc. locally as [suggested here](https://laminar.dev/documentation#missing-keys). For example: `styleProp("gap") := "20px"`. For other UI libraries using _Scala DOM Types_, see their docs.
 
-6. If everything is looking good, you can now add the information necessary to create a definition for this key. Add it to one of the traits in the [shared/main/.../defs](https://github.com/raquo/scala-dom-types/tree/master/shared/src/main/scala/com/raquo/domtypes/defs) folder. Look at how other keys are done, and follow the lead.
+7. If everything is looking good, you can now add the information necessary to create an SDT definition for this key. Add it to one of the traits in the [shared/main/.../defs](https://github.com/raquo/scala-dom-types/tree/master/shared/src/main/scala/com/raquo/domtypes/defs) folder. Look at how other keys are done, and follow the lead. CSS props require a bit more annotation than others. Look at our defs for other CSS props of the same type to see which `valueTraits`, `valueUnits`, and `implName` to specify.
 
-7. Run `sbt test` before committing. This will generate sample code found in [js/test/.../defs](https://github.com/raquo/scala-dom-types/tree/master/js/src/test/scala/com/thirdparty/defs). You should commit that generated code too.
+8. Run `sbt test` before committing. This will make a few sanity checks, and generate sample code found in [js/test/.../defs](https://github.com/raquo/scala-dom-types/tree/master/js/src/test/scala/com/thirdparty/defs). You should commit that generated code too.
 
-8. And that's it. Send this PR, and I'll check everything (_make sure to provide links to MDN docs!_). You are not blocked by SDT releases – just keep using the temporary syntax from step 5 until the thing you've added to SDT lands in Laminar / Calico / etc.
+9. And that's it. Send this PR, and I'll check everything (_make sure to provide links to MDN docs!_). You are not blocked by SDT releases – just keep using the temporary syntax from step 6 until the thing you've added to SDT lands in Laminar / Calico / etc.
 
-If this is too much, or if you're not sure about something, open an issue or ask on Laminar discord.
+If this is too much for you right now, or if you're not sure about something, open an issue or ask on Laminar discord.
 
 
 ## Why use _Scala DOM Types_

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

@@ -846,10 +846,10 @@ trait StyleProps {
 
 
   /**
-    * The column-gap CSS property sets the size of the gap between columns for
-    * elements which are specified to display as a multi-column element.
+    * The column-gap CSS property sets the size of the gap (gutter) between an element's columns.
     * 
-    * [[https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap column-gap @ MDN]]
+    *  - [[https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap column-gap @ MDN]]
+    *  - [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap]]
     */
   lazy val columnGap: StyleProp[String] with u.Length[DSP, Int] = lengthStyle("column-gap")
 
@@ -1174,6 +1174,16 @@ trait StyleProps {
   lazy val fontWeight: StyleProp[String] with s.FontWeight = fontWeightStyle("font-weight")
 
 
+  /**
+    * The gap CSS shorthand property sets the gaps (gutters) between rows and columns.
+    * This property lets you set both `column-gap` and `row-gap` at the same time.
+    * 
+    *  - [[https://developer.mozilla.org/en-US/docs/Web/CSS/gap gap @ MDN]]
+    *  - [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap]]
+    */
+  lazy val gap: StyleProp[String] with u.Length[DSP, Int] = lengthStyle("gap")
+
+
   /**
     * The height CSS property specifies the height of the content area of an
     * element. The content area is inside the padding, border, and margin of the
@@ -1703,6 +1713,15 @@ trait StyleProps {
   lazy val scrollMarginTop: StyleProp[String] with u.Length[DSP, Int] = lengthStyle("scroll-margin-top")
 
 
+  /**
+    * The row-gap CSS property sets the size of the gap (gutter) between an element's rows.
+    * 
+    *  - [[https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap row-gap @ MDN]]
+    *  - [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap]]
+    */
+  lazy val rowGap: StyleProp[String] with u.Length[DSP, Int] = lengthStyle("row-gap")
+
+
   /**
     * The table-layout CSS property sets the algorithm used to lay out `<table>`
     * cells, rows, and columns.

project/plugins.sbt

@@ -1,6 +1,6 @@
 logLevel := Level.Warn
 
-addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.13.2")
+addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.14.0")
 
 addSbtPlugin("org.portable-scala" % "sbt-scalajs-crossproject" % "1.2.0")
 

shared/src/main/scala/com/raquo/domtypes/codegen/generators/TraitGenerator.scala

@@ -151,7 +151,7 @@ abstract class TraitGenerator[Def](format: CodeFormatting) extends SourceGenerat
       val slashIx = url.lastIndexOf("/")
       val caption = url.substring(slashIx + 1)
       s"$prefix[[$url $caption @ W3C]]"
-    } else if (url == "https://css-tricks.com/snippets/css/a-guide-to-flexbox/") {
+    } else if (url.startsWith("https://css-tricks.com/snippets/css/a-guide-to-flexbox/")) {
       s"$prefix[[$url Guide to Flexbox @ CSS-Tricks]]"
     } else {
       fallbackDocLink(url, prefix)

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

@@ -1090,11 +1090,11 @@ object StylePropDefs {
       valueUnits = List(valueUnits.Length),
       implName = implNames.lengthStyle,
       commentLines = List(
-        "The column-gap CSS property sets the size of the gap between columns for",
-        "elements which are specified to display as a multi-column element.",
+        "The column-gap CSS property sets the size of the gap (gutter) between an element's columns.",
       ),
       docUrls = List(
         "https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap",
+        "https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap",
       ),
     ),
 
@@ -1607,6 +1607,23 @@ object StylePropDefs {
       ),
     ),
 
+    StylePropDef(
+      scalaName = "gap",
+      domName = "gap",
+      valueType = valueTypes.String,
+      valueTraits = Nil,
+      valueUnits = List(valueUnits.Length),
+      implName = implNames.lengthStyle,
+      commentLines = List(
+        "The gap CSS shorthand property sets the gaps (gutters) between rows and columns.",
+        "This property lets you set both `column-gap` and `row-gap` at the same time."
+      ),
+      docUrls = List(
+        "https://developer.mozilla.org/en-US/docs/Web/CSS/gap",
+        "https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap",
+      ),
+    ),
+
     StylePropDef(
       scalaName = "height",
       domName = "height",
@@ -2461,6 +2478,22 @@ object StylePropDefs {
       ),
     ),
 
+    StylePropDef(
+      scalaName = "rowGap",
+      domName = "row-gap",
+      valueType = valueTypes.String,
+      valueTraits = Nil,
+      valueUnits = List(valueUnits.Length),
+      implName = implNames.lengthStyle,
+      commentLines = List(
+        "The row-gap CSS property sets the size of the gap (gutter) between an element's rows.",
+      ),
+      docUrls = List(
+        "https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap",
+        "https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap",
+      ),
+    ),
+
     StylePropDef(
       scalaName = "tableLayout",
       domName = "table-layout",