Remove all global css pollution

[Airkro]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Motivation

Global css messes up many things, please consider removing them (rewrite in classes), it will save the day.

Self-service

• I'd be willing to do some initial work on this proposal myself.

[Josh-Cena]

Agree that this is a valid concern that I have been asked on Discord. However, several things missing from the proposal that I wish we can get response on:

1. Impact. Is there a really strong use-case that's hindered by the global CSS? Won't all: revert work if you want a part of the page unstyled?
2. Possible implementation. How would we work to implement your proposal? Many of these elements are directly generated from Markdown (e.g. <kbd>), which is also the primary focus of Docusaurus. Does that mean we should map all Markdown elements to one with a class name?

Global css messes up many things

This is an assertion and I don't see exact what it messes up

please consider removing them (rewrite in classes)

You should report that on the Infima side, the CSS framework developed alongside Docusaurus. In Docusaurus we are more concerned about how CSS classes can interoperate with the current way that HTML is generated.

[slorber]

IMHO we could scope those rules under a .infima-app class or something used at the root of the Docusaurus app.

But would this solve your problem @Airkro ?

Please describe your actual problem. Include screenshots if possible to show broken styling.

[Josh-Cena]

we could scope those rules under a .infima-app class or something used at the root of the Docusaurus app.

The OP wants to easily opt-out from Infima. Scoping probably doesn't prevent the tag selectors from being applied to every element within the <Layout>

[tobemaster56]

I meet this problem too

We are building our own React component library. There are a lot of documents based on docusaurus. Thanks to the mdx of docusaurus, we can easily render React components in the document. We need to create a lot of demos. We have a pagination component, the li element is used, but in the demo, the style is a bit abnormal. I found out that it was a problem with the global styles of docusaurus.

I created a discussion css style isolation about it, with detailed instructions and screenshots, and I tried all:revert, but it didn't work.

While we can override the relevant styles to solve this kind of problem temporarily, I really feel that this is not the best solution and is a bit ugly. Soon after I discovered the problem, another colleague had the same problem, a calendar demo in which the style of the tables in the component was contaminated, and it took him a lot of time to find out the cause.

I hope there is a once and for all way to be free from global styles.

After discussing it with @Josh-Cena , I tried to use [react-shadow-root]https://www.npmjs.com/package/react, but in the end, it failed, and for our component library, our styles were also global and blocked by shadow-dom. I gave up

In the end, I still hope that the official will come up with an elegant plan, and I hope to hear a response as soon as possible.

[slorber]

Agree, it should be possible to mount a component library in Docusaurus and expect it to not be affected by Docusaurus styles (without requiring the usage of an iframe)

We'll look into this.

In the meantime please report here any Docusaurus style that is affecting the styling of your components. The more exhaustive the list, the better.

[Josh-Cena]

What about having a special class in Infima that reverts all Infima styles? I still find value in certain global styles instead of moving everything to class names.

[Airkro]

Sorry for not responding. I integrated Swagger UI with Docusaurus. I have to render Swagger UI in shadow dom to avoid CSS pollution.

[Josh-Cena]

Closing this since it's unactionable on Docusaurus side. We can discuss in Infima instead, see also facebookincubator/infima#8

I think the easiest solution is to provide an OOTB Sandbox component which is basically a shadow DOM? A reset utility class can do the job as well.