[docs] Add background to inline code tags

[aarongarciah]

Closes #4009
Previous attempt: #4043

before	after

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@4978
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@4978
  

commit: 4b8a6d0

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	0B(0.00%)	0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,181.81 ms -217.04 ms^(-15.5%) | Renders: 50 ⁽⁺⁰⁾ | Paint: 1,789.05 ms -310.12 ms^(-14.8%)

Test	Duration	Renders
Slider mount (300 instances)	147.02 ms ▼-55.88 ms(-27.5%)	3 (+0)
Popover mount (300 instances)	63.08 ms ▼-21.37 ms(-25.3%)	1 (+0)
Checkbox mount (500 instances)	62.04 ms ▼-21.29 ms(-25.6%)	1 (+0)
Select open (500 options)	51.22 ms ▼-14.35 ms(-21.9%)	14 (+0)

8 tests within noise — details

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	4b8a6d0
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6a296edc60eaae0008d27b01
😎 Deploy Preview	https://deploy-preview-4978--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[aarongarciah]

@dav-is the new local rehype plugin seems the only reliable way of doing this without introducing any runtime. The idea is that instances like the one in the screenshot below (HTML tags) are kept without a background.

If you have any ideas on how to make this simpler, please share. CSS-only solutions required checking for certain .pl-* class names being present inside the <code> tag.

[dav-is]

If you have any ideas on how to make this simpler

Are you opposed to using :has() selectors? The performance should be fine, given it only needs to check one level deep on inline code blocks. It's set to become Baseline Widely Avaiable in July (supported in all browsers for 30 months).

code[data-inline]:not(:has(> .di-ht)) {
  /* */
}

If not, your PR uses the enhancers API as intended 👍🏼

[aarongarciah]

Are you opposed to using :has() selectors?

@dav-is that was my first attempt, but targeting .pl-* classes instead of the docs infra ones (.di-*). It felt wrong, but it's growing on me. Seems way simpler, although more brittle.

[aarongarciah]

@dav-is you convinced me. Updated the PR to stick to the CSS-only approach.