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 1/2] 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,

From 4a8c24a633476a654fefc92db5aaf813cf451d68 Mon Sep 17 00:00:00 2001
From: Ashish Jain <ashishjain0512@gmail.com>
Date: Mon, 17 Jun 2024 15:19:03 +0200
Subject: [PATCH 2/2] Add support for custom cssStyle and compiledStyles for
 custom classDefs

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

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index c65c83677..66c852a14 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -824,8 +824,14 @@ const addNodeFromVertex = (
 function getCompiledStyles(classDefs: string[]) {
   let compiledStyles: string[] = [];
   for (const customClass of classDefs) {
-    if (classes.get(customClass)) {
-      compiledStyles = [...compiledStyles, ...(classes.get(customClass)?.styles ?? [])];
+    const cssClass = classes.get(customClass);
+    if (cssClass) {
+      if (cssClass.styles) {
+        compiledStyles = [...compiledStyles, ...(cssClass.styles ?? [])];
+      }
+      if (cssClass.textStyles) {
+        compiledStyles = [...compiledStyles, ...(cssClass.textStyles ?? [])];
+      }
     }
   }
   return compiledStyles;