@teleporthq/teleport-plugin-react-styled-jsx 0.44.0-alpha.0 → 0.44.0

package/src/index.ts

@@ -1,27 +1,54 @@
 import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
-import { ASTUtils, StyleBuilders, ASTBuilders } from '@teleporthq/teleport-plugin-common'
+import {
+  ASTUtils,
+  StyleBuilders,
+  ASTBuilders,
+  ParsedASTNode,
+  createBinaryExpression,
+} from '@teleporthq/teleport-plugin-common'
 import {
   ComponentPluginFactory,
   ComponentPlugin,
+  UIDLConditionExpressionEntry,
   UIDLStyleValue,
   PluginStyledJSX,
+  UIDLElement,
+  UIDLElementNode,
 } from '@teleporthq/teleport-types'
 import { generateStyledJSXTag } from './utils'
 import * as types from '@babel/types'
 
 interface StyledJSXConfig {
   componentChunkName: string
-  forceScoping: boolean
 }
 
+const transformStyle = (style: Record<string, UIDLStyleValue>, propsPrefix: string) =>
+  UIDLUtils.transformDynamicStyles(style, (styleValue) => {
+    switch (styleValue.content.referenceType) {
+      case 'token':
+        return `var(${StringUtils.generateCSSVariableName(styleValue.content.id)})`
+      case 'prop':
+        return `\$\{${propsPrefix}.${styleValue.content.id}\}`
+      default:
+        throw new PluginStyledJSX(
+          `Error running transformDynamicStyles in reactStyledJSXChunkPlugin.\n
+          Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
+        )
+    }
+  })
+
 export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig> = (config) => {
-  const { componentChunkName = 'jsx-component', forceScoping = false } = config || {}
+  const { componentChunkName = 'jsx-component' } = config || {}
 
   const reactStyledJSXPlugin: ComponentPlugin = async (structure) => {
     const { uidl, chunks, options } = structure
     const { projectStyleSet } = options
-    const { node, styleSetDefinitions: componentStyleSheet = {}, propDefinitions = {} } = uidl
-
+    const {
+      node,
+      styleSetDefinitions: componentStyleSheet = {},
+      propDefinitions = {},
+      stateDefinitions = {},
+    } = uidl
     const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName)
     if (!componentChunk) {
       return structure
@@ -34,25 +61,18 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
       Array<{ [x: string]: Record<string, string | number> }>
     > = {}
     const classMap: string[] = []
-
-    const transformStyle = (style: Record<string, UIDLStyleValue>) =>
-      UIDLUtils.transformDynamicStyles(style, (styleValue) => {
-        switch (styleValue.content.referenceType) {
-          case 'token':
-            return `var(${StringUtils.generateCSSVariableName(styleValue.content.id)})`
-          case 'prop':
-            return `\$\{${propsPrefix}.${styleValue.content.id}\}`
-          default:
-            throw new PluginStyledJSX(
-              `Error running transformDynamicStyles in reactStyledJSXChunkPlugin.\n
-              Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
-            )
-        }
-      })
-
-    UIDLUtils.traverseElements(node, (element) => {
+    // styled-jsx stamps its scope hash only on host DOM elements, never on
+    // React components — a widget's className reaches its internal root DOM
+    // untouched, so scoped rules like `.page-widget.jsx-123` can never match.
+    // Classes on widget elements are collected here and emitted as
+    // `:global(...)` (names are already page-prefixed, so global is safe).
+    const globalScopedClassNames: Set<string> = new Set()
+
+    const generateStylesForElementNode = (element: UIDLElement) => {
       const classNamesToAppend: Set<string> = new Set()
-      const dynamicVariantsToAppend: Set<types.Identifier | types.MemberExpression> = new Set()
+      const dynamicVariantsToAppend: Set<
+        types.Identifier | types.MemberExpression | types.ConditionalExpression
+      > = new Set()
       const {
         style = {},
         key,
@@ -60,29 +80,101 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
         attrs = {},
         dependency,
         elementType,
+        dynamicStyleBindings,
       } = element
-      const elementClassName = StringUtils.camelCaseToDashCase(key)
-      const className = getClassName(forceScoping, uidl.name, elementClassName)
+      const hasDynamicBindings =
+        dynamicStyleBindings && Object.keys(dynamicStyleBindings).length > 0
+
+      if (key === undefined) {
+        throw new Error(`Key is missing for element \n ${JSON.stringify(element, null, 2)}`)
+      }
+
+      const className = StringUtils.camelCaseToDashCase(key)
+      const rendersAsWidgetComponent = dependency?.type === 'local' && /^Tq[A-Z]/.test(elementType)
+      if (rendersAsWidgetComponent) {
+        globalScopedClassNames.add(className)
+      }
+      const root = jsxNodesLookup[key]
+      if (!root) {
+        throw new PluginStyledJSX(
+          `Element \n ${JSON.stringify(
+            element,
+            null,
+            2
+          )} \n with key ${key} is missing from the template chunk of component ${uidl.name}`
+        )
+      }
 
-      if (forceScoping && dependency?.type === 'local') {
+      if (dependency?.type === 'local') {
         StyleBuilders.setPropValueForCompStyle({
-          key,
-          jsxNodesLookup,
+          root,
           attrs,
-          getClassName: (str: string) =>
-            getClassName(forceScoping, StringUtils.camelCaseToDashCase(elementType), str),
+          getClassName: (str: string) => StringUtils.camelCaseToDashCase(elementType + str),
         })
       }
 
-      if (Object.keys(style).length === 0 && Object.keys(referencedStyles).length === 0) {
+      if (
+        Object.keys(style).length === 0 &&
+        Object.keys(referencedStyles).length === 0 &&
+        !hasDynamicBindings
+      ) {
         return
       }
 
-      const root = jsxNodesLookup[key]
+      // Collect all inline styles from various sources
+      const allInlineStyles: Record<string, unknown> = {}
+
+      if (hasDynamicBindings) {
+        for (const [cssProperty, binding] of Object.entries(dynamicStyleBindings)) {
+          const camelCaseProperty = StringUtils.cssPropertyToInlineStyleKey(cssProperty)
+          const staticValue = style[cssProperty]
+          const staticTemplate =
+            staticValue && staticValue.type === 'static' && typeof staticValue.content === 'string'
+              ? staticValue.content
+              : null
+          allInlineStyles[camelCaseProperty] = StyleBuilders.createDynamicBindingExpression(
+            binding,
+            undefined,
+            cssProperty,
+            staticTemplate
+          )
+        }
+      }
+
+      // Separate styles containing template expressions ({{ expr }}) from static CSS.
+      // Templates with non-state variables (e.g. {{ enemy.x }}) must be inline styles
+      // since those variables are scoped to Repeater render callbacks.
+      // Templates with state variables (e.g. {{ state.cameraX }}) are also made inline
+      // because they need to be interpolated as JS expressions, not raw CSS text.
+      const hasTemplate = (str: string) => /\{\{/.test(str)
+      const cssStyles: Record<string, UIDLStyleValue> = {}
+
+      for (const [prop, value] of Object.entries(style)) {
+        // Skip properties that have dynamic bindings — they're already handled as inline styles
+        if (hasDynamicBindings && dynamicStyleBindings[prop]) {
+          continue
+        }
+        if (
+          value.type === 'static' &&
+          typeof value.content === 'string' &&
+          hasTemplate(value.content)
+        ) {
+          const camelCaseProperty = StringUtils.cssPropertyToInlineStyleKey(prop)
+          allInlineStyles[camelCaseProperty] = new ParsedASTNode(
+            ASTUtils.parseStringWithTemplateExpressions(String(value.content))
+          )
+        } else {
+          cssStyles[prop] = value
+        }
+      }
+
+      if (Object.keys(allInlineStyles).length > 0) {
+        ASTUtils.addAttributeToJSXTag(root as types.JSXElement, 'style', allInlineStyles)
+      }
 
       // Generating the string templates for the dynamic styles
-      if (Object.keys(style).length > 0) {
-        const styleRules = transformStyle(style)
+      if (Object.keys(cssStyles).length > 0) {
+        const styleRules = transformStyle(cssStyles, propsPrefix)
         classMap.push(StyleBuilders.createCSSClass(className, styleRules))
         classNamesToAppend.add(className)
       }
@@ -96,9 +188,8 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
               if (!mediaStylesMap[String(maxWidth)]) {
                 mediaStylesMap[String(maxWidth)] = []
               }
-
               mediaStylesMap[String(maxWidth)].push({
-                [className]: transformStyle(styleRef.content.styles),
+                [className]: transformStyle(styleRef.content.styles, propsPrefix),
               })
             }
 
@@ -107,7 +198,7 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
                 StyleBuilders.createCSSClassWithSelector(
                   className,
                   `&:${condition.content}`,
-                  transformStyle(styleRef.content.styles)
+                  transformStyle(styleRef.content.styles, propsPrefix)
                 )
               )
             }
@@ -133,15 +224,13 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
               )
               const defaultPropValue =
                 propDefinitions[styleRef.content.content.content.id]?.defaultValue
+
               if (!defaultPropValue) {
                 return
               }
 
-              propDefinitions[styleRef.content.content.content.id].defaultValue = getClassName(
-                forceScoping,
-                uidl.name,
-                String(defaultPropValue)
-              )
+              propDefinitions[styleRef.content.content.content.id].defaultValue =
+                StringUtils.camelCaseToDashCase(String(defaultPropValue))
             }
 
             if (
@@ -149,7 +238,7 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
               styleRef.content.content.content.referenceType === 'comp'
             ) {
               classNamesToAppend.add(
-                getClassName(forceScoping, uidl.name, styleRef.content.content.content.id)
+                StringUtils.camelCaseToDashCase(styleRef.content.content.content.id)
               )
             }
 
@@ -160,10 +249,76 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
             const { content } = styleRef
             const referedStyle = projectStyleSet.styleSetDefinitions[content.referenceId]
             if (!referedStyle) {
-              throw new PluginStyledJSX(`Project style - ${content.referenceId} is missing`)
+              return
+            }
+
+            // Validate that the referenceId is a valid CSS class name.
+            // Skip entries that contain dots, quotes, braces, pipes, or other
+            // characters that indicate a JavaScript expression fragment was
+            // incorrectly used as a class name (e.g. "item.type", "'coin'", "{{", "||")
+            const refId = content.referenceId as string
+            if (/[.'"{}|()!@#$%^&*+=<>?/\\]/.test(refId) || /^\d/.test(refId)) {
+              return
             }
 
-            classNamesToAppend.add(content.referenceId)
+            if (styleRef.content.condition) {
+              const referenceContent = styleRef.content.condition.reference.content
+              const referenceType = referenceContent.referenceType
+              const nameToAppend =
+                referenceType === 'local' && referenceContent.refPath?.length
+                  ? referenceContent.refPath.join('.')
+                  : referenceContent.id
+
+              // Class conditions are single-reference flat chains: no writer
+              // emits per-entry references or nested groups here.
+              const conditions = styleRef.content.condition.expression
+                .conditions as UIDLConditionExpressionEntry[]
+
+              const operator = conditions[0].operation as '===' | '!==' | '<' | '<=' | '>' | '>='
+              const right = conditions[0].operand
+
+              let binaryExpressionType = ''
+              switch (referenceType) {
+                case 'prop': {
+                  binaryExpressionType = propDefinitions[nameToAppend].type
+                  break
+                }
+                case 'state': {
+                  binaryExpressionType = stateDefinitions[nameToAppend].type
+                  break
+                }
+                case 'local': {
+                  binaryExpressionType = typeof right as string
+                  break
+                }
+                default: {
+                  throw new PluginStyledJSX(
+                    `Un-supported reference type ${referenceType} for style reference ${JSON.stringify(
+                      styleRef.content,
+                      null,
+                      2
+                    )}`
+                  )
+                }
+              }
+              const binaryExpression = createBinaryExpression(
+                { operation: operator, operand: right },
+                {
+                  key: (referenceType === 'prop' ? 'props?.' : '') + nameToAppend,
+                  type: binaryExpressionType,
+                }
+              )
+
+              const conditionalExpression = types.conditionalExpression(
+                binaryExpression,
+                types.stringLiteral(content.referenceId),
+                types.stringLiteral('')
+              )
+
+              dynamicVariantsToAppend.add(conditionalExpression)
+            } else {
+              classNamesToAppend.add(content.referenceId)
+            }
             return
           }
 
@@ -175,13 +330,43 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
         }
       })
 
