From 6ca640387822170fc6ed2d1acd6e66afe201b247 Mon Sep 17 00:00:00 2001
From: Ashish Jain <ashishjain0512@gmail.com>
Date: Mon, 17 Jun 2024 15:09:45 +0200
Subject: [PATCH] Add support for custom cssStyle and compiledStyles for custom
 classDefs

---
 packages/mermaid/src/diagrams/flowchart/flowDb.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index 7fe2e3a73..c65c83677 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -806,7 +806,8 @@ const addNodeFromVertex = (
       labelStyle: '',
       parentId,
       padding: config.flowchart?.padding || 8,
-      cssStyles: vertex.styles.join(' '),
+      cssStyles: vertex.styles,
+      cssCompiledStyles: getCompiledStyles(vertex.classes),
       cssClasses: vertex.classes.join(' '),
       shape: getTypeFromVertex(vertex),
       dir: vertex.dir,
@@ -820,6 +821,16 @@ const addNodeFromVertex = (
   }
 };
 
+function getCompiledStyles(classDefs: string[]) {
+  let compiledStyles: string[] = [];
+  for (const customClass of classDefs) {
+    if (classes.get(customClass)) {
+      compiledStyles = [...compiledStyles, ...(classes.get(customClass)?.styles ?? [])];
+    }
+  }
+  return compiledStyles;
+}
+
 export const getData = () => {
   const config = getConfig();
   const nodes: Node[] = [];
@@ -844,7 +855,7 @@ export const getData = () => {
       labelStyle: '',
       parentId: parentDB.get(subGraph.id),
       padding: config.flowchart?.padding || 8,
-      cssStyles: '',
+      cssStyles: [],
       cssClasses: '',
       shape: 'rect',
       dir: subGraph.dir,