Skip to content

Scrollbar Module 1 and Partial Overflow Module 3 support #539

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
davesnx merged 5 commits into from
Jan 26, 2025
Merged

Scrollbar Module 1 and Partial Overflow Module 3 support #539

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
834b79e
feat: scrollbar module level 1 and overflow module lvl 3 scrollbar g…
zakybilfagih Jan 24, 2025
aabed6a
chore: promote cram test
zakybilfagih Jan 24, 2025
09cc34b
chore: render overflow clip margin
zakybilfagih Jan 24, 2025
e9fc534
chore: remove dangling unit from overflowClipMargin2
zakybilfagih Jan 24, 2025
eb80d91
chore: use static instead
zakybilfagih Jan 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/css-property-parser/lib/Parser.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1408,6 +1408,7 @@ and property_overflow_block = [%value.rec
"'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | <interpolation>"
]
and property_overflow_clip_box = [%value.rec "'padding-box' | 'content-box'"]
and property_overflow_clip_margin = [%value.rec "<box> || <extended-length>"]
and property_overflow_inline = [%value.rec
"'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | <interpolation>"
]
Expand Down Expand Up @@ -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' | [ <color> ]{2}"
]
and property_scrollbar_width = [%value.rec
"'auto' | 'thin' | 'none' | <extended-length>"
]
and property_scrollbar_color = [%value.rec "'auto' | [ <color> <color> ]"]
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 "<color>"]
and property_scrollbar_arrow_color = [%value.rec "<color>"]
and property_scrollbar_base_color = [%value.rec "<color>"]
Expand Down Expand Up @@ -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)),
Expand Down Expand Up @@ -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),
Expand Down
60 changes: 56 additions & 4 deletions packages/ppx/src/Property_to_runtime.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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)),
Expand Down Expand Up @@ -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)),
Expand Down
15 changes: 11 additions & 4 deletions packages/ppx/test/css-support/overflow-module.t/input.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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|}]; */
11 changes: 11 additions & 0 deletions packages/ppx/test/css-support/overflow-module.t/run.t
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.));
3 changes: 0 additions & 3 deletions packages/ppx/test/css-support/scrollbars-module.t/input.re
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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|}];
13 changes: 5 additions & 8 deletions packages/ppx/test/css-support/scrollbars-module.t/run.t
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
104 changes: 104 additions & 0 deletions packages/runtime/native/shared/Css_types.ml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Comment on lines +4327 to +4337
Copy link
Owner

@davesnx davesnx Jan 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woa, didn't know!

Copy link
Collaborator Author

@zakybilfagih zakybilfagih Jan 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤓


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
24 changes: 24 additions & 0 deletions packages/runtime/native/shared/Declarations.ml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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) )
Loading