Styled system props for utility-based functional CSS libraries
npm install system-classnamesStyled system props for utility-based functional CSS libraries
``sh`
npm i system-classnames
`jsx
// 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 =>
jsx
// using the Box component
mb={3}
text='white'
bg='blue'
/>
`Library-specific modules
Mapper modules for Basscss, Tachyons, and Primer are available to use out-of-the box.
jsx
import map from 'system-classnames/basscss'const Box = props =>
`jsx
import map from 'system-classnames/tachyons'
`jsx
import map from 'system-classnames/primer'
`jsx
import map from 'system-classnames/bootstrap'
``- Basscss
- Tachyons
- Primer
- Solid
- Styled System
---
MIT License