Merge pull request #3032 from VivaLaVia/fix/style-block-regex

Update css block regex to allow final semicolon omission
cytoscape · Jun 28, 2022 · 89ba597 · 89ba597
2 parents e0a2a28 + 0c22210
commit 89ba597
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 2 deletions.
diff --git a/documentation/md/style.md b/documentation/md/style.md
@@ -12,7 +12,7 @@ The style specified at [initialisation](#core/initialisation) can be in a functi
 
 ### String format
 
-Note that the trailing semicolons for each property are mandatory.  Parsing will certainly fail without them.
+Note that the trailing semicolons for each property, except for the last, are mandatory. Parsing will certainly fail without them.
 
 An example style file:
 

diff --git a/src/style/string-sheet.js b/src/style/string-sheet.js
@@ -68,7 +68,7 @@ styfn.appendFromString = function( string ){
       let nothingLeftToParse = blockRem.match( /^\s*$/ );
       if( nothingLeftToParse ){ break; }
 
-      let propAndVal = blockRem.match( /^\s*(.+?)\s*:\s*(.+?)\s*;/ );
+      let propAndVal = blockRem.match( /^\s*(.+?)\s*:\s*(.+?)(?:\s*;|\s*$)/ );
 
       if( !propAndVal ){
         util.warn( 'Skipping parsing of block: Invalid formatting of style property and value definitions found in:' + blockStr );

diff --git a/test/style-string-sheet.js b/test/style-string-sheet.js
@@ -0,0 +1,100 @@
+const expect = require('chai').expect;
+const cytoscape = require('../src/test.js');
+
+describe('String-sheet parsing', function(){
+  let cy;
+  let consoleWarn;
+
+  this.beforeAll(function() {
+    consoleWarn = console.warn;
+    console.warn = function() {};
+  });
+
+  this.afterAll(function() {
+    console.warn = consoleWarn;
+  });
+
+  beforeEach(function() {
+    cy = cytoscape({
+      styleEnabled: true,
+      elements: {
+        nodes: [
+            { data: { id: 'n1' } },
+        ],
+      },
+    });
+  });
+
+  afterEach(function(){
+    cy.destroy();
+  });
+
+  [
+    '#n1 { color: rgb(1,1,1); background-color: rgb(1,1,1); }',
+    '#n1 { color: rgb(1,1,1); background-color: rgb(1,1,1) }',
+    '#n1 {color: rgb(1,1,1);background-color: rgb(1,1,1);}',
+    `#n1 {color: rgb(1,1,1);
+      background-color: rgb(1,1,1);}`,
+  ]
+  .forEach((stringSheet) => {
+    it('style block applied when parsed with no validity errors', function(){
+      let style = cy.$('#n1').style();
+      expect( style ).to.have.property('color');
+      expect( style['color'] ).to.exist;
+      expect( style['color'] ).not.to.equal('rgb(1,1,1)');
+      expect( style ).to.have.property('background-color');
+      expect( style['background-color'] ).to.exist;
+      expect( style['background-color'] ).not.to.equal('rgb(1,1,1)');
+
+      cy.style().fromString(stringSheet);
+
+      style = cy.$('#n1').style();
+      expect( style['color'] ).to.equal('rgb(1,1,1)');
+      expect( style['background-color'] ).to.equal('rgb(1,1,1)');
+    });
+  });
+
+  [
+    '#n1 { color: rgb(1,1,1) }',
+    '#n1 { color: rgb(1,1,1); }',
+  ]
+  .forEach((stringSheet) => {
+    it('style block with one property applied when parsed with no validity errors', function(){
+      let style = cy.$('#n1').style();
+      expect( style ).to.have.property('color');
+      expect( style['color'] ).to.exist;
+      expect( style['color'] ).not.to.equal('rgb(1,1,1)');
+
+
+      cy.style().fromString(stringSheet);
+
+      style = cy.$('#n1').style();
+      expect( style['color'] ).to.equal('rgb(1,1,1)');
+    });
+  });
+
+  [
+    '#n1 { color: rgb(1,1,1) background-color: rgb(1,1,1) }',
+    '#n1 { color: rgb(1,1,1) background-color: rgb(1,1,1); }',
+    `#n1 {color: rgb(1,1,1)
+      background-color: rgb(1,1,1);}`,
+  ]
+  .forEach((stringSheet) => {
+    it('style block ignored when parsed with validity error', function(){
+      let style = cy.$('#n1').style();
+      expect( style ).to.have.property('color');
+      expect( style['color'] ).to.exist;
+      expect( style['color'] ).not.to.equal('rgb(1,1,1)');
+      expect( style ).to.have.property('background-color');
+      expect( style['background-color'] ).to.exist;
+      expect( style['background-color'] ).not.to.equal('rgb(1,1,1)');
+
+      cy.style().fromString(stringSheet);
+
+      style = cy.$('#n1').style();
+      expect( style['color'] ).not.to.equal('rgb(1,1,1)');
+      expect( style['background-color'] ).not.to.equal('rgb(1,1,1)');
+    });
+  });
+
+});