gatsby-plugin-dts-css-modules

GatsbyJS V4 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.

If for some reason you need to stay with Gatsby V3, I recommend using version 2.2.0 of this plugin.

Installation

Ensure that you are using atleast Node.js v14.0.0.

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


or


yarn add gatsby-plugin-dts-css-modules --dev
`

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

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

It's also possible to change the dts-css-modules-loader options:

`js
module.exports = {
// ...
plugins: [
// ...
{
resolve: 'gatsby-plugin-dts-css-modules',
options: {
/* @default {true} /
namedExport: false,

/* @default {'// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!'} /
banner: '// My own banner',

customTypings: (classes) => classes.map((className) => export const ${className}: string;).join('\n'),

dropEmptyFile: true
}
},
// ...
],
// ...
}
`

Usage

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

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

In TypeScript use:
`tsx
import React from 'react';
import * as containerStyles from './container.module.css';

export const Container: React.FunctionComponent = ({ children }) => {
return (


{children}


);
}
`

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.

Replacing gatsby-plugin-scss-typescript / gatsby-plugin-typescript-css-modules

Since there are no further updates for gatsby-plugin-scss-typescript and gatsby-plugin-typescript-css-modules, you can simply replace them by gatsby-plugin-dts-css-modules (and gatsby-plugin-sass):

Just replace:

`js
module.exports = {
// ...
plugins: [
// ...
'gatsby-plugin-scss-typescript',
// or
'gatsby-plugin-typescript-css-modules',
// ...
],
// ...
}
`

by:

`js
module.exports = {
// ...
plugins: [
// ...
'gatsby-plugin-sass', // Required if you want to replace gatsby-plugin-scss-typescript
'gatsby-plugin-dts-css-modules',
// ...
],
// ...
}
`

Don't forget to also install gatsby-plugin-sass, if you want to replace gatsby-plugin-scss-typescript`!