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 159 | 1x 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); }; |