CSS Module Class Lister
Add multiple classes from CSS module style objects ✨
Adding multiple classes from CSS module style objects has never been easier and as readable
Installation
npm install css-module-class-lister
Usage
;; // console.log(styles);// sample console output =>// {// App: 'App_App__3TjUG',// 'd-flex-c': 'App_d-flex-c__xpDp1',// }; const classes = ; // Can be any name, doesn't have to be classes const App = { return <div className=> <p>Blah Blah Blah</p> </div> ;}; ;
Note: 'bold' is ignored since it is not defined in styles.module.css
Edit: As of version 1.1.0 undefined classes are kept and added but obviously without the hash
This results in:
Blah Blah Blah
Note: The created function accepts multiple individual strings, arrays and spaced strings or a mixture of these as valid input. Eg. All the different argument formats below are valid.
const classes = ; // Can be any name, doesn't have to be classes const App = { return <div className=> OR <div className=> OR <div className=> OR <div className= > OR <div className= > OR <div className= >
It can be used for conditional classes by having your condition statement generate an array of classes which you use as the argument for your classes(or whatever you name it) function.
E.g.
let conditionalClasses = ;if condition conditionalClasses; else conditionalClasses;
OR
let conditionalClasses = ; if condition conditionalClasses = 'a-class' 'b-class'; else conditionalClasses = 'b-class' 'c-class';
Then use conditionalClasses like this:
const App = { return <div className=> <p>Blah Blah Blah</p> </div> ; }
License
MIT © Dinesh Pandiyan