Brings 25 legacy BEM-style class selectors into compliance with the
extension's wp-* CSS namespace convention (per CLAUDE.md "Extension
isolation"). Renames .cbm__* / .cnm__* / .dvm__* / .fvm__* / .wcm__*
in _modal-head.css and .tpl__* in _modal-template-ctrls.css, plus
every consumer reference across .vue / .ts / .css / .test files.
Also renames the root element classes .wcm and .fvm (referenced from
unscoped display-prefs.css) to .wp-wcm / .wp-fvm, and clears both
entries from the LEGACY_ALLOWLIST in check-css-isolation.mjs now that
they are properly prefixed.
pnpm check:css-isolation now exits 0; all gates clean.
Four-layer extension isolation now documented in CLAUDE.md:
- .wp-* class namespace + .var-N helpers (primary)
- @layer wp-extension wrap on standalone CSS (cascade priority)
- WeakMap stashes for litegraph object metadata (collision-proof)
- node.properties string keys for persistent state only
scripts/check-css-isolation.mjs walks src/components, src/extension,
src/widgets and flags any unscoped top-level class selector that
doesn't start with .wp- or .var-N. Runs via pnpm check:css-isolation.
Two pre-existing BEM-style class roots (.wcm, .fvm) are allowlisted
with TODO notes — renaming them to .wp-* prefix is a follow-up task.
The script is intentionally light (no stylelint dep — ~80MB of dev
deps avoided). Catches the most common convention violation; deeper
issues (e.g. scoped block leaks via :deep, scope-breaking @import)
remain a manual-review concern.
DumiFlex