All files / src process-css.js

80.25% Statements 65/81
61.54% Branches 24/39
94.44% Functions 17/18
84.51% Lines 60/71

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 146 147 148 149 150 151 152 153 154 155 156 157 158 1591x 1x 1x 1x 1x   1x   1x                             16x       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 8x       8x               8x       8x             8x 8x   8x     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 { PROPERTY_PRIORITY } = require('./utils/constants');
 
const DEFAULT_PRIORITY = 1;
 
const PSEUDO_ORDER = [
  ':link',
  ':focus-within',
  ':first-child',
  ':last-child',
  ':odd-child',
  ':even-child',
  ':hover',
  ':focus',
  ':active',
  ':visited',
  ':disabled'
];
 
function getPriority(prop) {
  return PROPERTY_PRIORITY[prop] || DEFAULT_PRIORITY;
}
 
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 ')
      );
    }
 
    const propA = a.decl.nodes[0].prop;
    const propB = b.decl.nodes[0].prop;
 
    return getPriority(propA) - getPriority(propB);
  });
 
  return nodes;
}
 
/**
 * Sort declarations first by pseudo-classes, then by media queries mobile
 * first, and finally by longhand prioerity
 * 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);
};