From ba28d239ec2669139056a43b6a976e026e8908e7 Mon Sep 17 00:00:00 2001 From: Zach Wegrzyniak Date: Fri, 23 Nov 2018 21:04:22 +0100 Subject: [PATCH 1/2] add grid repeat for track lengths #100 --- example/test.re | 17 ++++++++++++++++ src/Css.re | 53 +++++++++++++++++++++++++++++++++++++++++-------- src/Css.rei | 36 ++++++++++++++++----------------- 3 files changed, 79 insertions(+), 27 deletions(-) diff --git a/example/test.re b/example/test.re index c348ccf..a695223 100644 --- a/example/test.re +++ b/example/test.re @@ -512,6 +512,23 @@ let tests = {text("grid auto direction row")} +
px, `repeat(`n(2), 60->px)]) + ]) + )> +
+ {text("Grid track repeat")} +
+
+ {text("two times")} +
+
+ {text("three times")} +
+
css = "css"; - [@bs.module "emotion"] - external injectGlobal: Js.Json.t => unit = ""; + [@bs.module "emotion"] external injectGlobal: Js.Json.t => unit = ""; [@bs.module "emotion"] external rawInjectGlobal: string => unit = "injectGlobal"; [@bs.module "emotion"] @@ -291,9 +290,12 @@ type selector = [ | `selector(string, list(rule))]; let empty = []; let merge = List.concat; -let global = (selector, rules: list(rule)) => { - Emotion.injectGlobal([(selector, Emotion.makeDict(rules))]->Js.Dict.fromList->Js.Json.object_); -} +let global = (selector, rules: list(rule)) => + Emotion.injectGlobal( + [(selector, Emotion.makeDict(rules))] + ->Js.Dict.fromList + ->Js.Json.object_, + ); let insertRule = raw => Emotion.rawInjectGlobal(raw); @@ -391,8 +393,6 @@ type length = [ | `zero ]; -type gridLength = [ length | `fr(float) | `minContent | `maxContent]; - let string_of_length_cascading = fun | `calc(`add, a, b) => @@ -812,8 +812,45 @@ let gridAutoDirectionToJs = let gridAutoFlow = direction => d("gridAutoFlow", gridAutoDirectionToJs(direction)); +type repeatValue = [ | `autoFill | `autoFit | `n(int)]; +let repeatValueToJs = + fun + | `autoFill => "auto-fill" + | `autoFit => "auto-fit" + | `n(x) => x->string_of_int; + +type trackLength = [ length | `fr(float) | `minContent | `maxContent]; +type gridLength = [ trackLength | `repeat(repeatValue, trackLength)]; + +let gridLengthToJs = + fun + | `auto => "auto" + | `calc(`add, a, b) => + "calc(" ++ string_of_length(a) ++ " + " ++ string_of_length(b) ++ ")" + | `calc(`sub, a, b) => + "calc(" ++ string_of_length(a) ++ " - " ++ string_of_length(b) ++ ")" + | `ch(x) => string_of_float(x) ++ "ch" + | `cm(x) => string_of_float(x) ++ "cm" + | `em(x) => string_of_float(x) ++ "em" + | `ex(x) => string_of_float(x) ++ "ex" + | `mm(x) => string_of_float(x) ++ "mm" + | `percent(x) => string_of_float(x) ++ "%" + | `pt(x) => string_of_int(x) ++ "pt" + | `px(x) => string_of_int(x) ++ "px" + | `pxFloat(x) => string_of_float(x) ++ "px" + | `rem(x) => string_of_float(x) ++ "rem" + | `vh(x) => string_of_float(x) ++ "vh" + | `vmax(x) => string_of_float(x) ++ "vmax" + | `vmin(x) => string_of_float(x) ++ "vmin" + | `vw(x) => string_of_float(x) ++ "vw" + | `fr(x) => string_of_float(x) ++ "fr" + | `zero => "0" + | `minContent => "min-content" + | `maxContent => "max-content" + | `repeat(n, x) => "repeat(" ++ n->repeatValueToJs ++ ", " ++ string_of_dimension(x) ++ ")"; + let string_of_dimensions = dimensions => - dimensions |> List.map(string_of_dimension) |> String.concat(" "); + dimensions |> List.map( gridLengthToJs ) |> String.concat(" "); let gridTemplateColumns = dimensions => d("gridTemplateColumns", string_of_dimensions(dimensions)); diff --git a/src/Css.rei b/src/Css.rei index 4ab5bb1..b2ceead 100644 --- a/src/Css.rei +++ b/src/Css.rei @@ -236,7 +236,9 @@ type length = [ | `zero ]; -type gridLength = [ length | `fr(float) | `minContent | `maxContent]; +type repeatValue = [ | `autoFill | `autoFit | `n(int)]; +type trackLength = [ length | `fr(float) | `minContent | `maxContent]; +type gridLength = [ trackLength | `repeat(repeatValue, trackLength)]; let ch: float => [> | `ch(float)]; let cm: float => [> | `cm(float)]; @@ -463,14 +465,17 @@ let order: int => rule; let gridTemplateColumns: list([ gridLength | `auto]) => rule; let gridTemplateRows: list([ gridLength | `auto]) => rule; let gridAutoRows: [ length | `auto] => rule; -let gridAutoFlow: [ - | `column - | `row - | `columnDense - | `rowDense - | `inherit_ - | `initial - | `unset ] => rule; +let gridAutoFlow: + [ + | `column + | `row + | `columnDense + | `rowDense + | `inherit_ + | `initial + | `unset + ] => + rule; let gridColumn: (int, int) => rule; let gridRow: (int, int) => rule; let gridColumnStart: int => rule; @@ -534,14 +539,7 @@ let alignItems: [ | `stretch | `flexStart | `center | `flexEnd | `baseline] => rule; let alignSelf: [ | `stretch | `flexStart | `center | `flexEnd | `baseline | `auto] => rule; -let justifySelf: - [ - | `flexStart - | `center - | `flexEnd - | `stretch - ] => - rule; +let justifySelf: [ | `flexStart | `center | `flexEnd | `stretch] => rule; let justifyContent: [ | `flexStart @@ -565,7 +563,7 @@ let overflowY: [ | `hidden | `visible | `scroll | `auto] => rule; let zIndex: int => rule; let contentRule: string => rule; -let columnCount: [ | `auto | `count(int) | cascading ] => rule; +let columnCount: [ | `auto | `count(int) | cascading] => rule; /** * Style @@ -622,7 +620,7 @@ let boxShadow: let boxShadows: list([ | `shadow(string)]) => rule; let background: [ color | `url(string) | gradient | `none] => rule; -let backgrounds : list([ | color | `url(string) | gradient | `none] ) => rule; +let backgrounds: list([ color | `url(string) | gradient | `none]) => rule; let backgroundColor: [ color] => rule; let backgroundImage: [ | `url(string) | gradient | `none] => rule; let backgroundAttachment: [ | `scroll | `fixed | `local] => rule; From 5406f3d019d79d2cad8c5f0fc3b55aa1e49c9198 Mon Sep 17 00:00:00 2001 From: Zach Wegrzyniak Date: Sat, 24 Nov 2018 12:10:15 +0100 Subject: [PATCH 2/2] n --- example/test.re | 10 ++-------- src/Css.re | 9 +++++---- src/Css.rei | 2 +- 3 files changed, 8 insertions(+), 13 deletions(-) diff --git a/example/test.re b/example/test.re index a695223..aa405b9 100644 --- a/example/test.re +++ b/example/test.re @@ -498,13 +498,7 @@ let tests = ) />
-
+
{text("grid auto direction row")}
@@ -516,7 +510,7 @@ let tests = className=Css.( style([ display(`grid), - gridTemplateColumns([100->px, `repeat(`n(2), 60->px)]) + gridTemplateColumns([100->px, `repeat((`num(2), 60->px))]), ]) )>
diff --git a/src/Css.re b/src/Css.re index 75cbc49..832d41e 100644 --- a/src/Css.re +++ b/src/Css.re @@ -812,12 +812,12 @@ let gridAutoDirectionToJs = let gridAutoFlow = direction => d("gridAutoFlow", gridAutoDirectionToJs(direction)); -type repeatValue = [ | `autoFill | `autoFit | `n(int)]; +type repeatValue = [ | `autoFill | `autoFit | `num(int)]; let repeatValueToJs = fun | `autoFill => "auto-fill" | `autoFit => "auto-fit" - | `n(x) => x->string_of_int; + | `num(x) => x->string_of_int; type trackLength = [ length | `fr(float) | `minContent | `maxContent]; type gridLength = [ trackLength | `repeat(repeatValue, trackLength)]; @@ -847,10 +847,11 @@ let gridLengthToJs = | `zero => "0" | `minContent => "min-content" | `maxContent => "max-content" - | `repeat(n, x) => "repeat(" ++ n->repeatValueToJs ++ ", " ++ string_of_dimension(x) ++ ")"; + | `repeat(n, x) => + "repeat(" ++ n->repeatValueToJs ++ ", " ++ string_of_dimension(x) ++ ")"; let string_of_dimensions = dimensions => - dimensions |> List.map( gridLengthToJs ) |> String.concat(" "); + dimensions |> List.map(gridLengthToJs) |> String.concat(" "); let gridTemplateColumns = dimensions => d("gridTemplateColumns", string_of_dimensions(dimensions)); diff --git a/src/Css.rei b/src/Css.rei index b2ceead..7053687 100644 --- a/src/Css.rei +++ b/src/Css.rei @@ -236,7 +236,7 @@ type length = [ | `zero ]; -type repeatValue = [ | `autoFill | `autoFit | `n(int)]; +type repeatValue = [ | `autoFill | `autoFit | `num(int)]; type trackLength = [ length | `fr(float) | `minContent | `maxContent]; type gridLength = [ trackLength | `repeat(repeatValue, trackLength)];