@likec4/language-server 1.5.0 → 1.6.1

package/src/like-c4.langium

@@ -4,10 +4,22 @@ entry LikeC4Grammar:
   (
     specifications+=SpecificationRule |
     models+=Model  |
-    views+=ModelViews
+    views+=ModelViews |
+    likec4lib+=LikeC4Lib
   )*
 ;
 
+// Lib -------------------------------------
+LikeC4Lib:
+  'likec4lib' '{'
+    'icons' '{'
+      (icons+=LibIcon)+
+    '}'
+  '}';
+
+LibIcon:
+  name=IconId;
+
 // Specification -------------------------------------
 
 ElementKind:
@@ -80,7 +92,7 @@ ElementBody: '{'
 ;
 
 ElementProperty:
-  ElementStringProperty | StyleProperties | LinkProperty;
+  ElementStringProperty | StyleProperties | LinkProperty | IconProperty;
 
 ElementStringProperty:
   key=('title' | 'technology' | 'description') ':'? value=String ';'?;
@@ -214,84 +226,95 @@ DynamicViewRule:
 ;
 
 DynamicViewStep:
-  source=ElementRef (isBackward?='<-' |  '->' | '-[' kind=[RelationshipKind] ']->') target=ElementRef title=String?
+  source=ElementRef (isBackward?='<-' |  '->' | '-[' kind=[RelationshipKind] ']->' | kind=[RelationshipKind:DotId] ) target=ElementRef title=String?
 ;
 
 ViewRulePredicate:
-  ({infer IncludePredicate} 'include' | {infer ExcludePredicate} 'exclude')
-  expressions+=ViewRulePredicateExpr (',' expressions+=ViewRulePredicateExpr)* ','?
-;
-
-DynamicViewRulePredicate:
-  'include' expressions+=ElementPredicateExpression (',' expressions+=ElementPredicateExpression)* ','?
+  {infer IncludePredicate} 'include' exprs=Expressions |
+  {infer ExcludePredicate} 'exclude' exprs=Expressions
 ;
 
-ViewRuleStyle:
-  'style' targets+=ElementExpr (',' targets+=ElementExpr)* ','? '{'
-    styleprops+=StyleProperty*
-  '}';
+// IncludePredicate:
+//   'include' expr=WithExpressions ({infer IncludePredicate.prev=current} ',' (expr=WithExpressions)?)*
+// ;
+// ExcludePredicate:
+//   'exclude' expr=WithExpressions ({infer ExcludePredicate.prev=current} ',' (expr=WithExpressions)?)*
+// ;
 
-ViewRuleAutoLayout:
-  'autoLayout' direction=ViewLayoutDirection;
+Expressions:
+  value=WithExpressions ({infer Expressions.prev=current} ',' (value=WithExpressions)?)*
+;
 
-ViewRulePredicateExpr:
-  ElementPredicateExpression |
-  RelationPredicateExpression
+WithExpressions infers Expression:
+  RelationExpression ({infer CustomRelationExpression.relation=current} 'with' custom=CustomRelationProperties)? |
+  ElementExpression ({infer CustomElementExpression.target=current} 'with' custom=CustomElementProperties)?
 ;
 
-ElementPredicateExpression:
-  ElementExpr ({infer CustomElementExpr.target=current} 'with' body=CustomElementExprBody)?
+ElementExpression:
+  ElementSelectorExpression |
+  ElementDescedantsExpression
 ;
 
-RelationPredicateExpression:
-  InOutExpr |
-  CustomRelationExpr |
-  OutgoingExpr
+ElementSelectorExpression infers ElementExpression:
+  {infer WildcardExpression} isWildcard?='*' |
+  {infer ElementTagExpression} 'element.tag' IsEqual tag=[Tag:TagId]? |
+  {infer ElementKindExpression} 'element.kind' IsEqual kind=[ElementKind]?
 ;
 
