Adding in CSS functions and adding to Radio CSS

ui/package.json

@@ -49,6 +49,7 @@
     "postcss-at-rules-variables": "0.0.25",
     "postcss-cssnext": "^2.8.0",
     "postcss-for": "^2.1.1",
+    "postcss-functions": "^2.1.1",
     "postcss-import": "8.0.2",
     "postcss-loader": "^1.0.0",
     "postcss-mixins": "^5.4.0",

ui/src/components/radio/index.js

@@ -37,10 +37,10 @@ const Radio = ({
 
 Radio.propTypes = {
   checked: React.PropTypes.bool,
-  label: React.PropTypes.node,
   className: React.PropTypes.string,
   disabled: React.PropTypes.bool,
   id: React.PropTypes.string,
+  label: React.PropTypes.node,
   name: React.PropTypes.string,
   onChange: React.PropTypes.func,
   style: React.PropTypes.object,

ui/src/components/radio/style.css

@@ -15,8 +15,8 @@
   }
 
   & span {
-    margin-left: 30px;
+    margin-left: remCalc(30);
-    margin-right: 20px;
+    margin-right: remCalc(20);
 
     @add-mixin pseduo-element before, var(--radio-radius), var(--radio-radius), -1px, auto, auto, -30px {
       border: var(--radio-border-size) solid white;

ui/webpack/base.js

@@ -15,6 +15,16 @@ const plugins = {
           require("postcss-import")(),
           require('postcss-at-rules-variables')(),
           require('postcss-modules-values'),
+          require('postcss-functions')({
+            functions: {
+              remCalc: function(pixels) {
+                pixels = pixels.replace('px', '');
+                const baseValue = 16;
+                const remSize = pixels / baseValue;
+                return `${remSize}rem`;
+              }
+            },
+          }),
           require('postcss-mixins')(),
           require('postcss-for'),
           require('postcss-cssnext')()

ui/yarn.lock

@@ -2651,6 +2651,16 @@ glob-parent@^2.0.0:
   dependencies:
     is-glob "^2.0.0"
 
+glob@^5.0.15:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
@@ -3688,7 +3698,7 @@ minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
 
-minimatch@^3.0.0, minimatch@^3.0.2:
+minimatch@^3.0.0, minimatch@^3.0.2, "minimatch@2 || 3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
   dependencies:
@@ -4417,6 +4427,15 @@ postcss-for@^2.1.1:
     postcss "^5.0.0"
     postcss-simple-vars "^2.0.0"
 
+postcss-functions:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-2.1.1.tgz#f9b64d3b5690f6795fe42a180496805375b7a840"
+  dependencies:
+    glob "^5.0.15"
+    object-assign "^4.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.3"
+
 postcss-import@8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-8.0.2.tgz#59cf54d92cfd25ea96a82ee1e404acad6196fc22"
@@ -4699,7 +4718,7 @@ postcss-unique-selectors@^2.0.2:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.1.3, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"