css-class-composer
v1.0.0
Published
Use this super tiny package to compose CSS class variants with ease.
Downloads
21
Maintainers
Readme
CSS Class Composer
Use this super tiny package to compose CSS class variants with ease.
- Easy to use
- Fully typed
- Small bundle size
- No third-party dependencies
Getting started
Install with npm or any other package manager
npm install css-class-composer
Usage
import { ccc } from 'css-class-composer';
const button = ccc('block cursor-pointer', {
variants: {
intent: {
primary: 'text-white bg-blue-400',
secondary: 'text-grey-900 bg-grey-300'
},
size: {
regular: 'px-6 py-4',
large: 'px-8 py-6'
},
state: {
active: 'border'
},
},
compounds: [
{
intent: 'primary',
state: 'active',
class: 'border-blue-500 shadow-md'
}
],
default: {
intent: 'primary',
size: 'regular'
}
});
button();
// Returns: "block cursor-pointer text-white bg-blue-400 px-6 py-4"
button({ intent: 'secondary', size: 'large' });
// Returns: "block cursor-pointer text-grey-900 bg-grey-300 px-8 py-6"
button({ state: { active: true }});
// Returns: "block cursor-pointer border-blue-500 shadow-md text-white bg-blue-400 px-6 py-4 border"