Update the box-shadow implementation

Update the implementation of the `box-shadow` CSS property and make it similar to how it is currently implemented in Clay.
This is a breaking change.

Author: vyorkin

src/CSS.purs

@@ -3,7 +3,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, borderTop, dashed, dotted, double, groove, inset, outset, ridge, solid, wavy) as X
-import CSS.Box (BoxType, borderBox, boxShadow, boxSizing, contentBox, insetBoxShadow, paddingBox) 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, table, tableCaption, tableCell, tableColumn, tableColumnGroup, tableFooterGroup, tableHeaderGroup, tableRow, tableRowGroup, zIndex, opacity) as X
 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

src/CSS/Background.purs

@@ -86,8 +86,8 @@ import CSS.String (class IsString, fromString)
 import CSS.Stylesheet (CSS, key)
 
 -- | We implement the generic background property as a type class that accepts
--- multiple value types. This allows us to combine different background aspects
--- into a shorthand syntax.
+-- | multiple value types. This allows us to combine different background aspects
+-- | into a shorthand syntax.
 
 class Val a <= Background a where
   background :: a -> CSS

src/CSS/Box.purs

@@ -1,18 +1,23 @@
 module CSS.Box
   ( BoxType
+  , BoxShadow
   , paddingBox, borderBox, contentBox
   , boxSizing
   , boxShadow
-  , insetBoxShadow
+  , shadow
+  , shadowWithBlur
+  , shadowWithSpread
+  , bsInset
+  , bsColor
   )
 where
 
 import Prelude
 
-import CSS.Border (Stroke)
+import Data.NonEmpty (NonEmpty)
 import CSS.Color (Color)
-import CSS.Common (class Inherit, browsers)
-import CSS.Property (class Val, Value, (!))
+import CSS.Common (class None, class Inherit, class Initial, class Unset, browsers)
+import CSS.Property (class Val, Value, value, (!))
 import CSS.Size (Size)
 import CSS.String (class IsString, fromString)
 import CSS.Stylesheet (CSS, prefixed, key)
@@ -50,12 +55,62 @@ boxSizing = key $ fromString "box-sizing"
 
 -------------------------------------------------------------------------------
 
-boxShadow :: forall a. Size a -> Size a -> Size a -> Color -> CSS
-boxShadow x y w c =
-  prefixed (browsers <> fromString "box-shadow") (x ! y ! w ! c)
+newtype BoxShadow = BoxShadow Value
 
--------------------------------------------------------------------------------
+derive instance eqBoxShadow :: Eq BoxShadow
+derive instance ordBoxShadow :: Ord BoxShadow
+
+instance valBoxShadow :: Val BoxShadow where
+  value (BoxShadow v) = v
+
+instance isStringBoxShadow :: IsString BoxShadow where
+  fromString = BoxShadow <<< fromString
+
+instance noneBoxShadow :: None BoxShadow where
+  none = fromString "none"
+
+instance inheritBoxShadow :: Inherit BoxShadow where
+  inherit = fromString "inherit"
 
-insetBoxShadow ::
-  forall a. Stroke -> Size a -> Size a -> Size a -> Color -> CSS
-insetBoxShadow x y w c z = prefixed (browsers <> fromString "box-shadow") (x ! y ! w ! c ! z)
+instance initialBoxShadow :: Initial BoxShadow where
+  initial = fromString "initial"
+
+instance unsetBoxShadow :: Unset BoxShadow where
+  unset = fromString "unset"
+
+-- | This function will usually take a singleton list, but requiring a (non-empty) list
+-- | prevents accidentally applying the modifiers (`bsInset`, `bsColor`) incorrectly.
+-- |
+-- | `singleton` (from "Data.NonEmpty") creates a singleton list.
+-- |
+-- | ```purescript
+-- | boxShadow $ singleton $ shadow (px 1.0) (px 1.0)
+-- | ```
+-- |
+-- | For supplying multiple `BoxShadow` values:
+-- |
+-- | ```purescript
+-- | boxShadow $
+-- |   red `bsColor` shadow (px 3.0) (px 3.0) :|
+-- |   [olive `bsColor` shadowWithBlur (em (-1.0)) (em 0.0) (em 0.4)]
+-- | ```
+boxShadow :: NonEmpty Array BoxShadow -> CSS
+boxShadow = prefixed (browsers <> fromString "box-shadow") <<< value
+
+shadow :: forall a. Size a -> Size a -> BoxShadow
+shadow x y = BoxShadow <<< value $ (x ! y)
+
+shadowWithBlur :: forall a. Size a -> Size a -> Size a -> BoxShadow
+shadowWithBlur x y w = BoxShadow <<< value $ (x ! y ! w)
+
+shadowWithSpread :: forall a. Size a -> Size a -> Size a -> Size a -> BoxShadow
+shadowWithSpread x y blurRadius spreadRadius =
+  BoxShadow <<< value $ (x ! y ! blurRadius ! spreadRadius)
+
+-- | Adapt the provided `box-shadow` with the `inset` prefix.
+bsInset :: BoxShadow -> BoxShadow
+bsInset (BoxShadow v) = BoxShadow <<< value $ ("inset" ! v)
+
+-- | Supply a color to the provided `box-shadow`.
+bsColor :: Color -> BoxShadow -> BoxShadow
+bsColor c (BoxShadow v) = BoxShadow <<< value $ (v ! c)

