Refactor FontStyle type

* Make it a sum-type rather than newtype
* Extract FontStyle to separate module
* Add some tests for main use-cases

Author: vyorkin

src/CSS.purs

@@ -9,7 +9,8 @@ import CSS.Display (ClearFloat(..), Display(..), Float(..), Position(..), absolu
 import CSS.Elements (a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, datalist, dd, del, details, dfn, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, main, map, mark, meter, nav, object, ol, optgroup, output, p, pre, progress, q, s, samp, section, small, span, strong, sub, summary, sup, tbody, td, textarea, tfoot, th, thead, tr, u, ul, var) as X
 import CSS.Flexbox (class FlexEnd, class FlexStart, class SpaceAround, class SpaceBetween, class Stretch, AlignContentValue(..), AlignItemsValue(..), AlignSelfValue(..), FlexDirection(..), FlexWrap(..), JustifyContentValue(..), alignContent, alignItems, alignSelf, column, columnReverse, flexBasis, flexDirection, flexEnd, flexFlow, flexGrow, flexShrink, flexStart, flexWrap, justifyContent, nowrap, order, row, rowReverse, spaceAround, spaceBetween, stretch, wrap, wrapReverse) as X
 import CSS.FontFace (FontFaceFormat(..), FontFaceSrc(..), fontFaceFamily, fontFaceSrc, formatName) as X
-import CSS.Font (FontStyle(..), FontWeight(..), GenericFontFamily(..), bold, bolder, color, fontFamily, fontSize, fontStyle, fontWeight, italic, lighter, oblique, sansSerif, weight) as X
+import CSS.Font (FontWeight(..), GenericFontFamily(..), bold, bolder, color, fontFamily, fontSize, fontWeight, lighter, sansSerif, weight) as X
+import CSS.FontStyle (FontStyle, fontStyle) as X
 import CSS.Geometry (bottom, height, left, lineHeight, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, right, top, width) as X
 import CSS.Gradient (Extend, Radial, Ramp, circle, circular, closestCorner, closestSide, ellipse, elliptical, farthestCorner, farthestSide, hGradient, hRepeatingGradient, linearGradient, radialGradient, repeatingLinearGradient, repeatingRadialGradient, vGradient, vRepeatingGradient) as X
 import CSS.Property (class Val, Key(..), Literal(..), Prefixed(..), Value(..), cast, noCommas, plain, quote, value, (!)) as X

src/CSS/Font.purs

@@ -63,32 +63,3 @@ weight i = FontWeight $ value i
 
 fontWeight :: FontWeight -> CSS
 fontWeight = key $ fromString "font-weight"
-
-newtype FontStyle = FontStyle Value
-
-derive instance eqFontStyle :: Eq FontStyle
-derive instance ordFontStyle :: Ord FontStyle
-
-instance valFontStyle :: Val FontStyle where
-  value (FontStyle v) = v
-
-instance normalFontStyle :: Normal FontStyle where
-  normal = FontStyle (fromString "normal")
-
-instance initialFontStyle :: Initial FontStyle where
-  initial = FontStyle (fromString "initial")
-
-instance inheritFontStyle :: Inherit FontStyle where
-  inherit = FontStyle (fromString "inherit")
-
-instance unsetFontStyle :: Unset FontStyle where
-  unset = FontStyle (fromString "unset")
-
-italic :: FontStyle
-italic = FontStyle $ fromString "italic"
-
-oblique :: FontStyle
-oblique = FontStyle $ fromString "oblique"
-
-fontStyle :: FontStyle -> CSS
-fontStyle = key $ fromString "font-style"

src/CSS/FontStyle.purs

@@ -0,0 +1,62 @@
+module CSS.FontStyle where
+
+import Prelude
+import CSS.Common (class Inherit, class Initial, class Normal, class Unset)
+import CSS.Property (class Val, Value, value)
+import CSS.Size (Angle)
+import CSS.String (fromString)
+import CSS.Stylesheet (CSS, key)
+
+data ObliqueValue
+  = ObliqueDefault
+  | ObliqueAngle Value
+
+derive instance eqObliqueValue :: Eq ObliqueValue
+derive instance ordObliqueValue :: Ord ObliqueValue
+
+instance valObliqueValue :: Val ObliqueValue where
+  value ObliqueDefault = fromString "oblique"
+  value (ObliqueAngle v) = fromString "oblique " <> v
+
+data FontStyle
+  = Normal
+  | Initial
+  | Inherit
+  | Unset
+  | Italic
+  | Oblique ObliqueValue
+
+derive instance eqFontStyle :: Eq FontStyle
+derive instance ordFontStyle :: Ord FontStyle
+
+instance valFontStyle :: Val FontStyle where
+  value Normal = fromString "normal"
+  value Initial = fromString "initial"
+  value Inherit = fromString "inherit"
+  value Unset = fromString "unset"
+  value Italic = fromString "italic"
+  value (Oblique v) = value v
+
+instance normalFontStyle :: Normal FontStyle where
+  normal = Normal
+
+instance initialFontStyle :: Initial FontStyle where
+  initial = Initial
+
+instance inheritFontStyle :: Inherit FontStyle where
+  inherit = Inherit
+
+instance unsetFontStyle :: Unset FontStyle where
+  unset = Unset
+
+italic :: FontStyle
+italic = Italic
+
+oblique :: FontStyle
+oblique = Oblique ObliqueDefault
+
+obliqueAngle :: forall a. Angle a -> FontStyle
+obliqueAngle = Oblique <<< ObliqueAngle <<< value
+
+fontStyle :: FontStyle -> CSS
+fontStyle = key $ fromString "font-style"

test/Main.purs

@@ -4,7 +4,8 @@ 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, px, dashed, border, inlineBlock, red, (?), fontFaceSrc, zIndex)
+import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, px, dashed, border, inlineBlock, red, (?), fontFaceSrc, fontStyle, deg, zIndex)
+import CSS.FontStyle as FontStyle
 import Data.Maybe (Maybe(..))
 import Data.NonEmpty (singleton)
 
@@ -41,6 +42,18 @@ example7 :: Rendered
 example7 = render do
   zIndex 11
 
+exampleFontStyle1 :: Rendered
+exampleFontStyle1 = render do
+  fontStyle FontStyle.italic
+
+exampleFontStyle2 :: Rendered
+exampleFontStyle2 = render do
+  fontStyle FontStyle.oblique
+
+exampleFontStyle3 :: Rendered
+exampleFontStyle3 = render do
+  fontStyle $ FontStyle.obliqueAngle (deg 45.0)
+
 nestedNodes :: Rendered
 nestedNodes = render do
   fromString "#parent" ? do
@@ -76,3 +89,7 @@ main = do
   renderedInline example6 `assertEqual` Just "src: url(\"font.woff\") format(\"woff\")"
 
   renderedInline example7 `assertEqual` Just "z-index: 11"
+
+  renderedInline exampleFontStyle1 `assertEqual` Just "font-style: italic"
+  renderedInline exampleFontStyle2 `assertEqual` Just "font-style: oblique"
+  renderedInline exampleFontStyle3 `assertEqual` Just "font-style: oblique 45.0deg"