fix: Broken CSS styling for components with underscore class names

[mtrezza]

Issue

After upgrading css-loader from v6 to v7, the sidebar menu and other components with underscore CSS class names (e.g. section_header, settings_page, stats_label) render with broken styling. Text is visible but illegible because CSS classes are not applied correctly.

Approach

css-loader v7 changed the default exportLocalsConvention to convert underscore class names to camelCase (e.g. section_header → sectionHeader). Since the JS code accesses these via the original underscore notation (styles.section_header), the lookups return undefined and no CSS classes are applied.

The fix adds exportLocalsConvention: 'as-is' to the css-loader modules config to preserve original class names, matching the v6 behavior.

Tasks

• Add tests
• Add changes to documentation (guides, repository pages, in-code descriptions)

Summary by CodeRabbit

• Tests

  • Added test coverage for CSS Modules SCSS compilation and class name export verification

• Chores

  • Updated CSS Modules configuration to standardize class name handling

[parse-github-assistant]

🚀 Thanks for opening this pull request! We appreciate your effort in improving the project. Please let us know once your pull request is ready for review.

Tip

• Keep pull requests small. Large PRs will be rejected. Break complex features into smaller, incremental PRs.
• Use Test Driven Development. Write failing tests before implementing functionality. Ensure tests pass.
• Group code into logical blocks. Add a short comment before each block to explain its purpose.
• We offer conceptual guidance. Coding is up to you. PRs must be merge-ready for human review.
• Our review focuses on concept, not quality. PRs with code issues will be rejected. Use an AI agent.
• Human review time is precious. Avoid review ping-pong. Inspect and test your AI-generated code.

Note

Please respond to review comments from AI agents just like you would to comments from a human reviewer. Let the reviewer resolve their own comments, unless they have reviewed and accepted your commit, or agreed with your explanation for why the feedback was incorrect.

Caution

Pull requests must be written using an AI agent with human supervision. Pull requests written entirely by a human will likely be rejected, because of lower code quality, higher review effort and the higher risk of introducing bugs. Please note that AI review comments on this pull request alone do not satisfy this requirement. Our CI and AI review are safeguards, not development tools. If many issues are flagged, rethink your development approach. Invest more effort in planning and design rather than using review cycles to fix low-quality code.

[coderabbitai]

📝 Walkthrough

Walkthrough

Added a Jest test file to verify webpack's CSS Modules handling for SCSS files, and configured the webpack SCSS loader with exportLocalsConvention: 'as-is' to preserve class name casing in CSS Modules exports.

Changes

Cohort / File(s)	Summary
CSS Modules Test src/lib/tests/CssModules.test.js	New test verifying webpack compilation and CSS Modules export of SCSS files, including underscore and camelCase class names.
Webpack SCSS Configuration webpack/base.config.js	Added exportLocalsConvention: 'as-is' to css-loader modules options for SCSS files to preserve class name formatting.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• parse-community/parse-dashboard#3284: Modifies css-loader modules configuration in webpack/base.config.js (sets namedExport: false whereas this PR sets exportLocalsConvention: 'as-is').

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Engage In Review Feedback	❓ Inconclusive	The custom check requires verification of GitHub PR review feedback engagement, which exists solely on GitHub's platform and is not stored in the git repository.	Navigate to GitHub PR #3328 and review the 'Files changed' and 'Conversation' tabs to examine reviewer comments and verify that feedback was addressed or discussed.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description includes all required sections (Issue, Approach, Tasks) with comprehensive details about the css-loader v7 breaking change and the fix applied.
Security Check	✅ Passed	Code changes use secure temporary directory creation with fs.mkdtempSync() and proper cleanup. No security vulnerabilities, code injection risks, or path traversal issues detected.
Title check	✅ Passed	The title includes the required 'fix:' prefix and accurately describes the main change: fixing CSS styling for components with underscore class names, which directly addresses the css-loader v7 migration issue.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[parseplatformorg]

🎉 This change has been released in version 9.1.1-alpha.1

[parseplatformorg]

🎉 This change has been released in version 9.1.1