Rearrange the styles to deal with a bug in the ExtractTextPlugin

where inconsistent import order fails the build:

webpack-contrib/extract-text-webpack-plugin#80

lib/components/ui/styles.mcss

@@ -0,0 +1,3 @@
+@import './buttons.mcss';
+@import './colours.mcss';
+@import './typography.mcss';

src/components/fields/common/header/header.mcss

@@ -1,3 +1,5 @@
+@value styles: '../../../ui/styles.mcss';
+
 .base {
   margin-bottom: 1rem;
 }
@@ -7,7 +9,10 @@
 }
 
 .hint {
-  composes: small from '../../../ui/typography.mcss';
-  composes: sans from '../../../ui/typography.mcss';
-  color: #999;
+  composes: greyLightColor from styles;
+  composes: small sans from styles;
+}
+
+.error {
+  composes: errorColor from styles;
 }

src/components/fields/common/header/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import Label from '../../../ui/label'
+import classNames from 'classnames'
 import styles from './header.mcss'
 
 /**
@@ -18,10 +19,22 @@ const FieldHeader = React.createClass({
     if (!label && !hint) {
       return null
     }
+    let labelClassNames = classNames(styles.base,
+      styles.label,
+      {
+        [`${styles.error}`]: this.props.error,
+      }
+    )
+    let hintClassNames = classNames(styles.base,
+      styles.hint,
+      {
+        [`${styles.error}`]: this.props.error,
+      }
+    )
     return (
       <div className={styles.base}>
-        {(label) ? <Label htmlFor={id} className={styles.label}>{label}</Label> : null}
-        {(hint) ? <span className={styles.hint}>{hint}</span> : null}
+        {(label) ? <Label htmlFor={id} className={labelClassNames}>{label}</Label> : null}
+        {(hint) ? <span className={hintClassNames}>{hint}</span> : null}
       </div>
     )
   }

src/components/fields/shared.mcss

@@ -1,3 +1,3 @@
 .base {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.6em;
 }

src/components/ui/colours.mcss

@@ -1,3 +1,34 @@
+/* Greys */
+
+@value greyLight: #ccc;
+@value greyTint: #f1f1f1;
+
+.greyLightColor {
+  color: greyLight;
+}
+
+.greyLightBackground {
+  background-color: greyLight;
+}
+
+.greyLightBorder {
+  border-color: greyLight;
+}
+
+.greyTintBackground {
+  background-color: greyTint;
+}
+
+/*
+
+primaryAlternate
+secondary
+secondaryAlternate
+error
+greys
+
+*/
+
 /* Primary */
 
 @value primary: #333;
@@ -14,6 +45,7 @@
   border-color: primary;
 }
 
+
 /* Error */
 
 @value error: #eb4d5c;
@@ -35,27 +67,35 @@
   background-color: errorLight;
 }
 
-/* Greys */
 
-@value greyLight: #ccc;
-@value greyTint: #f1f1f1;
+/* Highlight */
 
