A TypeScript language service plugin for CSS Modules.
This project was inspired by this create-react-app
issue
and is heavily based on css-module-types
.
To install with Yarn:
yarn add typescript-plugin-css-modules
To install with npm:
npm install --save typescript-plugin-css-modules
Once installed, add this plugin to your tsconfig.json
:
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
You can also pass in your own file extension matcher (the default matcher is shown as an example):
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-plugin-css-modules",
"options": {
"customMatcher": "\\.module\\.(sa|sc|c)ss$"
}
}
]
}
}
Depending on your project configuration, you may also need to declare modules. Where you store this is up to you. An
example might look like: src/@types/custom.d.ts
.
The below is an example that you can modify if you use a customMatcher
.
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;
}