Mixins

Creating functionality and implementing Mixins

- Adding postcss-import module
- Creating `Lib` directory for mixins, functions etc
- Creating pseudo element mixin
- Implementing pseduo element mixin on radio buttons
- Adding in postcss-debug js config file

ui/.postcss.js

@@ -4,6 +4,7 @@ module.exports = function (postcss) {
   return postcss([
       require('postcss-at-rules-variables')(),
       require('postcss-modules-values'),
+      require("postcss-import"),
       require('postcss-mixins')(),
       require('postcss-for'),
       require('postcss-cssnext')(),

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-import": "^8.1.0",
     "postcss-loader": "^1.0.0",
     "postcss-mixins": "^5.4.0",
     "postcss-modules-values": "^1.2.2",

ui/src/components/radio/index.js

@@ -5,7 +5,7 @@ const styles = require('./style.css');
 const Radio = ({
   name,
   value,
-  children,
+  label,
   checked,
   disabled = false,
   className,
@@ -30,14 +30,14 @@ const Radio = ({
         type='radio'
         value={value}
       />
-      <span>{children}</span>
+      <span>{label}</span>
     </label>
   );
 };
 
 Radio.propTypes = {
   checked: React.PropTypes.bool,
-  children: React.PropTypes.node,
+  label: React.PropTypes.node,
   className: React.PropTypes.string,
   disabled: React.PropTypes.bool,
   id: React.PropTypes.string,

ui/src/components/radio/style.css

@@ -1,3 +1,5 @@
+@import '../../lib/mixins.css';
+
 :root {
   --radio-radius: 20px;
   --radio-border-size: calc( var(--radio-radius) / 4 );
@@ -15,19 +17,11 @@
   & span {
     margin-left: 30px;
     margin-right: 20px;
-    position: relative;
 
-    &:before {
+    @add-mixin pseduo-element before, var(--radio-radius), var(--radio-radius), -1px, auto, auto, -30px {
-      content: '';
       border: var(--radio-border-size) solid white;
       border-radius: 50%;
       box-shadow: 0 0 0 1px var(--border-color);
-      display: inline-block;
-      height: var(--radio-radius);
-      left: -30px;
-      position: absolute;
-      top: -1px;
-      width: var(--radio-radius);
     }
   }
 
@@ -35,10 +29,8 @@
     display: none;
     visibility: hidden;
 
-    &:checked {
+    &:checked ~ span:before {
-      & ~ span:before {
       background: var(--dot-color);
     }
   }
 }
-}

ui/src/lib/mixins.css

@@ -0,0 +1,22 @@
+@define-mixin pseduo-element $type, $width:auto, $height:auto, $top:auto, $right:auto, $bottom:auto, $left:auto {
+  /**
+   TODO:
+   - Can't apply absolute positoning attributes - errors out with 'Missed semicolon' ????
+  */
+  position: relative;
+
+  &::$(type) {
+
+    bottom: $bottom;
+    content: '';
+    display: inline-block;
+    height: $height;
+    left: $left;
+    position: absolute;
+    right: $right;
+    top: $top;
+    width: $width;
+
+    @mixin-content;
+  }
+}

ui/webpack/base.js

@@ -12,6 +12,7 @@ const plugins = {
     options: {
       postcss: {
         plugins: [
+          require("postcss-import")(),
           require('postcss-at-rules-variables')(),
           require('postcss-modules-values'),
           require('postcss-mixins')(),