Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ClassNamesBind is Missing Type String #2

Open
thejamespower opened this issue Jul 23, 2019 · 1 comment
Open

ClassNamesBind is Missing Type String #2

thejamespower opened this issue Jul 23, 2019 · 1 comment

Comments

@thejamespower
Copy link

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.

@thejamespower thejamespower changed the title ClassNamesBind is Missing type string ClassNamesBind is Missing Type String Jul 23, 2019
@TasukuUno
Copy link
Owner

@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'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants