[Firefox] data attributes are broken / not targeted for styling when building the site using theme-classic

[jprusik]

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

tl;dr Firefox does not yet support :has (at least not by default)

On Firefox, when I'm using the (default) theme-classic theme and locally serve the build files (npm run build && npm run serve), custom data attributes selectors are not styled as described in the Docusaurus docs. When I serve the site via the development server (npm run start), the custom data attributes selectors are styled properly. (I tested this in a fresh/new project)

Also affects the dark/light mode toggle on the live docusaurus site:
#9493 (comment)

After looking around, I tracked the issue down to the built CSS:

custom.css	working generated CSS (dev server)	not working generated CSS (built)

After working with the built/optimized CSS, I was able to determine the rule was preventing the rest of the selectors in the combined rules from being evaluated:

This belongs to the Navbar Search component and it appears the problematic rule was introduced in this PR:
https://github.com/facebook/docusaurus/pull/9385/files#diff-b05b40971ea5fe3fbfdb4aee1fa6f1f4989d591465acbf2d45c84200223c36a8R12-R14

As a workaround, I can eject the component (docusaurus swizzle @docusaurus/theme-classic Navbar/Search --eject) and remove the rule (in src/theme/Navbar/Search/styles.module.css) to restore the expected data attribute styling functionality, but it would be nice if this was not necessary.

Note: I did confirm the data-attributes were correctly being pulled from the query string and added to the document html:

Reproducible demo

No response

Steps to reproduce

1. create a new instance of docusaurus (e.g. npx create-docusaurus@latest del-test classic --typescript)
2. add custom styling using custom data attribute selectors as described in the Docusaurus docs

e.g.

.hidden,
[data-bare='true'] .navbar {display:none;}
[data-bare='true'] .footer {display:none;}
[data-bare='true'] .theme-doc-sidebar-container {display:none;}
[data-bare='true'] .pagination-nav {display:none;}
[data-bare='true'] .theme-doc-markdown > header {display:none;}
[data-hide-sidebar='true'] .theme-doc-sidebar-container {display:none;}
[data-hide-pagination='true'] .pagination-nav {
  display: none;
}

3. build and serve the site (npm run build && npm run serve)
4. add the data-attribute(s) to the query string - the styling rules will not be used

Expected behavior

custom data attributes should be styled as described in the Docusaurus docs when serving the built files and using the theme-classic theme

Actual behavior

custom data attributes are not styled as described in the Docusaurus docs when serving the built files and using the theme-classic theme

Your environment

• Docusaurus version used: v3.0.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Firefox, Node v18.18.2
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Mac OS 14.0

Self-service

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

[jprusik]

I just noticed this looks to be affecting the "dark mode / light mode" toggle icon as well? Live on https://docusaurus.io/:

Live-editing the client CSS fixes it:

Kapture.2023-11-01.at.14.37.30.mp4

[jprusik]

Additional find: It looks like the offending (search bar container) styles get pulled into the final built css even if the component isn't rendered? So even excluding the search bar component when not needed won't solve this, unless the CSS using :has is removed as well.

[slorber]

Thanks for investigating, this will be fixed in #9530