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

Sometimes the color is missing when running yarn build #4319

Closed
Kimi-Gao opened this issue Mar 1, 2021 · 6 comments · Fixed by #4342
Closed

Sometimes the color is missing when running yarn build #4319

Kimi-Gao opened this issue Mar 1, 2021 · 6 comments · Fixed by #4342
Labels
bug An error in the Docusaurus core causing instability or issues with its execution external This issue is caused by an external dependency and not Docusaurus.

Comments

@Kimi-Gao
Copy link

Kimi-Gao commented Mar 1, 2021

🐛 Bug Report

Sometimes the color is missing when running yarn build

Have you read the Contributing Guidelines on issues?

YES

To Reproduce

If possible, use https://new.docusaurus.io to create a CodeSandbox reproducible demo of the bug.

(Write your steps here:)

  1. Add below code in custom.css
.menu .menu__link.menu__link--active:not(.menu__link--sublist) {
  border: 1px solid rgba(167, 167, 167, 0.2);
}
  1. yarn build
  2. Search .menu .menu__link.menu__link--active:not(.menu__link--sublist) in build directory

Expected behavior

.menu .menu__link.menu__link--active:not(.menu__link--sublist) {
  border: 1px solid rgba(167, 167, 167, 0.2);
}

Actual Behavior

image

Your Environment

  • Public source code:
  • Public site url:
  • Docusaurus version used: 2.0.0-alpha.70
  • Environment name and version : node v14.15.5 (npm v6.14.11)
  • Operating system and version (desktop or mobile): macOS big sur 11.1

Reproducible Demo

If possible, use https://new.docusaurus.io to create a CodeSandbox reproducible demo of the bug.

https://codesandbox.io/s/interesting-night-ze576?file=/src/css/custom.css

@Kimi-Gao Kimi-Gao added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Mar 1, 2021
@Simek
Copy link
Contributor

Simek commented Mar 2, 2021

I have spotted the similar issue on the React Native website. After upgrade from alpha.66 to alpha.70 this problem started to appear on main website. On alpha.68 the missing color issue was only present in the PWA app.

The current problematic style and the fix:
Screenshot 2021-03-02 143215

The same part of CSS code, before the fix, but after the deploy:
Screenshot 2021-03-02 143356

@slorber
Copy link
Collaborator

slorber commented Mar 2, 2021

Can you try with USE_SIMPLE_CSS_MINIFIER=true docusaurus build ?

@Kimi-Gao
Copy link
Author

Kimi-Gao commented Mar 3, 2021

@slorber thanks, USE_SIMPLE_CSS_MINIFIER=true docusaurus build works fine, there maybe an issue with advanced minification of CSS bundle.

@slorber
Copy link
Collaborator

slorber commented Mar 3, 2021

Thanks @Kimi-Gao

Can you try to use the @canary version without that env variable?

This bug may have been fixed already

@lex111
Copy link
Contributor

lex111 commented Mar 3, 2021

This is bug in clean-css, which I reported in the issue, so we will wait for release with bug fix for that.

@slorber
Copy link
Collaborator

slorber commented Mar 3, 2021

merged

Try again with the latest @canary and we'll re-open if this is not fixed

@Josh-Cena Josh-Cena added external This issue is caused by an external dependency and not Docusaurus. and removed status: needs triage This issue has not been triaged by maintainers labels Mar 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution external This issue is caused by an external dependency and not Docusaurus.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants