Making CSS class name unique across projects to prevent name collision when hosting multiple project in one document

Created by: tkforce

Is your proposal related to a problem?

Currently we're trying to incorporated multiple CRA applications into one page. The idea is to dynamically fetch the html of multiple react applications hosted under the same domain and append onto a single html document.

The problem is when using css module, the current css class name generation process only consider filename or folder name which can only ensure the uniqueness within that project. But If we have multiple project who happens to have the a same css class name in the same relative path (eg. src/app/app.module.css), same class name MyFolder_MyClass__[hash] will be generated, and If we put all those css from different project onto the same html document, there will be name collision issue.

Describe the solution you'd like

I'd like to request a way to make css class name unique not only within project but also across projects.

Describe alternatives you've considered

• One possible solution is to alter the hash generation function discussed in this thread, unfortunately this can't be done in CRA unless we eject or rewire.
• An alternative is to add project name as part of the input of the hash generation process, similar to what you guys've done to fix webpackJsonp naming conflicting issue, so in this case possibly adding project name into hash generation process in packages/react-dev-utils/getCSSModuleLocalIdent.js?

Additional context

(Write your answer here.)