Skip to content

Commit a6e47ab

Browse files
zakybilfagihzakybilfagih
authored
Scrollbar Module 1 and Partial Overflow Module 3 support (#539)
* feat: scrollbar module level 1 and overflow module lvl 3 scrollbar gutter and overflow clip margin * chore: promote cram test * chore: render overflow clip margin * chore: remove dangling unit from overflowClipMargin2 * chore: use static instead
1 parent 491adbc commit a6e47ab

File tree

8 files changed

+217
-25
lines changed

8 files changed

+217
-25
lines changed

‎packages/css-property-parser/lib/Parser.re‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1408,6 +1408,7 @@ and property_overflow_block = [%value.rec
14081408
"'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | <interpolation>"
14091409
]
14101410
and property_overflow_clip_box = [%value.rec "'padding-box' | 'content-box'"]
1411+
and property_overflow_clip_margin = [%value.rec "<box> || <extended-length>"]
14111412
and property_overflow_inline = [%value.rec
14121413
"'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | <interpolation>"
14131414
]
@@ -1578,12 +1579,9 @@ and property_scroll_snap_type_x = [%value.rec
15781579
and property_scroll_snap_type_y = [%value.rec
15791580
"'none' | 'mandatory' | 'proximity'"
15801581
]
1581-
and property_scrollbar_color = [%value.rec
1582-
"'auto' | 'dark' | 'light' | [ <color> ]{2}"
1583-
]
1584-
and property_scrollbar_width = [%value.rec
1585-
"'auto' | 'thin' | 'none' | <extended-length>"
1586-
]
1582+
and property_scrollbar_color = [%value.rec "'auto' | [ <color> <color> ]"]
1583+
and property_scrollbar_width = [%value.rec "'auto' | 'thin' | 'none'"]
1584+
and property_scrollbar_gutter = [%value.rec "'auto' | 'stable' && 'both-edges'?" ]
15871585
and property_scrollbar_3dlight_color = [%value.rec "<color>"]
15881586
and property_scrollbar_arrow_color = [%value.rec "<color>"]
15891587
and property_scrollbar_base_color = [%value.rec "<color>"]
@@ -3073,6 +3071,7 @@ let check_map =
30733071
("property-overflow-anchor", check(property_overflow_anchor)),
30743072
("property-overflow-block", check(property_overflow_block)),
30753073
("property-overflow-clip-box", check(property_overflow_clip_box)),
3074+
("property-overflow-clip-margin", check(property_overflow_clip_margin)),
30763075
("property-overflow-inline", check(property_overflow_inline)),
30773076
("property-overflow-wrap", check(property_overflow_wrap)),
30783077
("property-overflow-x", check(property_overflow_x)),
@@ -3253,6 +3252,7 @@ let check_map =
32533252
("property-scroll-snap-type-y", check(property_scroll_snap_type_y)),
32543253
("property-scrollbar-color", check(property_scrollbar_color)),
32553254
("property-scrollbar-width", check(property_scrollbar_width)),
3255+
("property-scrollbar-gutter", check(property_scrollbar_gutter)),
32563256
(
32573257
"property-shape-image-threshold",
32583258
check(property_shape_image_threshold),

‎packages/ppx/src/Property_to_runtime.re‎

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2191,8 +2191,23 @@ let overflow =
21912191
}
21922192
);
21932193

2194-
/* let overflow_clip_margin =
2195-
unsupportedProperty(Property_parser.property_overflow_clip_margin); */
2194+
let overflow_clip_margin =
2195+
polymorphic(
2196+
Property_parser.property_overflow_clip_margin,
2197+
(~loc, (clipEdgeOrigin, margin)) => {
2198+
let margin = Option.value(margin, ~default=`Length(`Px(0.)));
2199+
[
2200+
[%expr
2201+
CSS.overflowClipMargin2(
2202+
~clipEdgeOrigin=?[%e
2203+
render_option(~loc, variant_to_expression, clipEdgeOrigin)
2204+
],
2205+
[%e render_extended_length(~loc, margin)],
2206+
)
2207+
],
2208+
];
2209+
},
2210+
);
21962211

21972212
let overflow_block =
21982213
monomorphic(
@@ -2226,6 +2241,19 @@ let overflow_inline =
22262241
},
22272242
);
22282243

