fix: clip args with calc() and separated by comma

Author: cdoublev

lib/CSSStyleDeclaration.test.js

@@ -510,6 +510,11 @@ describe('properties', () => {
       expect(style.length).toEqual(1);
       expect(style.cssText).toEqual('clip: rect(0px, 3em, 2pt, 50%);');
     });
+    test('calc()', () => {
+      const style = new CSSStyleDeclaration();
+      style.clip = 'rect(calc(5px + 5px) calc(20px - 10px) calc(5px * 2) calc(20px / 2))';
+      expect(style.clip).toEqual('rect(calc(10px), calc(10px), calc(10px), calc(10px))');
+    });
   });
   describe('flex', () => {
     test('valid', () => {

lib/parsers.js

@@ -74,6 +74,7 @@ const whitespaceRegEx = new RegExp(`^${whitespace}$`);
 const trailingWhitespaceRegEx = new RegExp(`.*${whitespace}$`);
 
 exports.ws = ws;
+exports.whitespace = whitespace;
 
 /**
  * CSS types

lib/properties/clip.js

@@ -1,8 +1,15 @@
 'use strict';
 
-const { parseKeyword, parseLengthOrPercentage } = require('../parsers');
+const {
+  parseKeyword,
+  parseLengthOrPercentage,
+  splitTokens,
+  whitespace,
+  ws,
+} = require('../parsers');
 
-var shape_regex = /^rect\((.*)\)$/i;
+const shapeRegEx = new RegExp(`^rect\\(${ws}(.+)${ws}\\)$`, 'i');
+const separatorRegEx = new RegExp(`,|${whitespace}`);
 
 var parse = function(val) {
   if (val === '') {
@@ -12,11 +19,11 @@ var parse = function(val) {
   if (keyword !== undefined) {
     return keyword;
   }
-  var matches = val.match(shape_regex);
+  var matches = val.match(shapeRegEx);
   if (!matches) {
     return undefined;
   }
-  var parts = matches[1].split(/\s*,\s*/);
+  let [parts] = splitTokens(matches[1], separatorRegEx);
   if (parts.length !== 4) {
     return undefined;
   }