Package Exports

system-classnames

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (system-classnames) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

system-classnames

Styled system props for utility-based functional CSS libraries

npm i system-classnames

// example for use with primer.css and React
import createMapper from 'system-classnames'

const map = createMapper({
  breakpoints: [ null, 'sm', 'md', 'lg', 'xl' ],
  props: [
    'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my',
    'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py',
    'text', 'bg'
  ],
  getter: ({ breakpoint, prop, value }) => breakpoint
    ? [ prop, breakpoint, value ].join('-')
    : [ prop, value ].join('-')
})

const Box = props =>
  <div {...map(props)} />

// using the Box component
<Box
  p={[ 2, 3 ]}
  mb={3}
  text='white'
  bg='blue'
/>

Library-specific modules

Mapper modules for Primer and Basscss are available to use out-of-the box.

import map from 'system-classnames/primer'

const Box = props =>
  <div {...map(props)} />

import map from 'system-classnames/basscss'

const Box = props =>
  <div {...map(props)} />

MIT License