All files process-css.js

78.67% Statements 59/75
59.46% Branches 22/37
94.12% Functions 16/17
83.08% Lines 54/65

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 1461x 1x 1x 1x   1x                             5x   5x   5x         5x       5x       5x 5x           5x   5x 10x 10x 10x 10x 10x 10x 10x     5x       5x   5x 5x     5x     5x       1x   1x 5x     1x       1x   1x 5x 5x 5x 5x 5x 5x 5x 5x     1x       1x 4x       4x               4x       4x               1x                 1x 1x   1x 5x       1x 1x    
const postcss = require('postcss');
const discardDuplicates = require('postcss-discard-duplicates');
const selectorParser = require('postcss-selector-parser');
const sortCSSmq = require('sort-css-media-queries');
 
const PSEUDO_ORDER = [
  ':link',
  ':focus-within',
  ':first-child',
  ':last-child',
  ':odd-child',
  ':even-child',
  ':hover',
  ':focus',
  ':active',
  ':visited',
  ':disabled'
];
 
function isValidSelector({ nodes: [firstNode, ...restNodes] }) {
  Iif (restNodes.length) return false;
 
  Iif (firstNode.nodes[0].type !== 'class') return false;
 
  for (let index = 1; index < firstNode.nodes.length; index++) {
    const node = firstNode.nodes[index];
    if (node.type !== 'pseudo') return false;
  }
 
  return true;
}
 
function parseSelector(selector) {
  return selectorParser(selector => selector).transformSync(selector);
}
 
function getPseudoClasses(selector) {
  return selector
    .filter(selector => selector.type === 'pseudo' && selector.value[1] !== ':')
    .map(selector => selector.value);
}
 
function removeWithContext(rule) {
  let decl;
  let onlyChild = true;
 
  do {
    const { parent } = rule;
    Iif (rule.nodes && rule.nodes.length) onlyChild = false;
    const clone = onlyChild ? rule.remove() : rule.clone();
    if (rule.type !== 'decl') clone.removeAll();
    if (decl) clone.append(decl);
    decl = clone;
    rule = parent;
  } while (rule && rule.type !== 'root');
 
  return decl;
}
 
function getMediaQueries(rule) {
  const mediaQueries = [];
 
  while (rule && rule.type !== 'root') {
    Iif (rule.type === 'atrule' && rule.name === 'media') {
      mediaQueries.push(rule.params);
    }
    rule = rule.parent;
  }
 
  return mediaQueries;
}
 
function getDecls(root) {
  const decls = [];
 
  root.walkDecls(rule => {
    decls.push(rule);
  });
 
  return decls;
}
 
function extractDecls(decls) {
  const nodes = [];
 
  decls.forEach(rule => {
    const selectors = parseSelector(rule.parent);
    const isStyle9Selector = isValidSelector(selectors);
    Iif (!isStyle9Selector) return;
    const pseudoClasses = getPseudoClasses(selectors.nodes[0]);
    const mediaQueries = getMediaQueries(rule.parent);
    const decl = removeWithContext(rule);
    const node = { decl, mediaQueries, pseudoClasses };
    nodes.push(node);
  });
 
  return nodes;
}
 
function sortNodes(nodes) {
  nodes.sort((a, b) => {
    Iif (a.pseudoClasses.length !== b.pseudoClasses.length) {
      return a.pseudoClasses.length - b.pseudoClasses.length;
    }
 
    for (let index = 0; index < a.pseudoClasses.length; index++) {
      const clsA = a.pseudoClasses[index];
      const clsB = b.pseudoClasses[index];
      if (clsA !== clsB) {
        return PSEUDO_ORDER.indexOf(clsA) - PSEUDO_ORDER.indexOf(clsB);
      }
    }
 
    Iif (a.mediaQueries.length !== b.mediaQueries.length) {
      return a.mediaQueries.length - b.mediaQueries.length;
    }
 
    Iif (a.mediaQueries.length) {
      return sortCSSmq(
        a.mediaQueries.join(' and '),
        b.mediaQueries.join(' and ')
      );
    }
  });
 
  return nodes;
}
 
/**
 * Sort declarations first by pseudo-classes, then by media queries mobile first
 * Only sort rules that are generated by style9, which should have a selector
 * that consists of a class and optionally of pseudo-elements & classes
 */
function sortPseudo(root) {
  const decls = getDecls(root);
  const nodes = sortNodes(extractDecls(decls));
 
  nodes.forEach(({ decl }) => {
    root.append(decl);
  });
}
 
module.exports = function processCSS(css, options = { from: undefined }) {
  return postcss([discardDuplicates, sortPseudo]).process(css, options);
};