fix: CI issues

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts

@@ -3,7 +3,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
 import type { Bounds, Point } from '../../../types.js';
@@ -69,11 +68,14 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
   H0 V0 Z`;
 
   if (node.look === 'handDrawn') {
+    // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const roughNode = rc.path(path, options);
     bangElem = shapeSvg.insert(() => roughNode, ':first-child');
-    bangElem.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
+    bangElem
+      .attr('class', 'basic label-container')
+      .attr('style', handleUndefinedAttr(node.cssStyles));
   } else {
     bangElem = shapeSvg
       .insert('path', ':first-child')

packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts

@@ -1,4 +1,3 @@
-import rough from 'roughjs';
 import { log } from '../../../logger.js';
 import type { Bounds, D3Selection, Point } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
@@ -44,15 +43,17 @@ export async function circle<T extends SVGGraphicsElement>(
   label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
 
   let circleElem;
-  const { cssStyles } = node;
 
   if (node.look === 'handDrawn') {
+    // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const roughNode = rc.circle(0, 0, radius * 2, options);
 
     circleElem = shapeSvg.insert(() => roughNode, ':first-child');
-    circleElem.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
+    circleElem
+      .attr('class', 'basic label-container')
+      .attr('style', handleUndefinedAttr(node.cssStyles));
   } else {
     circleElem = shapeSvg
       .insert('circle', ':first-child')

packages/mermaid/src/rendering-util/rendering-elements/shapes/cloud.ts

@@ -1,4 +1,3 @@
-import rough from 'roughjs';
 import { log } from '../../../logger.js';
 import type { Bounds, D3Selection, Point } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
@@ -48,7 +47,6 @@ export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>
   const r3 = 0.35 * w;
   const r4 = 0.2 * w;
 
-  const { cssStyles } = node;
   let cloudElem;
 
   // Cloud path
@@ -69,11 +67,14 @@ export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>
   H0 V0 Z`;
 
   if (node.look === 'handDrawn') {
+    // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const roughNode = rc.path(path, options);
     cloudElem = shapeSvg.insert(() => roughNode, ':first-child');
-    cloudElem.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
+    cloudElem
+      .attr('class', 'basic label-container')
+      .attr('style', handleUndefinedAttr(node.cssStyles));
   } else {
     cloudElem = shapeSvg
       .insert('path', ':first-child')

packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts

@@ -2,7 +2,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } f
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 
 export const createHexagonPathD = (
@@ -51,6 +50,7 @@ export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<
   const labelYOffset = -bbox.height / 2;
   label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
   const { cssStyles } = node;
+  // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
   const options = userNodeOverrides(node, {});
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts

@@ -2,7 +2,6 @@ import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } f
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 
 /**
@@ -121,6 +120,7 @@ export async function roundedRect<T extends SVGGraphicsElement>(
   const radius = node.radius || 5;
   const taper = node.taper || 5; // Taper width for the rounded corners
   const { cssStyles } = node;
+  // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
   const options = userNodeOverrides(node, {});
   if (node.stroke) {