package styled-ppx

  1. Overview
  2. Docs
package styled-ppx
Legend:
Page
Library
Module
Module type
Parameter
Class
Class type
Source

Source file Autoprefixer.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
(* Implementation of stylis autoprefixer https://github.com/thysultan/stylis *)
(* This autoprefixer works with ">1%, last 4 versions, Firefox ESR, not ie < 9, not dead" from browserlist and not so precise as stylis implementation *)

let webkit property = Printf.sprintf "-webkit-%s" property
let moz property = Printf.sprintf "-moz-%s" property
let ms property = Printf.sprintf "-ms-%s" property
let o property = Printf.sprintf "-o-%s" property
let khtml property = Printf.sprintf "-khtml-%s" property

let prefix_property (property : string) (value : string) prefixes =
  prefixes
  |> Array.map (fun prefixer -> Rule.declaration (prefixer property, value))

let prefix_value (property : string) (value : string) prefixes =
  prefixes
  |> Array.map (fun prefixer -> Rule.declaration (property, prefixer value))

let prefix rule =
  let ( @ ) = Array.append in
  match rule with
  | Rule.Declaration
      ( (( "animation" | "animation-name" | "animation-duration"
         | "animation-delay" | "animation-direction" | "animation-fill-mode"
         | "animation-iteration-count" | "animation-play-state"
         | "animation-timing-function" ) as property),
        value )
  | Declaration (("text-decoration" as property), value)
  | Declaration (("filter" as property), value)
  | Declaration (("clip-path" as property), value)
  | Declaration (("backface-visibility" as property), value)
  | Declaration (("column" as property), value)
  | Declaration (("box-decoration-break" as property), value)
  | Declaration
      ( (( "mask" | "mask-image" | "mask-mode" | "mask-clip" | "mask-size"
         | "mask-repeat" | "mask-origin" | "mask-position" | "mask-composite" )
         as property),
        value )
  | Declaration
      ( (( "column-count" | "column-fill" | "column-gap" | "column-rule"
         | "column-rule-color" | "column-rule-style" | "column-rule-width"
         | "column-span" | "column-width" ) as property),
        value )
  | Declaration (("background-clip" as property), value)
  | Declaration
      ( (( "margin-inline-end" | "margin-inline-start" | "padding-inline-start"
         | "padding-inline-end" ) as property),
        value )
  | Declaration (("columns" as property), value) ->
    prefix_property property value [| webkit |] @ [| rule |]
  | Declaration (("user-select" as property), value)
  | Declaration (("appearance" as property), value)
  | Declaration (("transform" as property), value)
  | Declaration (("hyphens" as property), value)
  | Declaration (("text-size-adjust" as property), value) ->
    prefix_property property value [| webkit; moz; ms |] @ [| rule |]
  | Declaration ((("grid-row" | "grid-column") as property), value) ->
    prefix_property property value [| ms |] @ [| rule |]
  | Declaration (("flex" as property), value)
  | Declaration (("flex-direction" as property), value)
  | Declaration (("scroll-snap-type" as property), value)
  | Declaration (("writing-mode" as property), value) ->
    prefix_property property value [| webkit; ms |] @ [| rule |]
  | Declaration (("tab-size" as property), value) ->
    prefix_property property value [| moz; o |] @ [| rule |]
  | Declaration ("color-adjust", value) ->
    prefix_property "print-color-adjust" value [| webkit |] @ [| rule |]
  | Declaration
      ( (( "align-items" | "align-content" | "flex-shrink" | "flex-basis"
         | "align-self" | "flex-grow" | "justify-content" ) as _property),
        _value ) ->
    [| rule |]
  | Declaration (("cursor" as property), (("grab" | "grabbing") as value)) ->
    prefix_value property value [| webkit |] @ [| rule |]
  | Declaration
      ( (( "width" | "min-width" | "max-width" | "height" | "min-height"
         | "max-height" | "min-block-size" | "max-block-size" ) as property),
        (("fit-content" | "max-content" | "min-content" | "fill-available") as
         value) ) ->
    prefix_value property value [| webkit; moz |] @ [| rule |]
  | Declaration
      ( (( "width" | "min-width" | "max-width" | "height" | "min-height"
         | "max-height" ) as property),
        "stretch" ) ->
    (prefix_value property "fill-available" [| webkit |]
    @ prefix_value property "available" [| moz |])
    @ [| rule |]
  (* TODO: Add -webkit-image-set on "background" | "background-image" image-set *)
  | _ -> [| rule |]