inline props as styled-component css

README.md

@moimikey

Usage

// valid css properties in camelCase (checked by `css-key`)
const props = {
  gridColumnStart: ...,
  gridColumnEnd: ...,
  gridRowStart: ...,
}

const additionalProps = {
  gridRowEnd: ...
}

// inline all of the props, or segments of props
const Grid = styled.div`
  ${props => css`${inlineProps(props).join(';')}`}
  ${props => css`${inlineProps(additionalProps).join(';')}`}
`

dashboard.js

import * as React from 'react'
import styled from 'styled-components'
import G from './grid'

const Dashboard = () => (
  <G.Grid columns='1fr 1fr'>
    <G.Cell>A</G.Cell>
    <G.Cell>B</G.Cell>
    <G.Cell>C</G.Cell>
    <G.Cell>D</G.Cell>
    <G.Cell>E</G.Cell>
  </G.Grid>
)

export default Dashboard

grid.js

import * as React from 'react'
import styled, { css } from 'styled-components'
import inlineProps from './inline-props'

const Grid = styled.div`
  ${props => css`${inlineProps(props).join(';')}`}
`

const Cell = styled.div`
  ${props => css`${inlineProps(props).join(';')}`}
`

const Cell$ = (props) => {
  const cellProps = {
    gridColumnStart: props.columnStart,
    gridColumnEnd: props.columnEnd,
    gridRowStart: props.rowStart,
    gridRowEnd: props.rowEnd,
    gridColumn: props.column,
    gridRow: props.row,
    gridArea: props.area,
    justifySelf: props.justifySelf,
    alignSelf: props.alignSelf,
    placeSelf: props.placeSelf
  }
  return (
    <Cell {...cellProps}>
      {props.children}
    </Cell>
  )
}

const Grid$ = (props) => {
  const gridProps = {
    display: props.display || 'grid',
    gridTemplateColumns: props.columns,
    gridTemplateRows: props.rows,
    gridColumnStart: props.columnStart,
    gridTemplateAreas: props.templateAreas,
    gridArea: props.area,
    gridColumnGap: props.columnGap,
    gridRowGap: props.rowGap,
    gridGap: props.gap,
    justifyItems: props.justifyItems,
    alignItems: props.alignItems,
    placeItems: props.placeItems,
    justifyContent: props.justifyContent,
    alignContent: props.alignContent,
    placeContent: props.placeContent,
    gridAutoColumns: props.autoColumns,
    gridAutoRows: props.autoRows,
    gridAutoFlow: props.autoFlow,
    grid: props.grid
  }

  return (
    <Grid {...gridProps}>
      {props.children}
    </Grid>
  )
}

export default {
  Grid: Grid$,
  Cell: Cell$
}

inline-props.js

import cssKey from 'css-key'

const inlineProps = (props, { skip = ['theme', 'children'] } = {}) =>
  Object.keys(props).reduce((acc, label, index, arr) => {
    if (new RegExp(skip.join('|')).test(label) || !props[label]) {
      return arr
    }
    arr[index] = `${cssKey(label)}: ${props[label]}`
    return arr
  }, [])

export default inlineProps