+      // Handle {{ xxx }} template expressions in class names by converting to dynamic values
+      let joinedClasses = Array.from(classNamesToAppend).join(' ')
+      const dynamicVals: Array<
+        types.Identifier | types.MemberExpression | types.ConditionalExpression
+      > = Array.from(dynamicVariantsToAppend)
+
+      const templateClassMatches = joinedClasses.match(/\{\{\s*(.+?)\s*\}\}/g)
+      if (templateClassMatches) {
+        for (const match of templateClassMatches) {
+          const expr = match.replace(/^\{\{\s*/, '').replace(/\s*\}\}$/, '')
+          dynamicVals.push(
+            ASTUtils.parseJSExpressionAsAST(expr) as types.Identifier | types.MemberExpression
+          )
+        }
+        joinedClasses = joinedClasses
+          .replace(/\{\{\s*(.+?)\s*\}\}/g, '')
+          .replace(/\s+/g, ' ')
+          .trim()
+      }
+
       ASTUtils.addClassStringOnJSXTag(
         root as types.JSXElement,
-        Array.from(classNamesToAppend).join(' '),
+        joinedClasses,
         'className',
-        Array.from(dynamicVariantsToAppend)
+        dynamicVals
       )
-    })
+    }
+
+    UIDLUtils.traverseElements(node, generateStylesForElementNode)
+    for (const prop of Object.values(propDefinitions)) {
+      if (prop.type === 'element' && prop.defaultValue) {
+        UIDLUtils.traverseElements(
+          prop.defaultValue as UIDLElementNode,
+          generateStylesForElementNode
+        )
+      }
+    }
 
     /* Generating component scoped styles */
     if (Object.keys(componentStyleSheet).length > 0) {
@@ -189,7 +374,7 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
         componentStyleSheet,
         classMap,
         mediaStylesMap,
-        (styleName: string) => getClassName(forceScoping, uidl.name, styleName)
+        (styleName: string) => StringUtils.camelCaseToDashCase(uidl.name + styleName)
       )
     }
 
