Add outline and constituent properties. (Resolves #84, #85, #144.) (#145)

Author: nsaunders

.github/workflows/ci.yml

@@ -33,7 +33,7 @@ jobs:
         run: spago build --no-install --purs-args '--censor-lib --strict'
 
       - name: Run tests
-        run: spago test --no-install
+        run: spago -x test.dhall test
 
       - name: Check formatting
         run: purs-tidy check src test

CHANGELOG.md

@@ -8,6 +8,7 @@ Breaking changes:
 - Add support for `calc` expressions (#140 by @nsaunders)
 - Add table selector (#141 by @plurip-software)
 - Update the box-shadow implementation (#88 by @vyorkin)
+- Add outline and constituent properties (#145 by @nsaunders)
 
 New features:
 - Add smart constructors for generic font families (#68, #136 by @Unisay and @JordanMartinez)

spago.dhall

@@ -5,7 +5,6 @@
   , "console"
   , "effect"
   , "either"
-  , "exceptions"
   , "exists"
   , "foldable-traversable"
   , "maybe"
@@ -19,5 +18,5 @@
   , "tuples"
   ]
 , packages = ./packages.dhall
-, sources = [ "src/**/*.purs", "test/**/*.purs" ]
+, sources = [ "src/**/*.purs" ]
 }

src/CSS.purs

@@ -2,7 +2,7 @@ module CSS (module X) where
 
 import CSS.Animation (AnimationDirection(..), AnimationName(..), FillMode(..), IterationCount(..), alternate, alternateReverse, animation, backwards, forwards, infinite, iterationCount, normalAnimationDirection, reverse) as X
 import CSS.Background (class Background, class Loc, BackgroundAttachment, BackgroundClip, BackgroundImage, BackgroundOrigin, BackgroundPosition, BackgroundRepeat, BackgroundSize, Direction, Location, Side, angular, attachFixed, attachScroll, background, backgroundAttachment, backgroundAttachments, backgroundClip, backgroundClips, backgroundColor, backgroundImage, backgroundImages, backgroundOrigin, backgroundOrigins, backgroundPosition, backgroundPositions, backgroundRepeat, backgroundRepeats, backgroundSize, backgroundSizes, boxClip, by, contain, cover, location, noRepeat, origin, placed, positioned, repeat, repeatX, repeatY, round, sideBottom, sideCenter, sideLeft, sideMiddle, sideRight, sideTop, space, straight, url, xyRepeat) as X
-import CSS.Border (Stroke(..), border, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderSpacing, borderTop, dashed, dotted, double, groove, inset, outset, ridge, solid, wavy) as X
+import CSS.Border (Stroke(..), border, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderSpacing, borderTop, dashed, dotted, double, groove, inset, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, outset, ridge, solid, wavy) as X
 import CSS.Box (BoxType, BoxShadow, borderBox, boxShadow, boxSizing, contentBox, paddingBox) as X
 import CSS.Color (Color, ColorSpace(..), aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brightness, brown, burlywood, cadetblue, chartreuse, chocolate, complementary, contrast, coral, cornflowerblue, cornsilk, crimson, cssStringHSLA, cssStringRGBA, cyan, darkblue, darkcyan, darken, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, desaturate, dimgray, dimgrey, distance, dodgerblue, firebrick, floralwhite, forestgreen, fromHexString, fromInt, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, graytone, green, greenyellow, grey, honeydew, hotpink, hsl, hsla, indianred, indigo, isLight, isReadable, ivory, khaki, lab, lavender, lavenderblush, lawngreen, lch, lemonchiffon, lightblue, lightcoral, lightcyan, lighten, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime, limegreen, linen, luminance, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, mix, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rgb, rgb', rgba, rgba', rosybrown, rotateHue, royalblue, saddlebrown, salmon, sandybrown, saturate, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue, tan, teal, textColor, thistle, toGray, toHSLA, toHexString, toLCh, toLab, toRGBA, toRGBA', toXYZ, tomato, turquoise, violet, wheat, white, whitesmoke, xyz, yellow, yellowgreen) as X
 import CSS.Display (ClearFloat(..), Display(..), Float(..), Position(..), absolute, block, clear, clearBoth, clearInlineEnd, clearInlineStart, clearLeft, clearRight, display, displayInherit, displayNone, fixed, flex, float, floatLeft, floatRight, grid, inline, inlineBlock, inlineFlex, inlineGrid, inlineTable, listItem, position, relative, runIn, static, displayTable, tableCaption, tableCell, tableColumn, tableColumnGroup, tableFooterGroup, tableHeaderGroup, tableRow, tableRowGroup, zIndex, opacity) as X

src/CSS/Border.purs

@@ -1,11 +1,49 @@
-module CSS.Border where
+module CSS.Border
+  (
+    -- * Stroke type, used for border-style and outline-style.
+    Stroke(..)
+  , solid
+  , dotted
+  , dashed
+  , double
+  , wavy
+  , groove
+  , ridge
+  , inset
+  , outset
+
+  -- * Border properties.
+
+  , border
+  , borderTop
+  , borderLeft
+  , borderBottom
+  , borderRight
+  , borderColor
+
+  -- * Outline properties.
+
+  , outline
+  , outlineColor
+  , outlineStyle
+  , outlineWidth
+  , outlineOffset
+
+  -- * Border radius.
+
+  , borderRadius
+
+  -- * Collapsing borders model for a table
+  , borderSpacing
+  ) where
 
 import Prelude
 
 import CSS.Color (Color)
-import CSS.Property (class Val, Value)
+import CSS.Common (class Inherit, class Initial, class Unset)
+import CSS.Property (class Val, Value, (!))
 import CSS.Size (Size, LengthUnit)
-import CSS.String (fromString)
+import CSS.String (class IsString, fromString)
 import CSS.Stylesheet (CSS, key)
 import Data.Tuple (Tuple(..))
 
@@ -14,9 +52,21 @@ newtype Stroke = Stroke Value
 derive instance eqStroke :: Eq Stroke
 derive instance ordStroke :: Ord Stroke
 
+instance isStringStroke :: IsString Stroke where
+  fromString = Stroke <<< fromString
+
 instance valStroke :: Val Stroke where
   value (Stroke v) = v
 
+instance inheritStroke :: Inherit Stroke where
+  inherit = fromString "inherit"
+
+instance initialStroke :: Initial Stroke where
+  initial = fromString "initial"
+
+instance unsetStroke :: Unset Stroke where
+  unset = fromString "unset"
+
 solid :: Stroke
 solid = Stroke $ fromString "solid"
 
@@ -62,6 +112,25 @@ borderRight a b c = key (fromString "border-right") (Tuple a (Tuple b c))
 borderColor :: Color -> CSS
 borderColor = key $ fromString "border-color"
 
+-------------------------------------------------------------------------------
+
+outline :: Stroke -> Size LengthUnit -> Color -> CSS
+outline a b c = key (fromString "outline") (a ! b ! c)
+
+outlineColor :: Color -> CSS
+outlineColor = key (fromString "outline-color")
+
+outlineStyle :: Stroke -> CSS
+outlineStyle = key (fromString "outline-style")
+
+outlineWidth :: Size LengthUnit -> CSS
+outlineWidth = key (fromString "outline-width")
+
+outlineOffset :: Size LengthUnit -> CSS
+outlineOffset = key (fromString "outline-offset")
+
+-------------------------------------------------------------------------------
+
 borderRadius :: forall a. Size a -> Size a -> Size a -> Size a -> CSS
 borderRadius a b c d = key (fromString "border-radius") (Tuple (Tuple a b) (Tuple c d))
 

src/CSS/Size.purs

@@ -1,7 +1,8 @@
 module CSS.Size where
 
 import Prelude
-import CSS.Common (class Auto, browsers)
+
+import CSS.Common (class Auto, class Inherit, class Initial, class Unset, browsers)
 import CSS.Property (class Val, Prefixed(Plain), Value(..), plain, value)
 import CSS.String (class IsString, fromString)
 import Data.Exists (Exists, mkExists, runExists)
@@ -39,6 +40,15 @@ instance valSize :: Val (Size a) where
 instance autoSize :: Auto (Size a) where
   auto = fromString "auto"
 
+instance inheritSize :: Inherit (Size a) where
+  inherit = fromString "inherit"
+
+instance initialSize :: Initial (Size a) where
+  initial = fromString "initial"
+
+instance unsetSize :: Unset (Size a) where
+  unset = fromString "unset"
+
 -- | Zero size.
 nil :: forall a. Size a
 nil = BasicSize $ fromString "0"

test.dhall

@@ -0,0 +1,6 @@
+let conf = ./spago.dhall
+
+in conf // {
+  sources = conf.sources # ["test/**/*.purs"],
+  dependencies = conf.dependencies # ["aff", "control", "exceptions", "partial", "spec"]
+}

test/CSS/BorderSpec.purs

@@ -0,0 +1,86 @@
+module CSS.BorderSpec where
+
+import Prelude
+
+import CSS.Border (dashed, dotted, double, groove, inset, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, ridge, solid)
+import CSS.Color (green)
+import CSS.Color as Color
+import CSS.Common (inherit, initial, unset)
+import CSS.Size (em, px)
+import Common (shouldRenderFrom)
+import Data.Maybe (fromJust)
+import Data.Traversable (traverse_)
+import Data.Tuple.Nested ((/\))
+import Partial.Unsafe (unsafePartial)
+import Test.Spec (Spec, describe)
+
+spec :: Spec Unit
+spec = do
+
+  describe "outline (Mozilla examples)" $
+    "outline: solid 3.0px hsl(120.0, 100.0%, 25.1%)" `shouldRenderFrom` outline solid (px 3.0) green
+
+  describe "outline-style (Mozilla examples)" do
+    let testOutlineStyle (s /\ v) = ("outline-style: " <> s) `shouldRenderFrom` outlineStyle v
+    describe "Keyword values" $
+      traverse_
+        testOutlineStyle
+        [ "dotted" /\ dotted
+        , "dashed" /\ dashed
+        , "solid" /\ solid
+        , "double" /\ double
+        , "groove" /\ groove
+        , "ridge" /\ ridge
+        , "inset" /\ inset
+        ]
+    describe "Global values" $
+      traverse_
+        testOutlineStyle
+        [ "inherit" /\ inherit
+        , "initial" /\ initial
+        , "unset" /\ unset
+        ]
+
+  describe "outline-color (Mozilla examples)" $
+    let
+      testOutlineColor (s /\ v) = ("outline-color: " <> s) `shouldRenderFrom` outlineColor v
+    in
+      describe "<color> values" $
+        traverse_
+          testOutlineColor
+          [ "hsl(0.0, 94.64%, 56.08%)" /\ (unsafePartial $ fromJust $ Color.fromHexString "#f92525")
+          , "hsl(148.44, 76.19%, 49.41%)" /\ Color.rgb 30 222 121
+          , "hsl(240.0, 100.0%, 50.0%)" /\ Color.blue
+          ]
+
+  describe "outline-width (Mozilla examples)" do
+    let testOutlineWidth (s /\ v) = ("outline-width: " <> s) `shouldRenderFrom` outlineWidth v
+    describe "<length> values" $
+      traverse_
+        testOutlineWidth
+        [ "1.0px" /\ px 1.0
+        , "0.1em" /\ em 0.1
+        ]
+    describe "Global values" $
+      traverse_
+        testOutlineWidth
+        [ "inherit" /\ inherit
+        , "initial" /\ initial
+        , "unset" /\ unset
+        ]
+
+  describe "outline-offset (Mozilla examples)" do
+    let testOutlineOffset (s /\ v) = ("outline-offset: " <> s) `shouldRenderFrom` outlineOffset v
+    describe "<length> values" $
+      traverse_
+        testOutlineOffset
+        [ "3.0px" /\ px 3.0
+        , "0.2em" /\ em 0.2
+        ]
+    describe "Global values" $
+      traverse_
+        testOutlineOffset
+        [ "inherit" /\ inherit
+        , "initial" /\ initial
+        , "unset" /\ unset
+        ]

test/Common.purs

@@ -0,0 +1,35 @@
+module Common where
+
+import Prelude
+
+import CSS (renderedInline)
+import CSS.Render (render, renderedSheet)
+import CSS.Stylesheet (CSS)
+import Control.Alt ((<|>))
+import Control.Monad.Error.Class (class MonadThrow)
+import Effect.Exception (Error)
+import Test.Spec (SpecT, it)
+import Test.Spec.Assertions (shouldEqual)
+
+shouldRenderFrom
+  :: forall g m
+   . Monad m
+  => MonadThrow Error g
+  => String
+  -> CSS
+  -> SpecT g Unit m Unit
+shouldRenderFrom expected given =
+  it ("renders " <> expected) $ expected `shouldRenderItFrom` given
+
+shouldRenderItFrom
+  :: forall m
+   . MonadThrow Error m
+  => String
+  -> CSS
+  -> m Unit
+shouldRenderItFrom expected given =
+  let
+    r = render given
+    actual = renderedInline r <|> renderedSheet r
+  in
+    actual `shouldEqual` pure expected