fix(flowchart): apply style on doublecircle

[tomperr]

📑 Summary

Correctly apply CSS through classes on double circle shape

Resolves #4536

📏 Design Decisions

Double circles are two circle svg tags inside a g tag that group them.
It looks like this:

<g class="myClass defaultClasses">
    <g>
        <circle></circle>
        <circle></circle>
    </g>
    <g class="label">...</g>
</g>

Generated CSS rules will be myClass > * {...} and myClass span {...} because of this line

mermaid/packages/mermaid/src/mermaidAPI.ts

Line 210 in 2fe5750

const cssHtmlElements = ['> *', 'span']; // TODO make a constant

Our two circle tags won't be directly targeted by these CSS rules, so other rules (such as the ones provided by a theme) can override CSS defined in classDef.

To fix it, we add the classes to the g tag that is the parent of the two circle tags:

<g class="myClass defaultClasses">
    <g class="myClass">
        <circle></circle>
        <circle></circle>
    </g>
    <g class="label">...</g>
</g>

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests -> not appropriate
• 📓 have added documentation -> not appropriate
• 🔖 targeted develop branch

[tomperr]

Another way to fix this issue could be to change cssHtmlElements value to * (not an array anymore), but this change would affect CSS generation in every diagram and could involve other issues

[codecov-commenter]

Codecov Report

Merging #4540 (5a96bd1) into develop (2fe5750) will increase coverage by 3.53%.
The diff coverage is 100.00%.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #4540      +/-   ##
===========================================
+ Coverage    79.97%   83.50%   +3.53%     
===========================================
  Files          136      136              
  Lines        10446    10447       +1     
  Branches       492      492              
===========================================
+ Hits          8354     8724     +370     
+ Misses        1928     1574     -354     
+ Partials       164      149      -15     

Flag	Coverage Δ
e2e	83.39% <100.00%> (+3.56%)	⬆️
unit	28.28% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
packages/mermaid/src/dagre-wrapper/nodes.js	89.43% <100.00%> (+20.96%)	⬆️

... and 25 files with indirect coverage changes

[piranna]

Great, thank you! So fast! :-D