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

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

Open
tkforce opened this issue Jun 10, 2020 · 2 comments

Comments

@tkforce
Copy link

tkforce commented Jun 10, 2020

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

Additional context

(Write your answer here.)

@yipei1028
Copy link

Second that. Is there any solution to avoid this problem without ejecting?

@an-parubets
Copy link

I have same problem when was run several React application in same document. At now I have fix collision of className by manual prefix for every className selector. But my solution looks like a crutch.

PS: In a wait for solution from CRA.

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

No branches or pull requests

3 participants