Commit 4bfaa6a
committed
Migrate remaining BEM components to CSS Modules (final batch)
Migrate the last 4 BEM components to CSS Modules, completing the
migration and removing bem-react-helper from the project entirely.
Components migrated:
- subscribe-by-email (1 BEM CSS file -> 1 module)
- comment-form + markdown-toolbar (20 BEM CSS files -> 2 modules)
- comment (19 BEM CSS files -> expanded existing module)
- root (10 BEM CSS files -> expanded existing module)
Consolidates ~50 BEM CSS files into 4 new + 2 expanded CSS Module files.
Removes bem-react-helper dependency — all components now use clsx for
conditional class composition.
Dead CSS cleanup during migration:
- Orphaned comment-actions selectors in comment theme CSS (already migrated)
- Dead BEM modifiers: comment_disabled, comment_pinned, comment_guest
- Dead element: comment__user-id (CSS existed but never used in TSX)
- Dead button type classes: comment-form__button_type_preview/_send
- Dead mix values: auth-email-login-form__back-button, comment-form__email-dropdown
Key implementation details:
- comment_highlighting stays global via :global() (imperatively added by classList)
- Bare .dark/.light theme class preserved on root wrapper (8+ modules depend on it)
- raw-content.css kept as global utility CSS (syntax highlighting)
Visual regression verification on built artefacts:
- remark.css: 43,779 -> 36,106 bytes (-17.5%)
- last-comments.css: 18,792 -> 13,955 bytes (-25.7%)
- remark.js: 256,709 -> 253,637 bytes (-1.2%)
- last-comments.js: 121,726 -> 120,795 bytes (-0.8%)
- Total: 441,006 -> 424,493 bytes (-3.7%)
- Screenshot comparison: pixel-identical across light/dark themes1 parent 731f108 commit 4bfaa6a
File tree
72 files changed
+1222
-1028
lines changed- docs/plans
- frontend
- apps/remark42
- app/components
- comment-form
- __actions
- __button
- _type
- _preview
- _send
- __control-panel
- __counter
- __error
- __field-wrapper
- __field
- __markdown-link
- __markdown
- __preview-wrapper
- __preview
- __rss
- __subscribe-by-email
- _simple
- _theme
- _dark
- _light
- markdown-toolbar-icons
- comment
- __body
- __info
- __input
- __status
- __text
- __time
- __user-id
- __username
- _collapsed
- _editing
- _replying
- _theme
- _dark
- _light
- _useless
- _view
- _admin
- _preview
- _user
- root
- __copyright
- __input
- __pinned-comments
- __pinned-comment
- __preloader
- __threads
- __thread
- _theme
- _dark
- _light
Some content is hidden
Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
72 files changed
+1222
-1028
lines changedLarge diffs are not rendered by default.
Lines changed: 0 additions & 9 deletions
This file was deleted.
Lines changed: 0 additions & 7 deletions
This file was deleted.
Lines changed: 0 additions & 9 deletions
This file was deleted.
Lines changed: 0 additions & 8 deletions
This file was deleted.
frontend/apps/remark42/app/components/comment-form/__control-panel/comment-form__control-panel.css
Lines changed: 0 additions & 4 deletions
This file was deleted.
Lines changed: 0 additions & 8 deletions
This file was deleted.
Lines changed: 0 additions & 6 deletions
This file was deleted.
frontend/apps/remark42/app/components/comment-form/__field-wrapper/comment-form__field-wrapper.css
Lines changed: 0 additions & 3 deletions
This file was deleted.
Lines changed: 0 additions & 29 deletions
This file was deleted.
0 commit comments