README
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.