dts-css-modules-loader

dts-css-modules-loader

A small Webpack loader to generate typings for your CSS-Modules. Created as a replacement for the frozend typings-for-css-modules-loader. This loader does not make any changes in content of styles, just creates *.d.ts file during the work. It is assumed that the content will be preprocessed first by css-loader.

⚠ BREAKING CHANGES

• Since version 2.x only supports webpack version is 5

Installation

npm i -D dts-css-modules-loader
# or
yarn add -D dts-css-modules-loader

Usage

{
  test: /\.scss$/,
  use: [
    {
      loader: 'style-loader',
      options: {
        esModule: false,
      },
    },
    {
      loader: 'dts-css-modules-loader',
      options: {
        namedExport: true
      }
    },
    {
      loader: 'css-loader',
      options: {
        // options for the v5 of css-loader
        modules: {
          exportLocalsConvention: 'camelCaseOnly',
          localIdentName: '[local]'
        }
      }
    },
    'sass-loader'
  ]
}

Options

namedExport

When the option is switched on classes exported as variables. Be sure you using camelCase option of css-loader to avoid invalid name of variables.

// This file is generated automatically.
export const button: string;
export const buttonActive: string;

When option is off:

// This file is generated automatically.
export interface I_buttonScss {
  'button': string
  'buttonActive': string
}
declare const styles: I_buttonScss;
export = styles;

banner

Adds a "banner" prefix to each generated file.

customTypings

A function that accepts classes (an array of string) and returns the content of declaration file:

customTypings: classes => {
  let content = '// This file is generated automatically\ndeclare const styles: {\n';
  for (const c of classes) {
    content += `  ${c}: string;\n`;
  }
  content += '};\nexport default styles;\n';
  return content;
}

namedExport and banner option will be ignored

dropEmptyFile

If there are no classes, the typings file will not be generated, and the existing will be deleted.

Usage in Typescript

import * as styles from './_button.scss';

To avoid errors about the absent module, you need to determine this:

/**
 * Trap for `*.scss.d.ts` files which are not generated yet.
 */
declare module '*.scss' {
  var classes: any;
  export = classes;
}

When you add new classname Typescript compiler may not find the generated variable so you need to compile twice your files.

License

Licensed under the MIT license.