Files

T

Dmitry VerkhoturovandGitHub 06436ff9b0 Migrate batch 1 components from BEM to CSS Modules (#2014 )

* 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

2026-03-25 16:53:32 -05:00

1.9 KiB

Raw Blame History

Remark42 Development Guidelines

Build/Test/Lint Commands

Backend:
- Run server: make rundev
- Build: make backend
- Race test: make race_test
Backend Testing:
- Run all tests: cd backend/app && go test -timeout=60s -count 1 ./...
- Run single test: cd backend/app && go test -run TestName ./path/to/package
- IMPORTANT: Run example tests: cd backend/_example/memory_store && go test -race ./... && go build -race ./...
Frontend:
- Development: cd frontend && pnpm dev:app
- Tests: cd frontend && pnpm test
Lint:
- Backend: cd backend && golangci-lint run
- IMPORTANT: Example lint: cd backend/_example/memory_store && golangci-lint run --config ../../.golangci.yml
- Frontend: cd frontend && pnpm lint
- Before committing: Always run tests and linter on both main backend AND examples

Code Style

Backend: Formatting with golangci-lint, strict error handling
Frontend: TypeScript with ESLint, Stylelint and Prettier
Imports: Group stdlib, external packages, then internal packages
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

Key Backend Packages

Web/API: github.com/go-chi/chi/v5, github.com/go-pkgz/rest
Auth: github.com/go-pkgz/auth/v2
Logging: github.com/go-pkgz/lgr
Testing: github.com/stretchr/testify
Notifications: github.com/go-pkgz/notify

Repository Structure

Backend: Go server using BoltDB for storage
Frontend: Preact/Redux-based UI with iframe embedding

1.9 KiB Raw Blame History

Remark42 Development Guidelines

Build/Test/Lint Commands

Code Style

Key Backend Packages

Repository Structure

1.9 KiB

Raw Blame History