Making it possible to have style/% in class definitions as described in issue #54

src/diagrams/flowchart/parser/flow.jison

@@ -341,7 +341,7 @@ style: styleComponent
     {$$ = $1 + $2;}
     ;
 
-styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT;
+styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT | STYLE | PCT ;
 
 /* Token lists */
 

src/diagrams/flowchart/parser/flow.spec.js

@@ -288,6 +288,26 @@ describe('when parsing ',function(){
         expect(edges[0].type).toBe('arrow');
     });
 
+    it('should handle classDefs with style in classes',function(){
+        var res = flow.parser.parse('graph TD\nA-->B\nclassDef exClass font-style:bold;');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+
+        expect(edges[0].type).toBe('arrow');
+    });
+
+    it('should handle classDefs with % in classes',function(){
+        var res = flow.parser.parse('graph TD\nA-->B\nclassDef exClass fill:#f96,stroke:#333,stroke-width:4px,font-size:50%,font-style:bold;');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+
+        expect(edges[0].type).toBe('arrow');
+    });
+
     describe("it should handle text on edges",function(){
         it('it should handle text without space',function(){
             var res = flow.parser.parse('graph TD;A--x|textNoSpace|B;');

test/web.html

@@ -56,7 +56,7 @@
             cyr[Cyrillic]-->cyr2((Circle shape Начало))
         end
         classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-        classDef orange fill:#f96,stroke:#333,stroke-width:4px;
+        classDef orange fill:#f96,stroke:#333,stroke-width:4px,font-size:50%,font-style:bold;
         class sq,e green
         class di orange
     </div>