🎁 typed-scss-modules

Generate TypeScript definitions (.d.ts) files for CSS Modules that are written in SCSS (.scss).

For example, given the following SCSS:

@import "variables";

.text {
  color: $blue;

  &-highlighted {
    color: $yellow;
  }
}

The following type definitions will be generated:

export const text: string;
export const textHighlighted: string;

Run with npm package runner:

npx tsm src

Or, install globally:

yarn global add typed-scss-modules
tsm src

Or, install and run as a devDependency:

yarn add -D typed-scss-modules
yarn tsm src

For all possible commands, run tsm --help.

The only required argument is the directoy where all SCSS files are located. Running tsm src will search for all files matching src/**/*.scss. This can be overridden by providing a glob pattern instead of a directory. For example, tsm src/*.scss

• Type: string[]
• Default: []
• Example: tsm src --includePaths src/core

An array of paths to look in to attempt to resolve your @import declarations. This example will search the src/core directory when resolving imports.

• Type: object
• Default: {}
• Example: tsm src --aliases.~some-alias src/core/variables

An object of aliases to map to their corresponding paths. This example will replace any @import '~alias' with @import 'src/core/variables'.

• Type: "camel" | "kebab" | "param"
• Default: "camel"
• Example: tsm src --nameFormat camel

The class naming format to use when converting the classes to type definitions.

• Type: "named" | "default"
• Default: "named"
• Example: tsm src --exportType default

The export type to use when generating type definitions.

Given the following SCSS:

.text {
  color: blue;

  &-highlighted {
    color: yellow;
  }
}

The following type definitions will be generated:

export const text: string;
export const textHighlighted: string;

Given the following SCSS:

.text {
  color: blue;

  &-highlighted {
    color: yellow;
  }
}

The following type definitions will be generated:

interface Styles {
  text: string;
  textHighlighted: string;
}

declare const styles: Styles;

export default styles;

This export type is useful when using kebab (param) cased class names since variables with a - are not valid variables and will produce invalid types or when a class name is a TypeScript keyword (eg: while or delete)

For examples, see the examples directory:

• Basic Example
• Default Export Example

This package was heavily influenced on typed-css-modules which generates TypeScript definitions (.d.ts) files for CSS Modules that are written in CSS (.css).

This package is currently used as a CLI. There are also packages that generate types as a webpack loader.