@pandell/typescript-plugin-css-modules

CSS modules support for TypeScript

Usage no npm install needed!

<script type="module">
  import pandellTypescriptPluginCssModules from 'https://cdn.skypack.dev/@pandell/typescript-plugin-css-modules';
</script>

README

typescript-plugin-css-modules (pandell fork)

license

A TypeScript language service plugin for CSS Modules.

typescript-plugin-css-modules example

This project was inspired by this create-react-app issue and was based on css-module-types.

Pandell Fork

  • Remove support for LESS and SASS
  • Just use PostCSS

Installation

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" }]
  }
}

Importing CSS

A default export is always provided for your CSS module.

import styles from 'my.module.css';

const a = styles.myClass;
const b = styles['my_other-class'];

As of version 1.1.0, you can also use named exports for classes that don't contain hyphens or underscores. You can still access other classes via the default export.

import styles, { myClass } from 'my.module.css';

const a = myClass;
const b = styles['my_other-class'];

Options

Option Default value Description
customMatcher "\\.module\\.(c\|le\|sa\|sc)ssquot; 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.

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "customMatcher": "\\.m\\.cssquot;,
          "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. Use your workspace's version of TypeScript, which will load plugins from your tsconfig.json file. This is the recommended approach. For instructions, see: Using the workspace version of TypeScript.

  2. Add this plugin to "typescript.tsserver.pluginPaths" in settings. Note that this method doesn't currently support plugin options.

{
  "typescript.tsserver.pluginPaths": ["typescript-plugin-css-modules"]
}

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, you'll need to modify it.

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;
}

declare module '*.module.less' {
  const classes: { [key: string]: string };
  export default classes;
}