TasukuUno / typed-classnames-loader

Webpack loader for classnames auto bind and d.ts auto generation
https://www.npmjs.com/package/typed-classnames-loader
10 stars 1 forks source link

ClassNamesBind is Missing Type String #2

Open thejamespower opened 5 years ago

thejamespower commented 5 years ago

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.

TasukuUno commented 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'