Skip to content

Commit 4bfaa6a

Browse files
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 themes
1 parent 731f108 commit 4bfaa6a

File tree

72 files changed

+1222
-1028
lines changed

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 changed

docs/plans/2026-02-24-bem-to-css-modules-batch2.md

Lines changed: 427 additions & 0 deletions
Large diffs are not rendered by default.

frontend/apps/remark42/app/components/comment-form/__actions/comment-form__actions.css

Lines changed: 0 additions & 9 deletions
This file was deleted.

frontend/apps/remark42/app/components/comment-form/__button/_type/_preview/comment-form__button_type_preview.css

Lines changed: 0 additions & 7 deletions
This file was deleted.

frontend/apps/remark42/app/components/comment-form/__button/_type/_send/comment-form__button_type_send.css

Lines changed: 0 additions & 9 deletions
This file was deleted.

frontend/apps/remark42/app/components/comment-form/__button/comment-form__button.css

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.

frontend/apps/remark42/app/components/comment-form/__counter/comment-form__counter.css

Lines changed: 0 additions & 8 deletions
This file was deleted.

frontend/apps/remark42/app/components/comment-form/__error/comment-form__error.css

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.

frontend/apps/remark42/app/components/comment-form/__field/comment-form__field.css

Lines changed: 0 additions & 29 deletions
This file was deleted.

0 commit comments

Comments
 (0)