How to use the @teleporthq/teleport-types.PreactStyleVariation.CSSModules function in @teleporthq/teleport-types

const createPreactComponentGenerator = (
  variation = PreactStyleVariation.CSSModules,
  { mappings = [], plugins = [], postprocessors = [] }: GeneratorFactoryParams = {}
): ComponentGenerator => {
  const generator = createComponentGenerator()
  const stylePlugins = {
    [PreactStyleVariation.InlineStyles]: inlineStylesPlugin,
    [PreactStyleVariation.CSSModules]: createCSSModulesPlugin({
      classAttributeName: 'class',
      moduleExtension: false,
    }),
    [PreactStyleVariation.CSS]: createCSSPlugin({
      templateChunkName: 'jsx-component',
      templateStyle: 'jsx',
      declareDependency: 'import',
      forceScoping: true,
    }),
  }

const createPreactProjectGenerator = () => {
  const preactComponentGenerator = createPreactComponentGenerator(PreactStyleVariation.CSSModules, {
    mappings: [PreactProjectMapping as Mapping],
  })

  const preactPageGenerator = createPreactComponentGenerator(PreactStyleVariation.CSSModules, {
    plugins: [headConfigPlugin],
    mappings: [PreactProjectMapping as Mapping],
  })

  const routerPlugin = createReactAppRoutingPlugin({ flavor: 'preact' })
  const routingComponentGenerator = createComponentGenerator()
  routingComponentGenerator.addPlugin(routerPlugin)
  routingComponentGenerator.addPlugin(importStatementsPlugin)
  routingComponentGenerator.addPostProcessor(prettierJS)

  const htmlFileGenerator = createComponentGenerator()

  const generator = createProjectGenerator({
    components: {
      generator: preactComponentGenerator,
      path: ['src', 'components'],

const createPreactComponentGenerator = (
  variation = PreactStyleVariation.CSSModules,
  { mappings = [], plugins = [], postprocessors = [] }: GeneratorFactoryParams = {}
): ComponentGenerator => {
  const generator = createComponentGenerator()
  const stylePlugins = {
    [PreactStyleVariation.InlineStyles]: inlineStylesPlugin,
    [PreactStyleVariation.CSSModules]: createCSSModulesPlugin({
      classAttributeName: 'class',
      moduleExtension: false,
    }),
    [PreactStyleVariation.CSS]: createCSSPlugin({
      templateChunkName: 'jsx-component',
      templateStyle: 'jsx',
      declareDependency: 'import',
      forceScoping: true,
    }),
  }
  const stylePlugin = stylePlugins[variation]
  if (!stylePlugin) {
    throw new Error(`Invalid style variation '${variation}'`)
  }

  generator.addMapping(PreactMapping)

const createPreactProjectGenerator = () => {
  const preactComponentGenerator = createPreactComponentGenerator(PreactStyleVariation.CSSModules, {
    mappings: [PreactProjectMapping as Mapping],
  })

  const preactPageGenerator = createPreactComponentGenerator(PreactStyleVariation.CSSModules, {
    plugins: [headConfigPlugin],
    mappings: [PreactProjectMapping as Mapping],
  })

  const routerPlugin = createReactAppRoutingPlugin({ flavor: 'preact' })
  const routingComponentGenerator = createComponentGenerator()
  routingComponentGenerator.addPlugin(routerPlugin)
  routingComponentGenerator.addPlugin(importStatementsPlugin)
  routingComponentGenerator.addPostProcessor(prettierJS)

  const htmlFileGenerator = createComponentGenerator()