Add eslint-plugin-css-modules

[sakit0]

trafficstars

Issue

• resolve: Add ESLint rules for CSS Modules

Why is this change needed?

We need to add eslint-plugin-css-modules to detect undefined class names when using CSS Modules. This improves type safety for CSS Modules and helps catch errors early in development.

What would you like reviewers to focus on?

• Verify that eslint-plugin-css-modules dependency is correctly added
• Check if ESLint configuration is properly set up
• Ensure there are no conflicts with existing ESLint rules

Testing Verification

• Verified by running the project locally and confirming that ESLint errors related to CSS Modules are correctly detected
• Confirmed that the build completes successfully
• Verified that no errors occur in existing CSS Modules usage

What was done

• Added eslint-plugin-css-modules to dependencies
• Added css-modules plugin and no-undef-class rule to the base ESLint configuration file
• Updated dependency versions in pnpm-lock.yaml

Detailed Changes

1. Added eslint-plugin-css-modules version 2.12.0 to package.json
2. Added the following configuration to ESLint config file:
   • Enabled css-modules plugin
   • Configured no-undef-class rule with camelCase option

Additional Notes

• This change does not affect existing CSS Modules usage
• The new rule is intended to strengthen error detection during development

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 81710839e616afe6c425dfef50255665a96eb8a5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

@sakit0 is attempting to deploy a commit to the Liam Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-merge-for-open-source[bot]]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Rule Configuration The camelCase option is enabled for the CSS modules rule, which might cause false positives if the project uses kebab-case class names in CSS files. Verify this matches the project's CSS naming convention. "css-modules/no-undef-class": ["error", { camelCase: true }], },

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
liam-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2025 7:42am
liam-docs	❌ Failed (Inspect)			May 29, 2025 7:42am
liam-erd-sample	❌ Failed (Inspect)			May 29, 2025 7:42am
liam-storybook	❌ Failed (Inspect)			May 29, 2025 7:42am

[qodo-merge-for-open-source[bot]]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Learned best practice	Maintain consistent quote style The ESLint rule configuration uses double quotes for the rule name but the rest of the file uses single quotes. Maintain consistent quote style throughout configuration files to improve readability and maintainability. frontend/packages/configs/eslint/base.js [40] -"css-modules/no-undef-class": ["error", { camelCase: true }], +'css-modules/no-undef-class': ['error', { camelCase: true }], [ ] Apply / Chat Suggestion importance[1-10]: 6 __ Why: Relevant best practice - Use consistent configuration options for ESLint rules to ensure code quality standards are applied uniformly	Low
General	Adjust CSS class naming convention The rule is configured to enforce camelCase for CSS class names, but it's important to ensure this matches your project's CSS naming conventions. If your project uses kebab-case or other naming styles for CSS classes, this rule might generate false positives. frontend/packages/configs/eslint/base.js [40] -"css-modules/no-undef-class": ["error", { camelCase: true }], +"css-modules/no-undef-class": ["error", { camelCase: "dashes" }], [ ] Apply / Chat Suggestion importance[1-10]: 3 __ Why: The suggestion makes assumptions about the project's CSS naming conventions without evidence from the PR. The current camelCase: true configuration is valid and may be intentionally chosen to match the project's standards.	Low
[ ] Update

[sakit0]

The “request” package used inside eslint-plugin-css-modules contains safety warnings for all versions. The two packages "eslint-plugin-css-modules" and "request" are not maintained, so we will look for alternatives.

pnpm-lock.yaml » [email protected] – Server-Side Request Forgery in Request (moderate severity)
    ↪ https://github.com/advisories/GHSA-p8p7-x288-28g6
  Error: Dependency review detected vulnerable packages.

@NoritakaIkeda @MH4GF Due to the above reasons, this PR is closed.

[NoritakaIkeda]

@sakit0 Thank you very much for the investigation and the detailed explanation. I understood regarding the vulnerability and the decision to close this PR.👍