Grid Support

.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

CHANGELOG

@@ -5,7 +5,27 @@ CHANGELOG
     - Added `text-align-last`
     - Fix typo in `stepsStart`
     Thanks to Vasiliy Yorkin and Florian Grignon.
-
+    - 'Clay.Grid':
+      new properties:
+        gap: `gap` & `grid-gap`
+        rowGap: `row-gap` & `grid-row-gap`
+        columnGap: `column-gap` & `grid-column-gap`
+        gridArea: `grid-area`
+        gridAutoRows: `grid-auto-rows`
+        gridAutoColumns: `grid-auto-columns`
+        gridAutoFlow: `grid-auto-flow`
+        gridTemplateRows: `grid-template-rows`
+        gridTemplateColumns: `grid-template-columns`
+        gridTemplateAreas: `grid-template-areas`
+    - 'Clay.Size':
+      AnyUnit, a size parameter for lists of mixed units
+      minmax :: Size a -> Size a -> Size AnyUnit
+      remove `available`, `normal`: not valid css sizes
+      include `initial`, `unset` keyword values
+      upgrade `fitContent` from value to function, it's not valid without an argument:
+         https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage
+      minContent & maxContent are now type class overloaded values
+
   0.13.3:
     - Improve README
     - Relax types for `sym2` and `sym3` combinators

clay.cabal

@@ -57,7 +57,7 @@ Library
     Clay.FontFace
     Clay.Geometry
     Clay.Gradient
-    Clay.Grid 
+    Clay.Grid
     Clay.List
     Clay.Media
     Clay.Mask
@@ -75,7 +75,8 @@ Library
   Build-Depends:
     base  >= 4.11 && < 5,
     mtl   >= 1    && < 2.3,
-    text  >= 0.11 && < 1.3
+    text  >= 0.11 && < 1.3,
+    these >= 0.2   && < 1.2
   GHC-Options: -Wall -Wcompat
 
 Test-Suite Test-Clay
@@ -87,6 +88,7 @@ Test-Suite Test-Clay
     base                 >= 4.11  && < 5,
     mtl                  >= 1     && < 2.3,
     text                 >= 0.11  && < 1.3,
+    these                >= 0.2   && < 1.2,
     hspec                >= 2.2.0 && < 2.8,
     hspec-discover       >= 2.2.0 && < 2.8
   GHC-Options: -Wall -Wcompat

nix/clay.nix

