How to use the @teleporthq/teleport-types.FileType.CSS function in @teleporthq/teleport-types

To help you get started, we’ve selected a few @teleporthq/teleport-types examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github teleporthq / teleport-code-generators / packages / teleport-plugin-css / src / index.ts View on Github external
content: jssStylesArray.join('\n'),
        linkAfter: [],
      })

      /**
       * Setup an import statement for the styles
       * The name of the file is either in the meta of the component generator
       * or we fallback to the name of the component
       */
      const cssFileName = UIDLUtils.getStyleFileName(uidl)

      if (declareDependency === 'decorator' && componentDecoratorChunk) {
        const decoratorAST = componentDecoratorChunk.content
        const decoratorParam = decoratorAST.expression.arguments[0]
        ASTUtils.addPropertyToASTObject(decoratorParam, 'styleUrls', [
          `${cssFileName}.${FileType.CSS}`,
        ])
      }

      if (declareDependency === 'import') {
        dependencies.styles = {
          // styles will not be used in this case as we have importJustPath flag set
          type: 'local',
          path: `./${cssFileName}.${FileType.CSS}`,
          meta: {
            importJustPath: true,
          },
        }
      }
    }

    return structure
github teleporthq / teleport-code-generators / packages / teleport-plugin-css / src / index.ts View on Github external
} else {
            // jsx object expression
            const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
              StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
            )
            ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles)
          }
        }
      }
    })

    if (jssStylesArray.length > 0) {
      chunks.push({
        type: ChunkType.STRING,
        name: chunkName,
        fileType: FileType.CSS,
        content: jssStylesArray.join('\n'),
        linkAfter: [],
      })

      /**
       * Setup an import statement for the styles
       * The name of the file is either in the meta of the component generator
       * or we fallback to the name of the component
       */
      const cssFileName = UIDLUtils.getStyleFileName(uidl)

      if (declareDependency === 'decorator' && componentDecoratorChunk) {
        const decoratorAST = componentDecoratorChunk.content
        const decoratorParam = decoratorAST.expression.arguments[0]
        ASTUtils.addPropertyToASTObject(decoratorParam, 'styleUrls', [
          `${cssFileName}.${FileType.CSS}`,
github teleporthq / teleport-code-generators / packages / teleport-postprocessor-vue-file / src / index.ts View on Github external
let htmlCode

    if (codeChunks[FileType.HTML]) {
      htmlCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.HTML])
    } else {
      throw new Error('No code chunk of type HTML found, vue file concatenation aborded')
    }

    if (codeChunks[FileType.JS]) {
      jsCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.JS])
    } else {
      throw new Error('No code chunk of type JS found, vue file concatenation aborded')
    }

    // if no CSS, skip the <style></style>
    if (codeChunks[FileType.CSS]) {
      cssCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.CSS])
    }

    const formattedHTMLCode = StringUtils.addSpacesToEachLine(' '.repeat(2), htmlCode)
    const vueCode = buildVueFile(formattedHTMLCode, jsCode, cssCode)

    return {
      [FileType.VUE]: vueCode,
    }
  }
github teleporthq / teleport-code-generators / packages / teleport-component-generator-react / __tests__ / integration / component-style.ts View on Github external
it('should return code in an array of files', async () => {
      const result = await generator.generateComponent(ComponentWithValidStyle)
      const jsFile = findFileByType(result.files, FileType.JS)
      const cssFile = findFileByType(result.files, FileType.CSS)

      expect(jsFile).toBeDefined()
      expect(cssFile).toBeDefined()
      expect(jsFile.content).toContain('import React')
      expect(jsFile.content).toContain('flexDirection: props.direction')
      expect(cssFile.content).toContain(`align-self: center`)
    })
  })