2244+
let scrollbar_gutter =
2245+
monomorphic(
2246+
Property_parser.property_scrollbar_gutter,
2247+
(~loc) => [%expr CSS.scrollbarGutter],
2248+
(~loc, value: Types.property_scrollbar_gutter) => {
2249+
switch (value) {
2250+
| `Auto => [%expr `auto]
2251+
| `And(_, None) => [%expr `stable]
2252+
| `And(_, Some(_)) => [%expr `stableBothEdges]
2253+
}
2254+
},
2255+
);
2256+
22292257
let text_overflow =
22302258
monomorphic(
22312259
Property_parser.property_text_overflow,
@@ -4462,7 +4490,20 @@ let scrollbar_base_color =
44624490
unsupportedProperty(Property_parser.property_scrollbar_base_color);
44634491

44644492
let scrollbar_color =
4465-
unsupportedProperty(Property_parser.property_scrollbar_color);
4493+
monomorphic(
4494+
Property_parser.property_scrollbar_color,
4495+
(~loc) => [%expr CSS.scrollbarColor],
4496+
(~loc, value: Types.property_scrollbar_color) =>
4497+
switch (value) {
4498+
| `Auto => [%expr `auto]
4499+
| `Static(thumbColor, trackColor) =>
4500+
[%expr
4501+
`thumbTrackColor((
4502+
[%e render_color(~loc, thumbColor)],
4503+
[%e render_color(~loc, trackColor)],
4504+
))]
4505+
},
4506+
);
44664507

44674508
let scrollbar_darkshadow_color =
44684509
unsupportedProperty(Property_parser.property_scrollbar_darkshadow_color);
@@ -4480,7 +4521,16 @@ let scrollbar_track_color =
44804521
unsupportedProperty(Property_parser.property_scrollbar_track_color);
44814522

44824523
let scrollbar_width =
4483-
unsupportedProperty(Property_parser.property_scrollbar_width);
4524+
monomorphic(
4525+
Property_parser.property_scrollbar_width,
4526+
(~loc) => [%expr CSS.scrollbarWidth],
4527+
(~loc, value: Types.property_scrollbar_width) =>
4528+
switch (value) {
4529+
| `Thin => [%expr `thin]
4530+
| `Auto => [%expr `auto]
4531+
| `None => [%expr `none]
4532+
},
4533+
);
44844534

