How to use the @teleporthq/teleport-shared.UIDLUtils.transformDynamicStyles function in @teleporthq/teleport-shared

// Styled components might create an element that clashes with native element (Text, View, Image, etc.)
        if (
          illegalComponentNames.includes(className) ||
          StringUtils.dashCaseToUpperCamelCase(key) === name ||
          Object.keys(dependencies).includes(className)
        ) {
          className = `Styled${className}`
        }

        const timesReferred = countPropReferences(style, 0)

        if (componentLibrary === 'reactnative') {
          style = UIDLUtils.cleanupNestedStyles(style)
        }

        jssStyleMap[className] = UIDLUtils.transformDynamicStyles(
          style,
          (styleValue, attribute) => {
            if (styleValue.content.referenceType === 'prop') {
              const dashCaseAttribute = StringUtils.dashCaseToCamelCase(attribute)
              switch (timesReferred) {
                case 1:
                  ASTUtils.addDynamicAttributeToJSXTag(
                    root,
                    dashCaseAttribute,
                    styleValue.content.id,
                    propsPrefix
                  )
                  return `\$\{props => props.${dashCaseAttribute}\}`
                default:
                  return `\$\{props => props.${styleValue.content.id}\}`
              }

UIDLUtils.traverseElements(node, (element) => {
      const { style, key } = element
      if (style && Object.keys(style).length > 0) {
        const root = jsxNodesLookup[key]
        const className = StringUtils.camelCaseToDashCase(key)
        // Generating the string templates for the dynamic styles
        const styleRules = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
          if (styleValue.content.referenceType === 'prop') {
            return `\$\{${propsPrefix}.${styleValue.content.id}\}`
          }
          throw new Error(
            `Error running transformDynamicStyles in reactStyledJSXChunkPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
          )
        })
        styleJSXString.push(StyleBuilders.createCSSClass(className, styleRules))
        ASTUtils.addClassStringOnJSXTag(root, className)
      }
    })

)

          // When the className is equal to the jsFriendlyClassName, it can be safely addressed with `styles.`
          const classNameIsJSFriendly = className === jsFriendlyClassName
          const classReferenceIdentifier =
            camelCaseClassNames || classNameIsJSFriendly
              ? `styles.${jsFriendlyClassName}`
              : `styles['${className}']`

          ASTUtils.addDynamicAttributeToJSXTag(root, classAttributeName, classReferenceIdentifier)
        }

        if (Object.keys(dynamicStyles).length) {
          const rootStyles = UIDLUtils.cleanupNestedStyles(dynamicStyles)

          const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
            StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
          )

          // If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
          if (Object.keys(inlineStyles).length > 0) {
            ASTUtils.addAttributeToJSXTag(root, 'style', inlineStyles)
          }
        }
      }
    })

ASTUtils.addClassStringOnJSXTag(root, className, classAttributeName)
        }
      }

      if (Object.keys(dynamicStyles).length > 0) {
        const rootStyles = UIDLUtils.cleanupNestedStyles(dynamicStyles)

        // If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
        if (Object.keys(rootStyles).length > 0) {
          if (templateStyle === 'html') {
            // simple string expression
            const inlineStyles = createDynamicInlineStyle(rootStyles)
            HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, `{${inlineStyles}}`)
          } else {
            // jsx object expression
            const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
              StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
            )
            ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles)
          }
        }
      }
    })

)

          // When the className is equal to the jsFriendlyClassName, it can be safely addressed with `styles.`
          const classNameIsJSFriendly = className === jsFriendlyClassName
          const classReferenceIdentifier =
            camelCaseClassNames || classNameIsJSFriendly
              ? `styles.${jsFriendlyClassName}`
              : `styles['${className}']`

          ASTUtils.addDynamicAttributeToJSXTag(root, classAttributeName, classReferenceIdentifier)
        }

        if (Object.keys(dynamicStyles).length) {
          const rootStyles = UIDLUtils.cleanupNestedStyles(dynamicStyles)

          const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
            StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
          )

          // If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
          if (Object.keys(inlineStyles).length > 0) {
            ASTUtils.addAttributeToJSXTag(root, 'style', inlineStyles)
          }
        }
      }
    })

UIDLUtils.traverseElements(uidl.node, (element) => {
      const { style, key } = element

      if (style && Object.keys(style).length > 0) {
        const jsxASTTag = componentChunk.meta.nodesLookup[key]
        const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
        if (!jsxASTTag) {
          return
        }

        // Nested styles are ignored
        const rootStyles = UIDLUtils.cleanupNestedStyles(style)
        const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
          StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
        )

        ASTUtils.addAttributeToJSXTag(jsxASTTag, 'style', inlineStyles)
      }
    })

UIDLUtils.traverseElements(node, (element) => {
      const { style, key } = element
      if (style && Object.keys(style).length > 0) {
        const root = jsxNodesLookup[key]
        const className = StringUtils.camelCaseToDashCase(key)
        jssStyleMap[className] = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
          if (styleValue.content.referenceType === 'prop') {
            return new ParsedASTNode(
              ASTBuilders.createArrowFunctionWithMemberExpression('props', styleValue.content.id)
            )
          }
          throw new Error(
            `Error running transformDynamicStyles in reactJSSComponentStyleChunksPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
          )
        })
        ASTUtils.addDynamicAttributeToJSXTag(
          root,
          classAttributeName,
          `classes['${className}']`,
          propsPrefix
        )
      }