Move css prop into its own arg

Author: maddie927

bower.json

@@ -19,7 +19,8 @@
     "purescript-indexed-monad": "^1.1.0",
     "purescript-unsafe-reference": "^3.0.1",
     "purescript-aff": "^5.1.1",
-    "purescript-typelevel-prelude": "^5.0.0"
+    "purescript-typelevel-prelude": "^5.0.0",
+    "purescript-colors": "^5.0.0"
   },
   "devDependencies": {
     "purescript-psci-support": "^4.0.0",

examples/basic/src/Basic.purs

@@ -5,7 +5,6 @@ import Effect (Effect)
 import React.Basic.DOM as R
 import React.Basic.Emotion as E
 import React.Basic.Hooks (JSX, ReactComponent, component, element, fragment)
-import Record (merge)
 
 data Size
   = S
@@ -62,15 +61,16 @@ mkSlat = do
   box <- mkBox
   component "Slat" \props ->
     pure
-      $ E.element box
-          { css:
-            E.merge
+      $ E.element
+          ( E.merge
               [ border props
               , text L
               , E.css { flexDirection: E.str "row" }
               , spaceChildrenEvenly
               ]
-          , className: props.className
+          )
+          box
+          { className: props.className
           , content: props.content
           }
 
@@ -84,20 +84,19 @@ mkEx = do
               slatDefaults
                 { content = map (R.span_ <<< pure <<< R.text) [ "Hello", "World" ]
                 }
-          , E.element slat
-              $ merge
-                  { css:
-                    E.merge
-                      [ E.css
-                          { padding: E.int 4
-                          , maxWidth: E.int 200
-                          }
-                      , text S
-                      ]
-                  }
-                  slatDefaults
-                    { content = map (R.span_ <<< pure <<< R.text) [ "Hello", "World" ]
-                    }
+          , E.element
+              ( E.merge
+                  [ E.css
+                      { padding: E.int 4
+                      , maxWidth: E.int 200
+                      }
+                  , text S
+                  ]
+              )
+              slat
+              slatDefaults
+                { content = map (R.span_ <<< pure <<< R.text) [ "Hello", "World" ]
+                }
           ]
 
 type BoxProps
@@ -124,9 +123,8 @@ mkBox :: Effect (ReactComponent BoxProps)
 mkBox = do
   component "Box" \props ->
     pure
-      $ E.element R.div'
-          { css: boxStyle
-          , className: props.className
+      $ E.element boxStyle R.div'
+          { className: props.className
           , children: props.content
           }
 

src/React/Basic/Emotion.purs

@@ -6,7 +6,6 @@ module React.Basic.Emotion
   , class IsStyleProperty
   , prop
   , element
-  , elementKeyed
   , css
   , selector
   , merge
@@ -28,7 +27,9 @@ import Data.Array as Array
 import Data.Either (Either(..))
 import Data.Function.Uncurried (Fn2, runFn2)
 import Foreign as F
+import Prim.Row (class Nub)
 import React.Basic (JSX, ReactComponent)
+import Record as Record
 import Type.Row.Homogeneous (class Homogeneous)
 import Unsafe.Coerce (unsafeCoerce)
 import Web.HTML.History (URL(..))
@@ -85,21 +86,14 @@ class IsStyleProperty a where
 -- | `css` prop.
 element ::
   forall props.
+  Nub
+    ( className :: String, css :: Style | props )
+    ( className :: String, css :: Style | props ) =>
+  Style ->
   ReactComponent { className :: String | props } ->
-  { className :: String, css :: Style | props } ->
+  { className :: String | props } ->
   JSX
-element = runFn2 element_
-
--- | Create a `JSX` node from a `ReactComponent`, by providing the props and a key.
--- |
--- | This function is identical to `React.Basic.elementKeyed` plus Emotion's
--- | `css` prop.
-elementKeyed ::
-  forall props.
-  ReactComponent { className :: String | props } ->
-  { key :: String, className :: String, css :: Style | props } ->
-  JSX
-elementKeyed = runFn2 elementKeyed_
+element s c p = runFn2 element_ c (Record.merge { css: s } p)
 
 foreign import element_ ::
   forall props.