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

Author: cdoublev

lib/CSSStyleDeclaration.test.js

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

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,19 +1,26 @@
 '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}`);
 
 function parse(val) {
   const keyword = parseKeyword(val, ['auto']);
   if (keyword !== null) {
     return keyword;
   }
-  var matches = val.match(shape_regex);
+  const matches = val.match(shapeRegEx);
   if (!matches) {
     return null;
   }
-  var parts = matches[1].split(/\s*,\s*/);
+  let [parts] = splitTokens(matches[1], separatorRegEx);
   if (parts.length !== 4) {
     return null;
   }