fix: add support for container query units (#214)

Fix #199

Author: ludofischer

parser.jison

@@ -25,6 +25,12 @@
 (([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)vh\b              return 'VHS';
 (([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)vmin\b            return 'VMINS';
 (([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)vmax\b            return 'VMAXS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)cqw\b             return 'CQWS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)cqh\b             return 'CQHS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)cqi\b             return 'CQIS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)cqb\b             return 'CQBS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)cqmin\b           return 'CQMINS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)cqmax\b           return 'CQMAXS';
 (([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)cm\b              return 'LENGTH';
 (([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)mm\b              return 'LENGTH';
 (([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)Q\b               return 'LENGTH';
@@ -99,6 +105,12 @@ expression
     | VWS { $$ = { type: 'VwValue', value: parseFloat($1), unit: 'vw' }; }
     | VMINS { $$ = { type: 'VminValue', value: parseFloat($1), unit: 'vmin' }; }
     | VMAXS { $$ = { type: 'VmaxValue', value: parseFloat($1), unit: 'vmax' }; }
+    | CQWS { $$ = { type: 'CqwValue', value: parseFloat($1), unit: 'cqw' }; }
+    | CQHS { $$ = { type: 'CqhValue', value: parseFloat($1), unit: 'cqh' }; }
+    | CQIS { $$ = { type: 'CqiValue', value: parseFloat($1), unit: 'cqi' }; }
+    | CQBS { $$ = { type: 'CqbValue', value: parseFloat($1), unit: 'cqb' }; }
+    | CQMINS { $$ = { type: 'CqminValue', value: parseFloat($1), unit: 'cqmin' }; }
+    | CQMAXS { $$ = { type: 'CqmaxValue', value: parseFloat($1), unit: 'cqmax' }; }            
     | PERCENTAGE { $$ = { type: 'PercentageValue', value: parseFloat($1), unit: '%' }; }
     | ADD dimension { var prev = $2; $$ = prev; }
     | SUB dimension { var prev = $2; prev.value *= -1; $$ = prev; }

src/lib/reducer.js

@@ -20,6 +20,12 @@ function isValueType(node) {
     case 'VwValue':
     case 'VminValue':
     case 'VmaxValue':
+    case 'CqwValue':
+    case 'CqhValue':
+    case 'CqiValue':
+    case 'CqbValue':
+    case 'CqminValue':
+    case 'CqmaxValue':
     case 'PercentageValue':
     case 'Number':
       return true;

src/parser.d.ts

@@ -25,7 +25,13 @@ export interface DimensionExpression {
     | 'VhValue'
     | 'VwValue'
     | 'VminValue'
-    | 'VmaxValue';
+    | 'VmaxValue'
+    | 'CqwValue'
+    | 'CqhValue'
+    | 'CqbValue'
+    | 'CqiValue'
+    | 'CqminValue'
+    | 'CqmaxValue';    
   value: number;
   unit: string;
 }

test/index.js

@@ -257,6 +257,41 @@ test(
   testValue('calc(100% + 1px)', 'calc(100% + 1px)')
 );
 
+test(
+  'should preserve calc with cqw units',
+  testValue('calc(12.72727px + 8.523cqw)', 'calc(12.72727px + 8.523cqw)')
+);
+
+test(
+  'should add numbers with cqw units',
+  testValue('calc(1cqw + 8cqw)', '9cqw')
+);
+
+test(
+  'should add numbers with cqh units',
+  testValue('calc(1cqh + 3cqh)', '4cqh')
+);
+
+test(
+  'should add numbers with cqi units',
+  testValue('calc(1cqi + 3cqi)', '4cqi')
+);
+
+test(
+  'should add numbers with cqb units',
+  testValue('calc(1cqb + 3cqb)', '4cqb')
+);
+
+test(
+  'should add numbers with cqmin units',
+  testValue('calc(1cqmin + 3cqmin)', '4cqmin')
+);
+
+test(
+  'should add numbers with cqmax units',
+  testValue('calc(1cqmax + 3cqmax)', '4cqmax')
+);
+
 test(
   'should parse fractions without leading zero',
   testValue('calc(2rem - .14285em)', 'calc(2rem - 0.14285em)')