Community scan CSS warnings: triage (display:contents, !important, custom-element selectors)

Open Beginner friendly
#232 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Documentation
Clarity
Clearly specified
Activity status
Active
Tech stack
css
Domain
documentation

Research direction

Review the four warning locations in styles.css and the context in #228. Confirm each warning against the explanations in this issue, then record an accept-or-fix decision for every item through the companion documentation issue. Done means all four warnings have decisions and justifications recorded in AGENTS.md, with no code changes required here.

Written by the indexing model from the issue text.

Description

From the Obsidian community plugin scan, tracked in #228. All four CSS warnings are already understood; the action is a per-item accept-or-fix decision. Justifications get recorded in AGENTS.md by the companion documentation issue (see #228 for the split), so no code changes are expected here.

1. styles.css:65display: contents "only partially supported by Obsidian 1.7.4"

.supernote-toolbar-group uses display: contents so each button wraps individually within the toolbar's flex-wrap instead of the whole group wrapping as one block (added for the button-group wrapping fix in #157). The scanner's 1.7.4 baseline is below this plugin's minAppVersion (1.8.7), so every Obsidian version that can install the plugin already has the feature in its Chromium; "partially supported" reflects the long-standing display: contents quirk classification, not a real gap for us.

Options: accept + document (recommended), or restructure the toolbar-group layout to avoid display: contents (revisits #157's fix — not obviously worth it).

2. styles.css:110!important on .internal-embed.supernote-embed { display: flex !important; }

Single-property use, already documented in a long comment in styles.css itself: it's the narrowest robust way to beat both Obsidian core's .internal-embed:not(.image-embed) { display: block; } and Live Preview's .markdown-source-view.mod-cm6 .cm-content > * { display: block; !important; } reset (confirmed via headless-Obsidian testing during the SupernoteEmbed rewrite, #183/PR #185). The styles.css comment also explains why matching Live Preview's exact selector specificity instead is fragile against Obsidian changing its own selector.

Options: accept + document (recommended), or chase specificity.

3. styles.css:46,133,159,184 — "unknown type selector" supernote-viewer / supernote-atelier-viewer

These are the plugin's own custom elements (the web components from #183), styled as host elements in the light DOM — the selectors are correct by construction, and the CSS linter simply doesn't know about custom elements. Not fixable without renaming the elements, which would be a breaking change to the web component's public API.

Options: accept + document (only sensible option).

Dominant language
TypeScript
Stars
330
Forks
25
Avg merge
6h 36m
Merged PRs (30d)
13

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from philips/supernote-obsidian-plugin

All issues in philips/supernote-obsidian-plugin

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.