Website build gets unwanted styling changes/issues once deployed

[idontknowjs]

🐛 Bug Report

I'm having a website, which looks absolutely fine when running it locally. But unwanted CSS wierd changes occur, whenever the website is deployed as well as the build is served, tested locally.

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

• Clone the specific branch: git clone --branch zowe-docs-v2 https://github.com/zowe/docs-site.git
• Install dependencies: npm install
• Start the server: npm start. Website looks as expected when viewed locally!
• Stop the server and run npm run build
• Serve the build locally: npm run serve. Now the website looks different - having unwanted changes in CSS of certain elements. Also happens when the [website is getting deployed]((https://60aae1b4e29832425469bf29--zowe-docs.netlify.app/).

Expected behavior

The website should look same after getting build as when viewed locally.

While viewing locally, the Zowe Docs text looks bold, font-weight is shown with a value 700 as in the image.

Actual Behavior

1. When inspecting the Zowe Docs element on the deployed version, the font-weight is getting value #700. Not just 700. That is the reason the text is not bold when viewing on deployed link. But looks bold when viewed locally.

2. While viewing any docs:

• The navbar is not able to get correct z-index. When inspecting the navbar z-index: var(--ifm-z-index-fixed). But the final value of z-index is shown as #200. Which is not a valid z-index.
• Badge, headings have similar font-weight issue.
• Similar to navbar, the dropdown is getting z-index value as #100 - instead of just 100 when deployed.

3. Sidebar when toggled on smaller viewport overlaps with landing page.

Expected - when viewed locally vs when deployed:

Your Environment

• Public source code: https://github.com/zowe/docs-site/tree/zowe-docs-v2
• Public site url: https://60aae1b4e29832425469bf29--zowe-docs.netlify.app/
• Docusaurus version used: v2.0.0-beta-0
• Environment name and version (e.g. Chrome as well as Firefox, Node.js 14.17.0):

[lex111]

This is bug in one of our dependencies and has already been fixed. To get fix for this bug, you only need to completely reinstall dependencies of your site, by removing package-lock.json file and then run npm i.

[idontknowjs]

Thank you, it worked! 🚀

[slorber]

@lex111 what dependency caused this issue? Noticed this on the Relay website too: https://relay.dev/docs/

[slorber]

Nevermind just found the cssnano comment: #4826 (comment)