test: custom var()

lib/parsers.test.js

@@ -6,24 +6,36 @@ describe('parseInteger', () => {
   it('works with calc', () => {
     expect(parsers.parseInteger('calc(1 + 1)')).toBe('2');
   });
+  it('works with custom variable', () => {
+    expect(parsers.parseInteger('var(--integer)')).toBe('var(--integer)');
+  });
   it.todo('more tests');
 });
 describe('parseNumber', () => {
   it('works with calc', () => {
     expect(parsers.parseNumber('calc(1.5 + 1.5)')).toBe('3');
   });
+  it('works with custom variable', () => {
+    expect(parsers.parseNumber('var(--number)')).toBe('var(--number)');
+  });
   it.todo('more tests');
 });
 describe('parseLength', () => {
   it('works with calc', () => {
     expect(parsers.parseLength('calc(1px + 1px)')).toBe('calc(2px)');
   });
+  it('works with custom variable', () => {
+    expect(parsers.parseLength('var(--length)')).toBe('var(--length)');
+  });
   it.todo('more tests');
 });
 describe('parsePercentage', () => {
   it('works with calc', () => {
     expect(parsers.parsePercentage('calc(1% + 1%)')).toBe('calc(2%)');
   });
+  it('works with custom variable', () => {
+    expect(parsers.parsePercentage('var(--percentage)')).toBe('var(--percentage)');
+  });
   it.todo('more tests');
 });
 describe('parseLengthOrPercentage', () => {
@@ -33,12 +45,18 @@ describe('parseAngle', () => {
   it('works with calc', () => {
     expect(parsers.parseAngle('calc(1deg + 1deg)')).toBe('calc(2deg)');
   });
+  it('works with custom variable', () => {
+    expect(parsers.parseAngle('var(--angle)')).toBe('var(--angle)');
+  });
   it.todo('test');
 });
 describe('parseTime', () => {
   it('works with calc', () => {
     expect(parsers.parseTime('calc(1s + 1s)')).toBe('calc(2s)');
   });
+  it('works with custom variable', () => {
+    expect(parsers.parseTime('var(--time)')).toBe('var(--time)');
+  });
   it.todo('more tests');
 });
 describe('parseCalc', () => {
@@ -75,6 +93,9 @@ describe('parseCalc', () => {
     expect(parsers.parseCalc('calc(1s + 1000ms)', resolveTime)).toBe('calc(2000ms)');
     expect(parsers.parseCalc('CALc(1px + 1em)', resolveLengthOrPercentage)).toBe('calc(1px + 1em)');
   });
+  it('works with custom variable', () => {
+    expect(parsers.parseCalc('calc(var(--integer) + 1)')).toBe('calc(var(--integer) + 1)');
+  });
 });
 describe('parseKeyword', () => {
   it('returns null for invalid values', () => {
@@ -92,6 +113,9 @@ describe('parseKeyword', () => {
   it('parses predefined keywords', () => {
     expect(parsers.parseKeyword('SOLId', ['solid'])).toBe('solid');
   });
+  it('works with custom variable', () => {
+    expect(parsers.parseKeyword('var(--keyword)')).toBe('var(--keyword)');
+  });
 });
 describe('parseCustomIdentifier', () => {
   it('returns null for invalid values', () => {
@@ -122,12 +146,29 @@ describe('parseCustomIdentifier', () => {
     ];
     valid.forEach(value => expect(parsers.parseCustomIdentifier(value)).toBe(value));
   });
+  it('works with custom variable', () => {
+    expect(parsers.parseCustomIdentifier('var(--identifier)')).toBe('var(--identifier)');
+  });
+});
+describe('parseDashedIdentifier', () => {
+  it('returns null for invalid values', () => {
+    expect(parsers.parseDashedIdentifier('identifier')).toBeNull();
+  });
+  it('works with custom variable', () => {
+    expect(parsers.parseDashedIdentifier('var(--dashed-ident)')).toBe('var(--dashed-ident)');
+  });
 });
 describe('parseUrl', () => {
-  it.todo('test');
+  it('works with custom variable', () => {
+    expect(parsers.parseUrl('var(--url)')).toBe('var(--url)');
+  });
+  it.todo('more tests');
 });
 describe('parseString', () => {
-  it.todo('test');
+  it('works with custom variable', () => {
+    expect(parsers.parseString('var(--string)')).toBe('var(--string)');
+  });
+  it.todo('more tests');
 });
 describe('parseColor', () => {
   it('should convert hsl to rgb values', () => {
@@ -142,9 +183,55 @@ describe('parseColor', () => {
 
     expect(output).toBe('rgba(5, 5, 5, 0.5)');
   });
+  it('works with custom variable', () => {
+    expect(parsers.parseColor('rgb(var(--')).toBe('rgb(var(--');
+    expect(parsers.parseColor('hsl(var(--')).toBe('hsl(var(--');
+    expect(parsers.parseColor('rgb(var(--red), 0, 0, var(--alpha))')).toBe(
+      'rgb(var(--red), 0, 0, var(--alpha))'
+    );
+    expect(parsers.parseColor('hsl(var(--hue), var(--sat), 0, var(--alpha))')).toBe(
+      'hsl(var(--hue), var(--sat), 0, var(--alpha))'
+    );
+  });
 
   it.todo('Add more tests');
 });
+describe('parseCustomVariable', () => {
+  it('returns null for invalid values', () => {
+    const invalid = [
+      'var(, --property)',
+      'var(1px, --property)',
+      'vvar(--property)',
+      'varr(--property)',
+      'var(--prop erty)',
+      'var(--, var(1px))',
+    ];
+    invalid.forEach(input => expect(parsers.parseCustomVariable(input)).toBeNull());
+  });
+  it('parses a property with fallback value(s)', () => {
+    expect(parsers.parseCustomVariable('var(--foo, 100px)')).toBe('var(--foo, 100px)');
+    expect(parsers.parseCustomVariable('var(--foo, var(--bar))')).toBe('var(--foo, var(--bar))');
+  });
+  it('returns value even when it might be resolved as invalid at user time', () => {
+    const invalid = [
+      'var(--',
+      'var(--, )',
+      'var(--)invalid',
+      'invalid var(--)',
+      'var(--prop) erty',
+      'var(--, --prop erty)',
+      'calc(var(--',
+      'calc(var(--integer) + 1)',
+    ];
+    invalid.forEach(input => expect(parsers.parseCustomVariable(input)).toBe(input));
+  });
+  it('returns a case senstive property reference name', () => {
+    expect(parsers.parseCustomVariable('VAr(--PROPerty)')).toBe('var(--PROPerty)');
+  });
+  it('works with calc', () => {
+    expect(parsers.parseCustomVariable('var(--foo, calc(1 + 1))')).toBe('var(--foo, calc(1 + 1))');
+  });
+});
 describe('cssPropertyToIDLAttribute', () => {
   it.todo('test');
 });