node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »


typed-css-modules Build Status npm version

Creates TypeScript definition files from CSS Modules .css files.

If you have the following css,

/* styles.css */
@value primary: red;
.myClass {
  color: primary;

typed-css-modules creates the following .d.ts files from the above css:

/* styles.css.d.ts */
export const primary: string;
export const myClass: string;

So, you can import CSS modules' class or variable into your TypeScript sources:

/* app.ts */
import * as styles from './styles.css';
console.log(`<div class="${styles.myClass}"></div>`);
console.log(`<div style="color: ${styles.primary}"></div>`);


npm install -g typed-css-modules

And exec tcm <input directory> command. For example, if you have .css files under src directory, exec the following:

tcm src

Then, this creates *.css.d.ts files under the directory which has original .css file.

(your project root)
- src/
    | myStyle.css
    | myStyle.css.d.ts [created]

output directory

Use -o or --outDir option.

For example:

tcm -o dist src
(your project root)
- src/
    | myStyle.css
- dist/
    | myStyle.css.d.ts [created]

file name pattern

By the default, this tool searches **/*.css files under <input directory>. If you can customize glob pattern, you can use --pattern or -p option.

tcm -p src/**/*.icss


With -w or --watch, this CLI watches files in the input directory.

camelize CSS token

With -c or --camelCase, kebab-cased CSS classes(such as .my-class {...}) are exported as camelized TypeScript varibale name(export const myClass: string).

You can pass --camelCase dashes to only camelize dashes in the class name. Since version 0.27.1 in the webpack css-loader. This will keep upperCase class names intact, e.g.:

.SomeComponent {
  height: 10px;


export const SomeComponent: string;

See also webpack css-loader's camelCase option.


npm install typed-css-modules
import DtsCreator from 'typed-css-modules';
let creator = new DtsCreator();
creator.create('src/style.css').then(content => {
  console.log(content.tokens);          // ['myClass'] 
  console.log(content.formatted);       // 'export const myClass: string;' 
  content.writeFile();                  // writes this content to "src/style.css.d.ts" 

class DtsCreator

DtsCreator instance processes the input CSS and create TypeScript definition contents.

new DtsCreator(option)

You can set the following options:

  • option.rootDir: Project root directory(default: process.cwd()).
  • option.searchDir: Directory which includes target *.css files(default: './').
  • option.outDir: Output directory(default: option.searchDir).
  • option.camelCase: Camelize CSS class tokens.

create(filepath, contents) => Promise(dtsContent)

Returns DtsContent instance.

  • filepath: path of target .css file.
  • contents(optional): the CSS content of the filepath. If set, DtsCreator uses the contents instead of the original contents of the filepath.

class DtsContent

DtsContent instance has *.d.ts content, final output path, and function to write file.

writeFile() => Promise(dtsContent)

Writes the DtsContent instance's content to a file.

  • dtsContent: the DtsContent instance itself.


An array of tokens retrieved from input CSS file. e.g. ['myClass']


An array of TypeScript definition expressions. e.g. ['export const myClass: string;'].


A string of TypeScript definition expression.


export const myClass: string;


An array of messages. The messages contains invalid token information. e.g. ['my-class is not valid TypeScript variable name.'].


Final output file path.


If your input CSS file has the followng class names, these invalid tokens are not written to output .d.ts file.

/* TypeScript reserved word */
.while {
  color: red;
/* invalid TypeScript variable */
/* If camelCase option is set, this token will be converted to 'myClass' */
  color: red;
/* it's ok */
.myClass {
  color: red;


There is a minimum example in this repository example folder. Clone this repository and run cd example; npm i; npm start.

Or please see It's a working demonstration of CSS Modules with React and TypeScript.


This software is released under the MIT License, see LICENSE.txt.