Add combinators for length units and !important (#3)

* Deprecate 'int' and 'num'

* Add combinators for length units

* Add combinator for making a property !important

bower.json

@@ -16,7 +16,8 @@
     "purescript-react-basic": "^13.0.0",
     "purescript-unsafe-reference": "^3.0.1",
     "purescript-colors": "^5.0.0",
-    "purescript-foreign": "^5.0.0"
+    "purescript-foreign": "^5.0.0",
+    "purescript-numbers": "^7.0.0"
   },
   "devDependencies": {
     "purescript-psci-support": "^4.0.0",

src/React/Basic/Emotion.js

@@ -34,3 +34,5 @@ exports.elementKeyed_ = (component, props) =>
 exports.global = Emotion.Global;
 
 exports.css = _homogeneousDict => Emotion.css;
+
+exports.important = prop => typeof prop === "string" ? prop + " !important" : prop;

src/React/Basic/Emotion.purs

@@ -7,6 +7,7 @@ module React.Basic.Emotion
   , prop
   , element
   , css
+  , important
   , nested
   , merge
   , str
@@ -18,15 +19,21 @@ module React.Basic.Emotion
   , unset
   , url
   , color
+  , px, px', cm, mm, inches, pt, pc
+  , em, ex, ch, rem, vw, vh, vmin, vmax, percent
   ) where
 
 import Prelude
+
 import Color (Color, cssStringHSLA)
 import Control.Monad.Except (runExcept)
 import Data.Array as Array
 import Data.Either (Either(..))
 import Data.Function.Uncurried (Fn2, runFn2)
+import Data.Int as Int
+import Data.Number.Format (toString) as Number
 import Foreign as F
+import Prim.TypeError (class Warn, Text)
 import React.Basic (JSX, ReactComponent)
 import Type.Row.Homogeneous (class Homogeneous)
 import Unsafe.Coerce (unsafeCoerce)
@@ -113,6 +120,8 @@ foreign import global :: ReactComponent { styles :: Style }
 
 foreign import css :: forall r. Homogeneous r StyleProperty => { | r } -> Style
 
+foreign import important :: StyleProperty -> StyleProperty
+
 nested :: Style -> StyleProperty
 nested = unsafeCoerce
 
@@ -122,10 +131,16 @@ merge = unsafeCoerce
 str :: String -> StyleProperty
 str = unsafeCoerce
 
-int :: Int -> StyleProperty
+int
+  :: Warn (Text "`int` is deprecated and may be removed in future versions. Prefer one of the unit combinators like `px` or `em` instead.")
+  => Int
+  -> StyleProperty
 int = unsafeCoerce
 
-num :: Number -> StyleProperty
+num
+  :: Warn (Text "`int` is deprecated and may be removed in future versions. Prefer one of the unit combinators like `px` or `em` instead.")
+  => Number
+  -> StyleProperty
 num = unsafeCoerce
 
 fallbacks :: Array StyleProperty -> StyleProperty
@@ -145,3 +160,77 @@ url (URL url') = str ("url(" <> url' <> ")")
 
 color :: Color -> StyleProperty
 color = str <<< cssStringHSLA
+
+-- Absolute length units
+
+-- | Pixels. This function does not take a `Number` because approaches to
+-- | subpixel rendering vary among browser implementations.
+px :: Int -> StyleProperty
+px x = str $ Int.toStringAs Int.decimal x <> "px"
+
+-- | Pixels and subpixels.
+-- |
+-- | WARNING: Approaches to subpixel rendering vary among browser
+-- | implementations. This means that non-integer pixel values may be displayed
+-- | differently in different browsers.
+px' :: Number -> StyleProperty
+px' x = str $ Number.toString x <> "px"
+
+-- | Centimeters
+cm :: Number -> StyleProperty
+cm x = str $ Number.toString x <> "cm"
+
+-- | Milimeters
+mm :: Number -> StyleProperty
+mm x = str $ Number.toString x <> "mm"
+
+-- | Inches (1in ≈ 2.54cm)
+inches :: Number -> StyleProperty
+inches x = str $ Number.toString x <> "in"
+
+-- | Points (1pt = 1/72 of 1in)
+pt :: Number -> StyleProperty
+pt x = str $ Number.toString x <> "pt"
+
+-- | Picas (1pc = 12 pt)
+pc :: Number -> StyleProperty
+pc x = str $ Number.toString x <> "pc"
+
+-- Relative length units
+
+-- | Relative to the font-size of the element (2em means 2 times the size of
+-- | the current font).
+em :: Number -> StyleProperty
+em x = str $ Number.toString x <> "em"
+
+-- | Relative to the x-height of the current font (rarely used).
+ex :: Number -> StyleProperty
+ex x = str $ Number.toString x <> "ex"
+
+-- | Relative to the width of the "0" (zero) character.
+ch :: Number -> StyleProperty
+ch x = str $ Number.toString x <> "ch"
+
+-- | Relative to font-size of the root element.
+rem :: Number -> StyleProperty
+rem x = str $ Number.toString x <> "rem"
+
+-- | Relative to 1% of the width of the viewport.
+vw :: Number -> StyleProperty
+vw x = str $ Number.toString x <> "vw"
+
+-- | Relative to 1% of the height of the viewport.
+vh :: Number -> StyleProperty
+vh x = str $ Number.toString x <> "vh"
+
+-- | Relative to 1% of viewport's smaller dimension.
+vmin :: Number -> StyleProperty
+vmin x = str $ Number.toString x <> "vmin"
+
+-- | Relative to 1% of viewport's larger dimension.
+vmax :: Number -> StyleProperty
+vmax x = str $ Number.toString x <> "vmax"
+
+-- | Relative to the parent element.
+percent :: Number -> StyleProperty
+percent x = str $ Number.toString x <> "%"