ALEC-306: Bundle Feather styles so the UI survives the PrimeVue-based OpenNMS host - #172
Merged
Merged
Conversation
… OpenNMS host The OpenNMS 37 web UI migrated from FeatherDS to PrimeVue and no longer ships any Feather CSS. The extension relied on the host page for both the Feather component base styles (.btn, inputs, tabs, ...) and the :root --feather-* theme variables, so on the new host it rendered completely unstyled. - feather-styles.ts (first import of main.ts): bundles every Feather component stylesheet into the extension's style.css. On a Feather-based host these duplicate identical host rules, so they are harmless there. - Theme variables: the new host defines no --feather-* vars but still stamps open-light/open-dark as a class on <html> and flips it with its dark-mode toggle. When no host theme is detected, inject the matching vendored theme at runtime and follow the class with a MutationObserver so dark mode tracks the host toggle. On Feather hosts (which do define the vars) nothing is injected and the host theme keeps working. - The vendored theme copies strip @font-face: the referenced .ttf files (1.8MB) would be base64-inlined into the bundle, and the host already provides fonts. https://opennms.atlassian.net/browse/ALEC-306
The ui package had eslint configured but no way to run it. Add lint and lint:fix scripts and clear every error so they run clean: - auto-fixes: quote style (utils.ts), inferrable type annotations (AlecService.ts, useUserStore.ts) - tests/setup.ts: give the jsdom observer stubs explicit no-op bodies - .eslintrc: allow the single-word Timeline component name instead of renaming a shipped component - drop six unused imports flagged by no-unused-vars The 38 vue-scoped-css/no-unused-selector warnings are left: the rule's static analysis cannot see dynamically bound classes, and pruning shipped selectors risks visual regressions. Regenerated bundles included. https://opennms.atlassian.net/browse/ALEC-306
- Stamp feather-styles on the plugin root: @featherds/styles scopes its base rules (typography, sr-text, links) under that class, which Feather hosts put on <body> but the PrimeVue host never does — without it the bundled base CSS matched nothing in production. Scoping it to our root also keeps those rules off host pages. - Vendor only the :root variable blocks of the themes: the full files also carry global spacing utilities (.mt-*, .p-*, ...) that the 37 host no longer ships but whose class names its templates still use, so injecting them document-wide restyled host pages (e.g. Provisioning). - Pin @featherds/radio and @featherds/textarea exact (were ^0.10.17): a lockfile refresh could float them past the vendored 0.10.17 theme. - Probe two sentinel vars (--feather-primary and --feather-background) so a stray single-var definition elsewhere can't suppress injection, and skip the <style> rewrite when the theme class did not change. https://opennms.atlassian.net/browse/ALEC-306
Two contrast problems surfaced on the dark theme once the Feather chip CSS was bundled: - Severity filter chips keep a fixed light pastel background in both themes, but FeatherChip's label element sets the theme text color (near-white in dark mode) which beat the inherited black — white on pastel pink was unreadable. A global descendant rule keeps every severity chip label black in both themes. - The severity text/border accents (-color classes) use the saturated light palette, which lacks contrast on dark surfaces (#cc0000 on #0a0c1b is about 2.4:1). Dark mode now lifts them to lighter variants keyed off the open-dark theme class the host stamps on <html>. https://opennms.atlassian.net/browse/ALEC-306
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Jira: https://opennms.atlassian.net/browse/ALEC-306
Makes the UI extension's styling self-sufficient instead of relying on the host page's Feather CSS. The OpenNMS 37 web UI moved from FeatherDS to PrimeVue and ships no Feather CSS, which left the plugin rendering unstyled and partly unreadable in dark mode.
ui/src/feather-styles.ts(first import ofmain.ts) bundles every Feather component stylesheet into the extension'sstyle.css(271 kB → 324 kB); on Feather-based hosts these duplicate identical rules.--feather-*variables, the matching vendored theme is injected at runtime, keyed off theopen-light/open-darkclass the OpenNMS 37 host still stamps on<html>, and aMutationObserverfollows the host's dark-mode toggle live.@font-faceso 1.8 MB of.ttffiles are not base64-inlined into the bundle.Verified on a local OpenNMS 37: situation list and configuration render with correct Feather styling in light and dark mode; all 86 UI unit tests pass.