Gathering detailed insights and metrics for typescript-plugin-css-modules-classnames
Gathering detailed insights and metrics for typescript-plugin-css-modules-classnames
A TypeScript language service plugin providing support for CSS Modules.
Installations
npm install typescript-plugin-css-modules-classnamesDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Score
66.4
Supply Chain
96.8
Quality
74.1
Maintenance
25
Vulnerability
99.3
License
Releases
46
Languages
8
TypeScript
SCSS
CSS
JavaScript
Sass
Stylus
Less
Shell
TypeScript (93.26%)
SCSS (2%)
CSS (1.22%)
JavaScript (1.05%)
Sass (0.99%)
Stylus (0.73%)
Less (0.66%)
Shell (0.1%)
Developer
mrmckeb
Download Statistics
Total Downloads
834
Last Day
2
Last Week
2
Last Month
14
Last Year
147
GitHub Statistics
MIT License
1,356 Stars
162 Commits
74 Forks
9 Watchers
3 Branches
28 Contributors
Updated on May 19, 2025
Bundle Size
263.92 kB
Minified
73.42 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.5
Package Id
typescript-plugin-css-modules-classnames@1.0.5
Unpacked Size
15.64 kB
Size
5.43 kB
File Count
16
Total Downloads
Cumulative downloads
Total Downloads
834
Last Day
0%
2
Compared to previous day
Last Week
0%
2
Compared to previous week
Last Month
-12.5%
14
Compared to previous month
Last Year
44.1%
147
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
typescript-plugin-css-modules
A TypeScript language service plugin for CSS Modules.
This project was inspired by this create-react-app issue
and was based on css-module-types.
Usage
To install with Yarn:
1yarn add typescript-plugin-css-modules
To install with npm:
1npm install --save typescript-plugin-css-modules
Once installed, add this plugin to your tsconfig.json:
1{ 2 "compilerOptions": { 3 "plugins": [{ "name": "typescript-plugin-css-modules" }] 4 } 5}
Options
| Option | Default value | Description |
|---|---|---|
customMatcher | "\\.module\\.(sa|sc|c)ss$" | Change the file extensions that this plugin works with. |
camelCase | false | Implements the behaviour of the camelCase CSS Loader option (accepting the same values). |
The below is an example that only matches "*.m.css" files, and camel-cases dashes.
1{ 2 "compilerOptions": { 3 "plugins": [ 4 { 5 "name": "typescript-plugin-css-modules", 6 "options": { 7 "customMatcher": "\\.m\\.css$", 8 "camelCase": "dashes" 9 } 10 } 11 ] 12 } 13}
Visual Studio Code
By default, VSCode will use it's own version of TypeScript. To make it work with this plugin, you have two options:
- Add this plugin to
"typescript.tsserver.pluginPaths"in settings. Note that this method doesn't currently support plugin options. This is planned for the November update.
1{ 2 "typescript.tsserver.pluginPaths": ["typescript-plugin-css-modules"] 3}
- Use your workspace's version of TypeScript, which will load the plugins from your
tsconfig.jsonfile. For instructions, see: Using the workspace version of TypeScript.
Custom definitions
Note: Create React App users can skip this section if you're using react-scripts@2.1.x or higher.
If your project doesn't already have global declarations for CSS Modules, you will need to add these to help TypeScript understand the general shape of the imported CSS during build.
Where you store global declarations is up to you. An example might look like: src/custom.d.ts.
The below is an example that you can copy, or modify if you use a customMatcher.
1declare module '*.module.css' { 2 const classes: { [key: string]: string }; 3 export default classes; 4} 5 6declare module '*.module.scss' { 7 const classes: { [key: string]: string }; 8 export default classes; 9} 10 11declare module '*.module.sass' { 12 const classes: { [key: string]: string }; 13 export default classes; 14}
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
5 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Reason
Found 11/25 approved changesets -- score normalized to 4
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/mrmckeb/typescript-plugin-css-modules/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/mrmckeb/typescript-plugin-css-modules/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/mrmckeb/typescript-plugin-css-modules/ci.yml/main?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 21 are checked with a SAST tool
Score
3.7
/10
Last Scanned on 2025-05-12
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More