44854535
let stroke_dasharray =
44864536
unsupportedProperty(Property_parser.property_stroke_dasharray);
@@ -5225,6 +5275,7 @@ let properties = [
52255275
("overflow-anchor", found(overflow_anchor)),
52265276
("overflow-block", found(overflow_block)),
52275277
("overflow-clip-box", found(overflow_clip_box)),
5278+
("overflow-clip-margin", found(overflow_clip_margin)),
52285279
("overflow-inline", found(overflow_inline)),
52295280
("overflow-wrap", found(overflow_wrap)),
52305281
("overflow-x", found(overflow_x)),
@@ -5263,6 +5314,7 @@ let properties = [
52635314
("scrollbar-shadow-color", found(scrollbar_shadow_color)),
52645315
("scrollbar-track-color", found(scrollbar_track_color)),
52655316
("scrollbar-width", found(scrollbar_width)),
5317+
("scrollbar-gutter", found(scrollbar_gutter)),
52665318
("stroke-opacity", found(stroke_opacity)),
52675319
("stroke-width", found(stroke_width)),
52685320
("stroke-dasharray", found(stroke_dasharray)),

‎packages/ppx/test/css-support/overflow-module.t/input.re‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,16 @@
2525
[%css {|overflow-block: clip|}];
2626
[%css {|overflow-block: scroll|}];
2727
[%css {|overflow-block: auto|}];
28-
/* [%css {|overflow-clip-margin: content-box|}]; */
29-
/* [%css {|overflow-clip-margin: padding-box|}]; */
30-
/* [%css {|overflow-clip-margin: border-box|}]; */
31-
/* [%css {|overflow-clip-margin: 20px|}]; */
28+
[%css {|scrollbar-gutter: auto|}];
29+
[%css {|scrollbar-gutter: stable|}];
30+
[%css {|scrollbar-gutter: both-edges stable|}];
31+
[%css {|scrollbar-gutter: stable both-edges|}];
32+
[%css {|overflow-clip-margin: content-box|}];
33+
[%css {|overflow-clip-margin: padding-box|}];
34+
[%css {|overflow-clip-margin: border-box|}];
35+
[%css {|overflow-clip-margin: 20px|}];
36+
[%css {|overflow-clip-margin: 1em|}];
37+
[%css {|overflow-clip-margin: content-box 5px|}];
38+
[%css {|overflow-clip-margin: 5px content-box|}];
3239
/* [%css {|continue: auto|}]; */
3340
/* [%css {|continue: discard|}]; */

‎packages/ppx/test/css-support/overflow-module.t/run.t‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,14 @@ If this test fail means that the module is not in sync with the ppx
4141
CSS.overflowBlock(`clip);
4242
CSS.overflowBlock(`scroll);
4343
CSS.overflowBlock(`auto);
44+
CSS.scrollbarGutter(`auto);
45+
CSS.scrollbarGutter(`stable);
46+
CSS.scrollbarGutter(`stableBothEdges);
47+
CSS.scrollbarGutter(`stableBothEdges);
48+
CSS.overflowClipMargin2(~clipEdgeOrigin=?Some(`contentBox), `pxFloat(0.));
49+
CSS.overflowClipMargin2(~clipEdgeOrigin=?Some(`paddingBox), `pxFloat(0.));
50+
CSS.overflowClipMargin2(~clipEdgeOrigin=?Some(`borderBox), `pxFloat(0.));
51+
CSS.overflowClipMargin2(~clipEdgeOrigin=?None, `pxFloat(20.));
52+
CSS.overflowClipMargin2(~clipEdgeOrigin=?None, `em(1.));
53+
CSS.overflowClipMargin2(~clipEdgeOrigin=?Some(`contentBox), `pxFloat(5.));
54+
CSS.overflowClipMargin2(~clipEdgeOrigin=?Some(`contentBox), `pxFloat(5.));

‎packages/ppx/test/css-support/scrollbars-module.t/input.re‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
/* CSS Scrollbars Module Level 1 */
22
[%css {|scrollbar-color: auto|}];
3-
[%css {|scrollbar-color: dark|}];
4-
[%css {|scrollbar-color: light|}];
53
[%css {|scrollbar-color: red blue|}];
64
[%css {|scrollbar-width: auto|}];
75
[%css {|scrollbar-width: thin|}];
86
[%css {|scrollbar-width: none|}];
9-
[%css {|scrollbar-width: 12px|}];

‎packages/ppx/test/css-support/scrollbars-module.t/run.t‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,8 @@ If this test fail means that the module is not in sync with the ppx
1616

1717
$ dune describe pp ./input.re | sed '1,/^];$/d'
1818

19-
CSS.unsafe({js|scrollbarColor|js}, {js|auto|js});
20-
CSS.unsafe({js|scrollbarColor|js}, {js|dark|js});
21-
CSS.unsafe({js|scrollbarColor|js}, {js|light|js});
22-
CSS.unsafe({js|scrollbarColor|js}, {js|red blue|js});
23-
CSS.unsafe({js|scrollbarWidth|js}, {js|auto|js});
24-
CSS.unsafe({js|scrollbarWidth|js}, {js|thin|js});
25-
CSS.unsafe({js|scrollbarWidth|js}, {js|none|js});
26-
CSS.unsafe({js|scrollbarWidth|js}, {js|12px|js});
19+
CSS.scrollbarColor(`auto);
20+
CSS.scrollbarColor(`thumbTrackColor((CSS.red, CSS.blue)));
21+
CSS.scrollbarWidth(`auto);
22+
CSS.scrollbarWidth(`thin);
23+
CSS.scrollbarWidth(`none);

‎packages/runtime/native/shared/Css_types.ml‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4244,3 +4244,107 @@ module GridTemplateRows = struct
42444244
end
42454245

