gatsby-plugin-dts-css-modules

    2.2.0 • Public • Published

    npm version Dependency Status Known Vulnerabilities npm node MIT license

    gatsby-plugin-dts-css-modules

    GatsbyJS 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

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

    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

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

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

    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.

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

    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:

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

    by:

    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!

    Install

    npm i gatsby-plugin-dts-css-modules

    DownloadsWeekly Downloads

    2,416

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    12.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • jens-duttke