fix(specificity): re-order rules to run in proper css order

Author: casserni

src/Box.tsx

@@ -1,7 +1,5 @@
 import {
   bgColor,
-  borderColor,
-  borderRadius,
   borders,
   bottom,
   boxShadow,
@@ -148,31 +146,35 @@ export interface IBoxProps {
 }
 
 export const Box = styled<IBoxProps, 'div'>('div')(
-  borderRadius,
-  borderColor,
+  // Order matters
+  // @ts-ignore
   bgColor,
+  textColor,
   borders,
-  bottom,
   boxShadow,
-  css,
-  cursor,
-  display,
-  flex,
+
   fontSize,
   fontWeight,
-  height,
+  textAlign,
+
+  space,
+  display,
+  flex,
+  cursor,
+  opacity,
+  zIndex,
+
+  position,
+  top,
+  right,
+  bottom,
   left,
+
+  height,
+  width,
   maxHeight,
   maxWidth,
   minHeight,
   minWidth,
-  opacity,
-  position,
-  right,
-  space,
-  textAlign,
-  textColor,
-  top,
-  width,
-  zIndex
+  css
 );

src/Icon.tsx

@@ -6,8 +6,6 @@ import { IBorderRadius, IBorderWidth, IFontSize, IFullSpace, ValueOf } from './t
 
 import {
   bgColor,
-  borderColor,
-  borderRadius,
   borders,
   bottom,
   css,
@@ -85,20 +83,23 @@ export const Icon = styled<IIconProps>((props: IIconProps) => {
     <FontAwesomeIcon className={className} icon={icon} spin={spin} pulse={pulse} flip={flip} rotation={rotation} />
   );
 })(
-  borderRadius,
-  borderColor,
+  // @ts-ignore
   bgColor,
+  textColor,
   borders,
-  bottom,
-  css,
-  fontSize,
-  left,
-  opacity,
-  position,
-  right,
+
   space,
+  fontSize,
   textAlign,
-  textColor,
+
+  position,
   top,
-  zIndex
+  right,
+  bottom,
+  left,
+
+  opacity,
+  zIndex,
+
+  css
 );

src/utils/rules.ts

@@ -116,13 +116,6 @@ export const bgColor = styleColor({
   cssProperty: 'backgroundColor',
 });
 
-export const borderRadius = style({
-  prop: 'radius',
-  cssProperty: 'borderRadius',
-  key: 'base.radius',
-  transformValue: px,
-});
-
 export const boxShadow = style({
   prop: 'shadow',
   cssProperty: 'boxShadow',
@@ -147,9 +140,9 @@ const overflowDefault = style({
 
 export const overflow = compose(
   // @ts-ignore FIXME
+  overflowDefault,
   overflowX,
-  overflowY,
-  overflowDefault
+  overflowY
 );
 
 export const zIndex = style({
@@ -190,17 +183,27 @@ export const borderLeft = style({
   transformValue: getBorder,
 });
 
+export const borderRadius = style({
+  prop: 'radius',
+  cssProperty: 'borderRadius',
+  key: 'base.radius',
+  transformValue: px,
+});
+
 export const borderColor = styleColor({
   prop: 'borderColor',
 });
 
+// use compose to ensure proper css order
 export const borders = compose(
   // @ts-ignore FIXME
   border,
   borderTop,
   borderRight,
   borderBottom,
-  borderLeft
+  borderLeft,
+  borderColor,
+  borderRadius
 );
 
 // @ts-ignore FIXME
@@ -293,12 +296,18 @@ const getSpaceValue = scale => propVal => {
 // @ts-ignore FIXME
 export const space = props => {
   // test for spacing props, so m* and p*
-  const keys = Object.keys(props).filter(key => /^[mp][trblxy]?$/.test(key));
   // get space configuration from theme
   const scale = get(props.theme, 'base.space');
   // function to convert propVal -> cssVal
   const getStyle = getSpaceValue(scale);
 
+  // to ensure proper order
+  const keys = [
+    ...Object.keys(props).filter(key => /^[mp]$/.test(key)),
+    ...Object.keys(props).filter(key => /^[mp][xy]$/.test(key)),
+    ...Object.keys(props).filter(key => /^[mp][trbl]$/.test(key)),
+  ];
+
   // return all style functions for every direction
   return keys
     .map(key => {