Gatsby Plugin React CSS Modules

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-react-css-modules`,
      options: {
        // *.css files are included by default.
        // To support another syntax (e.g. SCSS),
        // add `postcss-scss` to your project's devDependencies
        // and add the following option here:
        filetypes: {
          ".scss": { syntax: `postcss-scss` },
        },

        // Exclude global styles from the plugin using a RegExp:
        exclude: `\/global\/`,
        // For all the options check babel-plugin-react-css-modules README
      },
    },
  ],
}

import React from "react"

// CSS Module file
import styles from "./component.module.css"

function MyComponent() {
  return (
    <div styleName="container">
      <h1 styleName="title">Hello World</h1>
      <p styleName="description">Using styleName instead of className</p>
    </div>
  )
}

export default MyComponent

/**
 * Gatsby lifecycle hook that configures Babel to use babel-plugin-react-css-modules
 * @param {Object} args - Gatsby lifecycle arguments
 * @param {Object} args.actions - Gatsby actions object containing setBabelPlugin method
 * @param {Object} pluginOptions - Plugin configuration options from gatsby-config.js
 */
exports.onCreateBabelConfig = function({ actions }, pluginOptions) {}

interface PluginOptions {
  /**
   * File type configuration for different CSS syntaxes
   * Example: { ".scss": { syntax: "postcss-scss" } }
   */
  filetypes?: Record<string, { syntax: string }>;
  
  /**
   * RegExp pattern to exclude global styles from processing
   * Example: /\/global\//
   */
  exclude?: RegExp | string;
  
  /**
   * CSS class name generation pattern
   * Default: "[name]--[local]--[hash:base64:5]"
   */
  generateScopedName?: string;
  
  /**
   * Enable webpack hot module reloading
   * Default: process.env.NODE_ENV !== "production"
   */
  webpackHotModuleReloading?: boolean;
  
  /**
   * Additional babel-plugin-react-css-modules options
   * See babel-plugin-react-css-modules documentation for all available options
   */
  [key: string]: any;
}