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

const createStencilComponentGenerator = ({
  mappings = [],
  plugins = [],
  postprocessors = [],
}: GeneratorFactoryParams = {}): ComponentGenerator => {
  const generator = createComponentGenerator()

  const importStatementsPlugin = createImportPlugin({ fileType: FileType.TSX })
  const stencilStylePlugin = createCSSPlugin({
    declareDependency: 'decorator',
    templateStyle: 'jsx',
    templateChunkName: 'jsx-component',
  })
  const prettierJS = createPrettierJSPostProcessor({ fileType: FileType.TSX })

  generator.addMapping(StencilMapping)
  mappings.forEach((mapping) => generator.addMapping(mapping))

  generator.addPlugin(stencilComponentPlugin)
  generator.addPlugin(stencilStylePlugin)
  plugins.forEach((plugin) => generator.addPlugin(plugin))
  generator.addPlugin(importStatementsPlugin)

  generator.addPostProcessor(prettierJS)
  postprocessors.forEach((postprocessor) => generator.addPostProcessor(postprocessor))

import {
  createComponentGenerator,
  GeneratorFactoryParams,
} from '@teleporthq/teleport-component-generator'

import angularComponentPlugin from '@teleporthq/teleport-plugin-angular-base-component'
import { createCSSPlugin } from '@teleporthq/teleport-plugin-css'
import { createImportPlugin } from '@teleporthq/teleport-plugin-import-statements'
import prettierTS from '@teleporthq/teleport-postprocessor-prettier-ts'
import prettierHTML from '@teleporthq/teleport-postprocessor-prettier-html'

import AngularMapping from './angular-mapping.json'
import { ComponentGenerator, FileType } from '@teleporthq/teleport-types'

const importStatementsPlugin = createImportPlugin({ fileType: FileType.TS })
const stylePlugin = createCSSPlugin({
  inlineStyleAttributeKey: '[ngStyle]',
  declareDependency: 'decorator',
})

const createAngularComponentGenerator = ({
  mappings = [],
  plugins = [],
  postprocessors = [],
}: GeneratorFactoryParams = {}): ComponentGenerator => {
  const generator = createComponentGenerator()

  generator.addMapping(AngularMapping)
  mappings.forEach((mapping) => generator.addMapping(mapping))

  generator.addPlugin(angularComponentPlugin)
  generator.addPlugin(stylePlugin)

const createVueComponentGenerator = ({
  mappings = [],
  plugins = [],
  postprocessors = [],
}: GeneratorFactoryParams = {}): ComponentGenerator => {
  const generator = createComponentGenerator()
  const vueStylePlugin = createCSSPlugin({
    inlineStyleAttributeKey: ':style',
    forceScoping: true,
  })

  generator.addMapping(VueMapping)
  mappings.forEach((mapping) => generator.addMapping(mapping))

  generator.addPlugin(vueComponentPlugin)
  generator.addPlugin(vueStylePlugin)
  plugins.forEach((plugin) => generator.addPlugin(plugin))
  generator.addPlugin(importStatementsPlugin)

  generator.addPostProcessor(prettierJS)
  generator.addPostProcessor(prettierHTML)
  generator.addPostProcessor(vueFileProcessor)
  postprocessors.forEach((postprocessor) => generator.addPostProcessor(postprocessor))

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,