Better support for CSS Modules

[roccoluke]

I initially started using classnames and discovered classcat about 3 years ago and always preferred it due to its size and speed.

However, classnames offer a very handy method called bind to make it easier to work with CSS Modules.

Do you have plans to implement something similar?

[jorgebucaran]

@roccoluke I think I know about that method, but never understood how to use it. Could you explain how it works or why is it useful?

[roccoluke]

@jorgebucaran, as it turns out, it is not really needed after all. I managed to make it work by simply passing in the imported module style property like so.

...
...
import styles from './button.module.scss'
...
...
const Button = ({
  block,
  children,
  className,
  context = 'primary',
  disabled,
  loading,
  onClick,
  outline,
  size,
  type = 'button'
}) => {

  if (!children) {
    return null
  }

  const classes = cc([{
    'btn-block': block,
    [`btn-${ context }`]: !outline && context,
    [`btn-outline-${ context }`]: outline,
    [`btn-${ size }`]: size,
    'btn-loading': loading
  }, className, styles.btn])

  return (
    <button
      className={ classes }
      disabled={ disabled }
      onClick={ onClick }
      type={ type }
    >

      {
        loading
          ? <Spinner className="btn-spinner" />
          : (
            <span className="btn-content">
              { children }
            </span>
          )
      }
    </button>
  )
}

export default Button

Was not aware that this will be possible but I did not find any issues so far. I think this feature request can be closed as it is not required.