gatsby-plugin-dts-css-modules

GatsbyJS V2/V3 plugin, which automatically creates TypeScript *.d.ts files for your CSS Modules, no matter which CSS preprocessor (Sass, LESS, Stylus etc.) you are using.

If you want to know more about CSS Modules, I recommend the article "Component-Scoped Styles with CSS Modules" on the GatsbyJS website.

This plugin utilizes the Webpack loader dts-css-modules-loader, which does not make any changes in content of styles, just creates *.d.ts file during the work.

Installation

npm install gatsby-plugin-dts-css-modules --save-dev

Then, add the plugin to your gatsby-config.js …

module.exports = {
  // ...
  plugins: [
    // ...
    'gatsby-plugin-dts-css-modules',
    // ...
  ],
  // ...
}

Usage

For CSS files use the extension .module.css, for Sass/SCSS use .modules.sass or .module.scss and so on.

.container {
  margin: 3rem auto;
  max-width: 600px;
}

In TypeScript use:

import React from 'react';
import * as containerStyles from './container.module.css';

export const Container: React.FunctionComponent = ({ children }) => {
  return (
    <section className={containerStyles.container}>{children}</section>
  );
}

As soon as you use the Container component in your code, the plugin will create a container.module.d.ts, which looks like this one:

// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
export const container: string;

There will be one export const for each of your class names.