Source file divide.ml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
(** Divide utilities for creating gaps between child elements
@see <https://tailwindcss.com/docs/divide-width>
Tailwind CSS Divide Width documentation *)
module Css = Cascade.Css
module Handler = struct
open Style
open Css
type t =
| X of int
| Y of int
| X_arb of string * [ `Width of Css.border_width | `Raw of string ]
| Y_arb of string * [ `Width of Css.border_width | `Raw of string ]
| X_reverse
| Y_reverse
| Named_color of Color.color * int
| Named_color_opacity of Color.color * int * Color.opacity_modifier
| Transparent
| Current
| Current_opacity of Color.opacity_modifier
| Inherit
| Bracket_color of string * Css.color
| Bracket_color_opacity of string * Css.color * Color.opacity_modifier
| Raw_color of string * string * Color.opacity_modifier
| Line_style of Css.border_style
let name = "divide"
let priority = function X_reverse -> 38 | _ -> 17
let divide_x_reverse_var =
Var.property_default Css.Number_percentage ~initial:(Num 0.0)
~universal:true ~property_order:4 ~family:`Border "tw-divide-x-reverse"
let divide_y_reverse_var =
Var.property_default Css.Number_percentage ~initial:(Num 0.0)
~universal:true ~property_order:5 ~family:`Border "tw-divide-y-reverse"
let border_style_var = Borders.border_style_var
let divide_x_width_style ~class_name ~(width : Css.border_width) =
let selector =
Css.Selector.(where [ class_ class_name >> not [ Last_child ] ])
in
let reverse_decl, reverse_ref =
Var.binding divide_x_reverse_var (Css.Num 0.0)
in
let reverse_var_name = Css.var_name reverse_ref in
let border_style_ref = Var.reference border_style_var in
let start_width : Css.border_width =
Calc Css.Calc.(mul (Val width) (var reverse_var_name))
in
let end_width : Css.border_width =
Calc
Css.Calc.(
mul (Val width) (nested (sub (Num 1.0) (var reverse_var_name))))
in
let property_rules =
[
Var.property_rule divide_x_reverse_var;
Var.property_rule border_style_var;
]
|> List.filter_map Fun.id
in
let rule =
Css.rule ~selector
[
reverse_decl;
border_inline_style (logical_border_style (Var border_style_ref));
border_inline_start_width start_width;
border_inline_end_width end_width;
]
in
style ~rules:(Some [ rule ]) ~property_rules:(Css.concat property_rules) []
let divide_y_width_style ~class_name ~(width : Css.border_width) =
let selector =
Css.Selector.(where [ class_ class_name >> not [ Last_child ] ])
in
let reverse_decl, reverse_ref =
Var.binding divide_y_reverse_var (Css.Num 0.0)
in
let reverse_var_name = Css.var_name reverse_ref in
let border_style_ref = Var.reference border_style_var in
let start_width : Css.border_width =
Calc Css.Calc.(mul (Val width) (var reverse_var_name))
in
let end_width : Css.border_width =
Calc
Css.Calc.(
mul (Val width) (nested (sub (Num 1.0) (var reverse_var_name))))
in
let property_rules =
[
Var.property_rule divide_y_reverse_var;
Var.property_rule border_style_var;
]
|> List.filter_map Fun.id
in
let rule =
Css.rule ~selector
[
reverse_decl;
border_bottom_style (Var border_style_ref);
border_top_style (Var border_style_ref);
border_top_width start_width;
border_bottom_width end_width;
]
in
style ~rules:(Some [ rule ]) ~property_rules:(Css.concat property_rules) []
let divide_raw_width_style axis ~class_name value =
let selector =
Css.Selector.(where [ class_ class_name >> not [ Last_child ] ])
in
let reverse_var, inline_styles, widths =
match axis with
| `X ->
( divide_x_reverse_var,
[
border_inline_style
(logical_border_style (Var (Var.reference border_style_var)));
],
[ "border-inline-start-width"; "border-inline-end-width" ] )
| `Y ->
( divide_y_reverse_var,
[
border_bottom_style (Var (Var.reference border_style_var));
border_top_style (Var (Var.reference border_style_var));
],
[ "border-top-width"; "border-bottom-width" ] )
in
let reverse_decl, reverse_ref = Var.binding reverse_var (Css.Num 0.) in
let reverse = "var(--" ^ Css.var_name reverse_ref ^ ")" in
let width_values =
[
Parse.wrap_declaration_value ~before:"calc("
~after:(" * " ^ reverse ^ ")")
value;
Parse.wrap_declaration_value ~before:"calc("
~after:(" * calc(1 - " ^ reverse ^ "))")
value;
]
in
let raw_widths =
List.map2
(fun property raw ->
Option.bind raw (Parse.opaque_declaration property))
widths width_values
|> List.filter_map Fun.id
in
if List.length raw_widths <> 2 then style []
else
let property_rules =
[ Var.property_rule reverse_var; Var.property_rule border_style_var ]
|> List.filter_map Fun.id |> Css.concat
in
let rule =
Css.rule ~selector ((reverse_decl :: inline_styles) @ raw_widths)
in
style ~rules:(Some [ rule ]) ~property_rules []
let divide_x_reverse_style () =
let selector =
Css.Selector.(where [ class_ "divide-x-reverse" >> not [ Last_child ] ])
in
let decl = Var.set divide_x_reverse_var (Css.Num 1.0) in
let property_rules =
[ Var.property_rule divide_x_reverse_var ] |> List.filter_map Fun.id
in
let rule = Css.rule ~selector [ decl ] in
style ~rules:(Some [ rule ]) ~property_rules:(Css.concat property_rules) []
let divide_y_reverse_style () =
let selector =
Css.Selector.(where [ class_ "divide-y-reverse" >> not [ Last_child ] ])
in
let decl = Var.set divide_y_reverse_var (Css.Num 1.0) in
let property_rules =
[ Var.property_rule divide_y_reverse_var ] |> List.filter_map Fun.id
in
let rule = Css.rule ~selector [ decl ] in
style ~rules:(Some [ rule ]) ~property_rules:(Css.concat property_rules) []
let divide_children_selector class_name =
Css.Selector.(
where [ Combined (Class class_name, Child, Not [ Last_child ]) ])
let divide_color_style ?theme color shade =
let class_name =
if Color.is_shadeless color then "divide-" ^ Color.color_to_string color
else "divide-" ^ Color.color_to_string color ^ "-" ^ string_of_int shade
in
let selector = divide_children_selector class_name in
if Color.is_custom_color color then
let css_color = Color.to_css color shade in
let rule = Css.rule ~selector [ Css.border_color css_color ] in
style ~rules:(Some [ rule ]) []
else
let color_var =
Color.property_color_var ?theme ~property_prefix:"border-color" color
shade
in
let color_value =
Color.property_color_value ?theme ~property_prefix:"border-color" color
shade
in
let decls, color = Color.bound ?theme color_var color_value in
let rule = Css.rule ~selector (decls @ [ Css.border_color color ]) in
style ~rules:(Some [ rule ]) []
let divide_transparent_style () =
let selector = divide_children_selector "divide-transparent" in
let rule = Css.rule ~selector [ Css.border_color (Css.hex "#0000") ] in
style ~rules:(Some [ rule ]) []
let divide_current_style () =
let selector = divide_children_selector "divide-current" in
let rule = Css.rule ~selector [ Css.border_color Css.Current ] in
style ~rules:(Some [ rule ]) []
let divide_inherit_style () =
let selector = divide_children_selector "divide-inherit" in
let rule = Css.rule ~selector [ Css.border_color Css.Inherit ] in
style ~rules:(Some [ rule ]) []
let divide_bracket_color_style ~theme class_name c =
let color = Color.resolve_bracket_css_color c in
let selector = divide_children_selector class_name in
let rule color = Css.rule ~selector [ Css.border_color color ] in
match Color.pre_color_mix_fallback theme color with
| None -> style ~rules:(Some [ rule color ]) []
| Some fallback ->
let supports =
Css.supports ~condition:Color.color_mix_supports_condition
[ rule color ]
in
style ~rules:(Some [ rule fallback; supports ]) []
let divide_bracket_color_opacity_style ~theme class_name c opacity =
let selector = divide_children_selector class_name in
match Color.bracket_color_opacity ~theme c opacity with
| Color.Folded value ->
let rule = Css.rule ~selector [ Css.border_color value ] in
style ~rules:(Some [ rule ]) []
| Color.Guarded { fallback; mixed } ->
let rule = Css.rule ~selector [ Css.border_color fallback ] in
let supports_block =
Css.supports ~condition:Color.color_mix_supports_condition
[ Css.rule ~selector [ Css.border_color mixed ] ]
in
style ~rules:(Some [ rule; supports_block ]) []
let divide_raw_color_style ~theme class_name value opacity =
let selector = divide_children_selector class_name in
let rule v =
Css.rule ~selector
(Option.to_list (Parse.opaque_declaration "border-color" v))
in
let mixed =
match opacity with
| Color.No_opacity -> value
| opacity ->
Option.value ~default:value
(Parse.alpha_mix ~alpha:(Color.opacity_percentage opacity) value)
in
match Parse.color_mix_fallback ~resolve:(Color.theme_token theme) mixed with
| None -> style ~rules:(Some [ rule mixed ]) []
| Some in_the_open ->
let supports =
Css.supports ~condition:Color.color_mix_supports_condition
[ rule mixed ]
in
style ~rules:(Some [ rule in_the_open; supports ]) []
let divide_style_of_string (s : string) =
let open Css in
let r : border_style option =
match s with
| "dashed" -> Some Dashed
| "dotted" -> Some Dotted
| "double" -> Some Double
| "none" -> Some None
| "solid" -> Some Solid
| _ -> Stdlib.Option.none
in
r
let border_style_to_string (bs : Css.border_style) =
match bs with
| Dashed -> "dashed"
| Dotted -> "dotted"
| Double -> "double"
| None -> "none"
| Solid -> "solid"
| _ -> "solid"
let divide_style_style (bs : Css.border_style) =
let name = border_style_to_string bs in
let class_name = "divide-" ^ name in
let selector = divide_children_selector class_name in
let decl = Var.set border_style_var bs in
let rule = Css.rule ~selector [ decl; Css.border_style bs ] in
style ~rules:(Some [ rule ]) []
let divide_color_opacity_style ?theme color shade opacity =
let base_class_name =
if Color.is_shadeless color then "divide-" ^ Color.color_to_string color
else "divide-" ^ Color.color_to_string color ^ "-" ^ string_of_int shade
in
let class_name = base_class_name ^ Color.opacity_suffix opacity in
let selector = divide_children_selector class_name in
Color.divide_with_opacity ?theme color shade opacity selector
let divide_current_opacity_style opacity =
let class_name = "divide-current" ^ Color.opacity_suffix opacity in
let selector = divide_children_selector class_name in
Color.divide_current_with_opacity opacity selector
let has_opacity s = String.contains s '/'
let to_class = function
| X n -> if n = 1 then "divide-x" else "divide-x-" ^ string_of_int n
| Y n -> if n = 1 then "divide-y" else "divide-y-" ^ string_of_int n
| X_arb (spelling, _) -> "divide-x-[" ^ spelling ^ "]"
| Y_arb (spelling, _) -> "divide-y-[" ^ spelling ^ "]"
| X_reverse -> "divide-x-reverse"
| Y_reverse -> "divide-y-reverse"
| Named_color (c, shade) ->
if Color.is_shadeless c then "divide-" ^ Color.color_to_string c
else "divide-" ^ Color.color_to_string c ^ "-" ^ string_of_int shade
| Named_color_opacity (c, shade, opacity) ->
if Color.is_shadeless c then
"divide-" ^ Color.color_to_string c ^ Color.opacity_suffix opacity
else
"divide-" ^ Color.color_to_string c ^ "-" ^ string_of_int shade
^ Color.opacity_suffix opacity
| Transparent -> "divide-transparent"
| Current -> "divide-current"
| Current_opacity opacity -> "divide-current" ^ Color.opacity_suffix opacity
| Inherit -> "divide-inherit"
| Bracket_color (v, _) -> "divide-[" ^ v ^ "]"
| Bracket_color_opacity (v, _, opacity) ->
"divide-[" ^ v ^ "]" ^ Color.opacity_suffix opacity
| Raw_color (v, _, opacity) ->
"divide-[" ^ v ^ "]" ^ Color.opacity_suffix opacity
| Line_style bs -> "divide-" ^ border_style_to_string bs
let to_style theme =
let divide_color_style color shade =
divide_color_style ~theme color shade
in
let divide_color_opacity_style color shade opacity =
divide_color_opacity_style ~theme color shade opacity
in
function
| X n ->
let class_name =
if n = 1 then "divide-x" else "divide-x-" ^ string_of_int n
in
let w = if n = 1 then theme.Scheme.default_border_width else n in
divide_x_width_style ~class_name ~width:(Px (float_of_int w))
| Y n ->
let class_name =
if n = 1 then "divide-y" else "divide-y-" ^ string_of_int n
in
let w = if n = 1 then theme.Scheme.default_border_width else n in
divide_y_width_style ~class_name ~width:(Px (float_of_int w))
| X_arb (spelling, `Width width) ->
let class_name = to_class (X_arb (spelling, `Width width)) in
divide_x_width_style ~class_name ~width
| Y_arb (spelling, `Width width) ->
let class_name = to_class (Y_arb (spelling, `Width width)) in
divide_y_width_style ~class_name ~width
| X_arb (spelling, `Raw value) ->
divide_raw_width_style `X
~class_name:(to_class (X_arb (spelling, `Raw value)))
value
| Y_arb (spelling, `Raw value) ->
divide_raw_width_style `Y
~class_name:(to_class (Y_arb (spelling, `Raw value)))
value
| X_reverse -> divide_x_reverse_style ()
| Y_reverse -> divide_y_reverse_style ()
| Named_color (color, shade) -> divide_color_style color shade
| Named_color_opacity (color, shade, opacity) ->
divide_color_opacity_style color shade opacity
| Transparent -> divide_transparent_style ()
| Current -> divide_current_style ()
| Current_opacity opacity -> divide_current_opacity_style opacity
| Inherit -> divide_inherit_style ()
| Bracket_color (inner, c) ->
let class_name = to_class (Bracket_color (inner, c)) in
divide_bracket_color_style ~theme class_name c
| Bracket_color_opacity (inner, c, opacity) ->
let class_name = to_class (Bracket_color_opacity (inner, c, opacity)) in
divide_bracket_color_opacity_style ~theme class_name c opacity
| Raw_color (inner, value, opacity) ->
let class_name = to_class (Raw_color (inner, value, opacity)) in
divide_raw_color_style ~theme class_name value opacity
| Line_style bs -> divide_style_style bs
let suborder = function
| X 1 -> 59_999
| X n -> 60_000 + min n 1_997
| X_arb _ -> 61_998
| Y 1 -> 61_999
| Y n -> 62_000 + min n 1_997
| Y_arb _ -> 63_998
| Y_reverse -> 64_000
| Line_style _ -> 65_000
| Named_color _ | Named_color_opacity _ -> 66_000
| Bracket_color _ | Bracket_color_opacity _ | Raw_color _ -> 66_000
| Current | Current_opacity _ -> 66_000
| Inherit -> 66_000
| Transparent -> 66_000
| X_reverse -> 89_000_000
let bracket_spelling (width : Css.border_width) : string option =
match width with
| Auto | Max_content | Min_content | Fit_content | From_font | Var _ -> None
| Zero -> Some "0px"
| width -> Some (Css.Pp.to_string Css.Properties.pp_border_width width)
let parse_bracket_width s : (string * Css.border_width) option =
let len = String.length s in
if len > 2 && s.[0] = '[' && s.[len - 1] = ']' then
let inner = String.sub s 1 (len - 2) in
match Borders.parse_border_width inner with
| Some width -> Some (inner, width)
| None -> None
else None
let of_class theme class_name =
let parts = Parse.split_class class_name in
match parts with
| [ "divide"; "x" ] -> Ok (X 1)
| [ "divide"; "y" ] -> Ok (Y 1)
| [ "divide"; "x"; "reverse" ] -> Ok X_reverse
| [ "divide"; "y"; "reverse" ] -> Ok Y_reverse
| [ "divide"; "x"; value ] -> (
match parse_bracket_width value with
| Some (spelling, w) -> Ok (X_arb (spelling, `Width w))
| None -> (
if Parse.is_bracket_value value then
let spelling = Parse.bracket_inner value in
match Parse.arbitrary_declaration_value spelling with
| Some raw -> Ok (X_arb (spelling, `Raw raw))
| None -> Error (`Msg "Not a divide utility")
else
match Parse.decimal_int value with
| Some n when n >= 0 -> Ok (X n)
| _ -> Error (`Msg "Not a divide utility")))
| [ "divide"; "y"; value ] -> (
match parse_bracket_width value with
| Some (spelling, w) -> Ok (Y_arb (spelling, `Width w))
| None -> (
if Parse.is_bracket_value value then
let spelling = Parse.bracket_inner value in
match Parse.arbitrary_declaration_value spelling with
| Some raw -> Ok (Y_arb (spelling, `Raw raw))
| None -> Error (`Msg "Not a divide utility")
else
match Parse.decimal_int value with
| Some n when n >= 0 -> Ok (Y n)
| _ -> Error (`Msg "Not a divide utility")))
| [ "divide"; "transparent" ] -> Ok Transparent
| [ "divide"; "inherit" ] -> Ok Inherit
| [ "divide"; style_str ]
when Option.is_some (divide_style_of_string style_str) ->
Ok (Line_style (Option.get (divide_style_of_string style_str)))
| [ "divide"; current_str ]
when String.starts_with ~prefix:"current" current_str -> (
let base, opacity = Color.parse_opacity_modifier ~theme current_str in
match opacity with
| Color.No_opacity when base = "current" -> Ok Current
| Color.No_opacity -> Error (`Msg ("Invalid divide: " ^ current_str))
| _ -> Ok (Current_opacity opacity))
| [ "divide"; v ]
when Parse.is_bracket_value (fst (Color.parse_opacity_modifier ~theme v))
-> (
let base_str, opacity = Color.parse_opacity_modifier ~theme v in
let inner = Parse.bracket_inner base_str in
let color_of_hint = function
| Color.Typed_var v | Color.Bare_var v ->
(Css.Var (Var.bracket (Parse.extract_var_name v)) : Css.color)
| Color.Plain_color c -> c
in
match Color.parse_bracket_hint inner with
| Some hint -> (
let c = color_of_hint hint in
match opacity with
| Color.No_opacity -> Ok (Bracket_color (inner, c))
| _ -> Ok (Bracket_color_opacity (inner, c, opacity)))
| None -> (
match Parse.arbitrary_declaration_value inner with
| Some value -> Ok (Raw_color (inner, value, opacity))
| None -> Error (`Msg ("Invalid divide bracket color: " ^ inner))))
| "divide" :: color_parts when List.exists has_opacity color_parts -> (
match Color.shade_and_opacity_of_strings ~theme color_parts with
| Ok (color, shade, opacity) ->
Ok (Named_color_opacity (color, shade, opacity))
| Error _ ->
let name = String.concat "-" color_parts in
let base, opacity = Color.parse_opacity_modifier ~theme name in
if
Scheme.theme_value (Some theme) ("color-" ^ base) <> None
|| Scheme.theme_value (Some theme) ("border-color-" ^ base)
<> None
then Ok (Named_color_opacity (Theme_named base, 500, opacity))
else Error (`Msg ("Invalid divide color: " ^ name)))
| "divide" :: color_parts -> (
match Color.shade_of_strings ~theme color_parts with
| Ok (color, shade) -> Ok (Named_color (color, shade))
| Error _ ->
let name = String.concat "-" color_parts in
if
Scheme.theme_value (Some theme) ("color-" ^ name) <> None
|| Scheme.theme_value (Some theme) ("border-color-" ^ name)
<> None
then Ok (Named_color (Theme_named name, 500))
else Error (`Msg ("Invalid divide color: " ^ name)))
| _ -> Error (`Msg "Not a divide utility")
let examples = []
end
open Handler
module Utility_factory = Utility.Make (Handler)
let utility = Utility_factory.v
let divide_x_reverse = utility X_reverse
let divide_y_reverse = utility Y_reverse
(** {1 Divide Width Utilities} *)
let divide_x n = utility (X n)
let divide_y n = utility (Y n)
let bracket_spelling ~name w =
match Handler.bracket_spelling w with
| Some spelling -> spelling
| None -> invalid_arg (name ^ ": width has no arbitrary-value spelling")
let divide_x_length w =
utility (X_arb (bracket_spelling ~name:"divide_x_length" w, `Width w))
let divide_y_length w =
utility (Y_arb (bracket_spelling ~name:"divide_y_length" w, `Width w))
(** {1 Divide Colour Utilities} *)
let divide_color ?opacity ?(shade = 500) color =
Color.check_shade ~utility:"divide_color" color shade;
match opacity with
| None -> utility (Named_color (color, shade))
| Some pct ->
utility (Named_color_opacity (color, shade, Color.opacity_of_int pct))
let divide_transparent = utility Transparent
let divide_current = utility Current
let divide_inherit = utility Inherit
(** {1 Divide Style Utilities} *)
let divide_style s = utility (Line_style s)