Sidebar styling issue on latest version

[ptrhck]

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

As outlined in supabase/supabase#5138, the sidebar css styling is not applied properly. It works on 2.0.0-beta.6 version but not the latest version. Has there been any API change I could not find or is this a bug?

Steps to reproduce

1. Clone repository https://github.com/ptrhck/docusaurus-supabase
2. yarn install
3. yarn start

Expected behavior

The categories should be styled as on supbase.com/docs.

Actual behavior

See the screenshot supabase/supabase#5138 where the category is not styled correctly. It can be achieved downgrading to 2.0.0-beta.6

Your environment

• Public source code: https://github.com/ptrhck/docusaurus-supabase
• Public site URL: --
• Docusaurus version used: 2.0.0-beta.15
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Node.js 16
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

Reproducible demo

No response

Self-service

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

[Josh-Cena]

Hey, it's indeed because of a minor breaking change that altered the sidebar's DOM structure: #5830 each category link is now wrapped in another div.

You have selectors that are too exact:

https://github.com/supabase/supabase/blob/3aabe4f97dbbf59ed7b4c1e498f9e88a198a85ae/web/src/css/custom.css#L483

That's exactly why we now have stable class names as added in #5642. These stable class names are semantic and will never break.

[Josh-Cena]

With such a big CSS file, you should definitely first search through all your CSS selectors and check if they are all applied correctly. We now have some kind of CSS styling guidelines that should help people avoid breaking changes: https://docusaurus.io/docs/next/styling-layout#global-styles

Supabase has a lot of decent customizations. We are more than welcome to know their pain points and how we can provide more features to help them achieve a more robust design.

[slorber]

We have a place to report customization use-cases: #5468

We'll try to make this less fragile over time, please help us do so

[ptrhck]

@Josh-Cena

Totally understand the change, thanks for pointing out! I also understand that using class names is the better approach. For a quick test, how can the linked selector be changed to target under consideration of the new div?

[Josh-Cena]

I don't really know, it looks a bit complicated to me. A quick fix is to insert a > .menu__list-item-collapsible before every > .menu__link, but I suggest you inspect how you can refactor the whole selector to use the theme-doc-sidebar-item-category-level-1 class instead.