-.greyLightColor {
-  color: greyLight;
+@value highlight: #7fc2ea;
+@value highlightLight: #dff1fc;
+
+.highlightColor {
+  color: highlight;
 }
 
-.greyLightBackground {
-  background-color: greyLight;
+.highlightBorder {
+  border-color: highlight;
 }
 
-.greyLightBorder {
-  border-color: greyLight;
+.highlightBackground {
+  background-color: highlight;
 }
 
-.greyTintBackground {
-  background-color: greyTint;
+.highlightLightColor {
+  color: highlightLight;
+}
+
+.highlightLightBorder {
+  border-color: highlightLight;
 }
 
+.highlightLightBackground {
+  background-color: highlightLight;
+}
 
 /* Blends */
 
@@ -69,21 +109,3 @@
 .lightBlendColor {
   color: lightBlend;
 }
-
-/*
-primaryAlternate
-secondary
-secondaryAlternate
-error
-greys
-
-*/
-
-
-/*
-
-.greyLight
-.grey
-.greyDark
-
-*/

src/components/ui/input-boxes.mcss

@@ -1,13 +1,15 @@
-@value colours: './colours.mcss';
-@value error, errorLight, greyLight, greyTint from colours;
+@value styles: './styles.mcss';
+
+@value error, errorLight, greyLight, greyTint, lightBlend from styles;
 
 .inputBox {
-  composes: sans normal from './typography.mcss';
-  composes: primaryColor greyLightBorder greyTintBackground from './colours.mcss';
+  composes: sans normal from styles;
+  composes: primaryColor greyLightBorder greyTintBackground from styles;
   box-shadow: inset 0px 2px 0px 0px rgba(20,15,10,0.03);
   border-width: 0;
   border-top-width: 1px;
   border-top-style: solid;
+  border-radius: 0;
   padding: 0.6em 0.7em 0.8em;
   width: 100%;
   transition-property: border-color, background-color;
@@ -17,42 +19,40 @@
 /* States */
 
 .error {
-  composes: errorColor errorBorder errorLightBackground from './colours.mcss';
+  composes: errorColor errorBorder errorLightBackground from styles;
 }
   .error::placeholder {
     color: rgba(0,0,0,0.2);
   }
 
 .focus {
-  composes: darkBlendColor from './colours.mcss';
-  border-color: #7fc2ea;
-  background-color: #dff1fc;
+  composes: darkBlendColor highlightBorder highlightLightBackground from styles;
   outline: none;
 }
 
   .focus::placeholder {
-    color: rgba(0,0,0,0.2);
+    color: lightBlend;
   }
 
 
 /* Sizes */
 
 .mini {
-  composes: mini from './typography.mcss';
+  composes: mini from styles;
 }
 
 .small {
-  composes: small from './typography.mcss';
+  composes: small from styles;
 }
 
 .normal {
-  composes: normal from './typography.mcss';
+  composes: normal from styles;
 }
 
 .large {
-  composes: large from './typography.mcss';
+  composes: large from styles;
 }
 
 .huge {
-  composes: huge from './typography.mcss';
+  composes: huge from styles;
 }

src/components/ui/input/input.mcss

@@ -1,5 +1,5 @@
 .input {
-  composes: inputBox from '../input-boxes.mcss'
+  composes: inputBox from '../input-boxes.mcss';
 }
 
 /* States */

src/components/ui/select/select.mcss

@@ -0,0 +1,65 @@
+@value styles: '../styles.mcss';
+@value greyLight, highlight from styles;
+
+.label {
+  position: relative;
+}
+  .label:after {
+    top: 50%;
+    right: 1em;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-color: transparent;
+    border-top-color: greyLight;
+    border-width: 0.3em;
+    margin-left: -0.3em;
+    margin-top: -0.1em;
+  }
+
+.labelError:after {
+  border-top-color: error from styles;
+}
+.labelFocus:after {
+  border-top-color: highlight;
+}
+
+.select {
+  composes: inputBox from '../input-boxes.mcss';
+  appearance: none;
+}
+
+/* States */
+
+.error {
+  composes: error from '../input-boxes.mcss';
+}
+
+.focus {
+  composes: focus from '../input-boxes.mcss';
+}
+
+/* Sizes */
+
+.mini {
+  composes: mini from '../input-boxes.mcss';
+}
+
+.small {
+  composes: small from '../input-boxes.mcss';
+}
+
+.normal {
+  composes: normal from '../input-boxes.mcss';
+}
+
+.large {
+  composes: large from '../input-boxes.mcss';
+}
+
+.huge {
+  composes: huge from '../input-boxes.mcss';
+}

src/components/ui/styles.mcss

@@ -0,0 +1,3 @@
+@import './buttons.mcss';
+@import './colours.mcss';
+@import './typography.mcss';