@@ -1,10 +1,10 @@
-{ mkDerivation, base, hspec, hspec-discover, mtl, stdenv, lib, text }:
+{ mkDerivation, base, hspec, hspec-discover, mtl, stdenv, lib, text, these }:
 mkDerivation {
   pname = "clay";
   version = "0.14.0";
   src = ./..;
-  libraryHaskellDepends = [ base mtl text ];
-  testHaskellDepends = [ base hspec hspec-discover mtl text ];
+  libraryHaskellDepends = [ base mtl text these ];
+  testHaskellDepends = [ base hspec hspec-discover mtl text these ];
   homepage = "http://fvisser.nl/clay";
   description = "CSS preprocessor as embedded Haskell";
   license = lib.licenses.bsd3;

spec/Clay/GridSpec.hs

@@ -0,0 +1,165 @@
+{-# LANGUAGE OverloadedStrings #-}
+{-# LANGUAGE OverloadedLists #-}
+module Clay.GridSpec where
+
+import Test.Hspec
+import Common
+import Clay
+import Data.These (These (..))
+
+
+spec :: Spec
+spec = do
+  describe "gap" $ do
+    "{gap:10px;grid-gap:10px}"
+      `shouldRenderFrom`
+      gap (px 10)
+
+  describe "rowGap" $ do
+    "{row-gap:5px;grid-row-gap:5px}"
+      `shouldRenderFrom`
+      rowGap (px 5)
+
+  describe "columnGap" $ do
+    "{column-gap:1em;grid-column-gap:1em}"
+      `shouldRenderFrom`
+      columnGap (em 1)
+
+  describe "gridTemplateRows" $ do
+    describe "keyword" $ do
+      "{grid-template-rows:none}"
+        `shouldRenderFrom`
+        gridTemplateRows none
+
+    describe "list of sizes" $ do
+      "{grid-template-rows:50px fit-content(500px) minmax(400em,50%)}"
+        `shouldRenderFrom`
+        gridTemplateRows [upcast (px 50), upcast $ fitContent (px 500), minmax (em 400) (pct 50)]
+
+  describe "gridTemplateColumns" $ do
+    describe "keyword" $ do
+      "{grid-template-columns:none}"
+        `shouldRenderFrom`
+        gridTemplateColumns none
+
+    describe "list of sizes" $ do
+      "{grid-template-columns:1em calc(20% + 1fr) auto}"
+        `shouldRenderFrom`
+        gridTemplateColumns [upcast $ em 1, pct 20 @+@ fr 1, upcast $ auto]
+
+  describe "gridAutoRows" $ do
+    describe "keywords" $ do
+      "{grid-auto-rows:min-content}"
+        `shouldRenderFrom`
+        gridAutoRows minContent
+
+      "{grid-auto-rows:max-content}"
+        `shouldRenderFrom`
+        gridAutoRows maxContent
+
+    describe "list of sizes" $ do
+      "{grid-auto-rows:1em calc(20% + 1fr) auto}"
+        `shouldRenderFrom`
+        gridAutoRows [upcast $ em 1, pct 20 @+@ fr 1, upcast $ auto]
+
+  describe "gridAutoFlow" $ do
+    "{grid-auto-flow:row}"
+      `shouldRenderFrom`
+      gridAutoFlow row
+
+    "{grid-auto-flow:column}"
+      `shouldRenderFrom`
+      gridAutoFlow column
+
+    "{grid-auto-flow:dense}"
+      `shouldRenderFrom`
+      gridAutoFlow dense
+
+    "{grid-auto-flow:row dense}"
+      `shouldRenderFrom`
+      gridAutoFlow rowDense
+
+    "{grid-auto-flow:column dense}"
+      `shouldRenderFrom`
+      gridAutoFlow columnDense
+
+  describe "gridArea" $ do
+    "{grid-area:header}"
+      `shouldRenderFrom`
+      gridArea "header"
+
+  describe "grid coordinate properties" $ do
+
+    "{grid-row-start:3}"
+      `shouldRenderFrom`
+      gridRowStart 3
+
+    "{grid-row-end:-2}"
+      `shouldRenderFrom`
+      gridRowEnd (-2)
+
+    "{grid-column-start:span nav}"
+      `shouldRenderFrom`
+      gridColumnStart $ gridLocation Span (That "nav")
+
+    "{grid-column-end:3 footer}"
+      `shouldRenderFrom`
+      gridColumnEnd $ gridLocation NoSpan (These 3 "footer")
+
+
+  describe "gridTemplateAreas" $ do
+    describe "keyword values" $ do
+      "{grid-template-areas:none}"
+        `shouldRenderFrom`
+        gridTemplateAreas none
+
+      "{grid-template-areas:inherit}"
+        `shouldRenderFrom`
+        gridTemplateAreas inherit
+
+      "{grid-template-areas:initial}"
+        `shouldRenderFrom`
+        gridTemplateAreas initial
+
+      "{grid-template-areas:unset}"
+        `shouldRenderFrom`
+        gridTemplateAreas unset
+
+    describe "mozilla example" $ do
+      let
+        area_a = "a"
+        area_b = "b"
+        area_c = "c"
+        area_blank = blankGridArea
+
+      "{grid-template-areas:\"a a .\"\n\"a a .\"\n\". b c\"}"
+        `shouldRenderFrom`
+        gridTemplateAreas
+          [ [ area_a, area_a, area_blank]
+          , [ area_a, area_a, area_blank]
+          , [ area_blank, area_b, area_c]
+          ]
+    describe "non rectangular template areas should error" $ do
+      let
+        area_a = "a"
+        area_b = "b"
+        area_c = "c"
+        area_blank = blankGridArea
+
+      InvalidGridTemplateNotRectangular
+        `shouldErrorFromRender`
+        gridTemplateAreas
+          [ [ area_blank]                 -- length 1
+          , [ area_a, area_blank]         -- length 2
+          , [ area_blank, area_b, area_c] -- length 3
+          ]
+
+    describe "empty template should error" $ do
+      InvalidGridTemplateEmpty
+        `shouldErrorFromRender`
+        gridTemplateAreas []
+
+    describe "template with empty row(s) should error" $ do
+      InvalidGridTemplateEmptyRow
+        `shouldErrorFromRender`
+        gridTemplateAreas [[], []]

spec/Clay/SizeSpec.hs

@@ -18,11 +18,6 @@ import Data.List
 sizeRepr :: Size a -> Text
 sizeRepr = plain . unValue . value
 
-hasAllPrefixes :: Val a => a -> Bool
-hasAllPrefixes a = checkPrefixed ((unValue . value) a) browsers
-  where checkPrefixed (Prefixed pa) (Prefixed pb) = sort (fmap fst pa) == sort (fmap fst pb)
-        checkPrefixed _ _ = False
-
 compactRender :: Css -> Text
 compactRender css = toStrict $ renderWith compact [] css
 
@@ -31,8 +26,8 @@ spec = do
   describe "render results" $ do
     it "marginLeft auto" $
       (compactRender $ marginLeft auto) `shouldBe` "{margin-left:auto}"
-    it "marginLeft normal" $
-      (compactRender $ marginLeft normal) `shouldBe` "{margin-left:normal}"
+    it "marginLeft initial" $
+      (compactRender $ marginLeft initial) `shouldBe` "{margin-left:initial}"
     it "marginLeft inherit" $
       (compactRender $ marginLeft inherit) `shouldBe` "{margin-left:inherit}"
     it "marginLeft none" $
@@ -47,8 +42,6 @@ spec = do
       sizeRepr (em 2 @+@ px 1) `shouldBe` "calc(2em + 1px)"
     it "returns calc for nested sum" $
       sizeRepr (em 2 @+@ pt 1 @+@ px 3) `shouldBe` "calc((2em + 1pt) + 3px)"
-    it "returns prefixed calc for simple sum" $
-      (em 2 @+@ pt 2) `shouldSatisfy` hasAllPrefixes
     it "return calc for sum of different types" $
       sizeRepr (em 2 @+@ pct 10) `shouldBe` "calc(2em + 10%)"
     it "returns calc for simple difference" $

spec/Common.hs

@@ -1,8 +1,16 @@
-module Common where
+module Common
+  ( shouldRenderFrom
+  , shouldRenderAsFrom
+  , shouldRenderItFrom
+  , shouldErrorFromRender
+  )
+  where
 
 import Test.Hspec
 import Clay
 import Data.Text.Lazy (Text, unpack)
+import Control.Exception (Exception(..), evaluate)
+
 
 shouldRenderFrom :: Text -> Css -> SpecWith ()
 shouldRenderFrom txt css =
@@ -15,5 +23,15 @@ shouldRenderAsFrom des txt css =
 infixr 3 `shouldRenderAsFrom`
 
 shouldRenderItFrom :: Text -> Css -> Expectation
-shouldRenderItFrom = flip $ shouldBe . renderWith compact []
+shouldRenderItFrom = flip $ shouldBe . testRender
 infixr 0 `shouldRenderItFrom`
+
+testRender :: Css -> Text
+testRender = renderWith compact []
+
+shouldErrorFromRender :: (Exception e, Eq e) => e -> Css -> SpecWith ()
+shouldErrorFromRender exception css = do
+  let errorMsg = show exception
+  let rendered = evaluate $! testRender css
+  it ("throws " <> errorMsg) $
+    (rendered `shouldThrow` (== exception))

src/Clay/Common.hs

@@ -15,17 +15,21 @@ import Data.String (IsString)
 
 -------------------------------------------------------------------------------
 
-class All      a where all      :: a
-class Auto     a where auto     :: a
-class Baseline a where baseline :: a
-class Center   a where center   :: a
-class Inherit  a where inherit  :: a
-class None     a where none     :: a
-class Normal   a where normal   :: a
-class Visible  a where visible  :: a
-class Hidden   a where hidden   :: a
-class Initial  a where initial  :: a
-class Unset    a where unset    :: a
+class All        a where all        :: a
+class Auto       a where auto       :: a
+class Baseline   a where baseline   :: a
+class Center     a where center     :: a
+class Inherit    a where inherit    :: a
+class None       a where none       :: a
+class Normal     a where normal     :: a
+class Visible    a where visible    :: a
+class Hidden     a where hidden     :: a
+class Initial    a where initial    :: a
+class Unset      a where unset      :: a
+class MinContent a where minContent :: a
+class MaxContent a where maxContent :: a
+class Row        a where row        :: a
+class Column     a where column     :: a
 
 -- | The other type class is used to escape from the type safety introduced by
 -- embedding CSS properties into the typed world of Clay. `Other` allows you to
@@ -55,19 +59,31 @@ initialValue :: Value
 initialValue = "initial"
 unsetValue :: Value
 unsetValue = "unset"
-
-instance All      Value where all      = allValue
-instance Auto     Value where auto     = autoValue
-instance Baseline Value where baseline = baselineValue
-instance Center   Value where center   = centerValue
-instance Inherit  Value where inherit  = inheritValue
-instance Normal   Value where normal   = normalValue
-instance None     Value where none     = noneValue
-instance Visible  Value where visible  = visibleValue
-instance Hidden   Value where hidden   = hiddenValue
-instance Other    Value where other    = id
-instance Initial  Value where initial  = initialValue
-instance Unset    Value where unset    = unsetValue
+minContentValue :: Value
+minContentValue = "min-content"
+maxContentValue :: Value
+maxContentValue = "max-content"
+rowValue :: Value
+rowValue = "row"
+columnValue :: Value
+columnValue = "column"
+
+instance All        Value where all        = allValue
+instance Auto       Value where auto       = autoValue
+instance Baseline   Value where baseline   = baselineValue
+instance Center     Value where center     = centerValue
+instance Inherit    Value where inherit    = inheritValue
+instance Normal     Value where normal     = normalValue
+instance None       Value where none       = noneValue
+instance Visible    Value where visible    = visibleValue
+instance Hidden     Value where hidden     = hiddenValue
+instance Other      Value where other      = id
+instance Initial    Value where initial    = initialValue
+instance Unset      Value where unset      = unsetValue
+instance MinContent Value where minContent = minContentValue
+instance MaxContent Value where maxContent = maxContentValue
+instance Row        Value where row        = rowValue
+instance Column     Value where column     = columnValue
 
 -------------------------------------------------------------------------------