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.