@teleporthq/teleport-plugin-css 0.41.0 → 0.42.0

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,
@@ -12,8 +18,14 @@ import {
   UIDLElementNodeReferenceStyles,
   UIDLStyleMediaQueryScreenSizeCondition,
   PluginCSS,
+  UIDLElement,
+  UIDLElementNode,
+  UIDLExpressionValue,
+  StateDefaultValueTypes,
+  PropDefaultValueTypes,
 } from '@teleporthq/teleport-types'
 import { createStyleSheetPlugin } from './style-sheet'
+import { createConditionalStatement } from './utils'
 
 interface CSSPluginConfig {
   chunkName: string
@@ -21,7 +33,6 @@ interface CSSPluginConfig {
   componentDecoratorChunkName: string
   inlineStyleAttributeKey: string // style vs :style vs ...
   classAttributeName: string // class vs className
-  forceScoping: boolean // class names get the component name prefix
   templateStyle: 'html' | 'jsx'
   declareDependency: 'import' | 'decorator' | 'none'
   dynamicVariantPrefix?: string
@@ -37,14 +48,18 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
     classAttributeName = 'class',
     templateStyle = 'html',
     declareDependency = 'none',
-    forceScoping = false,
     dynamicVariantPrefix,
     staticPropReferences = false,
   } = 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 = {},
@@ -71,7 +86,7 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
       (chunk) => chunk.name === componentDecoratorChunkName
     )
 
-    const templateLookup = templateChunk.meta.nodesLookup as Record<
+    const jsxNodesLookup = templateChunk.meta.nodesLookup as Record<
       string,
       HastNode | types.JSXElement
     >
@@ -86,27 +101,33 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
       Array<{ [x: string]: Record<string, string | number> }>
     > = {}
 
-    UIDLUtils.traverseElements(node, (element) => {
+    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,
         referencedStyles = {},
-        dependency,
         attrs = {},
         elementType,
+        dependency,
       } = element
-      const elementClassName = StringUtils.camelCaseToDashCase(key)
 
-      if (forceScoping && dependency?.type === 'local') {
+      const root = jsxNodesLookup[key]
+      if (!root) {
+        return
+      }
+
+      // Refer to line 323 all component scoped styles are appended with component name by default
+      if (dependency?.type === 'local') {
         StyleBuilders.setPropValueForCompStyle({
           attrs,
-          key,
-          jsxNodesLookup: templateLookup,
+          root,
           templateStyle,
+          // elementType is used here in-order to target the component name that the class is actually defined.
+          // Here we are appendigng to the node where the component is being called.
           getClassName: (styleName: string) =>
-            getClassName(forceScoping, StringUtils.camelCaseToDashCase(elementType), styleName),
+            StringUtils.camelCaseToDashCase(elementType + styleName),
         })
       }
 
@@ -118,12 +139,7 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
         return
       }
 
-      const root = templateLookup[key]
-      if (!root) {
-        throw new PluginCSS(`Node - ${key} is missing from the template chunk`)
-      }
-
-      const className = getClassName(forceScoping, uidl.name, elementClassName)
+      const className = StringUtils.camelCaseToDashCase(key)
 
       const { staticStyles, dynamicStyles, tokenStyles } =
         UIDLUtils.splitDynamicAndStaticStyles(style)
@@ -206,24 +222,21 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
                 propDefinitions[styleRef.content.content.content.id]?.defaultValue
 
               if (defaultPropValue) {
-                /* Changing the default value of the prop.
-                  When forceScoping is enabled the classnames change. So, we need to change the default prop too. */
-                propDefinitions[styleRef.content.content.content.id].defaultValue = getClassName(
-                  forceScoping,
-                  uidl.name,
-                  String(defaultPropValue)
-                )
+                propDefinitions[styleRef.content.content.content.id].defaultValue =
+                  StringUtils.camelCaseToDashCase(String(defaultPropValue))
               }
 
+              // staticPropReferences flag is only used for just html-code generation.
+              // This is used to append the class name to the node where the component is being called.
+              // Instead of how frameworks handle them using props at runtime. This makes the props
+              // to behave statically during the generation time instead by appending them directly.
               if (staticPropReferences) {
-                if (!defaultPropValue) {
+                if (defaultPropValue === undefined || typeof defaultPropValue !== 'string') {
                   return
                 }
-                if (staticPropReferences) {
-                  classNamesToAppend.add(
-                    getClassName(forceScoping, uidl.name, String(defaultPropValue))
-                  )
-                }
+                classNamesToAppend.add(
+                  StringUtils.camelCaseToDashCase(uidl.name + defaultPropValue)
+                )
               } else {
                 dynamicVariantsToAppend.add(styleRef.content.content.content.id)
               }
@@ -239,7 +252,7 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
                 )
               }
               classNamesToAppend.add(
-                getClassName(forceScoping, uidl.name, String(styleRef.content.content.content.id))
+                StringUtils.camelCaseToDashCase(uidl.name + styleRef.content.content.content.id)
               )
             }
 
@@ -255,7 +268,175 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
               )
             }
 
-            classNamesToAppend.add(content.referenceId)
+            if (styleRef.content.condition) {
+              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
+                  }
+                  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
+                  }
+
+                  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)
+            }
             return
           }
 
@@ -296,18 +477,35 @@ 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
+            }
           })
         )
       }
