@teleporthq/teleport-plugin-react-jss 0.18.0

package/src/index.ts

@@ -0,0 +1,302 @@
+/*
+  teleport-plugin-react-jss
+
+  Plugin is responsible for generating styles from
+  - Styles defined on individual nodes.
+  - Styles defined in the project's global stylesheet.
+  - Styles present in the component style sheeet.
+*/
+
+import * as types from '@babel/types'
+import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
+import { ASTUtils, ASTBuilders, ParsedASTNode } from '@teleporthq/teleport-plugin-common'
+import {
+  ComponentPluginFactory,
+  ComponentPlugin,
+  ChunkType,
+  FileType,
+  PluginReactJSS,
+} from '@teleporthq/teleport-types'
+import {
+  generateStylesFromStyleObj,
+  createStylesHookDecleration,
+  generateStylesFromStyleSetDefinitions,
+  convertMediaAndStylesToObject,
+} from './utils'
+import { createStyleSheetPlugin } from './style-sheet'
+
+interface JSSConfig {
+  styleChunkName?: string
+  importChunkName?: string
+  componentChunkName: string
+  jssDeclarationName?: string
+  classAttributeName?: string
+  styleObjectImportName?: string
+}
+const EXPORT_IDENTIFIER = 'createUseStyles'
+
+export const createReactJSSPlugin: ComponentPluginFactory<JSSConfig> = (config) => {
+  const {
+    componentChunkName = 'jsx-component',
+    importChunkName = 'import-local',
+    styleChunkName = 'jss-style-definition',
+    jssDeclarationName = 'useStyles',
+    classAttributeName = 'className',
+    styleObjectImportName = 'classes',
+  } = config || {}
+
+  const reactJSSPlugin: ComponentPlugin = async (structure) => {
+    const { uidl, chunks, dependencies, options } = structure
+    const { projectStyleSet } = options
+    const { node, styleSetDefinitions: componentStyleSheet = {} } = uidl
+
+    const componentChunk = chunks.find((chunkItem) => chunkItem.name === componentChunkName)
+    if (!componentChunk) {
+      return structure
+    }
+
+    const jssStyleMap: Record<string, unknown> = {}
+    const mediaStyles: Record<string, Record<string, unknown>> = {}
+    const tokensUsed: string[] = []
+
+    const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop as string
+    const jsxNodesLookup = componentChunk.meta.nodesLookup || {}
+    let isProjectReferenced: boolean = false
+    const propsUsed: string[] = []
+
+    UIDLUtils.traverseElements(node, (element) => {
+      const { style, key, referencedStyles } = element
+      if (!style && !referencedStyles) {
+        return
+      }
+
+      const jsxTag = jsxNodesLookup[key] as types.JSXElement
+      if (!jsxTag) {
+        return
+      }
+
+      const className = StringUtils.camelCaseToDashCase(key)
+      const classNamesToAppend: Set<types.MemberExpression | types.Identifier> = new Set()
+      const nodeStyleIdentifier = types.memberExpression(
+        types.identifier(styleObjectImportName),
+        types.identifier(`'${className}'`),
+        true
+      )
+
+      if (Object.keys(style || {}).length > 0) {
+        jssStyleMap[className] = generateStylesFromStyleObj(style, tokensUsed, propsUsed)
+        classNamesToAppend.add(nodeStyleIdentifier)
+      }
+
+      if (referencedStyles && Object.keys(referencedStyles || {}).length > 0) {
+        Object.values(referencedStyles).forEach((styleRef) => {
+          switch (styleRef.content.mapType) {
+            case 'inlined': {
+              const { conditions } = styleRef.content
+              const [condition] = conditions
+
+              if (Object.keys(styleRef.content.styles || {}).length === 0) {
+                return
+              }
+
+              if (condition.conditionType === 'screen-size') {
+                mediaStyles[condition.maxWidth] = {
+                  ...mediaStyles[condition.maxWidth],
+                  [className]: generateStylesFromStyleObj(
+                    styleRef.content.styles,
+                    tokensUsed,
+                    propsUsed
+                  ),
+                }
+              }
+
+              if (condition.conditionType === 'element-state') {
+                jssStyleMap[className] = {
+                  ...(jssStyleMap[className] as Record<string, string>),
+                  [`&:${condition.content}`]: generateStylesFromStyleObj(
+                    styleRef.content.styles,
+                    tokensUsed,
+                    propsUsed
+                  ),
+                }
+              }
+
+              classNamesToAppend.add(nodeStyleIdentifier)
+              return
+            }
+
+            case 'component-referenced': {
+              const classContent = styleRef.content.content
+              if (classContent.type === 'static') {
+                classNamesToAppend.add(types.identifier(`'${classContent.content}'`))
+                return
+              }
+
+              if (
+                classContent.type === 'dynamic' &&
+                classContent.content.referenceType === 'prop'
+              ) {
+                classNamesToAppend.add(
+                  types.memberExpression(
+                    types.identifier(styleObjectImportName),
+                    types.memberExpression(
+                      types.identifier(propsPrefix),
+                      types.identifier(classContent.content.id)
+                    ),
+                    true
+                  )
+                )
+              }
+
+              if (
+                classContent.type === 'dynamic' &&
+                classContent.content.referenceType === 'comp'
+              ) {
+                classNamesToAppend.add(
+                  types.memberExpression(
+                    types.identifier(styleObjectImportName),
+                    types.identifier(`'${classContent.content.id}'`),
+                    true
+                  )
+                )
+              }
+
+              return
+            }
+
+            case 'project-referenced': {
+              if (!projectStyleSet) {
+                throw new PluginReactJSS(
+                  `Project Style Sheet is missing, but the node is referring to it ${JSON.stringify(
+                    element,
+                    null,
+                    2
+                  )}`
+                )
+              }
+
+              const { content } = styleRef
+              const referedStyle = projectStyleSet.styleSetDefinitions[content.referenceId]
+              if (!referedStyle) {
+                throw new PluginReactJSS(
+                  `Style used from global stylesheet is missing - ${content.referenceId}`
+                )
+              }
+
+              classNamesToAppend.add(
+                types.memberExpression(
+                  types.identifier('projectStyles'),
+                  types.identifier(`'${content.referenceId}'`),
+                  true
+                )
+              )
+              isProjectReferenced = true
+              return
+            }
+            default: {
+              throw new PluginReactJSS(`
+                We support only inlined and project-referenced styles as of now, received ${JSON.stringify(
+                  styleRef.content,
+                  null,
+                  2
+                )}
+              `)
+            }
+          }
+        })
+      }
+
+      ASTUtils.addMultipleDynamicAttributesToJSXTag(
+        jsxTag,
+        classAttributeName,
+        Array.from(classNamesToAppend)
+      )
+    })
+
+    if (Object.keys(componentStyleSheet).length > 0) {
+      generateStylesFromStyleSetDefinitions({
+        styleSetDefinitions: componentStyleSheet,
+        styleSet: jssStyleMap,
+        mediaStyles,
+        tokensUsed,
+      })
+    }
+
+    const { content: astContent } = componentChunk
+    const parser = new ParsedASTNode(astContent)
+
+    const astNode = (parser.ast as types.VariableDeclaration)
+      .declarations[0] as types.VariableDeclarator
+    if (astNode.type === 'VariableDeclarator') {
+      const isPropsInjected = (astNode.init as types.ArrowFunctionExpression).params?.some(
+        (prop: types.Identifier) => prop.name === propsPrefix
+      )
+      if (!isPropsInjected && propsUsed.length > 0) {
+        ;(astNode.init as types.ArrowFunctionExpression).params.push(types.identifier(propsPrefix))
+      }
+    }
+
+    if (tokensUsed.length > 0) {
+      dependencies.TOKENS = {
+        type: 'local',
+        path: `${projectStyleSet.path}${projectStyleSet.fileName}`,
+        meta: {
+          namedImport: true,
+        },
+      }
+    }
+
+    if (isProjectReferenced) {
+      dependencies.useProjectStyles = {
+        type: 'local',
+        path: `${projectStyleSet.path}${projectStyleSet.fileName}`,
+        meta: {
+          namedImport: true,
+        },
+      }
+      ;((astNode.init as types.ArrowFunctionExpression).body as types.BlockStatement).body.unshift(
+        createStylesHookDecleration('projectStyles', 'useProjectStyles')
+      )
+    }
+
+    if (!Object.keys(jssStyleMap).length && !Object.keys(mediaStyles).length) {
+      return structure
+    }
+
+    ;((astNode.init as types.ArrowFunctionExpression).body as types.BlockStatement).body.unshift(
+      propsUsed.length > 0
+        ? createStylesHookDecleration(styleObjectImportName, 'useStyles', propsPrefix)
+        : createStylesHookDecleration(styleObjectImportName, 'useStyles')
+    )
+
+    dependencies[EXPORT_IDENTIFIER] = {
+      type: 'package',
+      path: 'react-jss',
+      version: '10.4.0',
+      meta: {
+        namedImport: true,
+      },
+    }
+
+    chunks.push({
+      type: ChunkType.AST,
+      fileType: FileType.JS,
+      name: styleChunkName,
+      linkAfter: [importChunkName],
+      content: ASTBuilders.createConstAssignment(
+        jssDeclarationName,
+        types.callExpression(types.identifier(EXPORT_IDENTIFIER), [
+          convertMediaAndStylesToObject(jssStyleMap, mediaStyles),
+        ])
+      ),
+    })
+
+    return structure
+  }
+
+  return reactJSSPlugin
+}
+
+export { createStyleSheetPlugin }
+
+export default createReactJSSPlugin()