@@ -201,7 +386,34 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
       return structure
     }
 
-    const styleJSXAST = generateStyledJSXTag(classMap.join('\n'))
+    // Convert {{ state.xxx }} template expressions to ${xxx} styled-jsx interpolations
+    // Handles both well-formed {{ state.xxx }} and malformed/unclosed {{ state.xxx patterns
+    const convertStateTemplates = (css: string): string => {
+      return css.replace(
+        /\{\{\s*(.*?state\..+?)(\s*\}\}|(?=["`;])|\s*$)/gm,
+        (_match, expr, closing) => {
+          let cleanExpr = expr.trim()
+          // Replace all state.xxx references with just xxx
+          cleanExpr = cleanExpr.replace(/state\.(\w+)/g, '$1')
+          // Remove trailing semicolons or whitespace
+          cleanExpr = cleanExpr.replace(/[;\s]+$/, '')
+          const isClosed = closing && closing.includes('}}')
+          return '${' + cleanExpr + '}' + (isClosed ? '' : 'px)')
+        }
+      )
+    }
+    let cssString = convertStateTemplates(classMap.join('\n'))
+    // Rewrites every selector occurrence of a widget class — base rule,
+    // pseudo-selector variants and inside @media blocks — as :global(...).
+    // The negative lookahead keeps `.foo` from also matching `.foo2`.
+    globalScopedClassNames.forEach((cls) => {
+      cssString = cssString.replace(
+        new RegExp(`\\.${cls}(?![\\w-])([^\\s,{]*)`, 'g'),
+        `:global(.${cls}$1)`
+      )
+    })
+
+    const styleJSXAST = generateStyledJSXTag(cssString)
     // We have the ability to insert the tag into the existig JSX structure, or do something else with it.
     // Here we take the JSX <style> tag and we insert it as the last child of the JSX structure
     // inside the React Component
@@ -215,7 +427,7 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
     // We need to replace the root node with a fragment <>
     // The fragment will be the parent of both the old root JSXNode and the style tag
     const componentAST = componentChunk.content as types.VariableDeclaration
-    const arrowFnExpr = componentAST.declarations[0].init as types.ArrowFunctionExpression
+    const arrowFnExpr = componentAST.declarations?.[0]?.init as types.ArrowFunctionExpression
     const bodyStatement = arrowFnExpr.body as types.BlockStatement
     const returnStatement = bodyStatement.body.find(
       (statement) => statement.type === 'ReturnStatement'
@@ -234,9 +446,3 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
 }
 
 export default createReactStyledJSXPlugin()
-
-const getClassName = (scoping: boolean, uidlName: string, nodeStyleName: string) => {
-  return scoping
-    ? StringUtils.camelCaseToDashCase(`${uidlName}-${nodeStyleName}`)
-    : StringUtils.camelCaseToDashCase(nodeStyleName)
-}