Add typed support for (a few more) gap and multicolumn CSS properties

src/Css.elm

@@ -1,6 +1,6 @@
 module Css exposing
     ( Style, batch
-    , property, flex, flex2, flex3, medium, alignSelf, alignItems, justifyContent, order, flexDirection, flexFlow1, flexFlow2, flexWrap, flexBasis, flexGrow, flexShrink, transformStyle, transformBox, transform, transforms, currentColor, underline, overline, lineThrough, textOrientation, textDecoration, textDecoration2, textDecoration3, textDecorations, textDecorations2, textDecorations3, textDecorationLine, textDecorationLines, textDecorationStyle, textEmphasisColor, capitalize, uppercase, lowercase, fullWidth, hanging, eachLine, textIndent, textIndent2, textIndent3, clip, ellipsis, textOverflow, optimizeSpeed, optimizeLegibility, geometricPrecision, textRendering, textTransform, textAlign, textAlignLast, left, right, center, justify, justifyAll, start, end, matchParent, true, verticalAlign, display, opacity, minContent, maxContent, fitContent, fillAvailable, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, padding2, padding3, padding4, paddingTop, paddingBottom, paddingRight, paddingLeft, pointerEvents, margin, margin2, margin3, margin4, marginTop, marginBottom, marginRight, marginLeft, marginBlockStart, marginBlockEnd, marginInlineStart, marginInlineEnd, boxSizing, overflow, overflowX, overflowY, overflowWrap, whiteSpace, backgroundColor, color, textShadow, textShadow2, textShadow3, textShadow4, boxShadow, boxShadow2, boxShadow3, boxShadow4, boxShadow5, boxShadow6, lineHeight, letterSpacing, fontFace, fontFamily, fontSize, fontStyle, fontWeight, fontVariant, fontVariant2, fontVariant3, fontVariantLigatures, fontVariantCaps, fontVariantNumeric, fontVariantNumeric2, fontVariantNumeric3, fontFamilies, fontVariantNumerics, fontFeatureSettings, fontFeatureSettingsList, cursor, outline, outline3, outlineColor, outlineWidth, outlineStyle, outlineOffset, zIndex, spaceAround, spaceBetween, resize, fill, touchAction, borderSpacing, borderSpacing2, visibility
+    , property, flex, flex2, flex3, medium, alignSelf, alignItems, justifyContent, order, flexDirection, flexFlow1, flexFlow2, flexWrap, flexBasis, flexGrow, flexShrink, transformStyle, transformBox, transform, transforms, currentColor, underline, overline, lineThrough, textOrientation, textDecoration, textDecoration2, textDecoration3, textDecorations, textDecorations2, textDecorations3, textDecorationLine, textDecorationLines, textDecorationStyle, textEmphasisColor, capitalize, uppercase, lowercase, fullWidth, hanging, eachLine, textIndent, textIndent2, textIndent3, clip, ellipsis, textOverflow, optimizeSpeed, optimizeLegibility, geometricPrecision, textRendering, textTransform, textAlign, textAlignLast, left, right, center, justify, justifyAll, start, end, matchParent, true, verticalAlign, display, opacity, minContent, maxContent, fitContent, fillAvailable, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, padding2, padding3, padding4, paddingTop, paddingBottom, paddingRight, paddingLeft, pointerEvents, margin, margin2, margin3, margin4, marginTop, marginBottom, marginRight, marginLeft, marginBlockStart, marginBlockEnd, marginInlineStart, marginInlineEnd, gap, gap2, rowGap, columnGap, columnCount, columnWidth, columnRuleColor, columnRuleWidth, columnRuleStyle, boxSizing, overflow, overflowX, overflowY, overflowWrap, whiteSpace, backgroundColor, color, textShadow, textShadow2, textShadow3, textShadow4, boxShadow, boxShadow2, boxShadow3, boxShadow4, boxShadow5, boxShadow6, lineHeight, letterSpacing, fontFace, fontFamily, fontSize, fontStyle, fontWeight, fontVariant, fontVariant2, fontVariant3, fontVariantLigatures, fontVariantCaps, fontVariantNumeric, fontVariantNumeric2, fontVariantNumeric3, fontFamilies, fontVariantNumerics, fontFeatureSettings, fontFeatureSettingsList, cursor, outline, outline3, outlineColor, outlineWidth, outlineStyle, outlineOffset, zIndex, spaceAround, spaceBetween, resize, fill, touchAction, borderSpacing, borderSpacing2, visibility
     , Color, all, important, solid, transparent, rgb, rgba, hsl, hsla, hex
     , featureTag, featureTag2, featureOn, featureOff
     , borderCollapse, borderColor, borderColor2, borderColor3, borderColor4, borderBottomLeftRadius, borderBottomLeftRadius2, borderBottomRightRadius, borderBottomRightRadius2, borderTopLeftRadius, borderTopLeftRadius2, borderTopRightRadius, borderTopRightRadius2, borderRadius, borderRadius2, borderRadius3, borderRadius4, borderWidth, borderWidth2, borderWidth3, borderWidth4, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomStyle, borderLeftStyle, borderRightStyle, borderTopStyle, borderStyle, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, borderBox, contentBox, border, border2, border3, borderTop, borderTop2, borderTop3, borderBottom, borderBottom2, borderBottom3, borderLeft, borderLeft2, borderLeft3, borderRight, borderRight2, borderRight3, borderImageOutset, borderImageOutset2, borderImageOutset3, borderImageOutset4, borderImageWidth, borderImageWidth2, borderImageWidth3, borderImageWidth4, scroll, visible, block, inlineBlock, inlineFlex, inline, none, auto, inherit, unset, initial, noWrap, top, static, fixed, sticky, relative, absolute, position, float, bottom, middle, baseline, sub, super, textTop, textBottom, hidden, wavy, dotted, dashed, double, groove, ridge, inset, outset, matrix, matrix3d, perspective, rotate3d, rotateX, rotateY, rotateZ, scale, scale2, scale3d, scaleX, scaleY, skew, skew2, skewX, skewY, translate, translate2, translate3d, translateX, translateY, translateZ, rotate, fillBox, viewBox, flat, preserve3d, content, wrapReverse, wrap, flexStart, flexEnd, stretch, row, rowReverse, column, columnReverse, serif, sansSerif, monospace, cursive, fantasy, xxSmall, xSmall, small, large, xLarge, xxLarge, smaller, larger, normal, italic, oblique, bold, lighter, bolder, smallCaps, allSmallCaps, petiteCaps, allPetiteCaps, unicase, titlingCaps, commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions, ordinal, slashedZero, default, pointer, crosshair, contextMenu, help, progress, wait, cell, text_, verticalText, cursorAlias, copy, move, noDrop, notAllowed, eResize, nResize, neResize, nwResize, sResize, seResize, swResize, wResize, ewResize, nsResize, neswResize, nwseResize, colResize, rowResize, allScroll, zoomIn, zoomOut, grab, grabbing, visiblePainted, visibleFill, visibleStroke, painted, stroke
@@ -342,7 +342,7 @@ functions let you define custom properties and selectors, respectively.
 
 # Properties
 
-@docs property, flex, flex2, flex3, medium, alignSelf, alignItems, justifyContent, order, flexDirection, flexFlow1, flexFlow2, flexWrap, flexBasis, flexGrow, flexShrink, transformStyle, transformBox, transform, transforms, currentColor, underline, overline, lineThrough, textOrientation, textDecoration, textDecoration2, textDecoration3, textDecorations, textDecorations2, textDecorations3, textDecorationLine, textDecorationLines, textDecorationStyle, textEmphasisColor, capitalize, uppercase, lowercase, fullWidth, hanging, eachLine, textIndent, textIndent2, textIndent3, clip, ellipsis, textOverflow, optimizeSpeed, optimizeLegibility, geometricPrecision, textRendering, textTransform, textAlign, textAlignLast, left, right, center, justify, justifyAll, start, end, matchParent, true, verticalAlign, display, opacity, minContent, maxContent, fitContent, fillAvailable, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, padding2, padding3, padding4, paddingTop, paddingBottom, paddingRight, paddingLeft, pointerEvents, margin, margin2, margin3, margin4, marginTop, marginBottom, marginRight, marginLeft, marginBlockStart, marginBlockEnd, marginInlineStart, marginInlineEnd, boxSizing, overflow, overflowX, overflowY, overflowWrap, whiteSpace, backgroundColor, color, textShadow, textShadow2, textShadow3, textShadow4, boxShadow, boxShadow2, boxShadow3, boxShadow4, boxShadow5, boxShadow6, lineHeight, letterSpacing, fontFace, fontFamily, fontSize, fontStyle, fontWeight, fontVariant, fontVariant2, fontVariant3, fontVariantLigatures, fontVariantCaps, fontVariantNumeric, fontVariantNumeric2, fontVariantNumeric3, fontFamilies, fontVariantNumerics, fontFeatureSettings, fontFeatureSettingsList, cursor, outline, outline3, outlineColor, outlineWidth, outlineStyle, outlineOffset, zIndex, spaceAround, spaceBetween, resize, fill, touchAction, borderSpacing, borderSpacing2, visibility
+@docs property, flex, flex2, flex3, medium, alignSelf, alignItems, justifyContent, order, flexDirection, flexFlow1, flexFlow2, flexWrap, flexBasis, flexGrow, flexShrink, transformStyle, transformBox, transform, transforms, currentColor, underline, overline, lineThrough, textOrientation, textDecoration, textDecoration2, textDecoration3, textDecorations, textDecorations2, textDecorations3, textDecorationLine, textDecorationLines, textDecorationStyle, textEmphasisColor, capitalize, uppercase, lowercase, fullWidth, hanging, eachLine, textIndent, textIndent2, textIndent3, clip, ellipsis, textOverflow, optimizeSpeed, optimizeLegibility, geometricPrecision, textRendering, textTransform, textAlign, textAlignLast, left, right, center, justify, justifyAll, start, end, matchParent, true, verticalAlign, display, opacity, minContent, maxContent, fitContent, fillAvailable, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, padding2, padding3, padding4, paddingTop, paddingBottom, paddingRight, paddingLeft, pointerEvents, margin, margin2, margin3, margin4, marginTop, marginBottom, marginRight, marginLeft, marginBlockStart, marginBlockEnd, marginInlineStart, marginInlineEnd, gap, gap2, rowGap, columnGap, columnCount, columnWidth, columnRuleColor, columnRuleWidth, columnRuleStyle, boxSizing, overflow, overflowX, overflowY, overflowWrap, whiteSpace, backgroundColor, color, textShadow, textShadow2, textShadow3, textShadow4, boxShadow, boxShadow2, boxShadow3, boxShadow4, boxShadow5, boxShadow6, lineHeight, letterSpacing, fontFace, fontFamily, fontSize, fontStyle, fontWeight, fontVariant, fontVariant2, fontVariant3, fontVariantLigatures, fontVariantCaps, fontVariantNumeric, fontVariantNumeric2, fontVariantNumeric3, fontFamilies, fontVariantNumerics, fontFeatureSettings, fontFeatureSettingsList, cursor, outline, outline3, outlineColor, outlineWidth, outlineStyle, outlineOffset, zIndex, spaceAround, spaceBetween, resize, fill, touchAction, borderSpacing, borderSpacing2, visibility
 
 
 # Values
@@ -4917,6 +4917,97 @@ marginInlineEnd =
     prop1 "margin-inline-end"
 
 
+{-| Sets [`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
+
+    gap (px 10)
+
+-}
+gap : Length compatible units -> Style
+gap =
+    prop1 "gap"
+
+
+{-| Sets [`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) with separate
+row-gap and column-gap values.
+
+    gap2 (px 10) (px 10)
+
+-}
+gap2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style
+gap2 =
+    prop2 "gap"
+
+
+{-| Sets [`row-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
+
+    rowGap (px 10)
+
+-}
+rowGap : Length compatible units -> Style
+rowGap =
+    prop1 "row-gap"
+
+
+{-| Sets [`column-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
+
+    columnGap (px 10)
+
+-}
+columnGap : Length compatible units -> Style
+columnGap =
+    prop1 "column-gap"
+
+
+{-| Sets [`column-count`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count)
+
+    columnCount (int 3)
+
+-}
+columnCount : IntOrAuto compatible -> Style
+columnCount =
+    prop1 "column-count"
+
+
+{-| Sets [`column-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width)
+
+    columnWidth (px 200)
+
+-}
+columnWidth : LengthOrAuto compatible -> Style
+columnWidth =
+    prop1 "column-width"
+
+
+{-| Sets [`column-rule-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color)
+
+    columnRuleColor transparent
+
+-}
+columnRuleColor : ColorValue compatible -> Style
+columnRuleColor c =
+    property "column-rule-color" c.value
+
+
+{-| Sets [`column-rule-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style)
+
+    columnRuleStyle solid
+
+-}
+columnRuleStyle : BorderStyle compatible -> Style
+columnRuleStyle =
+    prop1 "column-rule-style"
+
+
+{-| Sets [`column-rule-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width)
+
+    columnRuleWidth (px 2)
+
+-}
+columnRuleWidth : Length compatible units -> Style
+columnRuleWidth =
+    prop1 "column-rule-width"
+
+
 {-| The [`top`](https://developer.mozilla.org/en-US/docs/Web/CSS/top) property.
 
     position absolute

tests/Properties.elm

@@ -380,6 +380,69 @@ all =
             ]
         , testProperty { function = "order", property = "order" }
             [ ( order (int 1), "1" ) ]
+        , testProperty { function = "gap", property = "gap" }
+            [ ( gap initial, "initial" )
+            , ( gap unset, "unset" )
+            , ( gap inherit, "inherit" )
+            , ( gap (px 12), "12px" )
+            , ( gap (pct 5), "5%" )
+            ]
+        , testProperty { function = "gap2", property = "gap" }
+            [ ( gap2 initial unset, "initial unset" )
+            , ( gap2 unset inherit, "unset inherit" )
+            , ( gap2 (px 12) (em 3), "12px 3em" )
+            , ( gap2 (pct 5) (vmin 2), "5% 2vmin" )
+            ]
+        , testProperty { function = "rowGap", property = "row-gap" }
+            [ ( rowGap initial, "initial" )
+            , ( rowGap unset, "unset" )
+            , ( rowGap inherit, "inherit" )
+            , ( rowGap (rem 10), "10rem" )
+            , ( rowGap (pct 5), "5%" )
+            ]
+        , testProperty { function = "columnGap", property = "column-gap" }
+            [ ( columnGap initial, "initial" )
+            , ( columnGap unset, "unset" )
+            , ( columnGap inherit, "inherit" )
+            , ( columnGap (px 12), "12px" )
+            , ( columnGap (em 5), "5em" )
+            ]
+        , testProperty { function = "columnCount", property = "column-count" }
+            [ ( columnCount initial, "initial" )
+            , ( columnCount unset, "unset" )
+            , ( columnCount inherit, "inherit" )
+            , ( columnCount auto, "auto" )
+            , ( columnCount (int 5), "5" )
+            ]
+        , testProperty { function = "columnWidth", property = "column-width" }
+            [ ( columnWidth initial, "initial" )
+            , ( columnWidth unset, "unset" )
+            , ( columnWidth inherit, "inherit" )
+            , ( columnWidth auto, "auto" )
+            , ( columnWidth (px 240), "240px" )
+            , ( columnWidth (vh 40), "40vh" )
+            ]
+        , testProperty { function = "columnRuleColor", property = "column-rule-color" }
+            [ ( columnRuleColor initial, "initial" )
+            , ( columnRuleColor unset, "unset" )
+            , ( columnRuleColor inherit, "inherit" )
+            , ( columnRuleColor currentColor, "currentColor" )
+            , ( columnRuleColor (rgb 11 14 17), "rgb(11,14,17)" )
+            ]
+        , testProperty { function = "columnRuleStyle", property = "column-rule-style" }
+            [ ( columnRuleStyle initial, "initial" )
+            , ( columnRuleStyle unset, "unset" )
+            , ( columnRuleStyle inherit, "inherit" )
+            , ( columnRuleStyle solid, "solid" )
+            , ( columnRuleStyle hidden, "hidden" )
+            ]
+        , testProperty { function = "columnRuleWidth", property = "column-rule-width" }
+            [ ( columnRuleWidth initial, "initial" )
+            , ( columnRuleWidth unset, "unset" )
+            , ( columnRuleWidth inherit, "inherit" )
+            , ( columnRuleWidth (pct 45), "45%" )
+            , ( columnRuleWidth (em 64), "64em" )
+            ]
         , testProperty { function = "fontWeight", property = "font-weight" }
             [ ( fontWeight bold, "bold" )
             , ( fontWeight normal, "normal" )