stylis-plugin-css-variables/dist/es/__tests__/transform.test.js

Stylis plugin that transforms CSS variable into static values for non-supported browsers.

/**
 * @jest-environment jsdom
 */
import { getFallbackDeclaration, transformContent } from '../transform';
/*
 * This function is used within the stylisPluginCssCustomProperties plugin.
 * The incoming values are provided by the (internal) stylis CSS compiler.
 * These values have a specific format. Notably, most spaces are removed
 * the ending semicolon (;) is omitted.
 */

describe('getFallbackDeclaration', function () {
  beforeEach(function () {
    // Clear root HTML node styles
    document.documentElement.style = null;
  });
  describe('invalid', function () {
    test('should return undefined if it does not contain var()', function () {
      var result = getFallbackDeclaration('font-size:14px');
      expect(result).toEqual(undefined);
    });
    test('should return undefined fallback value is non are provided', function () {
      var result = getFallbackDeclaration('font-size: var( --fontSize )');
      expect(result).toEqual(undefined);
    });
    test('should return undefined fallback value if passed wrong parentness count', function () {
      var result = getFallbackDeclaration('font-size: var(( --fontSize )');
      expect(result).toEqual(undefined);
    });
  });
  describe('basic', function () {
    test('should use fallback value if provided', function () {
      var result = getFallbackDeclaration('font-size: var( --fontSize, 14px )');
      expect(result).toEqual('font-size:14px');
    });
    test('should use fallback value with spaces in-between var()', function () {
      var result = getFallbackDeclaration('font-size: var(   --fontSize, 14px          )');
      expect(result).toEqual('font-size:14px');
    });
    test('should use fallback value without spaces in-between var()', function () {
      var result = getFallbackDeclaration('font-size: var(--fontSize,14px)');
      expect(result).toEqual('font-size:14px');
    });
    test('should use fallback with parentheses value', function () {
      var result = getFallbackDeclaration('filter: var(--blur, blur(10px))');
      expect(result).toEqual('filter:blur(10px)');
    });
    test('should use fallback with nested parentheses value', function () {
      var result = getFallbackDeclaration('transform:translate3d(var(--x,5px),var(--y,10px),var( --z, 0))');
      expect(result).toEqual('transform:translate3d(5px,10px,0)');
    });
    test('should correctly transform shorthand CSS properties', function () {
      var result = getFallbackDeclaration('transition: all var(--d, 100ms) var(--e, ease)');
      expect(result).toEqual('transition:all 100ms ease');
    });
    test('should correctly transform linear-gradient property', function () {
      var result = getFallbackDeclaration('background-image: var(--gradient,linear-gradient(90deg, rgba(2,0,36,1) 20%, rgba(9,9,121,0.5872724089635855) 35%, rgba(0,212,255,0) 40%));');
      expect(result).toEqual('background-image:linear-gradient(90deg, rgba(2,0,36,1) 20%, rgba(9,9,121,0.5872724089635855) 35%, rgba(0,212,255,0) 40%);');
    });
  });
  describe('nested', function () {
    test('should use nested fallback value if provided', function () {
      var result = getFallbackDeclaration('font-size: var( --fontSize, var( --big, 20px ) )');
      expect(result).toEqual('font-size:20px');
    });
    test('should use heavily nested fallback value if provided', function () {
      var result = getFallbackDeclaration('font-size: var( --fontSize, var( --one, var( --two, var( --three, var( --four, 20px )))))');
      expect(result).toEqual('font-size:20px');
    });
    test('should use heavily nested fallback with space in-between closing parentheses', function () {
      var result = getFallbackDeclaration('font-size: var( --fontSize, var( --one, var( --two, var( --three, var( --four, 20px ))  ) ) )');
      expect(result).toEqual('font-size:20px');
    });
    test('should use heavily nested fallback with parentheses value', function () {
      var result = getFallbackDeclaration('filter: var( --fontSize, var( --one, var( --two, var( --three, var( --four, blur(20px) ))  ) ) )');
      expect(result).toEqual('filter:blur(20px)');
    });
    test('should use heavily nested fallback with rgba value', function () {
      var result = getFallbackDeclaration('color: var( --fontSize, var( --one, var( --two, var( --three, var( --four, rgba(0,0,0,0.2) ))  ) ) )');
      expect(result).toEqual('color:rgba(0,0,0,0.2)');
    });
    test('should use variable fallback within rgba()', function () {
      var result = getFallbackDeclaration('color: rgba( var(--r,255), var(--g,0), var(--b,0), var(--a, 0.5) )');
      expect(result).toEqual('color:rgba( 255, 0, 0, 0.5 )');
    });
  });
  describe(':root fallback', function () {
    test('should not use root fallback if one is provided', function () {
      document.documentElement.style.setProperty('--big', '80px');
      var result = getFallbackDeclaration('font-size: var( --fontSize, 20px )');
      expect(result).toEqual('font-size:20px');
    });
    test('should use root fallback if none are provided', function () {
      document.documentElement.style.setProperty('--fontSize', '80px');
      var result = getFallbackDeclaration('font-size: var( --fontSize )');
      expect(result).toEqual('font-size:80px');
    });
    test('should use root fallback with nested var()', function () {
      document.documentElement.style.setProperty('--big', '80px');
      var result = getFallbackDeclaration('font-size: var( --fontSize, var( --big ) )');
      expect(result).toEqual('font-size:80px');
    });
    test('should use latest root variable', function () {
      document.documentElement.style.setProperty('--big', '80px');
      var dec = 'font-size: var( --fontSize, var( --big ) )';
      var result = getFallbackDeclaration(dec); // First pass

      expect(result).toEqual('font-size:80px'); // Update CSS variable on :root

      document.documentElement.style.setProperty('--big', '20px');
      dec = 'font-size: var( --fontSize, var( --big ) )';
      result = getFallbackDeclaration(dec); // Second pass

      expect(result).toEqual('font-size:20px');
    });
    test('should use root value within rgba()', function () {
      document.documentElement.style.setProperty('--r', '0');
      document.documentElement.style.setProperty('--g', '255');
      document.documentElement.style.setProperty('--b', '0');
      document.documentElement.style.setProperty('--a', '0.5');
      var result = getFallbackDeclaration('color: rgba( var(--r), var(--g), var(--b), var(--a) )');
      expect(result).toEqual('color:rgba( 0, 255, 0, 0.5 )');
    });
  });
});
describe('transformContent', function () {
  describe('invalid', function () {
    test('should return undefined if it does not contain var()', function () {
      var result = transformContent('font-size:14px;');
      expect(result).toEqual(undefined);
    });
    test('should return undefined fallback value is non are provided', function () {
      var result = transformContent('font-size: var( --fontSize );');
      expect(result).toEqual(undefined);
    });
  });
});