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/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.Property (class Val, Value, value, (!))
 import CSS.Size (Size)
 import CSS.String (class IsString, fromString)
 import CSS.Stylesheet (CSS, prefixed, key)
@@ -50,12 +55,47 @@ 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)
-
--------------------------------------------------------------------------------
-
-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)
+newtype BoxShadow = BoxShadow Value
+
+derive instance eqBoxShadow :: Eq BoxShadow
+derive instance ordBoxShadow :: Ord BoxShadow
+
+instance valBoxShadow :: Val BoxShadow where
+  value (BoxShadow v) = v
+
+-- | 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,11 +4,12 @@ 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)
+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)
 import CSS.FontStyle as FontStyle
 import CSS.Text.Overflow as TextOverflow
+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
@@ -115,6 +116,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
@@ -171,3 +194,7 @@ main = do
   renderedSheet attrSpace `assertEqual` Just "p[foo~='bar'] { display: block }\n"
   renderedSheet attrHyph `assertEqual` Just "p[foo|='bar'] { display: block }\n"
 
+  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%)"