forked from yunusga/postcss-sort-media-queries
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
108 lines (89 loc) · 3.1 KB
/
index.js
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
// @ts-check
/**
* @typedef {import('postcss/lib/postcss').Plugin} Plugin
* @typedef {import('postcss/lib/postcss').Root} Root
* @typedef {import('postcss/lib/postcss').AtRule} AtRule
* @typedef {import('sort-css-media-queries/lib')} SortCSSmq
*/
/**
* Sort function declaration
* @callback sortFn
* @param {string} A - previous
* @param {string} B - next
* @returns {number}
*/
/**
* @typedef {object} sortCSSMediaQueriesOptions
* @property {boolean=} unitlessMqAlwaysFirst unitless media queries first. Defaults to false
*/
/**
* @typedef {object} pluginOptions
* @property {'mobile-first'|'desktop-first'|sortFn=} sort Sort strategy.
* @property {false|sortCSSMediaQueriesOptions=} configuration sort-css-media-queries options.
* @property {boolean=} onlyTopLevel Whether to sort the top level only or not. Defaults to false.
* @property {boolean=} recursive Whether to sort recursively or not. Defaults to false.
* @property {string|RegExp=} pattern string or regex pattern to math media querie like atRules. Defaults to 'media'.
*/
/**
* Plugin constructor
* @param {pluginOptions} opts - plugin options
* @returns {Plugin} - plugin object
*/
module.exports = (opts = {}) => {
const {sort, configuration, onlyTopLevel, pattern, recursive} = Object.assign(
{
sort: 'mobile-first',
pattern: 'media',
},
opts
)
const createSort = require('sort-css-media-queries/lib/create-sort');
/** @type {SortCSSmq} */
const sortCSSmq = configuration ? createSort(configuration) : require('sort-css-media-queries');
return {
postcssPlugin: 'postcss-sort-media-queries',
OnceExit (root, {AtRule}) {
/**
* Sort query strings
* @param {string[]} queries - Query string array
*/
function sortAtRules(queries) {
if (typeof sort !== 'function') {
return queries.sort(sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq)
}
return queries.sort(sort)
}
/**
* Recursively sort CSS media queries
* @template {AtRule|Root} T
* @param {T} localRoot - Root or atRule instance
*/
function recursivelySort(localRoot){
/** @type {{[key: string]: AtRule}} */
const atRules = {};
localRoot.walkAtRules(pattern, atRule => {
const atRuleIndex = localRoot.index(atRule)
const query = atRule.params;
if (atRuleIndex === -1 || onlyTopLevel && atRule.parent && atRule.parent.type !== 'root') return;
if (!atRules[query]) {
atRules[query] = new AtRule({
name: atRule.name,
params: atRule.params,
source: atRule.source
})
}
atRules[query].append(atRule.nodes);
atRule.remove();
})
const atRulesKeys = Object.keys(atRules);
if (!atRulesKeys.length) return;
sortAtRules(atRulesKeys).forEach(query => {
if (!onlyTopLevel && recursive) recursivelySort(atRules[query]);
localRoot.append(atRules[query]);
});
}
recursivelySort(root);
}
}
}
module.exports.postcss = true