Migrate 4 BEM components to CSS Modules#2013
Merged
Conversation
…from BEM to CSS Modules Consolidate legacy BEM CSS files into CSS Modules for 4 components: - dropdown/__item: 1 CSS file → dropdown-item.module.css - list-comments: 1 CSS file → list-comments.module.css (removed unused comments-list class that had no CSS rules) - comment-form/__subscribe-by-rss: 1 CSS file → subscribe-by-rss.module.css, removed dead titleClass prop and dead __rss-link directory - settings: 10 CSS files → settings.module.css, removed dead .settings__blocked-users-username CSS rule Built artefact comparison (master vs branch): - 83 of 89 files in /srv/web/ are byte-identical (all locale bundles, SVGs, HTML pages unchanged) - 6 files differ: remark.css/js/mjs and last-comments.css/js/mjs - CSS changes are class name hash shifts (e.g. G_A → H_A) caused by webpack's module ordering, plus 3 new var() fallback values added by the CSS modules build; all property:value pairs are preserved - JS changes are minified variable name shifts (O ↔ A, I ↔ L) from changed import order; no logic changes - Visual comparison (pixel-by-pixel screenshots of both light and dark themes on the demo page) shows 0 different pixels - Bundle sizes: remark.css -626 bytes, remark.js -512 bytes, last-comments.css -16 bytes (dead CSS removed)
size-limit report 📦
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #2013 +/- ##
==========================================
- Coverage 62.17% 62.16% -0.01%
==========================================
Files 132 132
Lines 3035 3037 +2
Branches 769 728 -41
==========================================
+ Hits 1887 1888 +1
- Misses 1144 1145 +1
Partials 4 4 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
paskal
added a commit
that referenced
this pull request
Feb 24, 2026
Migrate 8 components from BEM to CSS Modules: - button (7 BEM files -> 1 module) - dropdown (7 BEM files -> 1 module) - thread (3 BEM files -> 1 module) - auth-panel (2 BEM files -> 1 module) - dropdown-item, list-comments, subscribe-by-rss, settings (from batch 0 PR #2013) Consolidates 19 BEM CSS files into 8 CSS Module files. Uses clsx for conditional class composition, replacing bem-react-helper's b() calls. Class naming follows the established convention: BEM block = .root, elements = camelCase, modifiers = camelCase. Visual regression verification on built artefacts: - remark.css: 43,779 -> 43,299 bytes (480 bytes smaller) - last-comments.css: 18,792 -> 18,776 bytes (16 bytes smaller) - remark.js: 256,709 -> 304,837 bytes (48KB larger, expected: CSS Module classname mappings now live in JS instead of plain strings) - Dark theme: pixel-identical (zero difference) - Light theme: pixel-identical (0.21% diff is the native demo page "Toggle theme" button, not any remark42 widget element) Also updates CLAUDE.md CSS guideline to reflect the migration status.
paskal
added a commit
that referenced
this pull request
Mar 25, 2026
Migrate 8 components from BEM to CSS Modules: - button (7 BEM files -> 1 module) - dropdown (7 BEM files -> 1 module) - thread (3 BEM files -> 1 module) - auth-panel (2 BEM files -> 1 module) - dropdown-item, list-comments, subscribe-by-rss, settings (from batch 0 PR #2013) Consolidates 19 BEM CSS files into 8 CSS Module files. Uses clsx for conditional class composition, replacing bem-react-helper's b() calls. Class naming follows the established convention: BEM block = .root, elements = camelCase, modifiers = camelCase. Visual regression verification on built artefacts: - remark.css: 43,779 -> 43,299 bytes (480 bytes smaller) - last-comments.css: 18,792 -> 18,776 bytes (16 bytes smaller) - remark.js: 256,709 -> 304,837 bytes (48KB larger, expected: CSS Module classname mappings now live in JS instead of plain strings) - Dark theme: pixel-identical (zero difference) - Light theme: pixel-identical (0.21% diff is the native demo page "Toggle theme" button, not any remark42 widget element) Also updates CLAUDE.md CSS guideline to reflect the migration status.
umputun
pushed a commit
that referenced
this pull request
Mar 25, 2026
* feat: migrate batch 1 components from BEM to CSS Modules Migrate 8 components from BEM to CSS Modules: - button (7 BEM files -> 1 module) - dropdown (7 BEM files -> 1 module) - thread (3 BEM files -> 1 module) - auth-panel (2 BEM files -> 1 module) - dropdown-item, list-comments, subscribe-by-rss, settings (from batch 0 PR #2013) Consolidates 19 BEM CSS files into 8 CSS Module files. Uses clsx for conditional class composition, replacing bem-react-helper's b() calls. Class naming follows the established convention: BEM block = .root, elements = camelCase, modifiers = camelCase. Visual regression verification on built artefacts: - remark.css: 43,779 -> 43,299 bytes (480 bytes smaller) - last-comments.css: 18,792 -> 18,776 bytes (16 bytes smaller) - remark.js: 256,709 -> 304,837 bytes (48KB larger, expected: CSS Module classname mappings now live in JS instead of plain strings) - Dark theme: pixel-identical (zero difference) - Light theme: pixel-identical (0.21% diff is the native demo page "Toggle theme" button, not any remark42 widget element) Also updates CLAUDE.md CSS guideline to reflect the migration status. * 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
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
2 participants
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.
Summary
dropdown/__item,list-comments,comment-form/__subscribe-by-rss, andsettingsfrom legacy BEM CSS (viabem-react-helper) to CSS Modules.module.cssfiles, remove dead CSS and unused class referencesBuilt artefact verification
remark.css/js/mjs,last-comments.css/js/mjs): only class name hash shifts from webpack module ordering and minified variable name shifts from changed import order; all CSS property:value pairs are preservedvar()fallback values added by the CSS modules build (matching existing migrated component pattern)remark.css-626 bytes,remark.js-512 bytes,last-comments.css-16 bytes (dead CSS removed)Dead code removed
.settings__blocked-users-username— CSS rule with no matching TSX elementcomment-form/__rss-link/— entire directory, class never referenced in any componenttitleClassprop on subscribe-by-rss — referenced a class with no CSS rulesclassName="comments-list"on list-comments — global class with zero CSS rules anywhere