fix(elements): scope docs dt style to main content

[wesleyboar]

Overview

Properly fixes syntax bug that browser and compile were fixing.

Remove unscoped & from html-elements.docs.css.

Details

html-elements.docs.css styles dt with a top-level & dt { ... } rule that has no enclosing selector, so & resolves to :scope (the whole document) instead of scoping to main content like the sibling element styles do. Flagged by Qodo on #680.

Related

• flagged in chore(v3): merge main #680 (comment)

Changes

• deleted the & from dt rule

Testing

1. npm run build
2. Confirm dist/core-styles.docs.css has dt{font-weight:var(--medium)} instead of dt{...}.

[qodo-code-review]

PR Summary by Qodo

Scope docs dt styling to main content selector

🐞 Bug fix 🕐 Less than 10 minutes

AI Description

• Scope docs dt styling to :--main-content instead of global :scope.
• Restore selectors.css import so the custom main-content selector resolves.
• Regenerate dist docs CSS outputs with the corrected selector.

Diagram

graph TD
  A["src/.../html-elements.docs.css"] --> B["tools/selectors.css"] --> C(["Build pipeline"]) --> D["dist/elements/html-elements.docs.css"] --> E["dist/core-styles.docs.css"] --> F["Docs page (main)"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Make selector explicit (avoid top-level nesting)

• ➕ Removes the possibility of & accidentally resolving to :scope again
• ➕ Clearer in compiled output and simpler to reason about
• ➖ Loses consistency with nested patterns used elsewhere in the codebase
• ➖ May encourage mixed styling conventions across element files

2. Add a lint/build guard against top-level `&`

• ➕ Prevents the same class of scoping bug across the codebase
• ➕ Catches issues pre-merge rather than via downstream diffs/tools
• ➖ Requires tooling changes (stylelint/postcss config) and team buy-in
• ➖ May need rule exceptions for legitimate advanced nesting cases

Recommendation: The PR’s approach (restore the selector definitions import and wrap the dt rule in :where(:--main-content)) is the best immediate fix because it matches the established cms pattern and preserves existing authoring style. Consider a follow-up lint/build rule to detect top-level & usage to prevent recurrence.

Files changed (3) +8 / -2

Bug fix (3) +8 / -2

core-styles.docs.cssUpdate compiled docs bundle to scope 'dt' rule to main content +1/-1

Update compiled docs bundle to scope 'dt' rule to main content

• Replaces the unintended global ':scope dt{...}' rule with a main-content-scoped selector in the compiled docs bundle output. Ensures 'dt' font-weight styling only applies within the page’s main content region.

dist/core-styles.docs.css

html-elements.docs.cssUpdate compiled elements docs CSS to use main-content-scoped 'dt' selector +1/-1

Update compiled elements docs CSS to use main-content-scoped 'dt' selector

• Updates the compiled 'html-elements.docs.css' to emit ':where(:is([role=main],main)) dt{...}' instead of ':scope dt{...}'. Aligns the elements docs output with intended scoping semantics.

dist/elements/html-elements.docs.css

html-elements.docs.cssRestore selectors import and wrap 'dt' rule in ':--main-content' +6/-0

Restore selectors import and wrap 'dt' rule in ':--main-content'

• Re-adds the 'selectors.css' import so ':--main-content' is available. Wraps the nested '& dt' rule in ':where(:--main-content)' to prevent '&' from resolving to global ':scope'.

src/lib/_imports/elements/html-elements.docs.css

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

_{To customize comments, go to the Qodo configuration screen, or learn more in the docs.}