postcss-variable-compress/splitFiles.test.ts

PostCSS plugin cleans up the variable names and saves space. It can will reduce your css variable to smaller variables

import postcss, { Root } from 'postcss';
import variableCompress, { variableCompressParameters } from './splitFiles';

async function run (input: string | { toString(): string; } | Root, output: string, opts?: variableCompressParameters[] | (string | ((e: any) => any))[] | undefined) {
  let result = await postcss(
    [variableCompress(opts)]
  ).process(input, { from: undefined });

  expect(result.css).toEqual(output);
  expect(result.warnings()).toHaveLength(0);

}


it('Shorten css variables', async () => {
  await run(
    `:root {
--first-color: #16f;
--second-color: #ff7;
--2: #000;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

.section-title {
  color: var(--primary-color, var(--black, #222));
}

code {
  --5: #555;
}`,
    `:root {
--0: #16f;
--1: #ff7;
--2: #000;
}

#firstParagraph {
  background-color: var(--0);
  color: var(--1);
}

#secondParagraph {
  background-color: var(--1);
  color: var(--0);
}

#container {
  --0: #290;
}

#thirdParagraph {
  background-color: var(--0);
  color: var(--1);
}

.section-title {
  color: var(--primary-color, var(--3, #222));
}

code {
  --5: #555;
}`,
    [
      '--primary-color',
      '2',
      (e: string | string[]) => e.includes('special'),
      (e: string) => e === '--5'
    ]
  );
});

it('No reloading', async () => {
  await run(`:root{--first-color: #16f;--second-color: #ff7;}`, `:root{--0: #16f;--1: #ff7;}`, []);
  await run(`:root{--second-color: #ff7;--first-color: #16f;}`, `:root{--1: #ff7;--0: #16f;}`, []);
});


it('Base array check or no array', async () => {
  await run(`:root{}`, `:root{}`);
});