@teleporthq/teleport-plugin-css 0.40.0 → 0.40.3

package/src/index.ts

@@ -1,5 +1,11 @@
 import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
-import { StyleUtils, StyleBuilders, HASTUtils, ASTUtils } from '@teleporthq/teleport-plugin-common'
+import {
+  StyleUtils,
+  StyleBuilders,
+  HASTUtils,
+  ASTUtils,
+  createBinaryExpression,
+} from '@teleporthq/teleport-plugin-common'
 import * as types from '@babel/types'
 import {
   ComponentPluginFactory,
@@ -14,6 +20,9 @@ import {
   PluginCSS,
   UIDLElement,
   UIDLElementNode,
+  UIDLExpressionValue,
+  StateDefaultValueTypes,
+  PropDefaultValueTypes,
 } from '@teleporthq/teleport-types'
 import { createStyleSheetPlugin } from './style-sheet'
 import { createConditionalStatement } from './utils'
@@ -45,7 +54,12 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
 
   const cssPlugin: ComponentPlugin = async (structure) => {
     const { uidl, chunks, dependencies, options } = structure
-    const { node, styleSetDefinitions: componentStyleSet = {}, propDefinitions = {} } = uidl
+    const {
+      node,
+      styleSetDefinitions: componentStyleSet = {},
+      propDefinitions = {},
+      stateDefinitions = {},
+    } = uidl
     const { projectStyleSet, designLanguage: { tokens = {} } = {}, isRootComponent } = options || {}
     const {
       styleSetDefinitions = {},
@@ -89,7 +103,7 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
 
     const generateStylesForElementNode = (element: UIDLElement) => {
       const classNamesToAppend: Set<string> = new Set()
-      const dynamicVariantsToAppend: Set<string> = new Set()
+      const dynamicVariantsToAppend: Set<string | types.ConditionalExpression> = new Set()
       const {
         style = {},
         key,
@@ -255,59 +269,170 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
             }
 
             if (styleRef.content.condition) {
-              const {
-                value: staticValue,
-                reference,
-                expression: { conditions, matchingCriteria },
-              } = styleRef.content.condition
-
-              const {
-                content: { referenceType, id, refPath = [] },
-              } = reference
-
-              switch (referenceType) {
-                case 'prop': {
-                  const usedProp = propDefinitions[id]
-                  if (usedProp === undefined || usedProp.defaultValue === undefined) {
-                    throw new PluginCSS(`Prop with ${id} is missing in the propDefinitions.`)
+              if (templateStyle === 'html') {
+                const {
+                  value: staticValue,
+                  reference,
+                  expression: { conditions, matchingCriteria },
+                } = styleRef.content.condition
+
+                const {
+                  content: { referenceType, id, refPath = [] },
+                } = reference
+
+                switch (referenceType) {
+                  case 'prop': {
+                    const usedProp = propDefinitions[id]
+                    if (usedProp === undefined || usedProp.defaultValue === undefined) {
+                      throw new PluginCSS(`Prop with ${id} is missing in the propDefinitions.`)
+                    }
+
+                    let defaultValue = usedProp.defaultValue
+                    let operandDefaultValue: StateDefaultValueTypes | PropDefaultValueTypes | string
+                    for (const path of refPath) {
+                      defaultValue = (defaultValue as Record<string, unknown[]>)?.[path]
+                    }
+
+                    // If defaultValue is undefined or null after path traversal, use original default
+                    defaultValue = defaultValue ?? usedProp.defaultValue
+
+                    // our conditions can be of type 'expr' or they can be a dynamic reference
+                    const rightSideCondition = conditions[0].operand
+                    const rightSideConditionType = typeof rightSideCondition
+                    if (rightSideConditionType === 'object') {
+                      const type = (
+                        rightSideCondition as UIDLDynamicReference | UIDLExpressionValue
+                      ).type
+                      if (type === 'dynamic') {
+                        const dynamicRef = rightSideCondition as UIDLDynamicReference
+                        if (dynamicRef.content.referenceType === 'prop') {
+                          const prop = propDefinitions[dynamicRef.content.id]
+                          if (prop && prop.defaultValue) {
+                            operandDefaultValue = prop.defaultValue
+                          }
+                        }
+                        if (dynamicRef.content.referenceType === 'state') {
+                          const state = stateDefinitions[dynamicRef.content.id]
+                          if (state && state.defaultValue) {
+                            defaultValue = state.defaultValue
+                          }
+                        }
+                      }
+                      if (type === 'expr') {
+                        operandDefaultValue = (rightSideCondition as UIDLExpressionValue).content
+                      }
+                    } else {
+                      operandDefaultValue = rightSideCondition
+                    }
+
+                    // Since we know the operand and the default value from the prop.
+                    // We can try building the condition and check if the condition is true or false.
+                    // @todo: You can only use a 'value' in UIDL or 'conditions' but not both.
+                    // UIDL validations need to be improved on this aspect.
+                    const resolvedConditions = [
+                      {
+                        operation: conditions[0].operation,
+                        operand: operandDefaultValue as string,
+                      },
+                    ]
+
+                    const dynamicConditions = createConditionalStatement(
+                      staticValue !== undefined
+                        ? [{ operand: staticValue, operation: '===' }]
+                        : resolvedConditions,
+                      defaultValue
+                    )
+                    const matchCondition =
+                      matchingCriteria && matchingCriteria === 'all' ? '&&' : '||'
+                    const conditionString = dynamicConditions.join(` ${matchCondition} `)
+
+                    // tslint:disable-next-line function-constructor
+                    const isConditionPassing = new Function(`return ${conditionString}`)()
+                    if (isConditionPassing) {
+                      classNamesToAppend.add(styleRef.content.referenceId)
+                      return
+                    }
+                    return
                   }
-
-                  let defaultValue = usedProp.defaultValue
-                  for (const path of refPath) {
-                    defaultValue = (defaultValue as Record<string, unknown[]>)?.[path]
+                  case 'state': {
+                    const usedState = stateDefinitions[id]
+                    if (usedState === undefined || usedState.defaultValue === undefined) {
+                      throw new PluginCSS(`State with ${id} is missing in the stateDefinitions.`)
+                    }
+                    let defaultValue = usedState.defaultValue
+                    for (const path of refPath) {
+                      defaultValue = (defaultValue as Record<string, unknown[]>)?.[path]
+                    }
+                    // If defaultValue is undefined or null after path traversal, use original default
+                    defaultValue = defaultValue ?? usedState.defaultValue
+                    // Since we know the operand and the default value from the state.
+                    // We can try building the condition and check if the condition is true or false.
+
+                    const dynamicConditions = createConditionalStatement(
+                      staticValue !== undefined
+                        ? [{ operand: staticValue, operation: '===' }]
+                        : conditions,
+                      defaultValue
+                    )
+                    const matchCondition =
+                      matchingCriteria && matchingCriteria === 'all' ? '&&' : '||'
+                    const conditionString = dynamicConditions.join(` ${matchCondition} `)
+                    // tslint:disable-next-line function-constructor
+                    const isConditionPassing = new Function(`return ${conditionString}`)()
+                    if (isConditionPassing) {
+                      classNamesToAppend.add(styleRef.content.referenceId)
+                      return
+                    }
+                    return
                   }
 
-                  // If defaultValue is undefined or null after path traversal, use original default
-                  defaultValue = defaultValue ?? usedProp.defaultValue
-
-                  // Since we know the operand and the default value from the prop.
-                  // We can try building the condition and check if the condition is true or false.
-                  // @todo: You can only use a 'value' in UIDL or 'conditions' but not both.
-                  // UIDL validations need to be improved on this aspect.
-                  const dynamicConditions = createConditionalStatement(
-                    staticValue !== undefined
-                      ? [{ operand: staticValue, operation: '===' }]
-                      : conditions,
-                    defaultValue
-                  )
-                  const matchCondition =
-                    matchingCriteria && matchingCriteria === 'all' ? '&&' : '||'
-                  const conditionString = dynamicConditions.join(` ${matchCondition} `)
-
-                  // tslint:disable-next-line function-constructor
-                  const isConditionPassing = new Function(`return ${conditionString}`)()
-                  if (isConditionPassing) {
+                  default: {
                     classNamesToAppend.add(styleRef.content.referenceId)
                     return
                   }
-                  return
                 }
-                case 'state':
-                  throw new PluginCSS(`State reference is not supported in the project stylesheet.`)
-                default: {
-                  classNamesToAppend.add(styleRef.content.referenceId)
-                  return
+              } else {
+                const nameToAppend = styleRef.content.condition.reference.content.id
+
+                const { conditions } = styleRef.content.condition.expression
+
+                const operator = conditions[0].operation as '===' | '!==' | '<' | '<=' | '>' | '>='
+                const right = conditions[0].operand as string | number | boolean
+                const referenceType = styleRef.content.condition.reference.content.referenceType
+
+                let binaryExpressionType = ''
+                switch (referenceType) {
+                  case 'prop': {
+                    binaryExpressionType = propDefinitions[nameToAppend].type
+                    break
+                  }
+                  case 'state': {
+                    binaryExpressionType = stateDefinitions[nameToAppend].type
+                    break
+                  }
+                  default: {
+                    throw new PluginCSS(
+                      `Un-supported reference type ${referenceType} for ${nameToAppend}`
+                    )
+                  }
                 }
+
+                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)
+                return
               }
             } else {
               classNamesToAppend.add(content.referenceId)
@@ -352,7 +477,12 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
               ? types.identifier(dynamicVariantPrefix)
               : types.identifier(propsPrefix)
 
-            return types.memberExpression(dynamicAttrValueIdentifier, types.identifier(variant))
+            if (typeof variant === 'string') {
+              return types.memberExpression(dynamicAttrValueIdentifier, types.identifier(variant))
+            } else {
+              // variant is a ConditionalExpression, so return it directly
+              return variant
+            }
           })
         )
       }