@swift-school/dts-css-modules-loader

1.0.1 • Public • Published

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.

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.

Package Sidebar

Install

npm i @swift-school/dts-css-modules-loader

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

6.3 kB

Total Files

3

Last publish

Collaborators

  • ben-august