1 | 'use strict';
|
---|
2 |
|
---|
3 | var timsort = require('timsort');
|
---|
4 |
|
---|
5 | function _interopNamespace(e) {
|
---|
6 | if (e && e.__esModule) return e;
|
---|
7 | var n = Object.create(null);
|
---|
8 | if (e) {
|
---|
9 | Object.keys(e).forEach(function (k) {
|
---|
10 | if (k !== 'default') {
|
---|
11 | var d = Object.getOwnPropertyDescriptor(e, k);
|
---|
12 | Object.defineProperty(n, k, d.get ? d : {
|
---|
13 | enumerable: true,
|
---|
14 | get: function () {
|
---|
15 | return e[k];
|
---|
16 | }
|
---|
17 | });
|
---|
18 | }
|
---|
19 | });
|
---|
20 | }
|
---|
21 | n['default'] = e;
|
---|
22 | return Object.freeze(n);
|
---|
23 | }
|
---|
24 |
|
---|
25 | const shorthandData = {
|
---|
26 | 'animation': [
|
---|
27 | 'animation-name',
|
---|
28 | 'animation-duration',
|
---|
29 | 'animation-timing-function',
|
---|
30 | 'animation-delay',
|
---|
31 | 'animation-iteration-count',
|
---|
32 | 'animation-direction',
|
---|
33 | 'animation-fill-mode',
|
---|
34 | 'animation-play-state',
|
---|
35 | ],
|
---|
36 | 'background': [
|
---|
37 | 'background-image',
|
---|
38 | 'background-size',
|
---|
39 | 'background-position',
|
---|
40 | 'background-repeat',
|
---|
41 | 'background-origin',
|
---|
42 | 'background-clip',
|
---|
43 | 'background-attachment',
|
---|
44 | 'background-color',
|
---|
45 | ],
|
---|
46 | 'border': [
|
---|
47 | 'border-top',
|
---|
48 | 'border-right',
|
---|
49 | 'border-bottom',
|
---|
50 | 'border-left',
|
---|
51 | 'border-width',
|
---|
52 | 'border-style',
|
---|
53 | 'border-color',
|
---|
54 | 'border-top-width',
|
---|
55 | 'border-right-width',
|
---|
56 | 'border-bottom-width',
|
---|
57 | 'border-left-width',
|
---|
58 | 'border-top-style',
|
---|
59 | 'border-right-style',
|
---|
60 | 'border-bottom-style',
|
---|
61 | 'border-left-style',
|
---|
62 | 'border-top-color',
|
---|
63 | 'border-right-color',
|
---|
64 | 'border-bottom-color',
|
---|
65 | 'border-left-color',
|
---|
66 | ],
|
---|
67 | 'border-top': [
|
---|
68 | 'border-width',
|
---|
69 | 'border-style',
|
---|
70 | 'border-color',
|
---|
71 | 'border-top-width',
|
---|
72 | 'border-top-style',
|
---|
73 | 'border-top-color',
|
---|
74 | ],
|
---|
75 | 'border-right': [
|
---|
76 | 'border-width',
|
---|
77 | 'border-style',
|
---|
78 | 'border-color',
|
---|
79 | 'border-right-width',
|
---|
80 | 'border-right-style',
|
---|
81 | 'border-right-color',
|
---|
82 | ],
|
---|
83 | 'border-bottom': [
|
---|
84 | 'border-width',
|
---|
85 | 'border-style',
|
---|
86 | 'border-color',
|
---|
87 | 'border-bottom-width',
|
---|
88 | 'border-bottom-style',
|
---|
89 | 'border-bottom-color',
|
---|
90 | ],
|
---|
91 | 'border-left': [
|
---|
92 | 'border-width',
|
---|
93 | 'border-style',
|
---|
94 | 'border-color',
|
---|
95 | 'border-left-width',
|
---|
96 | 'border-left-style',
|
---|
97 | 'border-left-color',
|
---|
98 | ],
|
---|
99 | 'border-color': [
|
---|
100 | 'border-top-color',
|
---|
101 | 'border-bottom-color',
|
---|
102 | 'border-left-color',
|
---|
103 | 'border-right-color',
|
---|
104 | ],
|
---|
105 | 'border-width': [
|
---|
106 | 'border-top-width',
|
---|
107 | 'border-bottom-width',
|
---|
108 | 'border-left-width',
|
---|
109 | 'border-right-width',
|
---|
110 | ],
|
---|
111 | 'border-style': [
|
---|
112 | 'border-top-style',
|
---|
113 | 'border-bottom-style',
|
---|
114 | 'border-left-style',
|
---|
115 | 'border-right-style',
|
---|
116 | ],
|
---|
117 | 'border-radius': [
|
---|
118 | 'border-top-right-radius',
|
---|
119 | 'border-top-left-radius',
|
---|
120 | 'border-bottom-right-radius',
|
---|
121 | 'border-bottom-left-radius',
|
---|
122 | ],
|
---|
123 | 'border-block-start': [
|
---|
124 | 'border-block-start-width',
|
---|
125 | 'border-block-start-style',
|
---|
126 | 'border-block-start-color',
|
---|
127 | ],
|
---|
128 | 'border-block-end': [
|
---|
129 | 'border-block-end-width',
|
---|
130 | 'border-block-end-style',
|
---|
131 | 'border-block-end-color',
|
---|
132 | ],
|
---|
133 | 'border-image': [
|
---|
134 | 'border-image-source',
|
---|
135 | 'border-image-slice',
|
---|
136 | 'border-image-width',
|
---|
137 | 'border-image-outset',
|
---|
138 | 'border-image-repeat',
|
---|
139 | ],
|
---|
140 | 'border-inline-start': [
|
---|
141 | 'border-inline-start-width',
|
---|
142 | 'border-inline-start-style',
|
---|
143 | 'border-inline-start-color',
|
---|
144 | ],
|
---|
145 | 'border-inline-end': [
|
---|
146 | 'border-inline-end-width',
|
---|
147 | 'border-inline-end-style',
|
---|
148 | 'border-inline-end-color',
|
---|
149 | ],
|
---|
150 | 'columns': [
|
---|
151 | 'column-width',
|
---|
152 | 'column-count',
|
---|
153 | ],
|
---|
154 | 'column-rule': [
|
---|
155 | 'column-rule-width',
|
---|
156 | 'column-rule-style',
|
---|
157 | 'column-rule-color',
|
---|
158 | ],
|
---|
159 | 'flex': [
|
---|
160 | 'flex-grow',
|
---|
161 | 'flex-shrink',
|
---|
162 | 'flex-basis',
|
---|
163 | ],
|
---|
164 | 'flex-flow': [
|
---|
165 | 'flex-direction',
|
---|
166 | 'flex-wrap',
|
---|
167 | ],
|
---|
168 | 'font': [
|
---|
169 | 'font-style',
|
---|
170 | 'font-variant',
|
---|
171 | 'font-weight',
|
---|
172 | 'font-stretch',
|
---|
173 | 'font-size',
|
---|
174 | 'font-family',
|
---|
175 | 'line-height',
|
---|
176 | ],
|
---|
177 | 'grid': [
|
---|
178 | 'grid-template-rows',
|
---|
179 | 'grid-template-columns',
|
---|
180 | 'grid-template-areas',
|
---|
181 | 'grid-auto-rows',
|
---|
182 | 'grid-auto-columns',
|
---|
183 | 'grid-auto-flow',
|
---|
184 | 'column-gap',
|
---|
185 | 'row-gap',
|
---|
186 | ],
|
---|
187 | 'grid-area': [
|
---|
188 | 'grid-row-start',
|
---|
189 | 'grid-column-start',
|
---|
190 | 'grid-row-end',
|
---|
191 | 'grid-column-end',
|
---|
192 | ],
|
---|
193 | 'grid-column': [
|
---|
194 | 'grid-column-start',
|
---|
195 | 'grid-column-end',
|
---|
196 | ],
|
---|
197 | 'grid-row': [
|
---|
198 | 'grid-row-start',
|
---|
199 | 'grid-row-end',
|
---|
200 | ],
|
---|
201 | 'grid-template': [
|
---|
202 | 'grid-template-columns',
|
---|
203 | 'grid-template-rows',
|
---|
204 | 'grid-template-areas',
|
---|
205 | ],
|
---|
206 | 'list-style': [
|
---|
207 | 'list-style-type',
|
---|
208 | 'list-style-position',
|
---|
209 | 'list-style-image',
|
---|
210 | ],
|
---|
211 | 'margin': [
|
---|
212 | 'margin-top',
|
---|
213 | 'margin-right',
|
---|
214 | 'margin-bottom',
|
---|
215 | 'margin-left',
|
---|
216 | ],
|
---|
217 | 'mask': [
|
---|
218 | 'mask-image',
|
---|
219 | 'mask-mode',
|
---|
220 | 'mask-position',
|
---|
221 | 'mask-size',
|
---|
222 | 'mask-repeat',
|
---|
223 | 'mask-origin',
|
---|
224 | 'mask-clip',
|
---|
225 | 'mask-composite',
|
---|
226 | ],
|
---|
227 | 'outline': [
|
---|
228 | 'outline-color',
|
---|
229 | 'outline-style',
|
---|
230 | 'outline-width',
|
---|
231 | ],
|
---|
232 | 'overflow': [
|
---|
233 | 'overflow-x',
|
---|
234 | 'overflow-y',
|
---|
235 | ],
|
---|
236 | 'padding': [
|
---|
237 | 'padding-top',
|
---|
238 | 'padding-right',
|
---|
239 | 'padding-bottom',
|
---|
240 | 'padding-left',
|
---|
241 | ],
|
---|
242 | 'padding-inline': [
|
---|
243 | 'padding-inline-start',
|
---|
244 | 'padding-inline-end',
|
---|
245 | ],
|
---|
246 | 'padding-inline-start': [
|
---|
247 | 'padding-top',
|
---|
248 | 'padding-right',
|
---|
249 | 'padding-bottom',
|
---|
250 | 'padding-left',
|
---|
251 | ],
|
---|
252 | 'padding-inline-end': [
|
---|
253 | 'padding-top',
|
---|
254 | 'padding-right',
|
---|
255 | 'padding-bottom',
|
---|
256 | 'padding-left',
|
---|
257 | ],
|
---|
258 | 'place-content': [
|
---|
259 | 'align-content',
|
---|
260 | 'justify-content',
|
---|
261 | ],
|
---|
262 | 'place-items': [
|
---|
263 | 'align-items',
|
---|
264 | 'justify-items',
|
---|
265 | ],
|
---|
266 | 'place-self': [
|
---|
267 | 'align-self',
|
---|
268 | 'justify-self',
|
---|
269 | ],
|
---|
270 | 'text-decoration': [
|
---|
271 | 'text-decoration-color',
|
---|
272 | 'text-decoration-style',
|
---|
273 | 'text-decoration-line',
|
---|
274 | ],
|
---|
275 | 'transition': [
|
---|
276 | 'transition-delay',
|
---|
277 | 'transition-duration',
|
---|
278 | 'transition-property',
|
---|
279 | 'transition-timing-function',
|
---|
280 | ],
|
---|
281 | 'text-emphasis': [
|
---|
282 | 'text-emphasis-style',
|
---|
283 | 'text-emphasis-color',
|
---|
284 | ],
|
---|
285 | };
|
---|
286 |
|
---|
287 | const builtInOrders = [
|
---|
288 | 'alphabetical',
|
---|
289 | 'concentric-css',
|
---|
290 | 'smacss',
|
---|
291 | ];
|
---|
292 |
|
---|
293 | const pluginEntrypoint = ({ order = 'alphabetical', keepOverrides = false } = {}) => ({
|
---|
294 | postcssPlugin: 'css-declaration-sorter',
|
---|
295 | OnceExit (css) {
|
---|
296 | let withKeepOverrides = comparator => comparator;
|
---|
297 | if (keepOverrides) {
|
---|
298 | withKeepOverrides = withOverridesComparator(shorthandData);
|
---|
299 | }
|
---|
300 |
|
---|
301 | if (typeof order === 'function') {
|
---|
302 | return processCss({ css, comparator: withKeepOverrides(order) });
|
---|
303 | }
|
---|
304 |
|
---|
305 | if (!builtInOrders.includes(order))
|
---|
306 | return Promise.reject(
|
---|
307 | Error([
|
---|
308 | `Invalid built-in order '${order}' provided.`,
|
---|
309 | `Available built-in orders are: ${builtInOrders}`,
|
---|
310 | ].join('\n'))
|
---|
311 | );
|
---|
312 |
|
---|
313 | return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(`../orders/${order}.cjs`)); })
|
---|
314 | .then(({ properties }) => processCss({
|
---|
315 | css,
|
---|
316 | comparator: withKeepOverrides(orderComparator(properties)),
|
---|
317 | }));
|
---|
318 | },
|
---|
319 | });
|
---|
320 |
|
---|
321 | pluginEntrypoint.postcss = true;
|
---|
322 |
|
---|
323 | function processCss ({ css, comparator }) {
|
---|
324 | const comments = [];
|
---|
325 | const rulesCache = [];
|
---|
326 |
|
---|
327 | css.walk(node => {
|
---|
328 | const nodes = node.nodes;
|
---|
329 | const type = node.type;
|
---|
330 |
|
---|
331 | if (type === 'comment') {
|
---|
332 | // Don't do anything to root comments or the last newline comment
|
---|
333 | const isNewlineNode = node.raws.before && node.raws.before.includes('\n');
|
---|
334 | const lastNewlineNode = isNewlineNode && !node.next();
|
---|
335 | const onlyNode = !node.prev() && !node.next() || !node.parent;
|
---|
336 |
|
---|
337 | if (lastNewlineNode || onlyNode || node.parent.type === 'root') {
|
---|
338 | return;
|
---|
339 | }
|
---|
340 |
|
---|
341 | if (isNewlineNode) {
|
---|
342 | const pairedNode = node.next() || node.prev();
|
---|
343 | if (pairedNode) {
|
---|
344 | comments.unshift({
|
---|
345 | 'comment': node,
|
---|
346 | 'pairedNode': pairedNode,
|
---|
347 | 'insertPosition': node.next() ? 'Before' : 'After',
|
---|
348 | });
|
---|
349 | node.remove();
|
---|
350 | }
|
---|
351 | } else {
|
---|
352 | const pairedNode = node.prev() || node.next();
|
---|
353 | if (pairedNode) {
|
---|
354 | comments.push({
|
---|
355 | 'comment': node,
|
---|
356 | 'pairedNode': pairedNode,
|
---|
357 | 'insertPosition': 'After',
|
---|
358 | });
|
---|
359 | node.remove();
|
---|
360 | }
|
---|
361 | }
|
---|
362 | return;
|
---|
363 | }
|
---|
364 |
|
---|
365 | // Add rule-like nodes to a cache so that we can remove all
|
---|
366 | // comment nodes before we start sorting.
|
---|
367 | const isRule = type === 'rule' || type === 'atrule';
|
---|
368 | if (isRule && nodes && nodes.length > 1) {
|
---|
369 | rulesCache.push(nodes);
|
---|
370 | }
|
---|
371 | });
|
---|
372 |
|
---|
373 | // Perform a sort once all comment nodes are removed
|
---|
374 | rulesCache.forEach(nodes => {
|
---|
375 | sortCssDeclarations({ nodes, comparator });
|
---|
376 | });
|
---|
377 |
|
---|
378 | // Add comments back to the nodes they are paired with
|
---|
379 | comments.forEach(node => {
|
---|
380 | const pairedNode = node.pairedNode;
|
---|
381 | node.comment.remove();
|
---|
382 | pairedNode.parent['insert' + node.insertPosition](pairedNode, node.comment);
|
---|
383 | });
|
---|
384 | }
|
---|
385 |
|
---|
386 | function sortCssDeclarations ({ nodes, comparator }) {
|
---|
387 | timsort.sort(nodes, (a, b) => {
|
---|
388 | if (a.type === 'decl' && b.type === 'decl') {
|
---|
389 | return comparator(a.prop, b.prop);
|
---|
390 | } else {
|
---|
391 | return compareDifferentType(a, b);
|
---|
392 | }
|
---|
393 | });
|
---|
394 | }
|
---|
395 |
|
---|
396 | function withOverridesComparator (shorthandData) {
|
---|
397 | return function (comparator) {
|
---|
398 | return function (a, b) {
|
---|
399 | a = removeVendorPrefix(a);
|
---|
400 | b = removeVendorPrefix(b);
|
---|
401 |
|
---|
402 | if (shorthandData[a] && shorthandData[a].includes(b)) return 0;
|
---|
403 | if (shorthandData[b] && shorthandData[b].includes(a)) return 0;
|
---|
404 |
|
---|
405 | return comparator(a, b);
|
---|
406 | };
|
---|
407 | };
|
---|
408 | }
|
---|
409 |
|
---|
410 | function orderComparator (order) {
|
---|
411 | return function (a, b) {
|
---|
412 | return order.indexOf(a) - order.indexOf(b);
|
---|
413 | };
|
---|
414 | }
|
---|
415 |
|
---|
416 | function compareDifferentType (a, b) {
|
---|
417 | if (b.type === 'atrule') {
|
---|
418 | return 0;
|
---|
419 | }
|
---|
420 |
|
---|
421 | return a.type === 'decl' ? -1 : b.type === 'decl' ? 1 : 0;
|
---|
422 | }
|
---|
423 |
|
---|
424 | function removeVendorPrefix (property) {
|
---|
425 | return property.replace(/^-\w+-/, '');
|
---|
426 | }
|
---|
427 |
|
---|
428 | module.exports = pluginEntrypoint;
|
---|