gatsby-plugin-dts-css-modules
Version:
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.
136 lines (106 loc) • 4.42 kB
Markdown
[](https://badge.fury.io/js/gatsby-plugin-dts-css-modules)
[](https://www.npmjs.com/package/gatsby-plugin-dts-css-modules)
[](https://snyk.io/test/github/jens-duttke/gatsby-plugin-dts-css-modules?targetFile=package.json)
[](https://www.npmjs.com/package/gatsby-plugin-dts-css-modules)
[](https://www.npmjs.com/package/gatsby-plugin-dts-css-modules)
[](https://opensource.org/licenses/MIT)
# gatsby-plugin-dts-css-modules
[GatsbyJS](gatsbyjs.org) 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](https://www.gatsbyjs.com/docs/how-to/styling/css-modules/).
This plugin utilizes the Webpack loader [dts-css-modules-loader](https://github.com/Megaputer/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](https://github.com/Megaputer/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 (
<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.
## 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`](https://www.npmjs.com/package/gatsby-plugin-sass), if you want to replace `gatsby-plugin-scss-typescript`!