ts-css-loader

This package is not ready for use

Create TypeScript typings for CSS Modules generated using css-loader in webpack for use with ts-loader.

Installation

npm install ts-css-loader

You will also need to install TypeScript and ts-loader if you have not already.

npm install typescript ts-loader

Example

The following example webpack configuration provides typings for modules ending with .css. The test option for css-loader should match the test option for ts-css-loader.

Note that there must be a rule using css-loader, which loads the css modules, that ts-css-loader comes after ts-loader, and that ts-loader must be configured with usePreviousLoaderGeneratedFiles: true.

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'css-loader',
            options: { modules: true, camelCase: true }
          }
        ]
      },
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: { usePreviousLoaderGeneratedFiles: true }
          },
          {
            loader: 'ts-css-loader',
            options: { test: /\.css$/ }
          }
        ]
      }
    ]
  },
  ...
};

To make the typings generated by ts-css-loader available to other tools (f.ex. tsc) they can be saved as .d.ts files:

{
  loader: 'ts-css-loader',
  options: { test: /\.css$/, save: true }
}

With the configution above, and given a file Game.css:

.game {
    display: flex;
    flex-direction: row;
}

.game-info {
    margin-left: 20px;
}

.game-footer {
    margin-top: 20px;
}

... typings like the following will be generated by ts-css-loader and be available to ts-loader:

// Object containing all local CSS classes
export const locals: {
    game: string;
    'game-info': string;
    gameInfo: string;
    'game-footer': string;
    gameFooter: string;
};

If the option save is true these typings will also be saved to file Game.css.d.ts.

It is now possible to import Game.css in TypeScript:

import { locals as css } from './Game.css';

const html = `<div class="${css.game}"></div>`;

Options

test (RegExp) (default=/.css$/)

Specifies which modules to generate typings for. This should match the test option for css-loader.

save (boolean) (default=false)

Specifies whether to save the generated typings to disk. If true, the typings will be saved to a file with ".d.ts" appended to the file path of the imported module. So the typings for Game.css will be saved in file Game.css.d.ts.

This makes the typings available to other tools, f.ex. tsc.

compiler (string) (default='typescript')

Allows use of TypeScript compilers other than the official one. Should be set to the NPM name of the compiler, eg ntypescript.

Developement

First, install dependent packages:

npm install

To build the project:

npm run build

Testing

At the moment there are two simple test projects:

• ./test/tests/basic
• ./test/tests/save-dts-files

To run webpack on these test projects:

npm test