CSS minification changes z-index

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

Hey Docusaurus Team,

thanks for your amazing work 😃

We realized recently that docusaurus cleans up z-indices in our custom css that we are loading via customCss: require.resolve('./src/css/custom.css'). My question is: How can I disable the z-index modification? This might be a good feature but can lead to bugs when you are using other third party that bring their own css. We are using '@docusaurus/preset-classic'.

Self-service

• I’d be willing to address this documentation request myself.

[Josh-Cena]

Ah, I see. I think we should find a way to configure it, then.

[moklick]

It works as intended but I think that it’s not a good default for a platform like docusaurus. As the zindex plugin docs point out it “is unsafe as it could potentially clash with other stylesheets, or JavaScript injected styles”. In our case we are using a third party library on the front page that brings its own CSS and we can’t set our z-indices properly because they get changed by the minification process.

Let’s say you want .element-a and .element-b on top of an element that comes from another library with a real z-index: 1000, you can’t achieve it, because:

.element-a {
  z-index: 1000;
}

.element-b {
 z-index: 1001;
}

will be changed to:

.element-a {
  z-index: 1;
}

.element-b {
 z-index: 2;
}