test/Main.purs

@@ -4,12 +4,13 @@ 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, transform)
+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, gold, teal, olive, black, (?), (&), (|>), (|*), (|+), byId, byClass, (@=), (^=), ($=), (*=), (~=), (|=), hover, fontFaceSrc, fontStyle, deg, rgba, em, zIndex, textOverflow, opacity, transform)
 import CSS.FontStyle as FontStyle
 import CSS.Text.Overflow as TextOverflow
 import CSS.Transform as Transform
+import CSS.Box (boxShadow, shadow, shadowWithBlur, shadowWithSpread, bsColor, bsInset)
 import Data.Maybe (Maybe(..))
-import Data.NonEmpty (singleton)
+import Data.NonEmpty (singleton, (:|))
 
 example1 :: Rendered
 example1 = render do
@@ -126,6 +127,28 @@ exampleTextOverflow2 :: Rendered
 exampleTextOverflow2 = render do
   textOverflow $ TextOverflow.custom "foobar"
 
+singleShadow :: Rendered
+singleShadow = render do
+  boxShadow $ singleton $ bsColor teal $ shadow (px 60.0) (px (-16.0))
+
+singleShadowWithBlur :: Rendered
+singleShadowWithBlur = render do
+  boxShadow $ singleton $ bsColor black $ shadowWithBlur (px 10.0) (px 5.0) (px 5.0)
+
+singleShadowWithSpread :: Rendered
+singleShadowWithSpread = render do
+  boxShadow $ singleton $ rgba 0 0 0 0.2 `bsColor` shadowWithSpread (px 2.0) (px 2.0) (px 2.0) (px 1.0)
+
+singleInsetShadow :: Rendered
+singleInsetShadow = render do
+  boxShadow $ singleton $ bsInset $ gold `bsColor` shadow (em 5.0) (em 1.0)
+
+multipleShadows :: Rendered
+multipleShadows = render do
+  boxShadow $
+    red `bsColor` shadow (px 3.0) (px 3.0) :|
+    [olive `bsColor` shadowWithBlur (em (-1.0)) (em 0.0) (em 0.4)]
+
 nestedNodes :: Rendered
 nestedNodes = render do
   fromString "#parent" ? do
@@ -185,3 +208,7 @@ main = do
   renderedInline scaleTransform1 `assertEqual` Just "transform: scaleX(1.0); transform: scaleY(0.5); transform: scaleZ(0.5)"
   renderedInline scaleTransform2 `assertEqual` Just "transform: scale(0.2, 0.8)"
 
+  renderedInline singleShadow `assertEqual` Just "-webkit-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); -moz-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); -ms-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); -o-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%)"
+  renderedInline singleShadowWithBlur `assertEqual` Just "-webkit-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); -moz-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); -ms-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); -o-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%)"
+  renderedInline singleShadowWithSpread `assertEqual` Just "-webkit-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); -moz-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); -ms-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); -o-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2)"
+  renderedInline multipleShadows `assertEqual` Just "-webkit-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); -moz-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); -ms-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); -o-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%)"