Question 1

How do I set up eslint-plugin-css-modules with webpack's css-loader for camelCase?

Accepted Answer

Install the plugin via npm, add it to your ESLint plugins, and extend the recommended config. Then, enable the camelCase option in both 'no-unused-class' and 'no-undef-class' rules to match your css-loader settings, as detailed in the usage section with JSON examples.

Question 2

eslint-plugin-css-modules vs stylelint: which is better for CSS Modules?

Accepted Answer

eslint-plugin-css-modules focuses specifically on validating class usage between JavaScript and CSS Modules, catching unused/undefined classes. Stylelint is a broader CSS linter for syntax and best practices. Use this plugin for integrated JS-CSS validation; stylelint for pure CSS linting.

Question 3

Can I ignore certain CSS classes in eslint-plugin-css-modules?

Accepted Answer

Yes, use the markAsUsed option in ESLint comments or rule settings to mark classes as used, as shown in the README example with 'container'. This allows excluding classes from unused class detection without removing them from stylesheets.

Question 4

Does eslint-plugin-css-modules work with Vue single-file components?

Accepted Answer

It should work if ESLint is configured to parse Vue files and CSS paths are correctly resolved. The plugin validates any JavaScript code importing CSS Modules, so ensure base paths are set appropriately in .eslintrc settings for Vue project structures.

Question 5

What happens with dynamically generated class names in eslint-plugin-css-modules?

Accepted Answer

The plugin uses static analysis and cannot validate dynamically generated classes, such as those from string concatenation. You may need to use comments to mark them as used or accept false positives, as it only checks explicit class references in code.

Question 6

How to handle global CSS classes with eslint-plugin-css-modules?

Accepted Answer

Global classes defined with :global in CSS are not checked by default, as mentioned in the SCSS example where '.head' is global. The plugin focuses on exported CSS Modules classes, so global styles won't trigger errors unless misconfigured.

CSS-modules

What is CSS-modules?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions