vite-plugin-typed-css-modules

Generates typed definitions for css modules using typed-css-modules.

The plugin will set the vite config field css.modules.localsConvention to camelCaseOnly and sets the camelCase option in typed-css-modules.

Using the vite dev server, any time a [name].module.css file is created, updated, or deleted, the corresponding .d.ts file will be automatically generated or removed.

Installation

npm install vite-plugin-typed-css-modules

Usage

[!TIP] It's recommended to add *.module.css.dts to your .gitignore file to avoid committing the generated .d.ts files to your repository.

// vite.config.js

import typedCssModulesPlugin from "vite-plugin-typed-css-modules";

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [typedCssModulesPlugin()],
};

export default config;

Optional Configuration

// vite.config.js

import typedCssModulesPlugin from "vite-plugin-typed-css-modules";

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    typedCssModulesPlugin({
      // Include specific file patterns (default: '**/*.module.css')
      include: ['**/*.module.css'],

      // Exclude files from processing
      ignore: [],
      
      // Enable verbose logging for debugging
      verbose: true,
    }),
  ],
};

export default config;