Migrate remaining BEM components to CSS Modules (final batch)#2015
Open
paskal wants to merge 1 commit intobem-to-css-modules-batch1from
Open
Migrate remaining BEM components to CSS Modules (final batch)#2015paskal wants to merge 1 commit intobem-to-css-modules-batch1from
paskal wants to merge 1 commit intobem-to-css-modules-batch1from
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## bem-to-css-modules-batch1 #2015 +/- ##
=============================================================
+ Coverage 62.01% 62.03% +0.01%
=============================================================
Files 132 132
Lines 3033 3037 +4
Branches 735 788 +53
=============================================================
+ Hits 1881 1884 +3
+ Misses 1148 1039 -109
- Partials 4 114 +110 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
size-limit report 📦
|
paskal
force-pushed
the
bem-to-css-modules-batch2
branch
from
4bfaa6a to
ea56d22
Compare
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
paskal
force-pushed
the
bem-to-css-modules-batch2
branch
from
ea56d22 to
8b4a30e
Compare
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.
Summary
bem-react-helperdependency entirely — all components now useclsxcomment_disabled,comment_pinned,comment_guest), dead elements (comment__user-id), dead button type classes, dead mix valuesKey implementation details
comment_highlightingstays global via:global()— imperatively added byclassListin root.tsx.dark/.lighttheme class preserved on root wrapper (8+ modules depend on:global(.dark))raw-content.csskept as global utility CSS for syntax highlightingBuilt artefact comparison (master vs this branch)
Visual regression check
Screenshot comparison across light and dark themes: pixel-identical. The only detected 0.21% diff was sub-pixel font rendering on the demo page's "Toggle theme" button — not any remark42 widget element.
Depends on #2014.