├── .gitignore ├── .travis.yml ├── HISTORY.md ├── LICENSE ├── README.md ├── bsconfig.json ├── package.json ├── src ├── Css.re └── Css.rei └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | lib/ 3 | dist/ 4 | .cache 5 | .merlin 6 | .bsb.lock 7 | *.bs.js 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "8" 5 | - "10" 6 | 7 | script: 8 | - yarn run build 9 | 10 | cache: 11 | yarn: true 12 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | # History 2 | 3 | ## 1.0.1 4 | Remove `peerDependencies` section from `package.json`. 5 | 6 | ## 1.0.0 7 | Bump `bs-platform` dependency to v7.0.0. 8 | 9 | ## 0.1.0 10 | Update `align-*` & `justify-*` types. 11 | 12 | ## 0.0.6 13 | Add `Css.rei` (it doesn't hide anything but required for inclusion of `Css` module into [`bs-emotion`](https://github.com/alexfedoseev/bs-emotion)). 14 | 15 | ## 0.0.5 16 | Add `ClipPath` and `BasicShape` modules ([#6](https://github.com/minima-app/re-css/pull/6) by **[@jsiebern](https://github.com/jsiebern)**) 17 | 18 | ## 0.0.4 19 | Fix `BackgroundPosition` ([#5](https://github.com/minima-app/re-css/pull/5) by **[@jsiebern](https://github.com/jsiebern)**) 20 | 21 | ## 0.0.3 22 | Simplify `Calc.n` type to one variant: `` `n(float) ``. 23 | 24 | ## 0.0.2 25 | Update Grid types. 26 | 27 | ## 0.0.1 28 | Initial release. 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Alex Fedoseev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # re-css 2 | 3 | [![npm version](https://img.shields.io/npm/v/@minima.app/re-css.svg?style=flat-square)](https://www.npmjs.com/package/@minima.app/re-css) 4 | [![build status](https://img.shields.io/travis/minima-app/re-css/master.svg?style=flat-square)](https://travis-ci.org/minima-app/re-css) 5 | [![license](https://img.shields.io/npm/l/@minima.app/re-css.svg?style=flat-square)](https://www.npmjs.com/package/@minima.app/re-css) 6 | 7 | Typed CSS for ReasonML. 8 | 9 | ## Installation 10 | This package is not intended to be used directly in applications but in CSS libraries. See [`bs-emotion`](https://github.com/alexfedoseev/bs-emotion) for examples. 11 | 12 | Get the package: 13 | 14 | ```shell 15 | # yarn 16 | yarn add @minima.app/re-css 17 | # or npm 18 | npm install --save @minima.app/re-css 19 | ``` 20 | 21 | Then add it to `bsconfig.json`: 22 | 23 | ```json 24 | "bs-dependencies": [ 25 | "@minima.app/re-css" 26 | ] 27 | ``` 28 | -------------------------------------------------------------------------------- /bsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@minima.app/re-css", 3 | "sources": [ 4 | "src" 5 | ], 6 | "refmt": 3, 7 | "bsc-flags": ["-open Belt"], 8 | "package-specs": { 9 | "module": "commonjs", 10 | "in-source": true 11 | }, 12 | "suffix": ".bs.js" 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@minima.app/re-css", 3 | "version": "1.0.1", 4 | "description": "ReasonML bindings to CSS", 5 | "author": "Alex Fedoseev ", 6 | "license": "MIT", 7 | "main": "src/Css.re", 8 | "scripts": { 9 | "build": "bsb -clean-world -make-world", 10 | "test": "exit 0" 11 | }, 12 | "files": [ 13 | "src", 14 | "bsconfig.json" 15 | ], 16 | "keywords": [ 17 | "css", 18 | "css-in-js", 19 | "reason", 20 | "reasonml", 21 | "ocaml", 22 | "bucklescript" 23 | ], 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/minima-app/re-css.git" 27 | }, 28 | "devDependencies": { 29 | "bs-platform": "7.0.1" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/Css.re: -------------------------------------------------------------------------------- 1 | /* TODO: Globals: inherit, initial, unset */ 2 | 3 | /* ===== 🛠 Helpers ===== */ 4 | 5 | module Helpers = { 6 | let joinWith = (strings, separator) => { 7 | let rec run = (strings, acc) => 8 | switch (strings) { 9 | | [] => acc 10 | | [x] => acc ++ x 11 | | [x, ...xs] => xs->run(acc ++ x ++ separator) 12 | }; 13 | strings->run(""); 14 | }; 15 | }; 16 | 17 | /* ===== 🎨 CSS Core Types ===== */ 18 | 19 | module Calc = { 20 | type op = [ | `add | `sub | `mult | `div]; 21 | type n = [ | `n(float)]; 22 | type t('a) = [ | `calc(op, 'a, 'a)]; 23 | 24 | let (+) = (a, b) => `calc((`add, a, b)); 25 | let (-) = (a, b) => `calc((`sub, a, b)); 26 | let ( * ) = (a, b) => `calc((`mult, a, b)); 27 | let (/) = (a, b) => `calc((`div, a, b)); 28 | 29 | let opToString = (x: op) => 30 | switch (x) { 31 | | `add => "+" 32 | | `sub => "-" 33 | | `mult => "*" 34 | | `div => "/" 35 | }; 36 | 37 | let numToString = (x: n) => 38 | switch (x) { 39 | | `n(x) => {j|$x|j} 40 | }; 41 | }; 42 | 43 | module LengthUnit = { 44 | type t = [ 45 | | `em(float) 46 | | `ex(float) 47 | | `ch(float) 48 | | `rem(float) 49 | | `vw(float) 50 | | `vh(float) 51 | | `vmin(float) 52 | | `vmax(float) 53 | | `cm(float) 54 | | `mm(float) 55 | | `q(float) 56 | | `inch(float) 57 | | `pc(float) 58 | | `pt(float) 59 | | `px(int) 60 | | `zero 61 | ]; 62 | 63 | let toString = (x: t) => 64 | switch (x) { 65 | | `em(x) => {j|$(x)em|j} 66 | | `ex(x) => {j|$(x)ex|j} 67 | | `ch(x) => {j|$(x)ch|j} 68 | | `rem(x) => {j|$(x)rem|j} 69 | | `vw(x) => {j|$(x)vw|j} 70 | | `vh(x) => {j|$(x)vh|j} 71 | | `vmin(x) => {j|$(x)vmin|j} 72 | | `vmax(x) => {j|$(x)vmax|j} 73 | | `cm(x) => {j|$(x)cm|j} 74 | | `mm(x) => {j|$(x)mm|j} 75 | | `q(x) => {j|$(x)Q|j} 76 | | `inch(x) => {j|$(x)in|j} 77 | | `pc(x) => {j|$(x)pc|j} 78 | | `pt(x) => {j|$(x)pt|j} 79 | | `px(x) => {j|$(x)px|j} 80 | | `zero => "0" 81 | }; 82 | }; 83 | 84 | module Length = { 85 | type t = [ 86 | LengthUnit.t 87 | | Calc.t([ LengthUnit.t | Calc.n | Calc.t('a)] as 'a) 88 | ]; 89 | 90 | let rec operandToString = x => 91 | switch (x) { 92 | | #LengthUnit.t as x => x->LengthUnit.toString 93 | | #Calc.n as x => x->Calc.numToString 94 | | `calc(op, a, b) => 95 | let op = op->Calc.opToString; 96 | let a = a->operandToString; 97 | let b = b->operandToString; 98 | {j|calc($a $op $b)|j}; 99 | }; 100 | 101 | let toString = (x: t) => 102 | switch (x) { 103 | | #LengthUnit.t as x => x->LengthUnit.toString 104 | | `calc(op, a, b) => 105 | let op = op->Calc.opToString; 106 | let a = a->operandToString; 107 | let b = b->operandToString; 108 | {j|calc($a $op $b)|j}; 109 | }; 110 | 111 | let toString2 = (a, b) => { 112 | let a = a->toString; 113 | let b = b->toString; 114 | {j|$a $b|j}; 115 | }; 116 | }; 117 | 118 | module PercentageUnit = { 119 | type t = [ | `pct(float)]; 120 | 121 | let toString = (x: t) => 122 | switch (x) { 123 | | `pct(x) => {j|$(x)%|j} 124 | }; 125 | }; 126 | 127 | module Percentage = { 128 | type t = [ 129 | PercentageUnit.t 130 | | Calc.t([ PercentageUnit.t | Calc.n | Calc.t('a)] as 'a) 131 | ]; 132 | 133 | let rec operandToString = x => 134 | switch (x) { 135 | | #PercentageUnit.t as x => x->PercentageUnit.toString 136 | | #Calc.n as x => x->Calc.numToString 137 | | `calc(op, a, b) => 138 | let op = op->Calc.opToString; 139 | let a = a->operandToString; 140 | let b = b->operandToString; 141 | {j|calc($a $op $b)|j}; 142 | }; 143 | 144 | let toString = (x: t) => 145 | switch (x) { 146 | | #PercentageUnit.t as x => x->PercentageUnit.toString 147 | | `calc(op, a, b) => 148 | let op = op->Calc.opToString; 149 | let a = a->operandToString; 150 | let b = b->operandToString; 151 | {j|calc($a $op $b)|j}; 152 | }; 153 | }; 154 | 155 | module LengthPercentage = { 156 | type t = [ 157 | LengthUnit.t 158 | | PercentageUnit.t 159 | | Calc.t([ LengthUnit.t | PercentageUnit.t | Calc.n | Calc.t('a)] as 'a) 160 | ]; 161 | 162 | let rec operandToString = x => 163 | switch (x) { 164 | | #LengthUnit.t as x => x->LengthUnit.toString 165 | | #PercentageUnit.t as x => x->PercentageUnit.toString 166 | | #Calc.n as x => x->Calc.numToString 167 | | `calc(op, a, b) => 168 | let op = op->Calc.opToString; 169 | let a = a->operandToString; 170 | let b = b->operandToString; 171 | {j|calc($a $op $b)|j}; 172 | }; 173 | 174 | let toString = (x: t) => 175 | switch (x) { 176 | | #LengthUnit.t as x => x->LengthUnit.toString 177 | | #PercentageUnit.t as x => x->PercentageUnit.toString 178 | | `calc(op, a, b) => 179 | let op = op->Calc.opToString; 180 | let a = a->operandToString; 181 | let b = b->operandToString; 182 | {j|calc($a $op $b)|j}; 183 | }; 184 | 185 | let toString2 = (a, b) => { 186 | let a = a->toString; 187 | let b = b->toString; 188 | {j|$a $b|j}; 189 | }; 190 | 191 | let toString3 = (a, b, c) => { 192 | let a = a->toString; 193 | let b = b->toString; 194 | let c = c->toString; 195 | {j|$a $b $c|j}; 196 | }; 197 | 198 | let toString4 = (a, b, c, d) => { 199 | let a = a->toString; 200 | let b = b->toString; 201 | let c = c->toString; 202 | let d = d->toString; 203 | {j|$a $b $c $d|j}; 204 | }; 205 | }; 206 | 207 | module LengthPercentageAuto = { 208 | type t = [ | `auto | LengthPercentage.t]; 209 | 210 | let toString = (x: t) => 211 | switch (x) { 212 | | `auto => "auto" 213 | | #LengthPercentage.t as x => x->LengthPercentage.toString 214 | }; 215 | 216 | let toString2 = (a, b) => { 217 | let a = a->toString; 218 | let b = b->toString; 219 | {j|$a $b|j}; 220 | }; 221 | 222 | let toString3 = (a, b, c) => { 223 | let a = a->toString; 224 | let b = b->toString; 225 | let c = c->toString; 226 | {j|$a $b $c|j}; 227 | }; 228 | 229 | let toString4 = (a, b, c, d) => { 230 | let a = a->toString; 231 | let b = b->toString; 232 | let c = c->toString; 233 | let d = d->toString; 234 | {j|$a $b $c $d|j}; 235 | }; 236 | }; 237 | 238 | module LengthPercentageNone = { 239 | type t = [ | `none | LengthPercentage.t]; 240 | 241 | let toString = (x: t) => 242 | switch (x) { 243 | | `none => "none" 244 | | #LengthPercentage.t as x => x->LengthPercentage.toString 245 | }; 246 | }; 247 | 248 | module NumberPercentage = { 249 | type t = [ PercentageUnit.t | Calc.n | Calc.t('a)] as 'a; 250 | 251 | let rec toString = (x: t) => 252 | switch (x) { 253 | | #PercentageUnit.t as x => x->PercentageUnit.toString 254 | | #Calc.n as x => x->Calc.numToString 255 | | `calc(op, a, b) => 256 | let op = op->Calc.opToString; 257 | let a = a->toString; 258 | let b = b->toString; 259 | {j|calc($a $op $b)|j}; 260 | }; 261 | 262 | let toString2 = (a, b) => { 263 | let a = a->toString; 264 | let b = b->toString; 265 | {j|$a $b|j}; 266 | }; 267 | 268 | let toString3 = (a, b, c) => { 269 | let a = a->toString; 270 | let b = b->toString; 271 | let c = c->toString; 272 | {j|$a $b $c|j}; 273 | }; 274 | 275 | let toString4 = (a, b, c, d) => { 276 | let a = a->toString; 277 | let b = b->toString; 278 | let c = c->toString; 279 | let d = d->toString; 280 | {j|$a $b $c $d|j}; 281 | }; 282 | }; 283 | 284 | module Angle = { 285 | type t = [ | `deg(float) | `rad(float) | `grad(float) | `turn(float)]; 286 | 287 | let toString = (x: t) => 288 | switch (x) { 289 | | `deg(x) => {j|$(x)deg|j} 290 | | `rad(x) => {j|$(x)rad|j} 291 | | `grad(x) => {j|$(x)grad|j} 292 | | `turn(x) => {j|$(x)turn|j} 293 | }; 294 | }; 295 | 296 | module Color = { 297 | type t = [ 298 | | `rgb(int, int, int) 299 | | `rgba(int, int, int, float) 300 | | `hsl(int, int, int) 301 | | `hsla(int, int, int, float) 302 | | `hex(string) 303 | | `transparent 304 | | `currentColor 305 | ]; 306 | 307 | let toString = (x: t) => 308 | switch (x) { 309 | | `rgb(r, g, b) => {j|rgb($r, $g, $b)|j} 310 | | `rgba(r, g, b, a) => {j|rgba($r, $g, $b, $a)|j} 311 | | `hsl(h, s, l) => {j|hsl($h, $s%, $l%)|j} 312 | | `hsla(h, s, l, a) => {j|hsla($h, $s%, $l%, $a)|j} 313 | | `hex(x) => "#" ++ x 314 | | `transparent => "transparent" 315 | | `currentColor => "currentColor" 316 | }; 317 | 318 | let aliceblue = `hex("f0f8ff"); 319 | let antiquewhite = `hex("faebd7"); 320 | let aqua = `hex("00ffff"); 321 | let aquamarine = `hex("7fffd4"); 322 | let azure = `hex("f0ffff"); 323 | let beige = `hex("f5f5dc"); 324 | let bisque = `hex("ffe4c4"); 325 | let black = `hex("000000"); 326 | let blanchedalmond = `hex("ffebcd"); 327 | let blue = `hex("0000ff"); 328 | let blueviolet = `hex("8a2be2"); 329 | let brown = `hex("a52a2a"); 330 | let burlywood = `hex("deb887"); 331 | let cadetblue = `hex("5f9ea0"); 332 | let chartreuse = `hex("7fff00"); 333 | let chocolate = `hex("d2691e"); 334 | let coral = `hex("ff7f50"); 335 | let cornflowerblue = `hex("6495ed"); 336 | let cornsilk = `hex("fff8dc"); 337 | let crimson = `hex("dc143c"); 338 | let cyan = `hex("00ffff"); 339 | let darkblue = `hex("00008b"); 340 | let darkcyan = `hex("008b8b"); 341 | let darkgoldenrod = `hex("b8860b"); 342 | let darkgray = `hex("a9a9a9"); 343 | let darkgreen = `hex("006400"); 344 | let darkgrey = `hex("a9a9a9"); 345 | let darkkhaki = `hex("bdb76b"); 346 | let darkmagenta = `hex("8b008b"); 347 | let darkolivegreen = `hex("556b2f"); 348 | let darkorange = `hex("ff8c00"); 349 | let darkorchid = `hex("9932cc"); 350 | let darkred = `hex("8b0000"); 351 | let darksalmon = `hex("e9967a"); 352 | let darkseagreen = `hex("8fbc8f"); 353 | let darkslateblue = `hex("483d8b"); 354 | let darkslategray = `hex("2f4f4f"); 355 | let darkslategrey = `hex("2f4f4f"); 356 | let darkturquoise = `hex("00ced1"); 357 | let darkviolet = `hex("9400d3"); 358 | let deeppink = `hex("ff1493"); 359 | let deepskyblue = `hex("00bfff"); 360 | let dimgray = `hex("696969"); 361 | let dimgrey = `hex("696969"); 362 | let dodgerblue = `hex("1e90ff"); 363 | let firebrick = `hex("b22222"); 364 | let floralwhite = `hex("fffaf0"); 365 | let forestgreen = `hex("228b22"); 366 | let fuchsia = `hex("ff00ff"); 367 | let gainsboro = `hex("dcdcdc"); 368 | let ghostwhite = `hex("f8f8ff"); 369 | let gold = `hex("ffd700"); 370 | let goldenrod = `hex("daa520"); 371 | let gray = `hex("808080"); 372 | let green = `hex("008000"); 373 | let greenyellow = `hex("adff2f"); 374 | let grey = `hex("808080"); 375 | let honeydew = `hex("f0fff0"); 376 | let hotpink = `hex("ff69b4"); 377 | let indianred = `hex("cd5c5c"); 378 | let indigo = `hex("4b0082"); 379 | let ivory = `hex("fffff0"); 380 | let khaki = `hex("f0e68c"); 381 | let lavender = `hex("e6e6fa"); 382 | let lavenderblush = `hex("fff0f5"); 383 | let lawngreen = `hex("7cfc00"); 384 | let lemonchiffon = `hex("fffacd"); 385 | let lightblue = `hex("add8e6"); 386 | let lightcoral = `hex("f08080"); 387 | let lightcyan = `hex("e0ffff"); 388 | let lightgoldenrodyellow = `hex("fafad2"); 389 | let lightgray = `hex("d3d3d3"); 390 | let lightgreen = `hex("90ee90"); 391 | let lightgrey = `hex("d3d3d3"); 392 | let lightpink = `hex("ffb6c1"); 393 | let lightsalmon = `hex("ffa07a"); 394 | let lightseagreen = `hex("20b2aa"); 395 | let lightskyblue = `hex("87cefa"); 396 | let lightslategray = `hex("778899"); 397 | let lightslategrey = `hex("778899"); 398 | let lightsteelblue = `hex("b0c4de"); 399 | let lightyellow = `hex("ffffe0"); 400 | let lime = `hex("00ff00"); 401 | let limegreen = `hex("32cd32"); 402 | let linen = `hex("faf0e6"); 403 | let magenta = `hex("ff00ff"); 404 | let maroon = `hex("800000"); 405 | let mediumaquamarine = `hex("66cdaa"); 406 | let mediumblue = `hex("0000cd"); 407 | let mediumorchid = `hex("ba55d3"); 408 | let mediumpurple = `hex("9370db"); 409 | let mediumseagreen = `hex("3cb371"); 410 | let mediumslateblue = `hex("7b68ee"); 411 | let mediumspringgreen = `hex("00fa9a"); 412 | let mediumturquoise = `hex("48d1cc"); 413 | let mediumvioletred = `hex("c71585"); 414 | let midnightblue = `hex("191970"); 415 | let mintcream = `hex("f5fffa"); 416 | let mistyrose = `hex("ffe4e1"); 417 | let moccasin = `hex("ffe4b5"); 418 | let navajowhite = `hex("ffdead"); 419 | let navy = `hex("000080"); 420 | let oldlace = `hex("fdf5e6"); 421 | let olive = `hex("808000"); 422 | let olivedrab = `hex("6b8e23"); 423 | let orange = `hex("ffa500"); 424 | let orangered = `hex("ff4500"); 425 | let orchid = `hex("da70d6"); 426 | let palegoldenrod = `hex("eee8aa"); 427 | let palegreen = `hex("98fb98"); 428 | let paleturquoise = `hex("afeeee"); 429 | let palevioletred = `hex("db7093"); 430 | let papayawhip = `hex("ffefd5"); 431 | let peachpuff = `hex("ffdab9"); 432 | let peru = `hex("cd853f"); 433 | let pink = `hex("ffc0cb"); 434 | let plum = `hex("dda0dd"); 435 | let powderblue = `hex("b0e0e6"); 436 | let purple = `hex("800080"); 437 | let rebeccapurple = `hex("663399"); 438 | let red = `hex("ff0000"); 439 | let rosybrown = `hex("bc8f8f"); 440 | let royalblue = `hex("4169e1"); 441 | let saddlebrown = `hex("8b4513"); 442 | let salmon = `hex("fa8072"); 443 | let sandybrown = `hex("f4a460"); 444 | let seagreen = `hex("2e8b57"); 445 | let seashell = `hex("fff5ee"); 446 | let sienna = `hex("a0522d"); 447 | let silver = `hex("c0c0c0"); 448 | let skyblue = `hex("87ceeb"); 449 | let slateblue = `hex("6a5acd"); 450 | let slategray = `hex("708090"); 451 | let slategrey = `hex("708090"); 452 | let snow = `hex("fffafa"); 453 | let springgreen = `hex("00ff7f"); 454 | let steelblue = `hex("4682b4"); 455 | let tan = `hex("d2b48c"); 456 | let teal = `hex("008080"); 457 | let thistle = `hex("d8bfd8"); 458 | let tomato = `hex("ff6347"); 459 | let turquoise = `hex("40e0d0"); 460 | let violet = `hex("ee82ee"); 461 | let wheat = `hex("f5deb3"); 462 | let white = `hex("ffffff"); 463 | let whitesmoke = `hex("f5f5f5"); 464 | let yellow = `hex("ffff00"); 465 | let yellowgreen = `hex("9acd3"); 466 | }; 467 | 468 | module Gradient = { 469 | module Stops = { 470 | type t = list((int, Color.t)); 471 | 472 | let toString = (x: t) => 473 | x 474 | ->( 475 | List.mapU((. (index, color)) => { 476 | let color = color->Color.toString; 477 | {j|$color $index%|j}; 478 | }) 479 | ) 480 | ->Helpers.joinWith(", "); 481 | }; 482 | 483 | type t = [ 484 | | `linearGradient(Angle.t, Stops.t) 485 | | `repeatingLinearGradient(Angle.t, Stops.t) 486 | | `radialGradient(Stops.t) 487 | | `repeatingRadialGradient(Stops.t) 488 | ]; 489 | 490 | let toString = (x: t) => 491 | switch (x) { 492 | | `linearGradient(angle, stops) => 493 | let angle = angle->Angle.toString; 494 | let stops = stops->Stops.toString; 495 | {j|linear-gradient($angle, $stops)|j}; 496 | | `repeatingLinearGradient(angle, stops) => 497 | let angle = angle->Angle.toString; 498 | let stops = stops->Stops.toString; 499 | {j|repeating-linear-gradient($angle, $stops)|j}; 500 | | `radialGradient(stops) => 501 | let stops = stops->Stops.toString; 502 | {j|radial-gradient($stops)|j}; 503 | | `repeatingRadialGradient(stops) => 504 | let stops = stops->Stops.toString; 505 | {j|repeating-radial-gradient($stops)|j}; 506 | }; 507 | }; 508 | 509 | module Url = { 510 | type t = [ | `url(string)]; 511 | 512 | let toString = (x: t) => 513 | switch (x) { 514 | | `url(x) => {j|url($x)|j} 515 | }; 516 | }; 517 | 518 | module Image = { 519 | type t = [ Url.t | Gradient.t]; 520 | 521 | let toString = (x: t) => 522 | switch (x) { 523 | | #Url.t as x => x->Url.toString 524 | | #Gradient.t as x => x->Gradient.toString 525 | }; 526 | }; 527 | 528 | module Display = { 529 | type t = [ 530 | | `none 531 | | `inline 532 | | `listItem 533 | | `block 534 | | `inlineBlock 535 | | `flex 536 | | `inlineFlex 537 | | `grid 538 | | `inlineGrid 539 | | `table 540 | | `inlineTable 541 | | `tableRowGroup 542 | | `tableHeaderGroup 543 | | `tableFooterGroup 544 | | `tableRow 545 | | `tableColumnGroup 546 | | `tableColumn 547 | | `tableCell 548 | | `tableCaption 549 | ]; 550 | 551 | let toString = (x: t) => 552 | switch (x) { 553 | | `none => "none" 554 | | `inline => "inline" 555 | | `listItem => "list-item" 556 | | `block => "block" 557 | | `inlineBlock => "inline-block" 558 | | `flex => "flex" 559 | | `inlineFlex => "inline-flex" 560 | | `grid => "grid" 561 | | `inlineGrid => "inline-grid" 562 | | `table => "table" 563 | | `inlineTable => "inline-table" 564 | | `tableRowGroup => "table-row-group" 565 | | `tableHeaderGroup => "table-header-group" 566 | | `tableFooterGroup => "table-footer-group" 567 | | `tableRow => "table-row" 568 | | `tableColumnGroup => "table-column-group" 569 | | `tableColumn => "table-column" 570 | | `tableCell => "table-cell" 571 | | `tableCaption => "table-caption" 572 | }; 573 | }; 574 | 575 | module Position = { 576 | type t = [ | `absolute | `static | `fixed | `relative | `sticky]; 577 | 578 | let toString = (x: t) => 579 | switch (x) { 580 | | `absolute => "absolute" 581 | | `static => "static" 582 | | `fixed => "fixed" 583 | | `relative => "relative" 584 | | `sticky => "sticky" 585 | }; 586 | }; 587 | 588 | module BorderStyle = { 589 | type t = [ 590 | | `none 591 | | `hidden 592 | | `dotted 593 | | `dashed 594 | | `solid 595 | | `double 596 | | `groove 597 | | `ridge 598 | | `inset 599 | | `outset 600 | ]; 601 | 602 | let toString = (x: t) => 603 | switch (x) { 604 | | `none => "none" 605 | | `hidden => "hidden" 606 | | `dotted => "dotted" 607 | | `dashed => "dashed" 608 | | `solid => "solid" 609 | | `double => "double" 610 | | `groove => "groove" 611 | | `ridge => "ridge" 612 | | `inset => "inset" 613 | | `outset => "outset" 614 | }; 615 | }; 616 | 617 | module BorderWidth = { 618 | type t = [ | `thin | `medium | `thick | LengthPercentage.t]; 619 | 620 | let toString = (x: t) => 621 | switch (x) { 622 | | `thin => "thin" 623 | | `medium => "medium" 624 | | `thick => "thick" 625 | | #LengthPercentage.t as x => x->LengthPercentage.toString 626 | }; 627 | }; 628 | 629 | module Border = { 630 | let toString = (width, style, color) => { 631 | let width = width->BorderWidth.toString; 632 | let style = style->BorderStyle.toString; 633 | let color = color->Color.toString; 634 | {j|$width $style $color|j}; 635 | }; 636 | }; 637 | 638 | module BackgroundImage = { 639 | type t = [ | `none | Image.t]; 640 | 641 | let toString = (x: t) => 642 | switch (x) { 643 | | `none => "none" 644 | | #Image.t as x => x->Image.toString 645 | }; 646 | }; 647 | 648 | module BackgroundAttachment = { 649 | type t = [ | `scroll | `fixed | `local]; 650 | 651 | let toString = (x: t) => 652 | switch (x) { 653 | | `scroll => "scroll" 654 | | `fixed => "fixed" 655 | | `local => "local" 656 | }; 657 | }; 658 | 659 | module BackgroundBlendMode = { 660 | type t = [ 661 | | `normal 662 | | `multiply 663 | | `screen 664 | | `overlay 665 | | `darken 666 | | `lighten 667 | | `colorDodge 668 | | `colorBurn 669 | | `hardLight 670 | | `softLight 671 | | `difference 672 | | `exclusion 673 | | `hue 674 | | `saturation 675 | | `color 676 | | `luminosity 677 | ]; 678 | 679 | let toString = (x: t) => 680 | switch (x) { 681 | | `normal => "normal" 682 | | `multiply => "multiply" 683 | | `screen => "screen" 684 | | `overlay => "overlay" 685 | | `darken => "darken" 686 | | `lighten => "lighten" 687 | | `colorDodge => "color-dodge" 688 | | `colorBurn => "color-burn" 689 | | `hardLight => "hard-light" 690 | | `softLight => "soft-light" 691 | | `difference => "difference" 692 | | `exclusion => "exclusion" 693 | | `hue => "hue" 694 | | `saturation => "saturation" 695 | | `color => "color" 696 | | `luminosity => "luminosit" 697 | }; 698 | }; 699 | 700 | module BackgroundBox = { 701 | type t = [ | `borderBox | `contentBox | `paddingBox]; 702 | 703 | let toString = (x: t) => 704 | switch (x) { 705 | | `borderBox => "border-box" 706 | | `contentBox => "content-box" 707 | | `paddingBox => "padding-box" 708 | }; 709 | }; 710 | 711 | module BackgroundRepeat = { 712 | type t = [ | `repeatX | `repeatY | `repeat | `noRepeat | `space | `round]; 713 | 714 | let toString = (x: t) => 715 | switch (x) { 716 | | `repeatX => "repeat-x" 717 | | `repeatY => "repeat-y" 718 | | `repeat => "repeat" 719 | | `noRepeat => "no-repeat" 720 | | `space => "space" 721 | | `round => "round" 722 | }; 723 | let toString2 = (a, b) => { 724 | let a = a->toString; 725 | let b = b->toString; 726 | {j|$a $b|j}; 727 | }; 728 | }; 729 | 730 | module BackgroundSize = { 731 | type t = [ 732 | | `size(LengthPercentage.t, LengthPercentage.t) 733 | | `auto 734 | | `cover 735 | | `contain 736 | ]; 737 | 738 | let toString = (x: t) => 739 | switch (x) { 740 | | `size(x, y) => 741 | let x = x->LengthPercentage.toString; 742 | let y = y->LengthPercentage.toString; 743 | {j|$x $y|j}; 744 | | `auto => "auto" 745 | | `cover => "cover" 746 | | `contain => "contain" 747 | }; 748 | }; 749 | 750 | module BackgroundPosition = { 751 | module KeywordX = { 752 | type t = [ 753 | | `left 754 | | `right 755 | | `center 756 | | `leftOffset(LengthPercentage.t) 757 | | `rightOffset(LengthPercentage.t) 758 | | `centerOffset(LengthPercentage.t) 759 | ]; 760 | 761 | let toString = (x: t) => 762 | switch (x) { 763 | | `left => "left" 764 | | `right => "right" 765 | | `center => "center" 766 | | `leftOffset(o) => 767 | let x = "left"; 768 | let o = o->LengthPercentage.toString; 769 | {j|$x $o|j}; 770 | | `rightOffset(o) => 771 | let x = "right"; 772 | let o = o->LengthPercentage.toString; 773 | {j|$x $o|j}; 774 | | `centerOffset(o) => 775 | let x = "center"; 776 | let o = o->LengthPercentage.toString; 777 | {j|$x $o|j}; 778 | }; 779 | }; 780 | module KeywordY = { 781 | type t = [ 782 | | `top 783 | | `bottom 784 | | `center 785 | | `topOffset(LengthPercentage.t) 786 | | `bottomOffset(LengthPercentage.t) 787 | | `centerOffset(LengthPercentage.t) 788 | ]; 789 | 790 | let toString = (x: t) => 791 | switch (x) { 792 | | `top => "top" 793 | | `bottom => "bottom" 794 | | `center => "center" 795 | | `topOffset(o) => 796 | let x = "top"; 797 | let o = o->LengthPercentage.toString; 798 | {j|$x $o|j}; 799 | | `bottomOffset(o) => 800 | let x = "bottom"; 801 | let o = o->LengthPercentage.toString; 802 | {j|$x $o|j}; 803 | | `centerOffset(o) => 804 | let x = "center"; 805 | let o = o->LengthPercentage.toString; 806 | {j|$x $o|j}; 807 | }; 808 | }; 809 | 810 | type t = [ 811 | | `values(LengthPercentage.t, LengthPercentage.t) 812 | | `keywords(KeywordX.t, KeywordY.t) 813 | | `initial 814 | ]; 815 | 816 | let toString = (x: t) => 817 | switch (x) { 818 | | `values(x, y) => 819 | let x = x->LengthPercentage.toString; 820 | let y = y->LengthPercentage.toString; 821 | {j|$x $y|j}; 822 | | `keywords(x, y) => 823 | let x = x->KeywordX.toString; 824 | let y = y->KeywordY.toString; 825 | {j|$x $y|j}; 826 | | `initial => "initial" 827 | }; 828 | }; 829 | 830 | module ListStyleType = { 831 | /* TODO: ListStyleType: incomplete list */ 832 | type t = [ 833 | | `none 834 | | `disc 835 | | `circle 836 | | `square 837 | | `decimal 838 | | `decimalLeadingZero 839 | | `lowerAlpha 840 | | `upperAlpha 841 | | `lowerGreek 842 | | `lowerLatin 843 | | `upperLatin 844 | | `lowerRoman 845 | | `upperRoman 846 | ]; 847 | 848 | let toString = (x: t) => 849 | switch (x) { 850 | | `none => "none" 851 | | `disc => "disc" 852 | | `circle => "circle" 853 | | `square => "square" 854 | | `decimal => "decimal" 855 | | `decimalLeadingZero => "decimal-leading-zero" 856 | | `lowerAlpha => "lower-alpha" 857 | | `upperAlpha => "upper-alpha" 858 | | `lowerGreek => "lower-greek" 859 | | `lowerLatin => "lower-latin" 860 | | `upperLatin => "upper-latin" 861 | | `lowerRoman => "lower-roman" 862 | | `upperRoman => "upper-roman" 863 | }; 864 | }; 865 | 866 | module ListStylePosition = { 867 | type t = [ | `inside | `outside]; 868 | 869 | let toString = (x: t) => 870 | switch (x) { 871 | | `inside => "inside" 872 | | `outside => "outside" 873 | }; 874 | }; 875 | 876 | module ListStyleImage = { 877 | type t = [ | `none | Url.t]; 878 | 879 | let toString = (x: t) => 880 | switch (x) { 881 | | `none => "none" 882 | | #Url.t as x => x->Url.toString 883 | }; 884 | }; 885 | 886 | module ListStyle = { 887 | let toString = (style, position, image) => { 888 | let style = style->ListStyleType.toString; 889 | let position = position->ListStylePosition.toString; 890 | let image = image->ListStyleImage.toString; 891 | {j|$style $position $image|j}; 892 | }; 893 | }; 894 | 895 | module BoxSizing = { 896 | type t = [ | `contentBox | `borderBox]; 897 | 898 | let toString = (x: t) => 899 | switch (x) { 900 | | `contentBox => "content-box" 901 | | `borderBox => "border-box" 902 | }; 903 | }; 904 | 905 | module TableLayout = { 906 | type t = [ | `auto | `fixed]; 907 | 908 | let toString = (x: t) => 909 | switch (x) { 910 | | `auto => "auto" 911 | | `fixed => "fixed" 912 | }; 913 | }; 914 | 915 | module BorderCollapse = { 916 | type t = [ | `collapse | `separate]; 917 | 918 | let toString = (x: t) => 919 | switch (x) { 920 | | `collapse => "collapse" 921 | | `separate => "separate" 922 | }; 923 | }; 924 | 925 | module Float = { 926 | type t = [ | `left | `right | `none]; 927 | 928 | let toString = (x: t) => 929 | switch (x) { 930 | | `left => "left" 931 | | `right => "right" 932 | | `none => "none" 933 | }; 934 | }; 935 | 936 | module Clear = { 937 | type t = [ | `left | `right | `both]; 938 | 939 | let toString = (x: t) => 940 | switch (x) { 941 | | `left => "left" 942 | | `right => "right" 943 | | `both => "both" 944 | }; 945 | }; 946 | 947 | module Overflow = { 948 | type t = [ | `auto | `scroll | `visible | `hidden]; 949 | 950 | let toString = (x: t) => 951 | switch (x) { 952 | | `auto => "auto" 953 | | `scroll => "scroll" 954 | | `visible => "visible" 955 | | `hidden => "hidden" 956 | }; 957 | }; 958 | 959 | module FontStyle = { 960 | type t = [ | `normal | `italic | `oblique]; 961 | 962 | let toString = (x: t) => 963 | switch (x) { 964 | | `normal => "normal" 965 | | `italic => "italic" 966 | | `oblique => "oblique" 967 | }; 968 | }; 969 | 970 | module FontVariant = { 971 | /* TODO: FontVariant: incomplete list */ 972 | type t = [ | `none | `normal | `smallCaps | `allSmallCaps]; 973 | 974 | let toString = (x: t) => 975 | switch (x) { 976 | | `none => "none" 977 | | `normal => "normal" 978 | | `smallCaps => "small-caps" 979 | | `allSmallCaps => "all-small-caps" 980 | }; 981 | }; 982 | 983 | module FontKerning = { 984 | type t = [ | `auto | `normal | `none]; 985 | 986 | let toString = (x: t) => 987 | switch (x) { 988 | | `auto => "auto" 989 | | `normal => "normal" 990 | | `none => "none" 991 | }; 992 | }; 993 | 994 | module FontStretch = { 995 | type t = [ 996 | | `normal 997 | | `semiCondensed 998 | | `condensed 999 | | `extraCondensed 1000 | | `ultraCondensed 1001 | | `semiExpanded 1002 | | `expanded 1003 | | `extraExpanded 1004 | | `ultraExpanded 1005 | ]; 1006 | 1007 | let toString = (x: t) => 1008 | switch (x) { 1009 | | `normal => "normal" 1010 | | `semiCondensed => "semi-condensed" 1011 | | `condensed => "condensed" 1012 | | `extraCondensed => "extra-condensed" 1013 | | `ultraCondensed => "ultra-condensed" 1014 | | `semiExpanded => "semi-expanded" 1015 | | `expanded => "expanded" 1016 | | `extraExpanded => "extra-expanded" 1017 | | `ultraExpanded => "ultra-expanded" 1018 | }; 1019 | }; 1020 | 1021 | module FontSrc = { 1022 | type src = [ | `url(string) | `local(string)]; 1023 | type format = [ | `woff | `woff2 | `ttf | `eot | `svg]; 1024 | 1025 | let toString = (~format: option(format)=?, src: src) => { 1026 | let src = 1027 | switch (src) { 1028 | | `url(v) => {j|url("$v")|j} 1029 | | `local(v) => {j|local("$v")|j} 1030 | }; 1031 | 1032 | switch (format) { 1033 | | None => src 1034 | | Some(format) => 1035 | let format = 1036 | switch (format) { 1037 | | `woff => "woff" 1038 | | `woff2 => "woff2" 1039 | | `ttf => "truetype" 1040 | | `eot => "embedded-opentype" 1041 | | `svg => "svg" 1042 | }; 1043 | {j|$src $format|j}; 1044 | }; 1045 | }; 1046 | }; 1047 | 1048 | module LineHeight = { 1049 | type t = [ | `normal | `abs(float) | LengthPercentage.t]; 1050 | 1051 | let toString = (x: t) => 1052 | switch (x) { 1053 | | `normal => "normal" 1054 | | `abs(x) => {j|$x|j} 1055 | | #LengthPercentage.t as x => x->LengthPercentage.toString 1056 | }; 1057 | }; 1058 | 1059 | module LetterSpacing = { 1060 | type t = [ | `normal | Length.t]; 1061 | 1062 | let toString = (x: t) => 1063 | switch (x) { 1064 | | `normal => "normal" 1065 | | #Length.t as x => x->Length.toString 1066 | }; 1067 | }; 1068 | 1069 | module Hyphens = { 1070 | type t = [ | `auto | `manual | `none]; 1071 | 1072 | let toString = (x: t) => 1073 | switch (x) { 1074 | | `auto => "auto" 1075 | | `manual => "manual" 1076 | | `none => "none" 1077 | }; 1078 | }; 1079 | 1080 | module TextAlign = { 1081 | type t = [ | `left | `right | `center | `justify]; 1082 | 1083 | let toString = (x: t) => 1084 | switch (x) { 1085 | | `left => "left" 1086 | | `right => "right" 1087 | | `center => "center" 1088 | | `justify => "justify" 1089 | }; 1090 | }; 1091 | 1092 | module TextDecorationLine = { 1093 | type t = [ | `none | `underline | `overline | `lineThrough]; 1094 | 1095 | let toString = (x: t) => 1096 | switch (x) { 1097 | | `none => "none" 1098 | | `underline => "underline" 1099 | | `overline => "overline" 1100 | | `lineThrough => "line-through" 1101 | }; 1102 | }; 1103 | 1104 | module TextDecorationStyle = { 1105 | type t = [ | `wavy | `solid | `double | `dotted | `dashed]; 1106 | 1107 | let toString = (x: t) => 1108 | switch (x) { 1109 | | `wavy => "wavy" 1110 | | `solid => "solid" 1111 | | `double => "double" 1112 | | `dotted => "dotted" 1113 | | `dashed => "dashed" 1114 | }; 1115 | }; 1116 | 1117 | module TextOverflow = { 1118 | type t = [ | `clip | `ellipsis]; 1119 | 1120 | let toString = (x: t) => 1121 | switch (x) { 1122 | | `clip => "clip" 1123 | | `ellipsis => "ellipsis" 1124 | }; 1125 | }; 1126 | 1127 | module TextShadow = { 1128 | let toString = (~x, ~y, ~blur, color) => { 1129 | let x = x->Length.toString; 1130 | let y = y->Length.toString; 1131 | let blur = blur->Length.toString; 1132 | let color = color->Color.toString; 1133 | {j|$x $y $blur $color|j}; 1134 | }; 1135 | }; 1136 | 1137 | module TextTransform = { 1138 | type t = [ | `uppercase | `lowercase | `capitalize | `none]; 1139 | 1140 | let toString = (x: t) => 1141 | switch (x) { 1142 | | `uppercase => "uppercase" 1143 | | `lowercase => "lowercase" 1144 | | `capitalize => "capitalize" 1145 | | `none => "none" 1146 | }; 1147 | }; 1148 | 1149 | module UserSelect = { 1150 | type t = [ | `auto | `all | `text | `none]; 1151 | 1152 | let toString = (x: t) => 1153 | switch (x) { 1154 | | `auto => "auto" 1155 | | `all => "all" 1156 | | `text => "text" 1157 | | `none => "none" 1158 | }; 1159 | }; 1160 | 1161 | module VerticalAlign = { 1162 | type t = [ 1163 | | `baseline 1164 | | `sub 1165 | | `super 1166 | | `top 1167 | | `textTop 1168 | | `middle 1169 | | `bottom 1170 | | `textBottom 1171 | | LengthPercentage.t 1172 | ]; 1173 | 1174 | let toString = (x: t) => 1175 | switch (x) { 1176 | | `baseline => "baseline" 1177 | | `sub => "sub" 1178 | | `super => "super" 1179 | | `top => "top" 1180 | | `textTop => "text-top" 1181 | | `middle => "middle" 1182 | | `bottom => "bottom" 1183 | | `textBottom => "text-bottom" 1184 | | #LengthPercentage.t as x => x->LengthPercentage.toString 1185 | }; 1186 | }; 1187 | 1188 | module WhiteSpace = { 1189 | type t = [ | `normal | `nowrap | `pre | `preLine | `preWrap]; 1190 | 1191 | let toString = (x: t) => 1192 | switch (x) { 1193 | | `normal => "normal" 1194 | | `nowrap => "nowrap" 1195 | | `pre => "pre" 1196 | | `preLine => "pre-line" 1197 | | `preWrap => "pre-wrap" 1198 | }; 1199 | }; 1200 | 1201 | module WordBreak = { 1202 | type t = [ | `breakAll | `keepAll | `normal]; 1203 | 1204 | let toString = (x: t) => 1205 | switch (x) { 1206 | | `breakAll => "break-all" 1207 | | `keepAll => "keep-all" 1208 | | `normal => "normal" 1209 | }; 1210 | }; 1211 | 1212 | module WordSpacing = { 1213 | type t = [ | `normal | Length.t]; 1214 | 1215 | let toString = (x: t) => 1216 | switch (x) { 1217 | | `normal => "normal" 1218 | | #Length.t as x => x->Length.toString 1219 | }; 1220 | }; 1221 | 1222 | module WordWrap = { 1223 | type t = [ | `normal | `breakWord]; 1224 | 1225 | let toString = (x: t) => 1226 | switch (x) { 1227 | | `normal => "normal" 1228 | | `breakWord => "break-word" 1229 | }; 1230 | }; 1231 | 1232 | module Direction = { 1233 | type t = [ | `ltr | `rtl]; 1234 | 1235 | let toString = (x: t) => 1236 | switch (x) { 1237 | | `ltr => "ltr" 1238 | | `rtl => "rtl" 1239 | }; 1240 | }; 1241 | 1242 | module OutlineStyle = { 1243 | type t = [ | `auto | BorderStyle.t]; 1244 | 1245 | let toString = (x: t) => 1246 | switch (x) { 1247 | | `auto => "auto" 1248 | | #BorderStyle.t as x => x->BorderStyle.toString 1249 | }; 1250 | }; 1251 | 1252 | module Outline = { 1253 | let toString = (width, style, color) => { 1254 | let width = width->Length.toString; 1255 | let style = style->OutlineStyle.toString; 1256 | let color = color->Color.toString; 1257 | {j|$width $style $color|j}; 1258 | }; 1259 | }; 1260 | 1261 | module BoxShadow = { 1262 | let toString = (~x, ~y, ~blur, ~spread, ~inset, color) => { 1263 | let x = x->Length.toString; 1264 | let y = y->Length.toString; 1265 | let blur = blur->Length.toString; 1266 | let spread = spread->Length.toString; 1267 | let color = color->Color.toString; 1268 | 1269 | if (inset) {{j|$x $y $blur $spread $color inset|j}} else { 1270 | {j|$x $y $blur $spread $color|j} 1271 | }; 1272 | }; 1273 | }; 1274 | 1275 | module Visibility = { 1276 | type t = [ | `visible | `hidden | `collapse]; 1277 | 1278 | let toString = (x: t) => 1279 | switch (x) { 1280 | | `visible => "visible" 1281 | | `hidden => "hidden" 1282 | | `collapse => "collapse" 1283 | }; 1284 | }; 1285 | 1286 | module Cursor = { 1287 | /* FIXME: List of `url`s */ 1288 | type t = [ 1289 | | `url(string) 1290 | | `auto 1291 | | `default 1292 | | `none 1293 | | `contextMenu 1294 | | `help 1295 | | `pointer 1296 | | `progress 1297 | | `wait 1298 | | `cell 1299 | | `crosshair 1300 | | `text 1301 | | `verticalText 1302 | | `alias 1303 | | `copy 1304 | | `move 1305 | | `noDrop 1306 | | `notAllowed 1307 | | `grab 1308 | | `grabbing 1309 | | `allScroll 1310 | | `colResize 1311 | | `rowResize 1312 | | `nResize 1313 | | `eResize 1314 | | `sResize 1315 | | `wResize 1316 | | `neResize 1317 | | `nwResize 1318 | | `seResize 1319 | | `swResize 1320 | | `ewResize 1321 | | `nsResize 1322 | | `neswResize 1323 | | `nwseResize 1324 | | `zoomIn 1325 | | `zoomOut 1326 | ]; 1327 | 1328 | let toString = (x: t) => 1329 | switch (x) { 1330 | | `url(x) => {j|url($x)|j} 1331 | | `auto => "auto" 1332 | | `default => "default" 1333 | | `none => "none" 1334 | | `contextMenu => "context-menu" 1335 | | `help => "help" 1336 | | `pointer => "pointer" 1337 | | `progress => "progress" 1338 | | `wait => "wait" 1339 | | `cell => "cell" 1340 | | `crosshair => "crosshair" 1341 | | `text => "text" 1342 | | `verticalText => "vertical-text" 1343 | | `alias => "alias" 1344 | | `copy => "copy" 1345 | | `move => "move" 1346 | | `noDrop => "no-drop" 1347 | | `notAllowed => "not-allowed" 1348 | | `grab => "grab" 1349 | | `grabbing => "grabbing" 1350 | | `allScroll => "all-scroll" 1351 | | `colResize => "col-resize" 1352 | | `rowResize => "row-resize" 1353 | | `nResize => "n-resize" 1354 | | `eResize => "e-resize" 1355 | | `sResize => "s-resize" 1356 | | `wResize => "w-resize" 1357 | | `neResize => "ne-resize" 1358 | | `nwResize => "nw-resize" 1359 | | `seResize => "se-resize" 1360 | | `swResize => "sw-resize" 1361 | | `ewResize => "ew-resize" 1362 | | `nsResize => "ns-resize" 1363 | | `neswResize => "nesw-resize" 1364 | | `nwseResize => "nwse-resize" 1365 | | `zoomIn => "zoom-in" 1366 | | `zoomOut => "zoom-out" 1367 | }; 1368 | }; 1369 | 1370 | module PointerEvents = { 1371 | /* TODO: SVG PointerEvents */ 1372 | type t = [ | `auto | `none]; 1373 | 1374 | let toString = (x: t) => 1375 | switch (x) { 1376 | | `auto => "auto" 1377 | | `none => "none" 1378 | }; 1379 | }; 1380 | 1381 | module Timing = { 1382 | type t = [ | `s(float) | `ms(int) | `zero]; 1383 | 1384 | let toString = (x: t) => 1385 | switch (x) { 1386 | | `s(x) => {j|$(x)s|j} 1387 | | `ms(x) => {j|$(x)ms|j} 1388 | | `zero => "0s" 1389 | }; 1390 | }; 1391 | 1392 | module TimingFunction = { 1393 | type t = [ 1394 | | `linear 1395 | | `ease 1396 | | `easeIn 1397 | | `easeOut 1398 | | `easeInOut 1399 | | `stepStart 1400 | | `stepEnd 1401 | | `steps(int, [ | `start | `end_]) 1402 | | `cubicBezier(float, float, float, float) 1403 | ]; 1404 | 1405 | let toString = (x: t) => 1406 | switch (x) { 1407 | | `linear => "linear" 1408 | | `ease => "ease" 1409 | | `easeIn => "ease-out" 1410 | | `easeOut => "ease-out" 1411 | | `easeInOut => "ease-in-out" 1412 | | `stepStart => "step-start" 1413 | | `stepEnd => "step-end" 1414 | | `steps(n, `start) => {j|steps($n, start)|j} 1415 | | `steps(n, `end_) => {j|steps($n, end)|j} 1416 | | `cubicBezier(a, b, c, d) => {j|cubic-bezier($a, $b, $c, $d)|j} 1417 | }; 1418 | }; 1419 | 1420 | module TransitionProperty = { 1421 | type t = string; 1422 | }; 1423 | 1424 | module TransitionDuration = { 1425 | type t = Timing.t; 1426 | }; 1427 | 1428 | module TransitionDelay = { 1429 | type t = Timing.t; 1430 | }; 1431 | 1432 | module TransitionTimingFunction = { 1433 | type t = TimingFunction.t; 1434 | }; 1435 | 1436 | module Transition = { 1437 | let toString = 1438 | ( 1439 | ~property: TransitionProperty.t, 1440 | ~duration: TransitionDuration.t, 1441 | ~delay: TransitionDelay.t, 1442 | ~timingFunction: TransitionTimingFunction.t, 1443 | ) => { 1444 | let duration = duration->Timing.toString; 1445 | let delay = delay->Timing.toString; 1446 | let timingFunction = timingFunction->TimingFunction.toString; 1447 | {j|$property $duration $timingFunction $delay|j}; 1448 | }; 1449 | }; 1450 | 1451 | module Transform = { 1452 | type t = [ 1453 | | `translate(LengthPercentage.t, LengthPercentage.t) 1454 | | `translate3d(LengthPercentage.t, LengthPercentage.t, LengthPercentage.t) 1455 | | `translateX(LengthPercentage.t) 1456 | | `translateY(LengthPercentage.t) 1457 | | `translateZ(LengthPercentage.t) 1458 | | `scale(float) 1459 | | `scaleXY(float, float) 1460 | | `scaleX(float) 1461 | | `scaleY(float) 1462 | | `scaleZ(float) 1463 | | `scale3d(float, float, float) 1464 | | `rotate(Angle.t) 1465 | | `rotate3d(float, float, float, Angle.t) 1466 | | `rotateX(Angle.t) 1467 | | `rotateY(Angle.t) 1468 | | `rotateZ(Angle.t) 1469 | | `skew(Angle.t, Angle.t) 1470 | | `skewX(Angle.t) 1471 | | `skewY(Angle.t) 1472 | | `matrix(float, float, float, float, float, float) 1473 | | `matrix3d( 1474 | float, 1475 | float, 1476 | float, 1477 | float, 1478 | float, 1479 | float, 1480 | float, 1481 | float, 1482 | float, 1483 | float, 1484 | float, 1485 | float, 1486 | float, 1487 | float, 1488 | float, 1489 | float, 1490 | ) 1491 | | `perspective(Length.t) 1492 | | `none 1493 | ]; 1494 | 1495 | let toString = (x: t) => 1496 | switch (x) { 1497 | | `translate(x, y) => 1498 | let x = x->LengthPercentage.toString; 1499 | let y = y->LengthPercentage.toString; 1500 | {j|translate($x, $y)|j}; 1501 | | `translate3d(x, y, z) => 1502 | let x = x->LengthPercentage.toString; 1503 | let y = y->LengthPercentage.toString; 1504 | let z = z->LengthPercentage.toString; 1505 | {j|translate3d($x, $y, $z)|j}; 1506 | | `translateX(x) => 1507 | let x = x->LengthPercentage.toString; 1508 | {j|translateX($x)|j}; 1509 | | `translateY(y) => 1510 | let y = y->LengthPercentage.toString; 1511 | {j|translateY($y)|j}; 1512 | | `translateZ(z) => 1513 | let z = z->LengthPercentage.toString; 1514 | {j|translateZ($z)|j}; 1515 | | `scale(x) => {j|scale($x)|j} 1516 | | `scaleXY(x, y) => {j|scale($x, $y)|j} 1517 | | `scaleX(x) => {j|scaleX($x)|j} 1518 | | `scaleY(y) => {j|scaleY($y)|j} 1519 | | `scaleZ(z) => {j|scaleZ($z)|j} 1520 | | `scale3d(x, y, z) => {j|scale3d($x, $y, $z)|j} 1521 | | `rotate(a) => 1522 | let a = a->Angle.toString; 1523 | {j|rotate($a)|j}; 1524 | | `rotate3d(x, y, z, a) => 1525 | let a = a->Angle.toString; 1526 | {j|rotate3d($x, $y, $z, $a)|j}; 1527 | | `rotateX(a) => 1528 | let a = a->Angle.toString; 1529 | {j|rotateX($a)|j}; 1530 | | `rotateY(a) => 1531 | let a = a->Angle.toString; 1532 | {j|rotateY($a)|j}; 1533 | | `rotateZ(a) => 1534 | let a = a->Angle.toString; 1535 | {j|rotateZ($a)|j}; 1536 | | `skew(x, y) => 1537 | let x = x->Angle.toString; 1538 | let y = y->Angle.toString; 1539 | {j|skew($x, $y)|j}; 1540 | | `skewX(a) => 1541 | let a = a->Angle.toString; 1542 | {j|skewX($a)|j}; 1543 | | `skewY(a) => 1544 | let a = a->Angle.toString; 1545 | {j|skewY($a)|j}; 1546 | | `matrix(a, b, c, d, tx, ty) => {j|matrix($a, $b, $c, $d, $tx, $ty)|j} 1547 | | `matrix3d( 1548 | a1, 1549 | b1, 1550 | c1, 1551 | d1, 1552 | a2, 1553 | b2, 1554 | c2, 1555 | d2, 1556 | a3, 1557 | b3, 1558 | c3, 1559 | d3, 1560 | a4, 1561 | b4, 1562 | c4, 1563 | d4, 1564 | ) => {j|matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4)|j} 1565 | | `perspective(x) => 1566 | let x = x->Length.toString; 1567 | {j|perspective($x)|j}; 1568 | | `none => "none" 1569 | }; 1570 | }; 1571 | 1572 | module TransformStyle = { 1573 | type t = [ | `flat | `preserve3d]; 1574 | 1575 | let toString = (x: t) => 1576 | switch (x) { 1577 | | `flat => "flat" 1578 | | `preserve3d => "preserve-3d" 1579 | }; 1580 | }; 1581 | 1582 | module Perspective = { 1583 | type t = [ | `none | Length.t]; 1584 | 1585 | let toString = (x: t) => 1586 | switch (x) { 1587 | | `none => "none" 1588 | | #Length.t as x => x->Length.toString 1589 | }; 1590 | }; 1591 | 1592 | module AnimationDirection = { 1593 | type t = [ | `normal | `reverse | `alternate | `alternateReverse]; 1594 | 1595 | let toString = (x: t) => 1596 | switch (x) { 1597 | | `normal => "normal" 1598 | | `reverse => "reverse" 1599 | | `alternate => "alternate" 1600 | | `alternateReverse => "alternate-reverse" 1601 | }; 1602 | }; 1603 | 1604 | module AnimationFillMode = { 1605 | type t = [ | `none | `forwards | `backwards | `both]; 1606 | 1607 | let toString = (x: t) => 1608 | switch (x) { 1609 | | `none => "none" 1610 | | `forwards => "forwards" 1611 | | `backwards => "backwards" 1612 | | `both => "both" 1613 | }; 1614 | }; 1615 | 1616 | module AnimationIterationCount = { 1617 | type t = [ | `infinite | `i(int)]; 1618 | 1619 | let toString = (x: t) => 1620 | switch (x) { 1621 | | `infinite => "infinite" 1622 | | `i(x) => {j|$x|j} 1623 | }; 1624 | }; 1625 | 1626 | module AnimationPlayState = { 1627 | type t = [ | `paused | `running]; 1628 | 1629 | let toString = (x: t) => 1630 | switch (x) { 1631 | | `paused => "paused" 1632 | | `running => "running" 1633 | }; 1634 | }; 1635 | 1636 | module AnimationName = { 1637 | type t = string; 1638 | }; 1639 | 1640 | module AnimationDuration = { 1641 | type t = Timing.t; 1642 | }; 1643 | 1644 | module AnimationDelay = { 1645 | type t = Timing.t; 1646 | }; 1647 | 1648 | module AnimationTimingFunction = { 1649 | type t = TimingFunction.t; 1650 | }; 1651 | 1652 | module Animation = { 1653 | let toString = 1654 | ( 1655 | ~name: AnimationName.t, 1656 | ~duration: AnimationDuration.t, 1657 | ~delay: AnimationDelay.t, 1658 | ~direction: AnimationDirection.t, 1659 | ~timingFunction: AnimationTimingFunction.t, 1660 | ~fillMode: AnimationFillMode.t, 1661 | ~playState: AnimationPlayState.t, 1662 | ~iterationCount: AnimationIterationCount.t, 1663 | ) => { 1664 | let duration = duration->Timing.toString; 1665 | let delay = delay->Timing.toString; 1666 | let direction = direction->AnimationDirection.toString; 1667 | let timingFunction = timingFunction->TimingFunction.toString; 1668 | let fillMode = fillMode->AnimationFillMode.toString; 1669 | let playState = playState->AnimationPlayState.toString; 1670 | let iterationCount = iterationCount->AnimationIterationCount.toString; 1671 | {j|$name $duration $timingFunction $delay $iterationCount $direction $fillMode $playState|j}; 1672 | }; 1673 | }; 1674 | 1675 | module FillRule = { 1676 | type t = [ | `evenodd | `nonzero]; 1677 | 1678 | let toString = (x: t) => 1679 | switch (x) { 1680 | | `evenodd => "evenodd" 1681 | | `nonzero => "nonzero" 1682 | }; 1683 | }; 1684 | 1685 | module StrokeLinecap = { 1686 | type t = [ | `butt | `round | `square]; 1687 | 1688 | let toString = (x: t) => 1689 | switch (x) { 1690 | | `butt => "butt" 1691 | | `round => "round" 1692 | | `square => "square" 1693 | }; 1694 | }; 1695 | 1696 | module StrokeLinejoin = { 1697 | type t = [ | `miter | `round | `bevel]; 1698 | 1699 | let toString = (x: t) => 1700 | switch (x) { 1701 | | `miter => "miter" 1702 | | `round => "round" 1703 | | `bevel => "bevel" 1704 | }; 1705 | }; 1706 | 1707 | module FilterFunction = { 1708 | type t = [ 1709 | | `blur(Length.t) 1710 | | `brightness(NumberPercentage.t) 1711 | | `contrast(NumberPercentage.t) 1712 | | `dropShadow(Length.t, Length.t, Length.t, Color.t) 1713 | | `grayscale(NumberPercentage.t) 1714 | | `hueRotate(Angle.t) 1715 | | `invert(NumberPercentage.t) 1716 | | `opacity(NumberPercentage.t) 1717 | | `saturate(NumberPercentage.t) 1718 | | `sepia(NumberPercentage.t) 1719 | ]; 1720 | 1721 | let toString = (x: t) => 1722 | switch (x) { 1723 | | `blur(x) => 1724 | let x = x->Length.toString; 1725 | {j|blur($x)|j}; 1726 | | `brightness(x) => 1727 | let x = x->NumberPercentage.toString; 1728 | {j|brightness($x)|j}; 1729 | | `contrast(x) => 1730 | let x = x->NumberPercentage.toString; 1731 | {j|contrast($x)|j}; 1732 | | `dropShadow(x, y, blur, color) => 1733 | let x = x->Length.toString; 1734 | let y = y->Length.toString; 1735 | let blur = blur->Length.toString; 1736 | let color = color->Color.toString; 1737 | {j|drop-shadow($x $y $blur $color)|j}; 1738 | | `grayscale(x) => 1739 | let x = x->NumberPercentage.toString; 1740 | {j|grayscale($x)|j}; 1741 | | `hueRotate(x) => 1742 | let x = x->Angle.toString; 1743 | {j|hue-rotate($x)|j}; 1744 | | `invert(x) => 1745 | let x = x->NumberPercentage.toString; 1746 | {j|invert($x)|j}; 1747 | | `opacity(x) => 1748 | let x = x->NumberPercentage.toString; 1749 | {j|opacity($x)|j}; 1750 | | `saturate(x) => 1751 | let x = x->NumberPercentage.toString; 1752 | {j|saturate($x)|j}; 1753 | | `sepia(x) => 1754 | let x = x->NumberPercentage.toString; 1755 | {j|sepia($x)|j}; 1756 | }; 1757 | }; 1758 | 1759 | module Filter = { 1760 | type t = [ Url.t | FilterFunction.t | `none]; 1761 | 1762 | let toString = (x: t) => 1763 | switch (x) { 1764 | | #Url.t as x => x->Url.toString 1765 | | #FilterFunction.t as x => x->FilterFunction.toString 1766 | | `none => "none" 1767 | }; 1768 | }; 1769 | 1770 | module Appearance = { 1771 | /* NOTE: Appearance: incomplete list. Status: Working Draft */ 1772 | type t = [ | `none | `button | `checkbox | `radio]; 1773 | 1774 | let toString = (x: t) => 1775 | switch (x) { 1776 | | `none => "none" 1777 | | `button => "button" 1778 | | `checkbox => "checkbox" 1779 | | `radio => "radio" 1780 | }; 1781 | }; 1782 | 1783 | module Flex = { 1784 | module Flex = { 1785 | type t = [ | `auto | `none | `some(float, float, LengthPercentageAuto.t)]; 1786 | 1787 | let toString = (x: t) => 1788 | switch (x) { 1789 | | `auto => "auto" 1790 | | `none => "none" 1791 | | `some(grow, shrink, basis) => 1792 | let basis = basis->LengthPercentageAuto.toString; 1793 | {j|$grow $shrink $basis|j}; 1794 | }; 1795 | }; 1796 | 1797 | module Direction = { 1798 | type t = [ | `row | `column | `rowReverse | `columnReverse]; 1799 | 1800 | let toString = (x: t) => 1801 | switch (x) { 1802 | | `row => "row" 1803 | | `column => "column" 1804 | | `rowReverse => "row-reverse" 1805 | | `columnReverse => "column-reverse" 1806 | }; 1807 | }; 1808 | 1809 | module Wrap = { 1810 | type t = [ | `nowrap | `wrap | `wrapReverse]; 1811 | 1812 | let toString = (x: t) => 1813 | switch (x) { 1814 | | `nowrap => "nowrap" 1815 | | `wrap => "wrap" 1816 | | `wrapReverse => "wrap-reverse" 1817 | }; 1818 | }; 1819 | 1820 | module Flow = { 1821 | let toString = (direction, wrap) => { 1822 | let direction = direction->Direction.toString; 1823 | let wrap = wrap->Wrap.toString; 1824 | {j|$direction $wrap|j}; 1825 | }; 1826 | }; 1827 | }; 1828 | 1829 | module Grid = { 1830 | module Flex = { 1831 | type t = [ | `fr(float)]; 1832 | 1833 | let toString = (x: t) => 1834 | switch (x) { 1835 | | `fr(x) => {j|$(x)fr|j} 1836 | }; 1837 | }; 1838 | 1839 | module MinMax = { 1840 | type t = [ | `minmax(min, max)] 1841 | and min = [ LengthPercentage.t | `minContent | `maxContent | `auto] 1842 | and max = [ 1843 | LengthPercentage.t 1844 | | Flex.t 1845 | | `minContent 1846 | | `maxContent 1847 | | `auto 1848 | ]; 1849 | 1850 | let minToString = (x: min) => 1851 | switch (x) { 1852 | | #LengthPercentage.t as x => x->LengthPercentage.toString 1853 | | `minContent => "min-content" 1854 | | `maxContent => "max-content" 1855 | | `auto => "auto" 1856 | }; 1857 | 1858 | let maxToString = (x: max) => 1859 | switch (x) { 1860 | | #LengthPercentage.t as x => x->LengthPercentage.toString 1861 | | #Flex.t as x => x->Flex.toString 1862 | | `minContent => "min-content" 1863 | | `maxContent => "max-content" 1864 | | `auto => "auto" 1865 | }; 1866 | 1867 | let toString = (x: t) => 1868 | switch (x) { 1869 | | `minmax(min, max) => 1870 | let min = min->minToString; 1871 | let max = max->maxToString; 1872 | {j|minmax($min, $max)|j}; 1873 | }; 1874 | }; 1875 | 1876 | module FitContent = { 1877 | type t = [ | `fitContent(LengthPercentage.t)]; 1878 | 1879 | let toString = (x: t) => 1880 | switch (x) { 1881 | | `fitContent(x) => 1882 | let x = x->LengthPercentage.toString; 1883 | {j|fit-content($x)|j}; 1884 | }; 1885 | }; 1886 | 1887 | module Repeat = { 1888 | type t = [ | `repeat(value, list(trackList))] 1889 | and value = [ | `n(int) | `autoFill | `autoFit] 1890 | and trackList = [ 1891 | LengthPercentage.t 1892 | | Flex.t 1893 | | MinMax.t 1894 | | `minContent 1895 | | `maxContent 1896 | | `auto 1897 | ]; 1898 | 1899 | let valueToString = (x: value) => 1900 | switch (x) { 1901 | | `n(x) => {j|$x|j} 1902 | | `autoFill => "auto-fill" 1903 | | `autoFit => "auto-fit" 1904 | }; 1905 | let trackListToString = (x: trackList) => 1906 | switch (x) { 1907 | | #LengthPercentage.t as x => x->LengthPercentage.toString 1908 | | #Flex.t as x => x->Flex.toString 1909 | | #MinMax.t as x => x->MinMax.toString 1910 | | `minContent => "min-content" 1911 | | `maxContent => "max-content" 1912 | | `auto => "auto" 1913 | }; 1914 | let toString = (x: t) => 1915 | switch (x) { 1916 | | `repeat(value, trackList) => 1917 | let value = value->valueToString; 1918 | let trackList = 1919 | trackList->List.map(trackListToString)->Helpers.joinWith(" "); 1920 | {j|repeat($(value), $(trackList))|j}; 1921 | }; 1922 | }; 1923 | 1924 | module AutoRows = { 1925 | type t = [ 1926 | LengthPercentage.t 1927 | | Flex.t 1928 | | MinMax.t 1929 | | `minContent 1930 | | `maxContent 1931 | | `auto 1932 | ]; 1933 | 1934 | let toString = (x: t) => 1935 | switch (x) { 1936 | | #LengthPercentage.t as x => x->LengthPercentage.toString 1937 | | #Flex.t as x => x->Flex.toString 1938 | | #MinMax.t as x => x->MinMax.toString 1939 | | `minContent => "min-content" 1940 | | `maxContent => "max-content" 1941 | | `auto => "auto" 1942 | }; 1943 | }; 1944 | 1945 | module AutoColumns = { 1946 | type t = [ 1947 | LengthPercentage.t 1948 | | Flex.t 1949 | | FitContent.t 1950 | | MinMax.t 1951 | | `minContent 1952 | | `maxContent 1953 | | `auto 1954 | ]; 1955 | 1956 | let toString = (x: t) => 1957 | switch (x) { 1958 | | #LengthPercentage.t as x => x->LengthPercentage.toString 1959 | | #Flex.t as x => x->Flex.toString 1960 | | #FitContent.t as x => x->FitContent.toString 1961 | | #MinMax.t as x => x->MinMax.toString 1962 | | `minContent => "min-content" 1963 | | `maxContent => "max-content" 1964 | | `auto => "auto" 1965 | }; 1966 | }; 1967 | 1968 | module Template = { 1969 | type t = [ | `list(list(value)) | `none] 1970 | and value = [ 1971 | LengthPercentage.t 1972 | | Flex.t 1973 | | MinMax.t 1974 | | FitContent.t 1975 | | Repeat.t 1976 | | `minContent 1977 | | `maxContent 1978 | | `auto 1979 | ]; 1980 | 1981 | let valueToString = (x: value) => 1982 | switch (x) { 1983 | | #LengthPercentage.t as x => x->LengthPercentage.toString 1984 | | #Flex.t as x => x->Flex.toString 1985 | | #MinMax.t as x => x->MinMax.toString 1986 | | #FitContent.t as x => x->FitContent.toString 1987 | | #Repeat.t as x => x->Repeat.toString 1988 | | `minContent => "min-content" 1989 | | `maxContent => "max-content" 1990 | | `auto => "auto" 1991 | }; 1992 | 1993 | let toString = (x: t) => 1994 | switch (x) { 1995 | | `list(xs) => 1996 | let xs = xs->List.map(valueToString)->Helpers.joinWith(" "); 1997 | {j|$xs|j}; 1998 | | `none => "none" 1999 | }; 2000 | }; 2001 | 2002 | module Line = { 2003 | type t = [ 2004 | | `auto 2005 | | `n(int) 2006 | | `ident(string) 2007 | | `nIdent(int, string) 2008 | | `span([ | `n(int) | `ident(string) | `nIdent(int, string)]) 2009 | ]; 2010 | 2011 | let toString = (x: t) => 2012 | switch (x) { 2013 | | `auto => "auto" 2014 | | `n(x) => {j|$x|j} 2015 | | `ident(x) => x 2016 | | `nIdent(n, ident) => {j|$n $ident|j} 2017 | | `span(`n(x)) => {j|span $x|j} 2018 | | `span(`ident(x)) => {j|span $x|j} 2019 | | `span(`nIdent(n, ident)) => {j|span $n $ident|j} 2020 | }; 2021 | }; 2022 | 2023 | module Gap = { 2024 | type t = [ LengthPercentage.t | `normal]; 2025 | 2026 | let toString = (x: t) => 2027 | switch (x) { 2028 | | #LengthPercentage.t as x => x->LengthPercentage.toString 2029 | | `normal => "normal" 2030 | }; 2031 | }; 2032 | 2033 | module TemplateAreas = { 2034 | type t = [ | `areas(list(string)) | `none]; 2035 | 2036 | let toString = (x: t) => 2037 | switch (x) { 2038 | | `areas(xs) => xs->List.map(x => {j|"$x"|j})->Helpers.joinWith("\n") 2039 | | `none => "none" 2040 | }; 2041 | }; 2042 | 2043 | module AutoFlow = { 2044 | type t = [ | `row | `column | `rowDense | `columnDense]; 2045 | 2046 | let toString = (x: t) => 2047 | switch (x) { 2048 | | `row => "row" 2049 | | `column => "column" 2050 | | `rowDense => "row dense" 2051 | | `columnDense => "column dense" 2052 | }; 2053 | }; 2054 | }; 2055 | 2056 | module AlignItems = { 2057 | type t = [ 2058 | | `normal 2059 | | `stretch 2060 | | `baseline 2061 | | `firstBaseline 2062 | | `lastBaseline 2063 | | `center 2064 | | `start 2065 | | `end_ 2066 | | `selfStart 2067 | | `selfEnd 2068 | | `flexStart 2069 | | `flexEnd 2070 | ]; 2071 | 2072 | let toString = (x: t) => 2073 | switch (x) { 2074 | | `normal => "normal" 2075 | | `stretch => "stretch" 2076 | | `baseline => "baseline" 2077 | | `firstBaseline => "first baseline" 2078 | | `lastBaseline => "last baseline" 2079 | | `center => "center" 2080 | | `start => "start" 2081 | | `end_ => "end" 2082 | | `selfStart => "self-start" 2083 | | `selfEnd => "self-end" 2084 | | `flexStart => "flex-start" 2085 | | `flexEnd => "flex-end" 2086 | }; 2087 | }; 2088 | 2089 | module AlignSelf = { 2090 | type t = [ 2091 | | `auto 2092 | | `normal 2093 | | `stretch 2094 | | `baseline 2095 | | `firstBaseline 2096 | | `lastBaseline 2097 | | `center 2098 | | `start 2099 | | `end_ 2100 | | `selfStart 2101 | | `selfEnd 2102 | | `flexStart 2103 | | `flexEnd 2104 | ]; 2105 | 2106 | let toString = (x: t) => 2107 | switch (x) { 2108 | | `auto => "auto" 2109 | | `normal => "normal" 2110 | | `stretch => "stretch" 2111 | | `baseline => "baseline" 2112 | | `firstBaseline => "first baseline" 2113 | | `lastBaseline => "last baseline" 2114 | | `center => "center" 2115 | | `start => "start" 2116 | | `end_ => "end" 2117 | | `selfStart => "self-start" 2118 | | `selfEnd => "self-end" 2119 | | `flexStart => "flex-start" 2120 | | `flexEnd => "flex-end" 2121 | }; 2122 | }; 2123 | 2124 | module AlignContent = { 2125 | type t = [ 2126 | | `normal 2127 | | `baseline 2128 | | `firstBaseline 2129 | | `lastBaseline 2130 | | `spaceBetween 2131 | | `spaceAround 2132 | | `spaceEvenly 2133 | | `stretch 2134 | | `center 2135 | | `start 2136 | | `end_ 2137 | | `flexStart 2138 | | `flexEnd 2139 | ]; 2140 | 2141 | let toString = (x: t) => 2142 | switch (x) { 2143 | | `normal => "normal" 2144 | | `baseline => "baseline" 2145 | | `firstBaseline => "first baseline" 2146 | | `lastBaseline => "last baseline" 2147 | | `spaceBetween => "space-between" 2148 | | `spaceAround => "space-around" 2149 | | `spaceEvenly => "space-evenly" 2150 | | `stretch => "stretch" 2151 | | `center => "center" 2152 | | `start => "start" 2153 | | `end_ => "end" 2154 | | `flexStart => "flex-start" 2155 | | `flexEnd => "flex-end" 2156 | }; 2157 | }; 2158 | 2159 | module JustifyItems = { 2160 | type t = [ 2161 | | `normal 2162 | | `stretch 2163 | | `baseline 2164 | | `firstBaseline 2165 | | `lastBaseline 2166 | | `center 2167 | | `start 2168 | | `end_ 2169 | | `selfStart 2170 | | `selfEnd 2171 | | `flexStart 2172 | | `flexEnd 2173 | | `left 2174 | | `right 2175 | ]; 2176 | 2177 | let toString = (x: t) => 2178 | switch (x) { 2179 | | `normal => "normal" 2180 | | `stretch => "stretch" 2181 | | `baseline => "baseline" 2182 | | `firstBaseline => "first baseline" 2183 | | `lastBaseline => "last baseline" 2184 | | `center => "center" 2185 | | `start => "start" 2186 | | `end_ => "end" 2187 | | `selfStart => "self-start" 2188 | | `selfEnd => "self-end" 2189 | | `flexStart => "flex-start" 2190 | | `flexEnd => "flex-end" 2191 | | `left => "left" 2192 | | `right => "right" 2193 | }; 2194 | }; 2195 | 2196 | module JustifySelf = { 2197 | type t = [ 2198 | | `auto 2199 | | `normal 2200 | | `stretch 2201 | | `baseline 2202 | | `firstBaseline 2203 | | `lastBaseline 2204 | | `center 2205 | | `start 2206 | | `end_ 2207 | | `selfStart 2208 | | `selfEnd 2209 | | `flexStart 2210 | | `flexEnd 2211 | | `left 2212 | | `right 2213 | ]; 2214 | 2215 | let toString = (x: t) => 2216 | switch (x) { 2217 | | `auto => "auto" 2218 | | `normal => "normal" 2219 | | `stretch => "stretch" 2220 | | `baseline => "baseline" 2221 | | `firstBaseline => "first baseline" 2222 | | `lastBaseline => "last baseline" 2223 | | `center => "center" 2224 | | `start => "start" 2225 | | `end_ => "end" 2226 | | `selfStart => "self-start" 2227 | | `selfEnd => "self-end" 2228 | | `flexStart => "flex-start" 2229 | | `flexEnd => "flex-end" 2230 | | `left => "left" 2231 | | `right => "right" 2232 | }; 2233 | }; 2234 | 2235 | module JustifyContent = { 2236 | type t = [ 2237 | | `normal 2238 | | `spaceBetween 2239 | | `spaceAround 2240 | | `spaceEvenly 2241 | | `stretch 2242 | | `center 2243 | | `start 2244 | | `end_ 2245 | | `flexStart 2246 | | `flexEnd 2247 | | `left 2248 | | `right 2249 | ]; 2250 | 2251 | let toString = (x: t) => 2252 | switch (x) { 2253 | | `normal => "normal" 2254 | | `spaceBetween => "space-between" 2255 | | `spaceAround => "space-around" 2256 | | `spaceEvenly => "space-evenly" 2257 | | `stretch => "stretch" 2258 | | `center => "center" 2259 | | `start => "start" 2260 | | `end_ => "end" 2261 | | `flexStart => "flex-start" 2262 | | `flexEnd => "flex-end" 2263 | | `left => "left" 2264 | | `right => "right" 2265 | }; 2266 | }; 2267 | 2268 | module BasicShape = { 2269 | module ShapePosition = { 2270 | type t = [ | `keyword(Position.t) | `value(LengthPercentage.t)]; 2271 | 2272 | let toString = (x: t) => 2273 | switch (x) { 2274 | | `keyword(x) => x->Position.toString 2275 | | `value(x) => x->LengthPercentage.toString 2276 | }; 2277 | }; 2278 | 2279 | module FillRule = { 2280 | type t = [ | `nonzero | `evenodd]; 2281 | 2282 | let toString = (x: t) => 2283 | switch (x) { 2284 | | `nonzero => "nonzero" 2285 | | `evenodd => "evenodd" 2286 | }; 2287 | }; 2288 | 2289 | module ShapeRadius = { 2290 | type t = [ LengthPercentage.t | `closestSide | `farthestSide]; 2291 | 2292 | let toString = (x: t) => 2293 | switch (x) { 2294 | | #LengthPercentage.t as x => x->LengthPercentage.toString 2295 | | `farthestSide => "farthest-side" 2296 | | `closestSide => "closest-side" 2297 | }; 2298 | }; 2299 | 2300 | type t = [ 2301 | | `inset( 2302 | LengthPercentage.t, 2303 | LengthPercentage.t, 2304 | LengthPercentage.t, 2305 | LengthPercentage.t, 2306 | option(LengthPercentage.t), 2307 | ) 2308 | | `circle(ShapeRadius.t, option((ShapePosition.t, ShapePosition.t))) 2309 | | `ellipse( 2310 | ShapeRadius.t, 2311 | ShapeRadius.t, 2312 | option((ShapePosition.t, ShapePosition.t)), 2313 | ) 2314 | | `polygon( 2315 | list((LengthPercentage.t, LengthPercentage.t)), 2316 | option(FillRule.t), 2317 | ) 2318 | | `path(string, option(FillRule.t)) 2319 | ]; 2320 | 2321 | let toString = (x: t) => 2322 | switch (x) { 2323 | | `inset(top, right, bottom, left, borderRadius) => 2324 | let top = top->LengthPercentage.toString; 2325 | let right = right->LengthPercentage.toString; 2326 | let bottom = bottom->LengthPercentage.toString; 2327 | let left = left->LengthPercentage.toString; 2328 | let borderRadius = 2329 | borderRadius 2330 | ->Option.map(borderRadius => 2331 | " round " ++ borderRadius->LengthPercentage.toString 2332 | ) 2333 | ->Option.getWithDefault(""); 2334 | {j|$top $right $bottom $left$borderRadius|j}; 2335 | | `circle(radius, atPosition) => 2336 | let radius = radius->ShapeRadius.toString; 2337 | let atPosition = 2338 | atPosition 2339 | ->Option.map(atPosition => { 2340 | let at1 = atPosition->fst->ShapePosition.toString; 2341 | let at2 = atPosition->snd->ShapePosition.toString; 2342 | {j| at $at1 $at2|j}; 2343 | }) 2344 | ->Option.getWithDefault(""); 2345 | {j|$radius$atPosition|j}; 2346 | | `ellipse(rX, rY, atPosition) => 2347 | let rX = rX->ShapeRadius.toString; 2348 | let rY = rY->ShapeRadius.toString; 2349 | let atPosition = 2350 | atPosition 2351 | ->Option.map(atPosition => { 2352 | let at1 = atPosition->fst->ShapePosition.toString; 2353 | let at2 = atPosition->snd->ShapePosition.toString; 2354 | {j| at $at1 $at2|j}; 2355 | }) 2356 | ->Option.getWithDefault(""); 2357 | {j|$rX $rY$atPosition|j}; 2358 | | `polygon(shapeArgs, fillRule) => 2359 | let fillRule = 2360 | fillRule 2361 | ->Option.map(fillRule => fillRule->FillRule.toString ++ ",") 2362 | ->Option.getWithDefault(""); 2363 | let args = 2364 | shapeArgs 2365 | ->List.map(arg => { 2366 | let a1 = arg->fst->LengthPercentage.toString; 2367 | let a2 = arg->snd->LengthPercentage.toString; 2368 | {j|$a1 $a2|j}; 2369 | }) 2370 | ->List.toArray 2371 | ->Js.Array.joinWith(",", _); 2372 | {j|$fillRule$args|j}; 2373 | | `path(path, fillRule) => 2374 | let fillRule = 2375 | fillRule 2376 | ->Option.map(fillRule => fillRule->FillRule.toString ++ ",") 2377 | ->Option.getWithDefault(""); 2378 | {j|$fillRule$path|j}; 2379 | }; 2380 | }; 2381 | 2382 | module GeometryBox = { 2383 | type t = [ 2384 | | `marginBox 2385 | | `borderBox 2386 | | `paddingBox 2387 | | `contentBox 2388 | | `fillBox 2389 | | `strokeBox 2390 | | `viewBox 2391 | ]; 2392 | 2393 | let toString = (x: t) => 2394 | switch (x) { 2395 | | `marginBox => "margin-box" 2396 | | `borderBox => "border-box" 2397 | | `paddingBox => "padding-box" 2398 | | `contentBox => "content-box" 2399 | | `fillBox => "fill-box" 2400 | | `strokeBox => "stroke-box" 2401 | | `viewBox => "view-box" 2402 | }; 2403 | }; 2404 | 2405 | module ClipPath = { 2406 | type t = [ 2407 | | `none 2408 | | `initial 2409 | | `unset 2410 | | `url(Url.t) 2411 | | `box(GeometryBox.t) 2412 | | `shape(BasicShape.t) 2413 | | `boxShape(GeometryBox.t, BasicShape.t) 2414 | ]; 2415 | 2416 | let toString = (x: t) => 2417 | switch (x) { 2418 | | `none => "none" 2419 | | `initial => "initial" 2420 | | `unset => "unset" 2421 | | `url(url) => url->Url.toString 2422 | | `box(box) => box->GeometryBox.toString 2423 | | `shape(shape) => shape->BasicShape.toString 2424 | | `boxShape(box, shape) => 2425 | let box = box->GeometryBox.toString; 2426 | let shape = shape->BasicShape.toString; 2427 | {j|$box $shape|j}; 2428 | }; 2429 | }; 2430 | -------------------------------------------------------------------------------- /src/Css.rei: -------------------------------------------------------------------------------- 1 | module Helpers: {let joinWith: (list(string), string) => string;}; 2 | module Calc: { 3 | type op = [ | `add | `div | `mult | `sub]; 4 | type n = [ | `n(float)]; 5 | type t('a) = [ | `calc(op, 'a, 'a)]; 6 | let (+): ('a, 'b) => [> | `calc([> | `add], 'a, 'b)]; 7 | let (-): ('a, 'b) => [> | `calc([> | `sub], 'a, 'b)]; 8 | let ( * ): ('a, 'b) => [> | `calc([> | `mult], 'a, 'b)]; 9 | let (/): ('a, 'b) => [> | `calc([> | `div], 'a, 'b)]; 10 | let opToString: op => string; 11 | let numToString: n => string; 12 | }; 13 | module LengthUnit: { 14 | type t = [ 15 | | `ch(float) 16 | | `cm(float) 17 | | `em(float) 18 | | `ex(float) 19 | | `inch(float) 20 | | `mm(float) 21 | | `pc(float) 22 | | `pt(float) 23 | | `px(int) 24 | | `q(float) 25 | | `rem(float) 26 | | `vh(float) 27 | | `vmax(float) 28 | | `vmin(float) 29 | | `vw(float) 30 | | `zero 31 | ]; 32 | let toString: t => string; 33 | }; 34 | module Length: { 35 | type t = [ 36 | | `calc( 37 | Calc.op, 38 | [ 39 | | `calc(Calc.op, 'a, 'a) 40 | | `ch(float) 41 | | `cm(float) 42 | | `em(float) 43 | | `ex(float) 44 | | `inch(float) 45 | | `mm(float) 46 | | `n(float) 47 | | `pc(float) 48 | | `pt(float) 49 | | `px(int) 50 | | `q(float) 51 | | `rem(float) 52 | | `vh(float) 53 | | `vmax(float) 54 | | `vmin(float) 55 | | `vw(float) 56 | | `zero 57 | ] as 'a, 58 | 'a, 59 | ) 60 | | `ch(float) 61 | | `cm(float) 62 | | `em(float) 63 | | `ex(float) 64 | | `inch(float) 65 | | `mm(float) 66 | | `pc(float) 67 | | `pt(float) 68 | | `px(int) 69 | | `q(float) 70 | | `rem(float) 71 | | `vh(float) 72 | | `vmax(float) 73 | | `vmin(float) 74 | | `vw(float) 75 | | `zero 76 | ]; 77 | let operandToString: 78 | ( 79 | [< 80 | | `calc(Calc.op, 'a, 'a) 81 | | `ch(float) 82 | | `cm(float) 83 | | `em(float) 84 | | `ex(float) 85 | | `inch(float) 86 | | `mm(float) 87 | | `n(float) 88 | | `pc(float) 89 | | `pt(float) 90 | | `px(int) 91 | | `q(float) 92 | | `rem(float) 93 | | `vh(float) 94 | | `vmax(float) 95 | | `vmin(float) 96 | | `vw(float) 97 | | `zero 98 | ] as 'a 99 | ) => 100 | string; 101 | let toString: t => string; 102 | let toString2: (t, t) => string; 103 | }; 104 | module PercentageUnit: { 105 | type t = [ | `pct(float)]; 106 | let toString: t => string; 107 | }; 108 | module Percentage: { 109 | type t = [ 110 | | `calc( 111 | Calc.op, 112 | [ | `calc(Calc.op, 'a, 'a) | `n(float) | `pct(float)] as 'a, 113 | 'a, 114 | ) 115 | | `pct(float) 116 | ]; 117 | let operandToString: 118 | ([< | `calc(Calc.op, 'a, 'a) | `n(float) | `pct(float)] as 'a) => string; 119 | let toString: t => string; 120 | }; 121 | module LengthPercentage: { 122 | type t = [ 123 | | `calc( 124 | Calc.op, 125 | [ 126 | | `calc(Calc.op, 'a, 'a) 127 | | `ch(float) 128 | | `cm(float) 129 | | `em(float) 130 | | `ex(float) 131 | | `inch(float) 132 | | `mm(float) 133 | | `n(float) 134 | | `pc(float) 135 | | `pct(float) 136 | | `pt(float) 137 | | `px(int) 138 | | `q(float) 139 | | `rem(float) 140 | | `vh(float) 141 | | `vmax(float) 142 | | `vmin(float) 143 | | `vw(float) 144 | | `zero 145 | ] as 'a, 146 | 'a, 147 | ) 148 | | `ch(float) 149 | | `cm(float) 150 | | `em(float) 151 | | `ex(float) 152 | | `inch(float) 153 | | `mm(float) 154 | | `pc(float) 155 | | `pct(float) 156 | | `pt(float) 157 | | `px(int) 158 | | `q(float) 159 | | `rem(float) 160 | | `vh(float) 161 | | `vmax(float) 162 | | `vmin(float) 163 | | `vw(float) 164 | | `zero 165 | ]; 166 | let operandToString: 167 | ( 168 | [< 169 | | `calc(Calc.op, 'a, 'a) 170 | | `ch(float) 171 | | `cm(float) 172 | | `em(float) 173 | | `ex(float) 174 | | `inch(float) 175 | | `mm(float) 176 | | `n(float) 177 | | `pc(float) 178 | | `pct(float) 179 | | `pt(float) 180 | | `px(int) 181 | | `q(float) 182 | | `rem(float) 183 | | `vh(float) 184 | | `vmax(float) 185 | | `vmin(float) 186 | | `vw(float) 187 | | `zero 188 | ] as 'a 189 | ) => 190 | string; 191 | let toString: t => string; 192 | let toString2: (t, t) => string; 193 | let toString3: (t, t, t) => string; 194 | let toString4: (t, t, t, t) => string; 195 | }; 196 | module LengthPercentageAuto: { 197 | type t = [ 198 | | `auto 199 | | `calc( 200 | Calc.op, 201 | [ 202 | | `calc(Calc.op, 'a, 'a) 203 | | `ch(float) 204 | | `cm(float) 205 | | `em(float) 206 | | `ex(float) 207 | | `inch(float) 208 | | `mm(float) 209 | | `n(float) 210 | | `pc(float) 211 | | `pct(float) 212 | | `pt(float) 213 | | `px(int) 214 | | `q(float) 215 | | `rem(float) 216 | | `vh(float) 217 | | `vmax(float) 218 | | `vmin(float) 219 | | `vw(float) 220 | | `zero 221 | ] as 'a, 222 | 'a, 223 | ) 224 | | `ch(float) 225 | | `cm(float) 226 | | `em(float) 227 | | `ex(float) 228 | | `inch(float) 229 | | `mm(float) 230 | | `pc(float) 231 | | `pct(float) 232 | | `pt(float) 233 | | `px(int) 234 | | `q(float) 235 | | `rem(float) 236 | | `vh(float) 237 | | `vmax(float) 238 | | `vmin(float) 239 | | `vw(float) 240 | | `zero 241 | ]; 242 | let toString: t => string; 243 | let toString2: (t, t) => string; 244 | let toString3: (t, t, t) => string; 245 | let toString4: (t, t, t, t) => string; 246 | }; 247 | module LengthPercentageNone: { 248 | type t = [ 249 | | `calc( 250 | Calc.op, 251 | [ 252 | | `calc(Calc.op, 'a, 'a) 253 | | `ch(float) 254 | | `cm(float) 255 | | `em(float) 256 | | `ex(float) 257 | | `inch(float) 258 | | `mm(float) 259 | | `n(float) 260 | | `pc(float) 261 | | `pct(float) 262 | | `pt(float) 263 | | `px(int) 264 | | `q(float) 265 | | `rem(float) 266 | | `vh(float) 267 | | `vmax(float) 268 | | `vmin(float) 269 | | `vw(float) 270 | | `zero 271 | ] as 'a, 272 | 'a, 273 | ) 274 | | `ch(float) 275 | | `cm(float) 276 | | `em(float) 277 | | `ex(float) 278 | | `inch(float) 279 | | `mm(float) 280 | | `none 281 | | `pc(float) 282 | | `pct(float) 283 | | `pt(float) 284 | | `px(int) 285 | | `q(float) 286 | | `rem(float) 287 | | `vh(float) 288 | | `vmax(float) 289 | | `vmin(float) 290 | | `vw(float) 291 | | `zero 292 | ]; 293 | let toString: t => string; 294 | }; 295 | module NumberPercentage: { 296 | type t = [ | `calc(Calc.op, 'a, 'a) | `n(float) | `pct(float)] as 'a; 297 | let toString: t => string; 298 | let toString2: (t, t) => string; 299 | let toString3: (t, t, t) => string; 300 | let toString4: (t, t, t, t) => string; 301 | }; 302 | module Angle: { 303 | type t = [ | `deg(float) | `grad(float) | `rad(float) | `turn(float)]; 304 | let toString: t => string; 305 | }; 306 | module Color: { 307 | type t = [ 308 | | `currentColor 309 | | `hex(string) 310 | | `hsl(int, int, int) 311 | | `hsla(int, int, int, float) 312 | | `rgb(int, int, int) 313 | | `rgba(int, int, int, float) 314 | | `transparent 315 | ]; 316 | let toString: t => string; 317 | let aliceblue: [> | `hex(string)]; 318 | let antiquewhite: [> | `hex(string)]; 319 | let aqua: [> | `hex(string)]; 320 | let aquamarine: [> | `hex(string)]; 321 | let azure: [> | `hex(string)]; 322 | let beige: [> | `hex(string)]; 323 | let bisque: [> | `hex(string)]; 324 | let black: [> | `hex(string)]; 325 | let blanchedalmond: [> | `hex(string)]; 326 | let blue: [> | `hex(string)]; 327 | let blueviolet: [> | `hex(string)]; 328 | let brown: [> | `hex(string)]; 329 | let burlywood: [> | `hex(string)]; 330 | let cadetblue: [> | `hex(string)]; 331 | let chartreuse: [> | `hex(string)]; 332 | let chocolate: [> | `hex(string)]; 333 | let coral: [> | `hex(string)]; 334 | let cornflowerblue: [> | `hex(string)]; 335 | let cornsilk: [> | `hex(string)]; 336 | let crimson: [> | `hex(string)]; 337 | let cyan: [> | `hex(string)]; 338 | let darkblue: [> | `hex(string)]; 339 | let darkcyan: [> | `hex(string)]; 340 | let darkgoldenrod: [> | `hex(string)]; 341 | let darkgray: [> | `hex(string)]; 342 | let darkgreen: [> | `hex(string)]; 343 | let darkgrey: [> | `hex(string)]; 344 | let darkkhaki: [> | `hex(string)]; 345 | let darkmagenta: [> | `hex(string)]; 346 | let darkolivegreen: [> | `hex(string)]; 347 | let darkorange: [> | `hex(string)]; 348 | let darkorchid: [> | `hex(string)]; 349 | let darkred: [> | `hex(string)]; 350 | let darksalmon: [> | `hex(string)]; 351 | let darkseagreen: [> | `hex(string)]; 352 | let darkslateblue: [> | `hex(string)]; 353 | let darkslategray: [> | `hex(string)]; 354 | let darkslategrey: [> | `hex(string)]; 355 | let darkturquoise: [> | `hex(string)]; 356 | let darkviolet: [> | `hex(string)]; 357 | let deeppink: [> | `hex(string)]; 358 | let deepskyblue: [> | `hex(string)]; 359 | let dimgray: [> | `hex(string)]; 360 | let dimgrey: [> | `hex(string)]; 361 | let dodgerblue: [> | `hex(string)]; 362 | let firebrick: [> | `hex(string)]; 363 | let floralwhite: [> | `hex(string)]; 364 | let forestgreen: [> | `hex(string)]; 365 | let fuchsia: [> | `hex(string)]; 366 | let gainsboro: [> | `hex(string)]; 367 | let ghostwhite: [> | `hex(string)]; 368 | let gold: [> | `hex(string)]; 369 | let goldenrod: [> | `hex(string)]; 370 | let gray: [> | `hex(string)]; 371 | let green: [> | `hex(string)]; 372 | let greenyellow: [> | `hex(string)]; 373 | let grey: [> | `hex(string)]; 374 | let honeydew: [> | `hex(string)]; 375 | let hotpink: [> | `hex(string)]; 376 | let indianred: [> | `hex(string)]; 377 | let indigo: [> | `hex(string)]; 378 | let ivory: [> | `hex(string)]; 379 | let khaki: [> | `hex(string)]; 380 | let lavender: [> | `hex(string)]; 381 | let lavenderblush: [> | `hex(string)]; 382 | let lawngreen: [> | `hex(string)]; 383 | let lemonchiffon: [> | `hex(string)]; 384 | let lightblue: [> | `hex(string)]; 385 | let lightcoral: [> | `hex(string)]; 386 | let lightcyan: [> | `hex(string)]; 387 | let lightgoldenrodyellow: [> | `hex(string)]; 388 | let lightgray: [> | `hex(string)]; 389 | let lightgreen: [> | `hex(string)]; 390 | let lightgrey: [> | `hex(string)]; 391 | let lightpink: [> | `hex(string)]; 392 | let lightsalmon: [> | `hex(string)]; 393 | let lightseagreen: [> | `hex(string)]; 394 | let lightskyblue: [> | `hex(string)]; 395 | let lightslategray: [> | `hex(string)]; 396 | let lightslategrey: [> | `hex(string)]; 397 | let lightsteelblue: [> | `hex(string)]; 398 | let lightyellow: [> | `hex(string)]; 399 | let lime: [> | `hex(string)]; 400 | let limegreen: [> | `hex(string)]; 401 | let linen: [> | `hex(string)]; 402 | let magenta: [> | `hex(string)]; 403 | let maroon: [> | `hex(string)]; 404 | let mediumaquamarine: [> | `hex(string)]; 405 | let mediumblue: [> | `hex(string)]; 406 | let mediumorchid: [> | `hex(string)]; 407 | let mediumpurple: [> | `hex(string)]; 408 | let mediumseagreen: [> | `hex(string)]; 409 | let mediumslateblue: [> | `hex(string)]; 410 | let mediumspringgreen: [> | `hex(string)]; 411 | let mediumturquoise: [> | `hex(string)]; 412 | let mediumvioletred: [> | `hex(string)]; 413 | let midnightblue: [> | `hex(string)]; 414 | let mintcream: [> | `hex(string)]; 415 | let mistyrose: [> | `hex(string)]; 416 | let moccasin: [> | `hex(string)]; 417 | let navajowhite: [> | `hex(string)]; 418 | let navy: [> | `hex(string)]; 419 | let oldlace: [> | `hex(string)]; 420 | let olive: [> | `hex(string)]; 421 | let olivedrab: [> | `hex(string)]; 422 | let orange: [> | `hex(string)]; 423 | let orangered: [> | `hex(string)]; 424 | let orchid: [> | `hex(string)]; 425 | let palegoldenrod: [> | `hex(string)]; 426 | let palegreen: [> | `hex(string)]; 427 | let paleturquoise: [> | `hex(string)]; 428 | let palevioletred: [> | `hex(string)]; 429 | let papayawhip: [> | `hex(string)]; 430 | let peachpuff: [> | `hex(string)]; 431 | let peru: [> | `hex(string)]; 432 | let pink: [> | `hex(string)]; 433 | let plum: [> | `hex(string)]; 434 | let powderblue: [> | `hex(string)]; 435 | let purple: [> | `hex(string)]; 436 | let rebeccapurple: [> | `hex(string)]; 437 | let red: [> | `hex(string)]; 438 | let rosybrown: [> | `hex(string)]; 439 | let royalblue: [> | `hex(string)]; 440 | let saddlebrown: [> | `hex(string)]; 441 | let salmon: [> | `hex(string)]; 442 | let sandybrown: [> | `hex(string)]; 443 | let seagreen: [> | `hex(string)]; 444 | let seashell: [> | `hex(string)]; 445 | let sienna: [> | `hex(string)]; 446 | let silver: [> | `hex(string)]; 447 | let skyblue: [> | `hex(string)]; 448 | let slateblue: [> | `hex(string)]; 449 | let slategray: [> | `hex(string)]; 450 | let slategrey: [> | `hex(string)]; 451 | let snow: [> | `hex(string)]; 452 | let springgreen: [> | `hex(string)]; 453 | let steelblue: [> | `hex(string)]; 454 | let tan: [> | `hex(string)]; 455 | let teal: [> | `hex(string)]; 456 | let thistle: [> | `hex(string)]; 457 | let tomato: [> | `hex(string)]; 458 | let turquoise: [> | `hex(string)]; 459 | let violet: [> | `hex(string)]; 460 | let wheat: [> | `hex(string)]; 461 | let white: [> | `hex(string)]; 462 | let whitesmoke: [> | `hex(string)]; 463 | let yellow: [> | `hex(string)]; 464 | let yellowgreen: [> | `hex(string)]; 465 | }; 466 | module Gradient: { 467 | module Stops: { 468 | type t = list((int, Color.t)); 469 | let toString: t => string; 470 | }; 471 | type t = [ 472 | | `linearGradient(Angle.t, Stops.t) 473 | | `radialGradient(Stops.t) 474 | | `repeatingLinearGradient(Angle.t, Stops.t) 475 | | `repeatingRadialGradient(Stops.t) 476 | ]; 477 | let toString: t => string; 478 | }; 479 | module Url: { 480 | type t = [ | `url(string)]; 481 | let toString: t => string; 482 | }; 483 | module Image: { 484 | type t = [ 485 | | `linearGradient(Angle.t, Gradient.Stops.t) 486 | | `radialGradient(Gradient.Stops.t) 487 | | `repeatingLinearGradient(Angle.t, Gradient.Stops.t) 488 | | `repeatingRadialGradient(Gradient.Stops.t) 489 | | `url(string) 490 | ]; 491 | let toString: t => string; 492 | }; 493 | module Display: { 494 | type t = [ 495 | | `block 496 | | `flex 497 | | `grid 498 | | `inline 499 | | `inlineBlock 500 | | `inlineFlex 501 | | `inlineGrid 502 | | `inlineTable 503 | | `listItem 504 | | `none 505 | | `table 506 | | `tableCaption 507 | | `tableCell 508 | | `tableColumn 509 | | `tableColumnGroup 510 | | `tableFooterGroup 511 | | `tableHeaderGroup 512 | | `tableRow 513 | | `tableRowGroup 514 | ]; 515 | let toString: t => string; 516 | }; 517 | module Position: { 518 | type t = [ | `absolute | `fixed | `relative | `static | `sticky]; 519 | let toString: t => string; 520 | }; 521 | module BorderStyle: { 522 | type t = [ 523 | | `dashed 524 | | `dotted 525 | | `double 526 | | `groove 527 | | `hidden 528 | | `inset 529 | | `none 530 | | `outset 531 | | `ridge 532 | | `solid 533 | ]; 534 | let toString: t => string; 535 | }; 536 | module BorderWidth: { 537 | type t = [ 538 | | `calc( 539 | Calc.op, 540 | [ 541 | | `calc(Calc.op, 'a, 'a) 542 | | `ch(float) 543 | | `cm(float) 544 | | `em(float) 545 | | `ex(float) 546 | | `inch(float) 547 | | `mm(float) 548 | | `n(float) 549 | | `pc(float) 550 | | `pct(float) 551 | | `pt(float) 552 | | `px(int) 553 | | `q(float) 554 | | `rem(float) 555 | | `vh(float) 556 | | `vmax(float) 557 | | `vmin(float) 558 | | `vw(float) 559 | | `zero 560 | ] as 'a, 561 | 'a, 562 | ) 563 | | `ch(float) 564 | | `cm(float) 565 | | `em(float) 566 | | `ex(float) 567 | | `inch(float) 568 | | `medium 569 | | `mm(float) 570 | | `pc(float) 571 | | `pct(float) 572 | | `pt(float) 573 | | `px(int) 574 | | `q(float) 575 | | `rem(float) 576 | | `thick 577 | | `thin 578 | | `vh(float) 579 | | `vmax(float) 580 | | `vmin(float) 581 | | `vw(float) 582 | | `zero 583 | ]; 584 | let toString: t => string; 585 | }; 586 | module Border: { 587 | let toString: (BorderWidth.t, BorderStyle.t, Color.t) => string; 588 | }; 589 | module BackgroundImage: { 590 | type t = [ 591 | | `linearGradient(Angle.t, Gradient.Stops.t) 592 | | `none 593 | | `radialGradient(Gradient.Stops.t) 594 | | `repeatingLinearGradient(Angle.t, Gradient.Stops.t) 595 | | `repeatingRadialGradient(Gradient.Stops.t) 596 | | `url(string) 597 | ]; 598 | let toString: t => string; 599 | }; 600 | module BackgroundAttachment: { 601 | type t = [ | `fixed | `local | `scroll]; 602 | let toString: t => string; 603 | }; 604 | module BackgroundBlendMode: { 605 | type t = [ 606 | | `color 607 | | `colorBurn 608 | | `colorDodge 609 | | `darken 610 | | `difference 611 | | `exclusion 612 | | `hardLight 613 | | `hue 614 | | `lighten 615 | | `luminosity 616 | | `multiply 617 | | `normal 618 | | `overlay 619 | | `saturation 620 | | `screen 621 | | `softLight 622 | ]; 623 | let toString: t => string; 624 | }; 625 | module BackgroundBox: { 626 | type t = [ | `borderBox | `contentBox | `paddingBox]; 627 | let toString: t => string; 628 | }; 629 | module BackgroundRepeat: { 630 | type t = [ | `noRepeat | `repeat | `repeatX | `repeatY | `round | `space]; 631 | let toString: t => string; 632 | let toString2: (t, t) => string; 633 | }; 634 | module BackgroundSize: { 635 | type t = [ 636 | | `auto 637 | | `contain 638 | | `cover 639 | | `size(LengthPercentage.t, LengthPercentage.t) 640 | ]; 641 | let toString: t => string; 642 | }; 643 | module BackgroundPosition: { 644 | module KeywordX: { 645 | type t = [ 646 | | `center 647 | | `centerOffset(LengthPercentage.t) 648 | | `left 649 | | `leftOffset(LengthPercentage.t) 650 | | `right 651 | | `rightOffset(LengthPercentage.t) 652 | ]; 653 | let toString: t => string; 654 | }; 655 | module KeywordY: { 656 | type t = [ 657 | | `bottom 658 | | `bottomOffset(LengthPercentage.t) 659 | | `center 660 | | `centerOffset(LengthPercentage.t) 661 | | `top 662 | | `topOffset(LengthPercentage.t) 663 | ]; 664 | let toString: t => string; 665 | }; 666 | type t = [ 667 | | `initial 668 | | `keywords(KeywordX.t, KeywordY.t) 669 | | `values(LengthPercentage.t, LengthPercentage.t) 670 | ]; 671 | let toString: t => string; 672 | }; 673 | module ListStyleType: { 674 | type t = [ 675 | | `circle 676 | | `decimal 677 | | `decimalLeadingZero 678 | | `disc 679 | | `lowerAlpha 680 | | `lowerGreek 681 | | `lowerLatin 682 | | `lowerRoman 683 | | `none 684 | | `square 685 | | `upperAlpha 686 | | `upperLatin 687 | | `upperRoman 688 | ]; 689 | let toString: t => string; 690 | }; 691 | module ListStylePosition: { 692 | type t = [ | `inside | `outside]; 693 | let toString: t => string; 694 | }; 695 | module ListStyleImage: { 696 | type t = [ | `none | `url(string)]; 697 | let toString: t => string; 698 | }; 699 | module ListStyle: { 700 | let toString: 701 | (ListStyleType.t, ListStylePosition.t, ListStyleImage.t) => string; 702 | }; 703 | module BoxSizing: { 704 | type t = [ | `borderBox | `contentBox]; 705 | let toString: t => string; 706 | }; 707 | module TableLayout: { 708 | type t = [ | `auto | `fixed]; 709 | let toString: t => string; 710 | }; 711 | module BorderCollapse: { 712 | type t = [ | `collapse | `separate]; 713 | let toString: t => string; 714 | }; 715 | module Float: { 716 | type t = [ | `left | `none | `right]; 717 | let toString: t => string; 718 | }; 719 | module Clear: { 720 | type t = [ | `both | `left | `right]; 721 | let toString: t => string; 722 | }; 723 | module Overflow: { 724 | type t = [ | `auto | `hidden | `scroll | `visible]; 725 | let toString: t => string; 726 | }; 727 | module FontStyle: { 728 | type t = [ | `italic | `normal | `oblique]; 729 | let toString: t => string; 730 | }; 731 | module FontVariant: { 732 | type t = [ | `allSmallCaps | `none | `normal | `smallCaps]; 733 | let toString: t => string; 734 | }; 735 | module FontKerning: { 736 | type t = [ | `auto | `none | `normal]; 737 | let toString: t => string; 738 | }; 739 | module FontStretch: { 740 | type t = [ 741 | | `condensed 742 | | `expanded 743 | | `extraCondensed 744 | | `extraExpanded 745 | | `normal 746 | | `semiCondensed 747 | | `semiExpanded 748 | | `ultraCondensed 749 | | `ultraExpanded 750 | ]; 751 | let toString: t => string; 752 | }; 753 | module FontSrc: { 754 | type src = [ | `local(string) | `url(string)]; 755 | type format = [ | `eot | `svg | `ttf | `woff | `woff2]; 756 | let toString: (~format: format=?, src) => string; 757 | }; 758 | module LineHeight: { 759 | type t = [ 760 | | `abs(float) 761 | | `calc( 762 | Calc.op, 763 | [ 764 | | `calc(Calc.op, 'a, 'a) 765 | | `ch(float) 766 | | `cm(float) 767 | | `em(float) 768 | | `ex(float) 769 | | `inch(float) 770 | | `mm(float) 771 | | `n(float) 772 | | `pc(float) 773 | | `pct(float) 774 | | `pt(float) 775 | | `px(int) 776 | | `q(float) 777 | | `rem(float) 778 | | `vh(float) 779 | | `vmax(float) 780 | | `vmin(float) 781 | | `vw(float) 782 | | `zero 783 | ] as 'a, 784 | 'a, 785 | ) 786 | | `ch(float) 787 | | `cm(float) 788 | | `em(float) 789 | | `ex(float) 790 | | `inch(float) 791 | | `mm(float) 792 | | `normal 793 | | `pc(float) 794 | | `pct(float) 795 | | `pt(float) 796 | | `px(int) 797 | | `q(float) 798 | | `rem(float) 799 | | `vh(float) 800 | | `vmax(float) 801 | | `vmin(float) 802 | | `vw(float) 803 | | `zero 804 | ]; 805 | let toString: t => string; 806 | }; 807 | module LetterSpacing: { 808 | type t = [ 809 | | `calc( 810 | Calc.op, 811 | [ 812 | | `calc(Calc.op, 'a, 'a) 813 | | `ch(float) 814 | | `cm(float) 815 | | `em(float) 816 | | `ex(float) 817 | | `inch(float) 818 | | `mm(float) 819 | | `n(float) 820 | | `pc(float) 821 | | `pt(float) 822 | | `px(int) 823 | | `q(float) 824 | | `rem(float) 825 | | `vh(float) 826 | | `vmax(float) 827 | | `vmin(float) 828 | | `vw(float) 829 | | `zero 830 | ] as 'a, 831 | 'a, 832 | ) 833 | | `ch(float) 834 | | `cm(float) 835 | | `em(float) 836 | | `ex(float) 837 | | `inch(float) 838 | | `mm(float) 839 | | `normal 840 | | `pc(float) 841 | | `pt(float) 842 | | `px(int) 843 | | `q(float) 844 | | `rem(float) 845 | | `vh(float) 846 | | `vmax(float) 847 | | `vmin(float) 848 | | `vw(float) 849 | | `zero 850 | ]; 851 | let toString: t => string; 852 | }; 853 | module Hyphens: { 854 | type t = [ | `auto | `manual | `none]; 855 | let toString: t => string; 856 | }; 857 | module TextAlign: { 858 | type t = [ | `center | `justify | `left | `right]; 859 | let toString: t => string; 860 | }; 861 | module TextDecorationLine: { 862 | type t = [ | `lineThrough | `none | `overline | `underline]; 863 | let toString: t => string; 864 | }; 865 | module TextDecorationStyle: { 866 | type t = [ | `dashed | `dotted | `double | `solid | `wavy]; 867 | let toString: t => string; 868 | }; 869 | module TextOverflow: { 870 | type t = [ | `clip | `ellipsis]; 871 | let toString: t => string; 872 | }; 873 | module TextShadow: { 874 | let toString: 875 | (~x: Length.t, ~y: Length.t, ~blur: Length.t, Color.t) => string; 876 | }; 877 | module TextTransform: { 878 | type t = [ | `capitalize | `lowercase | `none | `uppercase]; 879 | let toString: t => string; 880 | }; 881 | module UserSelect: { 882 | type t = [ | `all | `auto | `none | `text]; 883 | let toString: t => string; 884 | }; 885 | module VerticalAlign: { 886 | type t = [ 887 | | `baseline 888 | | `bottom 889 | | `calc( 890 | Calc.op, 891 | [ 892 | | `calc(Calc.op, 'a, 'a) 893 | | `ch(float) 894 | | `cm(float) 895 | | `em(float) 896 | | `ex(float) 897 | | `inch(float) 898 | | `mm(float) 899 | | `n(float) 900 | | `pc(float) 901 | | `pct(float) 902 | | `pt(float) 903 | | `px(int) 904 | | `q(float) 905 | | `rem(float) 906 | | `vh(float) 907 | | `vmax(float) 908 | | `vmin(float) 909 | | `vw(float) 910 | | `zero 911 | ] as 'a, 912 | 'a, 913 | ) 914 | | `ch(float) 915 | | `cm(float) 916 | | `em(float) 917 | | `ex(float) 918 | | `inch(float) 919 | | `middle 920 | | `mm(float) 921 | | `pc(float) 922 | | `pct(float) 923 | | `pt(float) 924 | | `px(int) 925 | | `q(float) 926 | | `rem(float) 927 | | `sub 928 | | `super 929 | | `textBottom 930 | | `textTop 931 | | `top 932 | | `vh(float) 933 | | `vmax(float) 934 | | `vmin(float) 935 | | `vw(float) 936 | | `zero 937 | ]; 938 | let toString: t => string; 939 | }; 940 | module WhiteSpace: { 941 | type t = [ | `normal | `nowrap | `pre | `preLine | `preWrap]; 942 | let toString: t => string; 943 | }; 944 | module WordBreak: { 945 | type t = [ | `breakAll | `keepAll | `normal]; 946 | let toString: t => string; 947 | }; 948 | module WordSpacing: { 949 | type t = [ 950 | | `calc( 951 | Calc.op, 952 | [ 953 | | `calc(Calc.op, 'a, 'a) 954 | | `ch(float) 955 | | `cm(float) 956 | | `em(float) 957 | | `ex(float) 958 | | `inch(float) 959 | | `mm(float) 960 | | `n(float) 961 | | `pc(float) 962 | | `pt(float) 963 | | `px(int) 964 | | `q(float) 965 | | `rem(float) 966 | | `vh(float) 967 | | `vmax(float) 968 | | `vmin(float) 969 | | `vw(float) 970 | | `zero 971 | ] as 'a, 972 | 'a, 973 | ) 974 | | `ch(float) 975 | | `cm(float) 976 | | `em(float) 977 | | `ex(float) 978 | | `inch(float) 979 | | `mm(float) 980 | | `normal 981 | | `pc(float) 982 | | `pt(float) 983 | | `px(int) 984 | | `q(float) 985 | | `rem(float) 986 | | `vh(float) 987 | | `vmax(float) 988 | | `vmin(float) 989 | | `vw(float) 990 | | `zero 991 | ]; 992 | let toString: t => string; 993 | }; 994 | module WordWrap: { 995 | type t = [ | `breakWord | `normal]; 996 | let toString: t => string; 997 | }; 998 | module Direction: { 999 | type t = [ | `ltr | `rtl]; 1000 | let toString: t => string; 1001 | }; 1002 | module OutlineStyle: { 1003 | type t = [ 1004 | | `auto 1005 | | `dashed 1006 | | `dotted 1007 | | `double 1008 | | `groove 1009 | | `hidden 1010 | | `inset 1011 | | `none 1012 | | `outset 1013 | | `ridge 1014 | | `solid 1015 | ]; 1016 | let toString: t => string; 1017 | }; 1018 | module Outline: {let toString: (Length.t, OutlineStyle.t, Color.t) => string;}; 1019 | module BoxShadow: { 1020 | let toString: 1021 | ( 1022 | ~x: Length.t, 1023 | ~y: Length.t, 1024 | ~blur: Length.t, 1025 | ~spread: Length.t, 1026 | ~inset: bool, 1027 | Color.t 1028 | ) => 1029 | string; 1030 | }; 1031 | module Visibility: { 1032 | type t = [ | `collapse | `hidden | `visible]; 1033 | let toString: t => string; 1034 | }; 1035 | module Cursor: { 1036 | type t = [ 1037 | | `alias 1038 | | `allScroll 1039 | | `auto 1040 | | `cell 1041 | | `colResize 1042 | | `contextMenu 1043 | | `copy 1044 | | `crosshair 1045 | | `default 1046 | | `eResize 1047 | | `ewResize 1048 | | `grab 1049 | | `grabbing 1050 | | `help 1051 | | `move 1052 | | `nResize 1053 | | `neResize 1054 | | `neswResize 1055 | | `noDrop 1056 | | `none 1057 | | `notAllowed 1058 | | `nsResize 1059 | | `nwResize 1060 | | `nwseResize 1061 | | `pointer 1062 | | `progress 1063 | | `rowResize 1064 | | `sResize 1065 | | `seResize 1066 | | `swResize 1067 | | `text 1068 | | `url(string) 1069 | | `verticalText 1070 | | `wResize 1071 | | `wait 1072 | | `zoomIn 1073 | | `zoomOut 1074 | ]; 1075 | let toString: t => string; 1076 | }; 1077 | module PointerEvents: { 1078 | type t = [ | `auto | `none]; 1079 | let toString: t => string; 1080 | }; 1081 | module Timing: { 1082 | type t = [ | `ms(int) | `s(float) | `zero]; 1083 | let toString: t => string; 1084 | }; 1085 | module TimingFunction: { 1086 | type t = [ 1087 | | `cubicBezier(float, float, float, float) 1088 | | `ease 1089 | | `easeIn 1090 | | `easeInOut 1091 | | `easeOut 1092 | | `linear 1093 | | `stepEnd 1094 | | `stepStart 1095 | | `steps(int, [ | `end_ | `start]) 1096 | ]; 1097 | let toString: t => string; 1098 | }; 1099 | module TransitionProperty: {type t = string;}; 1100 | module TransitionDuration: {type t = Timing.t;}; 1101 | module TransitionDelay: {type t = Timing.t;}; 1102 | module TransitionTimingFunction: {type t = TimingFunction.t;}; 1103 | module Transition: { 1104 | let toString: 1105 | ( 1106 | ~property: TransitionProperty.t, 1107 | ~duration: TransitionDuration.t, 1108 | ~delay: TransitionDelay.t, 1109 | ~timingFunction: TransitionTimingFunction.t 1110 | ) => 1111 | string; 1112 | }; 1113 | module Transform: { 1114 | type t = [ 1115 | | `matrix(float, float, float, float, float, float) 1116 | | `matrix3d( 1117 | float, 1118 | float, 1119 | float, 1120 | float, 1121 | float, 1122 | float, 1123 | float, 1124 | float, 1125 | float, 1126 | float, 1127 | float, 1128 | float, 1129 | float, 1130 | float, 1131 | float, 1132 | float, 1133 | ) 1134 | | `none 1135 | | `perspective(Length.t) 1136 | | `rotate(Angle.t) 1137 | | `rotate3d(float, float, float, Angle.t) 1138 | | `rotateX(Angle.t) 1139 | | `rotateY(Angle.t) 1140 | | `rotateZ(Angle.t) 1141 | | `scale(float) 1142 | | `scale3d(float, float, float) 1143 | | `scaleX(float) 1144 | | `scaleXY(float, float) 1145 | | `scaleY(float) 1146 | | `scaleZ(float) 1147 | | `skew(Angle.t, Angle.t) 1148 | | `skewX(Angle.t) 1149 | | `skewY(Angle.t) 1150 | | `translate(LengthPercentage.t, LengthPercentage.t) 1151 | | `translate3d(LengthPercentage.t, LengthPercentage.t, LengthPercentage.t) 1152 | | `translateX(LengthPercentage.t) 1153 | | `translateY(LengthPercentage.t) 1154 | | `translateZ(LengthPercentage.t) 1155 | ]; 1156 | let toString: t => string; 1157 | }; 1158 | module TransformStyle: { 1159 | type t = [ | `flat | `preserve3d]; 1160 | let toString: t => string; 1161 | }; 1162 | module Perspective: { 1163 | type t = [ 1164 | | `calc( 1165 | Calc.op, 1166 | [ 1167 | | `calc(Calc.op, 'a, 'a) 1168 | | `ch(float) 1169 | | `cm(float) 1170 | | `em(float) 1171 | | `ex(float) 1172 | | `inch(float) 1173 | | `mm(float) 1174 | | `n(float) 1175 | | `pc(float) 1176 | | `pt(float) 1177 | | `px(int) 1178 | | `q(float) 1179 | | `rem(float) 1180 | | `vh(float) 1181 | | `vmax(float) 1182 | | `vmin(float) 1183 | | `vw(float) 1184 | | `zero 1185 | ] as 'a, 1186 | 'a, 1187 | ) 1188 | | `ch(float) 1189 | | `cm(float) 1190 | | `em(float) 1191 | | `ex(float) 1192 | | `inch(float) 1193 | | `mm(float) 1194 | | `none 1195 | | `pc(float) 1196 | | `pt(float) 1197 | | `px(int) 1198 | | `q(float) 1199 | | `rem(float) 1200 | | `vh(float) 1201 | | `vmax(float) 1202 | | `vmin(float) 1203 | | `vw(float) 1204 | | `zero 1205 | ]; 1206 | let toString: t => string; 1207 | }; 1208 | module AnimationDirection: { 1209 | type t = [ | `alternate | `alternateReverse | `normal | `reverse]; 1210 | let toString: t => string; 1211 | }; 1212 | module AnimationFillMode: { 1213 | type t = [ | `backwards | `both | `forwards | `none]; 1214 | let toString: t => string; 1215 | }; 1216 | module AnimationIterationCount: { 1217 | type t = [ | `i(int) | `infinite]; 1218 | let toString: t => string; 1219 | }; 1220 | module AnimationPlayState: { 1221 | type t = [ | `paused | `running]; 1222 | let toString: t => string; 1223 | }; 1224 | module AnimationName: {type t = string;}; 1225 | module AnimationDuration: {type t = Timing.t;}; 1226 | module AnimationDelay: {type t = Timing.t;}; 1227 | module AnimationTimingFunction: {type t = TimingFunction.t;}; 1228 | module Animation: { 1229 | let toString: 1230 | ( 1231 | ~name: AnimationName.t, 1232 | ~duration: AnimationDuration.t, 1233 | ~delay: AnimationDelay.t, 1234 | ~direction: AnimationDirection.t, 1235 | ~timingFunction: AnimationTimingFunction.t, 1236 | ~fillMode: AnimationFillMode.t, 1237 | ~playState: AnimationPlayState.t, 1238 | ~iterationCount: AnimationIterationCount.t 1239 | ) => 1240 | string; 1241 | }; 1242 | module FillRule: { 1243 | type t = [ | `evenodd | `nonzero]; 1244 | let toString: t => string; 1245 | }; 1246 | module StrokeLinecap: { 1247 | type t = [ | `butt | `round | `square]; 1248 | let toString: t => string; 1249 | }; 1250 | module StrokeLinejoin: { 1251 | type t = [ | `bevel | `miter | `round]; 1252 | let toString: t => string; 1253 | }; 1254 | module FilterFunction: { 1255 | type t = [ 1256 | | `blur(Length.t) 1257 | | `brightness(NumberPercentage.t) 1258 | | `contrast(NumberPercentage.t) 1259 | | `dropShadow(Length.t, Length.t, Length.t, Color.t) 1260 | | `grayscale(NumberPercentage.t) 1261 | | `hueRotate(Angle.t) 1262 | | `invert(NumberPercentage.t) 1263 | | `opacity(NumberPercentage.t) 1264 | | `saturate(NumberPercentage.t) 1265 | | `sepia(NumberPercentage.t) 1266 | ]; 1267 | let toString: t => string; 1268 | }; 1269 | module Filter: { 1270 | type t = [ 1271 | | `blur(Length.t) 1272 | | `brightness(NumberPercentage.t) 1273 | | `contrast(NumberPercentage.t) 1274 | | `dropShadow(Length.t, Length.t, Length.t, Color.t) 1275 | | `grayscale(NumberPercentage.t) 1276 | | `hueRotate(Angle.t) 1277 | | `invert(NumberPercentage.t) 1278 | | `none 1279 | | `opacity(NumberPercentage.t) 1280 | | `saturate(NumberPercentage.t) 1281 | | `sepia(NumberPercentage.t) 1282 | | `url(string) 1283 | ]; 1284 | let toString: t => string; 1285 | }; 1286 | module Appearance: { 1287 | type t = [ | `button | `checkbox | `none | `radio]; 1288 | let toString: t => string; 1289 | }; 1290 | module Flex: { 1291 | module Flex: { 1292 | type t = [ | `auto | `none | `some(float, float, LengthPercentageAuto.t)]; 1293 | let toString: t => string; 1294 | }; 1295 | module Direction: { 1296 | type t = [ | `column | `columnReverse | `row | `rowReverse]; 1297 | let toString: t => string; 1298 | }; 1299 | module Wrap: { 1300 | type t = [ | `nowrap | `wrap | `wrapReverse]; 1301 | let toString: t => string; 1302 | }; 1303 | module Flow: {let toString: (Direction.t, Wrap.t) => string;}; 1304 | }; 1305 | module Grid: { 1306 | module Flex: { 1307 | type t = [ | `fr(float)]; 1308 | let toString: t => string; 1309 | }; 1310 | module MinMax: { 1311 | type t = [ | `minmax(min, max)] 1312 | and min = [ 1313 | | `auto 1314 | | `calc( 1315 | Calc.op, 1316 | [ 1317 | | `calc(Calc.op, 'a, 'a) 1318 | | `ch(float) 1319 | | `cm(float) 1320 | | `em(float) 1321 | | `ex(float) 1322 | | `inch(float) 1323 | | `mm(float) 1324 | | `n(float) 1325 | | `pc(float) 1326 | | `pct(float) 1327 | | `pt(float) 1328 | | `px(int) 1329 | | `q(float) 1330 | | `rem(float) 1331 | | `vh(float) 1332 | | `vmax(float) 1333 | | `vmin(float) 1334 | | `vw(float) 1335 | | `zero 1336 | ] as 'a, 1337 | 'a, 1338 | ) 1339 | | `ch(float) 1340 | | `cm(float) 1341 | | `em(float) 1342 | | `ex(float) 1343 | | `inch(float) 1344 | | `maxContent 1345 | | `minContent 1346 | | `mm(float) 1347 | | `pc(float) 1348 | | `pct(float) 1349 | | `pt(float) 1350 | | `px(int) 1351 | | `q(float) 1352 | | `rem(float) 1353 | | `vh(float) 1354 | | `vmax(float) 1355 | | `vmin(float) 1356 | | `vw(float) 1357 | | `zero 1358 | ] 1359 | and max = [ 1360 | | `auto 1361 | | `calc( 1362 | Calc.op, 1363 | [ 1364 | | `calc(Calc.op, 'a, 'a) 1365 | | `ch(float) 1366 | | `cm(float) 1367 | | `em(float) 1368 | | `ex(float) 1369 | | `inch(float) 1370 | | `mm(float) 1371 | | `n(float) 1372 | | `pc(float) 1373 | | `pct(float) 1374 | | `pt(float) 1375 | | `px(int) 1376 | | `q(float) 1377 | | `rem(float) 1378 | | `vh(float) 1379 | | `vmax(float) 1380 | | `vmin(float) 1381 | | `vw(float) 1382 | | `zero 1383 | ] as 'a, 1384 | 'a, 1385 | ) 1386 | | `ch(float) 1387 | | `cm(float) 1388 | | `em(float) 1389 | | `ex(float) 1390 | | `fr(float) 1391 | | `inch(float) 1392 | | `maxContent 1393 | | `minContent 1394 | | `mm(float) 1395 | | `pc(float) 1396 | | `pct(float) 1397 | | `pt(float) 1398 | | `px(int) 1399 | | `q(float) 1400 | | `rem(float) 1401 | | `vh(float) 1402 | | `vmax(float) 1403 | | `vmin(float) 1404 | | `vw(float) 1405 | | `zero 1406 | ]; 1407 | let minToString: min => string; 1408 | let maxToString: max => string; 1409 | let toString: t => string; 1410 | }; 1411 | module FitContent: { 1412 | type t = [ | `fitContent(LengthPercentage.t)]; 1413 | let toString: t => string; 1414 | }; 1415 | module Repeat: { 1416 | type t = [ | `repeat(value, list(trackList))] 1417 | and value = [ | `autoFill | `autoFit | `n(int)] 1418 | and trackList = [ 1419 | | `auto 1420 | | `calc( 1421 | Calc.op, 1422 | [ 1423 | | `calc(Calc.op, 'a, 'a) 1424 | | `ch(float) 1425 | | `cm(float) 1426 | | `em(float) 1427 | | `ex(float) 1428 | | `inch(float) 1429 | | `mm(float) 1430 | | `n(float) 1431 | | `pc(float) 1432 | | `pct(float) 1433 | | `pt(float) 1434 | | `px(int) 1435 | | `q(float) 1436 | | `rem(float) 1437 | | `vh(float) 1438 | | `vmax(float) 1439 | | `vmin(float) 1440 | | `vw(float) 1441 | | `zero 1442 | ] as 'a, 1443 | 'a, 1444 | ) 1445 | | `ch(float) 1446 | | `cm(float) 1447 | | `em(float) 1448 | | `ex(float) 1449 | | `fr(float) 1450 | | `inch(float) 1451 | | `maxContent 1452 | | `minContent 1453 | | `minmax(MinMax.min, MinMax.max) 1454 | | `mm(float) 1455 | | `pc(float) 1456 | | `pct(float) 1457 | | `pt(float) 1458 | | `px(int) 1459 | | `q(float) 1460 | | `rem(float) 1461 | | `vh(float) 1462 | | `vmax(float) 1463 | | `vmin(float) 1464 | | `vw(float) 1465 | | `zero 1466 | ]; 1467 | let valueToString: value => string; 1468 | let trackListToString: trackList => string; 1469 | let toString: t => string; 1470 | }; 1471 | module AutoRows: { 1472 | type t = [ 1473 | | `auto 1474 | | `calc( 1475 | Calc.op, 1476 | [ 1477 | | `calc(Calc.op, 'a, 'a) 1478 | | `ch(float) 1479 | | `cm(float) 1480 | | `em(float) 1481 | | `ex(float) 1482 | | `inch(float) 1483 | | `mm(float) 1484 | | `n(float) 1485 | | `pc(float) 1486 | | `pct(float) 1487 | | `pt(float) 1488 | | `px(int) 1489 | | `q(float) 1490 | | `rem(float) 1491 | | `vh(float) 1492 | | `vmax(float) 1493 | | `vmin(float) 1494 | | `vw(float) 1495 | | `zero 1496 | ] as 'a, 1497 | 'a, 1498 | ) 1499 | | `ch(float) 1500 | | `cm(float) 1501 | | `em(float) 1502 | | `ex(float) 1503 | | `fr(float) 1504 | | `inch(float) 1505 | | `maxContent 1506 | | `minContent 1507 | | `minmax(MinMax.min, MinMax.max) 1508 | | `mm(float) 1509 | | `pc(float) 1510 | | `pct(float) 1511 | | `pt(float) 1512 | | `px(int) 1513 | | `q(float) 1514 | | `rem(float) 1515 | | `vh(float) 1516 | | `vmax(float) 1517 | | `vmin(float) 1518 | | `vw(float) 1519 | | `zero 1520 | ]; 1521 | let toString: t => string; 1522 | }; 1523 | module AutoColumns: { 1524 | type t = [ 1525 | | `auto 1526 | | `calc( 1527 | Calc.op, 1528 | [ 1529 | | `calc(Calc.op, 'a, 'a) 1530 | | `ch(float) 1531 | | `cm(float) 1532 | | `em(float) 1533 | | `ex(float) 1534 | | `inch(float) 1535 | | `mm(float) 1536 | | `n(float) 1537 | | `pc(float) 1538 | | `pct(float) 1539 | | `pt(float) 1540 | | `px(int) 1541 | | `q(float) 1542 | | `rem(float) 1543 | | `vh(float) 1544 | | `vmax(float) 1545 | | `vmin(float) 1546 | | `vw(float) 1547 | | `zero 1548 | ] as 'a, 1549 | 'a, 1550 | ) 1551 | | `ch(float) 1552 | | `cm(float) 1553 | | `em(float) 1554 | | `ex(float) 1555 | | `fitContent(LengthPercentage.t) 1556 | | `fr(float) 1557 | | `inch(float) 1558 | | `maxContent 1559 | | `minContent 1560 | | `minmax(MinMax.min, MinMax.max) 1561 | | `mm(float) 1562 | | `pc(float) 1563 | | `pct(float) 1564 | | `pt(float) 1565 | | `px(int) 1566 | | `q(float) 1567 | | `rem(float) 1568 | | `vh(float) 1569 | | `vmax(float) 1570 | | `vmin(float) 1571 | | `vw(float) 1572 | | `zero 1573 | ]; 1574 | let toString: t => string; 1575 | }; 1576 | module Template: { 1577 | type t = [ | `list(list(value)) | `none] 1578 | and value = [ 1579 | | `auto 1580 | | `calc( 1581 | Calc.op, 1582 | [ 1583 | | `calc(Calc.op, 'a, 'a) 1584 | | `ch(float) 1585 | | `cm(float) 1586 | | `em(float) 1587 | | `ex(float) 1588 | | `inch(float) 1589 | | `mm(float) 1590 | | `n(float) 1591 | | `pc(float) 1592 | | `pct(float) 1593 | | `pt(float) 1594 | | `px(int) 1595 | | `q(float) 1596 | | `rem(float) 1597 | | `vh(float) 1598 | | `vmax(float) 1599 | | `vmin(float) 1600 | | `vw(float) 1601 | | `zero 1602 | ] as 'a, 1603 | 'a, 1604 | ) 1605 | | `ch(float) 1606 | | `cm(float) 1607 | | `em(float) 1608 | | `ex(float) 1609 | | `fitContent(LengthPercentage.t) 1610 | | `fr(float) 1611 | | `inch(float) 1612 | | `maxContent 1613 | | `minContent 1614 | | `minmax(MinMax.min, MinMax.max) 1615 | | `mm(float) 1616 | | `pc(float) 1617 | | `pct(float) 1618 | | `pt(float) 1619 | | `px(int) 1620 | | `q(float) 1621 | | `rem(float) 1622 | | `repeat(Repeat.value, list(Repeat.trackList)) 1623 | | `vh(float) 1624 | | `vmax(float) 1625 | | `vmin(float) 1626 | | `vw(float) 1627 | | `zero 1628 | ]; 1629 | let valueToString: value => string; 1630 | let toString: t => string; 1631 | }; 1632 | module Line: { 1633 | type t = [ 1634 | | `auto 1635 | | `ident(string) 1636 | | `n(int) 1637 | | `nIdent(int, string) 1638 | | `span([ | `ident(string) | `n(int) | `nIdent(int, string)]) 1639 | ]; 1640 | let toString: t => string; 1641 | }; 1642 | module Gap: { 1643 | type t = [ 1644 | | `calc( 1645 | Calc.op, 1646 | [ 1647 | | `calc(Calc.op, 'a, 'a) 1648 | | `ch(float) 1649 | | `cm(float) 1650 | | `em(float) 1651 | | `ex(float) 1652 | | `inch(float) 1653 | | `mm(float) 1654 | | `n(float) 1655 | | `pc(float) 1656 | | `pct(float) 1657 | | `pt(float) 1658 | | `px(int) 1659 | | `q(float) 1660 | | `rem(float) 1661 | | `vh(float) 1662 | | `vmax(float) 1663 | | `vmin(float) 1664 | | `vw(float) 1665 | | `zero 1666 | ] as 'a, 1667 | 'a, 1668 | ) 1669 | | `ch(float) 1670 | | `cm(float) 1671 | | `em(float) 1672 | | `ex(float) 1673 | | `inch(float) 1674 | | `mm(float) 1675 | | `normal 1676 | | `pc(float) 1677 | | `pct(float) 1678 | | `pt(float) 1679 | | `px(int) 1680 | | `q(float) 1681 | | `rem(float) 1682 | | `vh(float) 1683 | | `vmax(float) 1684 | | `vmin(float) 1685 | | `vw(float) 1686 | | `zero 1687 | ]; 1688 | let toString: t => string; 1689 | }; 1690 | module TemplateAreas: { 1691 | type t = [ | `areas(list(string)) | `none]; 1692 | let toString: t => string; 1693 | }; 1694 | module AutoFlow: { 1695 | type t = [ | `column | `columnDense | `row | `rowDense]; 1696 | let toString: t => string; 1697 | }; 1698 | }; 1699 | module AlignItems: { 1700 | type t = [ 1701 | | `baseline 1702 | | `center 1703 | | `end_ 1704 | | `firstBaseline 1705 | | `flexEnd 1706 | | `flexStart 1707 | | `lastBaseline 1708 | | `normal 1709 | | `selfEnd 1710 | | `selfStart 1711 | | `start 1712 | | `stretch 1713 | ]; 1714 | let toString: t => string; 1715 | }; 1716 | module AlignSelf: { 1717 | type t = [ 1718 | | `auto 1719 | | `baseline 1720 | | `center 1721 | | `end_ 1722 | | `firstBaseline 1723 | | `flexEnd 1724 | | `flexStart 1725 | | `lastBaseline 1726 | | `normal 1727 | | `selfEnd 1728 | | `selfStart 1729 | | `start 1730 | | `stretch 1731 | ]; 1732 | let toString: t => string; 1733 | }; 1734 | module AlignContent: { 1735 | type t = [ 1736 | | `baseline 1737 | | `center 1738 | | `end_ 1739 | | `firstBaseline 1740 | | `flexEnd 1741 | | `flexStart 1742 | | `lastBaseline 1743 | | `normal 1744 | | `spaceAround 1745 | | `spaceBetween 1746 | | `spaceEvenly 1747 | | `start 1748 | | `stretch 1749 | ]; 1750 | let toString: t => string; 1751 | }; 1752 | module JustifyItems: { 1753 | type t = [ 1754 | | `baseline 1755 | | `center 1756 | | `end_ 1757 | | `firstBaseline 1758 | | `flexEnd 1759 | | `flexStart 1760 | | `lastBaseline 1761 | | `left 1762 | | `normal 1763 | | `right 1764 | | `selfEnd 1765 | | `selfStart 1766 | | `start 1767 | | `stretch 1768 | ]; 1769 | let toString: t => string; 1770 | }; 1771 | module JustifySelf: { 1772 | type t = [ 1773 | | `auto 1774 | | `baseline 1775 | | `center 1776 | | `end_ 1777 | | `firstBaseline 1778 | | `flexEnd 1779 | | `flexStart 1780 | | `lastBaseline 1781 | | `left 1782 | | `normal 1783 | | `right 1784 | | `selfEnd 1785 | | `selfStart 1786 | | `start 1787 | | `stretch 1788 | ]; 1789 | let toString: t => string; 1790 | }; 1791 | module JustifyContent: { 1792 | type t = [ 1793 | | `center 1794 | | `end_ 1795 | | `flexEnd 1796 | | `flexStart 1797 | | `left 1798 | | `normal 1799 | | `right 1800 | | `spaceAround 1801 | | `spaceBetween 1802 | | `spaceEvenly 1803 | | `start 1804 | | `stretch 1805 | ]; 1806 | let toString: t => string; 1807 | }; 1808 | module BasicShape: { 1809 | module ShapePosition: { 1810 | type t = [ | `keyword(Position.t) | `value(LengthPercentage.t)]; 1811 | let toString: t => string; 1812 | }; 1813 | module FillRule: { 1814 | type t = [ | `evenodd | `nonzero]; 1815 | let toString: t => string; 1816 | }; 1817 | module ShapeRadius: { 1818 | type t = [ 1819 | | `calc( 1820 | Calc.op, 1821 | [ 1822 | | `calc(Calc.op, 'a, 'a) 1823 | | `ch(float) 1824 | | `cm(float) 1825 | | `em(float) 1826 | | `ex(float) 1827 | | `inch(float) 1828 | | `mm(float) 1829 | | `n(float) 1830 | | `pc(float) 1831 | | `pct(float) 1832 | | `pt(float) 1833 | | `px(int) 1834 | | `q(float) 1835 | | `rem(float) 1836 | | `vh(float) 1837 | | `vmax(float) 1838 | | `vmin(float) 1839 | | `vw(float) 1840 | | `zero 1841 | ] as 'a, 1842 | 'a, 1843 | ) 1844 | | `ch(float) 1845 | | `closestSide 1846 | | `cm(float) 1847 | | `em(float) 1848 | | `ex(float) 1849 | | `farthestSide 1850 | | `inch(float) 1851 | | `mm(float) 1852 | | `pc(float) 1853 | | `pct(float) 1854 | | `pt(float) 1855 | | `px(int) 1856 | | `q(float) 1857 | | `rem(float) 1858 | | `vh(float) 1859 | | `vmax(float) 1860 | | `vmin(float) 1861 | | `vw(float) 1862 | | `zero 1863 | ]; 1864 | let toString: t => string; 1865 | }; 1866 | type t = [ 1867 | | `circle(ShapeRadius.t, option((ShapePosition.t, ShapePosition.t))) 1868 | | `ellipse( 1869 | ShapeRadius.t, 1870 | ShapeRadius.t, 1871 | option((ShapePosition.t, ShapePosition.t)), 1872 | ) 1873 | | `inset( 1874 | LengthPercentage.t, 1875 | LengthPercentage.t, 1876 | LengthPercentage.t, 1877 | LengthPercentage.t, 1878 | option(LengthPercentage.t), 1879 | ) 1880 | | `path(string, option(FillRule.t)) 1881 | | `polygon( 1882 | list((LengthPercentage.t, LengthPercentage.t)), 1883 | option(FillRule.t), 1884 | ) 1885 | ]; 1886 | let toString: t => string; 1887 | }; 1888 | module GeometryBox: { 1889 | type t = [ 1890 | | `borderBox 1891 | | `contentBox 1892 | | `fillBox 1893 | | `marginBox 1894 | | `paddingBox 1895 | | `strokeBox 1896 | | `viewBox 1897 | ]; 1898 | let toString: t => string; 1899 | }; 1900 | module ClipPath: { 1901 | type t = [ 1902 | | `box(GeometryBox.t) 1903 | | `boxShape(GeometryBox.t, BasicShape.t) 1904 | | `initial 1905 | | `none 1906 | | `shape(BasicShape.t) 1907 | | `unset 1908 | | `url(Url.t) 1909 | ]; 1910 | let toString: t => string; 1911 | }; 1912 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | bs-platform@7.0.1: 6 | version "7.0.1" 7 | resolved "https://registry.yarnpkg.com/bs-platform/-/bs-platform-7.0.1.tgz#1d7b0ef6088b998dceee5db74a7cd8f01c20a3bd" 8 | integrity sha512-UjStdtHhbtC/l6vKJ1XRDqrPk7rFf5PLYHtRX3akDXEYVnTbN36z0g4DEr5mU8S0N945e33HYts9x+i7hKKpZQ== 9 | --------------------------------------------------------------------------------