[#135] Stop using parametric PropModifiers for styles and fix direction of style composition (#145)

* Add StyleModifier

* Rename styleModifier combinators

* Fix direction of composition of style modifiers

* Add combinators for using an array of styles as a prop modifier

Author: arthurxavierx

docs/Examples2/QRCode.example.purs

@@ -48,13 +48,13 @@ qrcodeExample =
       { qrcode, url } <- useQRCode ECLLow props.value
       pure
         $ box
-        <<< Box._align Center
+        $ Box._align Center
         $ _
             { content =
               [ qrcode
-                  <<< Border.border
-                  >>> Border._round
-                  >>> S.styleModifier_
+                  $ Border.border
+                  $ Border._round
+                  $ S.style_
                       ( S.css
                           { padding: S.int 16
                           , width: S.int 140

docs/Examples2/Slat.example.purs

@@ -6,7 +6,7 @@ import Data.Array (intercalate, replicate)
 import Data.Maybe (Maybe(..))
 import Data.Nullable as Nullable
 import Effect.Unsafe (unsafePerformEffect)
-import Lumi.Components (LumiComponent, PropsModifier, lumiComponent)
+import Lumi.Components (LumiComponent, lumiComponent)
 import Lumi.Components.Example (example)
 import Lumi.Components.Lockup (userLockup)
 import Lumi.Components.Spacing (Space(..), vspace)
@@ -15,7 +15,7 @@ import Lumi.Components.Text (h2_, p_)
 import Lumi.Components.Text as Text
 import Lumi.Components2.Box (box)
 import Lumi.Components2.Slat as Slat
-import Lumi.Styles (styleModifier_)
+import Lumi.Styles (StyleModifier, style_)
 import Lumi.Styles.Box (FlexAlign(..))
 import Lumi.Styles.Theme (LumiTheme(..), useTheme)
 import React.Basic (JSX, fragment)
@@ -111,12 +111,12 @@ docs =
           $ _ { content = exampleSlatContent }
       ]
 
-slatExWidth :: forall props. PropsModifier props
-slatExWidth = styleModifier_ $ E.css { maxWidth: E.int 500, width: E.str "100%" }
+slatExWidth :: StyleModifier
+slatExWidth = style_ $ E.css { maxWidth: E.int 500, width: E.str "100%" }
 
-slatColumn :: forall props. Int -> PropsModifier props
+slatColumn :: Int -> StyleModifier
 slatColumn flexGrow =
-  styleModifier_
+  style_
     $ E.css
     $ { flexGrow: E.int flexGrow
       , "&:not(:first-child)":
@@ -134,7 +134,7 @@ labeledInfo =
       theme@(LumiTheme { colorNames }) <- useTheme
       pure
         $ box
-        $ styleModifier_ (E.css { label: E.str "labeledInfo" })
+        $ style_ (E.css { label: E.str "labeledInfo" })
         $ _
             { css = css
             , className = className

src/Lumi/Components2/Box.purs

@@ -24,7 +24,7 @@ box =
         $ E.element R.div'
             { children: props.content
             , className: props.className
-            , css: toCSS theme props Styles.Box.box
+            , css: theme # toCSS Styles.Box.box <> props.css
             }
 
 row :: LumiComponent BoxProps

src/Lumi/Components2/Button.purs

@@ -68,7 +68,7 @@ button =
           , children
           , className: props.className
           , css:
-            toCSS theme props (Styles.Button.button props.color props.kind props.state props.size)
+            theme # toCSS (Styles.Button.button props.color props.kind props.state props.size) <> props.css
           , onClick: handler_ props.onPress
           , type: props.type
           , disabled:

src/Lumi/Components2/ButtonGroup.purs

@@ -26,5 +26,5 @@ buttonGroup =
         $ E.element R.div'
             { className: props.className
             , children: props.content
-            , css: toCSS theme props (Styles.Button.buttonGroup props.joined)
+            , css: theme # toCSS (Styles.Button.buttonGroup props.joined) <> props.css
             }

src/Lumi/Components2/Clip.purs

@@ -17,7 +17,7 @@ import Lumi.Components (LumiComponent, lumiComponent)
 import Lumi.Components.Spacing (Space(..))
 import Lumi.Components2.Box (box)
 import Lumi.Components2.Button (_linkStyle, button)
-import Lumi.Styles (styleModifier_, toCSS)
+import Lumi.Styles (style_, toCSS)
 import Lumi.Styles.Box (FlexAlign(..), _justify)
 import Lumi.Styles.Box as Styles.Box
 import Lumi.Styles.Clip as Styles.Clip
@@ -45,7 +45,7 @@ clip =
         copyButton =
           button
             $ _linkStyle
-            $ styleModifier_
+            $ style_
                 ( E.merge
                     [ E.css
                         { marginLeft: E.prop S16
@@ -65,14 +65,14 @@ clip =
       pure
         $ E.element R.div'
             { className: props.className
-            , css: toCSS theme props Styles.Clip.clip
+            , css: theme # toCSS Styles.Clip.clip <> props.css
             , children:
               [ E.element R.div'
                   { className: ""
                   , css:
-                    toCSS theme props
-                      $ Styles.Box.box
-                      >>> Styles.Box._justify Center
+                    theme
+                      # toCSS (Styles.Box.box <<< Styles.Box._justify Center)
+                      <> props.css
                   , ref
                   , children: props.content
                   }

src/Lumi/Components2/Link.purs

@@ -50,7 +50,7 @@ link =
       theme <- useTheme
       pure
         $ lumiAnchorElement
-            { css: toCSS theme props Styles.Link.link
+            { css: theme # toCSS Styles.Link.link <> props.css
             , children: props.content
             , className
             , href: un URL props.href

src/Lumi/Components2/QRCode.purs

@@ -72,7 +72,7 @@ useQRCode level value =
                       ]
                   , ref
                   , className: props.className
-                  , css: toCSS theme props Styles.QRCode.qrcode
+                  , css: theme # toCSS Styles.QRCode.qrcode <> props.css
                   }
     url /\ setUrl <- useState Nothing
     useEffect (UnsafeReference qrcode) do

src/Lumi/Components2/Slat.purs

@@ -13,7 +13,7 @@ import Data.Newtype (un)
 import Effect (Effect)
 import Effect.Unsafe (unsafePerformEffect)
 import Lumi.Components (LumiComponent, PropsModifier, lumiComponent, propsModifier)
-import Lumi.Styles (styleModifier, styleModifier_, toCSS)
+import Lumi.Styles (style, style_, toCSS)
 import Lumi.Styles.Slat (_interactive, slat) as Styles.Slat.Hidden
 import Lumi.Styles.Slat hiding (_interactive,slat) as Styles.Slat
 import Lumi.Styles.Theme (LumiTheme(..), useTheme)
@@ -43,21 +43,21 @@ slat =
       pure case props.interaction of
         Nothing ->
           E.element R.div'
-            { css: toCSS theme props slatStyle
+            { css: theme # toCSS slatStyle <> props.css
             , children: props.content
             , className
             }
         Just interaction@{ href: Nothing } ->
           E.element R.button'
-            { css: toCSS theme props slatStyleInteractive
+            { css: theme # toCSS slatStyleInteractive <> props.css
             , children: props.content
             , onClick: capture_ interaction.onClick
             , tabIndex: interaction.tabIndex
             , className
             }
         Just interaction@{ href: Just href } ->
           E.element R.a'
-            { css: toCSS theme props slatStyleInteractive
+            { css: theme # toCSS slatStyleInteractive <> props.css
             , children: props.content
             , onClick: capture_ interaction.onClick
             , tabIndex: interaction.tabIndex
@@ -72,11 +72,11 @@ slat =
 
   slatStyle =
     Styles.Slat.Hidden.slat
-      >>> styleModifier_ (E.css { appearance: E.none })
+      <<< style_ (E.css { appearance: E.none })
 
   slatStyleInteractive =
     slatStyle
-      >>> Styles.Slat.Hidden._interactive
+      <<< Styles.Slat.Hidden._interactive
 
 _interactive :: SlatInteraction -> PropsModifier SlatProps
 _interactive interaction =
@@ -91,7 +91,7 @@ _interactiveBackground interaction =
     _
       { interaction = Just interaction
       }
-    >>> styleModifier \(LumiTheme theme) ->
+    <<< style \(LumiTheme theme) ->
         E.css
           { "&:hover":
             E.nested

src/Lumi/Styles.purs

@@ -1,40 +1,41 @@
 module Lumi.Styles
-  ( styleModifier
-  , styleModifier_
+  ( StyleModifier
+  , style
+  , style_
   , toCSS
   , module Emotion
   ) where
 
 import Prelude
-import Lumi.Components (PropsModifier, LumiProps, propsModifier)
+
+import Data.Foldable (fold)
+import Lumi.Components (PropsModifier, propsModifier)
 import Lumi.Styles.Theme (LumiTheme)
-import React.Basic.Emotion hiding (element) as Emotion
-
--- | Lift a themed set of styles into a `PropsModifier` for composition with other modifiers.
--- |
--- | Note: A style modifier should generally leave the `props` type unconstrained and take
--- |   configuration as regular arguments instead. Adding constraints to `props` makes it
--- |   difficult to compose style and prop modifiers together across different components,
--- |   where the same field name could mean different things.
-styleModifier :: forall props. (LumiTheme -> Emotion.Style) -> PropsModifier props
-styleModifier f = propsModifier \props -> props { css = f <> props.css }
-
--- | Lift a static set of styles into a `PropsModifier` for composition with other modifiers.
--- |
--- | Note: A style modifier should generally leave the `props` type unconstrained and take
--- |   configuration as regular arguments instead. Adding constraints to `props` makes it
--- |   difficult to compose style and prop modifiers together across different components,
--- |   where the same field name could mean different things.
-styleModifier_ :: forall props. Emotion.Style -> PropsModifier props
-styleModifier_ = styleModifier <<< const
+import React.Basic.Emotion hiding (element,style) as Emotion
+
+type StyleModifier = forall props. PropsModifier props
+
+-- | Lift a themed set of styles into a `StyleModifier` for composition with other modifiers.
+style :: (LumiTheme -> Emotion.Style) -> StyleModifier
+style f = propsModifier \props -> props { css = props.css <> f }
+
+-- | Lift a static set of styles into a `StyleModifier` for composition with other modifiers.
+style_ :: Emotion.Style -> StyleModifier
+style_ = style <<< const
+
+-- | Lift an array of themed styles into a `StyleModifier` for composition with other modifiers.
+styles :: Array (LumiTheme -> Emotion.Style) -> StyleModifier
+styles = style <<< fold
+
+-- | Lift an array of static styles into a `StyleModifier` for composition with other modifiers.
+styles_ :: Array Emotion.Style -> StyleModifier
+styles_ = style_ <<< fold
 
 -- | Flatten a `PropsModifier` and extract the Emotion styles for use with `React.Basic.Emotion.element`.
 -- | This function is mainly used inside component implementations where the `LumiComponent` boundary
 -- | gives way to DOM components or other `ReactComponent`s.
 toCSS ::
-  forall props.
+  PropsModifier () ->
   LumiTheme ->
-  LumiProps props ->
-  PropsModifier props ->
   Emotion.Style
-toCSS theme props m = (m identity props).css theme
+toCSS m = (m identity { className: "", css: mempty }).css

src/Lumi/Styles/Border.purs

@@ -2,18 +2,17 @@ module Lumi.Styles.Border where
 
 import Prelude
 
-import Lumi.Components (PropsModifier)
 import Lumi.Components.Spacing (Space(..))
-import Lumi.Styles (styleModifier, styleModifier_)
+import Lumi.Styles (StyleModifier, style, style_)
 import Lumi.Styles.Box (box)
 import Lumi.Styles.Box as Box
 import Lumi.Styles.Theme (LumiTheme(..))
 import React.Basic.Emotion (color, css, int, nested, none, prop, str)
 
-border :: forall props. PropsModifier props
+border :: StyleModifier
 border =
   box
-    >>> styleModifier \(LumiTheme theme) ->
+    <<< style \(LumiTheme theme) ->
       css
         { label: str "border"
         , borderWidth: int 1
@@ -22,16 +21,16 @@ border =
         , padding: str "8px 16px"
         }
 
-_round :: forall props. PropsModifier props
+_round :: StyleModifier
 _round =
-  styleModifier_
+  style_
     $ css
       { borderRadius: int 4
       }
 
-_topBottom :: forall props. PropsModifier props
+_topBottom :: StyleModifier
 _topBottom =
-  styleModifier_
+  style_
         ( css
             { borderLeft: none
             , borderRight: none
@@ -41,11 +40,11 @@ _topBottom =
             }
         )
 
-_interactive :: forall props. PropsModifier props
+_interactive :: StyleModifier
 _interactive =
   Box._interactive
-    >>> Box._focusable
-    >>> styleModifier \(LumiTheme theme) ->
+    <<< Box._focusable
+    <<< style \(LumiTheme theme) ->
         css
           { "&:hover":
             nested
@@ -54,9 +53,9 @@ _interactive =
                   }
           }
 
-_listSpaced :: forall props. PropsModifier props
+_listSpaced :: StyleModifier
 _listSpaced =
-  styleModifier \(LumiTheme theme) ->
+  style \(LumiTheme theme) ->
     css
       { "&:not(:first-child)":
         nested
@@ -65,9 +64,9 @@ _listSpaced =
               }
       }
 
-_listCompact :: forall props. PropsModifier props
+_listCompact :: StyleModifier
 _listCompact =
-  styleModifier \(LumiTheme theme) ->
+  style \(LumiTheme theme) ->
     css
       { "&:first-child":
         nested