| 1 | import { shorthandData } from './shorthand-data.mjs';
|
|---|
| 2 | import { bubbleSort } from './bubble-sort.mjs';
|
|---|
| 3 |
|
|---|
| 4 | const builtInOrders = [
|
|---|
| 5 | 'alphabetical',
|
|---|
| 6 | 'concentric-css',
|
|---|
| 7 | 'smacss',
|
|---|
| 8 | ];
|
|---|
| 9 |
|
|---|
| 10 | export const cssDeclarationSorter = ({ order = 'alphabetical', keepOverrides = false } = {}) => ({
|
|---|
| 11 | postcssPlugin: 'css-declaration-sorter',
|
|---|
| 12 | OnceExit (css) {
|
|---|
| 13 | let withKeepOverrides = comparator => comparator;
|
|---|
| 14 | if (keepOverrides) {
|
|---|
| 15 | withKeepOverrides = withOverridesComparator(shorthandData);
|
|---|
| 16 | }
|
|---|
| 17 |
|
|---|
| 18 | if (typeof order === 'function') {
|
|---|
| 19 | return processCss({ css, comparator: withKeepOverrides(order) });
|
|---|
| 20 | }
|
|---|
| 21 |
|
|---|
| 22 | if (!builtInOrders.includes(order))
|
|---|
| 23 | return Promise.reject(
|
|---|
| 24 | Error([
|
|---|
| 25 | `Invalid built-in order '${order}' provided.`,
|
|---|
| 26 | `Available built-in orders are: ${builtInOrders}`,
|
|---|
| 27 | ].join('\n'))
|
|---|
| 28 | );
|
|---|
| 29 |
|
|---|
| 30 | return import(`../orders/${order}.mjs`)
|
|---|
| 31 | .then(({ properties }) => processCss({
|
|---|
| 32 | css,
|
|---|
| 33 | comparator: withKeepOverrides(orderComparator(properties)),
|
|---|
| 34 | }));
|
|---|
| 35 | },
|
|---|
| 36 | });
|
|---|
| 37 |
|
|---|
| 38 | cssDeclarationSorter.postcss = true;
|
|---|
| 39 |
|
|---|
| 40 | // Kept for backward compatibility
|
|---|
| 41 | export default cssDeclarationSorter;
|
|---|
| 42 |
|
|---|
| 43 | function processCss ({ css, comparator }) {
|
|---|
| 44 | const comments = [];
|
|---|
| 45 | const rulesCache = [];
|
|---|
| 46 |
|
|---|
| 47 | css.walk(node => {
|
|---|
| 48 | const nodes = node.nodes;
|
|---|
| 49 | const type = node.type;
|
|---|
| 50 |
|
|---|
| 51 | if (type === 'comment') {
|
|---|
| 52 | // Don't do anything to root comments or the last newline comment
|
|---|
| 53 | const isNewlineNode = node.raws.before && node.raws.before.includes('\n');
|
|---|
| 54 | const lastNewlineNode = isNewlineNode && !node.next();
|
|---|
| 55 | const onlyNode = !node.prev() && !node.next() || !node.parent;
|
|---|
| 56 |
|
|---|
| 57 | if (lastNewlineNode || onlyNode || node.parent.type === 'root') {
|
|---|
| 58 | return;
|
|---|
| 59 | }
|
|---|
| 60 |
|
|---|
| 61 | if (isNewlineNode) {
|
|---|
| 62 | const pairedNode = node.next() || node.prev();
|
|---|
| 63 | if (pairedNode) {
|
|---|
| 64 | comments.unshift({
|
|---|
| 65 | 'comment': node,
|
|---|
| 66 | 'pairedNode': pairedNode,
|
|---|
| 67 | 'insertPosition': node.next() ? 'Before' : 'After',
|
|---|
| 68 | });
|
|---|
| 69 | node.remove();
|
|---|
| 70 | }
|
|---|
| 71 | } else {
|
|---|
| 72 | const pairedNode = node.prev() || node.next();
|
|---|
| 73 | if (pairedNode) {
|
|---|
| 74 | comments.push({
|
|---|
| 75 | 'comment': node,
|
|---|
| 76 | 'pairedNode': pairedNode,
|
|---|
| 77 | 'insertPosition': 'After',
|
|---|
| 78 | });
|
|---|
| 79 | node.remove();
|
|---|
| 80 | }
|
|---|
| 81 | }
|
|---|
| 82 | return;
|
|---|
| 83 | }
|
|---|
| 84 |
|
|---|
| 85 | // Add rule-like nodes to a cache so that we can remove all
|
|---|
| 86 | // comment nodes before we start sorting.
|
|---|
| 87 | const isRule = type === 'rule' || type === 'atrule';
|
|---|
| 88 | if (isRule && nodes && nodes.length > 1) {
|
|---|
| 89 | rulesCache.push(nodes);
|
|---|
| 90 | }
|
|---|
| 91 | });
|
|---|
| 92 |
|
|---|
| 93 | // Perform a sort once all comment nodes are removed
|
|---|
| 94 | rulesCache.forEach(nodes => {
|
|---|
| 95 | sortCssDeclarations({ nodes, comparator });
|
|---|
| 96 | });
|
|---|
| 97 |
|
|---|
| 98 | // Add comments back to the nodes they are paired with
|
|---|
| 99 | comments.forEach(node => {
|
|---|
| 100 | const pairedNode = node.pairedNode;
|
|---|
| 101 | node.comment.remove();
|
|---|
| 102 | pairedNode.parent && pairedNode.parent['insert' + node.insertPosition](pairedNode, node.comment);
|
|---|
| 103 | });
|
|---|
| 104 | }
|
|---|
| 105 |
|
|---|
| 106 | function sortCssDeclarations ({ nodes, comparator }) {
|
|---|
| 107 | bubbleSort(nodes, (a, b) => {
|
|---|
| 108 | if (a.type === 'decl' && b.type === 'decl') {
|
|---|
| 109 | return comparator(a.prop, b.prop);
|
|---|
| 110 | } else {
|
|---|
| 111 | return compareDifferentType(a, b);
|
|---|
| 112 | }
|
|---|
| 113 | });
|
|---|
| 114 | }
|
|---|
| 115 |
|
|---|
| 116 | function withOverridesComparator (shorthandData) {
|
|---|
| 117 | return function (comparator) {
|
|---|
| 118 | return function (a, b) {
|
|---|
| 119 | a = removeVendorPrefix(a);
|
|---|
| 120 | b = removeVendorPrefix(b);
|
|---|
| 121 |
|
|---|
| 122 | if (shorthandData[a] && shorthandData[a].includes(b)) return 0;
|
|---|
| 123 | if (shorthandData[b] && shorthandData[b].includes(a)) return 0;
|
|---|
| 124 |
|
|---|
| 125 | return comparator(a, b);
|
|---|
| 126 | };
|
|---|
| 127 | };
|
|---|
| 128 | }
|
|---|
| 129 |
|
|---|
| 130 | function orderComparator (order) {
|
|---|
| 131 | return function (a, b) {
|
|---|
| 132 | return order.indexOf(a) - order.indexOf(b);
|
|---|
| 133 | };
|
|---|
| 134 | }
|
|---|
| 135 |
|
|---|
| 136 | function compareDifferentType (a, b) {
|
|---|
| 137 | if (b.type === 'atrule' || a.type === 'atrule') {
|
|---|
| 138 | return 0;
|
|---|
| 139 | }
|
|---|
| 140 |
|
|---|
| 141 | return a.type === 'decl' ? -1 : b.type === 'decl' ? 1 : 0;
|
|---|
| 142 | }
|
|---|
| 143 |
|
|---|
| 144 | function removeVendorPrefix (property) {
|
|---|
| 145 | return property.replace(/^-\w+-/, '');
|
|---|
| 146 | }
|
|---|