Add support for em and rem units

Author: PavelGavlik

main.coffee

@@ -54,6 +54,13 @@ setAutoprefixer = (prefixOptions = '> 1%, last 2 versions, Firefox ESR, Opera 12
   catch e
     'Parse error – try to check the syntax'
 
+setNumberValue = (number) ->
+  converted = parseInt(number, 10)
+  if not number.match(/^\d+(\.\d+)?$/)
+    return 'Please enter numeric value'
+  else
+    return converted
+
 
 _prefixed = ($, property, value) ->
   setAutoprefixer() unless prefixer
@@ -72,7 +79,13 @@ class CSS
     prefixed = _.partial(_prefixed, $$)
     declaration = _.partial(_declaration, $$, @options.vendorPrefixes, prefixed)
     comment = _.partial(_comment, $, @options.showComments)
-    unit = _.partial(css.unit, @options.unit)
+
+    rootValue = switch @options.unit
+      when 'px' then 0
+      when 'em' then @options.emValue
+      when 'rem' then @options.remValue
+    unit = _.partial(css.unit, @options.unit, rootValue)
+
     convertColor = _.partial(_convertColor, @options)
     fontStyles = _.partial(css.fontStyles, declaration, convertColor, unit, @options.quoteType)
 
@@ -149,4 +162,4 @@ class CSS
       endSelector()
 
 
-module.exports = {defineVariable, renderVariable, setAutoprefixer, renderClass: CSS}
+module.exports = {defineVariable, renderVariable, setAutoprefixer, setNumberValue, renderClass: CSS}

package.json

@@ -27,7 +27,7 @@
   "license": "MIT",
   "dependencies": {
     "autoprefixer-core": "^4.0.2",
-    "octopus-helpers": "^1.0.0"
+    "octopus-helpers": "^1.5.0"
   },
   "settings": {
     "inheritFontStyles": {
@@ -55,6 +55,31 @@
       "type": "boolean",
       "default": true
     },
+    "unit": {
+      "type": "select",
+      "options": [
+        "px",
+        "em",
+        "rem"
+      ],
+      "default": "px"
+    },
+    "emValue": {
+      "description": "1 em = x px — Ammount of pixels that correspond to one em. Em value is **not** relative to parent element.",
+      "type": "text",
+      "default": 16,
+      "validate": "setNumberValue",
+      "showFor": "unit",
+      "showWhen": "em"
+    },
+    "remValue": {
+      "description": "1 rem = x px — Ammount of pixels that correspond to one rem",
+      "type": "text",
+      "default": 16,
+      "validate": "setNumberValue",
+      "showFor": "unit",
+      "showWhen": "rem"
+    },
     "autoprefixer": {
       "description": "Defines which vendor prefixes will be generated. Read more on [Github](https://github.com/postcss/autoprefixer).",
       "type": "text",
@@ -100,15 +125,6 @@
         "\""
       ],
       "default": "\""
-    },
-    "unit": {
-      "type": "hidden",
-      "options": [
-        "px",
-        "em",
-        "rem"
-      ],
-      "default": "px"
     }
   },
   "bundledDependencies": [