# typescript-plugin-css-modules-classnames > classnames-loader support for TypeScript Latest version **1.0.5** (published 2018-12-26) · MIT license · 0 weekly downloads ## Install ```sh npm install typescript-plugin-css-modules-classnames pnpm add typescript-plugin-css-modules-classnames yarn add typescript-plugin-css-modules-classnames bun add typescript-plugin-css-modules-classnames ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 1.0.5 | | Published | 2018-12-26 | | First published | 2018-12-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 15.6 KB | | Known vulnerabilities | 0 (+5 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 1392 | | Author | Brody McKee | | Maintainers | merkaloid | | Keywords | css, modules, plugin, postcss, sass, typescript | ## Links - npm: https://www.npmjs.com/package/typescript-plugin-css-modules-classnames - Repository: https://github.com/mrmckeb/typescript-plugin-css-modules - Homepage: https://github.com/s-coimbra21/typescript-plugin-css-modules - npm.io page: https://npm.io/package/typescript-plugin-css-modules-classnames ## Dependencies (5) - [lodash](https://npm.io/package/lodash.md) ^4.17.11 - [postcss](https://npm.io/package/postcss.md) ^7.0.5 - [icss-utils](https://npm.io/package/icss-utils.md) ^4.0.0 - [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.118 - [postcss-icss-selectors](https://npm.io/package/postcss-icss-selectors.md) ^2.0.3 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 1.0.5 (latest) — 2018-12-26 - 1.0.0 — 2018-12-26 ## README # typescript-plugin-css-modules [![CircleCI branch](https://img.shields.io/circleci/project/github/mrmckeb/typescript-plugin-css-modules/master.svg)](https://circleci.com/gh/mrmckeb/typescript-plugin-css-modules) [![npm](https://img.shields.io/npm/v/typescript-plugin-css-modules.svg)](https://www.npmjs.com/package/typescript-plugin-css-modules) [![license](https://img.shields.io/npm/l/typescript-plugin-css-modules.svg)](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/develop/LICENSE) A [TypeScript language service plugin](https://github.com/Microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin) for [CSS Modules](https://github.com/css-modules/css-modules). typescript-plugin-css-modules example This project was inspired by this [`create-react-app` issue](https://github.com/facebook/create-react-app/issues/5677) and was based on [`css-module-types`](https://github.com/timothykang/css-module-types). ## Usage To install with Yarn: ```sh yarn add typescript-plugin-css-modules ``` To install with npm: ```sh npm install --save typescript-plugin-css-modules ``` Once installed, add this plugin to your `tsconfig.json`: ```json { "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } } ``` ### 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](https://github.com/webpack-contrib/css-loader#camelcase) (accepting the same values). | The below is an example that only matches "\*.m.css" files, and [camel-cases dashes](https://github.com/webpack-contrib/css-loader#camelcase). ```json { "compilerOptions": { "plugins": [ { "name": "typescript-plugin-css-modules", "options": { "customMatcher": "\\.m\\.css$", "camelCase": "dashes" } } ] } } ``` ### 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: 1. 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](https://github.com/Microsoft/vscode/issues/62876). ```json { "typescript.tsserver.pluginPaths": ["typescript-plugin-css-modules"] } ``` 2. 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](https://code.visualstudio.com/docs/languages/typescript#_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`. ```ts declare module '*.module.css' { const classes: { [key: string]: string }; export default classes; } declare module '*.module.scss' { const classes: { [key: string]: string }; export default classes; } declare module '*.module.sass' { const classes: { [key: string]: string }; export default classes; } ``` --- _Source: https://npm.io/package/typescript-plugin-css-modules-classnames · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._