ESLint plugin that validates CSS module class usage in JavaScript to catch unused or undefined classes.
eslint-plugin-css-modules is an ESLint plugin that validates the usage of CSS Modules classes in JavaScript code. It helps developers catch two common problems: using CSS classes that don't exist in the stylesheets, and defining CSS classes that are never used in the JavaScript code. This prevents styling bugs and keeps CSS and JavaScript in sync.
Frontend developers working with CSS Modules in React, Vue, or other JavaScript frameworks who want to maintain consistency between their styles and components.
Developers choose this plugin because it provides automated validation specifically for CSS Modules workflows, catching subtle bugs that traditional linters miss. Its integration with ESLint makes it easy to add to existing projects, and its support for configuration options like camelCase ensures compatibility with common build setups.
Project status: NOT MAINTAINED; Checks that you are using the existent css/scss classes, no more no less
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Simultaneously flags unused CSS classes and undefined references, preventing both dead code and runtime styling errors as shown in the screenshot with clear error messages for 'container' and 'containr'.
Seamlessly works with webpack's css-loader camelCase option, requiring only a matching configuration in ESLint rules to maintain consistent naming, as detailed in the usage section with examples for true, 'dashes', 'only', and 'dashes-only'.
Supports CSS, SCSS, and Less files out of the box, making it suitable for modern frontend stacks that use CSS Modules with preprocessing, evidenced by the inclusion in key features and example SCSS code.
Allows setting base paths for style resolution and marking classes as used via ESLint comments, providing flexibility for project-specific structures, as shown in the settings and rule configuration examples.
Must manually align camelCase and base path settings with webpack configuration, which can lead to mismatches and false positives if not carefully maintained, adding overhead in complex build setups.
Cannot detect classes generated dynamically at runtime, such as those from template literals or computed properties, limiting its effectiveness in applications with heavy JavaScript-driven styling.
Only functions within ESLint ecosystems, offering no utility for projects using other linters or no linting, which restricts its adoption scope and adds no value outside this toolchain.