Fix for issue #271

dist/mermaid.js

@@ -31626,7 +31626,7 @@ classes = {};
 // Functions to be run after graph rendering
 var funs = [];
 /**
- * Function called by parser when a node definition has been found
+ * Function called by parser when a node definition has been found.
  * @param id
  * @param text
  * @param type
@@ -40322,7 +40322,7 @@ var cloneCssStyles = function cloneCssStyles(svg, classes) {
                 }
             } else {
                 if (classes[className].styles instanceof Array) {
-                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join('; ') + '; }\n';
+                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect, .' + className + '>polygon, .' + className + '>ellipse { ' + classes[className].styles.join('; ') + '; }\n';
                 }
             }
         }

dist/mermaid.slim.js

@@ -22121,7 +22121,7 @@ classes = {};
 // Functions to be run after graph rendering
 var funs = [];
 /**
- * Function called by parser when a node definition has been found
+ * Function called by parser when a node definition has been found.
  * @param id
  * @param text
  * @param type
@@ -30817,7 +30817,7 @@ var cloneCssStyles = function cloneCssStyles(svg, classes) {
                 }
             } else {
                 if (classes[className].styles instanceof Array) {
-                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join('; ') + '; }\n';
+                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect, .' + className + '>polygon, .' + className + '>ellipse { ' + classes[className].styles.join('; ') + '; }\n';
                 }
             }
         }

dist/mermaidAPI.js

@@ -31293,7 +31293,7 @@ classes = {};
 // Functions to be run after graph rendering
 var funs = [];
 /**
- * Function called by parser when a node definition has been found
+ * Function called by parser when a node definition has been found.
  * @param id
  * @param text
  * @param type
@@ -39730,7 +39730,7 @@ var cloneCssStyles = function cloneCssStyles(svg, classes) {
                 }
             } else {
                 if (classes[className].styles instanceof Array) {
-                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join('; ') + '; }\n';
+                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect, .' + className + '>polygon, .' + className + '>ellipse { ' + classes[className].styles.join('; ') + '; }\n';
                 }
             }
         }

dist/mermaidAPI.slim.js

@@ -21788,7 +21788,7 @@ classes = {};
 // Functions to be run after graph rendering
 var funs = [];
 /**
- * Function called by parser when a node definition has been found
+ * Function called by parser when a node definition has been found.
  * @param id
  * @param text
  * @param type
@@ -30225,7 +30225,7 @@ var cloneCssStyles = function cloneCssStyles(svg, classes) {
                 }
             } else {
                 if (classes[className].styles instanceof Array) {
-                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join('; ') + '; }\n';
+                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect, .' + className + '>polygon, .' + className + '>ellipse { ' + classes[className].styles.join('; ') + '; }\n';
                 }
             }
         }

src/diagrams/classDiagram/classDb.js

@@ -12,7 +12,7 @@ classes = {
 // Functions to be run after graph rendering
 var funs = [];
 /**
- * Function called by parser when a node definition has been found
+ * Function called by parser when a node definition has been found.
  * @param id
  * @param text
  * @param type

src/utils.js

@@ -108,7 +108,7 @@ var cloneCssStyles = function(svg, classes){
                 }
             } else {
                 if (classes[className].styles instanceof Array) {
-                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect { ' + classes[className].styles.join('; ') + '; }\n';
+                    embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect, .' + className + '>polygon, .' + className + '>ellipse { ' + classes[className].styles.join('; ') + '; }\n';
                 }
             }
         }

src/utils.spec.js

@@ -190,8 +190,8 @@ describe('when cloning CSS ', function () {
         expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#ffffff; stroke-width:1.5px; }',
             '.node { stroke: #eeeeee; }',
             '.node-square { stroke: #bbbbbb; }',
-            '#mermaid-01 .node-square>rect { fill:#eeeeee; stroke:#aaaaaa; }',
-            '#mermaid-01 .node-circle>rect { fill:#444444; stroke:#111111; }'
+            '#mermaid-01 .node-square>rect, .node-square>polygon, .node-square>ellipse { fill:#eeeeee; stroke:#aaaaaa; }',
+            '#mermaid-01 .node-circle>rect, .node-circle>polygon, .node-circle>ellipse { fill:#444444; stroke:#111111; }'
         ]);
     });
 });

test/examples/circleColorByClassDef.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+
+    <link rel="stylesheet" href="../../dist/mermaid.css"/>
+    <script src="../../dist/mermaid.js"></script>
+    <style>
+        .cluster {
+            fill: #fcac93;
+            rx:4px;
+            stroke: grey;
+        }
+        .cssClass > rect{
+            fill:#FF0000;
+            stroke:#FFFF00;
+            stroke-width:4px;
+        }
+    </style>
+    <link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
+</head>
+<body>
+<h1>classDef for circle and elipse</h1>
+A node and D node should be green.
+<div class="mermaid" id="i211">
+    graph LR;
+    A((start))-->B(step1);
+    B-->C[step2];
+    C-->D{step3};
+    D-->D2(-step3.5-);
+    D2-->E[end];
+    classDef green fill:#9f6,stroke:#333,stroke-width:1px;
+    class A,B,C,D,D2,E green;
+</div>
+</body>
+</html>