-CustomRelationExpr infers ViewRulePredicateRelations:
-  RelationExpr ({infer CustomRelationExpr.relation=current} 'with' body=CustomRelationExprBody)?
+ElementDescedantsExpression infers ElementExpression:
+  ElementRef (
+    {infer ExpandElementExpression.expand=current} DotUnderscore |
+    {infer ElementDescedantsExpression.parent=current} DotWildcard
+  )?
 ;
 
-RelationExpr:
-  source=ElementExpr (isBidirectional?='<->' | '->') target=ElementExpr
+RelationExpression:
+  InOutRelationExpressions |
+  DirectedRelationExpressions
 ;
 
-OutgoingExpr:
-  from=ElementExpr '->'
+InOutRelationExpressions infers RelationExpression:
+  IncomingRelationExpression ({infer InOutRelationExpression.inout=current} '->')?
 ;
 
-InOutExpr infers ViewRulePredicateRelations:
-  IncomingExpr ({infer InOutExpr.inout=current} '->')?;
+IncomingRelationExpression:
+  '->' to=ElementExpression;
 
-IncomingExpr:
-  '->' to=ElementExpr;
+DirectedRelationExpressions infers RelationExpression:
+  OutgoingRelationExpression ({infer DirectedRelationExpression.source=current} target=ElementExpression)?
+;
 
-ElementExpr:
-  WildcardExpr |
-  ElementSelectorExpr |
-  DescedantsExpr
+OutgoingRelationExpression:
+  from=ElementExpression
+  (isBidirectional?='<->' | '->' | '-[' kind=[RelationshipKind] ']->' | kind=[RelationshipKind:DotId])
 ;
 
-WildcardExpr:
-  isWildcard?='*'
+// Comma-separated list of ElementExpressions
+ElementExpressionsIterator:
+  value=ElementExpression ({infer ElementExpressionsIterator.prev=current} ',' (value=ElementExpression)?)*
 ;
 
-ElementSelectorExpr infers ElementExpr:
-  'element' StickyDot (
-    {infer ElementTagExpr} 'tag' IsEqual tag=[Tag:TagId] |
-    {infer ElementKindExpr} 'kind' IsEqual kind=[ElementKind]
-  )
+DynamicViewRulePredicate:
+  'include' exprs=DynamicViewRulePredicateIterator
 ;
 
-DescedantsExpr infers ElementExpr:
-  ElementRef (
-    {infer ExpandElementExpr.parent=current} DotUnderscore |
-    {infer DescedantsExpr.parent=current} DotWildcard
-  )?
+DynamicViewRulePredicateIterator:
+  value=DynamicViewElementExpressions ({infer DynamicViewRulePredicateIterator.prev=current} ',' (value=DynamicViewElementExpressions)?)*
+;
+
+DynamicViewElementExpressions infers DynamicViewElementExpression:
+  ElementExpression ({infer CustomElementExpression.target=current} 'with' custom=CustomElementProperties)?
 ;
 
