All files / style9/src process-css.js

100% Statements 81/81
100% Branches 39/39
100% Functions 18/18
100% Lines 71/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                             22x       36x   35x   34x 20x 20x     33x       36x       33x 52x 19x         33x   33x 75x 75x 75x 75x 75x 75x 75x     33x       33x   33x 42x 8x   42x     33x       13x   13x 36x     13x       13x   13x 36x 36x 36x 33x 33x 33x 33x 33x     13x       13x 45x 2x     43x 30x 30x 30x 29x       14x 1x     13x 2x           11x 11x   11x     13x                   13x 13x   13x 33x       1x 13x    
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] }) {
  if (restNodes.length) return false;
 
  if (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;
    if (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') {
    if (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);
    if (!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) => {
    if (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);
      }
    }
 
    if (a.mediaQueries.length !== b.mediaQueries.length) {
      return a.mediaQueries.length - b.mediaQueries.length;
    }
 
    if (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);
};