Research
Security News
Kill Switch Hidden in npm Packages Typosquatting Chalk and Chokidar
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
eslint-plugin-postcss-modules
Advanced tools
Checks that you are using the classes exported by your css modules using postcss.
Like eslint-plugin-css-modules, this plugin helps you lint your css modules. It adds a new eslint rule that detects if you are trying to use a class that is not exported by your css module.
The major difference between this plugin and the aforementioned plugin is that this plugin uses postcss to parse the css files and determine what classes are exported. There are a couple of benefits to this:
The downside is that, while postcss is very battle-tested and fast for building css, it may be slower than eslint-plugin-css-modules for linting purposes. I don't have benchmarks, but welcome them.
yarn add -D eslint-plugin-postcss-modules
npm install -D eslint-plugin-postcss-modules
In your eslint config:
{
"extends": [
"plugin:postcss-modules/recommended"
],
}
The recommended configuration will set no-undef-class
to errors and
no-unused-class
to warnings. The recommended configuration is equivalent to:
{
"plugins": ["postcss-modules"],
"rules": {
"postcss-modules/no-undef-class": "error",
"postcss-modules/no-unused-class": "warn"
}
}
There are a couple settings you can tweak in your eslint config. Below are examples of the options and their default values:
{
"settings": {
"postcss-modules": {
"postcssConfigDir": "cwd",
"baseDir": "cwd",
"camelCase": false,
"defaultScope": "local",
"include": "**/*.css",
"exclude": "**/node_modules/**/*"
}
}
}
postcssConfigDir (default: cwd)
postcssConfigDir sets the starting point to search for the postcss config file, as determined by postcss-load-config. Searching will start with this directory and work its way up recursively until it finds a config file or hits your home directory. See cosmiconfig for more info.
I recommend that you create a pared down version of your postcss config that only includes plugins that could affect the structure of the file and the class names that might be exported in order to reduce the amount of time linting takes. For example, postcss-preset-env is really a collection of plugins under the hood. The only plugins that affect the structure and classes that would be exported are probably postcss-custom-selectors and postcss-nesting.
baseDir (default: cwd)
baseDir is used to resolve imports to your css files. If the import is relative (ie, starts with
./
), the path of the current file will be used to resolve the import. However, if the import is not relative, this baseDir will be used to resolve the path.
camelCase (default: false
)
The camelCase option should match the camelCase option or localsConvention option that you have set for css-loader, depending on which version you are using. Here's a description of the options and what they do:
option | description |
---|---|
false or "asIs" | Do not camelCase exported classes |
true or "camelCase" | Export both the original class name and the camelCased version |
"camelCaseOnly" or "only" | Export only the camelCased class names |
"dashes" | Convert dashed-names to camelCase and export both |
"dashesOnly" | Convert dashed-names to camelCase and only export the camelCased version |
defaultScope (default: "local"
)
The defaultScope option determines scope (global or local) of any css classes which are not explicitly declared as being global or local using
:global
or:local
. The default is"local"
.
include (default: "**/*.css"
)
An anymatch matcher to determine what files should be parsed for css-module exports. Any file which matches include but does not match exclude will be parsed. Note that due to the way eslint combines settings, you cannot use a regex here.
exclude (default: "**/node_modules/**/*"
)
An anymatch matcher to determine what files should not be parsed for css-module exports. Any file which matches include but does not match exclude will be parsed. Note that due to the way eslint combines settings, you cannot use a regex here.
FAQs
Checks that you are using the classes exported by your css modules using postcss.
We found that eslint-plugin-postcss-modules demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.