system-classnames

Styled system props for utility-based functional CSS libraries

npm i system-classnames

// example for use with Primer 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 Basscss, Tachyons, and Primer are available to use out-of-the box.

import map from 'system-classnames/basscss'

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

import map from 'system-classnames/tachyons'

import map from 'system-classnames/primer'

import map from 'system-classnames/bootstrap'

Related

• Basscss
• Tachyons
• Primer
• Solid
• Styled System

---

MIT License