postcss-ordered-values/src/lib/getValue.js

Ensure values are ordered consistently in your CSS.

import postcssValueParser from 'postcss-value-parser';

const { stringify } = postcssValueParser;
/**
 * @param {import('postcss-value-parser').Node[][]} values
 * @return {import('postcss-value-parser').Node[]}
 */
function flatten(values) {
  /** @type {import('postcss-value-parser').Node[]} */
  const nodes = [];
  for (const [index, arg] of values.entries()) {
    for (const [idx, val] of arg.entries()) {
      if (
        idx === arg.length - 1 &&
        index === values.length - 1 &&
        val.type === 'space'
      ) {
        continue;
      }
      nodes.push(val);
    }

    if (index !== values.length - 1) {
      nodes[nodes.length - 1].type = 'div';
      nodes[nodes.length - 1].value = ',';
    }
  }
  return nodes;
}
/**
 * @param {import('postcss-value-parser').Node[][]} values
 * @return {string}
 */
function getValue(values) {
  return stringify(flatten(values));
}

export default getValue;