diff --git a/packages/css-property-parser/lib/Parser.re b/packages/css-property-parser/lib/Parser.re index ad75066c9..b0bb6a7a7 100644 --- a/packages/css-property-parser/lib/Parser.re +++ b/packages/css-property-parser/lib/Parser.re @@ -1408,6 +1408,7 @@ and property_overflow_block = [%value.rec "'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | " ] and property_overflow_clip_box = [%value.rec "'padding-box' | 'content-box'"] +and property_overflow_clip_margin = [%value.rec " || "] and property_overflow_inline = [%value.rec "'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | " ] @@ -1578,12 +1579,9 @@ and property_scroll_snap_type_x = [%value.rec and property_scroll_snap_type_y = [%value.rec "'none' | 'mandatory' | 'proximity'" ] -and property_scrollbar_color = [%value.rec - "'auto' | 'dark' | 'light' | [ ]{2}" -] -and property_scrollbar_width = [%value.rec - "'auto' | 'thin' | 'none' | " -] +and property_scrollbar_color = [%value.rec "'auto' | [ ]"] +and property_scrollbar_width = [%value.rec "'auto' | 'thin' | 'none'"] +and property_scrollbar_gutter = [%value.rec "'auto' | 'stable' && 'both-edges'?" ] and property_scrollbar_3dlight_color = [%value.rec ""] and property_scrollbar_arrow_color = [%value.rec ""] and property_scrollbar_base_color = [%value.rec ""] @@ -3073,6 +3071,7 @@ let check_map = ("property-overflow-anchor", check(property_overflow_anchor)), ("property-overflow-block", check(property_overflow_block)), ("property-overflow-clip-box", check(property_overflow_clip_box)), + ("property-overflow-clip-margin", check(property_overflow_clip_margin)), ("property-overflow-inline", check(property_overflow_inline)), ("property-overflow-wrap", check(property_overflow_wrap)), ("property-overflow-x", check(property_overflow_x)), @@ -3253,6 +3252,7 @@ let check_map = ("property-scroll-snap-type-y", check(property_scroll_snap_type_y)), ("property-scrollbar-color", check(property_scrollbar_color)), ("property-scrollbar-width", check(property_scrollbar_width)), + ("property-scrollbar-gutter", check(property_scrollbar_gutter)), ( "property-shape-image-threshold", check(property_shape_image_threshold), diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re index 7a731b0c6..bcadf8980 100644 --- a/packages/ppx/src/Property_to_runtime.re +++ b/packages/ppx/src/Property_to_runtime.re @@ -2191,8 +2191,23 @@ let overflow = } ); -/* let overflow_clip_margin = - unsupportedProperty(Property_parser.property_overflow_clip_margin); */ +let overflow_clip_margin = + polymorphic( + Property_parser.property_overflow_clip_margin, + (~loc, (clipEdgeOrigin, margin)) => { + let margin = Option.value(margin, ~default=`Length(`Px(0.))); + [ + [%expr + CSS.overflowClipMargin2( + ~clipEdgeOrigin=?[%e + render_option(~loc, variant_to_expression, clipEdgeOrigin) + ], + [%e render_extended_length(~loc, margin)], + ) + ], + ]; + }, + ); let overflow_block = monomorphic( @@ -2226,6 +2241,19 @@ let overflow_inline = }, ); +let scrollbar_gutter = + monomorphic( + Property_parser.property_scrollbar_gutter, + (~loc) => [%expr CSS.scrollbarGutter], + (~loc, value: Types.property_scrollbar_gutter) => { + switch (value) { + | `Auto => [%expr `auto] + | `And(_, None) => [%expr `stable] + | `And(_, Some(_)) => [%expr `stableBothEdges] + } + }, + ); + let text_overflow = monomorphic( Property_parser.property_text_overflow, @@ -4462,7 +4490,20 @@ let scrollbar_base_color = unsupportedProperty(Property_parser.property_scrollbar_base_color); let scrollbar_color = - unsupportedProperty(Property_parser.property_scrollbar_color); + monomorphic( + Property_parser.property_scrollbar_color, + (~loc) => [%expr CSS.scrollbarColor], + (~loc, value: Types.property_scrollbar_color) => + switch (value) { + | `Auto => [%expr `auto] + | `Static(thumbColor, trackColor) => + [%expr + `thumbTrackColor(( + [%e render_color(~loc, thumbColor)], + [%e render_color(~loc, trackColor)], + ))] + }, + ); let scrollbar_darkshadow_color = unsupportedProperty(Property_parser.property_scrollbar_darkshadow_color); @@ -4480,7 +4521,16 @@ let scrollbar_track_color = unsupportedProperty(Property_parser.property_scrollbar_track_color); let scrollbar_width = - unsupportedProperty(Property_parser.property_scrollbar_width); + monomorphic( + Property_parser.property_scrollbar_width, + (~loc) => [%expr CSS.scrollbarWidth], + (~loc, value: Types.property_scrollbar_width) => + switch (value) { + | `Thin => [%expr `thin] + | `Auto => [%expr `auto] + | `None => [%expr `none] + }, + ); let stroke_dasharray = unsupportedProperty(Property_parser.property_stroke_dasharray); @@ -5225,6 +5275,7 @@ let properties = [ ("overflow-anchor", found(overflow_anchor)), ("overflow-block", found(overflow_block)), ("overflow-clip-box", found(overflow_clip_box)), + ("overflow-clip-margin", found(overflow_clip_margin)), ("overflow-inline", found(overflow_inline)), ("overflow-wrap", found(overflow_wrap)), ("overflow-x", found(overflow_x)), @@ -5263,6 +5314,7 @@ let properties = [ ("scrollbar-shadow-color", found(scrollbar_shadow_color)), ("scrollbar-track-color", found(scrollbar_track_color)), ("scrollbar-width", found(scrollbar_width)), + ("scrollbar-gutter", found(scrollbar_gutter)), ("stroke-opacity", found(stroke_opacity)), ("stroke-width", found(stroke_width)), ("stroke-dasharray", found(stroke_dasharray)), diff --git a/packages/ppx/test/css-support/overflow-module.t/input.re b/packages/ppx/test/css-support/overflow-module.t/input.re index 3b734cf59..e824c8329 100644 --- a/packages/ppx/test/css-support/overflow-module.t/input.re +++ b/packages/ppx/test/css-support/overflow-module.t/input.re @@ -25,9 +25,16 @@ [%css {|overflow-block: clip|}]; [%css {|overflow-block: scroll|}]; [%css {|overflow-block: auto|}]; -/* [%css {|overflow-clip-margin: content-box|}]; */ -/* [%css {|overflow-clip-margin: padding-box|}]; */ -/* [%css {|overflow-clip-margin: border-box|}]; */ -/* [%css {|overflow-clip-margin: 20px|}]; */ +[%css {|scrollbar-gutter: auto|}]; +[%css {|scrollbar-gutter: stable|}]; +[%css {|scrollbar-gutter: both-edges stable|}]; +[%css {|scrollbar-gutter: stable both-edges|}]; +[%css {|overflow-clip-margin: content-box|}]; +[%css {|overflow-clip-margin: padding-box|}]; +[%css {|overflow-clip-margin: border-box|}]; +[%css {|overflow-clip-margin: 20px|}]; +[%css {|overflow-clip-margin: 1em|}]; +[%css {|overflow-clip-margin: content-box 5px|}]; +[%css {|overflow-clip-margin: 5px content-box|}]; /* [%css {|continue: auto|}]; */ /* [%css {|continue: discard|}]; */ diff --git a/packages/ppx/test/css-support/overflow-module.t/run.t b/packages/ppx/test/css-support/overflow-module.t/run.t index 65039f9d8..6945fb809 100644 --- a/packages/ppx/test/css-support/overflow-module.t/run.t +++ b/packages/ppx/test/css-support/overflow-module.t/run.t @@ -41,3 +41,14 @@ If this test fail means that the module is not in sync with the ppx CSS.overflowBlock(`clip); CSS.overflowBlock(`scroll); CSS.overflowBlock(`auto); + CSS.scrollbarGutter(`auto); + CSS.scrollbarGutter(`stable); + CSS.scrollbarGutter(`stableBothEdges); + CSS.scrollbarGutter(`stableBothEdges); + CSS.overflowClipMargin2(~clipEdgeOrigin=?Some(`contentBox), `pxFloat(0.)); + CSS.overflowClipMargin2(~clipEdgeOrigin=?Some(`paddingBox), `pxFloat(0.)); + CSS.overflowClipMargin2(~clipEdgeOrigin=?Some(`borderBox), `pxFloat(0.)); + CSS.overflowClipMargin2(~clipEdgeOrigin=?None, `pxFloat(20.)); + CSS.overflowClipMargin2(~clipEdgeOrigin=?None, `em(1.)); + CSS.overflowClipMargin2(~clipEdgeOrigin=?Some(`contentBox), `pxFloat(5.)); + CSS.overflowClipMargin2(~clipEdgeOrigin=?Some(`contentBox), `pxFloat(5.)); diff --git a/packages/ppx/test/css-support/scrollbars-module.t/input.re b/packages/ppx/test/css-support/scrollbars-module.t/input.re index 742b73d77..cfbd82a5e 100644 --- a/packages/ppx/test/css-support/scrollbars-module.t/input.re +++ b/packages/ppx/test/css-support/scrollbars-module.t/input.re @@ -1,9 +1,6 @@ /* CSS Scrollbars Module Level 1 */ [%css {|scrollbar-color: auto|}]; -[%css {|scrollbar-color: dark|}]; -[%css {|scrollbar-color: light|}]; [%css {|scrollbar-color: red blue|}]; [%css {|scrollbar-width: auto|}]; [%css {|scrollbar-width: thin|}]; [%css {|scrollbar-width: none|}]; -[%css {|scrollbar-width: 12px|}]; diff --git a/packages/ppx/test/css-support/scrollbars-module.t/run.t b/packages/ppx/test/css-support/scrollbars-module.t/run.t index 11e319acd..433a142f7 100644 --- a/packages/ppx/test/css-support/scrollbars-module.t/run.t +++ b/packages/ppx/test/css-support/scrollbars-module.t/run.t @@ -16,11 +16,8 @@ If this test fail means that the module is not in sync with the ppx $ dune describe pp ./input.re | sed '1,/^];$/d' - CSS.unsafe({js|scrollbarColor|js}, {js|auto|js}); - CSS.unsafe({js|scrollbarColor|js}, {js|dark|js}); - CSS.unsafe({js|scrollbarColor|js}, {js|light|js}); - CSS.unsafe({js|scrollbarColor|js}, {js|red blue|js}); - CSS.unsafe({js|scrollbarWidth|js}, {js|auto|js}); - CSS.unsafe({js|scrollbarWidth|js}, {js|thin|js}); - CSS.unsafe({js|scrollbarWidth|js}, {js|none|js}); - CSS.unsafe({js|scrollbarWidth|js}, {js|12px|js}); + CSS.scrollbarColor(`auto); + CSS.scrollbarColor(`thumbTrackColor((CSS.red, CSS.blue))); + CSS.scrollbarWidth(`auto); + CSS.scrollbarWidth(`thin); + CSS.scrollbarWidth(`none); diff --git a/packages/runtime/native/shared/Css_types.ml b/packages/runtime/native/shared/Css_types.ml index 0b173617b..636c84425 100644 --- a/packages/runtime/native/shared/Css_types.ml +++ b/packages/runtime/native/shared/Css_types.ml @@ -4244,3 +4244,107 @@ module GridTemplateRows = struct end module GridTemplateColumns = GridTemplateRows + +module ScrollbarWidth = struct + type t = + [ `thin + | Auto.t + | None.t + | Var.t + | Cascading.t + ] + + let toString (x : t) = + match x with + | `thin -> {js|thin|js} + | #Auto.t -> Auto.toString + | #None.t -> None.toString + | #Var.t as var -> Var.toString var + | #Cascading.t as c -> Cascading.toString c +end + +module ScrollbarGutter = struct + type t = + [ `stable + | `stableBothEdges + | Auto.t + | Var.t + | Cascading.t + ] + + let toString (x : t) = + match x with + | `stable -> {js|stable|js} + | `stableBothEdges -> {js|stable both-edges|js} + | #Auto.t -> Auto.toString + | #Var.t as var -> Var.toString var + | #Cascading.t as c -> Cascading.toString c +end + +module ScrollbarColor = struct + type t = + [ `thumbTrackColor of Color.t * Color.t + | Auto.t + | Var.t + | Cascading.t + ] + + let toString (x : t) = + match x with + | `thumbTrackColor (a, b) -> Color.toString a ^ {js| |js} ^ Color.toString b + | #Auto.t -> Auto.toString + | #Var.t as var -> Var.toString var + | #Cascading.t as c -> Cascading.toString c +end + +module VisualBox = struct + type t = + [ `contentBox + | `borderBox + | `paddingBox + ] + + let toString x = + match x with + | `contentBox -> {js|content-box|js} + | `borderBox -> {js|border-box|js} + | `paddingBox -> {js|padding-box|js} +end + +module OverflowClipMargin = struct + module ClipEdgeOrigin = struct + type t = + [ VisualBox.t + | Var.t + ] + + let toString x = + match x with + | #VisualBox.t as vb -> VisualBox.toString vb + | #Var.t as va -> Var.toString va + end + + module Margin = struct + type t = + [ Length.t + | Var.t + ] + + let toString x = + match x with + | #Length.t as l -> Length.toString l + | #Var.t as va -> Var.toString va + end + + type t = + [ ClipEdgeOrigin.t + | Margin.t + | Cascading.t + ] + + let toString x = + match x with + | #ClipEdgeOrigin.t as ceo -> ClipEdgeOrigin.toString ceo + | #Margin.t as m -> Margin.toString m + | #Cascading.t as c -> Cascading.toString c +end diff --git a/packages/runtime/native/shared/Declarations.ml b/packages/runtime/native/shared/Declarations.ml index f8e676297..bc658fcb6 100644 --- a/packages/runtime/native/shared/Declarations.ml +++ b/packages/runtime/native/shared/Declarations.ml @@ -446,6 +446,16 @@ let overflows x = let overflowX x = Rule.declaration ({js|overflowX|js}, Overflow.toString x) let overflowY x = Rule.declaration ({js|overflowY|js}, Overflow.toString x) +let overflowClipMargin x = + Rule.declaration ({js|overflowClipMargin|js}, OverflowClipMargin.toString x) + +let overflowClipMargin2 ?(clipEdgeOrigin = `paddingBox) margin = + Rule.declaration + ( {js|overflowClipMargin|js}, + OverflowClipMargin.ClipEdgeOrigin.toString clipEdgeOrigin + ^ {js| |js} + ^ OverflowClipMargin.Margin.toString margin ) + let overflowWrap x = Rule.declaration ({js|overflowWrap|js}, OverflowWrap.toString x) @@ -908,3 +918,17 @@ let fontVariantEmoji x = Rule.declaration ({js|fontVariantEmoji|js}, FontVariantEmoji.toString x) let unicodeRange x = Rule.declaration ({js|unicodeRange|js}, URange.toString x) + +let scrollbarWidth x = + Rule.declaration ({js|scrollbarWidth|js}, ScrollbarWidth.toString x) + +let scrollbarGutter x = + Rule.declaration ({js|scrollbarGutter|js}, ScrollbarGutter.toString x) + +let scrollbarColor x = + Rule.declaration ({js|scrollbarColor|js}, ScrollbarColor.toString x) + +let scrollbarColor2 ~thumbColor ~trackColor = + Rule.declaration + ( {js|scrollbarColor|js}, + ScrollbarColor.toString @@ `thumbTrackColor (thumbColor, trackColor) )