@teleporthq/teleport-plugin-css 0.40.0-alpha.0 → 0.40.0

package/dist/esm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAA;AAC7D,OAAO,EAAE,SAAS,EAA2C,MAAM,4BAA4B,CAAA;AAE/F,MAAM,CAAC,IAAM,0BAA0B,GAAG,UACxC,UAAqE,EACrE,WAA+C;IAE/C,OAAO,UAAU,CAAC,GAAG,CAAC,UAAC,SAAS;QACtB,IAAA,SAAS,GAAc,SAAS,UAAvB,EAAE,OAAO,GAAK,SAAS,QAAd,CAAc;QAExC,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,OAAO,UAAG,QAAQ,CAAC,sBAAsB,CAAC,SAAS,CAAC,SAAG,YAAY,CAAC,OAAO,CAAC,CAAE,CAAA;SAC/E;QAED,OAAO,UAAG,YAAY,CAAC,WAAW,CAAC,cAAI,QAAQ,CAAC,uBAAuB,CACrE,SAAS,CACV,cAAI,YAAY,CAAC,OAAO,CAAC,CAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,IAAM,YAAY,GAAG,UAAC,KAAyC;IAC7D,IAAM,SAAS,GAAG,OAAO,KAAK,CAAA;IAC9B,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ;YACX,OAAO,YAAI,KAAK,OAAG,CAAA;QACrB,KAAK,QAAQ;YACX,OAAO,KAAK,CAAA;QACd,KAAK,SAAS;YACZ,OAAO,KAAK,CAAA;QACd;YACE,MAAM,IAAI,SAAS,CACjB,uDAAgD,SAAS,uCAC1C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAE,CACvC,CAAA;KACJ;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teleporthq/teleport-plugin-css",
-  "version": "0.40.0-alpha.0",
+  "version": "0.40.0",
   "description": "A plugin for creating the styles into external css files",
   "author": "teleportHQ",
   "license": "MIT",
@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-plugin-common": "^0.40.0-alpha.0",
-    "@teleporthq/teleport-shared": "^0.40.0-alpha.0",
-    "@teleporthq/teleport-types": "^0.40.0-alpha.0"
+    "@teleporthq/teleport-plugin-common": "^0.40.0",
+    "@teleporthq/teleport-shared": "^0.40.0",
+    "@teleporthq/teleport-types": "^0.40.0"
   },
-  "gitHead": "489527c223db2be2981b4291282e5c47d1e2f1db"
+  "gitHead": "2d167f1ad391adcc00943c69f08aef9606d82c9a"
 }

package/src/index.ts

@@ -12,8 +12,11 @@ import {
   UIDLElementNodeReferenceStyles,
   UIDLStyleMediaQueryScreenSizeCondition,
   PluginCSS,
+  UIDLElement,
+  UIDLElementNode,
 } from '@teleporthq/teleport-types'
 import { createStyleSheetPlugin } from './style-sheet'
+import { createConditionalStatement } from './utils'
 
 interface CSSPluginConfig {
   chunkName: string
@@ -21,7 +24,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,7 +39,6 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
     classAttributeName = 'class',
     templateStyle = 'html',
     declareDependency = 'none',
-    forceScoping = false,
     dynamicVariantPrefix,
     staticPropReferences = false,
   } = config || {}
@@ -71,7 +72,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 +87,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 {
         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 +125,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 +208,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 +238,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 +254,64 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
               )
             }
 
-            classNamesToAppend.add(content.referenceId)
+            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.`)
+                  }
+
+                  let defaultValue = usedProp.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 ?? 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) {
+                    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 {
+              classNamesToAppend.add(content.referenceId)
+            }
             return
           }
 
@@ -300,14 +356,26 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
           })
         )
       }
-    })
+    }
+
+    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 +416,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 +438,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)}`
+      )
+  }
+}