-CustomElementExprBody: '{'
+ViewRuleStyle:
+  'style' target=ElementExpressionsIterator '{'
+    props+=StyleProperty*
+  '}';
+
+ViewRuleAutoLayout:
+  'autoLayout' direction=ViewLayoutDirection;
+
+CustomElementProperties: '{'
   props+=(
     NavigateToProperty |
     ElementStringProperty |
@@ -300,7 +323,7 @@ CustomElementExprBody: '{'
 '}'
 ;
 
-CustomRelationExprBody: '{'
+CustomRelationProperties: '{'
   props+=(
     RelationStringProperty |
     RelationshipStyleProperty
@@ -323,7 +346,7 @@ OpacityProperty:
 
 // Element properties -------------------------------------
 IconProperty:
-  key='icon' ':'? value=Uri ';'?;
+  key='icon' ':'? (libicon=[LibIcon:IconId] | value=Uri) ';'?;
 
 ShapeProperty:
   key='shape' ':'? value=ElementShape ';'?;
@@ -381,6 +404,11 @@ ThemeColor returns string:
   'primary' | 'secondary' | 'muted' | 'slate' | 'blue' | 'indigo' | 'sky' | 'red' | 'gray' | 'green' | 'amber';
 ElementShape returns string:
   'rectangle' | 'person' | 'browser' | 'mobile' | 'cylinder' | 'storage' | 'queue';
+
+IconId returns string:
+  LIB_ICON;
+  // ('aws:' | 'gcp:' | 'tech:') IdTerminal;
+
 Uri returns string:
   URI_WITH_SCHEMA | URI_RELATIVE;
 
@@ -418,6 +446,9 @@ hidden terminal WS: /\s+/;
 // Terminals
 //terminal LineStartWithDash: /(?<=([\r?\n][^\S\r\n]*))-/;
 
+// LibIcons
+terminal LIB_ICON: /\b(aws|gcp|tech):[-\w]*/;
+
 terminal URI_WITH_SCHEMA: /\w+:\/\/\S+/;
 terminal URI_RELATIVE: /\.{0,2}\/[^\/]\S+/;
 
@@ -436,4 +467,4 @@ terminal String: /"[^"]*"|'[^']*'/;
 
 // terminal  TagId: HASH LETTER (LETTER | DIGIT | UNDERSCORE | DASH)*;
 // terminal IdTerminal: (LETTER | UNDERSCORE+ (LETTER | DIGIT)) (LETTER | DIGIT | UNDERSCORE | DASH)*;
-terminal IdTerminal:  /\b[_]*[a-zA-Z][_-\w]*/;
+terminal IdTerminal:  /[_]*[a-zA-Z][-\w]*/;

package/src/likec4lib.ts

@@ -0,0 +1,7 @@
+import { LibIcons } from './generated-lib/icons'
+
+export const Scheme = 'likec4-lib'
+export const Path = `/icons.c4`
+export const Uri = `${Scheme}://${Path}`
+
+export { LibIcons as Content }

package/src/lsp/DocumentSymbolProvider.ts

@@ -17,10 +17,11 @@ export class LikeC4DocumentSymbolProvider implements DocumentSymbolProvider {
 
   getSymbols({
     parseResult: {
-      value: { specifications, models, views }
+      value: { specifications, models, views, likec4lib }
     }
   }: LikeC4LangiumDocument): MaybePromise<DocumentSymbol[]> {
     return [
+      ...likec4lib.map(l => () => this.getLikec4LibSymbol(l)),
       ...specifications.map(s => () => this.getSpecSymbol(s)),
       ...models.map(s => () => this.getModelSymbol(s)),
       ...views.map(s => () => this.getModelViewsSymbol(s))
@@ -34,6 +35,22 @@ export class LikeC4DocumentSymbolProvider implements DocumentSymbolProvider {
     })
   }
 
+  protected getLikec4LibSymbol(astLib: ast.LikeC4Lib): DocumentSymbol[] {
+    const cstModel = astLib?.$cstNode
+    if (!cstModel) return []
+    const children = astLib.icons.map(i => this.getLibIconSymbol(i)).filter(isTruthy)
+    if (children.length === 0) return []
+    return [
+      {
+        kind: SymbolKind.Namespace,
+        name: 'icons',
+        range: cstModel.range,
+        selectionRange: GrammarUtils.findNodeForKeyword(cstModel, 'icons')?.range ?? cstModel.range,
+        children
+      }
+    ]
+  }
+
   protected getSpecSymbol(astSpec: ast.SpecificationRule): DocumentSymbol[] {
     const cstModel = astSpec?.$cstNode
     if (!cstModel) return []
@@ -179,6 +196,16 @@ export class LikeC4DocumentSymbolProvider implements DocumentSymbolProvider {
     }
   }
 
+  protected getLibIconSymbol(astTag: ast.LibIcon): DocumentSymbol | null {
+    if (!astTag.$cstNode || isEmpty(astTag.name)) return null
+    return {
+      kind: this.symbolKind(astTag),
+      name: astTag.name,
+      range: astTag.$cstNode.range,
+      selectionRange: astTag.$cstNode.range
+    }
+  }
+
   protected getViewSymbol(astView: ast.LikeC4View): DocumentSymbol[] {
     const cst = astView?.$cstNode
     if (!cst) return []

package/src/lsp/SemanticTokenProvider.ts

@@ -1,5 +1,6 @@
 import type { AstNode } from 'langium'
 import { AbstractSemanticTokenProvider, type SemanticTokenAcceptor } from 'langium/lsp'
+import { isTruthy } from 'remeda'
 import { SemanticTokenModifiers, SemanticTokenTypes } from 'vscode-languageserver-protocol'
 import { ast } from '../ast'
 
@@ -16,8 +17,18 @@ export class LikeC4SemanticTokenProvider extends AbstractSemanticTokenProvider {
         type: SemanticTokenTypes.function
       })
     }
+    if (ast.isLibIcon(node)) {
+      acceptor({
+        node,
+        property: 'name',
+        type: SemanticTokenTypes.type,
+        modifier: [SemanticTokenModifiers.definition]
+      })
+      return 'prune'
+    }
+
     if (ast.isRelation(node) && 'kind' in node) {
-      return acceptor({
+      acceptor({
         node,
         property: 'kind',
         type: SemanticTokenTypes.function
@@ -40,7 +51,7 @@ export class LikeC4SemanticTokenProvider extends AbstractSemanticTokenProvider {
       })
       return 'prune'
     }
-    if ((ast.isDescedantsExpr(node) || ast.isWildcardExpr(node)) && node.$cstNode) {
+    if ((ast.isElementDescedantsExpression(node) || ast.isWildcardExpression(node)) && node.$cstNode) {
       acceptor({
         cst: node.$cstNode,
         type: SemanticTokenTypes.variable,
@@ -51,7 +62,7 @@ export class LikeC4SemanticTokenProvider extends AbstractSemanticTokenProvider {
       })
       return 'prune'
     }
-    if (ast.isElementKindExpr(node)) {
+    if (ast.isElementKindExpression(node) && isTruthy(node.kind)) {
       acceptor({
         node,
         property: 'kind',
@@ -59,7 +70,7 @@ export class LikeC4SemanticTokenProvider extends AbstractSemanticTokenProvider {
         modifier: [SemanticTokenModifiers.definition]
       })
     }
-    if (ast.isElementTagExpr(node)) {
+    if (ast.isElementTagExpression(node) && isTruthy(node.tag)) {
       acceptor({
         node,
         property: 'tag',
@@ -158,11 +169,21 @@ export class LikeC4SemanticTokenProvider extends AbstractSemanticTokenProvider {
         property: 'key',
         type: SemanticTokenTypes.property
       })
-      acceptor({
-        node,
-        property: 'value',
-        type: SemanticTokenTypes.string
-      })
+      if (ast.isIconProperty(node) && node.libicon) {
+        acceptor({
+          node,
+          property: 'libicon',
+          type: SemanticTokenTypes.enum
+        })
+      }
+      if ('value' in node) {
+        acceptor({
+          node,
+          property: 'value',
+          type: SemanticTokenTypes.string
+        })
+      }
+
       return 'prune'
     }
     if (ast.isElement(node)) {

package/src/model/model-parser.ts

@@ -145,11 +145,20 @@ export class LikeC4ModelParser {
     const bodyProps = mapToObj(astNode.body?.props.filter(ast.isElementStringProperty) ?? [], p => [p.key, p.value])
 
     title = toSingleLine(title ?? bodyProps.title)
-    description = removeIndent(description ?? bodyProps.description)
-    technology = toSingleLine(technology ?? bodyProps.technology)
+    description = removeIndent(bodyProps.description ?? description)
+    technology = toSingleLine(bodyProps.technology ?? technology)
 
     const links = astNode.body?.props.filter(ast.isLinkProperty).map(p => p.value)
 
+    // Property has higher priority than from style
+    const iconProp = astNode.body?.props.find(ast.isIconProperty)
+    if (iconProp) {
+      const value = iconProp.libicon?.ref?.name ?? iconProp.value
+      if (isTruthy(value)) {
+        style.icon = value as c4.IconUrl
+      }
+    }
+
     return {
       id,
       kind,
@@ -209,39 +218,70 @@ export class LikeC4ModelParser {
     }
   }
 
-  private parseElementExpr(astNode: ast.ElementExpr): c4.ElementExpression {
-    if (ast.isWildcardExpr(astNode)) {
+  // TODO validate view rules
+  private parseViewRulePredicate(astNode: ast.ViewRulePredicate, _isValid: IsValidFn): c4.ViewRulePredicate {
+    const exprs = [] as c4.Expression[]
+    let exprNode: ast.Expressions | undefined = astNode.exprs
+    while (exprNode) {
+      try {
+        if (isTruthy(exprNode.value)) {
+          exprs.unshift(this.parseExpression(exprNode.value))
+        }
+      } catch (e) {
+        logWarnError(e)
+      }
+      exprNode = exprNode.prev
+    }
+    return ast.isIncludePredicate(astNode) ? { include: exprs } : { exclude: exprs }
+  }
+
+  private parseElementExpressionsIterator(astNode: ast.ElementExpressionsIterator): c4.ElementExpression[] {
+    const exprs = [] as c4.ElementExpression[]
+    let iter: ast.ElementExpressionsIterator | undefined = astNode
+    while (iter) {
+      try {
+        exprs.unshift(this.parseElementExpr(iter.value))
+      } catch (e) {
+        logWarnError(e)
+      }
+      iter = iter.prev
+    }
+    return exprs
+  }
+
+  private parseElementExpr(astNode: ast.ElementExpression): c4.ElementExpression {
+    if (ast.isWildcardExpression(astNode)) {
       return {
         wildcard: true
       }
     }
-    if (ast.isElementKindExpr(astNode)) {
-      // invariant(astNode.kind.ref, 'ElementKindExpr kind is not resolved: ' + astNode.$cstNode?.text)
+    if (ast.isElementKindExpression(astNode)) {
+      invariant(astNode.kind, 'ElementKindExpr kind is not resolved: ' + astNode.$cstNode?.text)
       return {
         elementKind: astNode.kind.$refText as c4.ElementKind,
         isEqual: astNode.isEqual
       }
     }
-    if (ast.isElementTagExpr(astNode)) {
+    if (ast.isElementTagExpression(astNode)) {
+      invariant(astNode.tag, 'ElementTagExpr tag is not resolved: ' + astNode.$cstNode?.text)
       let elementTag = astNode.tag.$refText
       if (elementTag.startsWith('#')) {
         elementTag = elementTag.slice(1)
       }
-      // invariant(astNode.tag.ref, 'ElementTagExpr tag is not resolved: ' + astNode.$cstNode?.text)
       return {
         elementTag: elementTag as c4.Tag,
         isEqual: astNode.isEqual
       }
     }
-    if (ast.isExpandElementExpr(astNode)) {
-      const elementNode = elementRef(astNode.parent)
-      invariant(elementNode, 'Element not found ' + astNode.parent.$cstNode?.text)
+    if (ast.isExpandElementExpression(astNode)) {
+      const elementNode = elementRef(astNode.expand)
+      invariant(elementNode, 'Element not found ' + astNode.expand.$cstNode?.text)
       const expanded = this.resolveFqn(elementNode)
       return {
         expanded
       }
     }
-    if (ast.isDescedantsExpr(astNode)) {
+    if (ast.isElementDescedantsExpression(astNode)) {
       const elementNode = elementRef(astNode.parent)
       invariant(elementNode, 'Element not found ' + astNode.parent.$cstNode?.text)
       const element = this.resolveFqn(elementNode)
@@ -261,20 +301,25 @@ export class LikeC4ModelParser {
     nonexhaustive(astNode)
   }
 
-  private parseCustomElementExpr(astNode: ast.CustomElementExpr): c4.CustomElementExpr {
+  private parseCustomElementExpr(astNode: ast.CustomElementExpression): c4.CustomElementExpr {
     let targetRef
-    if (ast.isElementRef(astNode.target)) {
-      targetRef = astNode.target
-    } else if (ast.isExpandElementExpr(astNode.target)) {
-      targetRef = astNode.target.parent
-    } else {
-      invariant(false, 'ElementRef expected as target of custom element')
-    }
-    // invariant(ast.isElementRef(astNode.target), 'ElementRef expected as target of custom element')
+    switch (true) {
+      case ast.isElementRef(astNode.target):
+        targetRef = astNode.target
+        break
+      case ast.isExpandElementExpression(astNode.target):
+        targetRef = astNode.target.expand
+        break
+      case ast.isElementDescedantsExpression(astNode.target):
+        targetRef = astNode.target.parent
+        break
+      default:
+        throw new Error('Unsupported target of custom element')
+    }
     const elementNode = elementRef(targetRef)
     invariant(elementNode, 'element not found: ' + astNode.$cstNode?.text)
     const element = this.resolveFqn(elementNode)
-    const props = astNode.body?.props ?? []
+    const props = astNode.custom.props ?? []
     return props.reduce(
       (acc, prop) => {
         if (ast.isNavigateToProperty(prop)) {
@@ -290,7 +335,10 @@ export class LikeC4ModelParser {
           return acc
         }
         if (ast.isIconProperty(prop)) {
-          acc.custom[prop.key] = prop.value as c4.IconUrl
+          const value = prop.libicon?.ref?.name ?? prop.value
+          if (isTruthy(value)) {
+            acc.custom[prop.key] = value as c4.IconUrl
+          }
           return acc
         }
         if (ast.isColorProperty(prop)) {
@@ -320,40 +368,25 @@ export class LikeC4ModelParser {
     )
   }
 
-  private parsePredicateExpr(astNode: ast.ViewRulePredicateExpr): c4.Expression {
-    if (ast.isCustomRelationExpr(astNode)) {
+  private parseExpression(astNode: ast.Expression): c4.Expression {
+    if (ast.isCustomRelationExpression(astNode)) {
       return this.parseCustomRelationExpr(astNode)
     }
-    if (ast.isRelationExpr(astNode)) {
-      return this.parseRelationExpr(astNode)
-    }
-    if (ast.isInOutExpr(astNode)) {
-      return {
-        inout: this.parseElementExpr(astNode.inout.to)
-      }
-    }
-    if (ast.isOutgoingExpr(astNode)) {
-      return {
-        outgoing: this.parseElementExpr(astNode.from)
-      }
-    }
-    if (ast.isIncomingExpr(astNode)) {
-      return {
-        incoming: this.parseElementExpr(astNode.to)
-      }
-    }
-    if (ast.isCustomElementExpr(astNode)) {
+    if (ast.isCustomElementExpression(astNode)) {
       return this.parseCustomElementExpr(astNode)
     }
-    if (ast.isElementExpr(astNode)) {
+    if (ast.isElementExpression(astNode)) {
       return this.parseElementExpr(astNode)
     }
+    if (ast.isRelationExpression(astNode)) {
+      return this.parseRelationExpr(astNode)
+    }
     nonexhaustive(astNode)
   }
 
-  private parseCustomRelationExpr(astNode: ast.CustomRelationExpr): c4.CustomRelationExpr {
+  private parseCustomRelationExpr(astNode: ast.CustomRelationExpression): c4.CustomRelationExpr {
     const relation = this.parseRelationExpr(astNode.relation)
-    const props = astNode.body?.props ?? []
+    const props = astNode.custom.props ?? []
     return props.reduce(
       (acc, prop) => {
         if (ast.isRelationStringProperty(prop)) {
@@ -385,30 +418,40 @@ export class LikeC4ModelParser {
     )
   }
 
-  private parseRelationExpr(astNode: ast.RelationExpr): c4.RelationExpr {
-    return {
-      source: this.parseElementExpr(astNode.source),
-      target: this.parseElementExpr(astNode.target),
-      isBidirectional: astNode.isBidirectional
+  private parseRelationExpr(astNode: ast.RelationExpression): c4.RelationExpression {
+    if (ast.isDirectedRelationExpression(astNode)) {
+      return {
+        source: this.parseElementExpr(astNode.source.from),
+        target: this.parseElementExpr(astNode.target),
+        isBidirectional: astNode.source.isBidirectional
+      }
+    }
+    if (ast.isInOutRelationExpression(astNode)) {
+      return {
+        inout: this.parseElementExpr(astNode.inout.to)
+      }
     }
+    if (ast.isOutgoingRelationExpression(astNode)) {
+      return {
+        outgoing: this.parseElementExpr(astNode.from)
+      }
+    }
+    if (ast.isIncomingRelationExpression(astNode)) {
+      return {
+        incoming: this.parseElementExpr(astNode.to)
+      }
+    }
+    nonexhaustive(astNode)
   }
 
   private parseViewRule(astRule: ast.ViewRule, isValid: IsValidFn): c4.ViewRule {
-    if (ast.isIncludePredicate(astRule) || ast.isExcludePredicate(astRule)) {
-      const exprs = astRule.expressions.flatMap(n => {
-        try {
-          return isValid(n) ? this.parsePredicateExpr(n) : []
-        } catch (e) {
-          logWarnError(e)
-          return []
-        }
-      })
-      return ast.isIncludePredicate(astRule) ? { include: exprs } : { exclude: exprs }
+    if (ast.isViewRulePredicate(astRule)) {
+      return this.parseViewRulePredicate(astRule, isValid)
     }
     if (ast.isViewRuleStyle(astRule)) {
-      const styleProps = toElementStyle(astRule.styleprops)
+      const styleProps = toElementStyle(astRule.props)
       return {
-        targets: astRule.targets.map(n => this.parseElementExpr(n)),
+        targets: this.parseElementExpressionsIterator(astRule.target),
         style: {
           ...styleProps
         }
@@ -563,15 +606,24 @@ export class LikeC4ModelParser {
         try {
           if (ast.isDynamicViewRulePredicate(n)) {
             const include = [] as (c4.ElementExpression | c4.CustomElementExpr)[]
-            for (const expr of n.expressions) {
-              if (ast.isElementExpr(expr)) {
-                include.push(this.parseElementExpr(expr))
-                continue
-              }
-              if (ast.isCustomElementExpr(expr)) {
-                include.push(this.parseCustomElementExpr(expr))
-                continue
+            let iter: ast.DynamicViewRulePredicateIterator | undefined = n.exprs
+            while (iter) {
+              try {
+                switch (true) {
+                  case ast.isElementExpression(iter.value):
+                    isValid(iter.value) && include.unshift(this.parseElementExpr(iter.value))
+                    break
+
+                  case ast.isCustomElementExpression(iter.value):
+                    isValid(iter.value) && include.unshift(this.parseCustomElementExpr(iter.value))
+                    break
+                  default:
+                    nonexhaustive(iter.value)
+                }
+              } catch (e) {
+                logWarnError(e)
               }
+              iter = iter.prev
             }
             if (include.length > 0) {
               acc.push({ include })
@@ -579,8 +631,8 @@ export class LikeC4ModelParser {
             return acc
           }
           if (ast.isViewRuleStyle(n)) {
-            const styleProps = toElementStyle(n.styleprops)
-            const targets = n.targets.map(n => this.parseElementExpr(n))
+            const styleProps = toElementStyle(n.props)
+            const targets = this.parseElementExpressionsIterator(n.target)
             if (targets.length > 0) {
               acc.push({
                 targets,