flex-grow and flex-shrink typed as Number (#64)

The `flex` shorthand, `flex-grow`, and `flex-shrink` properties appear to
allow `Number`s as values, not just `Int`s. See https://drafts.csswg.org/css-flexbox-1/#flex-property

Author: andywhite37

CHANGELOG.md

@@ -6,6 +6,8 @@ Notable changes to this project are documented in this file. The format is based
 
 Breaking changes (😱!!!):
 
+- Changed `flex`, `flexGrow`, and `flexShrink` to use `Number` rather than `Int` for the `grow` and `shrink` values - #64 (@andywhite37)
+
 New features:
 
 Bugfixes:

src/CSS/Flexbox.purs

@@ -159,7 +159,7 @@ alignSelf = key $ fromString "align-self"
 
 -------------------------------------------------------------------------------
 
-flex :: forall b. Int -> Int -> Size b -> CSS
+flex :: forall b. Number -> Number -> Size b -> CSS
 flex g s b = key (fromString "flex") (gs ! ss ! value b)
   where gs = fromString (show g) :: Value
         ss = fromString (show s) :: Value
@@ -204,10 +204,10 @@ flexFlow d w = key (fromString "flex-flow") (d ! w)
 
 -------------------------------------------------------------------------------
 
-flexGrow :: Int -> CSS
+flexGrow :: Number -> CSS
 flexGrow i = key (fromString "flex-grow") (fromString (show i) :: Value)
 
-flexShrink :: Int  -> CSS
+flexShrink :: Number  -> CSS
 flexShrink i = key (fromString "flex-shrink") (fromString (show i) :: Value)
 
 -------------------------------------------------------------------------------

test/Main.purs

@@ -4,8 +4,9 @@ import Prelude
 
 import Effect (Effect)
 import Effect.Exception (error, throwException)
-import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, a, p, px, dashed, border, inlineBlock, red, (?), (&), (|>), (|*), (|+), byId, byClass, (@=), (^=), ($=), (*=), (~=), (|=), hover, fontFaceSrc, fontStyle, deg, zIndex, textOverflow, opacity, cursor, transform, transition, easeInOut, cubicBezier, ms)
+import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), pct, renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, a, p, px, dashed, border, inlineBlock, red, (?), (&), (|>), (|*), (|+), byId, byClass, (@=), (^=), ($=), (*=), (~=), (|=), hover, fontFaceSrc, fontStyle, deg, zIndex, textOverflow, opacity, cursor, transform, transition, easeInOut, cubicBezier, ms)
 import CSS.Cursor as Cursor
+import CSS.Flexbox (flex)
 import CSS.FontStyle as FontStyle
 import CSS.Text.Overflow as TextOverflow
 import CSS.Transform as Transform
@@ -45,6 +46,10 @@ example7 :: Rendered
 example7 = render do
   zIndex 11
   opacity 0.5
+  
+example8 :: Rendered
+example8 = render do
+  flex 0.14 1.0 (pct 0.0)
 
 withSelector :: Rendered
 withSelector = render do
@@ -179,6 +184,8 @@ main = do
   renderedInline example6 `assertEqual` Just "src: url(\"font.woff\") format(\"woff\")"
 
   renderedInline example7 `assertEqual` Just "z-index: 11; opacity: 0.5"
+  
+  renderedInline example8 `assertEqual` Just "flex: 0.14 1.0 0.0%"
 
   renderedInline exampleFontStyle1 `assertEqual` Just "font-style: italic"
   renderedInline exampleFontStyle2 `assertEqual` Just "font-style: oblique"