Merge branch 'master' into single-file

docs/table.md

@@ -28,6 +28,7 @@ Function Name | Prop       | CSS Property    | Theme Field
 `textAlign`   | `textAlign`    | `text-align`   | none
 `lineHeight`  | `lineHeight` | `line-height` | `lineHeights`
 `fontWeight`  | `fontWeight` | `font-weight` | `fontWeights`
+`fontStyle`  | `fontStyle` | `font-style` | none
 `letterSpacing` | `letterSpacing` | `letter-spacing` | `letterSpacings`
 
 ## Layout
@@ -54,6 +55,7 @@ Function Name | Prop       | CSS Property    | Theme Field
 `flexDirection` | `flexDirection` | `flex-direction` | none
 `flex` | `flex` | `flex` (shorthand) | none
 `alignContent`  | `alignContent` | `align-content` | none
+`justifyItems`  | `justifyItems` | `justify-items` | none
 `justifySelf` | `justifySelf` | `justify-self` | none
 `alignSelf` | `alignSelf` | `align-self` | none
 `order` | `order` | `order` | none
@@ -68,11 +70,13 @@ Function Name | Prop       | CSS Property    | Theme Field
 `gridColumnGap` | `gridColumnGap` | `grid-column-gap` | `space`
 `gridColumn` | `gridColumn` | `grid-column` | none
 `gridRow` | `gridRow` | `grid-row` | none
+`gridArea` | `gridArea` | `grid-area` | none
 `gridAutoFlow` | `gridAutoFlow` | `grid-auto-flow` | none
 `gridAutoRows` | `gridAutoRows` | `grid-auto-rows` | none
 `gridAutoColumns` | `gridAutoColumns` | `grid-auto-columns` | none
 `gridTemplateRows` | `gridTemplateRows` | `grid-template-rows` | none
 `gridTemplateColumns` | `gridTemplateColumns` | `grid-template-columns` | none
+`gridTemplateAreas` | `gridTemplateAreas` | `grid-template-areas` | none
 
 ## Background
 
@@ -97,6 +101,7 @@ Function Name | Prop       | CSS Property    | Theme Field
 `borders` | `borderLeft` | `border-left` | `borders`
 `boxShadow` | `boxShadow` | `box-shadow` | `shadows`
 `opacity`   | `opacity` `o` | `opacity`  | `opacity`
+`overflow` | `overflow` | `overflow` | none
 
 ## Position
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-system",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Design system utilities for styled-components, glamorous, and other css-in-js libraries",
   "main": "dist/index.js",
   "sideEffects": false,

src/index.js

@@ -311,6 +311,10 @@ export const fontWeight = style({
   key: 'fontWeights'
 })
 
+export const fontStyle = style({
+  prop: 'fontStyle'
+})
+
 export const letterSpacing = style({
   prop: 'letterSpacing',
   key: 'letterSpacings',
@@ -396,6 +400,10 @@ export const alignContent = style({
   prop: 'alignContent'
 })
 
+export const justifyItems = style({
+  prop: 'justifyItems'
+})
+
 export const justifyContent = style({
   prop: 'justifyContent'
 })
@@ -477,6 +485,14 @@ export const gridTemplateRows = style({
   prop: 'gridTemplateRows'
 })
 
+export const gridTemplateAreas = style({
+  prop: 'gridTemplateAreas'
+})
+
+export const gridArea = style({
+  prop: 'gridArea'
+})
+
 // borders
 const getBorder = n => num(n) && n > 0 ? n + 'px solid' : n
 
@@ -538,6 +554,10 @@ export const opacity = style({
   prop: 'opacity'
 })
 
+export const overflow = style({
+  prop: 'overflow'
+})
+
 // backgrounds
 export const background = style({
   prop: 'background'
@@ -613,6 +633,7 @@ export const styles = {
   textAlign,
   lineHeight,
   fontWeight,
+  fontStyle,
   letterSpacing,
   display,
   maxWidth,
@@ -628,6 +649,7 @@ export const styles = {
   verticalAlign,
   alignItems,
   alignContent,
+  justifyItems,
   justifyContent,
   flexWrap,
   flexBasis,
@@ -646,6 +668,9 @@ export const styles = {
   gridAutoRows,
   gridTemplateColumns,
   gridTemplateRows,
+  gridTemplateAreas,
+  gridArea,
+  // borders
   border,
   borderTop,
   borderRight,
@@ -656,6 +681,7 @@ export const styles = {
   borderRadius,
   boxShadow,
   opacity,
+  overflow,
   background,
   backgroundImage,
   backgroundPosition,

system-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "system-components",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Create consistent design-system-driven React UI components",
   "main": "dist/index",
   "scripts": {
@@ -44,6 +44,7 @@
     "roots": [
       "<rootDir>"
     ],
+    "testURL": "http://localhost",
     "testMatch": [
       "**/test.js"
     ],

system-components/src/System.js

@@ -2,7 +2,10 @@ import React from 'react'
 import { styles, util } from 'styled-system'
 
 const funcNames = Object.keys(styles)
-const unique = arr => [...new Set(arr)]
+const unique = arr => {
+  const seen = {};
+  return arr.concat().filter(item => seen.hasOwnProperty(item) ? false : (seen[item] = true));
+}
 const isPOJO = n => typeof n === 'object' && n !== null && !Array.isArray(n)
 
 const dict = Object.keys(styles)