github teleporthq / teleport-code-generators / packages / teleport-plugin-css-modules / __tests__ / index.ts View on Github external
it('generates a string chunk out of the styles and adds the className between brackets', async () => {
    const plugin = createCSSModulesPlugin({
      camelCaseClassNames: true,
    })
    const structure = setupPluginStructure('list-container')
    const { chunks } = await plugin(structure)

    expect(chunks.length).toBe(2)
    expect(chunks[1].type).toBe('string')
    expect(chunks[1].fileType).toBe(FileType.CSS)
    expect(chunks[1].content).toContain('height: 100px;')

    const nodeReference = chunks[0].meta.nodesLookup['list-container']
    expect(nodeReference.openingElement.attributes.length).toBe(1)

    const classNameAttr = nodeReference.openingElement.attributes[0]
    expect(classNameAttr.name.name).toBe('className')
    expect(classNameAttr.value.expression.name).toBe('styles.listContainer')
  })
github teleporthq / teleport-code-generators / packages / teleport-component-generator-react / __tests__ / integration / component-style.ts View on Github external
it('CSSModules should refer state in styles when state is mapped', async () => {
      const generator = createReactComponentGenerator(ReactStyleVariation.CSSModules)
      const result = await generator.generateComponent(ComponentWithStateReference)
      const jsFile = findFileByType(result.files, FileType.JS)
      const cssFile = findFileByType(result.files, FileType.CSS)

      expect(jsFile).toBeDefined()
      expect(cssFile).toBeDefined()
      expect(jsFile.content).toContain('display: active')
      expect(jsFile.content).toContain('height: props.config.height')
      expect(cssFile.content).toContain('align-self: center;')
    })
github teleporthq / teleport-code-generators / packages / teleport-component-generator / src / index.ts View on Github external
const getFileName = (
  fileType: string,
  fileName: string,
  styleFileName: string,
  templateFileName: string
) => {
  if (fileType === FileType.CSS) {
    return styleFileName || fileName
  }

  if (fileType === FileType.HTML) {
    return templateFileName || fileName
  }

  return fileName
}
github teleporthq / teleport-code-generators / packages / teleport-plugin-css-modules / src / index.ts View on Github external
*/
    if (moduleExtension) {
      cssFileName = `${cssFileName}.module`
      uidl.outputOptions = uidl.outputOptions || {}
      uidl.outputOptions.styleFileName = cssFileName
    }

    dependencies[styleObjectImportName] = {
      type: 'local',
      path: `./${cssFileName}.${FileType.CSS}`,
    }

    structure.chunks.push({
      name: styleChunkName,
      type: ChunkType.STRING,
      fileType: FileType.CSS,
      content: cssClasses.join('\n'),
      linkAfter: [],
    })

    return structure
  }
github teleporthq / teleport-code-generators / packages / teleport-plugin-css-modules / src / index.ts View on Github external
* or we fallback to the name of the component
     */
    let cssFileName = UIDLUtils.getStyleFileName(uidl)

    /**
     * In case the moduleExtension flag is passed, the file name should be in the form [fileName].module.css
     */
    if (moduleExtension) {
      cssFileName = `${cssFileName}.module`
      uidl.outputOptions = uidl.outputOptions || {}
      uidl.outputOptions.styleFileName = cssFileName
    }

    dependencies[styleObjectImportName] = {
      type: 'local',
      path: `./${cssFileName}.${FileType.CSS}`,
    }

    structure.chunks.push({
      name: styleChunkName,
      type: ChunkType.STRING,
      fileType: FileType.CSS,
      content: cssClasses.join('\n'),
      linkAfter: [],
    })

    return structure
  }
github teleporthq / teleport-code-generators / packages / teleport-plugin-css-modules / src / index.ts View on Github external
* or we fallback to the name of the component
     */
    let cssFileName = UIDLUtils.getStyleFileName(uidl)

    /**
     * In case the moduleExtension flag is passed, the file name should be in the form [fileName].module.css
     */
    if (moduleExtension) {
      cssFileName = `${cssFileName}.module`
      uidl.outputOptions = uidl.outputOptions || {}
      uidl.outputOptions.styleFileName = cssFileName
    }

    dependencies[styleObjectImportName] = {
      type: 'local',
      path: `./${cssFileName}.${FileType.CSS}`,
    }

    structure.chunks.push({
      name: styleChunkName,
      type: ChunkType.STRING,
      fileType: FileType.CSS,
      content: cssClasses.join('\n'),
      linkAfter: [],
    })

    return structure
  }