Skip to content

Commit d3c5cbc

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 d3c5cbc

File tree

72 files changed

+796
-1029
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

+796
-1029
lines changed

CLAUDE.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
- **Backend**: Formatting with golangci-lint, strict error handling
2323
- **Frontend**: TypeScript with ESLint, Stylelint and Prettier
2424
- **Imports**: Group stdlib, external packages, then internal packages
25-
- **CSS**: CSS Modules (`component.module.css`) for all new and migrated components; remaining BEM components are being migrated incrementally. Class naming: BEM block = `.root`, elements = camelCase, modifiers = camelCase. Use `clsx` for conditional class composition (replaces `b()` from `bem-react-helper`)
25+
- **CSS**: All components use CSS Modules (`component.module.css`). Class naming: BEM block = `.root`, elements = camelCase, modifiers = camelCase. Use `clsx` for conditional class composition. `raw-content.css` is the only global CSS file (syntax highlighting utility). Root wrapper keeps bare `.dark`/`.light` theme class — 8+ module CSS files depend on `:global(.dark)` ancestor. `comment_highlighting` uses `:global()` for imperative `classList` usage in root.tsx
2626

2727
## Key Backend Packages
2828
- **Web/API**: `github.com/go-chi/chi/v5`, `github.com/go-pkgz/rest`

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)