Styled-api NPM

styled-api

Constraint based styling api based on styled-system.

What's this?

styled-api seeks to allow designers and developers to expose a styling api for a component. This is a proof of concept implementation based off of Adam Morse's idea.

Motivation

Often times a component has styles that are customizable, and styles that aren't. Take a button for example, it might make sense to change colors, margin, padding, border radius and font size. With styled-api, you can expose these as a public api, leaving all other styling private and unable to be manipulated by the component's user.

Installation

npm install --save styled-api

Usage

const styled = require('styled-api')

const Button = styled('button')({
  padding: true, // Apply subset of theme
  fontSize: true,
  fontWeight: [400, 600],
  color: true,
  bg: true
})

Prop Types

If desired, you can add prop type validation to your styled api. This is recommended in development environments so a descriptive error is raised when an invalid theme prop is passed. Otherwise, invalid props are simply ignored.

const {
  propTypes
} = require('styled-api')

Box.propTypes = propTypes(api, theme)

Cartesian Product

styled-api exposes an additional component that can document all possible combinations based on its styling api.

const { xProduct } = require('styled-api')

const combinations = xProduct({
  margin: true,
  borderWidth: [0, 1, 2, 9999],
  borderStyle: ['solid', 'dotted'],
  borderColor: true
})

combinations.map(props => <Button {...props} children='Click me' />)