Installations

npm install typescript-plugin-css-modules-classnames

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Score

61.9

Supply Chain

96.8

Quality

74

Maintenance

25

Vulnerability

98.9

License

Pull Requests

Open

5

Total

114

Closed

25

Merged

84

Issues

Open

22

Total

165

Closed

143

Releases

46

v5.1.0

Published on 11 Feb 2024

v5.0.2

Published on 16 Oct 2023

v5.0.1

Published on 10 Apr 2023

v5.0.0

Published on 21 Mar 2023

v5.0.0-beta.0

Published on 11 Mar 2023

v4.2.3

Published on 11 Mar 2023

View all 46 releases

Contributors

28

Unable to fetch Contributors

View all 28 contributors

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

768

Last Day

1

Last Week

5

Last Month

10

Last Year

121

GitHub Statistics

1,332 Stars

162 Commits

74 Forks

10 Watching

3 Branches

28 Contributors

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

768

Last day

0%

1

Compared to previous day

Last week

0%

5

Compared to previous week

Last month

11.1%

10

Compared to previous month

Last year

16.3%

121

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

5

@types/lodash icss-utils lodash postcss postcss-icss-selectors

Peer Dependencies

1

typescript

Dev Dependencies

9

@types/jest @types/node husky jest prettier pretty-quick ts-jest tslint typescript

Versions

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.json file. 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.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

8

Maintained

Determines if the project is "actively maintained".

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

4.6

/10

Last Scanned on 2024-12-16

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