-    })
+    }
+
+    UIDLUtils.traverseElements(node, generateStylesForElementNode)
+    for (const prop of Object.values(propDefinitions)) {
+      if (prop.type === 'element' && prop.defaultValue) {
+        UIDLUtils.traverseElements(
+          prop.defaultValue as UIDLElementNode,
+          generateStylesForElementNode
+        )
+      }
+    }
 
     if (Object.keys(componentStyleSet).length > 0) {
       StyleBuilders.generateStylesFromStyleSetDefinitions(
         componentStyleSet,
         cssMap,
         mediaStylesMap,
-        (styleName: string) => getClassName(forceScoping, uidl.name, styleName)
+        (styleName: string) => {
+          return StringUtils.camelCaseToDashCase(uidl.name + styleName)
+        }
       )
     }
 
@@ -348,7 +546,7 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
         type: ChunkType.STRING,
         name: chunkName,
         fileType: FileType.CSS,
-        content: cssMap.join('\n'),
+        content: cssMap.join('\n \n'),
         linkAfter: [],
       })
     }
@@ -370,9 +568,3 @@ const createDynamicInlineStyle = (styles: UIDLStyleDefinitions) => {
     })
     .join(', ')
 }
-
-const getClassName = (scoping: boolean, uidlName: string, nodeStyleName: string) => {
-  return scoping
-    ? StringUtils.camelCaseToDashCase(`${uidlName}-${nodeStyleName}`)
-    : StringUtils.camelCaseToDashCase(nodeStyleName)
-}

package/src/style-sheet.ts

@@ -5,22 +5,42 @@ import {
   ChunkType,
   FileType,
 } from '@teleporthq/teleport-types'
+import { join, relative } from 'path'
 
 interface StyleSheetPlugin {
   fileName?: string
+  /*
+    Frameworks with dev servers don't need relative path mapping.
+  */
+  relativeFontPath?: boolean
 }
 
 export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> = (config) => {
-  const { fileName } = config || { fileName: 'style' }
+  const { fileName = 'style', relativeFontPath = false } = config || {
+    fileName: 'style',
+    relativeFontPath: false,
+  }
+
   const styleSheetPlugin: ComponentPlugin = async (structure) => {
-    const { uidl, chunks } = structure
+    const {
+      uidl,
+      chunks,
+      options: { assets },
+    } = structure
     const { styleSetDefinitions = {}, designLanguage: { tokens = {} } = {} } = uidl
+    const {
+      localFonts = [],
+      fontsFolder,
+      identifier: assetIdentifier,
+    } = assets || { localFonts: [] }
 
-    if (
-      (!styleSetDefinitions && !tokens) ||
-      (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0)
-    ) {
-      return
+    const canSkipThePlugin =
+      localFonts?.length === 0 &&
+      Object.keys(styleSetDefinitions).length === 0 &&
+      Object.keys(tokens).length === 0
+
+    if (canSkipThePlugin) {
+      return structure
     }
 
     const cssMap: string[] = []
@@ -29,6 +49,35 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
       Array<{ [x: string]: Record<string, string | number> }>
     > = {}
 
+    uidl.outputOptions = uidl.outputOptions || {}
+    uidl.outputOptions.styleFileName = fileName
+
+    if (localFonts.length > 0) {
+      localFonts.forEach((font) => {
+        const properties = StyleUtils.getContentOfStyleObject(font.properties) as Record<
+          string,
+          string | number
+        >
+        const format = properties?.format ? `format('${properties.format}')` : ''
+        /* tslint:disable:no-string-literal */
+        delete properties['format']
+
+        const fontPath = relativeFontPath
+          ? join(
+              relative(join(...(uidl.outputOptions?.folderPath || [])), './'),
+              join(fontsFolder || '', font.path)
+            )
+          : join('/', assetIdentifier || '', 'fonts', font.path)
+
+        cssMap.push(
+          StyleBuilders.createFontDecleration({
+            ...properties,
+            src: `url("${fontPath}") ${format}`,
+          })
+        )
+      })
+    }
+
     if (Object.keys(tokens).length > 0) {
       cssMap.push(
         StyleBuilders.createCSSClassWithSelector(
@@ -44,7 +93,7 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
         styleSetDefinitions,
         cssMap,
         mediaStylesMap,
-        (styleName: string) => styleName
+        (styleName) => styleName
       )
     }
 
@@ -54,14 +103,11 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
       return structure
     }
 
-    uidl.outputOptions = uidl.outputOptions || {}
-    uidl.outputOptions.styleFileName = fileName
-
     chunks.push({
       name: fileName,
       type: ChunkType.STRING,
       fileType: FileType.CSS,
-      content: cssMap.join('\n'),
+      content: cssMap.join('\n \n'),
       linkAfter: [],
     })
 

package/src/utils.ts

@@ -0,0 +1,36 @@
+import { ASTUtils } from '@teleporthq/teleport-plugin-common'
+import { PluginCSS, UIDLConditionalNode, UIDLPropDefinition } from '@teleporthq/teleport-types'
+
+export const createConditionalStatement = (
+  conditions: UIDLConditionalNode['content']['condition']['conditions'],
+  leftOperand: UIDLPropDefinition['defaultValue']
+) => {
+  return conditions.map((condition) => {
+    const { operation, operand } = condition
+
+    if (operand === undefined) {
+      return `${ASTUtils.convertToUnaryOperator(operation)}${getValueType(operand)}`
+    }
+
+    return `${getValueType(leftOperand)} ${ASTUtils.convertToBinaryOperator(
+      operation
+    )} ${getValueType(operand)}`
+  })
+}
+
+const getValueType = (value: UIDLPropDefinition['defaultValue']) => {
+  const valueType = typeof value
+  switch (valueType) {
+    case 'string':
+      return `"${value}"`
+    case 'number':
+      return value
+    case 'boolean':
+      return value
+    default:
+      throw new PluginCSS(
+        `Conditional node received an operand of type ${valueType} \n
+            Received ${JSON.stringify(value)}`
+      )
+  }
+}