Admonitions reverted back to pre-beta.4 design when using yarn 3 PnP

[factoidforrest]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Switching to yarn 3 (a radically different package manager) , my admonitions now look like those found in the remark-admonitions readme instead of those found in the docusaurus docs.

Why is it that the admonitions in the remark-admonitions github readme look totally different from those in your documentation? If I can understand where that different styling is coming in, maybe I can understand how to fix the issue. Your admonition styling in preset-classic is MUCH better.

Steps to reproduce

Here is our repository and branch with the issue:
https://github.com/lunasec-io/lunasec/tree/speed-up-ci/docs

Expected behavior

Admonitions would always look good

Actual behavior

admonitions look terrible

Your environment

• Public source code: https://github.com/lunasec-io/lunasec/tree/speed-up-ci/docs
• Public site URL: lunasec.io/docs
• Docusaurus version used: Beta 13
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Yarn 3 node 16
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Arch

Reproducible demo

No response

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Hi, the admonition design is done on the Infima side (facebookincubator/infima#155) and it was just that the remark-admonitions README wasn't updated. Could you do yarn why infima and check the version of Infima installed?

I have several websites also using PnP and I've not observed that behavior.

[factoidforrest]

╰─$ yarn why -R infima                                                                                                                                                                                                                                                                                                   1 ↵
└─ docs@workspace:docs
   └─ @docusaurus/preset-classic@npm:2.0.0-beta.ff31de0ff [b5b5d] (via npm:^2.0.0-beta.13 [b5b5d])
      └─ @docusaurus/theme-classic@npm:2.0.0-beta.ff31de0ff [55551] (via npm:2.0.0-beta.ff31de0ff [55551])
         └─ infima@npm:0.2.0-alpha.23 (via npm:0.2.0-alpha.23)

Hm

[factoidforrest]

It looks like preset-classic is pulling in an older version of theme-classic, which is pulling in the old infima@alpha.23 (latest alpha.36). Peculiar. I don't know why there is a difference between the main package name and the "via npm" package name, that is peculiar. More research.

[Josh-Cena]

You are not installing the right Docusaurus version. Please use exact versions rather than caret versions; we had a bad canary version naming and that version 2.0.0-beta.ff31de0ff was actually a pre-release for beta.0 (https://www.npmjs.com/package/@docusaurus/core/v/2.0.0-beta.ff31de0ff)

[Josh-Cena]

Theoretically we could deprecate those canary versions, but in practice there are too many of them🤦‍♂️ You are not the first to encounter this, but in fact we've received very few complaints about pkg managers resolving to a terrible pre-release version. Maybe Yarn also checks release timestamps when doing upgrades? At least I use fixed versions

[factoidforrest]

Thank you very much!