Add Semigroup and Monoid instances to CSS (#103)

Author: arthurxavierx

src/React/Basic/DOM.js

@@ -21,7 +21,3 @@ exports.findDOMNode_ = function(instance) {
 exports.createPortal_ = function(jsx, node) {
   return ReactDOM.createPortal(jsx, node);
 };
-
-exports.mergeStyles = function(styles) {
-  return Object.assign.apply(null, [ {} ].concat(styles));
-};

src/React/Basic/DOM.purs

@@ -15,8 +15,6 @@ module React.Basic.DOM
   , findDOMNode
   , createPortal
   , text
-  , css
-  , mergeStyles
   , module Generated
   ) where
 
@@ -31,7 +29,7 @@ import Effect.Exception (Error, throw, try)
 import Effect.Uncurried (EffectFn1, EffectFn3, runEffectFn1, runEffectFn3)
 import React.Basic (ReactComponentInstance, JSX)
 import React.Basic.DOM.Generated (Props_a, Props_abbr, Props_address, Props_area, Props_article, Props_aside, Props_audio, Props_b, Props_base, Props_bdi, Props_bdo, Props_blockquote, Props_body, Props_br, Props_button, Props_canvas, Props_caption, Props_cite, Props_code, Props_col, Props_colgroup, Props_data, Props_datalist, Props_dd, Props_del, Props_details, Props_dfn, Props_dialog, Props_div, Props_dl, Props_dt, Props_em, Props_embed, Props_fieldset, Props_figcaption, Props_figure, Props_footer, Props_form, Props_h1, Props_h2, Props_h3, Props_h4, Props_h5, Props_h6, Props_head, Props_header, Props_hgroup, Props_hr, Props_html, Props_i, Props_iframe, Props_img, Props_input, Props_ins, Props_kbd, Props_keygen, Props_label, Props_legend, Props_li, Props_link, Props_main, Props_map, Props_mark, Props_math, Props_menu, Props_menuitem, Props_meta, Props_meter, Props_nav, Props_noscript, Props_object, Props_ol, Props_optgroup, Props_option, Props_output, Props_p, Props_param, Props_picture, Props_pre, Props_progress, Props_q, Props_rb, Props_rp, Props_rt, Props_rtc, Props_ruby, Props_s, Props_samp, Props_script, Props_section, Props_select, Props_slot, Props_small, Props_source, Props_span, Props_strong, Props_style, Props_sub, Props_summary, Props_sup, Props_svg, Props_table, Props_tbody, Props_td, Props_template, Props_textarea, Props_tfoot, Props_th, Props_thead, Props_time, Props_title, Props_tr, Props_track, Props_u, Props_ul, Props_var, Props_video, Props_wbr, a, a_, abbr, abbr_, address, address_, area, article, article_, aside, aside_, audio, audio_, b, b_, base, bdi, bdi_, bdo, bdo_, blockquote, blockquote_, body, body_, br, button, button_, canvas, canvas_, caption, caption_, cite, cite_, code, code_, col, colgroup, colgroup_, data', data_, datalist, datalist_, dd, dd_, del, del_, details, details_, dfn, dfn_, dialog, dialog_, div, div_, dl, dl_, dt, dt_, em, em_, embed, fieldset, fieldset_, figcaption, figcaption_, figure, figure_, footer, footer_, form, form_, h1, h1_, h2, h2_, h3, h3_, h4, h4_, h5, h5_, h6, h6_, head, head_, header, header_, hgroup, hgroup_, hr, html, html_, i, i_, iframe, iframe_, img, input, ins, ins_, kbd, kbd_, keygen, keygen_, label, label_, legend, legend_, li, li_, link, main, main_, map, map_, mark, mark_, math, math_, menu, menu_, menuitem, menuitem_, meta, meter, meter_, nav, nav_, noscript, noscript_, object, object_, ol, ol_, optgroup, optgroup_, option, option_, output, output_, p, p_, param, picture, picture_, pre, pre_, progress, progress_, q, q_, rb, rb_, rp, rp_, rt, rt_, rtc, rtc_, ruby, ruby_, s, s_, samp, samp_, script, script_, section, section_, select, select_, slot, slot_, small, small_, source, span, span_, strong, strong_, style, style_, sub, sub_, summary, summary_, sup, sup_, svg, svg_, table, table_, tbody, tbody_, td, td_, template, template_, textarea, textarea_, tfoot, tfoot_, th, th_, thead, thead_, time, time_, title, title_, tr, tr_, track, u, u_, ul, ul_, var, var_, video, video_, wbr) as Generated
-import React.Basic.DOM.Internal (CSS, unsafeCreateDOMComponent) as Internal
+import React.Basic.DOM.Internal (CSS, css, mergeStyles, unsafeCreateDOMComponent) as Internal
 import Unsafe.Coerce (unsafeCoerce)
 import Web.DOM (Element, Node)
 
@@ -114,23 +112,3 @@ foreign import createPortal_ :: Fn2 JSX Element JSX
 -- | Create a text node.
 text :: String -> JSX
 text = unsafeCoerce
-
--- | Create a value of type `CSS` (which can be provided to the `style` property)
--- | from a plain record of CSS attributes.
--- |
--- | For example:
--- |
--- | ```
--- | div { style: css { padding: "5px" } } [ text "This text is padded." ]
--- | ```
-css :: forall css. { | css } -> Internal.CSS
-css = unsafeCoerce
-
--- | Merge styles from right to left. Uses `Object.assign`.
--- |
--- | For example:
--- |
--- | ```
--- | style: mergeCSS [ (css { padding: "5px" }), props.style ]
--- | ```
-foreign import mergeStyles :: Array Internal.CSS -> Internal.CSS

src/React/Basic/DOM/Internal.js

@@ -0,0 +1,5 @@
+"use strict";
+
+exports.mergeStyles = function(styles) {
+  return Object.assign.apply(null, [ {} ].concat(styles));
+};

src/React/Basic/DOM/Internal.purs

@@ -1,12 +1,40 @@
 module React.Basic.DOM.Internal where
 
+import Prelude
+
 import React.Basic (ReactComponent)
 import React.Basic.Events (EventHandler)
 import Unsafe.Coerce (unsafeCoerce)
 
 -- | An abstract type representing records of CSS attributes.
 foreign import data CSS :: Type
 
+instance semigroupCSS :: Semigroup CSS where
+  append a b = mergeStyles [b, a]
+
+instance monoidCSS :: Monoid CSS where
+  mempty = css {}
+
+-- | Create a value of type `CSS` (which can be provided to the `style` property)
+-- | from a plain record of CSS attributes.
+-- |
+-- | For example:
+-- |
+-- | ```
+-- | div { style: css { padding: "5px" } } [ text "This text is padded." ]
+-- | ```
+css :: forall css. { | css } -> CSS
+css = unsafeCoerce
+
+-- | Merge styles from right to left. Uses `Object.assign`.
+-- |
+-- | For example:
+-- |
+-- | ```
+-- | style: mergeCSS [ (css { padding: "5px" }), props.style ]
+-- | ```
+foreign import mergeStyles :: Array CSS -> CSS
+
 -- Standard props shared by all SVG elements.
 -- The string props are from MDN, and the
 -- event handlers are the same as in SharedProps