package/src/style-sheet.ts

@@ -0,0 +1,97 @@
+import * as types from '@babel/types'
+import { ASTUtils } from '@teleporthq/teleport-plugin-common'
+import {
+  ComponentPlugin,
+  ComponentPluginFactory,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
+import { StringUtils } from '@teleporthq/teleport-shared'
+import { generateStylesFromStyleSetDefinitions, convertMediaAndStylesToObject } from './utils'
+
+interface StyleSheetPlugin {
+  fileName?: string
+}
+
+export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> = (config) => {
+  const { fileName } = config || { fileName: 'style' }
+  const styleSheetPlugin: ComponentPlugin = async (structure) => {
+    const { uidl, chunks, dependencies } = structure
+    const { styleSetDefinitions = {}, designLanguage: { tokens = {} } = {} } = uidl
+
+    if (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0) {
+      return structure
+    }
+
+    const tokensMap: Record<string, string | number> = Object.keys(tokens || {}).reduce(
+      (acc: Record<string, string | number>, key: string) => {
+        const style = tokens[key]
+        const name: string = StringUtils.capitalize(StringUtils.dashCaseToCamelCase(key))
+        acc[name] = style.content as string
+        return acc
+      },
+      {}
+    )
+
+    const styleSet: Record<string, unknown> = {}
+    const mediaStyles: Record<string, Record<string, unknown>> = {}
+    if (Object.keys(styleSetDefinitions).length > 0) {
+      generateStylesFromStyleSetDefinitions({
+        styleSetDefinitions,
+        styleSet,
+        mediaStyles,
+      })
+    }
+
+    uidl.outputOptions = uidl.outputOptions || {}
+    uidl.outputOptions.fileName = fileName
+
+    dependencies.createUseStyles = {
+      type: 'package',
+      path: 'react-jss',
+      version: '10.4.0',
+      meta: {
+        namedImport: true,
+      },
+    }
+
+    if (Object.keys(tokens).length > 0) {
+      chunks.push({
+        name: 'tokens-chunk',
+        type: ChunkType.AST,
+        fileType: FileType.JS,
+        content: types.exportNamedDeclaration(
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.identifier('TOKENS'),
+              ASTUtils.objectToObjectExpression(tokensMap)
+            ),
+          ])
+        ),
+        linkAfter: ['import-local'],
+      })
+    }
+
+    if (Object.keys(styleSet).length > 0) {
+      chunks.push({
+        name: fileName,
+        type: ChunkType.AST,
+        fileType: FileType.JS,
+        content: types.exportNamedDeclaration(
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.identifier('useProjectStyles'),
+              types.callExpression(types.identifier('createUseStyles'), [
+                convertMediaAndStylesToObject(styleSet, mediaStyles),
+              ])
+            ),
+          ])
+        ),
+        linkAfter: ['tokens-chunk'],
+      })
+    }
+
+    return structure
+  }
+  return styleSheetPlugin
+}

