feat: parse positive numeric

Required for eg. <shape-radius> circle() argument, used to define clip-path, shape-outside, or
offset-path.

Author: cdoublev

lib/parsers.js

@@ -156,7 +156,7 @@ function serializeNumber(n) {
  * https://drafts.csswg.org/css-values-4/#integers
  * https://drafts.csswg.org/cssom/#ref-for-integer-value
  */
-exports.parseInteger = function parseInteger(val) {
+exports.parseInteger = function parseInteger(val, positive = false) {
   if (val === '') {
     return val;
   }
@@ -167,7 +167,13 @@ exports.parseInteger = function parseInteger(val) {
   const res = numberRegEx.exec(val);
   if (res) {
     const [, , integer, decimals, onlyDecimals, exponent] = res;
-    if (integer === undefined || decimals || onlyDecimals || (exponent && exponent.slice(1) < 0)) {
+    if (
+      integer === undefined ||
+      decimals ||
+      onlyDecimals ||
+      (exponent && exponent.slice(1) < 0) ||
+      (positive && integer < 0)
+    ) {
       return undefined;
     }
     return serializeNumber(val);
@@ -179,7 +185,7 @@ exports.parseInteger = function parseInteger(val) {
  * https://drafts.csswg.org/css-values-4/#numbers
  * https://drafts.csswg.org/cssom/#ref-for-number-value
  */
-exports.parseNumber = function parseNumber(val) {
+exports.parseNumber = function parseNumber(val, positive = false) {
   if (val === '') {
     return val;
   }
@@ -188,6 +194,9 @@ exports.parseNumber = function parseNumber(val) {
     val = calculated;
   }
   if (numberRegEx.test(val)) {
+    if (positive && val < 0) {
+      return undefined;
+    }
     return serializeNumber(val);
   }
   return exports.parseCustomVariable(val);
@@ -197,14 +206,14 @@ exports.parseNumber = function parseNumber(val) {
  * https://drafts.csswg.org/css-values-4/#lengths
  * https://drafts.csswg.org/cssom/#ref-for-length-value
  */
-exports.parseLength = function parseLength(val, resolve = false) {
+exports.parseLength = function parseLength(val, resolve = false, positive = false) {
   if (val === '') {
     return val;
   }
   if (val === '0') {
     return '0px';
   }
-  const calculated = exports.parseCalc(val, v => parseLength(v, resolve));
+  const calculated = exports.parseCalc(val, v => parseLength(v, resolve, positive));
   if (calculated) {
     if (!resolve) {
       return calculated;
@@ -214,6 +223,9 @@ exports.parseLength = function parseLength(val, resolve = false) {
   const res = lengthRegEx.exec(val);
   if (res) {
     let [, number, , , , , , unit] = res;
+    if (positive && number < 0) {
+      return undefined;
+    }
     unit = unit.toLowerCase();
     if (resolve) {
       switch (unit) {
@@ -252,14 +264,14 @@ exports.parseLength = function parseLength(val, resolve = false) {
  * https://drafts.csswg.org/css-values-4/#percentages
  * https://drafts.csswg.org/cssom/#ref-for-percentage-value
  */
-exports.parsePercentage = function parsePercentage(val, resolve = false) {
+exports.parsePercentage = function parsePercentage(val, resolve = false, positive = false) {
   if (val === '') {
     return val;
   }
   if (val === '0') {
     return '0%';
   }
-  const calculated = exports.parseCalc(val, v => parsePercentage(v, resolve));
+  const calculated = exports.parseCalc(val, v => parsePercentage(v, resolve, positive));
   if (calculated) {
     if (!resolve) {
       return calculated;
@@ -269,13 +281,18 @@ exports.parsePercentage = function parsePercentage(val, resolve = false) {
   const res = percentageRegEx.exec(val);
   if (res) {
     const [, number] = res;
+    if (positive && number < 0) {
+      return undefined;
+    }
     return serializeNumber(number) + '%';
   }
   return exports.parseCustomVariable(val);
 };
 
-exports.parseLengthOrPercentage = function parseLengthOrPercentage(val, resolve) {
-  return exports.parseLength(val, resolve) || exports.parsePercentage(val, resolve);
+exports.parseLengthOrPercentage = function parseLengthOrPercentage(val, resolve, positive) {
+  return (
+    exports.parseLength(val, resolve, positive) || exports.parsePercentage(val, resolve, positive)
+  );
 };
 
 /**

lib/parsers.test.js

@@ -7,6 +7,9 @@ describe('parseInteger', () => {
     const invalid = ['string', '1px', '#1', '1.1', '.1', '1e-1', 'calc(1 / 2)'];
     invalid.forEach(input => expect(parsers.parseInteger(input)).toBeUndefined());
   });
+  it('returns undefined for negative values when positive is required', () => {
+    expect(parsers.parseInteger(-1, true)).toBeUndefined();
+  });
   it('parses integer with exponent', () => {
     expect(parsers.parseInteger('1e1')).toBe('10');
     expect(parsers.parseInteger('1e+1')).toBe('10');
@@ -23,6 +26,9 @@ describe('parseNumber', () => {
     const invalid = ['string', '1px', '#1', 'calc(1 * 1px)'];
     invalid.forEach(input => expect(parsers.parseNumber(input)).toBeUndefined());
   });
+  it('returns undefined for negative values when positive is required', () => {
+    expect(parsers.parseNumber(-1, true)).toBeUndefined();
+  });
   it('parses number with exponent', () => {
     expect(parsers.parseNumber('1e1')).toBe('10');
     expect(parsers.parseNumber('1e+1')).toBe('10');
@@ -46,6 +52,10 @@ describe('parseLength', () => {
     const invalid = ['string', '1', 'px', '1%', '#1px', '1px%', 'calc(1 * 1%)'];
     invalid.forEach(input => expect(parsers.parseLength(input)).toBeUndefined());
   });
+  it('returns undefined for negative values when positive is required', () => {
+    expect(parsers.parseLength('-1px', false, true)).toBeUndefined();
+    expect(parsers.parsePercentage('calc(-1px)', true, true)).toBeUndefined();
+  });
   it('parses 0 to 0px', () => {
     expect(parsers.parseLength('0')).toBe('0px');
   });
@@ -84,6 +94,10 @@ describe('parsePercentage', () => {
     const invalid = ['string', '1', '%', '1px', '#1%', '1%%', 'calc(1 * 1px)'];
     invalid.forEach(input => expect(parsers.parsePercentage(input)).toBeUndefined());
   });
+  it('returns undefined for negative values when positive is required', () => {
+    expect(parsers.parsePercentage('-1%', false, true)).toBeUndefined();
+    expect(parsers.parsePercentage('calc(-1%)', true, true)).toBeUndefined();
+  });
   it('parses percentage with exponent', () => {
     expect(parsers.parsePercentage('1e1%')).toBe('10%');
     expect(parsers.parsePercentage('1e+1%')).toBe('10%');