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) 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,9 +4,10 @@ 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, teal, black, gold, olive, color, body, px, em, dashed, border, inlineBlock, red, rgba, (?), fontFaceSrc, zIndex)
+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
@@ -41,6 +42,28 @@ example7 :: Rendered
 example7 = render do
   zIndex 11
 
+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
@@ -76,3 +99,8 @@ main = do
   renderedInline example6 `assertEqual` Just "src: url(\"font.woff\") format(\"woff\")"
 
   renderedInline example7 `assertEqual` Just "z-index: 11"
+
+  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%)"