Open thejamespower opened 5 years ago
@thejamespower Thank you for your issue and PR! And I'm sorry for the late reply.
Yes, classnames/bind
returns a string class when it is not defined in CSS Modules!
// without typed-classnames-loader
import style from './empty.css';
import classNamesBind from 'classnames/bind';
const cx = classNamesBind.bind(style);
cx('default-button'); // 'default-button'
However, if we accept string type like your PR (#3), we can put string not defined in style. I think it will be less valuable as typed-classnames-loader because TypeScript never throw error.
So I think it will be better to use both classnames/bind
and classnames
!
// with typed-classnames-loader
import { classNames, classNamesBind } from './style.css';
classNames('default-button', classNamesBind({ button: true, })); // 'default-button button--from--css-modules'
cx
is short-hand of classNamesBind
and cn
is one of classNames
.
// with typed-classnames-loader
import { cn, cx } from './style.css';
cn('default-button', cx({ button: true, })); // 'default-button button--from--css-modules'
When using ClassNamesBind, you should be able to pass a string class straight through to the component. In all examples you do this, but it just so happens that the string already matched a class defined in the CSS Modules ('button') so everything works fine. Example below:
const buttonClass = classNamesBind('default-button', { button: true, });
This should apply
.default-button
in vanilla HTML/CSS and.button
from the CSS modules.