I have used Stylelint before with CSS modules and SASS, CSS-in-JS solutions, yet I have never specifically used it to analyze .modules.scss
files. It looks like it refuses to identify problems inside of filename.module.scss
files.
A bit more information:
- I use VSCode
- I have an application bootstrapped from create-react-app and ejected
- I have a
.stylelintrc.json
configuration file at the root of my application with the following configuration:
{
"plugins": ["stylelint-scss"],
"extends": ["stylelint-config-standard-scss"],
"rules": {
"indentation": 2,
"string-quotes": "single",
"color-hex-case": "lower",
"color-hex-length": "long",
"color-named": "always-where-possible",
"selector-max-id": 0,
"selector-max-combinators": 0,
"selector-combinator-space-after": "always",
"selector-attribute-quotes": "always",
"declaration-block-trailing-semicolon": "always",
"declaration-no-important": true,
"declaration-colon-space-before": "never",
"declaration-colon-space-after": "always",
"property-no-vendor-prefix": true,
"value-no-vendor-prefix": true,
"number-leading-zero": "always",
"function-url-quotes": "always",
"function-url-scheme-blacklist": "never",
"font-weight-notation": "numeric",
"comment-whitespace-inside": "always",
"at-rule-no-vendor-prefix": true,
"rule-empty-line-before": "always",
"selector-no-vendor-prefix": true,
"selector-max-universal": 0,
"selector-max-type": 0,
"media-feature-parentheses-space-inside": "always",
"media-feature-name-no-vendor-prefix": true
}
}
Inside of my application I have the following structure:
src /
index.ts
common/
ui-components/
ComponentName/
ComponentName.ts
ComponentName.module.scss
[...]
styles/
globalstyles.scss
[...]
inside the folder styles/ ... scss all the checks are working, stylelint checks for errors perfectly, but not inside ...module.scss
I have been reseraching, but could not find any special plugin for scss modules specifically. Can you please help me?