42464246
module GridTemplateColumns = GridTemplateRows
4247+
4248+
module ScrollbarWidth = struct
4249+
type t =
4250+
[ `thin
4251+
| Auto.t
4252+
| None.t
4253+
| Var.t
4254+
| Cascading.t
4255+
]
4256+
4257+
let toString (x : t) =
4258+
match x with
4259+
| `thin -> {js|thin|js}
4260+
| #Auto.t -> Auto.toString
4261+
| #None.t -> None.toString
4262+
| #Var.t as var -> Var.toString var
4263+
| #Cascading.t as c -> Cascading.toString c
4264+
end
4265+
4266+
module ScrollbarGutter = struct
4267+
type t =
4268+
[ `stable
4269+
| `stableBothEdges
4270+
| Auto.t
4271+
| Var.t
4272+
| Cascading.t
4273+
]
4274+
4275+
let toString (x : t) =
4276+
match x with
4277+
| `stable -> {js|stable|js}
4278+
| `stableBothEdges -> {js|stable both-edges|js}
4279+
| #Auto.t -> Auto.toString
4280+
| #Var.t as var -> Var.toString var
4281+
| #Cascading.t as c -> Cascading.toString c
4282+
end
4283+
4284+
module ScrollbarColor = struct
4285+
type t =
4286+
[ `thumbTrackColor of Color.t * Color.t
4287+
| Auto.t
4288+
| Var.t
4289+
| Cascading.t
4290+
]
4291+
4292+
let toString (x : t) =
4293+
match x with
4294+
| `thumbTrackColor (a, b) -> Color.toString a ^ {js| |js} ^ Color.toString b
4295+
| #Auto.t -> Auto.toString
4296+
| #Var.t as var -> Var.toString var
4297+
| #Cascading.t as c -> Cascading.toString c
4298+
end
4299+
4300+
module VisualBox = struct
4301+
type t =
4302+
[ `contentBox
4303+
| `borderBox
4304+
| `paddingBox
4305+
]
4306+
4307+
let toString x =
4308+
match x with
4309+
| `contentBox -> {js|content-box|js}
4310+
| `borderBox -> {js|border-box|js}
4311+
| `paddingBox -> {js|padding-box|js}
4312+
end
4313+
4314+
module OverflowClipMargin = struct
4315+
module ClipEdgeOrigin = struct
4316+
type t =
4317+
[ VisualBox.t
4318+
| Var.t
4319+
]
4320+
4321+
let toString x =
4322+
match x with
4323+
| #VisualBox.t as vb -> VisualBox.toString vb
4324+
| #Var.t as va -> Var.toString va
4325+
end
4326+
4327+
module Margin = struct
4328+
type t =
4329+
[ Length.t
4330+
| Var.t
4331+
]
4332+
4333+
let toString x =
4334+
match x with
4335+
| #Length.t as l -> Length.toString l
4336+
| #Var.t as va -> Var.toString va
4337+
end
4338+
4339+
type t =
4340+
[ ClipEdgeOrigin.t
4341+
| Margin.t
4342+
| Cascading.t
4343+
]
4344+
4345+
let toString x =
4346+
match x with
4347+
| #ClipEdgeOrigin.t as ceo -> ClipEdgeOrigin.toString ceo
4348+
| #Margin.t as m -> Margin.toString m
4349+
| #Cascading.t as c -> Cascading.toString c
4350+
end

‎packages/runtime/native/shared/Declarations.ml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -446,6 +446,16 @@ let overflows x =
446446
let overflowX x = Rule.declaration ({js|overflowX|js}, Overflow.toString x)
447447
let overflowY x = Rule.declaration ({js|overflowY|js}, Overflow.toString x)
448448

449+
let overflowClipMargin x =
450+
Rule.declaration ({js|overflowClipMargin|js}, OverflowClipMargin.toString x)
451+
452+
let overflowClipMargin2 ?(clipEdgeOrigin = `paddingBox) margin =
453+
Rule.declaration
454+
( {js|overflowClipMargin|js},
455+
OverflowClipMargin.ClipEdgeOrigin.toString clipEdgeOrigin
456+
^ {js| |js}
457+
^ OverflowClipMargin.Margin.toString margin )
458+
449459
let overflowWrap x =
450460
Rule.declaration ({js|overflowWrap|js}, OverflowWrap.toString x)
451461

@@ -908,3 +918,17 @@ let fontVariantEmoji x =
908918
Rule.declaration ({js|fontVariantEmoji|js}, FontVariantEmoji.toString x)
909919

910920
let unicodeRange x = Rule.declaration ({js|unicodeRange|js}, URange.toString x)
921+
922+
let scrollbarWidth x =
923+
Rule.declaration ({js|scrollbarWidth|js}, ScrollbarWidth.toString x)
924+
925+
let scrollbarGutter x =
926+
Rule.declaration ({js|scrollbarGutter|js}, ScrollbarGutter.toString x)
927+
928+
let scrollbarColor x =
929+
Rule.declaration ({js|scrollbarColor|js}, ScrollbarColor.toString x)
930+
931+
let scrollbarColor2 ~thumbColor ~trackColor =
932+
Rule.declaration
933+
( {js|scrollbarColor|js},
934+
ScrollbarColor.toString @@ `thumbTrackColor (thumbColor, trackColor) )

0 commit comments

Comments
 (0)