css-modules-dts

Creates TypeScript declaration files from .css files. This package is pure ESM.

• css-modules-dts
  • About
  • Installation
  • Usage
    • Options
      • --pattern or -p
      • --watch or -w
      • --list-different or -l
      • --extension or -e
  • CSS nesting

About

Given the following CSS file

/* MyComponent.module.css */

.foo {
  color: red;

  &.bar {
    color: blue;
  }
}

css-modules-dts will output:

/* MyComponent.module.css.d.ts */
declare const styles: {
  readonly foo: string;
  readonly bar: string;
};
export default styles;

Your CSS modules can then be used in TypeScript, with added type safety.

/* app.tsx */
import styles from "./MyComponent.module.css";

// React is only given as an example, and is not restricted to this use
const MyComponent = () => <div className={styles.foo}>Hello, World!</div>;

Installation

  npm i -D css-modules-dts

Usage

  npx css-modules-dts -p 'src/**/*.module.css'

This command will write TypeScript declaration files for all matched CSS files next to them on disk.

Options

--pattern or -p

Glob pattern to use to find CSS files. Required.

--watch or -w

Watch matched files, and rebuild TypeScript declaration files when changed.

--list-different or -l

Will compare expected declaration files for matched CSS files with those on disk. Will log all files that are different, and terminate with an exit code equal to the number of differences found.

--extension or -e

Extension for the generated TypeScript declaration file. Defaults to .css.d.ts. This can be changed to .d.css.ts if you are using allowArbitraryExtensions in your TypeScript configuration.

CSS nesting

The dependency used for parsing CSS, css-tree requires CSS nesting to use explicit nesting selectors, i.e. &.

.foo {
  > .bar {
    // this will NOT be detected
  }

  & > .baz {
    // this will be detected
  }
}