Add support for CSS Modules

Proposal

I would like to propose support for CSS modules using the solution from reactstrap.

Meaning for Product

We are building a snippet, which can be integrated into any arbitrary website. This has often resulted in the css of the snippet overriding that of the enclosing site or vice versa. A solution for this would be support for CSS modules.

Solution and code

This could be done by globally setting the CSS Modules as follows:

let globalCssModule;

export function setGlobalCssModule(cssModule) {
  globalCssModule = cssModule;
}

We could optionally not set the CSS Module globally but rather make it an optional property in the components.

This globalCSSModule could then be used to update the Component classNames with the following function:

export function mapToCssModules(className = '', cssModule = globalCssModule) {
  if (!cssModule) return className;
  return className
    .split(' ')
    .map(c => cssModule[c] || c)
    .join(' ');
}

All of these methods were lifted off the reactstrap library. Sources:

• Methods
• Example application

Implementation

I am ready to create a pull request with the proposed implementation.

[ericgio]

Hi @rawroland and thanks for the detailed proposal. I haven’t used CSS modules extensively, so I’m not totally sure how they’d integrate with this project and what implications that would have more broadly for consumers of the library. For example, would things continue to work correctly for those using the UMD builds or not using modules in their own projects? I understand that style conflicts can be a problem, though I’ve tried to address that by scoping the styles to the component. Can you explain more about the specific issues you’re running into?

[rawroland]

@ericgio Sorry for not responding for so long. It is ok to close the issue, since we found a workaround for our problem which really does not belong in the base package. Looking forward to using a new version of the package.