simple-props

A fairly minimal style-props library for CSS-in-JS libraries or inline-styles powered by CSS Variables (Custom Properties).

Installation:

yarn add simple-props

Usage:

import createSimpleProps from 'simple-props'

let simpleProps = createSimpleProps({
  props: {
    // color="primary" // => color: var(--color-primary)
    color: true,
    // bg="primary" // => backgroundColor: var(--color-primary)
    bg: {
      property: 'backgroundColor',
      scale: 'color',
    },
  },
  pseudoProps: {
    _hover: '&:hover',
    _focus: '&:focus',
  },
})

// Either pull in your favorite CSS-in-JS library...
import styled from 'styled-components'

let Box = styled('div')(simpleProps)

// or roll your own with inline-styles:
function Box(props) {
  let styles = simpleProps(props)
  return <div {...props} style={styles} />
}

// or use it to generate styles staticly:
let styles = simpleProps({
  _focus: {
    // $primary will reference a css variable
    color: '$primary',
    // tomato will be output as the raw value
    bg: 'tomato',
  },
  _hover: {
    color: '$secondary',
  },
  bg: 'white',
})

Supports:

• Generating static styles
• Pseudo-props for pseudo selectors
• Responsive prop values for different values at different breakpoints

Tools:

• Typescript
• Babel
• Jest