package/src/utils.ts

@@ -0,0 +1,111 @@
+import * as types from '@babel/types'
+import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
+import { ParsedASTNode, ASTBuilders, ASTUtils } from '@teleporthq/teleport-plugin-common'
+import { UIDLStyleSetDefinition, UIDLStyleValue } from '@teleporthq/teleport-types'
+
+export const generateStylesFromStyleSetDefinitions = (params: {
+  styleSetDefinitions: Record<string, UIDLStyleSetDefinition>
+  styleSet: Record<string, unknown>
+  mediaStyles: Record<string, Record<string, unknown>>
+  tokensUsed?: string[]
+  formatClassName?: boolean
+}) => {
+  const {
+    styleSetDefinitions,
+    styleSet,
+    tokensUsed,
+    formatClassName = false,
+    mediaStyles = {},
+  } = params
+  Object.keys(styleSetDefinitions).forEach((styleId) => {
+    const style = styleSetDefinitions[styleId]
+    const className = formatClassName ? StringUtils.dashCaseToCamelCase(styleId) : styleId
+    const { conditions = [], content } = style
+    styleSet[className] = generateStylesFromStyleObj(content, tokensUsed)
+
+    if (conditions.length > 0) {
+      conditions.forEach((styleRef) => {
+        if (Object.keys(styleRef.content).length === 0) {
+          return
+        }
+        if (styleRef.type === 'screen-size') {
+          mediaStyles[styleRef.meta.maxWidth] = {
+            ...mediaStyles[styleRef.meta.maxWidth],
+            [className]: generateStylesFromStyleObj(styleRef.content, tokensUsed),
+          }
+        }
+
+        if (styleRef.type === 'element-state') {
+          styleSet[className] = {
+            ...((styleSet[className] as Record<string, unknown>) || {}),
+            ...{
+              [`&:${styleRef.meta.state}`]: generateStylesFromStyleObj(
+                styleRef.content,
+                tokensUsed
+              ),
+            },
+          }
+        }
+      })
+    }
+  })
+}
+
+export const generateStylesFromStyleObj = (
+  style: Record<string, UIDLStyleValue>,
+  tokensUsed?: string[],
+  propsUsed?: string[]
+) => {
+  return UIDLUtils.transformDynamicStyles(style, (styleValue) => {
+    switch (styleValue.content.referenceType) {
+      case 'prop':
+        propsUsed?.push(styleValue.content.id)
+        return new ParsedASTNode(
+          ASTBuilders.createArrowFunctionWithMemberExpression('props', styleValue.content.id)
+        )
+      case 'token':
+        const token = StringUtils.capitalize(StringUtils.dashCaseToCamelCase(styleValue.content.id))
+        tokensUsed?.push(token)
+        return new ParsedASTNode(
+          types.memberExpression(types.identifier('TOKENS'), types.identifier(token))
+        )
+      default:
+        throw new Error(
+          `Error running transformDynamicStyles in reactJSSComponentStyleChunksPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
+        )
+    }
+  })
+}
+
+export const createStylesHookDecleration = (
+  assignee: string,
+  hookName: string,
+  dynamicValueIdentifier?: string
+) =>
+  types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier(assignee),
+      types.callExpression(
+        types.identifier(hookName),
+        dynamicValueIdentifier ? [types.identifier(dynamicValueIdentifier)] : []
+      )
+    ),
+  ])
+
+export const convertMediaAndStylesToObject = (
+  styleSet: Record<string, unknown>,
+  mediaStyles: Record<string, Record<string, unknown>>
+): types.ObjectExpression => {
+  const styles = ASTUtils.objectToObjectExpression(styleSet)
+
+  Object.keys(mediaStyles).forEach((mediaKey: string) => {
+    styles.properties.push(
+      types.objectProperty(
+        types.identifier(`'@media(max-width: ${mediaKey}px)'`),
+        ASTUtils.objectToObjectExpression(mediaStyles[mediaKey])
+      )
+    )
+  }, [])
+
+  return styles
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/esm"
+  },
+  "include": [
+    "./src"
+  ]
+}