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

fix(cssnano-preset): disable z-index minification #7593

Merged
merged 3 commits into from
Jun 15, 2022

Conversation

dpang314
Copy link
Contributor

@dpang314 dpang314 commented Jun 10, 2022

Pre-flight checklist

Motivation

z-index minification can cause issues when working with the styles of third party libraries.

Test Plan

On the dogfooding page, the text would normally have its z-index minified to 3, but after these changes, it remains 100.

For comparison, one place on the Docusaurus website that already uses z-index is on the showcase page

  1. Go to https://docusaurus.io/showcase and open Chrome DevTools with responsive dimensions and device set to Desktop
  2. Hover over a tag (e.g. "Favorite" or "Open-Source") and then right click on it
  3. If you navigate to the element in DevTools (it should have the role "tooltip")
  4. On the official site the z-index will be 7, but on the site deploy of this pull request, the z-index is 500, which is what it is defined as in the CSS file.

Test links

Dogfooding: https://deploy-preview-7593--docusaurus-2.netlify.app/tests/pages/z-index-tests/
Deploy preview: https://deploy-preview-7593--docusaurus-2.netlify.app/

Related issues/PRs

#7548

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jun 10, 2022
@netlify
Copy link

netlify bot commented Jun 10, 2022

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit aae5fb9
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/62a361980cbfe400084b5699
😎 Deploy Preview https://deploy-preview-7593--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions
Copy link

github-actions bot commented Jun 10, 2022

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟢 94 🟢 100 🟢 100 🟢 100 🟢 90 Report
/docs/installation 🟠 83 🟢 100 🟢 100 🟢 100 🟢 90 Report

@Josh-Cena Josh-Cena added the pr: bug fix This PR fixes a bug in a past release. label Jun 10, 2022
website/docs/cli.md Outdated Show resolved Hide resolved
Copy link
Collaborator

@Josh-Cena Josh-Cena left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM; will wait for @slorber's opinion on this. I don't think sane applications would have much bloat caused by z-index anyway (can't speak for those who add a 0 every time something doesn't work).

@slorber
Copy link
Collaborator

slorber commented Jun 15, 2022

👍 thanks, looks like useful to disable this

It's marked as unsafe in CSSNano doc: https://cssnano.co/docs/optimisations/zindex/

Considering it's hard to ensure users will use be in the safe use-case, let's turn it off.

1 similar comment
@slorber
Copy link
Collaborator

slorber commented Jun 15, 2022

👍 thanks, looks like useful to disable this

It's marked as unsafe in CSSNano doc: https://cssnano.co/docs/optimisations/zindex/

Considering it's hard to ensure users will use be in the safe use-case, let's turn it off.

@slorber slorber merged commit 1f04400 into facebook:main Jun 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CSS minification changes z-index
4 participants