@teleporthq/teleport-plugin-css-modules 0.43.0-alpha.0 → 0.43.3

package/src/index.ts

@@ -27,9 +27,12 @@ import {
   UIDLStyleMediaQueryScreenSizeCondition,
   PluginCssModules,
   HastNode,
+  UIDLElement,
+  UIDLElementNode,
 } from '@teleporthq/teleport-types'
 import { createStyleSheetPlugin } from './style-sheet'
 import { generateStyledFromStyleContent } from './utils'
+import { isJSXElement } from '@teleporthq/teleport-plugin-common/dist/cjs/utils/ast-utils'
 
 interface CSSModulesConfig {
   componentChunkName?: string
@@ -104,26 +107,44 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
       (componentChunk.meta.nodesLookup as Record<string, HastNode | types.JSXElement>) || {}
     const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop as string
 
-    UIDLUtils.traverseElements(node, (element) => {
-      const { style, key, referencedStyles, dependency, attrs = {} } = element
-      const jsxTag = astNodesLookup[key] as types.JSXElement
-      const classNamesToAppend: Set<types.MemberExpression | types.Identifier> = new Set()
+    const generateStylesForElementNode = (element: UIDLElement) => {
+      const {
+        style,
+        key,
+        referencedStyles,
+        dependency,
+        attrs = {},
+        elementType,
+        dynamicStyleBindings,
+      } = element
+      const jsxTag = astNodesLookup[key]
+      const classNamesToAppend: Set<
+        types.MemberExpression | types.Identifier | types.StringLiteral
+      > = new Set()
+      const hasDynamicBindings =
+        dynamicStyleBindings && Object.keys(dynamicStyleBindings).length > 0
+
+      if (!jsxTag || !isJSXElement(jsxTag)) {
+        return
+      }
 
       if (dependency?.type === 'local') {
         StyleBuilders.setPropValueForCompStyle({
           attrs,
-          key,
-          jsxNodesLookup: astNodesLookup,
-          getClassName: (styleName: string) => StringUtils.camelCaseToDashCase(styleName),
+          root: jsxTag,
+          getClassName: (styleName: string) =>
+            StringUtils.camelCaseToDashCase(elementType + styleName),
         })
       }
 
-      if (!jsxTag) {
+      if (!style && !referencedStyles && !hasDynamicBindings) {
         return
       }
 
-      if (!style && !referencedStyles) {
-        return
+      if (!key) {
+        throw new PluginCssModules(
+          'Element node does not have a key \n' + JSON.stringify(element, null, 2)
+        )
       }
 
       const className = StringUtils.camelCaseToDashCase(key)
@@ -133,6 +154,8 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
         true
       )
 
+      let jsxInlineStyles: Record<string, unknown> | null = null
+
       /* Generating styles from UIDLElementNode to component style sheet */
       if (Object.keys(style || {}).length > 0) {
         const { staticStyles, dynamicStyles, tokenStyles } =
@@ -146,18 +169,28 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
         }
 
         if (Object.keys(dynamicStyles).length) {
-          const inlineStyles = UIDLUtils.transformDynamicStyles(dynamicStyles, (styleValue) =>
+          jsxInlineStyles = UIDLUtils.transformDynamicStyles(dynamicStyles, (styleValue) =>
             StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
           )
+        }
+      }
 
-          /* If dynamic styles are on nested-styles they are unfortunately lost, 
-            since inline style does not support that */
-          if (Object.keys(inlineStyles).length > 0) {
-            ASTUtils.addAttributeToJSXTag(jsxTag, 'style', inlineStyles)
-          }
+      if (hasDynamicBindings) {
+        if (!jsxInlineStyles) {
+          jsxInlineStyles = {}
+        }
+        for (const [cssProperty, binding] of Object.entries(dynamicStyleBindings)) {
+          const camelCaseProperty = cssProperty.replace(/-([a-z])/g, (_, letter: string) =>
+            letter.toUpperCase()
+          )
+          jsxInlineStyles[camelCaseProperty] = StyleBuilders.createDynamicBindingExpression(binding)
         }
       }
 
+      if (jsxInlineStyles && Object.keys(jsxInlineStyles).length > 0) {
+        ASTUtils.addAttributeToJSXTag(jsxTag, 'style', jsxInlineStyles)
+      }
+
       /* Any media-styles, component-scoped styles, global style sheet styles are handled here */
       if (Object.keys(referencedStyles || {}).length > 0) {
         Object.values(referencedStyles).forEach((styleRef: UIDLElementNodeReferenceStyles) => {
@@ -194,13 +227,7 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
             case 'component-referenced': {
               const classContent = styleRef.content.content
               if (classContent.type === 'static') {
-                classNamesToAppend.add(
-                  types.memberExpression(
-                    types.identifier(styleObjectImportName),
-                    types.identifier(`'${getClassName(String(classContent.content))}'`),
-                    true
-                  )
-                )
+                classNamesToAppend.add(types.stringLiteral(String(classContent.content)))
                 return
               }
 
@@ -223,8 +250,8 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
                 if (!defaultPropValue) {
                   return
                 }
-                /* 
-                  Changing the default value of the prop. 
+                /*
+                  Changing the default value of the prop.
                    When forceScoping is enabled the classnames change. So, we need to change the default prop too. */
                 propDefinitions[classContent.content.id].defaultValue = getClassName(
                   String(defaultPropValue)
@@ -253,9 +280,7 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
               isProjectStyleReferred = true
               const referedStyle = globalStyleSheet[content.referenceId]
               if (!referedStyle) {
-                throw new PluginCssModules(
-                  `Style used from global stylesheet is missing - ${content.referenceId}`
-                )
+                return
               }
               classNamesToAppend.add(
                 types.memberExpression(
@@ -279,7 +304,17 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
         classAttributeName,
         Array.from(classNamesToAppend)
       )
-    })
+    }
+
+    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) {
@@ -287,7 +322,7 @@ export const createCSSModulesPlugin: ComponentPluginFactory<CSSModulesConfig> =
         componentStyleSheet,
         cssClasses,
         mediaStylesMap,
-        (styleId: string) => StringUtils.camelCaseToDashCase(styleId)
+        (styleName: string) => StringUtils.camelCaseToDashCase(uidl.name + styleName)
       )
     }
 

package/src/style-sheet.ts

@@ -6,39 +6,83 @@ import {
   FileType,
 } from '@teleporthq/teleport-types'
 import { StringUtils } from '@teleporthq/teleport-shared'
+import { relative, join } from 'path'
+
 interface StyleSheetPlugin {
   fileName?: string
   moduleExtension?: boolean
+  relativeFontPath?: boolean
 }
 
 const defaultConfig = {
   fileName: 'style',
   moduleExtension: false,
+  relativeFontPath: false,
 }
 
 export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> = (config) => {
-  const { fileName, moduleExtension } = {
+  const { fileName, moduleExtension, relativeFontPath } = {
     ...defaultConfig,
     ...config,
   }
 
   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: [] }
+
+    const canSkipThePlugin =
+      localFonts?.length === 0 &&
+      Object.keys(styleSetDefinitions).length === 0 &&
+      Object.keys(tokens).length === 0
 
-    if (
-      (!styleSetDefinitions && !tokens) ||
-      (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0)
-    ) {
-      return
+    if (canSkipThePlugin) {
+      return structure
     }
 
+    uidl.outputOptions = uidl.outputOptions || {}
+    uidl.outputOptions.styleFileName = moduleExtension ? `${fileName}.module` : fileName
+
     const cssMap: string[] = []
     const mediaStylesMap: Record<
       string,
       Array<{ [x: string]: Record<string, string | number> }>
     > = {}
 
+    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(
@@ -65,9 +109,6 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
       return structure
     }
 
-    uidl.outputOptions = uidl.outputOptions || {}
-    uidl.outputOptions.styleFileName = moduleExtension ? `${fileName}.module` : fileName
-
     chunks.push({
       name: fileName,
       type: ChunkType.STRING,