How to use @teleporthq/teleport-plugin-css-modules - 2 common examples

const createReactComponentGenerator = (
  variation = ReactStyleVariation.CSSModules,
  { mappings = [], plugins = [], postprocessors = [] }: GeneratorFactoryParams = {}
): ComponentGenerator => {
  const cssPlugin = createCSSPlugin({
    templateChunkName: 'jsx-component',
    templateStyle: 'jsx',
    declareDependency: 'import',
    classAttributeName: 'className',
    forceScoping: true,
  })

  const cssModulesPlugin = createCSSModulesPlugin({ moduleExtension: true })

  const stylePlugins = {
    [ReactStyleVariation.InlineStyles]: inlineStylesPlugin,
    [ReactStyleVariation.StyledComponents]: reactStyledComponentsPlugin,
    [ReactStyleVariation.StyledJSX]: reactStyledJSXPlugin,
    [ReactStyleVariation.CSSModules]: cssModulesPlugin,
    [ReactStyleVariation.CSS]: cssPlugin,
    [ReactStyleVariation.ReactJSS]: reactJSSPlugin,
  }

  const stylePlugin = stylePlugins[variation]

  if (!stylePlugin) {
    throw new Error(`Invalid style variation '${variation}'`)
  }

import reactAppRoutingPlugin from '@teleporthq/teleport-plugin-react-app-routing'
import reactBasePlugin from '@teleporthq/teleport-plugin-react-base-component'
import { createCSSModulesPlugin } from '@teleporthq/teleport-plugin-css-modules'
import reactProptypes from '@teleporthq/teleport-plugin-jsx-proptypes'
import importStatementsPlugin from '@teleporthq/teleport-plugin-import-statements'
import headConfigPlugin from '@teleporthq/teleport-plugin-jsx-head-config'
import prettierJS from '@teleporthq/teleport-postprocessor-prettier-js'
import prettierJSX from '@teleporthq/teleport-postprocessor-prettier-jsx'

import { Mapping, ComponentPlugin } from '@teleporthq/teleport-types'

import GatsbyProjectMapping from './gatsby-mapping.json'
import GatsbyTemplate from './project-template'
import { createCustomHTMLEntryFile } from './utils'

const cssModulesPlugin = createCSSModulesPlugin({
  moduleExtension: true,
  camelCaseClassNames: true,
})

const createGatsbyProjectGenerator = () => {
  const reactComponentGenerator = createCustomReactComponentGenerator()
  const reactPagesGenerator = createCustomReactComponentGenerator([headConfigPlugin])

  const routingComponentGenerator = createComponentGenerator()
  routingComponentGenerator.addPlugin(reactAppRoutingPlugin)
  routingComponentGenerator.addPlugin(importStatementsPlugin)
  routingComponentGenerator.addPostProcessor(prettierJS)

  const htmlFileGenerator = createComponentGenerator()
  htmlFileGenerator.addPostProcessor(prettierJS)