Extract CSS classnames in TS files

Usage no npm install needed!

<script type="module">
  import tsTransformCssModules from 'https://cdn.skypack.dev/ts-transform-css-modules';



Greenkeeper badge

npm version travis

Extract css class names from required css module files for TypeScript. This plugin is based on css-modules-require-hook and so constructor opts are from that repo.

This allows you to do this in TS files:

// Import works
import * as css from 'foo.css'
// require also works
const foo = require('foo.css')


Append this to before in your compilation step. See compile.ts for more info.

Right now named imports will not work due to TS mangling import name after compilation.

// Those are NOT working
import css from 'foo.css'
import { button, badge } from 'foo.css'


See css-modules-require-hook for a list of options.

Custom Options

tsImportResolver (path: string): string: This callback function allows you to override import path in ImportDeclaration for every CSS file we encounter. This is useful when dealing with project that uses paths aliases in tsconfig. This might not be necessary once https://github.com/Microsoft/TypeScript/issues/28276 is resolved.


  1. Source map support might not be entirely accurate